/* Rainbow Hop: a meadow under a giant rainbow. The rainbow rises from behind the hero's foot across the whole screen with the words
   inside its arch, the bunny sits on the file's grass at one side, the sun looks in at the other. Down the page bunting hangs over the
   band sections, the countdown numbers sit on the file's flowers, and the RSVP card has the bunny's face peeking over its top edge. */
.esite-skin-rainbow-hop {
  --sk-accent-font: "Petit Formal Script", cursive;
  --sk-accent-style: normal;
  --sk-photo-shape: none;
  --sk-gap: 100px;
  --sk-measure: 880px;
}
.esite-skin-rainbow-hop .ss-h, .esite-skin-rainbow-hop .cl-names, .esite-skin-rainbow-hop .ss-closing-names { font-weight: 400; letter-spacing: 0; }
.esite-skin-rainbow-hop .ss-h { font-size: calc(clamp(2.2rem, 4vw, 3.2rem) * var(--s-hscale, 1)); line-height: 1.2; color: var(--s-accent); }

/* ---- hero: the rainbow standing on the grass, the words in its arch ---- */
.esite-skin-rainbow-hop .ss-hero.hs-classic.no-photo { position: relative; overflow: hidden; background: var(--s-bg); }
.esite-skin-rainbow-hop .hs-classic.no-photo .cl-panel {
  --g: clamp(70px, 9vw, 120px);                 /* the grass */
  --rw: min(118vw, 1500px, 150svh);             /* the rainbow's width (its height is half) */
  grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: end; min-height: calc(100svh - 38px);
  padding: 120px 20px calc(var(--g) + 50px); background: none; overflow: visible; position: relative;
}
.esite-skin-rainbow-hop .hs-classic.no-photo .cl-panel::before {
  display: block; inset: auto 0 calc(var(--g) * .55); left: 50%; width: var(--rw); height: calc(var(--rw) / 2); translate: -50% 0; z-index: 0; border: 0;
  background: var(--sk-rainbow-big, none) 50% 100% / 100% 100% no-repeat;
}
.esite-skin-rainbow-hop .hs-classic.no-photo .cl-panel::after {
  display: block; inset: auto 0 0; height: var(--g); z-index: 3; border: 0; background: var(--sk-grass, none) 0 100% / auto 100% repeat-x;
}
.esite-skin-rainbow-hop .hs-classic.no-photo .cl-text { position: static; z-index: 2; max-width: min(560px, calc(var(--rw) * .5)); }
.esite-skin-rainbow-hop .hs-classic.no-photo .cl-text > * { position: relative; z-index: 2; }
/* the bunny on the grass at the right, the sun at the top left */
.esite-skin-rainbow-hop .hs-classic.no-photo .cl-text::before {
  content: ""; position: absolute; z-index: 4; bottom: calc(var(--g) * .3); right: max(3vw, calc(50% - 640px)); width: min(22vw, 300px, 30svh); aspect-ratio: .877; pointer-events: none;
  background: var(--sk-bunny, none) 50% 100% / contain no-repeat; transform-origin: 50% 100%; animation: rh-hop 3.6s ease-in-out infinite;
}
.esite-skin-rainbow-hop .hs-classic.no-photo .cl-text::after {
  content: ""; position: absolute; z-index: 1; top: 96px; left: max(3vw, calc(50% - 620px)); width: min(14vw, 170px); aspect-ratio: 1; pointer-events: none;
  background: var(--sk-sun, none) 50% 50% / contain no-repeat; animation: rh-spin 30s linear infinite;
}
@keyframes rh-hop { 0%, 70%, 100% { transform: translateY(0) scaleY(1); } 78% { transform: translateY(0) scaleY(.94); } 86% { transform: translateY(-16px) scaleY(1.02); } }
@keyframes rh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .esite-skin-rainbow-hop .hs-classic.no-photo .cl-text::before, .esite-skin-rainbow-hop .hs-classic.no-photo .cl-text::after { animation: none; } }

.esite-skin-rainbow-hop .cl-panel .h-kicker { margin: 0 0 6px; font-family: var(--s-fbody); font-size: .75rem; font-style: normal; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--s-text); }
.esite-skin-rainbow-hop .hs-classic .cl-names { justify-items: center; font-size: calc(clamp(3.2rem, 7vw, 5.8rem) * var(--s-hscale, 1)); line-height: 1.15; color: var(--s-text); }
.esite-skin-rainbow-hop .hs-classic .cl-names .cn-1, .esite-skin-rainbow-hop .hs-classic .cl-names .cn-2 { justify-self: center; padding: 0; }
.esite-skin-rainbow-hop .cl-sub { margin-top: 8px; font-size: .9375rem; font-weight: 500; }
.esite-skin-rainbow-hop .cl-facts { margin: 12px 0 18px; }
.esite-skin-rainbow-hop .cl-facts b { font-family: var(--s-fbody); font-weight: 700; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--s-accent); }
.esite-skin-rainbow-hop .cl-facts span { font-family: var(--s-fbody); font-weight: 500; font-size: 1rem; }
/* a photo: a soft arch, a little rainbow over its corner */
.esite-skin-rainbow-hop .hs-classic:not(.no-photo):not(.hv-cover) .cl-photo, .esite-skin-rainbow-hop .ss-story-img img { border-radius: 999px 999px 28px 28px; }
.esite-skin-rainbow-hop .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual { overflow: visible; }
.esite-skin-rainbow-hop .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual::after { inset: auto -12% -6% auto; width: 34%; aspect-ratio: .877; height: auto; z-index: 3; border: 0; background: var(--sk-bunny, none) 50% 100% / contain no-repeat; }

/* ---- sections: bunting over the band sections, a toy at each ---- */
.esite-skin-rainbow-hop .ss-scope:not([data-type="hero"]):not([data-type="countdown"]):not([data-type="none"]) .ss-h::before { width: 30px; height: 30px; margin-bottom: 4px; }
.esite-skin-rainbow-hop .ss-scope[data-type="schedule"], .esite-skin-rainbow-hop .ss-scope[data-type="faq"] { background-color: var(--sk-sec-bg, var(--s-band)); }
.esite-skin-rainbow-hop .ss-scope[data-type="schedule"] .ss, .esite-skin-rainbow-hop .ss-scope[data-type="faq"] .ss { padding-top: calc(var(--sk-gap) + 30px); }
.esite-skin-rainbow-hop .ss-scope[data-type="schedule"]::before, .esite-skin-rainbow-hop .ss-scope[data-type="faq"]::before {
  top: 0; left: 0; right: 0; width: auto; aspect-ratio: auto; height: clamp(60px, 8vw, 110px); z-index: 0; background: var(--sk-bunting, none) 50% 0 / auto 100% repeat-x;
}
.esite-skin-rainbow-hop .ss-scope[data-type="schedule"]::after { content: ""; position: absolute; bottom: 20px; right: max(2vw, calc(50% - 620px)); width: clamp(80px, 8vw, 120px); aspect-ratio: .665; background: var(--sk-rattle, none) 50% 100% / contain no-repeat; transform: rotate(-12deg); pointer-events: none; }
.esite-skin-rainbow-hop .ss-scope[data-type="story"]::before { top: auto; bottom: 10px; right: max(2vw, calc(50% - 640px)); left: auto; width: clamp(150px, 15vw, 230px); aspect-ratio: 1.08; background: var(--sk-bundle, none) 100% 100% / contain no-repeat; }
.esite-skin-rainbow-hop .ss-scope[data-type="gifts"]::before { content: ""; position: absolute; z-index: -1; bottom: 24px; left: max(2vw, calc(50% - 600px)); width: clamp(90px, 9vw, 140px); aspect-ratio: 1.251; background: var(--sk-sock, none) 0 100% / contain no-repeat; pointer-events: none; }
.esite-skin-rainbow-hop .ss-scope[data-type="gifts"]::after { content: ""; position: absolute; z-index: -1; top: 30px; right: max(2vw, calc(50% - 600px)); width: clamp(50px, 5vw, 80px); aspect-ratio: .545; background: var(--sk-bottle, none) 100% 0 / contain no-repeat; transform: rotate(12deg); pointer-events: none; }
.esite-skin-rainbow-hop .ss-scope[data-type="faq"]::after { content: ""; position: absolute; bottom: 20px; left: max(2vw, calc(50% - 640px)); width: clamp(120px, 12vw, 190px); aspect-ratio: 1.615; background: var(--sk-cloud-face, none) 0 100% / contain no-repeat; pointer-events: none; }
.esite-skin-rainbow-hop .ss-closing::before { width: min(80vw, 420px); height: 160px; background: var(--sk-rainbow-a, none) 50% 100% / contain no-repeat; }

/* ---- countdown: each number on one of the file's flowers ---- */
.esite-skin-rainbow-hop .ss-scope[data-type="countdown"]:has(.cdv-tiles) { background-color: var(--sk-sec-bg, var(--s-bg)); }
.esite-skin-rainbow-hop .cdv-tiles .ss-h { font-size: calc(clamp(2rem, 3.4vw, 2.7rem) * var(--s-hscale, 1)); }
.esite-skin-rainbow-hop .cdv-tiles .ss-cd { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 2.4vw, 30px); }
.esite-skin-rainbow-hop .cdv-tiles .cd-unit {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center !important; width: clamp(92px, 11.5vw, 136px); aspect-ratio: 1; padding: 0;
  border: 0 !important; border-radius: 0; outline: 0; box-shadow: none; background: radial-gradient(circle, #fff 0 33%, transparent 34%) 50% 50% / 100% 100% no-repeat, var(--sk-flower-pink, none) 50% 50% / contain no-repeat !important;   /* a white heart for the number */
}
.esite-skin-rainbow-hop .cdv-tiles .cd-unit:nth-child(2n) { background-image: radial-gradient(circle, #fff 0 33%, transparent 34%), var(--sk-flower-yellow, none) !important; }
.esite-skin-rainbow-hop .cdv-tiles .cd-unit:nth-child(3) { background-image: radial-gradient(circle, #fff 0 33%, transparent 34%), var(--sk-flower-rose, none) !important; }
.esite-skin-rainbow-hop .cdv-tiles .cd-unit::before, .esite-skin-rainbow-hop .cdv-tiles .cd-unit::after { display: none !important; }
.esite-skin-rainbow-hop .ss-countdown .cd-n { font-family: var(--s-fbody) !important; font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.8rem); line-height: 1; color: var(--s-text); }
.esite-skin-rainbow-hop .cdv-tiles .cd-l { color: var(--s-accent); text-transform: uppercase; letter-spacing: .1em; font-size: .5rem; font-weight: 700; margin-top: 1px; }
.esite-skin-rainbow-hop .ss-scope[data-type="countdown"]:not(:has(.cdv-tiles)) { background-color: var(--sk-sec-bg, var(--s-band)); color: var(--s-text); }
.esite-skin-rainbow-hop .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-rainbow-hop .schv-wide .ss-tl-time { font-family: var(--s-fbody); font-weight: 700; letter-spacing: .1em; color: var(--s-accent); font-size: .9375rem; }
.esite-skin-rainbow-hop .ss-tl-title { font-family: var(--s-fbody); font-size: 1rem; font-weight: 600; }
.esite-skin-rainbow-hop .ss-faq-q { font-family: var(--s-fbody); font-size: 1rem; font-weight: 600; }

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

/* ---- RSVP: the bunny peeking over the card ---- */
.esite-skin-rainbow-hop .ss-scope[data-type="rsvp"]::before, .esite-skin-rainbow-hop .ss-scope[data-type="rsvp"]::after { display: none; }
.esite-skin-rainbow-hop .ss-rsvp-form { position: relative; max-width: 560px; margin-top: 180px; padding: 46px 40px 40px; border-radius: 32px; background: #fff; box-shadow: 0 24px 50px -34px rgba(40, 50, 80, .4); }
/* the whole face sits above the card's edge, only the chin rests on it */
.esite-skin-rainbow-hop .ss-rsvp-form::before {
  content: ""; position: absolute; z-index: 1; left: 50%; bottom: calc(100% - 8px); width: 190px; aspect-ratio: 1.095; translate: -50% 0; pointer-events: none;
  background: var(--sk-bunny-head, none) 50% 0 / contain no-repeat;
}
.esite-skin-rainbow-hop .ss-rsvp .ss-wrap { position: relative; isolation: isolate; }

/* a tall window: the rainbow grows so its arch fills the hero */
@media (min-width: 901px) and (max-aspect-ratio: 1 / 1) { .esite-skin-rainbow-hop .hs-classic.no-photo .cl-panel { --rw: min(172vw, 150svh); } }
@media (max-width: 900px) {
  .esite-skin-rainbow-hop .hs-classic.no-photo .cl-panel { --g: 70px; --rw: 150vw; min-height: 0; padding: 120px 16px calc(var(--g) + min(46vw, 210px)); align-content: start; }
  .esite-skin-rainbow-hop .hs-classic.no-photo .cl-text { max-width: none; }
  .esite-skin-rainbow-hop .hs-classic.no-photo .cl-text::before { right: 50%; translate: 50% 0; width: min(42vw, 190px); bottom: calc(var(--g) * .3); }
  .esite-skin-rainbow-hop .hs-classic.no-photo .cl-text::after { top: 76px; left: 4vw; width: 64px; }
  .esite-skin-rainbow-hop .hs-classic .cl-names { font-size: calc(2.8rem * var(--s-hscale, 1)); }
  .esite-skin-rainbow-hop .cl-facts b { font-size: .6875rem; letter-spacing: .1em; }
  .esite-skin-rainbow-hop .ss-scope[data-type="story"]::before, .esite-skin-rainbow-hop .ss-scope[data-type="schedule"]::after,
  .esite-skin-rainbow-hop .ss-scope[data-type="faq"]::after, .esite-skin-rainbow-hop .ss-scope[data-type="gifts"]::after { display: none; }
  .esite-skin-rainbow-hop .ss-rsvp-form { margin-top: 150px; padding: 40px 22px 30px; }
  .esite-skin-rainbow-hop .ss-rsvp-form::before { width: 150px; }
}
@media (max-width: 640px) {
  .esite-skin-rainbow-hop .cdv-tiles .ss-cd { flex-wrap: nowrap; gap: 4px; }
  .esite-skin-rainbow-hop .cdv-tiles .cd-unit { width: 22vw; }
  .esite-skin-rainbow-hop .ss-countdown .cd-n { font-size: 1.25rem; }
  .esite-skin-rainbow-hop .cdv-tiles .cd-l { letter-spacing: .04em; font-size: .5rem; }
}

/* ---- each occasion its own way (the page carries .esite-occ-<occasion>) ---- */
/* a gender reveal: the bunny's face between two smiling clouds instead of the sitting bunny */
.esite-skin-rainbow-hop.esite-occ-gender-reveal .hs-classic.no-photo .cl-text::before { aspect-ratio: 2.6; width: min(40vw, 520px, 54svh); bottom: calc(var(--g) * .7); animation: none;   /* the art variables are inline: swap the images, not the variables */
  background: var(--sk-cloud-face, none) 0 80% / 36% auto no-repeat, var(--sk-bunny-head, none) 50% 100% / 40% auto no-repeat, var(--sk-cloud-wink, none) 100% 70% / 34% auto no-repeat; }
/* a first birthday: the bunting across the top of the hero */
.esite-skin-rainbow-hop.esite-occ-first-birthday .ss-hero.hs-classic.no-photo::before {
  content: ""; position: absolute; inset: 60px 0 auto; height: clamp(50px, 7vw, 100px); z-index: 1; pointer-events: none; background: var(--sk-bunting, none) 50% 0 / auto 100% repeat-x;
}