/* Lion Cub: a flight over the clouds. The little plane comes in over the names on a looping dotted trail and hums at the top right, the
   lion cub sits at the hero's foot on a bank of watercolor clouds, the rainbow on its cloud stands on the right. Down the page the
   countdown numbers sit on bodysuits and bibs, each heading wears a blue star, the rattle by the story, the bottle by the schedule, the
   lion beside the RSVP card. A gender reveal hangs a pink and a blue bodysuit either side of the names; a first birthday sets the lion and
   the bear on their cloud in the lion's place. The hero is never isolated: the fixed nav lives inside it. */
.esite-skin-lion-cub {
  --sk-accent-font: "Nunito", sans-serif;
  --sk-accent-style: normal;
  --sk-photo-shape: none;
  --sk-gap: 96px;
  --sk-measure: 860px;
}
.esite-skin-lion-cub .ss-h, .esite-skin-lion-cub .cl-names, .esite-skin-lion-cub .ss-closing-names { font-weight: 400; letter-spacing: 0; text-transform: none; }
.esite-skin-lion-cub .ss-h { font-size: calc(clamp(3rem, 5.4vw, 4.4rem) * var(--s-hscale, 1)); line-height: 1; color: var(--s-accent); }

/* ---- hero: the trail and the plane above, the lion and the rainbow on a bank of clouds below ---- */
.esite-skin-lion-cub .ss-hero.hs-classic.no-photo { position: relative; overflow: hidden; background: var(--s-bg); }
.esite-skin-lion-cub .ss-hero.hs-classic.no-photo::before {   /* the looping trail, stars, hearts and gold dots */
  content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background: var(--sk-trail, none) calc(50% - 140px) 50px / min(1040px, 90vw) auto no-repeat,
              var(--sk-star, none) 14% 30% / 26px auto no-repeat, var(--sk-star, none) 88% 52% / 20px auto no-repeat, var(--sk-star, none) 38% 92% / 16px auto no-repeat,
              var(--sk-dot, none) 22% 44% / 16px auto no-repeat, var(--sk-dot, none) 70% 40% / 20px auto no-repeat, var(--sk-dot, none) 60% 74% / 14px auto no-repeat;
}
.esite-skin-lion-cub .ss-hero.hs-classic.no-photo::after {    /* the bank of watercolor clouds and the rainbow on its cloud */
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: -2px; height: clamp(150px, 18vw, 260px); pointer-events: none;
  background: var(--sk-rainbow-cloud, none) calc(100% - max(2vw, calc(50% - 640px))) 100% / auto 100% no-repeat,
              var(--sk-cloud-l, none) -4% 100% / auto 46% no-repeat, var(--sk-clouds, none) 46% 120% / auto 62% no-repeat,
              var(--sk-cloud-l, none) 80% 112% / auto 40% no-repeat;
}
.esite-skin-lion-cub .hs-classic.no-photo .cl-panel {
  grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; position: static; overflow: visible; background: none; box-shadow: none;
  width: min(1200px, 100%); margin: 0 auto; min-height: min(900px, 100svh); padding: clamp(190px, 19vw, 280px) clamp(28px, 24vw, 340px) clamp(150px, 16vw, 230px);
}
.esite-skin-lion-cub .hs-classic.no-photo .cl-panel::before {   /* the lion cub sitting on the clouds, bottom left */
  display: block; content: ""; position: absolute; z-index: 3; inset: auto; left: max(1vw, calc(50% - 650px)); bottom: clamp(30px, 4vw, 60px); height: min(48%, 400px, 30vw); aspect-ratio: 1.029; width: auto; border: 0; translate: none; pointer-events: none;
  background: var(--sk-lion, none) 50% 100% / contain no-repeat;
}
.esite-skin-lion-cub .hs-classic.no-photo .cl-panel::after {    /* the plane at the end of its trail, top right */
  display: block; content: ""; position: absolute; z-index: 1; inset: auto; right: max(2vw, calc(50% - 620px)); top: clamp(80px, 7vw, 110px); width: clamp(160px, 18vw, 270px); aspect-ratio: 1.696; height: auto; border: 0; pointer-events: none;
  background: var(--sk-plane, none) 50% 50% / contain no-repeat; animation: lc-fly 6s ease-in-out infinite;
}
.esite-skin-lion-cub .hs-classic.no-photo .cl-text { position: relative; z-index: 3; max-width: 640px; display: grid; justify-items: center; }
@keyframes lc-fly { 0%, 100% { transform: translate(0, 0) rotate(-2deg); } 50% { transform: translate(-10px, -14px) rotate(3deg); } }
@keyframes lc-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) {
  .esite-skin-lion-cub .hs-classic.no-photo .cl-panel::before, .esite-skin-lion-cub .hs-classic.no-photo .cl-panel::after { animation: none; }
}

.esite-skin-lion-cub .cl-panel .h-kicker { margin: 0 0 2px; font-family: var(--s-fbody); font-size: .9375rem; font-weight: 700; font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--s-text); }
.esite-skin-lion-cub .hs-classic .cl-names { justify-items: center; font-size: calc(clamp(4rem, 8vw, 6.8rem) * var(--s-hscale, 1)); line-height: .95; color: var(--s-accent); }
.esite-skin-lion-cub .hs-classic .cl-names .cn-1, .esite-skin-lion-cub .hs-classic .cl-names .cn-2 { justify-self: center; padding: 0; }
.esite-skin-lion-cub .cl-sub { margin-top: 10px; font-size: 1.125rem; color: var(--s-text); }
.esite-skin-lion-cub .cl-facts { margin: 14px 0 20px; }
.esite-skin-lion-cub .cl-facts b { font-family: var(--s-fbody); font-weight: 800; font-size: .8125rem; letter-spacing: .18em; text-transform: uppercase; color: var(--s-accent); }
.esite-skin-lion-cub .cl-facts span { font-family: var(--s-fbody); font-size: 1.0625rem; }
.esite-skin-lion-cub .cl-btn { font-weight: 700; }
/* a photo: soft rounded, the plane flying over its corner */
.esite-skin-lion-cub .hs-classic:not(.no-photo):not(.hv-cover) .cl-photo { border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%; aspect-ratio: 1; object-fit: cover; }
.esite-skin-lion-cub .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual { overflow: visible; }
.esite-skin-lion-cub .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual::after { inset: -12% -10% auto auto; width: 36%; aspect-ratio: 1.696; height: auto; z-index: 3; border: 0; background: var(--sk-plane, none) 50% 50% / contain no-repeat; }
.esite-skin-lion-cub .ss-story-img img { border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%; aspect-ratio: 1; object-fit: cover; }

/* ---- sections: a star on each heading, the baby things at their sides ---- */
.esite-skin-lion-cub .ss-scope:not([data-type="hero"]):not([data-type="countdown"]):not([data-type="none"]) .ss-h::before { width: 28px; height: 28px; margin-bottom: 6px; }
.esite-skin-lion-cub .ss-scope[data-type="schedule"], .esite-skin-lion-cub .ss-scope[data-type="faq"] { background-color: var(--sk-sec-bg, var(--s-band)); }
.esite-skin-lion-cub .ss-scope[data-type="story"]::before { top: auto; bottom: 30px; right: max(3vw, calc(50% - 600px)); left: auto; width: clamp(80px, 8vw, 120px); aspect-ratio: .467;
  background: var(--sk-rattle, none) 100% 100% / contain no-repeat; transform-origin: 50% 90%; animation: lc-sway 5s ease-in-out infinite; }
.esite-skin-lion-cub .ss-scope[data-type="schedule"]::before { bottom: 30px; left: max(3vw, calc(50% - 600px)); width: clamp(90px, 9vw, 140px); aspect-ratio: .61;
  background: var(--sk-bottle, none) 0 100% / contain no-repeat; }
.esite-skin-lion-cub .ss-scope[data-type="faq"]::before { top: 40px; right: max(3vw, calc(50% - 600px)); width: clamp(80px, 8vw, 120px); aspect-ratio: .862;
  background: var(--sk-pacifier, none) 100% 0 / contain no-repeat; }
.esite-skin-lion-cub .ss-scope[data-type="gifts"]::before { content: ""; position: absolute; z-index: -1; bottom: 30px; right: max(2vw, calc(50% - 620px)); width: clamp(140px, 14vw, 210px); aspect-ratio: 1.201;
  background: var(--sk-rainbow, none) 100% 100% / contain no-repeat; pointer-events: none; }
.esite-skin-lion-cub .ss-closing::before { width: min(50vw, 260px); height: 220px; background: var(--sk-rainbow-cloud, none) 50% 100% / contain no-repeat; }
.esite-skin-lion-cub .gftv-panel .ss-wrap { aspect-ratio: auto; width: min(620px, 100%); padding: 48px 30px; background: #fff; border-radius: 40px; }
.esite-skin-lion-cub .gftv-panel .ss-h::before { display: block !important; }

/* ---- countdown: each number on a bodysuit or a bib ---- */
.esite-skin-lion-cub .ss-scope[data-type="countdown"] .ss-h { font-family: var(--s-fhead) !important; font-style: normal !important; text-transform: none !important; letter-spacing: 0 !important; font-size: calc(clamp(2.8rem, 4.6vw, 3.8rem) * var(--s-hscale, 1)); }
.esite-skin-lion-cub .ss-scope[data-type="countdown"]:has(.cdv-tiles) { background-color: var(--s-band); }
.esite-skin-lion-cub .cdv-tiles .ss-cd { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 2.6vw, 36px); }
.esite-skin-lion-cub .cdv-tiles .cd-unit {
  position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start !important; width: clamp(110px, 12vw, 150px); aspect-ratio: .972; padding: 0;
  border: 0 !important; outline: 0; border-radius: 0; background: var(--sk-bodysuit, none) 50% 0 / contain no-repeat !important; box-shadow: none;
}
.esite-skin-lion-cub .cdv-tiles .cd-unit:nth-child(2n) { aspect-ratio: 1.112; background-image: var(--sk-bib, none) !important; }
.esite-skin-lion-cub .cdv-tiles .cd-unit .cd-n { margin-top: 56%; }
.esite-skin-lion-cub .cdv-tiles .cd-unit:nth-child(2n) .cd-n { margin-top: 37%; }
.esite-skin-lion-cub .cdv-tiles .cd-unit::before, .esite-skin-lion-cub .cdv-tiles .cd-unit::after { display: none !important; }
.esite-skin-lion-cub .ss-countdown .cd-n { font-family: var(--s-fbody) !important; font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1; color: #fff; text-shadow: 0 1px 6px rgba(120, 50, 10, .35); }
.esite-skin-lion-cub .cdv-tiles .cd-l { font-family: var(--s-fbody); color: #fff; font-size: .5625rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-top: 2px; text-shadow: 0 1px 4px rgba(120, 50, 10, .4); }
.esite-skin-lion-cub .ss-scope[data-type="countdown"]:not(:has(.cdv-tiles)) { background-color: var(--s-band); color: var(--s-text); }
.esite-skin-lion-cub .ss-scope[data-type="countdown"]:not(:has(.cdv-tiles)) :is(.ss-h, .cd-n, .cd-l) { color: var(--s-text); text-shadow: none; }

/* ---- the day, questions ---- */
.esite-skin-lion-cub .schv-wide .ss-tl-time { font-family: var(--s-fbody); letter-spacing: .14em; color: var(--s-accent); font-size: .8125rem; font-weight: 800; }
.esite-skin-lion-cub .ss-tl-title { font-family: var(--s-fbody); font-size: 1.125rem; font-weight: 700; }
.esite-skin-lion-cub .ss-faq-q { font-family: var(--s-fbody); font-size: 1.0625rem; font-weight: 700; }

/* ---- RSVP: a white card, the lion cub sitting beside it ---- */
.esite-skin-lion-cub .ss-scope[data-type="rsvp"]::before, .esite-skin-lion-cub .ss-scope[data-type="rsvp"]::after { display: none; }
.esite-skin-lion-cub .ss-rsvp .ss-wrap { position: relative; isolation: isolate; }
.esite-skin-lion-cub .ss-rsvp-form { position: relative; max-width: 560px; margin-top: 40px; margin-bottom: 40px; padding: 48px 42px 42px; border-radius: 40px; background: #fff;
  box-shadow: 0 24px 50px -36px color-mix(in srgb, var(--s-text) 50%, transparent); }
.esite-skin-lion-cub .ss-rsvp-form::before {
  content: ""; position: absolute; z-index: 2; left: calc(100% - 30px); bottom: -10px; width: 250px; aspect-ratio: 1.029; pointer-events: none; background: var(--sk-lion, none) 50% 100% / contain no-repeat;
}
.esite-skin-lion-cub .ss-rsvp-form::after {
  content: ""; position: absolute; z-index: 3; left: -70px; top: -30px; width: 150px; aspect-ratio: 1.959; pointer-events: none; background: var(--sk-cloud-l, none) 50% 50% / contain no-repeat;
}

@media (max-width: 900px) {
  .esite-skin-lion-cub .hs-classic.no-photo .cl-panel { min-height: 0; padding: calc(84px + clamp(150px, 40vw, 190px)) 18px clamp(190px, 50vw, 260px); }
  .esite-skin-lion-cub .hs-classic.no-photo .cl-panel::before { left: 2vw; bottom: 20px; height: clamp(150px, 42vw, 220px); }
  .esite-skin-lion-cub .hs-classic.no-photo .cl-panel::after { right: 4vw; top: 84px; width: clamp(130px, 36vw, 190px); }
  .esite-skin-lion-cub .ss-hero.hs-classic.no-photo::before { background-position: 30% 50px, 6% 40%, 94% 44%, 8% 64%, 5% 58%, 95% 62%, 92% 70%; background-size: 160% auto, 20px auto, 16px auto, 12px auto, 12px auto, 14px auto, 10px auto; }
  .esite-skin-lion-cub .ss-hero.hs-classic.no-photo::after { height: clamp(130px, 34vw, 180px); background-size: auto 80%, auto 40%, auto 56%, auto 36%; }
  .esite-skin-lion-cub .hs-classic .cl-names { font-size: calc(4rem * var(--s-hscale, 1)); }
  .esite-skin-lion-cub .ss-scope[data-type="story"]::before, .esite-skin-lion-cub .ss-scope[data-type="schedule"]::before,
  .esite-skin-lion-cub .ss-scope[data-type="faq"]::before, .esite-skin-lion-cub .ss-scope[data-type="gifts"]::before { display: none; }
  .esite-skin-lion-cub .ss-rsvp-form { padding: 42px 22px 30px; margin-bottom: 190px; }
  .esite-skin-lion-cub .ss-rsvp-form::before { left: auto; right: 10px; top: calc(100% - 6px); bottom: auto; width: 170px; }
  .esite-skin-lion-cub .ss-rsvp-form::after { left: -14px; width: 100px; }
}
@media (max-width: 640px) {
  .esite-skin-lion-cub .cdv-tiles .ss-cd { flex-wrap: nowrap; gap: 4px; }
  .esite-skin-lion-cub .cdv-tiles .cd-unit { width: 22vw; }
  .esite-skin-lion-cub .ss-countdown .cd-n { font-size: 1.2rem; }
  .esite-skin-lion-cub .cdv-tiles .cd-l { font-size: .5rem; letter-spacing: .04em; }
}

/* ---- each occasion its own way (the page carries .esite-occ-<occasion>); the art variables are inline: swap the images, not the variables ---- */
/* a gender reveal: a pink and a blue bodysuit either side of the names, the same in every colorway */
.esite-skin-lion-cub.esite-occ-gender-reveal .hs-classic.no-photo .cl-panel::before { aspect-ratio: .972; height: min(34%, 250px, 17vw); bottom: auto; top: 46%; left: max(2vw, calc(50% - 650px));
  background: var(--sk-suit-girl, none) 50% 50% / contain no-repeat; transform-origin: 50% 0; animation: lc-sway 6s ease-in-out infinite; }
.esite-skin-lion-cub.esite-occ-gender-reveal .ss-hero.hs-classic.no-photo .cl-panel { background: var(--sk-suit-boy, none) calc(100% - max(2vw, calc(50% - 650px))) 58% / auto min(250px, 17vw) no-repeat; }
.esite-skin-lion-cub.esite-occ-gender-reveal .ss-scope[data-type="gifts"]::before { aspect-ratio: .972; width: clamp(110px, 11vw, 160px); background-image: var(--sk-suit-boy, none); }
.esite-skin-lion-cub.esite-occ-gender-reveal .ss-closing::before { width: min(64vw, 300px); height: 140px; background: var(--sk-suit-girl, none) 10% 50% / auto 100% no-repeat, var(--sk-suit-boy, none) 90% 50% / auto 100% no-repeat; }
/* a first birthday: the lion and the bear on their cloud in the lion's place */
.esite-skin-lion-cub.esite-occ-first-birthday .hs-classic.no-photo .cl-panel::before { aspect-ratio: 1.139; height: min(42%, 340px, 24vw); left: max(0vw, calc(50% - 680px)); background-image: var(--sk-friends, none); }
.esite-skin-lion-cub.esite-occ-first-birthday .ss-rsvp-form::before { aspect-ratio: 1.139; width: 280px; background-image: var(--sk-friends, none); }
@media (max-width: 900px) {
  .esite-skin-lion-cub.esite-occ-gender-reveal .hs-classic.no-photo .cl-panel::before { top: auto; bottom: 30px; left: 6vw; height: clamp(120px, 32vw, 170px); }
  .esite-skin-lion-cub.esite-occ-gender-reveal .ss-hero.hs-classic.no-photo .cl-panel { background-position: 94% calc(100% - 30px); background-size: auto clamp(120px, 32vw, 170px); }
  .esite-skin-lion-cub.esite-occ-first-birthday .hs-classic.no-photo .cl-panel::before { height: clamp(170px, 48vw, 240px); }
}