/* Coerulea: an invitation drawn from its envelope. The flap stands open with the wildflower vine printed on its liner, the card
   rises out of the pocket with the names in the suite's script and a sprig tucked over its corner, wildflowers spill from behind.
   The countdown is a row of postage stamps, the RSVP a reply postcard with its stamp and postmark. */
.esite-skin-coerulea {
  --sk-accent-font: "Always in the Star", cursive;
  --sk-accent-style: normal;
  --sk-photo-shape: none;
  --sk-gap: 88px;
  --sk-measure: 900px;
  --sk-env-w: min(780px, 94vw, 104svh);
  --sk-env-h: calc(var(--sk-env-w) * .4);
  --sk-card-w: calc(var(--sk-env-w) * .64);
  --sk-env: color-mix(in srgb, var(--s-band) 82%, var(--s-text) 18%);
  --sk-pocket: var(--s-band);
  --sk-lining: color-mix(in srgb, var(--s-band) 45%, var(--s-bg));
  --sk-table: color-mix(in srgb, var(--s-band) 22%, var(--s-bg));
}
.esite-skin-coerulea .ss-h, .esite-skin-coerulea .cl-names, .esite-skin-coerulea .ss-closing-names { font-weight: 400; letter-spacing: 0; }
.esite-skin-coerulea .ss-h { font-size: calc(clamp(2.6rem, 4.6vw, 3.8rem) * var(--s-hscale, 1)); line-height: 1.15; }

/* ---- hero: the envelope ---- */
.esite-skin-coerulea .ss-hero.hs-classic.no-photo { position: relative; overflow: hidden; background: var(--sk-table); }
/* wildflowers spill out from behind the envelope, one spray each side */
.esite-skin-coerulea .ss-hero.hs-classic.no-photo::before, .esite-skin-coerulea .ss-hero.hs-classic.no-photo::after {
  content: ""; position: absolute; bottom: 30px; z-index: 0; width: calc(var(--sk-env-w) * .5); height: calc(var(--sk-env-h) * 1.9); pointer-events: none;
  background: var(--sk-stems, none) 50% 100% / contain no-repeat;
}
.esite-skin-coerulea .ss-hero.hs-classic.no-photo::before { left: max(24px, calc(50% - var(--sk-env-w) * .82)); transform: rotate(-12deg); transform-origin: 50% 100%; }
.esite-skin-coerulea .ss-hero.hs-classic.no-photo::after { right: max(24px, calc(50% - var(--sk-env-w) * .82)); transform: scaleX(-1) rotate(-12deg); transform-origin: 50% 100%; }
.esite-skin-coerulea .hs-classic.no-photo .cl-panel { grid-template-columns: minmax(0, 1fr); justify-items: center; min-height: 0; padding: 112px 16px 48px; background: none; }
/* the envelope's back and its open flap, the vine printed on the liner */
.esite-skin-coerulea .hs-classic.no-photo .cl-panel::before {
  display: block; inset: auto auto 48px 50%; width: var(--sk-env-w); height: calc(var(--sk-env-h) * 2.25); z-index: 0; transform: translateX(-50%);
  clip-path: polygon(0 55.6%, 50% 0, 100% 55.6%, 100% 100%, 0 100%);
  background: var(--sk-liner, none) 3% 44% / 24% auto no-repeat, var(--sk-liner, none) 97% 44% / 24% auto no-repeat,
              linear-gradient(var(--sk-lining), var(--sk-lining)) 50% 0 / 100% 55.6% no-repeat, var(--sk-env);
}
/* the card, out of the pocket */
.esite-skin-coerulea .hs-classic.no-photo .cl-text {
  position: relative; z-index: 3; width: var(--sk-card-w); max-width: none; margin-bottom: 14px; padding: 44px 30px calc(var(--sk-env-h) * .56 + 16px);
  background: var(--s-bg); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .45), 0 0 0 1px var(--sk-line);
}
.esite-skin-coerulea .hs-classic.no-photo .cl-text::before { content: ""; position: absolute; inset: 12px; border: 1px solid var(--sk-line); pointer-events: none; }
.esite-skin-coerulea .hs-classic.no-photo .cl-text::after { content: ""; position: absolute; top: -54px; right: -64px; width: calc(var(--sk-card-w) * .34); aspect-ratio: 1; pointer-events: none; background: var(--sk-sprig, none) 50% 50% / contain no-repeat; transform: rotate(18deg); }
/* the pocket in front, its V over the card's foot */
.esite-skin-coerulea .hs-classic.no-photo .cl-panel::after {
  display: block; inset: auto auto 48px 50%; width: var(--sk-env-w); height: var(--sk-env-h); z-index: 4; transform: translateX(-50%);
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
  background: var(--sk-bud, none) 6% 90% / auto 44% no-repeat, linear-gradient(to top, rgba(0, 0, 0, .05), transparent 60%), var(--sk-pocket);
}
.esite-skin-coerulea .hs-classic .cl-names { justify-items: center; font-size: calc(clamp(3.2rem, var(--sk-card-w) * .13, 5.6rem) * var(--s-hscale, 1)); line-height: 1.05; }
.esite-skin-coerulea .hs-classic .cl-names .cn-1, .esite-skin-coerulea .hs-classic .cl-names .cn-2 { justify-self: center; padding: 0; }
.esite-skin-coerulea .hs-classic .cl-names .cn-amp { margin: -.05em 0; font-size: .6em; }
.esite-skin-coerulea .cl-panel .h-kicker { font-family: var(--s-fbody); font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; }
.esite-skin-coerulea .cl-sub { margin-top: 14px; letter-spacing: .18em; }
.esite-skin-coerulea .cl-facts { margin: 14px 0 20px; }
.esite-skin-coerulea .cl-facts b { letter-spacing: .12em; font-weight: 400; }
/* beside a photo: the photo is a card tucked into the pocket of a small envelope */
.esite-skin-coerulea .hs-classic:not(.no-photo):not(.hv-cover) .cl-panel::after { display: none; }
.esite-skin-coerulea .hs-classic:not(.no-photo):not(.hv-cover) .cl-photo, .esite-skin-coerulea .ss-story-img img { border-radius: 0; border: 10px solid var(--s-bg); box-shadow: 0 16px 36px -22px rgba(0, 0, 0, .5), 0 0 0 1px var(--sk-line); }
.esite-skin-coerulea .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual { overflow: visible; }
.esite-skin-coerulea .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual::after { inset: auto -16% -8% auto; width: 52%; aspect-ratio: 1; z-index: 3; border: 0; background: var(--sk-sprig, none) 50% 50% / contain no-repeat; transform: rotate(18deg); }
.esite-skin-coerulea .hv-cover:not(.no-photo) .cl-panel::after { display: none; }

/* ---- sections: a bud above the script headings, the long stem and the vine at the sides ---- */
.esite-skin-coerulea .ss-scope:not([data-type="hero"]):not([data-type="countdown"]):not([data-type="none"]) .ss-h::before { width: 90px; height: 70px; margin-bottom: 4px; }
.esite-skin-coerulea .ss-scope[data-type="story"]::before, .esite-skin-coerulea .ss-scope[data-type="faq"]::before { top: 0; right: 3vw; width: clamp(110px, 11vw, 170px); aspect-ratio: 1 / 3; background-size: contain; }
.esite-skin-coerulea .ss-scope[data-type="schedule"]::before { bottom: 0; left: -2vw; width: clamp(200px, 22vw, 340px); }
.esite-skin-coerulea .ss-scope[data-type="rsvp"]::before, .esite-skin-coerulea .ss-scope[data-type="rsvp"]::after { display: none; }
.esite-skin-coerulea .ss-closing::before { width: 240px; height: 110px; background-image: var(--sk-sprig, none); }

/* ---- countdown: postage stamps ---- */
.esite-skin-coerulea .ss-scope[data-type="countdown"]:has(.cdv-tiles) { background-color: var(--sk-sec-bg, var(--s-band)); }
.esite-skin-coerulea .cdv-tiles .ss-cd { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(12px, 3vw, 30px); }
.esite-skin-coerulea .cdv-tiles .cd-unit {
  display: grid; align-content: center; width: clamp(82px, 12vw, 128px); aspect-ratio: 4 / 5; padding: 7px; border-radius: 0; background: var(--s-bg); color: var(--s-text);
  outline: 1px solid var(--sk-line); outline-offset: -15px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle, transparent 3.6px, #000 4px) -6px -6px / 12px 12px round;
  mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle, transparent 3.6px, #000 4px) -6px -6px / 12px 12px round;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .08));
}
.esite-skin-coerulea .ss-countdown .cd-n { font-family: var(--s-fhead) !important; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.1; }
.esite-skin-coerulea .cd-l { text-transform: uppercase; letter-spacing: .18em; font-size: .625rem; }

/* ---- the day ---- */
.esite-skin-coerulea .schv-wide .ss-tl-time { letter-spacing: .14em; text-transform: uppercase; font-size: .8125rem; }
.esite-skin-coerulea .ss-tl-title { font-family: var(--s-fhead); font-size: 1.75rem; font-weight: 400; }

/* ---- questions: small script reads poorly, so the questions are set in the body face ---- */
.esite-skin-coerulea .ss-faq-q { font-family: var(--s-fbody); font-size: 1rem; font-weight: 600; letter-spacing: .02em; }
.esite-skin-coerulea .ss-loc-venue { font-size: 2rem; }

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

/* ---- RSVP: the reply postcard, its stamp and postmark in the corner ---- */
.esite-skin-coerulea .ss-rsvp-form { position: relative; max-width: 600px; padding: 150px 40px 40px; border-radius: 0; box-shadow: 0 22px 48px -28px rgba(0, 0, 0, .45), 0 0 0 1px var(--sk-line); }
.esite-skin-coerulea .ss-rsvp-form::before {
  content: ""; position: absolute; top: 22px; right: 22px; width: 250px; height: 108px; pointer-events: none;
  background: var(--sk-postmark, none) 0 50% / 200px 80px no-repeat, var(--sk-bud, none) calc(100% - 13px) 50% / 58px auto no-repeat, var(--sk-stamp, none) 100% 0 / 84px 108px no-repeat;
}

@media (max-width: 1180px) {
  .esite-skin-coerulea .ss-hero.hs-classic.no-photo::before, .esite-skin-coerulea .ss-hero.hs-classic.no-photo::after { display: none; }
}
@media (max-width: 900px) {
  .esite-skin-coerulea { --sk-env-w: calc(100vw - 24px); --sk-env-h: calc(var(--sk-env-w) * .46); --sk-card-w: calc(var(--sk-env-w) - 52px); }
  .esite-skin-coerulea .cl-panel .h-kicker { font-size: .6875rem; letter-spacing: .16em; }
  .esite-skin-coerulea .cl-sub { letter-spacing: .1em; font-size: .75rem; }
  .esite-skin-coerulea .cl-facts b { font-size: 1rem; letter-spacing: .04em; }
  .esite-skin-coerulea .hs-classic.no-photo .cl-panel { padding: 96px 12px 30px; }
  .esite-skin-coerulea .hs-classic.no-photo .cl-panel::before, .esite-skin-coerulea .hs-classic.no-photo .cl-panel::after { bottom: 30px; }
  .esite-skin-coerulea .hs-classic.no-photo .cl-text { padding: 46px 22px calc(var(--sk-env-h) * .56 + 14px); }
  .esite-skin-coerulea .hs-classic.no-photo .cl-text::after { top: -46px; right: -30px; width: 96px; }
  .esite-skin-coerulea .ss-hero.hs-classic.no-photo::before, .esite-skin-coerulea .ss-hero.hs-classic.no-photo::after { display: none; }
  .esite-skin-coerulea .hs-classic .cl-names { font-size: calc(3.4rem * var(--s-hscale, 1)); }
  .esite-skin-coerulea .ss-scope[data-type="story"]::before, .esite-skin-coerulea .ss-scope[data-type="faq"]::before { display: none; }
  .esite-skin-coerulea .ss-rsvp-form { padding: 128px 22px 28px; }
  .esite-skin-coerulea .ss-rsvp-form::before { transform: scale(.82); transform-origin: 100% 0; }
}
@media (max-width: 640px) {
  .esite-skin-coerulea .cdv-tiles .ss-cd { flex-wrap: nowrap; gap: 8px; }
  .esite-skin-coerulea .cdv-tiles .cd-unit { width: 21vw; }
}