@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,400;1,500&display=swap');
/* Watercolor Bow: an invitation tied like a gift. The arched bow is knotted at the top of the screen and its two tails fall down
   either side of the names; a photo is tied the same way. The countdown is a row of gift tags, the RSVP a tag hanging from the
   long bow, and a small flat bow marks each heading. */
.esite-skin-watercolor-bow-tie {
  --sk-accent-font: "Cormorant Garamond", Georgia, serif;
  --sk-photo-shape: none;
  --sk-gap: 84px;
  --sk-measure: 860px;
  --sk-bow: min(880px, 94vw, (100svh - 84px) * 1.02);
  --sk-tag-cut: 22px;
}
/* a tag: top corners cut off, a punched hole near the top */
.esite-skin-watercolor-bow-tie .cdv-tiles .cd-unit, .esite-skin-watercolor-bow-tie .ss-rsvp-form {
  --tag: var(--sk-paper, var(--s-bg));
  border: 0; border-radius: 0; box-shadow: none;
  background:
    radial-gradient(circle at 50% calc(var(--sk-tag-cut) + 4px), var(--s-band) 5px, var(--sk-line) 6px, var(--sk-line) 7px, transparent 7.5px),
    linear-gradient(135deg, transparent var(--sk-tag-cut), var(--tag) calc(var(--sk-tag-cut) + .5px)) 0 0 / 51% 100% no-repeat,
    linear-gradient(225deg, transparent var(--sk-tag-cut), var(--tag) calc(var(--sk-tag-cut) + .5px)) 100% 0 / 51% 100% no-repeat;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .09)) drop-shadow(0 1px 1px rgba(0, 0, 0, .08));
}

/* ---- hero: the names tied inside the bow ---- */
.esite-skin-watercolor-bow-tie .hs-classic.no-photo .cl-panel { min-height: calc(76px + var(--sk-bow) * .95); padding: calc(76px + var(--sk-bow) * .27) 24px calc(var(--sk-bow) * .1); background: var(--s-bg); }
.esite-skin-watercolor-bow-tie .hs-classic.no-photo .cl-panel::before { display: block; inset: 76px 0 auto; height: calc(var(--sk-bow) * .95); background: var(--sk-arch, none) 50% 0 / var(--sk-bow) auto no-repeat; }
.esite-skin-watercolor-bow-tie .hs-classic.no-photo .cl-panel::after { display: none; }
.esite-skin-watercolor-bow-tie .hs-classic.no-photo .cl-text { max-width: calc(var(--sk-bow) * .62); }
.esite-skin-watercolor-bow-tie .hs-classic.no-photo .cl-names { justify-items: center; font-size: calc(clamp(2.6rem, var(--sk-bow) * .085, 5rem) * var(--s-hscale, 1)); line-height: 1.04; }
.esite-skin-watercolor-bow-tie .hs-classic .cl-names .cn-1, .esite-skin-watercolor-bow-tie .hs-classic .cl-names .cn-2 { justify-self: center; padding: 0; }
.esite-skin-watercolor-bow-tie .hs-classic .cl-names .cn-amp { margin: .02em 0; }
.esite-skin-watercolor-bow-tie .cl-sub { margin-top: 18px; }
/* a photo is tied the same way: the knot on its top edge, the tails down its sides */
.esite-skin-watercolor-bow-tie .hs-classic:not(.no-photo):not(.hv-cover) .cl-panel::after { display: none; }
.esite-skin-watercolor-bow-tie .hs-classic:not(.no-photo):not(.hv-cover) .cl-photo { border-radius: 0; }
.esite-skin-watercolor-bow-tie .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual { overflow: visible; margin-top: 70px; }
.esite-skin-watercolor-bow-tie .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual::after { inset: -110px -16% auto; z-index: 3; height: 112%; border: 0; opacity: .92; background: var(--sk-arch, none) 50% 0 / 100% auto no-repeat; }
.esite-skin-watercolor-bow-tie .hv-cover:not(.no-photo) .cl-panel::after { display: none; }

/* ---- sections: a flat bow over the headings, the long bow hangs at the edge of the story and questions ---- */
.esite-skin-watercolor-bow-tie .ss-scope:not([data-type="hero"]):not([data-type="countdown"]):not([data-type="none"]) .ss-h::before { width: 190px; height: 40px; }
.esite-skin-watercolor-bow-tie .ss-closing::before { width: min(420px, 80vw); height: 86px; }
.esite-skin-watercolor-bow-tie .ss-scope[data-type="story"]::before, .esite-skin-watercolor-bow-tie .ss-scope[data-type="faq"]::before { top: 0; right: 4vw; width: clamp(80px, 8vw, 130px); aspect-ratio: 1 / 2.5; background: var(--sk-tall, none) 50% 0 / contain no-repeat; }
.esite-skin-watercolor-bow-tie .ss-scope[data-type="faq"]::before { right: auto; left: 4vw; }
.esite-skin-watercolor-bow-tie .ss-scope[data-type="schedule"]::before, .esite-skin-watercolor-bow-tie .ss-scope[data-type="rsvp"]::before, .esite-skin-watercolor-bow-tie .ss-scope[data-type="rsvp"]::after { display: none; }
.esite-skin-watercolor-bow-tie .ss-story-img img { border-radius: 0; outline: 1px solid var(--sk-line); outline-offset: 9px; }

/* ---- countdown: gift tags ---- */
.esite-skin-watercolor-bow-tie .ss-scope[data-type="countdown"]:has(.cdv-tiles) { background-color: var(--sk-sec-bg, var(--s-band)); }
.esite-skin-watercolor-bow-tie .cdv-tiles .ss-cd { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 3vw, 30px); }
.esite-skin-watercolor-bow-tie .cdv-tiles .cd-unit { --sk-tag-cut: 18px; display: grid; align-content: center; width: clamp(76px, 12vw, 124px); aspect-ratio: 3 / 4; padding: 26px 0 0; color: var(--sk-ink, var(--s-text)); }
.esite-skin-watercolor-bow-tie .ss-countdown .cd-n { font-family: var(--s-fhead) !important; }
.esite-skin-watercolor-bow-tie .cd-l { text-transform: uppercase; letter-spacing: .14em; font-size: .6875rem; }

/* ---- the day ---- */
.esite-skin-watercolor-bow-tie .schv-wide .ss-tl-time { color: var(--s-accent); font-family: var(--sk-accent-font); font-style: italic; font-size: 1.25rem; }

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

/* ---- RSVP: a tag hanging from the long bow ---- */
.esite-skin-watercolor-bow-tie .ss-rsvp-form { position: relative; max-width: 520px; margin-top: 190px; padding: 76px 40px 40px; --sk-tag-cut: 46px; }
.esite-skin-watercolor-bow-tie .ss-rsvp-form::before { content: ""; position: absolute; left: 50%; bottom: calc(100% - 50px); width: 120px; height: 230px; transform: translateX(-50%); background: var(--sk-tall, none) 50% 0 / contain no-repeat; pointer-events: none; }

@media (max-width: 900px) {
  .esite-skin-watercolor-bow-tie { --sk-bow: 150vw; }
  .esite-skin-watercolor-bow-tie .hs-classic.no-photo .cl-names { font-size: calc(3rem * var(--s-hscale, 1)); }
  .esite-skin-watercolor-bow-tie .hs-classic.no-photo .cl-panel { min-height: 0; overflow: hidden; padding: calc(76px + var(--sk-bow) * .29) 26px 64px; }
  .esite-skin-watercolor-bow-tie .hs-classic.no-photo .cl-text { max-width: 100%; }
  .esite-skin-watercolor-bow-tie .ss-scope[data-type="story"]::before, .esite-skin-watercolor-bow-tie .ss-scope[data-type="faq"]::before { display: none; }
  .esite-skin-watercolor-bow-tie .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual { margin-top: 50px; }
  .esite-skin-watercolor-bow-tie .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual::after { inset: -70px -10% auto; }
  .esite-skin-watercolor-bow-tie .ss-rsvp-form { padding: 70px 22px 28px; --sk-tag-cut: 34px; }
}
@media (max-width: 640px) {
  .esite-skin-watercolor-bow-tie .cdv-tiles .ss-cd { flex-wrap: nowrap; gap: 8px; }
  .esite-skin-watercolor-bow-tie .cdv-tiles .cd-unit { width: 21vw; }
}