/* Peekaboo Toys: the file's page at screen size. Bunting sags in from the top corners, the names sit in the file's white panel with a
   smiling pair of balloons floating at each side, and at the foot of the screen a big toy peeks up over a hill, rising now and then like a
   game of peekaboo: the elephant for a shower, the bear between a pink and a blue pair of balloons for a gender reveal, the bunny for a
   first birthday. Down the page the countdown numbers sit in little white panels, each heading wears a star, the paper boat rolls by the
   story, and the bear peeks over the top of the RSVP card. The hero is never isolated: the fixed nav lives inside it. */
.esite-skin-peekaboo-toys {
  --sk-accent-font: "Vibur", cursive;
  --sk-accent-style: normal;
  --sk-photo-shape: none;
  --sk-gap: 96px;
  --sk-measure: 860px;
  --pk-toy: clamp(220px, 28vw, 360px);   /* the peeking toy's height */
}
.esite-skin-peekaboo-toys .ss-h, .esite-skin-peekaboo-toys .cl-names, .esite-skin-peekaboo-toys .ss-closing-names { font-weight: 400; letter-spacing: .02em; text-transform: uppercase; }
.esite-skin-peekaboo-toys .ss-h { font-size: calc(clamp(2rem, 3.6vw, 2.9rem) * var(--s-hscale, 1)); line-height: 1.05; color: var(--s-accent); }

/* ---- hero: bunting at the top, the white panel, balloons at the sides, a toy peeking over the hill ---- */
.esite-skin-peekaboo-toys .ss-hero.hs-classic.no-photo { position: relative; overflow: hidden; background: var(--s-bg); }
.esite-skin-peekaboo-toys .ss-hero.hs-classic.no-photo::before {   /* the bunting sagging in from both top corners, the file's stars */
  content: ""; position: absolute; z-index: 0; inset: 64px 0 0; pointer-events: none;
  background: var(--sk-bunting-a, none) -1% 0 / min(40vw, 560px) auto no-repeat, var(--sk-bunting-b, none) 101% 0 / min(40vw, 560px) auto no-repeat,
              var(--sk-star-gold, none) 12% 40% / 30px auto no-repeat, var(--sk-star-peach, none) 88% 34% / 24px auto no-repeat,
              var(--sk-star-red, none) 6% 62% / 20px auto no-repeat, var(--sk-star-gold, none) 94% 58% / 22px auto no-repeat;
}
.esite-skin-peekaboo-toys .ss-hero.hs-classic.no-photo::after {    /* a smiling pair of balloons floating at each side of the panel */
  content: ""; position: absolute; z-index: 1; left: max(2vw, calc(50% - 620px)); right: max(2vw, calc(50% - 620px)); top: 26%; height: clamp(220px, 26vw, 330px); pointer-events: none;
  background: var(--sk-balloons-a, none) 0 0 / auto 100% no-repeat, var(--sk-balloons-b, none) 100% 8% / auto 100% no-repeat;
  animation: pk-float 6s ease-in-out infinite;
}
.esite-skin-peekaboo-toys .hs-classic.no-photo .cl-panel {
  grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; position: static; overflow: visible; background: none; box-shadow: none;
  width: min(1200px, 100%); margin: 0 auto; min-height: min(900px, 100svh); padding: clamp(150px, 15vw, 190px) 28px calc(var(--pk-toy) + 40px);
}
.esite-skin-peekaboo-toys .hs-classic.no-photo .cl-panel::before {   /* the hill across the foot of the screen */
  display: block; content: ""; position: absolute; z-index: 1; inset: auto; left: 0; right: 0; bottom: 0; width: auto; height: calc(var(--pk-toy) * .78); border: 0; translate: none; pointer-events: none;
  background: var(--sk-hill-a, none) 50% 0 / 100% 100% no-repeat;
}
.esite-skin-peekaboo-toys .hs-classic.no-photo .cl-panel::after {    /* the toy peeking up over it */
  display: block; content: ""; position: absolute; z-index: 2; inset: auto; left: 50%; bottom: 0; height: var(--pk-toy); aspect-ratio: 1.605; width: auto; translate: -50% 0; border: 0; pointer-events: none;
  background: var(--sk-elephant, none) 50% 100% / contain no-repeat; transform-origin: 50% 100%; animation: pk-peek 7s ease-in-out infinite;
}
.esite-skin-peekaboo-toys .hs-classic.no-photo .cl-text { position: relative; z-index: 3; max-width: 560px; display: grid; justify-items: center; padding: 34px 26px 30px; }
.esite-skin-peekaboo-toys .hs-classic.no-photo .cl-text::before {   /* the file's white panel behind the words */
  content: ""; position: absolute; z-index: -1; inset: -34px -60px -30px; pointer-events: none; background: var(--sk-panel, none) 50% 50% / 100% 100% no-repeat;
}
@keyframes pk-peek { 0%, 62%, 100% { transform: translateY(0); } 72% { transform: translateY(14%); } 84% { transform: translateY(-4%); } }
@keyframes pk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes pk-roll { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-24px); } }
@media (prefers-reduced-motion: reduce) {
  .esite-skin-peekaboo-toys .ss-hero::after, .esite-skin-peekaboo-toys .hs-classic.no-photo .cl-panel::after, .esite-skin-peekaboo-toys .ss-scope[data-type="story"]::before { animation: none; }
}

.esite-skin-peekaboo-toys .cl-panel .h-kicker { margin: 0 0 6px; font-family: "Chewy", var(--s-fhead); font-size: 1.125rem; font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--s-text); }
.esite-skin-peekaboo-toys .hs-classic .cl-names { justify-items: center; font-size: calc(clamp(2.8rem, 5.6vw, 4.6rem) * var(--s-hscale, 1)); line-height: 1; color: var(--s-accent); }
.esite-skin-peekaboo-toys .hs-classic .cl-names .cn-1, .esite-skin-peekaboo-toys .hs-classic .cl-names .cn-2 { justify-self: center; padding: 0; }
.esite-skin-peekaboo-toys .cl-sub { margin-top: 10px; font-family: "Vibur", cursive; font-size: 1.5rem; color: var(--s-text); }
.esite-skin-peekaboo-toys .cl-facts { margin: 12px 0 16px; }
.esite-skin-peekaboo-toys .cl-facts b { font-family: "Chewy", var(--s-fhead); font-weight: 400; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--s-accent); }
.esite-skin-peekaboo-toys .cl-facts span { font-family: var(--s-fbody); font-size: 1.0625rem; }
/* a photo: in the white panel's soft shape, the balloons floating at its corner */
.esite-skin-peekaboo-toys .hs-classic:not(.no-photo):not(.hv-cover) .cl-photo { border-radius: 40px; }
.esite-skin-peekaboo-toys .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual { overflow: visible; }
.esite-skin-peekaboo-toys .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual::after { inset: -12% -8% auto auto; width: 18%; aspect-ratio: .48; height: auto; z-index: 3; border: 0; background: var(--sk-balloons-b, none) 50% 50% / contain no-repeat; }
.esite-skin-peekaboo-toys .ss-story-img img { border-radius: 40px; }

/* ---- sections: a star on each heading, the toys by their sides ---- */
.esite-skin-peekaboo-toys .ss-scope:not([data-type="hero"]):not([data-type="none"]) .ss-h::before { width: 34px; height: 34px; margin-bottom: 6px; }
.esite-skin-peekaboo-toys .ss-scope[data-type="schedule"], .esite-skin-peekaboo-toys .ss-scope[data-type="faq"] { background-color: var(--sk-sec-bg, var(--s-band)); }
.esite-skin-peekaboo-toys .ss-scope[data-type="story"]::before { top: auto; bottom: 30px; right: max(2vw, calc(50% - 640px)); left: auto; width: clamp(160px, 17vw, 260px); aspect-ratio: 2.145;
  background: var(--sk-car, none) 100% 100% / contain no-repeat; animation: pk-roll 8s ease-in-out infinite; }
.esite-skin-peekaboo-toys .ss-scope[data-type="schedule"]::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: clamp(70px, 11vw, 130px); pointer-events: none;
  background: var(--sk-bunting-c, none) -1% 0 / auto 100% no-repeat, var(--sk-bunting-d, none) 101% 0 / auto 100% no-repeat; }
.esite-skin-peekaboo-toys .ss-scope[data-type="gifts"]::before { content: ""; position: absolute; z-index: -1; bottom: 30px; left: max(2vw, calc(50% - 600px)); width: clamp(70px, 7vw, 110px); aspect-ratio: .48; background: var(--sk-balloons-a, none) 0 100% / contain no-repeat; pointer-events: none; animation: pk-float 6s ease-in-out infinite; }
.esite-skin-peekaboo-toys .ss-scope[data-type="faq"]::after { content: ""; position: absolute; bottom: 30px; right: max(3vw, calc(50% - 600px)); width: clamp(140px, 15vw, 220px); aspect-ratio: 2.93; background: var(--sk-clouds, none) 100% 100% / contain no-repeat; pointer-events: none; }
.esite-skin-peekaboo-toys .ss-closing { position: relative; overflow: hidden; padding-bottom: clamp(200px, 22vw, 280px); }
.esite-skin-peekaboo-toys .ss-closing::before { display: none; }
.esite-skin-peekaboo-toys .ss-closing::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(180px, 20vw, 260px); pointer-events: none;
  background: var(--sk-bunny, none) 50% 100% / auto 92% no-repeat, var(--sk-hill-c, none) 50% 100% / 100% 70% no-repeat; }
.esite-skin-peekaboo-toys .gftv-panel .ss-wrap { aspect-ratio: auto; width: min(620px, 100%); padding: 52px 40px; background: var(--sk-panel, none) 50% 50% / 100% 100% no-repeat; }
.esite-skin-peekaboo-toys .gftv-panel .ss-h::before { display: block !important; }

/* ---- countdown: each number in one of the file's little white panels ---- */
.esite-skin-peekaboo-toys .ss-scope[data-type="countdown"] .ss-h { font-family: var(--s-fhead) !important; font-style: normal !important; }
.esite-skin-peekaboo-toys .cdv-tiles .ss-cd { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 2vw, 24px); }
.esite-skin-peekaboo-toys .cdv-tiles .cd-unit {
  position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: center !important; width: clamp(110px, 13vw, 160px); aspect-ratio: 1.347; padding: 0;
  border: 0 !important; outline: 0; box-shadow: none; background: var(--sk-panel, none) 50% 50% / 100% 100% no-repeat !important;
}
.esite-skin-peekaboo-toys .cdv-tiles .cd-unit:nth-child(2n) { translate: 0 10px; rotate: -2deg; }
.esite-skin-peekaboo-toys .cdv-tiles .cd-unit::before { display: none !important; }
.esite-skin-peekaboo-toys .cdv-tiles .cd-unit::after { display: block !important; content: ""; position: absolute; top: -8px; right: -4px; width: 24px; height: 24px; border: 0; background: var(--sk-star-gold, none) 50% 50% / contain no-repeat; }
.esite-skin-peekaboo-toys .cdv-tiles .cd-unit:nth-child(2n)::after { background-image: var(--sk-star-red, none); top: auto; bottom: -6px; right: auto; left: -2px; }
.esite-skin-peekaboo-toys .ss-countdown .cd-n { font-family: var(--s-fhead) !important; font-weight: 400; font-size: clamp(2.2rem, 3.8vw, 3rem); line-height: 1; color: var(--s-accent); }
.esite-skin-peekaboo-toys .cdv-tiles .cd-l { font-family: var(--s-fbody); color: var(--s-text); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }
.esite-skin-peekaboo-toys .ss-scope[data-type="countdown"]:has(.cdv-tiles) { background-color: var(--s-band); }
.esite-skin-peekaboo-toys .ss-scope[data-type="countdown"]:not(:has(.cdv-tiles)) { background-color: var(--s-band); color: var(--s-text); }
.esite-skin-peekaboo-toys .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-peekaboo-toys .schv-wide .ss-tl-time { font-family: var(--s-fhead); letter-spacing: .06em; color: var(--s-accent); font-size: 1rem; }
.esite-skin-peekaboo-toys .ss-tl-title { font-family: var(--s-fhead); font-size: 1.25rem; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; }
.esite-skin-peekaboo-toys .ss-faq-q { font-family: var(--s-fhead); font-size: 1.125rem; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; }

/* ---- RSVP: a white rounded card, the bear peeking over its top ---- */
.esite-skin-peekaboo-toys .ss-scope[data-type="rsvp"]::before, .esite-skin-peekaboo-toys .ss-scope[data-type="rsvp"]::after { display: none; }
.esite-skin-peekaboo-toys .ss-rsvp .ss-wrap { position: relative; isolation: isolate; }
.esite-skin-peekaboo-toys .ss-rsvp-form { position: relative; max-width: 560px; margin-top: 150px; margin-bottom: 40px; padding: 48px 42px 42px; border-radius: 34px; background: #fff;
  box-shadow: 0 24px 50px -36px color-mix(in srgb, var(--s-text) 50%, transparent); }
.esite-skin-peekaboo-toys .ss-rsvp-form::before {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: calc(100% - 40px); width: 250px; aspect-ratio: 1.119; translate: -50% 0; pointer-events: none;
  background: var(--sk-bear, none) 50% 100% / contain no-repeat;
}
.esite-skin-peekaboo-toys .ss-rsvp-form::after {
  content: ""; position: absolute; z-index: 3; right: -30px; top: 40px; width: 64px; aspect-ratio: .48; pointer-events: none;
  background: var(--sk-balloons-b, none) 50% 50% / contain no-repeat; animation: pk-float 6s ease-in-out infinite;
}

@media (max-width: 900px) {
  .esite-skin-peekaboo-toys { --pk-toy: clamp(170px, 46vw, 240px); }
  .esite-skin-peekaboo-toys .hs-classic.no-photo .cl-panel { min-height: 0; padding: 120px 14px calc(var(--pk-toy) + 30px); }
  .esite-skin-peekaboo-toys .ss-hero.hs-classic.no-photo::before { background-size: 52vw auto, 52vw auto, 22px auto, 18px auto, 16px auto, 18px auto; }
  .esite-skin-peekaboo-toys .ss-hero.hs-classic.no-photo::after { top: auto; bottom: calc(var(--pk-toy) * .6); height: 150px; left: 2vw; right: 2vw; }
  .esite-skin-peekaboo-toys .hs-classic.no-photo .cl-text { max-width: none; padding: 30px 14px 26px; }
  .esite-skin-peekaboo-toys .hs-classic.no-photo .cl-text::before { inset: -26px -10px -22px; }
  .esite-skin-peekaboo-toys .hs-classic .cl-names { font-size: calc(2.6rem * var(--s-hscale, 1)); }
  .esite-skin-peekaboo-toys .ss-scope[data-type="story"]::before, .esite-skin-peekaboo-toys .ss-scope[data-type="faq"]::after, .esite-skin-peekaboo-toys .ss-scope[data-type="gifts"]::before { display: none; }
  .esite-skin-peekaboo-toys .ss-rsvp-form { padding: 42px 22px 30px; margin-top: 140px; }
  .esite-skin-peekaboo-toys .ss-rsvp-form::before { width: 190px; }
  .esite-skin-peekaboo-toys .ss-rsvp-form::after { right: -8px; width: 46px; }
}
@media (max-width: 640px) {
  .esite-skin-peekaboo-toys .cdv-tiles .ss-cd { flex-wrap: nowrap; gap: 4px; }
  .esite-skin-peekaboo-toys .cdv-tiles .cd-unit { width: 23vw; }
  .esite-skin-peekaboo-toys .ss-countdown .cd-n { font-size: 1.7rem; }
  .esite-skin-peekaboo-toys .cdv-tiles .cd-l { font-size: .8125rem; }
}

/* ---- 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: the bear peeks over its hill between a pink and a blue pair of balloons, the same in every colorway */
.esite-skin-peekaboo-toys.esite-occ-gender-reveal .ss-hero.hs-classic.no-photo::after { background-image: var(--sk-balloons-girl, none), var(--sk-balloons-boy, none); }
.esite-skin-peekaboo-toys.esite-occ-gender-reveal .hs-classic.no-photo .cl-panel::before { background-image: var(--sk-hill-b, none); }
.esite-skin-peekaboo-toys.esite-occ-gender-reveal .hs-classic.no-photo .cl-panel::after { aspect-ratio: 1.119; background-image: var(--sk-bear, none); }
.esite-skin-peekaboo-toys.esite-occ-gender-reveal .ss-rsvp-form::before { aspect-ratio: 1.472; background-image: var(--sk-bunny, none); }
.esite-skin-peekaboo-toys.esite-occ-gender-reveal .ss-rsvp-form::after { background-image: var(--sk-balloons-girl, none); }
.esite-skin-peekaboo-toys.esite-occ-gender-reveal .ss-scope[data-type="gifts"]::before { background-image: var(--sk-balloons-boy, none); }
/* a first birthday: the bunny peeks over its hill, the elephant closes the page */
.esite-skin-peekaboo-toys.esite-occ-first-birthday .hs-classic.no-photo .cl-panel::before { background-image: var(--sk-hill-c, none); }
.esite-skin-peekaboo-toys.esite-occ-first-birthday .hs-classic.no-photo .cl-panel::after { aspect-ratio: 1.472; background-image: var(--sk-bunny, none); }
.esite-skin-peekaboo-toys.esite-occ-first-birthday .ss-closing::after { background-image: var(--sk-elephant, none), var(--sk-hill-a, none); }