/* Little Elephant: up in a watercolor sky. The elephant on its swing hangs from the top of the screen by two balloons and swings slowly
   beside the words, the print suite's pink and blue wash behind, a bank of clouds along the hero's foot. Down the page the countdown is
   a string of balloons with a number in each, the toys sit by the sections, and the elephant flying with its bunch of balloons carries
   the RSVP card in. A gender reveal swaps the swing for the boy and the girl on their clouds. */
.esite-skin-little-elephant {
  --sk-accent-font: "Grandstander", sans-serif;
  --sk-accent-style: normal;
  --sk-photo-shape: none;
  --sk-gap: 96px;
  --sk-measure: 880px;
}
.esite-skin-little-elephant .ss-h, .esite-skin-little-elephant .cl-names, .esite-skin-little-elephant .ss-closing-names { font-weight: 700; letter-spacing: 0; }
.esite-skin-little-elephant .ss-h { font-size: calc(clamp(2rem, 3.6vw, 2.9rem) * var(--s-hscale, 1)); color: var(--s-accent); }

/* ---- hero: the sky, the swing hanging from the top, the clouds below ---- */
.esite-skin-little-elephant .ss-hero.hs-classic.no-photo { position: relative; overflow: hidden; background: var(--s-bg); }
.esite-skin-little-elephant .hs-classic.no-photo .cl-panel {
  --c: clamp(110px, 15vw, 230px);   /* the cloud bank's height */
  --sw: min(25vw, 360px, 40svh);     /* the swing's width */
  grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; min-height: calc(100svh - 38px);
  padding: 110px 20px calc(var(--c) + 30px); background: none; overflow: visible; position: relative;
}
/* the wash over the whole sky, and the clouds along the foot */
.esite-skin-little-elephant .hs-classic.no-photo .cl-panel::before {
  display: block; inset: 0; z-index: 0; border: 0; opacity: .9; background: var(--sk-wash, none) 50% 40% / cover no-repeat;
}
.esite-skin-little-elephant .hs-classic.no-photo .cl-panel::after {
  display: block; inset: auto 0 -2px; height: var(--c); z-index: 3; border: 0; background: var(--sk-clouds, none) 0 100% / auto 100% repeat-x;
}
/* the swing hangs from the very top at the left; a smiling cloud, the bird and a star at the right */
.esite-skin-little-elephant .hs-classic.no-photo .cl-text { position: static; z-index: 2; max-width: min(600px, calc(100vw - 2 * (var(--sw) + 6vw))); }
.esite-skin-little-elephant .hs-classic.no-photo .cl-text > * { position: relative; z-index: 2; }
.esite-skin-little-elephant .hs-classic.no-photo .cl-text::before {
  content: ""; position: absolute; z-index: 1; top: -2%; left: max(3vw, calc(50% - 620px)); width: var(--sw); aspect-ratio: 2944 / 5076; pointer-events: none;
  background: var(--sk-swing, none) 50% 0 / contain no-repeat; transform-origin: 50% 0; animation: le-swing 5.5s ease-in-out infinite alternate;
}
.esite-skin-little-elephant .hs-classic.no-photo .cl-text::after {
  content: ""; position: absolute; z-index: 1; top: 13%; right: max(3vw, calc(50% - 620px)); width: min(22vw, 320px); aspect-ratio: 1 / 1.25; pointer-events: none;
  background: var(--sk-cloud-smile, none) 100% 0 / 70% auto no-repeat, var(--sk-bird, none) 10% 62% / 34% auto no-repeat, var(--sk-star-yellow, none) 86% 92% / 16% auto no-repeat,
              var(--sk-heart-a, none) 0 18% / 13% auto no-repeat;
  animation: le-float 6s ease-in-out infinite alternate;
}
@keyframes le-swing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes le-float { from { transform: translateY(0); } to { transform: translateY(-14px); } }
@keyframes le-bob { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-10px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) {
  .esite-skin-little-elephant .hs-classic.no-photo .cl-text::before, .esite-skin-little-elephant .hs-classic.no-photo .cl-text::after,
  .esite-skin-little-elephant .cdv-tiles .cd-unit, .esite-skin-little-elephant .ss-rsvp-form::before { animation: none !important; }
}

.esite-skin-little-elephant .cl-panel .h-kicker { margin: 0 0 8px; font-family: var(--s-fbody); font-size: .75rem; font-style: normal; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--s-text); }
.esite-skin-little-elephant .hs-classic .cl-names { justify-items: center; font-size: calc(clamp(3.2rem, 7vw, 5.6rem) * var(--s-hscale, 1)); line-height: 1.02; color: var(--s-accent); }
.esite-skin-little-elephant .hs-classic .cl-names .cn-1, .esite-skin-little-elephant .hs-classic .cl-names .cn-2 { justify-self: center; padding: 0; }
.esite-skin-little-elephant .cl-names .cn-amp { font-family: var(--s-fhead); font-weight: 600; color: var(--s-text); }
.esite-skin-little-elephant .cl-sub { margin-top: 10px; font-size: .875rem; }
.esite-skin-little-elephant .cl-facts { margin: 12px 0 18px; }
.esite-skin-little-elephant .cl-facts b { font-family: var(--s-fbody); font-weight: 700; font-size: .8125rem; letter-spacing: .18em; text-transform: uppercase; }
.esite-skin-little-elephant .cl-facts span { font-family: var(--s-fhead); font-weight: 600; font-size: 1.25rem; }
/* a photo: a rounded print with a white border, a balloon tied to its corner */
.esite-skin-little-elephant .hs-classic:not(.no-photo):not(.hv-cover) .cl-photo, .esite-skin-little-elephant .ss-story-img img { border-radius: 30px; border: 8px solid #fff; box-shadow: 0 18px 40px -24px rgba(40, 40, 60, .45); }
.esite-skin-little-elephant .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual { overflow: visible; }
.esite-skin-little-elephant .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual::after { inset: -22% -10% auto auto; width: 24%; aspect-ratio: 980 / 2719; height: auto; z-index: 3; border: 0; background: var(--sk-balloon-blue, none) 50% 0 / contain no-repeat; }

/* ---- sections ---- */
.esite-skin-little-elephant .ss-scope:not([data-type="hero"]):not([data-type="countdown"]):not([data-type="none"]) .ss-h::before { width: 36px; height: 36px; margin-bottom: 8px; }
.esite-skin-little-elephant .ss-closing::before { width: 100%; height: clamp(110px, 14vw, 200px); background: var(--sk-clouds, none) 0 100% / auto 100% repeat-x; }
.esite-skin-little-elephant .ss-scope[data-type="story"]::before { top: auto; bottom: 18px; right: max(2vw, calc(50% - 640px)); left: auto; width: clamp(120px, 12vw, 190px); aspect-ratio: 1590 / 2187; background: var(--sk-teddy, none) 100% 100% / contain no-repeat; transform: rotate(6deg); }
.esite-skin-little-elephant .ss-scope[data-type="schedule"]::before { top: auto; bottom: 22px; left: max(2vw, calc(50% - 640px)); right: auto; width: clamp(110px, 11vw, 170px); aspect-ratio: 1009 / 778; background: var(--sk-duck, none) 0 100% / contain no-repeat; }
.esite-skin-little-elephant .ss-scope[data-type="schedule"]::after { content: ""; position: absolute; top: 34px; right: max(2vw, calc(50% - 620px)); width: clamp(80px, 8vw, 120px); aspect-ratio: 1146 / 1452; background: var(--sk-rattle, none) 100% 0 / contain no-repeat; transform: rotate(14deg); pointer-events: none; }
.esite-skin-little-elephant .ss-scope[data-type="gifts"]::before { content: ""; position: absolute; z-index: -1; top: auto; bottom: 24px; left: max(2vw, calc(50% - 600px)); width: clamp(100px, 10vw, 160px); aspect-ratio: 1317 / 1346; background: var(--sk-blocks, none) 0 100% / contain no-repeat; pointer-events: none; }
.esite-skin-little-elephant .ss-scope[data-type="faq"]::before { top: 26px; right: max(2vw, calc(50% - 620px)); left: auto; width: clamp(90px, 9vw, 140px); aspect-ratio: 1303 / 1227; background: var(--sk-beachball, none) 100% 0 / contain no-repeat; }
.esite-skin-little-elephant .ss-scope[data-type="schedule"], .esite-skin-little-elephant .ss-scope[data-type="faq"] { background-color: var(--sk-sec-bg, var(--s-band)); }

/* ---- countdown: a string of balloons, a number in each ---- */
.esite-skin-little-elephant .ss-scope[data-type="countdown"]:has(.cdv-tiles) { background-color: var(--sk-sec-bg, var(--s-bg)); }
.esite-skin-little-elephant .cdv-tiles .ss-h { font-size: calc(clamp(1.7rem, 3vw, 2.3rem) * var(--s-hscale, 1)); }
.esite-skin-little-elephant .cdv-tiles .ss-cd { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(6px, 2vw, 26px); }
.esite-skin-little-elephant .cdv-tiles .cd-unit {
  display: block !important; position: relative; width: clamp(96px, 12vw, 136px); aspect-ratio: 980 / 2200; padding: 0; border: 0 !important; border-radius: 0; outline: 0; box-shadow: none;
  background: var(--sk-balloon-blue, none) 50% 0 / 100% auto no-repeat !important; transform-origin: 50% 100%; animation: le-bob 4.5s ease-in-out infinite alternate;
}
.esite-skin-little-elephant .cdv-tiles .cd-unit:nth-child(2n) { background-image: var(--sk-balloon-pink, none) !important; margin-top: 34px; animation-delay: -1.6s; }
.esite-skin-little-elephant .cdv-tiles .cd-unit:nth-child(3) { animation-delay: -3s; }
.esite-skin-little-elephant .cdv-tiles .cd-unit::before, .esite-skin-little-elephant .cdv-tiles .cd-unit::after { display: none !important; }
/* the number and its word on the balloon's round body (the top 40 % of the drawing) */
.esite-skin-little-elephant .cdv-tiles .cd-unit > .cd-n, .esite-skin-little-elephant .cdv-tiles .cd-unit > .cd-l { position: absolute !important; left: 0; right: 0; margin: 0; text-align: center; transform: none; }
.esite-skin-little-elephant .cdv-tiles .cd-unit > .cd-n { top: 11%; }
.esite-skin-little-elephant .cdv-tiles .cd-unit > .cd-l { top: 26%; }
.esite-skin-little-elephant .ss-countdown .cd-n { font-family: var(--s-fhead) !important; font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; color: var(--s-text); }
.esite-skin-little-elephant .cdv-tiles .cd-l { color: var(--s-text); text-transform: uppercase; letter-spacing: .12em; font-size: .625rem; font-weight: 700; }
.esite-skin-little-elephant .ss-scope[data-type="countdown"]:not(:has(.cdv-tiles)) { background-color: var(--sk-sec-bg, var(--s-band)); color: var(--s-text); }
.esite-skin-little-elephant .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-little-elephant .schv-wide .ss-tl-time { font-family: var(--s-fhead); font-weight: 700; color: var(--s-accent); font-size: 1.375rem; }
.esite-skin-little-elephant .ss-tl-title { font-family: var(--s-fbody); font-size: 1rem; font-weight: 500; }
.esite-skin-little-elephant .ss-faq-q { font-family: var(--s-fbody); font-size: 1rem; font-weight: 500; }

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

/* ---- RSVP: the card carried in by the elephant with its balloons, clouds at the foot ---- */
.esite-skin-little-elephant .ss-scope[data-type="rsvp"] { padding-bottom: clamp(90px, 11vw, 160px); }
.esite-skin-little-elephant .ss-scope[data-type="rsvp"]::before { display: none; }
.esite-skin-little-elephant .ss-scope[data-type="rsvp"]::after { content: ""; position: absolute; inset: auto 0 -2px; height: clamp(90px, 11vw, 170px); z-index: 0; background: var(--sk-clouds, none) 0 100% / auto 100% repeat-x; pointer-events: none; }
.esite-skin-little-elephant .ss-rsvp-form { position: relative; z-index: 1; max-width: 560px; margin-top: 60px; padding: 46px 40px 40px; border-radius: 32px; background: #fff; box-shadow: 0 26px 50px -32px rgba(40, 40, 70, .45); }
.esite-skin-little-elephant .ss-rsvp-form::before {
  content: ""; position: absolute; top: -150px; right: -170px; width: 260px; aspect-ratio: 4136 / 4448; pointer-events: none;
  background: var(--sk-flying, none) 50% 50% / contain no-repeat; animation: le-float 6s ease-in-out infinite alternate;
}

@media (max-width: 1100px) { .esite-skin-little-elephant .ss-rsvp-form::before { right: -40px; top: -170px; width: 200px; } }
@media (max-width: 900px) {
  .esite-skin-little-elephant .hs-classic.no-photo .cl-panel { --c: 100px; --sw: min(40vw, 190px); min-height: 0; padding: calc(var(--sw) * 1.72 + 30px) 16px calc(var(--c) + 30px); }
  .esite-skin-little-elephant .hs-classic.no-photo .cl-text { max-width: none; }
  .esite-skin-little-elephant .hs-classic.no-photo .cl-text::before { left: 50%; translate: -50% 0; top: -10px; }
  .esite-skin-little-elephant .hs-classic.no-photo .cl-text::after { top: 70px; right: 4vw; width: 28vw; background: var(--sk-cloud-smile, none) 100% 0 / 80% auto no-repeat; }
  .esite-skin-little-elephant .hs-classic .cl-names { font-size: calc(3rem * var(--s-hscale, 1)); }
  .esite-skin-little-elephant .cl-facts b { font-size: .6875rem; letter-spacing: .1em; }
  .esite-skin-little-elephant .ss-scope[data-type="story"]::before, .esite-skin-little-elephant .ss-scope[data-type="schedule"]::after,
  .esite-skin-little-elephant .ss-scope[data-type="faq"]::before { display: none; }
  .esite-skin-little-elephant .ss-rsvp-form { padding: 40px 22px 30px; margin-top: 120px; }
  .esite-skin-little-elephant .ss-rsvp-form::before { right: 50%; translate: 50% 0; top: -150px; width: 170px; }
}
@media (max-width: 640px) {
  .esite-skin-little-elephant .cdv-tiles .ss-cd { flex-wrap: nowrap; gap: 2px; }
  .esite-skin-little-elephant .cdv-tiles .cd-unit { width: 22vw; }
  .esite-skin-little-elephant .cdv-tiles .cd-unit:nth-child(2n) { margin-top: 20px; }
  .esite-skin-little-elephant .ss-countdown .cd-n { font-size: 1.4rem; }
  .esite-skin-little-elephant .cdv-tiles .cd-l { letter-spacing: .04em; font-size: .5rem; }
}

/* ---- each occasion its own way (the page carries .esite-occ-<occasion>) ---- */
/* a gender reveal: the boy and the girl sit on their clouds at the hero's foot, in the file's pink and blue in every colorway */
.esite-skin-little-elephant.esite-occ-gender-reveal .hs-classic.no-photo .cl-text::before {
  top: auto; bottom: calc(var(--c) * .3); left: max(2vw, calc(50% - 640px)); width: min(38vw, 560px); aspect-ratio: 1300 / 1000; z-index: 4;
  background: var(--sk-pair-reveal, none) 50% 100% / contain no-repeat; transform-origin: 50% 100%; animation: le-float 6s ease-in-out infinite alternate;   /* the art variables are inline: swap the images, not the variables */
}
@media (max-width: 900px) {
  .esite-skin-little-elephant.esite-occ-gender-reveal .hs-classic.no-photo .cl-panel { padding: 110px 16px calc(var(--c) + min(60vw, 300px) * .77); }
  .esite-skin-little-elephant.esite-occ-gender-reveal .hs-classic.no-photo .cl-text::before { left: 50%; translate: -50% 0; width: min(80vw, 380px); bottom: 40px; }
}
/* a first birthday: the toys around the words instead of the bird */
.esite-skin-little-elephant.esite-occ-first-birthday .hs-classic.no-photo .cl-text::after {
  background: var(--sk-cloud-smile, none) 100% 0 / 60% auto no-repeat, var(--sk-blocks, none) 10% 70% / 44% auto no-repeat, var(--sk-beachball, none) 90% 100% / 32% auto no-repeat;
}