/* Pond Party: the file's first page at screen size. The hero is the deep ink color with the file's blob in the middle holding the words;
   the frog sits at the blob's foot on the left, lily pads float at the right, three balloons bob around it and the file's stars twinkle over
   the dark. Down the page the countdown numbers sit in the file's big circles (its "12 months" page), headings wear a star, and the frog
   sits by the RSVP card's corner with a balloon tied to the other. */
.esite-skin-pond-party {
  --sk-accent-font: "Lora", Georgia, serif;
  --sk-accent-style: normal;
  --sk-photo-shape: none;
  --sk-gap: 100px;
  --sk-measure: 880px;
}
.esite-skin-pond-party .ss-h, .esite-skin-pond-party .cl-names, .esite-skin-pond-party .ss-closing-names { font-weight: 500; letter-spacing: 0; }
.esite-skin-pond-party .ss-h { font-size: calc(clamp(2rem, 3.6vw, 2.9rem) * var(--s-hscale, 1)); line-height: 1.2; color: var(--s-accent); }

/* ---- hero: the blob on the deep color ---- */
.esite-skin-pond-party .ss-hero.hs-classic.no-photo { position: relative; overflow: hidden; background: var(--sk-deep); }
.esite-skin-pond-party .hs-classic.no-photo .cl-panel {
  --bw: min(700px, 88vw, calc((100svh - 150px) * .903));   /* the blob's width (it is a little taller than wide) */
  grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; min-height: calc(100svh - 38px);
  padding: 110px 20px 80px; background: none; overflow: visible; position: relative;
}
.esite-skin-pond-party .hs-classic.no-photo .cl-panel::before {
  display: block; inset: auto; left: 50%; top: 50%; width: var(--bw); aspect-ratio: .903; height: auto; translate: -50% -47%; z-index: 0; border: 0;
  background: var(--sk-blob, none) 50% 50% / contain no-repeat;
}
/* the lily pads floating at the blob's right foot */
.esite-skin-pond-party .hs-classic.no-photo .cl-panel::after {
  display: block; inset: auto; left: calc(50% + var(--bw) * .2); top: calc(50% + var(--bw) * .3); width: calc(var(--bw) * .38); aspect-ratio: 1.141; height: auto; z-index: 3; border: 0;
  background: var(--sk-pads, none) 50% 50% / contain no-repeat; animation: pp-float 6s ease-in-out infinite;
}
.esite-skin-pond-party .hs-classic.no-photo .cl-text { position: static; z-index: 2; max-width: calc(var(--bw) * .66); }
.esite-skin-pond-party .hs-classic.no-photo .cl-text > * { position: relative; z-index: 2; }
/* the frog at the blob's left foot */
.esite-skin-pond-party .hs-classic.no-photo .cl-text::before {
  content: ""; position: absolute; z-index: 4; left: max(2vw, calc(50% - var(--bw) * .76)); top: calc(50% + var(--bw) * .2); width: calc(var(--bw) * .38); aspect-ratio: .973; pointer-events: none;
  background: var(--sk-frog, none) 50% 100% / contain no-repeat; transform-origin: 50% 100%; animation: pp-squish 4.2s ease-in-out infinite;
}
/* three balloons around the blob */
.esite-skin-pond-party .hs-classic.no-photo .cl-text::after {
  content: ""; position: absolute; z-index: 1; left: 50%; top: calc(50% - var(--bw) * .5); width: calc(var(--bw) * 1.5); height: calc(var(--bw) * .86); translate: -50% 0; pointer-events: none;
  background: var(--sk-balloon-yellow, none) 2% 30% / 11% auto no-repeat, var(--sk-balloon-coral, none) 93% 0 / 10% auto no-repeat, var(--sk-balloon-mint, none) 100% 80% / 8% auto no-repeat;
  animation: pp-bob 5s ease-in-out infinite;
}
/* the file's stars over the dark, twinkling in two sets */
.esite-skin-pond-party .ss-hero.hs-classic.no-photo::before, .esite-skin-pond-party .ss-hero.hs-classic.no-photo::after {
  content: ""; position: absolute; inset: 70px 0 0; z-index: 0; pointer-events: none; animation: pp-twinkle 3.4s ease-in-out infinite;
  background: var(--sk-star-mint, none) 6% 12% / 26px auto no-repeat, var(--sk-spark-yellow, none) 15% 64% / 20px auto no-repeat, var(--sk-star-pink, none) 24% 90% / 22px auto no-repeat,
              var(--sk-spark-coral, none) 78% 18% / 22px auto no-repeat, var(--sk-star-coral, none) 88% 46% / 24px auto no-repeat, var(--sk-spark-mint, none) 95% 86% / 20px auto no-repeat;
}
.esite-skin-pond-party .ss-hero.hs-classic.no-photo::after {
  animation-delay: -1.7s;
  background: var(--sk-spark-yellow, none) 3% 40% / 18px auto no-repeat, var(--sk-star-pink, none) 12% 4% / 20px auto no-repeat, var(--sk-spark-mint, none) 30% 30% / 16px auto no-repeat,
              var(--sk-star-mint, none) 70% 94% / 22px auto no-repeat, var(--sk-spark-coral, none) 84% 72% / 18px auto no-repeat, var(--sk-star-pink, none) 97% 8% / 18px auto no-repeat;
}
@keyframes pp-squish { 0%, 74%, 100% { transform: scale(1, 1); } 80% { transform: scale(1.05, .93); } 88% { transform: scale(.97, 1.04); } }
@keyframes pp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes pp-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(5px) rotate(-1.5deg); } }
@keyframes pp-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .esite-skin-pond-party .hs-classic.no-photo :is(.cl-panel, .cl-text)::before, .esite-skin-pond-party .hs-classic.no-photo :is(.cl-panel, .cl-text)::after,
  .esite-skin-pond-party .ss-hero::before, .esite-skin-pond-party .ss-hero::after, .esite-skin-pond-party .ss-rsvp-form::after { animation: none; }
}

.esite-skin-pond-party .cl-panel .h-kicker { margin: 0 0 6px; font-family: var(--s-fbody); font-size: .8125rem; font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: var(--s-text); }
.esite-skin-pond-party .hs-classic .cl-names { justify-items: center; font-size: calc(clamp(3rem, 6.4vw, 5.2rem) * var(--s-hscale, 1)); line-height: 1.1; color: var(--s-accent); }
.esite-skin-pond-party .hs-classic .cl-names .cn-1, .esite-skin-pond-party .hs-classic .cl-names .cn-2 { justify-self: center; padding: 0; }
.esite-skin-pond-party .cl-sub { margin-top: 8px; font-size: 1rem; }
.esite-skin-pond-party .cl-facts { margin: 12px 0 18px; }
.esite-skin-pond-party .cl-facts b { font-family: var(--s-fbody); font-weight: 400; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--s-accent); }
.esite-skin-pond-party .cl-facts span { font-family: var(--s-fbody); font-size: 1rem; }
/* a photo: the blob's soft shape, the frog by its corner */
.esite-skin-pond-party .hs-classic:not(.no-photo):not(.hv-cover) .cl-photo, .esite-skin-pond-party .ss-story-img img { border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%; }
.esite-skin-pond-party .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual { overflow: visible; }
.esite-skin-pond-party .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual::after { inset: auto auto -6% -10%; width: 34%; aspect-ratio: .973; height: auto; z-index: 3; border: 0; background: var(--sk-frog, none) 50% 100% / contain no-repeat; }

/* ---- sections: a star on each heading, the pond's things at their sides ---- */
.esite-skin-pond-party .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-pond-party .ss-scope[data-type="schedule"], .esite-skin-pond-party .ss-scope[data-type="faq"] { background-color: var(--sk-sec-bg, var(--s-band)); }
.esite-skin-pond-party .ss-scope[data-type="story"]::before { top: auto; bottom: 16px; right: max(2vw, calc(50% - 640px)); left: auto; width: clamp(130px, 13vw, 200px); aspect-ratio: 1.248; background: var(--sk-pads-small, none) 100% 100% / contain no-repeat; }
.esite-skin-pond-party .ss-scope[data-type="schedule"]::after { content: ""; position: absolute; top: 40px; right: max(2vw, calc(50% - 620px)); width: clamp(140px, 14vw, 210px); aspect-ratio: .9; pointer-events: none;
  background: var(--sk-balloon-coral, none) 70% 0 / 40% auto no-repeat, var(--sk-balloon-yellow, none) 0 30% / 40% auto no-repeat; animation: pp-bob 5.4s ease-in-out infinite; }
.esite-skin-pond-party .ss-scope[data-type="gifts"]::before { content: ""; position: absolute; z-index: -1; bottom: 24px; left: max(2vw, calc(50% - 600px)); width: clamp(60px, 6vw, 96px); aspect-ratio: .581; background: var(--sk-hat, none) 0 100% / contain no-repeat; transform: rotate(-10deg); pointer-events: none; }
.esite-skin-pond-party .ss-scope[data-type="faq"]::after { content: ""; position: absolute; bottom: 20px; left: max(2vw, calc(50% - 640px)); width: clamp(110px, 11vw, 170px); aspect-ratio: .974; background: var(--sk-pad-big, none) 0 100% / contain no-repeat; pointer-events: none; }
.esite-skin-pond-party .ss-closing::before { width: min(40vw, 170px); height: 170px; background: var(--sk-frog, none) 50% 100% / contain no-repeat; }

/* ---- countdown: each number in one of the file's big circles ---- */
.esite-skin-pond-party .ss-scope[data-type="countdown"]:has(.cdv-tiles) { background-color: var(--sk-sec-bg, var(--s-bg)); }
.esite-skin-pond-party .cdv-tiles .ss-h { font-size: calc(clamp(2rem, 3.4vw, 2.7rem) * var(--s-hscale, 1)); }
.esite-skin-pond-party .cdv-tiles .ss-cd { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 2.4vw, 30px); }
.esite-skin-pond-party .cdv-tiles .cd-unit {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center !important; width: clamp(96px, 12vw, 144px); aspect-ratio: 1.067; padding: 0;
  border: 0 !important; border-radius: 0; outline: 0; box-shadow: none; background: var(--sk-disc, none) 50% 50% / contain no-repeat !important;
}
.esite-skin-pond-party .cdv-tiles .cd-unit:nth-child(2n) { rotate: 8deg; }
.esite-skin-pond-party .cdv-tiles .cd-unit:nth-child(2n) > * { rotate: -8deg; }
.esite-skin-pond-party .cdv-tiles .cd-unit::before, .esite-skin-pond-party .cdv-tiles .cd-unit::after { display: none !important; }
.esite-skin-pond-party .ss-countdown .cd-n { font-family: var(--s-fhead) !important; font-weight: 500; font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1; color: #fff; }
.esite-skin-pond-party .cdv-tiles .cd-l { font-family: var(--s-fbody); color: var(--s-text); font-size: .8125rem; margin-top: 2px; }
.esite-skin-pond-party .ss-scope[data-type="countdown"]:not(:has(.cdv-tiles)) { background-color: var(--sk-sec-bg, var(--s-band)); color: var(--s-text); }
.esite-skin-pond-party .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-pond-party .schv-wide .ss-tl-time { font-family: var(--s-fbody); letter-spacing: .08em; color: var(--s-accent); font-size: .9375rem; }
.esite-skin-pond-party .ss-tl-title { font-family: var(--s-fhead); font-size: 1.125rem; font-weight: 500; }
.esite-skin-pond-party .ss-faq-q { font-family: var(--s-fhead); font-size: 1.0625rem; font-weight: 500; }

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

/* ---- RSVP: the frog at the card's corner, a balloon tied to the other ---- */
.esite-skin-pond-party .ss-scope[data-type="rsvp"]::before, .esite-skin-pond-party .ss-scope[data-type="rsvp"]::after { display: none; }
.esite-skin-pond-party .ss-rsvp .ss-wrap { position: relative; isolation: isolate; }
.esite-skin-pond-party .ss-rsvp-form { position: relative; max-width: 560px; margin-top: 70px; margin-bottom: 40px; padding: 44px 40px 40px; border-radius: 32px; background: #fff; box-shadow: 0 24px 50px -34px rgba(20, 50, 40, .45); }
.esite-skin-pond-party .ss-rsvp-form::before {
  content: ""; position: absolute; z-index: 2; left: -168px; bottom: -36px; width: 170px; aspect-ratio: .973; pointer-events: none;
  background: var(--sk-frog, none) 50% 100% / contain no-repeat;
}
.esite-skin-pond-party .ss-rsvp-form::after {
  content: ""; position: absolute; z-index: -1; right: -26px; bottom: calc(100% - 40px); width: 64px; aspect-ratio: .358; pointer-events: none;
  background: var(--sk-balloon-coral, none) 50% 0 / contain no-repeat; animation: pp-bob 4.6s ease-in-out infinite;
}

@media (max-width: 900px) {
  .esite-skin-pond-party .hs-classic.no-photo .cl-panel { --bw: min(128vw, 620px); min-height: 0; padding: 120px 16px calc(var(--bw) * .42); align-content: start; }
  .esite-skin-pond-party .hs-classic.no-photo .cl-panel::before { top: 96px; translate: -50% 0; }
  .esite-skin-pond-party .hs-classic.no-photo .cl-panel::after { top: auto; bottom: 18px; left: auto; right: 2vw; width: min(40vw, 220px); }
  .esite-skin-pond-party .hs-classic.no-photo .cl-text { max-width: min(76vw, 420px); padding-top: calc(var(--bw) * .1); }
  .esite-skin-pond-party .hs-classic.no-photo .cl-text::before { top: auto; bottom: 10px; left: 3vw; width: min(42vw, 230px); }
  .esite-skin-pond-party .hs-classic.no-photo .cl-text::after { top: 70px; width: 100vw; height: 160px;
    background-position: 2% 40%, 98% 0, 100% 100%; background-size: 13% auto, 12% auto, 0 0; }
  .esite-skin-pond-party .hs-classic .cl-names { font-size: calc(2.7rem * var(--s-hscale, 1)); }
  .esite-skin-pond-party .cl-facts b { font-size: .6875rem; letter-spacing: .08em; }
  .esite-skin-pond-party .ss-scope[data-type="story"]::before, .esite-skin-pond-party .ss-scope[data-type="schedule"]::after,
  .esite-skin-pond-party .ss-scope[data-type="faq"]::after { display: none; }
  .esite-skin-pond-party .ss-rsvp-form { padding: 40px 22px 30px; margin-bottom: 130px; }
  .esite-skin-pond-party .ss-rsvp-form::before, .esite-skin-pond-party.esite-occ-first-birthday .ss-rsvp-form::before { top: calc(100% - 18px); bottom: auto; left: 14px; width: 104px; }
  .esite-skin-pond-party .ss-rsvp-form::after { right: 8px; width: 46px; }
}
@media (max-width: 640px) {
  .esite-skin-pond-party .cdv-tiles .ss-cd { flex-wrap: nowrap; gap: 4px; }
  .esite-skin-pond-party .cdv-tiles .cd-unit { width: 22vw; }
  .esite-skin-pond-party .ss-countdown .cd-n { font-size: 1.6rem; }
  .esite-skin-pond-party .cdv-tiles .cd-l { font-size: .6875rem; }
}

/* ---- each occasion its own way (the page carries .esite-occ-<occasion>); the art variables are inline: swap the images, not the variables ---- */
/* a first birthday: the frog wears its party hat, bunting across the top of the hero */
.esite-skin-pond-party.esite-occ-first-birthday .hs-classic.no-photo .cl-text::before { aspect-ratio: .653; top: calc(50% - var(--bw) * .02); width: calc(var(--bw) * .36); background-image: var(--sk-frog-hat, none); }
.esite-skin-pond-party.esite-occ-first-birthday .ss-hero.hs-classic.no-photo .cl-panel { padding-top: 140px; }
.esite-skin-pond-party.esite-occ-first-birthday .ss-hero.hs-classic.no-photo .cl-nav { position: relative; }
.esite-skin-pond-party.esite-occ-first-birthday .ss-hero.hs-classic.no-photo .cl-nav::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: clamp(44px, 6vw, 84px); pointer-events: none; background: var(--sk-bunting, none) 50% 0 / auto 100% repeat-x;
}
.esite-skin-pond-party.esite-occ-first-birthday .ss-rsvp-form::before { aspect-ratio: .653; bottom: -30px; background-image: var(--sk-frog-hat, none); }
/* a gender reveal: a pink and a blue balloon, the same in every colorway */
.esite-skin-pond-party.esite-occ-gender-reveal .hs-classic.no-photo .cl-text::after {
  background: var(--sk-balloon-girl, none) 3% 22% / 12% auto no-repeat, var(--sk-balloon-boy, none) 97% 22% / 12% auto no-repeat;
}
.esite-skin-pond-party.esite-occ-gender-reveal .ss-rsvp-form::after { background-image: var(--sk-balloon-girl, none); }
.esite-skin-pond-party.esite-occ-gender-reveal .ss-scope[data-type="schedule"]::after { background-image: var(--sk-balloon-boy, none), var(--sk-balloon-girl, none); }
@media (max-width: 900px) {
  .esite-skin-pond-party.esite-occ-first-birthday .hs-classic.no-photo .cl-text::before { top: auto; width: min(34vw, 190px); }
  .esite-skin-pond-party.esite-occ-gender-reveal .hs-classic.no-photo .cl-text::after { background-position: 2% 30%, 98% 30%; background-size: 13% auto, 13% auto; }
}