/* Over the Moon: the file's moon page at screen size. The wavy sky bands run across the hero, the sleeping moon in its nightcap rocks
   gently beside the names, the striped hot air balloon floats up and down on the other side and a bank of clouds lies along the foot. Down
   the page the countdown numbers sit in white clouds, each heading wears a little star, the rocking horse stands by the story and the pram
   waits beside the RSVP card. A gender reveal lifts a pink and a blue bunch of balloons beside the names, a first birthday puts the hot air
   balloon where the moon was. The hero is never isolated: the fixed nav lives inside it. */
.esite-skin-over-the-moon {
  --sk-accent-font: "Montserrat", sans-serif;
  --sk-accent-style: normal;
  --sk-photo-shape: none;
  --sk-gap: 96px;
  --sk-measure: 860px;
}
.esite-skin-over-the-moon .ss-h, .esite-skin-over-the-moon .cl-names, .esite-skin-over-the-moon .ss-closing-names { font-weight: 400; letter-spacing: .01em; text-transform: none; }
.esite-skin-over-the-moon .ss-h { font-size: calc(clamp(2.2rem, 4vw, 3.2rem) * var(--s-hscale, 1)); line-height: 1.1; color: var(--s-accent); }

/* ---- hero: wavy sky bands, the moon and the balloon either side of the names, a cloud bank along the foot ---- */
.esite-skin-over-the-moon .ss-hero.hs-classic.no-photo { position: relative; overflow: hidden; background: var(--s-bg); }
.esite-skin-over-the-moon .ss-hero.hs-classic.no-photo::before {   /* the file's wavy bands, its small clouds and stars */
  content: ""; position: absolute; z-index: 0; inset: 34% 0 0; pointer-events: none;
  background: var(--sk-cloud-pink, none) 6% 0 / clamp(110px, 11vw, 160px) auto no-repeat, var(--sk-cloud-white-b, none) 96% 14% / clamp(130px, 13vw, 190px) auto no-repeat,
              var(--sk-star, none) 22% 8% / 14px auto no-repeat, var(--sk-star, none) 78% 4% / 12px auto no-repeat, var(--sk-star, none) 52% 28% / 10px auto no-repeat,
              var(--sk-waves, none) 50% 18% / 100% auto repeat-y;
}
.esite-skin-over-the-moon .ss-hero.hs-classic.no-photo::after {    /* the bank of clouds along the foot */
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: -2px; height: clamp(90px, 12vw, 170px); pointer-events: none;
  background: var(--sk-cloud-bank, none) 50% 0 / 100% auto no-repeat;
}
.esite-skin-over-the-moon .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(880px, 100svh); padding: 130px clamp(28px, 28vw, 400px) clamp(120px, 14vw, 190px);
}
.esite-skin-over-the-moon .hs-classic.no-photo .cl-panel::before {   /* the sleeping moon, rocking gently on the left */
  display: block; content: ""; position: absolute; z-index: 1; inset: auto; left: max(1vw, calc(50% - 640px)); bottom: clamp(50px, 6vw, 90px); height: min(50%, 400px, 32vw); aspect-ratio: .903; width: auto; border: 0; translate: none; pointer-events: none;
  background: var(--sk-moon, none) 50% 100% / contain no-repeat; transform-origin: 60% 90%; animation: om-rock 7s ease-in-out infinite;
}
.esite-skin-over-the-moon .hs-classic.no-photo .cl-panel::after {    /* the hot air balloon floating up and down on the right */
  display: block; content: ""; position: absolute; z-index: 1; inset: auto; right: max(2vw, calc(50% - 620px)); top: 96px; height: min(52%, 430px, 38vw); aspect-ratio: .644; width: auto; border: 0; pointer-events: none;
  background: var(--sk-hot-air, none) 50% 0 / contain no-repeat; animation: om-float 8s ease-in-out infinite;
}
.esite-skin-over-the-moon .hs-classic.no-photo .cl-text { position: relative; z-index: 3; max-width: 620px; display: grid; justify-items: center; }
@keyframes om-rock { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes om-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@media (prefers-reduced-motion: reduce) {
  .esite-skin-over-the-moon .hs-classic.no-photo .cl-panel::before, .esite-skin-over-the-moon .hs-classic.no-photo .cl-panel::after { animation: none; }
}

.esite-skin-over-the-moon .cl-panel .h-kicker { margin: 0 0 8px; font-family: var(--s-fbody); font-size: .9375rem; font-weight: 500; font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: var(--s-accent); }
.esite-skin-over-the-moon .hs-classic .cl-names { justify-items: center; font-size: calc(clamp(3rem, 6vw, 5rem) * var(--s-hscale, 1)); line-height: 1.05; color: var(--s-accent); }
.esite-skin-over-the-moon .hs-classic .cl-names .cn-1, .esite-skin-over-the-moon .hs-classic .cl-names .cn-2 { justify-self: center; padding: 0; }
.esite-skin-over-the-moon .cl-sub { margin-top: 12px; font-size: 1.0625rem; color: var(--s-text); }
.esite-skin-over-the-moon .cl-facts { margin: 14px 0 20px; }
.esite-skin-over-the-moon .cl-facts b { font-family: var(--s-fbody); font-weight: 600; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--s-accent); }
.esite-skin-over-the-moon .cl-facts span { font-family: var(--s-fbody); font-size: 1rem; }
/* a photo: round like the moon, the balloon floating by */
.esite-skin-over-the-moon .hs-classic:not(.no-photo):not(.hv-cover) .cl-photo { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.esite-skin-over-the-moon .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual { overflow: visible; }
.esite-skin-over-the-moon .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual::after { inset: -16% -8% auto auto; width: 22%; aspect-ratio: .644; height: auto; z-index: 3; border: 0; background: var(--sk-hot-air, none) 50% 50% / contain no-repeat; }
.esite-skin-over-the-moon .ss-story-img img { border-radius: 40px; }

/* ---- sections: a star on each heading, the nursery's things at their sides ---- */
.esite-skin-over-the-moon .ss-scope:not([data-type="hero"]):not([data-type="none"]) .ss-h::before { width: 22px; height: 22px; margin-bottom: 8px; }
.esite-skin-over-the-moon .ss-scope[data-type="schedule"], .esite-skin-over-the-moon .ss-scope[data-type="faq"] { background-color: var(--sk-sec-bg, var(--s-band)); }
.esite-skin-over-the-moon .ss-scope[data-type="story"]::before { top: auto; bottom: 24px; right: max(2vw, calc(50% - 640px)); left: auto; width: clamp(150px, 15vw, 230px); aspect-ratio: .927;
  background: var(--sk-horse, none) 100% 100% / contain no-repeat; }
.esite-skin-over-the-moon .ss-scope[data-type="schedule"]::after { content: ""; position: absolute; top: 40px; right: max(3vw, calc(50% - 600px)); width: clamp(140px, 14vw, 210px); aspect-ratio: 2.06; pointer-events: none;
  background: var(--sk-cloud-pink, none) 100% 0 / contain no-repeat; }
.esite-skin-over-the-moon .ss-scope[data-type="gifts"]::before { content: ""; position: absolute; z-index: -1; bottom: 24px; left: max(2vw, calc(50% - 620px)); width: clamp(80px, 8vw, 120px); aspect-ratio: .608; background: var(--sk-star-balloons, none) 0 100% / contain no-repeat; pointer-events: none; animation: om-float 7s ease-in-out infinite; }
.esite-skin-over-the-moon .ss-scope[data-type="faq"]::after { content: ""; position: absolute; bottom: 26px; left: max(2vw, calc(50% - 640px)); width: clamp(150px, 15vw, 230px); aspect-ratio: 3.3; background: var(--sk-cloud-white, none) 0 100% / contain no-repeat; pointer-events: none; }
.esite-skin-over-the-moon .ss-closing::before { width: min(44vw, 220px); height: 230px; background: var(--sk-moon, none) 50% 100% / contain no-repeat; }
.esite-skin-over-the-moon .gftv-panel .ss-wrap { aspect-ratio: auto; width: min(620px, 100%); padding: 48px 30px; background: var(--s-bg); border-radius: 36px; }
.esite-skin-over-the-moon .gftv-panel .ss-h::before { display: block !important; }

/* ---- countdown: each number in one of the file's white clouds ---- */
.esite-skin-over-the-moon .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(2rem, 3.4vw, 2.8rem) * var(--s-hscale, 1)); }
.esite-skin-over-the-moon .ss-scope[data-type="countdown"]:has(.cdv-tiles) { background-color: var(--s-band); }
.esite-skin-over-the-moon .cdv-tiles .ss-cd { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(6px, 1.6vw, 20px); }
.esite-skin-over-the-moon .cdv-tiles .cd-unit {
  position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: center !important; width: clamp(110px, 13vw, 160px); aspect-ratio: 1.35; padding: 0;
  border: 0 !important; outline: 0; border-radius: 999px; background: #fff !important; box-shadow: 0 14px 30px -24px color-mix(in srgb, var(--s-text) 60%, transparent);
}
.esite-skin-over-the-moon .cdv-tiles .cd-unit:nth-child(2n) { translate: 0 12px; }
.esite-skin-over-the-moon .cdv-tiles .cd-unit::before { display: none !important; }
.esite-skin-over-the-moon .cdv-tiles .cd-unit::after { display: block !important; content: ""; position: absolute; top: -14px; right: -18px; width: 56px; aspect-ratio: 2.06; height: auto; border: 0; background: var(--sk-cloud-pink, none) 50% 50% / contain no-repeat; }
.esite-skin-over-the-moon .cdv-tiles .cd-unit:nth-child(2n)::after { width: 18px; aspect-ratio: 1; top: auto; bottom: 4px; right: auto; left: 2px; background-image: var(--sk-star, none); }
.esite-skin-over-the-moon .ss-countdown .cd-n { font-family: var(--s-fhead) !important; font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; color: var(--s-accent); }
.esite-skin-over-the-moon .cdv-tiles .cd-l { font-family: var(--s-fbody); color: var(--s-text); font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-top: 2px; }
.esite-skin-over-the-moon .ss-scope[data-type="countdown"]:not(:has(.cdv-tiles)) { background-color: var(--s-band); color: var(--s-text); }
.esite-skin-over-the-moon .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-over-the-moon .schv-wide .ss-tl-time { font-family: var(--s-fbody); letter-spacing: .14em; color: var(--s-accent); font-size: .8125rem; font-weight: 600; }
.esite-skin-over-the-moon .ss-tl-title { font-family: var(--s-fhead); font-size: 1.25rem; font-weight: 400; }
.esite-skin-over-the-moon .ss-faq-q { font-family: var(--s-fhead); font-size: 1.125rem; font-weight: 400; }

/* ---- RSVP: a soft card, the pram waiting beside it ---- */
.esite-skin-over-the-moon .ss-scope[data-type="rsvp"]::before, .esite-skin-over-the-moon .ss-scope[data-type="rsvp"]::after { display: none; }
.esite-skin-over-the-moon .ss-rsvp .ss-wrap { position: relative; isolation: isolate; }
.esite-skin-over-the-moon .ss-rsvp-form { position: relative; max-width: 560px; margin-top: 40px; margin-bottom: 40px; padding: 48px 42px 42px; border-radius: 36px; background: #fff;
  box-shadow: 0 24px 50px -36px color-mix(in srgb, var(--s-text) 50%, transparent); }
.esite-skin-over-the-moon .ss-rsvp-form::before {
  content: ""; position: absolute; z-index: 2; left: calc(100% + 16px); bottom: -6px; width: 210px; aspect-ratio: .946; pointer-events: none; background: var(--sk-pram, none) 50% 100% / contain no-repeat;
}
.esite-skin-over-the-moon .ss-rsvp-form::after {
  content: ""; position: absolute; z-index: 3; left: -60px; top: -26px; width: 140px; aspect-ratio: 2.06; pointer-events: none; background: var(--sk-cloud-pink-b, none) 50% 50% / contain no-repeat;
}

@media (max-width: 900px) {
  .esite-skin-over-the-moon .hs-classic.no-photo .cl-panel { min-height: 0; padding: calc(84px + clamp(160px, 46vw, 230px)) 18px clamp(120px, 34vw, 170px); }
  .esite-skin-over-the-moon .hs-classic.no-photo .cl-panel::before { left: 4vw; bottom: auto; top: 76px; height: clamp(160px, 46vw, 230px); }
  .esite-skin-over-the-moon .hs-classic.no-photo .cl-panel::after { right: 6vw; top: 70px; height: clamp(170px, 48vw, 240px); }
  .esite-skin-over-the-moon .ss-hero.hs-classic.no-photo::before { inset: 0; background-size: 90px auto, 100px auto, 12px auto, 10px auto, 8px auto, 160% auto; background-position: 2% 92%, 98% 96%, 8% 70%, 92% 72%, 50% 98%, 50% 30%; }
  .esite-skin-over-the-moon .hs-classic .cl-names { font-size: calc(2.8rem * var(--s-hscale, 1)); }
  .esite-skin-over-the-moon .ss-scope[data-type="story"]::before, .esite-skin-over-the-moon .ss-scope[data-type="schedule"]::after,
  .esite-skin-over-the-moon .ss-scope[data-type="faq"]::after, .esite-skin-over-the-moon .ss-scope[data-type="gifts"]::before { display: none; }
  .esite-skin-over-the-moon .ss-rsvp-form { padding: 42px 22px 30px; margin-bottom: 160px; }
  .esite-skin-over-the-moon .ss-rsvp-form::before { left: auto; right: 10px; top: calc(100% + 8px); bottom: auto; width: 140px; }
  .esite-skin-over-the-moon .ss-rsvp-form::after { left: -14px; width: 96px; }
}
@media (max-width: 640px) {
  .esite-skin-over-the-moon .cdv-tiles .ss-cd { flex-wrap: nowrap; gap: 2px; }
  .esite-skin-over-the-moon .cdv-tiles .cd-unit { width: 22vw; }
  .esite-skin-over-the-moon .cdv-tiles .cd-unit::after { width: 34px; top: -8px; right: -6px; }
  .esite-skin-over-the-moon .ss-countdown .cd-n { font-size: 1.4rem; }
  .esite-skin-over-the-moon .cdv-tiles .cd-l { font-size: .5rem; letter-spacing: .06em; }
}

/* ---- 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 bunch of balloons either side of the names, the same in every colorway */
.esite-skin-over-the-moon.esite-occ-gender-reveal .hs-classic.no-photo .cl-panel { padding-left: clamp(28px, 25vw, 360px); }
.esite-skin-over-the-moon.esite-occ-gender-reveal .hs-classic.no-photo .cl-panel::before { aspect-ratio: .607; transform-origin: 50% 100%; animation: om-float 7s ease-in-out infinite; background-image: var(--sk-balloons-girl, none); }
.esite-skin-over-the-moon.esite-occ-gender-reveal .hs-classic.no-photo .cl-panel::after { aspect-ratio: .607; top: auto; bottom: clamp(50px, 6vw, 90px); background: var(--sk-balloons-boy, none) 50% 100% / contain no-repeat; animation-delay: -3s; }
.esite-skin-over-the-moon.esite-occ-gender-reveal .ss-scope[data-type="gifts"]::before { background-image: var(--sk-balloons-boy, none); }
.esite-skin-over-the-moon.esite-occ-gender-reveal .ss-closing::before { width: min(60vw, 260px); background: var(--sk-balloons-girl, none) 20% 100% / auto 100% no-repeat, var(--sk-balloons-boy, none) 80% 100% / auto 100% no-repeat; }
/* a first birthday: the hot air balloon where the moon was, the rocking horse on the right */
.esite-skin-over-the-moon.esite-occ-first-birthday .hs-classic.no-photo .cl-panel::before { aspect-ratio: .644; animation: om-float 8s ease-in-out infinite; background-image: var(--sk-hot-air, none); }
.esite-skin-over-the-moon.esite-occ-first-birthday .hs-classic.no-photo .cl-panel::after { aspect-ratio: .927; top: auto; bottom: clamp(50px, 6vw, 90px); background: var(--sk-horse, none) 50% 100% / contain no-repeat; animation: none; }
.esite-skin-over-the-moon.esite-occ-first-birthday .ss-scope[data-type="story"]::before { aspect-ratio: .903; background-image: var(--sk-moon, none); }
@media (max-width: 900px) {
  .esite-skin-over-the-moon.esite-occ-gender-reveal .hs-classic.no-photo .cl-panel { padding-left: 18px; }
  .esite-skin-over-the-moon.esite-occ-gender-reveal .hs-classic.no-photo .cl-panel::after, .esite-skin-over-the-moon.esite-occ-first-birthday .hs-classic.no-photo .cl-panel::after { top: 70px; bottom: auto; }
}