/* Little Bear: a crib mobile. A ring hangs from the top of the hero with a cloud, two stars, a balloon and another cloud on threads,
   swaying slowly; the bear sits with its leaves on the lilac floor of the print suite's first page, the words in the air between.
   Down the page the countdown is stacked toy blocks, the bunny sleeps on a cloud by the story, the toys play around the day,
   the bear floats up with its balloons by the gifts, and the RSVP is a stitched baby quilt. One skin for every baby occasion. */
.esite-skin-little-bear {
  --sk-accent-font: "Caveat", cursive;
  --sk-accent-style: normal;
  --sk-photo-shape: none;
  --sk-gap: 90px;
  --sk-measure: 860px;
}
.esite-skin-little-bear .ss-h, .esite-skin-little-bear .cl-names, .esite-skin-little-bear .ss-closing-names { font-weight: 600; letter-spacing: 0; }
.esite-skin-little-bear .ss-h { font-size: calc(clamp(2.2rem, 4vw, 3.2rem) * var(--s-hscale, 1)); color: var(--s-accent); }

/* ---- hero: the mobile above, the bear on its floor below ---- */
.esite-skin-little-bear .ss-hero.hs-classic.no-photo { position: relative; overflow: hidden; background: var(--s-bg); }
.esite-skin-little-bear .hs-classic.no-photo .cl-panel {
  --f: clamp(100px, 17svh, 200px);   /* the floor's height */
  --m: min(70vw, 400px, 30svh);      /* the mobile's size: it hangs from the top of the hero, ring and hook in view */
  grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; min-height: calc(100svh - 38px);
  padding: calc(var(--m) + 76px) 20px calc(var(--f) + 40px);   /* 66px: the fixed bar over the hero's top */ background: none; overflow: visible; position: relative;
}
/* the floor, and the bear sitting on it at the left with its leaves */
.esite-skin-little-bear .hs-classic.no-photo .cl-panel::before {
  display: block; inset: auto 0 0; height: var(--f); z-index: 0; background: var(--sk-floor, none) 0 0 / 100% 100% no-repeat;
}
.esite-skin-little-bear .hs-classic.no-photo .cl-panel::after {
  display: block; left: max(2vw, calc(50% - 640px)); right: auto; top: auto; bottom: calc(var(--f) * .4); width: min(24vw, 400px, 42svh); aspect-ratio: 1257 / 1300; height: auto; z-index: 1;
  border: 0; background: var(--sk-scene, none) 50% 100% / contain no-repeat;
}
/* the mobile hangs from the top, swinging from its hook */
.esite-skin-little-bear .hs-classic.no-photo .cl-text { position: relative; z-index: 2; max-width: min(620px, calc(100vw - 2 * (min(24vw, 400px) + 4vw))); }   /* clear of both bears */
.esite-skin-little-bear .hs-classic.no-photo .cl-text::before {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 6px); width: var(--m); aspect-ratio: 1; translate: -50% 0;
  background: var(--sk-mobile, none) 50% 0 / contain no-repeat; transform-origin: 50% 0; animation: lb-sway 7s ease-in-out infinite alternate; pointer-events: none;
}
/* the other bear floating up with its balloons at the right, on the side away from the sitting one */
.esite-skin-little-bear .hs-classic.no-photo .cl-text::after {
  content: ""; position: absolute; left: calc(100% + max(2vw, 20px)); bottom: -40px; width: min(15vw, 210px); aspect-ratio: 695 / 1169; z-index: 1; pointer-events: none;
  background: var(--sk-bear-balloons, none) 50% 100% / contain no-repeat; animation: lb-float 6s ease-in-out infinite alternate;
}
@keyframes lb-sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@keyframes lb-float { from { transform: translateY(0); } to { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .esite-skin-little-bear .hs-classic.no-photo .cl-text::before, .esite-skin-little-bear .hs-classic.no-photo .cl-text::after { animation: none; } }

.esite-skin-little-bear .cl-panel .h-kicker { margin: 0 0 6px; font-family: var(--s-fbody); font-size: .75rem; font-style: normal; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--s-text); }
.esite-skin-little-bear .hs-classic .cl-names { justify-items: center; font-size: calc(clamp(3.4rem, 7.5vw, 6rem) * var(--s-hscale, 1)); line-height: 1; color: var(--s-accent); }
.esite-skin-little-bear .hs-classic .cl-names .cn-1, .esite-skin-little-bear .hs-classic .cl-names .cn-2 { justify-self: center; padding: 0; }
.esite-skin-little-bear .cl-sub { margin-top: 10px; font-size: .8125rem; letter-spacing: .04em; }
.esite-skin-little-bear .cl-facts { margin: 10px 0 18px; }
.esite-skin-little-bear .cl-facts b { font-family: var(--s-fbody); font-weight: 500; font-size: .8125rem; letter-spacing: .2em; text-transform: uppercase; }
.esite-skin-little-bear .cl-facts span { font-family: var(--s-fhead); font-size: 1.35rem; }
/* a photo: framed like a little picture on the nursery wall, a star in its corner */
.esite-skin-little-bear .hs-classic:not(.no-photo):not(.hv-cover) .cl-photo, .esite-skin-little-bear .ss-story-img img { border-radius: 26px; border: 8px solid #fff; box-shadow: 0 18px 40px -24px rgba(40, 30, 30, .45); }
.esite-skin-little-bear .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual { overflow: visible; }
.esite-skin-little-bear .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual::after { inset: auto -18px -26px auto; width: 34%; aspect-ratio: 1; height: auto; z-index: 3; border: 0; background: var(--sk-bear-balloons, none) 50% 100% / contain no-repeat; }

/* ---- sections ---- */
.esite-skin-little-bear .ss-scope:not([data-type="hero"]):not([data-type="countdown"]):not([data-type="none"]) .ss-h::before { width: 34px; height: 34px; margin-bottom: 8px; }
.esite-skin-little-bear .ss-closing::before { width: min(90vw, 760px); height: 130px; background: var(--sk-bunting, none) 50% 0 / contain no-repeat; }
.esite-skin-little-bear .ss-scope[data-type="story"]::before { top: auto; bottom: 10px; right: max(1vw, calc(50% - 660px)); left: auto; width: clamp(170px, 18vw, 280px); aspect-ratio: 809 / 697; background: var(--sk-bunny, none) 100% 100% / contain no-repeat; }
.esite-skin-little-bear .ss-scope[data-type="story"]::after { content: ""; position: absolute; bottom: -24px; right: max(0vw, calc(50% - 680px)); width: clamp(210px, 22vw, 340px); aspect-ratio: 627 / 322; background: var(--sk-cloud-c, none) 100% 100% / contain no-repeat; pointer-events: none; z-index: 0; }
.esite-skin-little-bear .ss-scope[data-type="schedule"]::before { top: 30px; left: max(2vw, calc(50% - 640px)); right: auto; width: clamp(80px, 8vw, 120px); aspect-ratio: 303 / 495; background: var(--sk-rocket, none) 0 0 / contain no-repeat; transform: rotate(16deg); }
.esite-skin-little-bear .ss-scope[data-type="schedule"]::after { content: ""; position: absolute; bottom: 20px; right: max(2vw, calc(50% - 640px)); width: clamp(110px, 11vw, 170px); aspect-ratio: 414 / 497; background: var(--sk-stacker, none) 100% 100% / contain no-repeat; pointer-events: none; }
.esite-skin-little-bear .ss-scope[data-type="gifts"]::before { top: 24px; left: max(2vw, calc(50% - 600px)); right: auto; width: clamp(90px, 9vw, 140px); aspect-ratio: 290 / 326; background: var(--sk-balloon, none) 0 0 / contain no-repeat; }
.esite-skin-little-bear .ss-scope[data-type="faq"]::before { top: auto; bottom: 20px; left: max(2vw, calc(50% - 640px)); right: auto; width: clamp(90px, 9vw, 140px); aspect-ratio: 1; background: var(--sk-beachball, none) 0 100% / contain no-repeat; }
.esite-skin-little-bear .ss-scope[data-type="schedule"], .esite-skin-little-bear .ss-scope[data-type="faq"] { background-color: var(--sk-sec-bg, var(--s-band)); }

/* ---- countdown: toy blocks, each number on its own block ---- */
.esite-skin-little-bear .ss-scope[data-type="countdown"]:has(.cdv-tiles) { background-color: var(--sk-sec-bg, var(--s-bg)); }
.esite-skin-little-bear .cdv-tiles .ss-h { font-size: calc(clamp(1.8rem, 3vw, 2.4rem) * var(--s-hscale, 1)); }
.esite-skin-little-bear .cdv-tiles .ss-cd { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: clamp(8px, 2vw, 22px); }
.esite-skin-little-bear .cdv-tiles .cd-unit {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center !important; gap: 0; width: clamp(92px, 12vw, 140px); aspect-ratio: 1;
  padding: 20% 16% 4% 4%; border: 0 !important; border-radius: 0; outline: 0; color: #fff; background: var(--sk-block-0, none) 50% 50% / 100% 100% no-repeat !important; box-shadow: none;
}
.esite-skin-little-bear .cdv-tiles .cd-unit:nth-child(3n+2) { background-image: var(--sk-block-1, none) !important; transform: translateY(-10px) rotate(-4deg); }
.esite-skin-little-bear .cdv-tiles .cd-unit:nth-child(3n) { background-image: var(--sk-block-2, none) !important; transform: rotate(3deg); }
.esite-skin-little-bear .cdv-tiles .cd-unit::before, .esite-skin-little-bear .cdv-tiles .cd-unit::after { display: none !important; }
/* the number and its word sit on the block's front face (x 5-83 %, y 22-92 % of the drawing) */
.esite-skin-little-bear .cdv-tiles .cd-unit { position: relative; }
.esite-skin-little-bear .cdv-tiles .cd-unit > .cd-n, .esite-skin-little-bear .cdv-tiles .cd-unit > .cd-l { position: absolute !important; left: 5%; right: 17%; margin: 0; text-align: center; transform: none; }
.esite-skin-little-bear .cdv-tiles .cd-unit > .cd-n { top: 36%; }
.esite-skin-little-bear .cdv-tiles .cd-unit > .cd-l { top: 68%; }
.esite-skin-little-bear .ss-countdown .cd-n { font-family: var(--s-fbody) !important; font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
.esite-skin-little-bear .cdv-tiles .cd-l { color: #fff; text-transform: uppercase; letter-spacing: .14em; font-size: .625rem; font-weight: 600; }
.esite-skin-little-bear .ss-scope[data-type="countdown"]:not(:has(.cdv-tiles)) { background-color: var(--sk-sec-bg, var(--s-band)); color: var(--s-text); }
.esite-skin-little-bear .ss-scope[data-type="countdown"]:not(:has(.cdv-tiles)) :is(.ss-h, .cd-n, .cd-l) { color: var(--s-text); }

/* ---- the day, questions ---- */
.esite-skin-little-bear .schv-wide .ss-tl-time { font-family: var(--s-fhead); color: var(--s-accent); font-size: 1.5rem; }
.esite-skin-little-bear .ss-tl-title { font-family: var(--s-fbody); font-size: 1rem; font-weight: 500; }
.esite-skin-little-bear .ss-faq-q { font-family: var(--s-fbody); font-size: 1rem; font-weight: 500; }

/* ---- registry ---- */
.esite-skin-little-bear .gftv-panel .ss-wrap { aspect-ratio: auto; width: min(600px, 100%); padding: 0; background: none; }
.esite-skin-little-bear .gftv-panel .ss-h::before { display: block !important; }

/* ---- RSVP: a stitched baby quilt ---- */
.esite-skin-little-bear .ss-scope[data-type="rsvp"]::before { display: none; }
.esite-skin-little-bear .ss-scope[data-type="rsvp"]::after { display: none; }
.esite-skin-little-bear .ss-rsvp-form {
  position: relative; max-width: 560px; padding: 46px 40px 40px; border-radius: 28px; background: #fff;
  border: 10px solid color-mix(in srgb, var(--s-accent) 22%, var(--s-bg)); outline: 2px dashed color-mix(in srgb, var(--s-accent) 55%, transparent); outline-offset: -20px;
  box-shadow: 0 22px 46px -30px rgba(40, 30, 30, .4);
}

@media (max-width: 900px) {
  .esite-skin-little-bear .hs-classic.no-photo .cl-panel { --f: 120px; --m: min(80vw, 320px); min-height: 0; padding: calc(var(--m) + 70px) 16px 300px; }
  .esite-skin-little-bear .hs-classic.no-photo .cl-panel::after { left: 50%; translate: -50% 0; width: min(56vw, 250px); bottom: 30px; }
  .esite-skin-little-bear .hs-classic.no-photo .cl-text::after { display: none; }
  .esite-skin-little-bear .hs-classic .cl-names { font-size: calc(3.2rem * var(--s-hscale, 1)); }
  .esite-skin-little-bear .cl-facts b { font-size: .6875rem; letter-spacing: .1em; }
  .esite-skin-little-bear .ss-scope[data-type="story"]::before, .esite-skin-little-bear .ss-scope[data-type="story"]::after,
  .esite-skin-little-bear .ss-scope[data-type="schedule"]::before, .esite-skin-little-bear .ss-scope[data-type="schedule"]::after,
  .esite-skin-little-bear .ss-scope[data-type="faq"]::before { display: none; }
  .esite-skin-little-bear .ss-rsvp-form { padding: 40px 22px 30px; }
}
@media (max-width: 640px) {
  .esite-skin-little-bear .cdv-tiles .ss-cd { flex-wrap: nowrap; gap: 4px; }
  .esite-skin-little-bear .cdv-tiles .cd-unit { width: 22vw; }
  .esite-skin-little-bear .ss-countdown .cd-n { font-size: 1.5rem; }
  .esite-skin-little-bear .cdv-tiles .cd-l { letter-spacing: .04em; font-size: .5rem; }
}

/* ---- each baby occasion dressed its own way (the page carries .esite-occ-<occasion>) ---- */
/* a gender reveal: a pink balloon and a blue one on the mobile, the floating bear's bunch pink and blue, the floor half and half */
.esite-skin-little-bear.esite-occ-gender-reveal .hs-classic.no-photo .cl-text::before { background-image: var(--sk-mobile-reveal, none); }   /* the art variables are inline: swap the images, not the variables */
.esite-skin-little-bear.esite-occ-gender-reveal .hs-classic.no-photo .cl-text::after,
.esite-skin-little-bear.esite-occ-gender-reveal .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual::after { background-image: var(--sk-bear-balloons-reveal, none); }
.esite-skin-little-bear.esite-occ-gender-reveal .hs-classic.no-photo .cl-panel::before { background: linear-gradient(90deg, #f6c3d5 0 50%, #c6e1f3 50% 100%); }
.esite-skin-little-bear.esite-occ-gender-reveal .hs-classic .cl-names { background: linear-gradient(90deg, #d9578a, #3f74a0); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* a first birthday: toys on the mobile and bunting across the top of the hero */
.esite-skin-little-bear.esite-occ-first-birthday .hs-classic.no-photo .cl-text::before { background-image: var(--sk-mobile-toys, none); }
.esite-skin-little-bear.esite-occ-first-birthday .ss-hero.hs-classic.no-photo::before {
  content: ""; position: absolute; inset: 52px 0 auto; height: clamp(50px, 6.5vw, 100px); z-index: 1; pointer-events: none;   /* two strings, the mobile hangs between */
  background: var(--sk-bunting, none) left 0 top 0 / auto 100% no-repeat, var(--sk-bunting, none) right 0 top 0 / auto 100% no-repeat;
}
.esite-skin-little-bear.esite-occ-first-birthday .ss-closing::before { background-image: var(--sk-bunting, none); }
@media (max-width: 900px) { .esite-skin-little-bear.esite-occ-first-birthday .ss-hero.hs-classic.no-photo::before { display: none; } }