/* Boho Giraffe: the file's balloon page at screen size. The polka-dot hot air balloon drifts up and down over the names, the file's
   terracotta, blush and mustard blobs come in over the screen's edges with little flowers between them. Down the page the countdown numbers
   sit on the file's cream circles, each heading wears a sprig, the giraffe stands by the story, the mobile hangs over the day's plan, and the
   rocking horse rocks beside the RSVP card. A gender reveal floats a pink and a blue balloon side by side, a first birthday sets the giraffe
   beside the names. The hero is never isolated: the fixed nav lives inside it. */
.esite-skin-boho-giraffe {
  --sk-accent-font: "Montserrat", sans-serif;
  --sk-accent-style: normal;
  --sk-photo-shape: none;
  --sk-gap: 96px;
  --sk-measure: 860px;
  --bg-circle: color-mix(in srgb, var(--s-bg) 55%, #ecd0a4);
}
.esite-skin-boho-giraffe .ss-h, .esite-skin-boho-giraffe .cl-names, .esite-skin-boho-giraffe .ss-closing-names { font-weight: 400; letter-spacing: 0; text-transform: none; }
.esite-skin-boho-giraffe .ss-h { font-size: calc(clamp(2.8rem, 5vw, 4rem) * var(--s-hscale, 1)); line-height: 1; color: var(--s-accent); }

/* ---- hero: blobs over the screen's edges, the balloon drifting over the names ---- */
.esite-skin-boho-giraffe .ss-hero.hs-classic.no-photo { position: relative; overflow: hidden; background: var(--s-bg); }
.esite-skin-boho-giraffe .ss-hero.hs-classic.no-photo::before {   /* the file's blobs, mostly past the edges, and its flowers */
  content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background: var(--sk-blob-pink, none) calc(0% - clamp(50px, 6vw, 90px)) 16% / clamp(110px, 12vw, 170px) auto no-repeat,
              var(--sk-blob-brown, none) calc(0% - clamp(70px, 8vw, 120px)) 70% / clamp(150px, 16vw, 230px) auto no-repeat,
              var(--sk-blob-dots, none) calc(100% + clamp(70px, 8vw, 120px)) 8% / clamp(170px, 18vw, 250px) auto no-repeat,
              var(--sk-blob-s, none) calc(100% + clamp(30px, 3vw, 46px)) 52% / clamp(70px, 7vw, 100px) auto no-repeat,
              var(--sk-circles, none) calc(100% + clamp(40px, 5vw, 70px)) 96% / clamp(100px, 10vw, 150px) auto no-repeat,
              var(--sk-blob-bumps, none) 30% calc(100% + clamp(40px, 5vw, 70px)) / clamp(180px, 20vw, 290px) auto no-repeat,
              var(--sk-flower, none) 14% 34% / 34px auto no-repeat, var(--sk-flower, none) 84% 72% / 28px auto no-repeat,
              var(--sk-sprig-c, none) 80% 26% / 46px auto no-repeat, var(--sk-sprig-b, none) 18% 86% / 50px auto no-repeat;
}
.esite-skin-boho-giraffe .ss-hero.hs-classic.no-photo::after {    /* the polka-dot balloon drifting over the names */
  content: ""; position: absolute; z-index: 1; left: 50%; top: 84px; height: clamp(230px, 28vw, 360px); aspect-ratio: .758; translate: -50% 0; pointer-events: none;
  background: var(--sk-balloon, none) 50% 0 / contain no-repeat; animation: bg-drift 8s ease-in-out infinite;
}
.esite-skin-boho-giraffe .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: calc(110px + clamp(230px, 28vw, 360px)) 28px 90px;
}
.esite-skin-boho-giraffe .hs-classic.no-photo .cl-panel::before, .esite-skin-boho-giraffe .hs-classic.no-photo .cl-panel::after { display: none; }
.esite-skin-boho-giraffe .hs-classic.no-photo .cl-text { position: relative; z-index: 2; max-width: 680px; display: grid; justify-items: center; }
@keyframes bg-drift { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-18px) rotate(1.5deg); } }
@keyframes bg-rock { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes bg-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@media (prefers-reduced-motion: reduce) {
  .esite-skin-boho-giraffe .ss-hero::after, .esite-skin-boho-giraffe .ss-scope[data-type="schedule"]::after, .esite-skin-boho-giraffe .ss-rsvp-form::before { animation: none; }
}

.esite-skin-boho-giraffe .cl-panel .h-kicker { margin: 0 0 4px; font-family: var(--s-fbody); font-size: 1rem; font-weight: 500; font-style: normal; letter-spacing: .04em; text-transform: none; color: var(--s-accent); }
.esite-skin-boho-giraffe .hs-classic .cl-names { justify-items: center; font-size: calc(clamp(3.8rem, 8vw, 6.4rem) * var(--s-hscale, 1)); line-height: .95; color: var(--s-accent); }
.esite-skin-boho-giraffe .hs-classic .cl-names .cn-1, .esite-skin-boho-giraffe .hs-classic .cl-names .cn-2 { justify-self: center; padding: 0; }
.esite-skin-boho-giraffe .cl-sub { margin-top: 10px; font-size: 1.0625rem; color: var(--s-text); }
.esite-skin-boho-giraffe .cl-facts { margin: 14px 0 20px; }
.esite-skin-boho-giraffe .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-boho-giraffe .cl-facts span { font-family: var(--s-fbody); font-size: 1rem; }
/* a photo: an arch like the file's soft shapes, the balloon at its corner */
.esite-skin-boho-giraffe .hs-classic:not(.no-photo):not(.hv-cover) .cl-photo, .esite-skin-boho-giraffe .ss-story-img img { border-radius: 999px 999px 24px 24px; }
.esite-skin-boho-giraffe .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual { overflow: visible; }
.esite-skin-boho-giraffe .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual::after { inset: -14% -10% auto auto; width: 28%; aspect-ratio: .758; height: auto; z-index: 3; border: 0; background: var(--sk-balloon, none) 50% 50% / contain no-repeat; }

/* ---- sections: a sprig on each heading, the nursery's things at their sides ---- */
.esite-skin-boho-giraffe .ss-scope:not([data-type="hero"]):not([data-type="none"]) .ss-h::before { width: 36px; height: 40px; margin-bottom: 4px; }
.esite-skin-boho-giraffe .ss-scope[data-type="schedule"], .esite-skin-boho-giraffe .ss-scope[data-type="faq"] { background-color: var(--sk-sec-bg, var(--s-band)); }
.esite-skin-boho-giraffe .ss-scope[data-type="story"]::before { top: auto; bottom: 20px; right: max(2vw, calc(50% - 640px)); left: auto; width: clamp(150px, 15vw, 230px); aspect-ratio: .86;
  background: var(--sk-giraffe, none) 100% 100% / contain no-repeat; }
.esite-skin-boho-giraffe .ss-scope[data-type="schedule"]::after { content: ""; position: absolute; top: 0; right: max(3vw, calc(50% - 600px)); width: clamp(140px, 14vw, 210px); aspect-ratio: .749; pointer-events: none;
  background: var(--sk-mobile, none) 50% 0 / contain no-repeat; transform-origin: 50% 0; animation: bg-sway 6s ease-in-out infinite; }
.esite-skin-boho-giraffe .ss-scope[data-type="gifts"]::before { content: ""; position: absolute; z-index: -1; bottom: 26px; left: max(2vw, calc(50% - 620px)); width: clamp(120px, 12vw, 180px); aspect-ratio: 1.342; background: var(--sk-rainbow, none) 0 100% / contain no-repeat; pointer-events: none; }
.esite-skin-boho-giraffe .ss-scope[data-type="faq"]::after { content: ""; position: absolute; bottom: 26px; left: max(2vw, calc(50% - 640px)); width: clamp(60px, 6vw, 90px); aspect-ratio: 1; background: var(--sk-pacifier, none) 0 100% / contain no-repeat; pointer-events: none; }
.esite-skin-boho-giraffe .ss-closing::before { width: min(44vw, 230px); height: 172px; background: var(--sk-rainbow, none) 50% 100% / contain no-repeat; }
.esite-skin-boho-giraffe .gftv-panel .ss-wrap { aspect-ratio: auto; width: min(620px, 100%); padding: 48px 30px; background: var(--s-bg); border-radius: 999px 999px 28px 28px; }
.esite-skin-boho-giraffe .gftv-panel .ss-h::before { display: block !important; }

/* ---- countdown: each number on one of the file's cream circles, a little grey moon at its edge ---- */
.esite-skin-boho-giraffe .ss-scope[data-type="countdown"] .ss-h { font-family: var(--s-fhead) !important; font-style: normal !important; font-size: calc(clamp(2.4rem, 4.2vw, 3.4rem) * var(--s-hscale, 1)); text-transform: none !important; letter-spacing: 0 !important; }
.esite-skin-boho-giraffe .ss-scope[data-type="countdown"]:has(.cdv-tiles) { background-color: var(--s-bg); }
.esite-skin-boho-giraffe .cdv-tiles .ss-cd { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 2.4vw, 28px); }
.esite-skin-boho-giraffe .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; border-radius: 50%; background: var(--bg-circle) !important;
}
.esite-skin-boho-giraffe .cdv-tiles .cd-unit:nth-child(2n) { translate: 0 12px; }
.esite-skin-boho-giraffe .cdv-tiles .cd-unit::before { display: none !important; }
.esite-skin-boho-giraffe .cdv-tiles .cd-unit::after { display: block !important; content: ""; position: absolute; top: 4%; right: 2%; width: 30%; aspect-ratio: 1; border: 0; border-radius: 50%; background: #a89894; opacity: .8; }
.esite-skin-boho-giraffe .cdv-tiles .cd-unit:nth-child(2n)::after { width: 18%; top: auto; bottom: 6%; right: auto; left: 6%; background: var(--sk-deep, var(--s-accent)); opacity: 1; }
.esite-skin-boho-giraffe .ss-countdown .cd-n { position: relative; font-family: var(--s-fbody) !important; font-weight: 500; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1; color: var(--s-accent); }
.esite-skin-boho-giraffe .cdv-tiles .cd-l { position: relative; font-family: var(--s-fbody); color: var(--s-text); font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-top: 4px; }
.esite-skin-boho-giraffe .ss-scope[data-type="countdown"]:not(:has(.cdv-tiles)) { background-color: var(--s-band); color: var(--s-text); }
.esite-skin-boho-giraffe .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-boho-giraffe .schv-wide .ss-tl-time { font-family: var(--s-fbody); letter-spacing: .14em; color: var(--s-accent); font-size: .8125rem; font-weight: 600; }
.esite-skin-boho-giraffe .ss-tl-title { font-family: var(--s-fbody); font-size: 1.0625rem; font-weight: 600; }
.esite-skin-boho-giraffe .ss-faq-q { font-family: var(--s-fbody); font-size: 1rem; font-weight: 600; }

/* ---- RSVP: an arched card, the rocking horse rocking beside it ---- */
.esite-skin-boho-giraffe .ss-scope[data-type="rsvp"]::before, .esite-skin-boho-giraffe .ss-scope[data-type="rsvp"]::after { display: none; }
.esite-skin-boho-giraffe .ss-rsvp .ss-wrap { position: relative; isolation: isolate; }
.esite-skin-boho-giraffe .ss-rsvp-form { position: relative; max-width: 560px; margin-top: 40px; margin-bottom: 40px; padding: 64px 42px 42px; border-radius: 280px 280px 28px 28px; background: var(--s-bg);
  box-shadow: 0 24px 50px -38px color-mix(in srgb, var(--s-text) 50%, transparent); }
.esite-skin-boho-giraffe .ss-rsvp-form::before {
  content: ""; position: absolute; z-index: 2; left: calc(100% + 14px); bottom: 0; width: 230px; aspect-ratio: 1.395; pointer-events: none;
  background: var(--sk-horse, none) 50% 100% / contain no-repeat; transform-origin: 50% 90%; animation: bg-rock 4s ease-in-out infinite;
}
.esite-skin-boho-giraffe .ss-rsvp-form::after {
  content: ""; position: absolute; z-index: 3; left: -30px; top: 30%; width: 62px; aspect-ratio: .907; pointer-events: none; background: var(--sk-sprig-a, none) 50% 50% / contain no-repeat;
}

@media (max-width: 900px) {
  .esite-skin-boho-giraffe .hs-classic.no-photo .cl-panel { min-height: 0; padding: calc(96px + clamp(190px, 52vw, 260px)) 18px 90px; }
  .esite-skin-boho-giraffe .ss-hero.hs-classic.no-photo::after { top: 74px; height: clamp(190px, 52vw, 260px); }
  .esite-skin-boho-giraffe .hs-classic .cl-names { font-size: calc(3.6rem * var(--s-hscale, 1)); }
  .esite-skin-boho-giraffe .ss-hero.hs-classic.no-photo::before {   /* on a phone the blobs only touch the edges, clear of the words */
    background: var(--sk-blob-pink, none) -46px 12% / 74px auto no-repeat, var(--sk-blob-dots, none) calc(100% + 60px) 9% / 120px auto no-repeat,
                var(--sk-blob-bumps, none) 18% calc(100% + 40px) / 150px auto no-repeat, var(--sk-circles, none) calc(100% + 36px) 98% / 80px auto no-repeat,
                var(--sk-flower, none) 8% 30% / 24px auto no-repeat, var(--sk-sprig-c, none) 92% 30% / 30px auto no-repeat;
  }
  .esite-skin-boho-giraffe .ss-scope[data-type="story"]::before, .esite-skin-boho-giraffe .ss-scope[data-type="schedule"]::after,
  .esite-skin-boho-giraffe .ss-scope[data-type="faq"]::after, .esite-skin-boho-giraffe .ss-scope[data-type="gifts"]::before { display: none; }
  .esite-skin-boho-giraffe .ss-rsvp-form { padding: 52px 22px 30px; margin-bottom: 150px; border-radius: 200px 200px 24px 24px; }
  .esite-skin-boho-giraffe .ss-rsvp-form::before { left: auto; right: 6px; top: calc(100% + 8px); bottom: auto; width: 160px; }
  .esite-skin-boho-giraffe .ss-rsvp-form::after { left: -10px; width: 44px; }
}
@media (max-width: 640px) {
  .esite-skin-boho-giraffe .cdv-tiles .ss-cd { flex-wrap: nowrap; gap: 6px; }
  .esite-skin-boho-giraffe .cdv-tiles .cd-unit { width: 21vw; }
  .esite-skin-boho-giraffe .ss-countdown .cd-n { font-size: 1.6rem; }
  .esite-skin-boho-giraffe .cdv-tiles .cd-l { font-size: .5625rem; 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 balloon side by side over the names, the same in every colorway */
.esite-skin-boho-giraffe.esite-occ-gender-reveal .ss-hero.hs-classic.no-photo::after { aspect-ratio: 1.7;
  background: var(--sk-balloon-girl, none) 0 0 / auto 92% no-repeat, var(--sk-balloon-boy, none) 100% 100% / auto 92% no-repeat; }
.esite-skin-boho-giraffe.esite-occ-gender-reveal .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual::after { background-image: var(--sk-balloon-boy, none); }
.esite-skin-boho-giraffe.esite-occ-gender-reveal .ss-closing::before { width: min(60vw, 280px); background: var(--sk-balloon-girl, none) 24% 100% / auto 90% no-repeat, var(--sk-balloon-boy, none) 76% 0 / auto 90% no-repeat; }
/* a first birthday: the giraffe beside the names in place of the balloon, the balloon over the closing */
.esite-skin-boho-giraffe.esite-occ-first-birthday .ss-hero.hs-classic.no-photo::after { aspect-ratio: .86; background-image: var(--sk-giraffe, none); animation: none; }
.esite-skin-boho-giraffe.esite-occ-first-birthday .ss-scope[data-type="story"]::before { aspect-ratio: .758; background-image: var(--sk-balloon, none); }
.esite-skin-boho-giraffe.esite-occ-first-birthday .ss-closing::before { background-image: var(--sk-balloon, none); height: 200px; }