/* Moon Kitten: the file's first page at screen size. The hero is the lilac page with its deeper blob sweeping in from the left, white
   sparkles twinkling and dots; the heart balloon carries the kitten in its bundle beside the names, bobbing, while two clouds drift across.
   Down the page the countdown numbers sit on the file's discs, each heading wears a yellow twinkle, the mobile turns over the day's plan, the
   rattle and the pram stand by the story and the gifts, and the kitten sleeps on its moon over the RSVP card's corner. */
.esite-skin-moon-kitten {
  --sk-accent-font: "Belanosima", sans-serif;
  --sk-accent-style: normal;
  --sk-photo-shape: none;
  --sk-gap: 96px;
  --sk-measure: 860px;
  --mk-disc: color-mix(in srgb, var(--s-bg) 86%, var(--s-accent));
}
.esite-skin-moon-kitten .ss-h, .esite-skin-moon-kitten .cl-names, .esite-skin-moon-kitten .ss-closing-names { font-weight: 400; letter-spacing: .01em; text-transform: uppercase; }
.esite-skin-moon-kitten .ss-h { font-size: calc(clamp(1.8rem, 3.2vw, 2.6rem) * var(--s-hscale, 1)); line-height: 1.1; color: var(--s-text); }

/* ---- hero: the file's lilac page, the blob from the left, a wave at the foot ---- */
.esite-skin-moon-kitten .ss-hero.hs-classic.no-photo {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--sk-wave-low, none) 100% 100% / clamp(170px, 22vw, 330px) auto no-repeat, var(--s-bg);
}
.esite-skin-moon-kitten .ss-hero.hs-classic.no-photo::before {   /* the blob sweeping in from the left */
  content: ""; position: absolute; z-index: -1; left: -2vw; top: -4%; height: 104%; aspect-ratio: .75; max-width: 62vw; pointer-events: none;
  background: var(--sk-blob, none) 100% 50% / 100% 100% no-repeat;
}
.esite-skin-moon-kitten .ss-hero.hs-classic.no-photo::after {    /* white sparkles and dots, twinkling */
  content: ""; position: absolute; inset: 70px 0 0; z-index: 0; pointer-events: none; animation: mk-twinkle 3.4s ease-in-out infinite;
  background: var(--sk-sparkle, none) 6% 14% / 30px auto no-repeat, var(--sk-sparkle, none) 92% 10% / 34px auto no-repeat,
              var(--sk-sparkle, none) 86% 62% / 26px auto no-repeat, var(--sk-sparkle, none) 28% 86% / 24px auto no-repeat,
              radial-gradient(circle, #fff 0 3px, transparent 4px) 18% 30% / 10px 10px no-repeat, radial-gradient(circle, #fff 0 3px, transparent 4px) 74% 22% / 10px 10px no-repeat,
              radial-gradient(circle, #fff 0 3px, transparent 4px) 62% 92% / 10px 10px no-repeat, radial-gradient(circle, #fff 0 3px, transparent 4px) 96% 40% / 10px 10px no-repeat,
              radial-gradient(circle, #fff 0 3px, transparent 4px) 8% 70% / 10px 10px no-repeat;
}
.esite-skin-moon-kitten .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(820px, 100svh); padding: 120px 28px 90px clamp(28px, 30vw, 400px);
}
.esite-skin-moon-kitten .hs-classic.no-photo .cl-panel::before {   /* two clouds drifting across */
  display: block; content: ""; position: absolute; z-index: 0; inset: auto; left: 0; right: 0; top: 18%; height: 46%; border: 0; translate: none; width: auto; pointer-events: none;
  background: var(--sk-cloud-a, none) 0 0 / clamp(120px, 13vw, 190px) auto no-repeat, var(--sk-cloud-b, none) 0 100% / clamp(110px, 12vw, 170px) auto no-repeat;
  animation: mk-drift 70s linear infinite;
}
.esite-skin-moon-kitten .hs-classic.no-photo .cl-panel::after {    /* the heart balloon carrying the kitten, bobbing beside the names */
  display: block; content: ""; position: absolute; z-index: 1; inset: auto; left: max(2vw, calc(50% - 600px)); top: 80px; height: min(calc(100% - 120px), 680px, 50vw); aspect-ratio: .57; width: auto; border: 0;
  background: var(--sk-heart-bundle, none) 50% 0 / contain no-repeat; pointer-events: none; transform-origin: 50% 0; animation: mk-bob 6s ease-in-out infinite;
}
.esite-skin-moon-kitten .hs-classic.no-photo .cl-text { position: relative; z-index: 2; max-width: 640px; display: grid; justify-items: center; }
@keyframes mk-bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-16px) rotate(1.5deg); } }
@keyframes mk-drift { from { transform: translateX(-20vw); } to { transform: translateX(110vw); } }
@keyframes mk-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes mk-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@media (prefers-reduced-motion: reduce) {
  .esite-skin-moon-kitten .hs-classic.no-photo .cl-panel::before, .esite-skin-moon-kitten .hs-classic.no-photo .cl-panel::after, .esite-skin-moon-kitten .ss-hero::after,
  .esite-skin-moon-kitten .ss-scope[data-type="schedule"]::after, .esite-skin-moon-kitten .ss-rsvp-form::after { animation: none; }
}

.esite-skin-moon-kitten .cl-panel .h-kicker { margin: 0 0 6px; font-family: var(--s-fbody); font-size: 1.125rem; font-weight: 600; font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--s-accent); }
.esite-skin-moon-kitten .hs-classic .cl-names { justify-items: center; font-size: calc(clamp(2.8rem, 6vw, 5rem) * var(--s-hscale, 1)); line-height: 1.02; color: var(--s-text); }
.esite-skin-moon-kitten .hs-classic .cl-names .cn-1, .esite-skin-moon-kitten .hs-classic .cl-names .cn-2 { justify-self: center; padding: 0; }
.esite-skin-moon-kitten .hs-classic .cl-names .cn-amp { color: var(--s-accent); }
.esite-skin-moon-kitten .cl-sub { margin-top: 12px; font-size: 1.125rem; }
.esite-skin-moon-kitten .cl-facts { margin: 16px 0 20px; }
.esite-skin-moon-kitten .cl-facts b { font-family: var(--s-fbody); font-weight: 700; font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--s-accent); }
.esite-skin-moon-kitten .cl-facts span { font-family: var(--s-fbody); font-size: 1.0625rem; }
/* a photo: on a disc, the heart balloon floating at its corner */
.esite-skin-moon-kitten .hs-classic:not(.no-photo):not(.hv-cover) .cl-photo { border-radius: 50%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 0 0 14px var(--mk-disc); }
.esite-skin-moon-kitten .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual { overflow: visible; }
.esite-skin-moon-kitten .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual::after { inset: -14% -10% auto auto; width: 30%; aspect-ratio: 1.2; height: auto; z-index: 3; border: 0; background: var(--sk-heart-balloon, none) 50% 50% / contain no-repeat; }
.esite-skin-moon-kitten .ss-story-img img { border-radius: 24px; }

/* ---- sections: a twinkle on each heading, the nursery's things at their sides ---- */
.esite-skin-moon-kitten .ss-scope:not([data-type="hero"]):not([data-type="none"]) .ss-h::before { width: 30px; height: 32px; margin-bottom: 8px; }
.esite-skin-moon-kitten .ss-scope[data-type="schedule"], .esite-skin-moon-kitten .ss-scope[data-type="faq"] { background-color: var(--sk-sec-bg, var(--s-band)); }
.esite-skin-moon-kitten .ss-scope[data-type="story"]::before { top: auto; bottom: 24px; right: max(2vw, calc(50% - 640px)); left: auto; width: clamp(130px, 13vw, 200px); aspect-ratio: 1.13;
  background: var(--sk-rattle, none) 50% 50% / 86% auto no-repeat, radial-gradient(circle at 40% 42%, var(--mk-disc) 0 40%, transparent 40.5%) 0 0 / 100% 100% no-repeat; }
.esite-skin-moon-kitten .ss-scope[data-type="schedule"]::after { content: ""; position: absolute; top: 0; right: max(2vw, calc(50% - 620px)); width: clamp(150px, 15vw, 230px); aspect-ratio: 1.3; pointer-events: none;
  background: var(--sk-mobile, none) 50% 0 / contain no-repeat; transform-origin: 50% 0; animation: mk-sway 6s ease-in-out infinite; }
.esite-skin-moon-kitten .ss-scope[data-type="gifts"]::before { content: ""; position: absolute; z-index: -1; bottom: 22px; left: max(2vw, calc(50% - 620px)); width: clamp(140px, 14vw, 210px); aspect-ratio: .93; background: var(--sk-pram, none) 0 100% / contain no-repeat; pointer-events: none; }
.esite-skin-moon-kitten .ss-scope[data-type="faq"]::after { content: ""; position: absolute; bottom: 22px; left: max(2vw, calc(50% - 640px)); width: clamp(80px, 8vw, 120px); aspect-ratio: .9; background: var(--sk-duck, none) 0 100% / contain no-repeat; pointer-events: none; }
.esite-skin-moon-kitten .ss-closing::before { width: min(44vw, 230px); height: 220px; background: var(--sk-kitten-sit, none) 50% 100% / contain no-repeat; }
.esite-skin-moon-kitten .gftv-panel .ss-wrap { aspect-ratio: auto; width: min(620px, 100%); padding: 44px 30px; background: var(--s-bg); border-radius: 28px; }
.esite-skin-moon-kitten .gftv-panel .ss-h::before { display: block !important; }

/* ---- countdown: each number on one of the file's discs, a white sparkle at its edge ---- */
.esite-skin-moon-kitten .ss-scope[data-type="countdown"]:has(.cdv-tiles) { background-color: var(--s-bg); }
.esite-skin-moon-kitten .ss-scope[data-type="countdown"] .ss-h { font-family: var(--s-fhead); font-style: normal; color: var(--s-text); }
.esite-skin-moon-kitten .cdv-tiles .cd-unit { outline: 0; }
.esite-skin-moon-kitten .cdv-tiles .ss-cd { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 2.4vw, 28px); }
.esite-skin-moon-kitten .cdv-tiles .cd-unit {
  position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: center !important; width: clamp(100px, 12.5vw, 150px); aspect-ratio: 1; padding: 0;
  border: 0 !important; border-radius: 50%; background: var(--mk-disc) !important; box-shadow: none;
}
.esite-skin-moon-kitten .cdv-tiles .cd-unit:nth-child(2n) { translate: 0 14px; }
.esite-skin-moon-kitten .cdv-tiles .cd-unit::before { display: none !important; }
.esite-skin-moon-kitten .cdv-tiles .cd-unit::after {
  display: block !important; content: ""; position: absolute; top: -6px; right: 2px; width: 28px; height: 28px; border: 0; background: var(--sk-sparkle, none) 50% 50% / contain no-repeat;
  animation: mk-twinkle 3s ease-in-out infinite;
}
.esite-skin-moon-kitten .cdv-tiles .cd-unit:nth-child(2n)::after { background-image: var(--sk-twinkle, none); top: auto; bottom: -4px; right: auto; left: 4px; animation-delay: 1.5s; }
.esite-skin-moon-kitten .ss-countdown .cd-n { font-family: var(--s-fhead) !important; font-weight: 400; font-size: clamp(2.1rem, 3.8vw, 2.9rem); line-height: 1; color: var(--s-accent); }
.esite-skin-moon-kitten .cdv-tiles .cd-l { font-family: var(--s-fbody); color: var(--s-text); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }
.esite-skin-moon-kitten .ss-scope[data-type="countdown"]:not(:has(.cdv-tiles)) { background-color: var(--s-bg); color: var(--s-text); }
.esite-skin-moon-kitten .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-moon-kitten .schv-wide .ss-tl-time { font-family: var(--s-fbody); letter-spacing: .1em; color: var(--s-accent); font-size: .9375rem; font-weight: 700; }
.esite-skin-moon-kitten .ss-tl-title { font-family: var(--s-fbody); font-size: 1.1875rem; font-weight: 700; }
.esite-skin-moon-kitten .ss-faq-q { font-family: var(--s-fbody); font-size: 1.125rem; font-weight: 700; }

/* ---- RSVP: a round-cornered card, the kitten asleep on its moon over the corner ---- */
.esite-skin-moon-kitten .ss-scope[data-type="rsvp"]::before, .esite-skin-moon-kitten .ss-scope[data-type="rsvp"]::after { display: none; }
.esite-skin-moon-kitten .ss-rsvp .ss-wrap { position: relative; isolation: isolate; }
.esite-skin-moon-kitten .ss-rsvp-form { position: relative; max-width: 560px; margin-top: 120px; margin-bottom: 40px; padding: 52px 42px 42px; border-radius: 28px; background: var(--s-bg);
  box-shadow: 0 24px 50px -34px color-mix(in srgb, var(--s-text) 50%, transparent); }
.esite-skin-moon-kitten .ss-rsvp-form::before {
  content: ""; position: absolute; z-index: 2; right: -70px; top: -150px; width: 210px; aspect-ratio: 1.05; pointer-events: none;
  background: var(--sk-moon-kitten, none) 50% 100% / contain no-repeat;
}
.esite-skin-moon-kitten .ss-rsvp-form::after {
  content: ""; position: absolute; z-index: 3; left: 22px; top: -18px; width: 42px; aspect-ratio: .9; pointer-events: none;
  background: var(--sk-twinkle, none) 50% 50% / contain no-repeat; animation: mk-twinkle 3s ease-in-out infinite;
}

@media (max-width: 900px) {
  .esite-skin-moon-kitten .hs-classic.no-photo .cl-panel { min-height: 0; padding: clamp(330px, 92vw, 420px) 18px 60px; }
  .esite-skin-moon-kitten .ss-hero.hs-classic.no-photo::before { left: -30vw; height: 70%; max-width: none; }
  .esite-skin-moon-kitten .hs-classic.no-photo .cl-panel::after { left: 50%; top: 78px; height: clamp(250px, 72vw, 340px); max-height: none; translate: -50% 0; }
  .esite-skin-moon-kitten .hs-classic.no-photo .cl-panel::before { top: 90px; height: 240px; }
  .esite-skin-moon-kitten .hs-classic .cl-names { font-size: calc(2.6rem * var(--s-hscale, 1)); }
  .esite-skin-moon-kitten .cl-facts b { font-size: .75rem; letter-spacing: .06em; }
  .esite-skin-moon-kitten .ss-scope[data-type="story"]::before, .esite-skin-moon-kitten .ss-scope[data-type="schedule"]::after,
  .esite-skin-moon-kitten .ss-scope[data-type="faq"]::after, .esite-skin-moon-kitten .ss-scope[data-type="gifts"]::before { display: none; }
  .esite-skin-moon-kitten .ss-rsvp-form { padding: 46px 22px 30px; margin-top: 130px; }
  .esite-skin-moon-kitten .ss-rsvp-form::before { right: -6px; top: -128px; width: 150px; }
}
@media (max-width: 640px) {
  .esite-skin-moon-kitten .cdv-tiles .ss-cd { flex-wrap: nowrap; gap: 6px; }
  .esite-skin-moon-kitten .cdv-tiles .cd-unit { width: 21vw; }
  .esite-skin-moon-kitten .cdv-tiles .cd-unit::after { width: 20px; height: 20px; }
  .esite-skin-moon-kitten .ss-countdown .cd-n { font-size: 1.6rem; }
  .esite-skin-moon-kitten .cdv-tiles .cd-l { font-size: .625rem; 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 balloon, each carrying a kitten, either side of the words (the same in every colorway) */
.esite-skin-moon-kitten.esite-occ-gender-reveal .hs-classic.no-photo .cl-panel { padding-left: clamp(28px, 22vw, 330px); padding-right: clamp(28px, 22vw, 330px); }
.esite-skin-moon-kitten.esite-occ-gender-reveal .hs-classic.no-photo .cl-panel::after {
  left: max(1vw, calc(50% - 680px)); right: max(1vw, calc(50% - 680px)); width: auto; aspect-ratio: auto; animation: mk-bob 6s ease-in-out infinite;
  background: var(--sk-bundle-girl, none) 0 0 / auto 92% no-repeat, var(--sk-bundle-boy, none) 100% 100% / auto 92% no-repeat;
}
.esite-skin-moon-kitten.esite-occ-gender-reveal .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual::after { background-image: var(--sk-heart-boy, none); }
.esite-skin-moon-kitten.esite-occ-gender-reveal .ss-rsvp-form::after { width: 52px; aspect-ratio: 1.2; background-image: var(--sk-heart-girl, none); }
.esite-skin-moon-kitten.esite-occ-gender-reveal .ss-closing::before { width: min(60vw, 300px); background: var(--sk-heart-girl, none) 22% 40% / auto 56% no-repeat, var(--sk-heart-boy, none) 78% 60% / auto 56% no-repeat; }
/* a first birthday: the kitten asleep on its moon floats beside the words in place of the balloon */
.esite-skin-moon-kitten.esite-occ-first-birthday .hs-classic.no-photo .cl-panel { padding-left: clamp(28px, 36vw, 480px); }
.esite-skin-moon-kitten.esite-occ-first-birthday .hs-classic.no-photo .cl-panel::after { top: 18%; height: min(calc(100% - 200px), 460px, 30vw); aspect-ratio: 1.05; background-image: var(--sk-moon-kitten, none); }
.esite-skin-moon-kitten.esite-occ-first-birthday .ss-rsvp-form::before { background-image: var(--sk-kitten-sit, none); aspect-ratio: .81; top: -170px; }
@media (max-width: 900px) {
  .esite-skin-moon-kitten.esite-occ-gender-reveal .hs-classic.no-photo .cl-panel, .esite-skin-moon-kitten.esite-occ-first-birthday .hs-classic.no-photo .cl-panel { padding-left: 18px; padding-right: 18px; }
  .esite-skin-moon-kitten.esite-occ-gender-reveal .hs-classic.no-photo .cl-panel::after { left: 4vw; right: 4vw; translate: none; }
  .esite-skin-moon-kitten.esite-occ-first-birthday .hs-classic.no-photo .cl-panel::after { top: 90px; height: clamp(220px, 64vw, 300px); }
}