/* Stork Delivery: the file's card at screen size. The hero is one big soft card inside the file's dashed frame on a lighter page; a
   clothesline runs across its top with the two bodysuits swaying on it, the baby sleeps on its cloud under the words and the stork flies
   across the window now and then with its bundle. Down the page the countdown numbers sit on little framed cards with a moon or a star,
   sections keep the dashed frame, and the bunny peeks round the RSVP card. */
.esite-skin-stork-delivery {
  --sk-accent-font: "Quicksand", sans-serif;
  --sk-accent-style: normal;
  --sk-photo-shape: none;
  --sk-gap: 96px;
  --sk-measure: 860px;
  --sd-dash: color-mix(in srgb, var(--s-accent) 45%, transparent);
}
.esite-skin-stork-delivery .ss-h, .esite-skin-stork-delivery .cl-names, .esite-skin-stork-delivery .ss-closing-names { font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.esite-skin-stork-delivery .ss-h { font-size: calc(clamp(1.6rem, 2.8vw, 2.25rem) * var(--s-hscale, 1)); line-height: 1.25; color: var(--s-accent); }

/* ---- hero: one big framed card on the lighter page ---- */
.esite-skin-stork-delivery .ss-hero.hs-classic.no-photo { position: relative; overflow: hidden; background: var(--s-band); }
.esite-skin-stork-delivery .hs-classic.no-photo .cl-panel {
  --cw: min(1040px, calc(100vw - 48px));
  grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; position: relative; overflow: visible;
  width: var(--cw); margin: 92px auto 40px; min-height: min(760px, calc(100svh - 140px)); padding: clamp(150px, 17vw, 200px) 28px 40px;
  background: var(--s-bg); border-radius: 10px; box-shadow: 0 30px 60px -44px color-mix(in srgb, var(--s-text) 45%, transparent);
}
/* the file's dashed frame, just inside the card */
.esite-skin-stork-delivery .hs-classic.no-photo .cl-panel::before {
  display: block; content: ""; position: absolute; inset: 14px; z-index: 0; border: 2px dashed var(--sd-dash); border-radius: 4px; background: none; translate: none; width: auto; height: auto;
}
/* the clothesline across the top of the card, the two bodysuits swaying on it */
.esite-skin-stork-delivery .hs-classic.no-photo .cl-panel::after {
  display: block; content: ""; position: absolute; inset: auto; left: 7%; right: 7%; top: 30px; height: clamp(130px, 15vw, 190px); z-index: 1; border: 0; pointer-events: none;
  background: var(--sk-onesie-peach, none) 30% 22px / auto 82% no-repeat, var(--sk-onesie-pink, none) 70% 18px / auto 82% no-repeat, var(--sk-line, none) 50% 0 / 100% auto no-repeat;
  transform-origin: 50% 0; animation: sd-sway 5.5s ease-in-out infinite;
}
.esite-skin-stork-delivery .hs-classic.no-photo .cl-text { position: static; z-index: 2; max-width: 640px; display: grid; justify-items: center; }
.esite-skin-stork-delivery .hs-classic.no-photo .cl-text > * { position: relative; z-index: 2; }
/* the baby asleep on its cloud, under the words */
.esite-skin-stork-delivery .hs-classic.no-photo .cl-text::after {
  content: ""; display: block; order: 99; width: clamp(220px, 30vw, 360px); aspect-ratio: 1.414; margin-top: 18px; pointer-events: none;
  background: var(--sk-baby-cloud, none) 50% 50% / contain no-repeat; animation: sd-float 6s ease-in-out infinite;
}
/* two hearts beside the words */
.esite-skin-stork-delivery .hs-classic.no-photo .cl-text::before {
  content: ""; position: absolute; z-index: 1; left: 50%; bottom: 60px; width: min(calc(var(--cw) - 80px), 760px); height: clamp(160px, 18vw, 230px); translate: -50% 0; pointer-events: none;
  background: var(--sk-heart-big, none) 100% 10% / auto 40% no-repeat, var(--sk-heart-small, none) 0 90% / auto 24% no-repeat;
  animation: sd-beat 4s ease-in-out infinite;
}
/* the stork flying across the window with its bundle, now and then */
.esite-skin-stork-delivery .ss-hero.hs-classic.no-photo::after {
  content: ""; position: absolute; z-index: 3; top: 62px; left: 0; width: clamp(110px, 11vw, 170px); aspect-ratio: 1.116; pointer-events: none;   /* over the line, clear of the words */
  background: var(--sk-stork, none) 50% 50% / contain no-repeat; animation: sd-fly 26s linear infinite;
}
/* moons and stars on the page round the card */
.esite-skin-stork-delivery .ss-hero.hs-classic.no-photo::before {
  content: ""; position: absolute; inset: 70px 0 0; z-index: 0; pointer-events: none; animation: sd-twinkle 3.6s ease-in-out infinite;
  background: var(--sk-moon, none) 3% 18% / 22px auto no-repeat, var(--sk-star, none) 97% 12% / 22px auto no-repeat, var(--sk-cloud-pink, none) 2% 80% / 40px auto no-repeat,
              var(--sk-star, none) 96% 70% / 18px auto no-repeat, var(--sk-cloud-peach, none) 98% 92% / 36px auto no-repeat;
}
@keyframes sd-sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(.8deg); } }
@keyframes sd-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes sd-beat { 0%, 80%, 100% { transform: scale(1); } 88% { transform: scale(1.06); } }
@keyframes sd-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes sd-fly { 0% { transform: translate(105vw, 0); } 45% { transform: translate(-30vw, -40px); } 100% { transform: translate(-30vw, -40px); } }
@media (prefers-reduced-motion: reduce) {
  .esite-skin-stork-delivery .hs-classic.no-photo :is(.cl-panel, .cl-text)::before, .esite-skin-stork-delivery .hs-classic.no-photo :is(.cl-panel, .cl-text)::after,
  .esite-skin-stork-delivery .ss-hero::before, .esite-skin-stork-delivery .ss-rsvp-form::after { animation: none; }
  .esite-skin-stork-delivery .ss-hero.hs-classic.no-photo::after { animation: none; left: auto; right: 4vw; }
}

.esite-skin-stork-delivery .cl-panel .h-kicker { margin: 0 0 8px; font-family: var(--s-fbody); font-size: .9375rem; font-style: normal; letter-spacing: .04em; text-transform: none; color: var(--s-accent); }
.esite-skin-stork-delivery .hs-classic .cl-names { justify-items: center; font-size: calc(clamp(2.3rem, 4.8vw, 3.9rem) * var(--s-hscale, 1)); line-height: 1.15; color: var(--s-accent); }
.esite-skin-stork-delivery .hs-classic .cl-names .cn-1, .esite-skin-stork-delivery .hs-classic .cl-names .cn-2 { justify-self: center; padding: 0; }
.esite-skin-stork-delivery .cl-sub { margin-top: 10px; font-size: 1.0625rem; }
.esite-skin-stork-delivery .cl-facts { margin: 14px 0 18px; }
.esite-skin-stork-delivery .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-stork-delivery .cl-facts span { font-family: var(--s-fbody); font-size: 1rem; }
/* a photo: framed like the file's cards, the stork bringing it */
.esite-skin-stork-delivery .hs-classic:not(.no-photo):not(.hv-cover) .cl-photo, .esite-skin-stork-delivery .ss-story-img img { border-radius: 8px; outline: 2px dashed var(--sd-dash); outline-offset: -14px; }
.esite-skin-stork-delivery .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual { overflow: visible; }
.esite-skin-stork-delivery .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual::after { inset: -8% -12% auto auto; width: 36%; aspect-ratio: 1.116; height: auto; z-index: 3; border: 0; background: var(--sk-stork, none) 50% 50% / contain no-repeat; }

/* ---- sections: a heart on each heading, the nursery's things at their sides ---- */
.esite-skin-stork-delivery .ss-scope:not([data-type="hero"]):not([data-type="countdown"]):not([data-type="none"]) .ss-h::before { width: 24px; height: 24px; margin-bottom: 6px; }
.esite-skin-stork-delivery .ss-scope[data-type="schedule"], .esite-skin-stork-delivery .ss-scope[data-type="faq"] { background-color: var(--sk-sec-bg, var(--s-band)); }
.esite-skin-stork-delivery .ss-scope[data-type="story"]::before { top: auto; bottom: 18px; right: max(2vw, calc(50% - 640px)); left: auto; width: clamp(120px, 12vw, 180px); aspect-ratio: .962; background: var(--sk-bunny, none) 100% 100% / contain no-repeat; }
.esite-skin-stork-delivery .ss-scope[data-type="schedule"]::after { content: ""; position: absolute; top: 36px; right: max(2vw, calc(50% - 640px)); width: clamp(150px, 15vw, 230px); aspect-ratio: 1.5; pointer-events: none;
  background: var(--sk-onesie-pink, none) 78% 14px / auto 70% no-repeat, var(--sk-onesie-peach, none) 22% 18px / auto 70% no-repeat, var(--sk-line, none) 50% 0 / 100% auto no-repeat;
  transform-origin: 50% 0; animation: sd-sway 5s ease-in-out infinite; }
.esite-skin-stork-delivery .ss-scope[data-type="gifts"]::before { content: ""; position: absolute; z-index: -1; bottom: 22px; left: max(2vw, calc(50% - 620px)); width: clamp(130px, 13vw, 200px); aspect-ratio: 1.116; background: var(--sk-stork, none) 0 100% / contain no-repeat; pointer-events: none; }
.esite-skin-stork-delivery .ss-scope[data-type="faq"]::after { content: ""; position: absolute; bottom: 22px; left: max(2vw, calc(50% - 640px)); width: clamp(70px, 7vw, 110px); aspect-ratio: 1.438; background: var(--sk-cloud-pink, none) 0 100% / contain no-repeat; pointer-events: none; }
.esite-skin-stork-delivery .ss-closing::before { width: min(44vw, 260px); height: 184px; background: var(--sk-baby-cloud, none) 50% 100% / contain no-repeat; }
.esite-skin-stork-delivery .gftv-panel .ss-wrap { aspect-ratio: auto; width: min(620px, 100%); padding: 40px 28px; background: var(--s-bg); border-radius: 10px; outline: 2px dashed var(--sd-dash); outline-offset: -12px; }
.esite-skin-stork-delivery .gftv-panel .ss-h::before { display: block !important; }

/* ---- countdown: each number on a little framed card, a moon or a star at its corner ---- */
.esite-skin-stork-delivery .ss-scope[data-type="countdown"]:has(.cdv-tiles) { background-color: var(--sk-sec-bg, var(--s-band)); }
.esite-skin-stork-delivery .cdv-tiles .ss-cd { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 2.2vw, 26px); }
.esite-skin-stork-delivery .cdv-tiles .cd-unit {
  position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: center !important; width: clamp(96px, 12vw, 140px); aspect-ratio: 1; padding: 0;
  border: 0 !important; border-radius: 8px; outline: 2px dashed var(--sd-dash); outline-offset: -9px; box-shadow: 0 16px 30px -26px color-mix(in srgb, var(--s-text) 50%, transparent);
  background: var(--s-bg) !important;
}
.esite-skin-stork-delivery .cdv-tiles .cd-unit:nth-child(2n) { rotate: -3deg; }
.esite-skin-stork-delivery .cdv-tiles .cd-unit:nth-child(2n+1) { rotate: 2deg; }
.esite-skin-stork-delivery .cdv-tiles .cd-unit::before { display: none !important; }
.esite-skin-stork-delivery .cdv-tiles .cd-unit::after {
  display: block !important; content: ""; position: absolute; top: -10px; right: -8px; width: 26px; height: 26px; border: 0; background: var(--sk-moon, none) 50% 50% / contain no-repeat;
}
.esite-skin-stork-delivery .cdv-tiles .cd-unit:nth-child(2n)::after { background-image: var(--sk-star, none); }
.esite-skin-stork-delivery .ss-countdown .cd-n { font-family: var(--s-fhead) !important; font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; color: var(--s-accent); }
.esite-skin-stork-delivery .cdv-tiles .cd-l { font-family: var(--s-fbody); color: var(--s-text); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; }
.esite-skin-stork-delivery .ss-scope[data-type="countdown"]:not(:has(.cdv-tiles)) { background-color: var(--sk-sec-bg, var(--s-band)); color: var(--s-text); }
.esite-skin-stork-delivery .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-stork-delivery .schv-wide .ss-tl-time { font-family: var(--s-fbody); letter-spacing: .12em; color: var(--s-accent); font-size: .875rem; font-weight: 600; }
.esite-skin-stork-delivery .ss-tl-title { font-family: var(--s-fhead); font-size: 1.125rem; font-weight: 600; }
.esite-skin-stork-delivery .ss-faq-q { font-family: var(--s-fhead); font-size: 1.0625rem; font-weight: 600; }

/* ---- RSVP: a framed card, the bunny peeking round its corner ---- */
.esite-skin-stork-delivery .ss-scope[data-type="rsvp"]::before, .esite-skin-stork-delivery .ss-scope[data-type="rsvp"]::after { display: none; }
.esite-skin-stork-delivery .ss-rsvp .ss-wrap { position: relative; isolation: isolate; }
.esite-skin-stork-delivery .ss-rsvp-form { position: relative; max-width: 560px; margin-top: 60px; margin-bottom: 40px; padding: 48px 42px 42px; border-radius: 10px; background: var(--s-bg);
  outline: 2px dashed var(--sd-dash); outline-offset: -14px; box-shadow: 0 24px 50px -34px color-mix(in srgb, var(--s-text) 50%, transparent); }
.esite-skin-stork-delivery .ss-rsvp-form::before {
  content: ""; position: absolute; z-index: 2; right: -150px; bottom: -10px; width: 170px; aspect-ratio: .962; pointer-events: none;
  background: var(--sk-bunny, none) 50% 100% / contain no-repeat;
}
.esite-skin-stork-delivery .ss-rsvp-form::after {
  content: ""; position: absolute; z-index: 3; left: -18px; top: -22px; width: 54px; aspect-ratio: .883; pointer-events: none;
  background: var(--sk-heart-big, none) 50% 50% / contain no-repeat; animation: sd-beat 4s ease-in-out infinite;
}

@media (max-width: 900px) {
  .esite-skin-stork-delivery .hs-classic.no-photo .cl-panel { --cw: calc(100vw - 24px); margin-top: 84px; min-height: 0; padding: clamp(120px, 34vw, 160px) 18px 34px; }
  .esite-skin-stork-delivery .hs-classic.no-photo .cl-panel::before { inset: 9px; }
  .esite-skin-stork-delivery .hs-classic.no-photo .cl-panel::after { left: 4%; right: 4%; top: 22px; height: clamp(100px, 28vw, 140px); }
  .esite-skin-stork-delivery .hs-classic.no-photo .cl-text::before { bottom: 40px; height: 120px; }
  .esite-skin-stork-delivery .ss-hero.hs-classic.no-photo::after { top: 64px; width: 96px; }
  .esite-skin-stork-delivery .hs-classic .cl-names { font-size: calc(2.1rem * var(--s-hscale, 1)); letter-spacing: .08em; }
  .esite-skin-stork-delivery .cl-facts b { font-size: .6875rem; letter-spacing: .08em; }
  .esite-skin-stork-delivery .ss-scope[data-type="story"]::before, .esite-skin-stork-delivery .ss-scope[data-type="schedule"]::after,
  .esite-skin-stork-delivery .ss-scope[data-type="faq"]::after, .esite-skin-stork-delivery .ss-scope[data-type="gifts"]::before { display: none; }
  .esite-skin-stork-delivery .ss-rsvp-form { padding: 42px 22px 30px; margin-bottom: 130px; }
  .esite-skin-stork-delivery .ss-rsvp-form::before { top: calc(100% - 14px); bottom: auto; right: 10px; width: 110px; }
}
@media (max-width: 640px) {
  .esite-skin-stork-delivery .cdv-tiles .ss-cd { flex-wrap: nowrap; gap: 6px; }
  .esite-skin-stork-delivery .cdv-tiles .cd-unit { width: 21vw; outline-offset: -6px; }
  .esite-skin-stork-delivery .ss-countdown .cd-n { font-size: 1.5rem; }
  .esite-skin-stork-delivery .cdv-tiles .cd-l { font-size: .625rem; 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 bodysuit on the line, a pink and a blue heart, the same in every colorway */
.esite-skin-stork-delivery.esite-occ-gender-reveal .hs-classic.no-photo .cl-panel::after {
  background-image: var(--sk-onesie-girl, none), var(--sk-onesie-boy, none), var(--sk-line, none);
}
.esite-skin-stork-delivery.esite-occ-gender-reveal .hs-classic.no-photo .cl-text::before {
  background: var(--sk-heart-boy, none) 100% 10% / auto 40% no-repeat, var(--sk-heart-girl, none) 0 90% / auto 34% no-repeat;
}
.esite-skin-stork-delivery.esite-occ-gender-reveal .ss-scope[data-type="schedule"]::after { background-image: var(--sk-onesie-boy, none), var(--sk-onesie-girl, none), var(--sk-line, none); }
.esite-skin-stork-delivery.esite-occ-gender-reveal .ss-rsvp-form::after { background-image: var(--sk-heart-girl, none); }
/* a first birthday: the bunny sits under the words in place of the sleeping baby */
.esite-skin-stork-delivery.esite-occ-first-birthday .hs-classic.no-photo .cl-text::after { width: clamp(170px, 20vw, 250px); aspect-ratio: .962; background-image: var(--sk-bunny, none); }
.esite-skin-stork-delivery.esite-occ-first-birthday .ss-closing::before { background-image: var(--sk-bunny, none); }