/* Nursery Line: the file's bird page at screen size. The hero is cream paper with a soft blob behind the words; the birds' branch reaches in
   from the top right corner with the little family on it and two socks swaying from it, sprigs grow in from the other corners and the
   file's outlined dots float about. Down the page the countdown numbers sit on soft blobs, each heading wears a sprig, the hanging pacifier,
   star and sock sway by the story, the moon and stars watch the schedule, and the pram rolls in under the RSVP card. */
.esite-skin-nursery-line {
  --sk-accent-font: "Quicksand", sans-serif;
  --sk-accent-style: normal;
  --sk-photo-shape: none;
  --sk-gap: 96px;
  --sk-measure: 860px;
  --nl-line: color-mix(in srgb, var(--s-text) 75%, transparent);
}
.esite-skin-nursery-line .ss-h, .esite-skin-nursery-line .cl-names, .esite-skin-nursery-line .ss-closing-names { font-style: italic; font-weight: 500; letter-spacing: 0; text-transform: none; }
.esite-skin-nursery-line .ss-h { font-size: calc(clamp(2.2rem, 4vw, 3.2rem) * var(--s-hscale, 1)); line-height: 1.05; color: var(--s-accent); }

/* ---- hero: cream paper, a blob behind the words, the birds' branch from the top right ---- */
.esite-skin-nursery-line .ss-hero.hs-classic.no-photo { position: relative; overflow: hidden; background: var(--s-bg); }   /* no isolation: the fixed nav lives inside the hero */
.esite-skin-nursery-line .ss-hero.hs-classic.no-photo::before {   /* sprigs growing in from the bottom left and the top left, the file's dots */
  content: ""; position: absolute; inset: 66px 0 0; z-index: 0; pointer-events: none;
  background: var(--sk-sprig-peach, none) 10px calc(100% + 14px) / clamp(130px, 14vw, 210px) auto no-repeat, var(--sk-sprig-fern, none) 12px 14px / clamp(80px, 8vw, 120px) auto no-repeat,
              var(--sk-sprig-coral, none) calc(100% - 10px) calc(100% + 16px) / clamp(110px, 11vw, 170px) auto no-repeat,
              radial-gradient(circle, transparent 0 4px, var(--nl-line) 4.5px 6px, transparent 6.5px) 12% 34% / 14px 14px no-repeat,
              radial-gradient(circle, var(--s-accent) 0 4px, transparent 4.5px) 30% 88% / 10px 10px no-repeat,
              radial-gradient(circle, transparent 0 4px, var(--nl-line) 4.5px 6px, transparent 6.5px) 58% 12% / 14px 14px no-repeat,
              radial-gradient(circle, transparent 0 4px, var(--nl-line) 4.5px 6px, transparent 6.5px) 86% 82% / 14px 14px no-repeat,
              radial-gradient(circle, var(--s-accent) 0 4px, transparent 4.5px) 70% 60% / 10px 10px no-repeat;
}
.esite-skin-nursery-line .ss-hero.hs-classic.no-photo::after {    /* the birds' branch reaching in from the top right, its socks swaying */
  content: ""; position: absolute; z-index: 1; right: -1vw; top: 62px; width: min(42vw, 640px); aspect-ratio: 1.319; pointer-events: none;
  background: var(--sk-birds-line, none) 100% 0 / contain no-repeat; transform-origin: 100% 0; animation: nl-sway 7s ease-in-out infinite;
}
.esite-skin-nursery-line .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(820px, 100svh); padding: 130px clamp(28px, 42vw, 560px) 100px 28px;
}
.esite-skin-nursery-line .hs-classic.no-photo .cl-panel::before { display: none; }
.esite-skin-nursery-line .hs-classic.no-photo .cl-text::before {   /* the soft blob, centred on the words themselves */
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: calc(100% + 180px); aspect-ratio: 1.072; translate: -50% -48%; pointer-events: none;
  background: var(--sk-blob-b, none) 50% 50% / contain no-repeat;
}
.esite-skin-nursery-line .hs-classic.no-photo .cl-panel::after { display: none; }
.esite-skin-nursery-line .hs-classic.no-photo .cl-text { position: relative; z-index: 2; max-width: 640px; display: grid; justify-items: center; }
@keyframes nl-sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(1.4deg); } }
@keyframes nl-swing { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes nl-roll { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(-10px) rotate(-1deg); } }
@media (prefers-reduced-motion: reduce) {
  .esite-skin-nursery-line .ss-hero::after, .esite-skin-nursery-line .ss-scope[data-type="story"]::before, .esite-skin-nursery-line .ss-rsvp-form::before { animation: none; }
}

.esite-skin-nursery-line .cl-panel .h-kicker { margin: 0 0 8px; font-family: var(--s-fbody); font-size: 1.125rem; font-weight: 500; font-style: normal; letter-spacing: .02em; text-transform: none; color: var(--s-accent); }
.esite-skin-nursery-line .hs-classic .cl-names { justify-items: center; font-size: calc(clamp(3.2rem, 7vw, 5.8rem) * var(--s-hscale, 1)); line-height: 1; color: var(--s-accent); }
.esite-skin-nursery-line .hs-classic .cl-names .cn-1, .esite-skin-nursery-line .hs-classic .cl-names .cn-2 { justify-self: center; padding: 0; }
.esite-skin-nursery-line .cl-sub { margin-top: 12px; font-size: 1.125rem; color: var(--s-text); }
.esite-skin-nursery-line .cl-facts { margin: 16px 0 20px; }
.esite-skin-nursery-line .cl-facts b { font-family: "Josefin Sans", var(--s-fbody); font-weight: 600; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--s-text); }
.esite-skin-nursery-line .cl-facts span { font-family: var(--s-fbody); font-size: 1.0625rem; }
/* a photo: inside a blob-like rounded frame, the little bird perched on its corner */
.esite-skin-nursery-line .hs-classic:not(.no-photo):not(.hv-cover) .cl-photo { border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%; }
.esite-skin-nursery-line .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual { overflow: visible; }
.esite-skin-nursery-line .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual::after { inset: -10% -4% auto auto; width: 26%; aspect-ratio: .87; height: auto; z-index: 3; border: 0; background: var(--sk-bird, none) 50% 50% / contain no-repeat; }
.esite-skin-nursery-line .ss-story-img img { border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%; }

/* ---- sections: a sprig on each heading, the nursery's things at their sides ---- */
.esite-skin-nursery-line .ss-scope:not([data-type="hero"]):not([data-type="none"]) .ss-h::before { width: 54px; height: 38px; margin-bottom: 4px; }
.esite-skin-nursery-line .ss-scope[data-type="schedule"], .esite-skin-nursery-line .ss-scope[data-type="faq"] { background-color: var(--sk-sec-bg, var(--s-band)); }
.esite-skin-nursery-line .ss-scope[data-type="story"]::before { top: 0; bottom: auto; right: max(2vw, calc(50% - 640px)); left: auto; width: clamp(160px, 16vw, 240px); aspect-ratio: 1.15;
  background: var(--sk-pacifier, none) 0 0 / auto 92% no-repeat, var(--sk-star-hang, none) 52% 0 / auto 76% no-repeat, var(--sk-sock, none) 100% 0 / auto 96% no-repeat;
  transform-origin: 50% 0; animation: nl-swing 6s ease-in-out infinite; }
.esite-skin-nursery-line .ss-scope[data-type="schedule"]::after { content: ""; position: absolute; top: 40px; right: max(3vw, calc(50% - 600px)); width: clamp(120px, 12vw, 180px); aspect-ratio: 1.2; pointer-events: none;
  background: var(--sk-moon, none) 70% 0 / auto 64% no-repeat, var(--sk-star, none) 0 60% / auto 40% no-repeat, var(--sk-star-small, none) 34% 100% / auto 24% no-repeat; }
.esite-skin-nursery-line .ss-scope[data-type="gifts"]::before { content: ""; position: absolute; z-index: -1; bottom: 26px; left: max(2vw, calc(50% - 620px)); width: clamp(110px, 11vw, 170px); aspect-ratio: .807; background: var(--sk-duck, none) 0 100% / contain no-repeat; pointer-events: none; }
.esite-skin-nursery-line .ss-scope[data-type="faq"]::after { content: ""; position: absolute; bottom: 22px; right: max(2vw, calc(50% - 640px)); width: clamp(110px, 11vw, 170px); aspect-ratio: 1.43; background: var(--sk-sprig-blue, none) 100% 100% / contain no-repeat; pointer-events: none; }
.esite-skin-nursery-line .ss-closing::before { width: min(60vw, 300px); height: 230px; background: var(--sk-birds-line, none) 50% 100% / contain no-repeat; }
.esite-skin-nursery-line .gftv-panel .ss-wrap { aspect-ratio: auto; width: min(620px, 100%); padding: 48px 30px; background: var(--s-band); border-radius: 46% 54% 48% 52% / 40% 44% 56% 60%; }
.esite-skin-nursery-line .gftv-panel .ss-h::before { display: block !important; }

/* ---- countdown: each number on one of the file's soft blobs ---- */
.esite-skin-nursery-line .ss-scope[data-type="countdown"] .ss-h { font-family: var(--s-fhead) !important; font-style: italic !important; font-weight: 500; font-size: calc(clamp(2rem, 3.4vw, 2.8rem) * var(--s-hscale, 1)); }
.esite-skin-nursery-line .cdv-tiles .ss-cd { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 2.2vw, 26px); }
.esite-skin-nursery-line .cdv-tiles .cd-unit {
  position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: center !important; width: clamp(100px, 12.5vw, 150px); aspect-ratio: 1; padding: 0;
  border: 0 !important; outline: 0; box-shadow: none; background: var(--sk-blob-b, none) 50% 50% / 100% 100% no-repeat !important;
}
.esite-skin-nursery-line .cdv-tiles .cd-unit:nth-child(2n) { background-image: var(--sk-blob-c, none) !important; translate: 0 10px; }
.esite-skin-nursery-line .cdv-tiles .cd-unit::before { display: none !important; }
.esite-skin-nursery-line .cdv-tiles .cd-unit::after {
  display: block !important; content: ""; position: absolute; top: 2px; right: 6px; width: 14px; height: 14px; border: 1.5px solid var(--nl-line); border-radius: 50%; background: none;
}
.esite-skin-nursery-line .cdv-tiles .cd-unit:nth-child(2n)::after { top: auto; bottom: 4px; right: auto; left: 8px; width: 10px; height: 10px; border: 0; background: var(--s-accent); }
.esite-skin-nursery-line .ss-countdown .cd-n { font-family: var(--s-fhead) !important; font-style: italic; font-weight: 500; font-size: clamp(2.4rem, 4.2vw, 3.2rem); line-height: 1; color: var(--s-accent); }
.esite-skin-nursery-line .cdv-tiles .cd-l { font-family: "Josefin Sans", var(--s-fbody); color: var(--s-text); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-top: 4px; }
.esite-skin-nursery-line .ss-scope[data-type="countdown"]:not(:has(.cdv-tiles)) { background-color: var(--s-band); color: var(--s-text); }
.esite-skin-nursery-line .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-nursery-line .schv-wide .ss-tl-time { font-family: "Josefin Sans", var(--s-fbody); letter-spacing: .14em; color: var(--s-accent); font-size: .8125rem; font-weight: 600; }
.esite-skin-nursery-line .ss-tl-title { font-family: var(--s-fhead); font-style: italic; font-size: 1.5rem; font-weight: 500; }
.esite-skin-nursery-line .ss-faq-q { font-family: var(--s-fhead); font-style: italic; font-size: 1.375rem; font-weight: 500; }

/* ---- RSVP: a soft card, the pram rolled up beside it ---- */
.esite-skin-nursery-line .ss-scope[data-type="rsvp"]::before, .esite-skin-nursery-line .ss-scope[data-type="rsvp"]::after { display: none; }
.esite-skin-nursery-line .ss-rsvp .ss-wrap { position: relative; isolation: isolate; }
.esite-skin-nursery-line .ss-rsvp-form { position: relative; max-width: 560px; margin-top: 40px; margin-bottom: 40px; padding: 48px 42px 42px; border-radius: 26px; background: var(--s-bg);
  box-shadow: 0 0 0 1.5px var(--nl-line), 0 24px 50px -38px color-mix(in srgb, var(--s-text) 50%, transparent); }
.esite-skin-nursery-line .ss-rsvp-form::before {
  content: ""; position: absolute; z-index: 2; left: calc(100% + 18px); bottom: -6px; width: 200px; aspect-ratio: .872; pointer-events: none;
  background: var(--sk-pram, none) 50% 100% / contain no-repeat; animation: nl-roll 5s ease-in-out infinite;
}
.esite-skin-nursery-line .ss-rsvp-form::after {
  content: ""; position: absolute; z-index: 3; left: -40px; top: -34px; width: 110px; aspect-ratio: 1.43; rotate: -20deg; pointer-events: none;
  background: var(--sk-sprig-sky, none) 50% 50% / contain no-repeat;
}

@media (max-width: 900px) {
  .esite-skin-nursery-line .hs-classic.no-photo .cl-panel { min-height: 0; padding: calc(84px + 66vw) 18px 90px; }
  .esite-skin-nursery-line .ss-hero.hs-classic.no-photo::after { width: 86vw; top: 60px; }
  .esite-skin-nursery-line .hs-classic.no-photo .cl-text::before { width: calc(100% + 60px); }
  .esite-skin-nursery-line .hs-classic .cl-names { font-size: calc(3.2rem * var(--s-hscale, 1)); }
  .esite-skin-nursery-line .ss-scope[data-type="story"]::before, .esite-skin-nursery-line .ss-scope[data-type="schedule"]::after,
  .esite-skin-nursery-line .ss-scope[data-type="faq"]::after, .esite-skin-nursery-line .ss-scope[data-type="gifts"]::before { display: none; }
  .esite-skin-nursery-line .ss-rsvp-form { padding: 42px 22px 30px; margin-bottom: 150px; }
  .esite-skin-nursery-line .ss-rsvp-form::before { left: auto; right: 10px; top: calc(100% + 6px); bottom: auto; width: 130px; }
  .esite-skin-nursery-line .ss-rsvp-form::after { left: -12px; width: 80px; }
}
@media (max-width: 640px) {
  .esite-skin-nursery-line .cdv-tiles .ss-cd { flex-wrap: nowrap; gap: 4px; }
  .esite-skin-nursery-line .cdv-tiles .cd-unit { width: 22vw; }
  .esite-skin-nursery-line .ss-countdown .cd-n { font-size: 1.9rem; }
  .esite-skin-nursery-line .cdv-tiles .cd-l { font-size: .5625rem; letter-spacing: .08em; }
}

/* ---- 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 string across the top of the window with a pink and a blue sock swaying from it, the same in every colorway */
.esite-skin-nursery-line.esite-occ-gender-reveal .ss-hero.hs-classic.no-photo::after {
  left: 0; right: 0; width: auto; top: 60px; aspect-ratio: auto; height: clamp(190px, 22vw, 300px); transform-origin: 50% 0;
  background: var(--sk-sock-girl, none) 34% 18px / auto 78% no-repeat, var(--sk-sock-boy, none) 66% 22px / auto 78% no-repeat, var(--sk-string, none) 50% 0 / 100% auto no-repeat;
}
.esite-skin-nursery-line.esite-occ-gender-reveal .hs-classic.no-photo .cl-panel { padding: clamp(260px, 28vw, 360px) 28px 90px; }
.esite-skin-nursery-line.esite-occ-gender-reveal .ss-scope[data-type="story"]::before { background: var(--sk-sock-girl, none) 20% 0 / auto 96% no-repeat, var(--sk-sock-boy, none) 80% 0 / auto 96% no-repeat; }
/* a first birthday: the pram under the moon and stars in place of the birds' branch */
.esite-skin-nursery-line.esite-occ-first-birthday .ss-hero.hs-classic.no-photo::after {
  right: max(3vw, calc(50% - 640px)); top: 120px; width: min(34vw, 470px); aspect-ratio: .95; animation: nl-roll 6s ease-in-out infinite;
  background: var(--sk-moon, none) 92% 0 / auto 22% no-repeat, var(--sk-star, none) 12% 6% / auto 13% no-repeat, var(--sk-star-small, none) 40% 18% / auto 8% no-repeat, var(--sk-pram, none) 50% 100% / auto 78% no-repeat;
}
.esite-skin-nursery-line.esite-occ-first-birthday .ss-rsvp-form::before { background-image: var(--sk-duck, none); width: 150px; aspect-ratio: .807; }
@media (max-width: 900px) {
  .esite-skin-nursery-line.esite-occ-gender-reveal .ss-hero.hs-classic.no-photo::after { height: clamp(150px, 40vw, 200px); }
  .esite-skin-nursery-line.esite-occ-gender-reveal .hs-classic.no-photo .cl-panel { padding-top: clamp(220px, 56vw, 270px); }
  .esite-skin-nursery-line.esite-occ-first-birthday .ss-hero.hs-classic.no-photo::after { left: 50%; right: auto; translate: -50% 0; top: 70px; width: 60vw; }
  .esite-skin-nursery-line.esite-occ-first-birthday .hs-classic.no-photo .cl-panel { padding-top: calc(96px + 64vw); }
}
