/* Rocket Baby: mission control. The names sit at the centre of a dashed orbit that turns slowly, the rocket riding it round them; the
   ringed planet floats top left, the moon hangs top right, the UFO hovers low on the right and two clouds lie along the foot, all over
   the cards' blob camouflage. Down the page the countdown numbers sit on planets, each heading wears a sparkle, the UFO beams down by the
   story, the star mobile hangs over the schedule and the rocket waits to take off beside the RSVP card. A gender reveal sets a pink and a
   blue planet either side of the names, a first birthday the sun and the star mobile. The hero is never isolated: the fixed nav lives
   inside it. */
.esite-skin-rocket-baby {
  --sk-accent-font: "Montserrat", sans-serif;
  --sk-accent-style: normal;
  --sk-photo-shape: none;
  --sk-gap: 96px;
  --sk-measure: 860px;
  --rb-orbit: min(780px, 92vw);
}
.esite-skin-rocket-baby .ss-h, .esite-skin-rocket-baby .cl-names, .esite-skin-rocket-baby .ss-closing-names { font-weight: 400; letter-spacing: 0; text-transform: none; }
.esite-skin-rocket-baby .ss-h { font-size: calc(clamp(2.8rem, 5vw, 4rem) * var(--s-hscale, 1)); line-height: 1.1; color: var(--s-accent); }

/* ---- hero: the camouflage, the planets, the orbit round the names ---- */
.esite-skin-rocket-baby .ss-hero.hs-classic.no-photo { position: relative; overflow: hidden; background: var(--s-bg); }
.esite-skin-rocket-baby .ss-hero.hs-classic.no-photo::before {   /* blob camouflage, the moon, the ringed planet, small planets and sparkles */
  content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background: var(--sk-moon, none) calc(100% - max(3vw, calc(50% - 600px))) 110px / clamp(110px, 11vw, 170px) auto no-repeat,
              var(--sk-planet-teal, none) 30% 82% / clamp(46px, 4.4vw, 66px) auto no-repeat,
              var(--sk-planet-purple, none) 74% 20% / clamp(34px, 3.2vw, 48px) auto no-repeat,
              var(--sk-sparkle, none) 18% 54% / 18px auto no-repeat, var(--sk-sparkle, none) 86% 50% / 14px auto no-repeat,
              var(--sk-sparkle, none) 62% 9% / 12px auto no-repeat, var(--sk-sparkle, none) 40% 14% / 10px auto no-repeat,
              var(--sk-sparkle, none) 9% 88% / 12px auto no-repeat,
              var(--sk-blobs, none) 50% 50% / cover no-repeat;
}
.esite-skin-rocket-baby .ss-hero.hs-classic.no-photo::after {    /* two clouds along the foot */
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: -10px; height: clamp(80px, 10vw, 150px); pointer-events: none;
  background: var(--sk-cloud-a, none) -2% 100% / auto 100% no-repeat, var(--sk-cloud-b, none) 104% 100% / auto 82% no-repeat;
}
.esite-skin-rocket-baby .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: max(min(940px, 100svh), calc(var(--rb-orbit) + 200px)); padding: 120px 24px clamp(110px, 12vw, 170px);
}
.esite-skin-rocket-baby .hs-classic.no-photo .cl-panel::before {   /* the ringed planet, top left, bobbing */
  display: block; content: ""; position: absolute; z-index: 1; inset: auto; left: max(2vw, calc(50% - 620px)); top: 100px; width: clamp(130px, 15vw, 230px); aspect-ratio: 1.292; height: auto; border: 0; translate: none; pointer-events: none;
  background: var(--sk-planet-ring, none) 50% 50% / contain no-repeat; animation: rb-bob 9s ease-in-out infinite;
}
.esite-skin-rocket-baby .hs-classic.no-photo .cl-panel::after {    /* the UFO hovering low on the right */
  display: block; content: ""; position: absolute; z-index: 1; inset: auto; right: max(2vw, calc(50% - 630px)); bottom: clamp(70px, 8vw, 120px); width: clamp(150px, 17vw, 260px); aspect-ratio: 1.173; height: auto; border: 0; pointer-events: none;
  background: var(--sk-ufo, none) 50% 100% / contain no-repeat; animation: rb-hover 6s ease-in-out infinite;
}
.esite-skin-rocket-baby .hs-classic.no-photo .cl-text { position: relative; z-index: 3; max-width: min(640px, calc(var(--rb-orbit) * .8)); display: grid; justify-items: center; }
.esite-skin-rocket-baby .hs-classic.no-photo .cl-text::before,
.esite-skin-rocket-baby .hs-classic.no-photo .cl-text::after {     /* the orbit and the rocket riding it; the box turns, so the rocket follows the dashes */
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: var(--rb-orbit); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; border-radius: 50%;
}
.esite-skin-rocket-baby .hs-classic.no-photo .cl-text::before { border: 2px dashed color-mix(in srgb, var(--s-accent) 55%, transparent); animation: rb-turn 140s linear infinite; }
.esite-skin-rocket-baby .hs-classic.no-photo .cl-text::after {
  z-index: 1; background: var(--sk-rocket, none) 50% 0 / clamp(110px, 11vw, 160px) auto no-repeat; translate: -50% calc(-50% - clamp(30px, 3vw, 44px)); animation: rb-turn 46s linear infinite;
}
@keyframes rb-turn { to { rotate: 360deg; } }
@keyframes rb-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-16px) rotate(3deg); } }
@keyframes rb-hover { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-14px, -12px); } }
@keyframes rb-launch { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) {
  .esite-skin-rocket-baby .hs-classic.no-photo :is(.cl-panel, .cl-text)::before, .esite-skin-rocket-baby .hs-classic.no-photo :is(.cl-panel, .cl-text)::after,
  .esite-skin-rocket-baby .ss-rsvp-form::before, .esite-skin-rocket-baby .ss-scope::before { animation: none; }
}

.esite-skin-rocket-baby .cl-panel .h-kicker { margin: 0 0 4px; font-family: var(--s-fbody); font-size: .875rem; font-weight: 600; font-style: normal; letter-spacing: .24em; text-transform: uppercase; color: var(--s-text); }
.esite-skin-rocket-baby .hs-classic .cl-names { justify-items: center; font-size: calc(clamp(3.6rem, 7vw, 6rem) * var(--s-hscale, 1)); line-height: 1.02; color: var(--s-accent); }
.esite-skin-rocket-baby .hs-classic .cl-names .cn-1, .esite-skin-rocket-baby .hs-classic .cl-names .cn-2 { justify-self: center; padding: 0; }
.esite-skin-rocket-baby .cl-sub { margin-top: 10px; font-size: 1.0625rem; color: var(--s-text); }
.esite-skin-rocket-baby .cl-facts { margin: 14px 0 20px; }
.esite-skin-rocket-baby .cl-facts b { font-family: var(--s-fbody); font-weight: 600; font-size: .8125rem; letter-spacing: .2em; text-transform: uppercase; color: var(--s-accent); }
.esite-skin-rocket-baby .cl-facts span { font-family: var(--s-fbody); font-size: 1rem; color: var(--s-text); }
.esite-skin-rocket-baby .cl-btn:not(.ghost) { background: var(--s-accent); color: var(--s-bg); border-color: var(--s-accent); }
/* a photo: a round porthole, the rocket flying past it */
.esite-skin-rocket-baby .hs-classic:not(.no-photo):not(.hv-cover) .cl-photo { border-radius: 50%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 0 0 10px color-mix(in srgb, var(--s-accent) 40%, transparent); }
.esite-skin-rocket-baby .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual { overflow: visible; }
.esite-skin-rocket-baby .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual::after { inset: -10% -12% auto auto; width: 34%; aspect-ratio: 1.262; height: auto; z-index: 3; border: 0; background: var(--sk-rocket, none) 50% 50% / contain no-repeat; }
.esite-skin-rocket-baby .ss-story-img img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }

/* ---- sections: a sparkle on each heading, the space things at their sides ---- */
.esite-skin-rocket-baby .ss-scope:not([data-type="hero"]):not([data-type="countdown"]):not([data-type="none"]) .ss-h::before { width: 26px; height: 30px; margin-bottom: 4px; }
.esite-skin-rocket-baby .ss-scope[data-type="schedule"], .esite-skin-rocket-baby .ss-scope[data-type="faq"] {
  background: var(--sk-blobs, none) 50% 50% / cover no-repeat, var(--sk-sec-bg, var(--s-bg));
}
.esite-skin-rocket-baby .ss-scope[data-type="story"]::before { top: auto; bottom: 30px; right: max(2vw, calc(50% - 640px)); left: auto; width: clamp(150px, 15vw, 230px); aspect-ratio: 1.173;
  background: var(--sk-ufo, none) 100% 100% / contain no-repeat; animation: rb-hover 6s ease-in-out infinite; }
.esite-skin-rocket-baby .ss-scope[data-type="schedule"]::before { top: 0; bottom: auto; right: max(2vw, calc(50% - 640px)); left: auto; width: clamp(200px, 24vw, 360px); aspect-ratio: 1.663;
  background: var(--sk-mobile, none) 100% 0 / contain no-repeat; }
.esite-skin-rocket-baby .ss-scope[data-type="faq"]::before { top: 40px; right: auto; left: max(2vw, calc(50% - 640px)); width: clamp(80px, 8vw, 120px); aspect-ratio: 1.043;
  background: var(--sk-moon, none) 0 0 / contain no-repeat; }
.esite-skin-rocket-baby .ss-scope[data-type="gifts"]::before { content: ""; position: absolute; z-index: -1; bottom: 30px; left: max(2vw, calc(50% - 620px)); width: clamp(110px, 12vw, 180px); aspect-ratio: 1.292;
  background: var(--sk-planet-ring, none) 0 100% / contain no-repeat; pointer-events: none; animation: rb-bob 9s ease-in-out infinite; }
.esite-skin-rocket-baby .ss-closing::before { width: min(40vw, 200px); height: 160px; background: var(--sk-rocket, none) 50% 100% / contain no-repeat; }
.esite-skin-rocket-baby .gftv-panel .ss-wrap { aspect-ratio: auto; width: min(620px, 100%); padding: 48px 30px; background: var(--s-band); border-radius: 36px; }
.esite-skin-rocket-baby .gftv-panel .ss-h::before { display: block !important; }

/* ---- countdown: each number on a planet ---- */
.esite-skin-rocket-baby .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.6rem, 4.4vw, 3.6rem) * var(--s-hscale, 1)); }
.esite-skin-rocket-baby .ss-scope[data-type="countdown"]:has(.cdv-tiles) { background: var(--sk-blobs, none) 50% 50% / cover no-repeat, var(--s-bg); }
.esite-skin-rocket-baby .cdv-tiles .ss-cd { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 2.4vw, 34px); }
.esite-skin-rocket-baby .cdv-tiles .cd-unit {
  position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: center !important; width: clamp(104px, 12vw, 150px); aspect-ratio: 1; padding: 0;
  border: 0 !important; outline: 0; border-radius: 50%; background: var(--sk-planet-teal, none) 50% 50% / contain no-repeat !important; box-shadow: none;
}
.esite-skin-rocket-baby .cdv-tiles .cd-unit:nth-child(2n) { background-image: var(--sk-planet-purple, none) !important; translate: 0 14px; }
.esite-skin-rocket-baby .cdv-tiles .cd-unit::before { display: none !important; }
.esite-skin-rocket-baby .cdv-tiles .cd-unit::after { display: block !important; content: ""; position: absolute; top: -6px; right: -10px; width: 18px; aspect-ratio: .832; height: auto; border: 0; background: var(--sk-sparkle, none) 50% 50% / contain no-repeat; }
.esite-skin-rocket-baby .cdv-tiles .cd-unit:nth-child(2n)::after { top: auto; bottom: 2px; right: auto; left: -8px; width: 14px; }
.esite-skin-rocket-baby .ss-countdown .cd-n { font-family: var(--s-fbody) !important; font-weight: 700; font-size: clamp(1.7rem, 2.8vw, 2.3rem); line-height: 1; color: #1d1b4c; }
.esite-skin-rocket-baby .cdv-tiles .cd-l { font-family: var(--s-fbody); color: #1d1b4c; font-size: .625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-top: 3px; }
.esite-skin-rocket-baby .ss-scope[data-type="countdown"]:not(:has(.cdv-tiles)) { background-color: var(--s-band); color: var(--s-text); }
.esite-skin-rocket-baby .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-rocket-baby .schv-wide .ss-tl-time { font-family: var(--s-fbody); letter-spacing: .16em; color: var(--s-accent); font-size: .8125rem; font-weight: 600; }
.esite-skin-rocket-baby .ss-tl-title { font-family: var(--s-fbody); font-size: 1.125rem; font-weight: 600; }
.esite-skin-rocket-baby .ss-faq-q { font-family: var(--s-fbody); font-size: 1.0625rem; font-weight: 600; }

/* ---- RSVP: a rounded card on the band colour, the rocket waiting to take off beside it ---- */
.esite-skin-rocket-baby .ss-scope[data-type="rsvp"]::before, .esite-skin-rocket-baby .ss-scope[data-type="rsvp"]::after { display: none; }
.esite-skin-rocket-baby .ss-rsvp .ss-wrap { position: relative; isolation: isolate; }
.esite-skin-rocket-baby .ss-rsvp-form { position: relative; max-width: 560px; margin-top: 40px; margin-bottom: 40px; padding: 48px 42px 42px; border-radius: 36px; background: var(--s-bg);
  box-shadow: 0 24px 50px -36px rgba(10, 10, 40, .6); }
.esite-skin-rocket-baby .ss-rsvp-form::before {
  content: ""; position: absolute; z-index: 2; left: calc(100% + 10px); bottom: 20px; width: 230px; aspect-ratio: 1.262; pointer-events: none; background: var(--sk-rocket, none) 50% 100% / contain no-repeat;
  animation: rb-launch 5s ease-in-out infinite;
}
.esite-skin-rocket-baby .ss-rsvp-form::after {
  content: ""; position: absolute; z-index: 3; right: -40px; top: -40px; width: 90px; aspect-ratio: 1.043; pointer-events: none; background: var(--sk-moon, none) 50% 50% / contain no-repeat;
}

@media (max-width: 900px) {
  .esite-skin-rocket-baby { --rb-orbit: min(600px, 112vw); }
  .esite-skin-rocket-baby .hs-classic.no-photo .cl-panel { min-height: 0; padding: calc(84px + clamp(120px, 34vw, 170px)) 18px clamp(130px, 34vw, 180px); }
  .esite-skin-rocket-baby .hs-classic.no-photo .cl-panel::before { left: 4vw; top: 80px; width: clamp(110px, 30vw, 160px); }
  .esite-skin-rocket-baby .hs-classic.no-photo .cl-panel::after { right: 4vw; bottom: 46px; width: clamp(110px, 28vw, 160px); }
  .esite-skin-rocket-baby .ss-hero.hs-classic.no-photo::before { background-position: 94% 90px, 22% 94%, 70% 30%, 10% 52%, 92% 56%, 60% 12%, 46% 26%, 8% 80%, 0 0; }
  .esite-skin-rocket-baby .hs-classic.no-photo .cl-text { max-width: 100%; }
  .esite-skin-rocket-baby .hs-classic.no-photo .cl-text::before { opacity: .7; }
  .esite-skin-rocket-baby .hs-classic.no-photo .cl-text::after { display: none; }
  .esite-skin-rocket-baby .hs-classic .cl-names { font-size: calc(3.4rem * var(--s-hscale, 1)); }
  .esite-skin-rocket-baby .ss-scope[data-type="story"]::before, .esite-skin-rocket-baby .ss-scope[data-type="schedule"]::before,
  .esite-skin-rocket-baby .ss-scope[data-type="faq"]::before, .esite-skin-rocket-baby .ss-scope[data-type="gifts"]::before { display: none; }
  .esite-skin-rocket-baby .ss-rsvp-form { padding: 42px 22px 30px; margin-bottom: 170px; }
  .esite-skin-rocket-baby .ss-rsvp-form::before { left: auto; right: 10px; top: calc(100% + 8px); bottom: auto; width: 170px; }
  .esite-skin-rocket-baby .ss-rsvp-form::after { right: -10px; top: -30px; width: 64px; }
}
@media (max-width: 640px) {
  .esite-skin-rocket-baby .cdv-tiles .ss-cd { flex-wrap: nowrap; gap: 4px; }
  .esite-skin-rocket-baby .cdv-tiles .cd-unit { width: 22vw; }
  .esite-skin-rocket-baby .ss-countdown .cd-n { font-size: 1.35rem; }
  .esite-skin-rocket-baby .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 planet either side of the names, the same in every colorway */
.esite-skin-rocket-baby.esite-occ-gender-reveal .hs-classic.no-photo .cl-panel::before { top: auto; bottom: clamp(70px, 8vw, 120px); width: clamp(160px, 19vw, 280px); aspect-ratio: 1.438; background-image: var(--sk-planet-girl, none); }
.esite-skin-rocket-baby.esite-occ-gender-reveal .hs-classic.no-photo .cl-panel::after { bottom: auto; top: 110px; width: clamp(160px, 19vw, 280px); aspect-ratio: 1.438; background: var(--sk-planet-boy, none) 50% 50% / contain no-repeat; animation: rb-bob 9s ease-in-out infinite -4s; }
.esite-skin-rocket-baby.esite-occ-gender-reveal .ss-hero.hs-classic.no-photo::before { background-image: none, var(--sk-planet-teal, none), var(--sk-planet-purple, none), var(--sk-sparkle, none), var(--sk-sparkle, none), var(--sk-sparkle, none), var(--sk-sparkle, none), var(--sk-sparkle, none), var(--sk-blobs, none); }
.esite-skin-rocket-baby.esite-occ-gender-reveal .ss-scope[data-type="gifts"]::before { aspect-ratio: 1.438; background-image: var(--sk-planet-boy, none); }
.esite-skin-rocket-baby.esite-occ-gender-reveal .ss-closing::before { width: min(64vw, 300px); height: 120px; background: var(--sk-planet-girl, none) 0 50% / auto 100% no-repeat, var(--sk-planet-boy, none) 100% 50% / auto 100% no-repeat; }
/* a first birthday: the sun in place of the ringed planet, the star mobile hanging over the names */
.esite-skin-rocket-baby.esite-occ-first-birthday .hs-classic.no-photo .cl-panel::before { width: clamp(150px, 17vw, 250px); aspect-ratio: 1.024; background-image: var(--sk-sun, none); animation: rb-turn 90s linear infinite; }
.esite-skin-rocket-baby.esite-occ-first-birthday .ss-hero.hs-classic.no-photo::before { background-image: none, var(--sk-planet-teal, none), var(--sk-planet-purple, none), var(--sk-sparkle, none), var(--sk-sparkle, none), var(--sk-sparkle, none), var(--sk-sparkle, none), var(--sk-sparkle, none), var(--sk-blobs, none); }
.esite-skin-rocket-baby.esite-occ-first-birthday .ss-hero.hs-classic.no-photo .cl-panel { background: var(--sk-mobile, none) calc(100% - max(2vw, calc(50% - 600px))) 70px / clamp(220px, 26vw, 380px) auto no-repeat; }
.esite-skin-rocket-baby.esite-occ-first-birthday .ss-scope[data-type="schedule"]::before { aspect-ratio: 1.024; width: clamp(120px, 13vw, 190px); background-image: var(--sk-sun, none); }
@media (max-width: 900px) {
  .esite-skin-rocket-baby.esite-occ-gender-reveal .hs-classic.no-photo .cl-panel::before { bottom: 46px; width: clamp(120px, 34vw, 180px); }
  .esite-skin-rocket-baby.esite-occ-gender-reveal .hs-classic.no-photo .cl-panel::after { top: 80px; width: clamp(120px, 34vw, 180px); }
  .esite-skin-rocket-baby.esite-occ-first-birthday .ss-hero.hs-classic.no-photo .cl-panel { background-size: 170px auto; background-position: 96% 76px; }
}