/* Terracotta Swirl: one navy thread, the set's hand-drawn swirl, runs down the whole page. It starts in a loop beside the names and
   carries on through every section in the left margin, so the page reads as one drawing. The hero is the file's corners at screen
   size; the countdown is a row of the set's table-number cards, the RSVP its reply card with the two corner compositions. */
.esite-skin-terracotta-swirl {
  --sk-accent-font: "Alegreya", Georgia, serif;
  --sk-accent-style: italic;
  --sk-photo-shape: none;
  --sk-gap: 92px;
  --sk-measure: 900px;
  --sk-thread-x: clamp(18px, 3.4vw, 56px);
  --sk-thread-w: clamp(64px, 6.4vw, 96px);
}
.esite-skin-terracotta-swirl .ss-h, .esite-skin-terracotta-swirl .cl-names, .esite-skin-terracotta-swirl .ss-closing-names { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.esite-skin-terracotta-swirl .ss-h { font-size: calc(clamp(1.6rem, 2.8vw, 2.25rem) * var(--s-hscale, 1)); }
.esite-skin-terracotta-swirl .ss-closing-names { font-size: clamp(2rem, 4.4vw, 3.4rem); }

/* ---- hero: the file's corners at screen size ---- */
.esite-skin-terracotta-swirl .ss-hero.hs-classic { position: relative; }
.esite-skin-terracotta-swirl .hs-classic.no-photo .cl-panel { min-height: min(100svh, 880px); padding: 120px 24px 96px; background: var(--s-bg); }
.esite-skin-terracotta-swirl .hs-classic.no-photo .cl-panel::before {
  display: block; inset: 60px auto -6% -5vw; width: min(36vw, 520px); z-index: 1; background: var(--sk-plant, none) 0 100% / contain no-repeat;
}
.esite-skin-terracotta-swirl .hs-classic.no-photo .cl-panel::after {
  inset: 68px 0 0 auto; width: min(34vw, 460px); background: var(--sk-blob-tr, none) 100% 0 / min(22vw, 300px) auto no-repeat, var(--sk-flower, none) 100% 100% / min(28vw, 400px) auto no-repeat;
}
/* the thread begins in a loop beside the names and drops into the left margin */
.esite-skin-terracotta-swirl .hs-classic.no-photo::after {
  content: ""; position: absolute; bottom: 0; left: calc(var(--sk-thread-x) + var(--sk-thread-w) / 2 - 50px); z-index: 3; width: 220px; height: 420px; pointer-events: none;
  background: var(--sk-thread-start, none) 0 0 / 100% 100% no-repeat;
}
.esite-skin-terracotta-swirl .hs-classic .cl-text { position: relative; z-index: 4; max-width: 640px; }
.esite-skin-terracotta-swirl .cl-panel .h-kicker { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.esite-skin-terracotta-swirl .hs-classic .cl-names { justify-items: center; font-size: calc(clamp(2.8rem, 5.6vw, 5.2rem) * var(--s-hscale, 1)); line-height: 1.08; }
.esite-skin-terracotta-swirl .hs-classic .cl-names .cn-1, .esite-skin-terracotta-swirl .hs-classic .cl-names .cn-2 { justify-self: center; padding: 0 0 0 .12em; }
.esite-skin-terracotta-swirl .hs-classic .cl-names .cn-amp { margin: .02em 0; font-weight: 400; font-style: italic; letter-spacing: 0; text-transform: none; }
.esite-skin-terracotta-swirl .cl-sub { letter-spacing: .2em; }
.esite-skin-terracotta-swirl .hs-classic .cl-facts { display: inline-block; margin: 20px auto 26px; padding: 12px 22px; border-top: 1px solid var(--s-text); border-bottom: 1px solid var(--s-text); }
.esite-skin-terracotta-swirl .cl-facts b { font-weight: 700; letter-spacing: .16em; }
.esite-skin-terracotta-swirl .cl-facts span { font-style: italic; }
/* beside a photo: the photo's corners take the leaf and the flower */
.esite-skin-terracotta-swirl .hs-classic:not(.no-photo):not(.hv-cover) .cl-panel::after { display: none; }
.esite-skin-terracotta-swirl .hs-classic:not(.no-photo):not(.hv-cover) .cl-photo, .esite-skin-terracotta-swirl .ss-story-img img { border-radius: 0; }
.esite-skin-terracotta-swirl .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual { overflow: visible; }
.esite-skin-terracotta-swirl .hs-classic:not(.no-photo):not(.hv-cover) .cl-visual::after {
  inset: -10% -14% -10% -14%; z-index: 3; border: 0; background: var(--sk-leaf, none) 0 0 / 38% auto no-repeat, var(--sk-flower, none) 100% 100% / 44% auto no-repeat;
}
.esite-skin-terracotta-swirl .hv-cover:not(.no-photo) .cl-panel::after { display: none; }

/* ---- the thread through every section, alternating two drawings so it never repeats next to itself ---- */
.esite-skin-terracotta-swirl .ss-scope:not([data-type="hero"])::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: var(--sk-thread-x); right: auto; width: var(--sk-thread-w); height: auto; aspect-ratio: auto;
  pointer-events: none; background: var(--sk-thread-a, none) 0 0 / 100% 100% no-repeat;
}
.esite-skin-terracotta-swirl .ss-scope:not([data-type="hero"]):nth-child(even)::after { background-image: var(--sk-thread-b, none); }

/* ---- sections: a small swirl above the headings, the set's pieces in the corners ---- */
.esite-skin-terracotta-swirl .ss-scope:not([data-type="hero"]):not([data-type="countdown"]):not([data-type="none"]) .ss-h::before { width: 120px; height: 34px; }
.esite-skin-terracotta-swirl .ss-closing::before { width: 160px; height: 46px; }
.esite-skin-terracotta-swirl .ss-scope[data-type="story"]::before { top: 0; right: 0; width: clamp(170px, 18vw, 280px); aspect-ratio: 1; background: var(--sk-leaf, none) 100% 0 / contain no-repeat; }
.esite-skin-terracotta-swirl .ss-scope[data-type="faq"]::before { top: auto; bottom: 0; right: 0; left: auto; width: clamp(170px, 18vw, 280px); aspect-ratio: 1; background: var(--sk-curl, none) 100% 100% / contain no-repeat; }
.esite-skin-terracotta-swirl .ss-scope[data-type="schedule"]::before { bottom: 0; left: auto; right: 0; width: clamp(180px, 20vw, 300px); aspect-ratio: 1; background: var(--sk-feathers, none) 100% 100% / contain no-repeat; }
.esite-skin-terracotta-swirl .ss-scope[data-type="rsvp"]::before { display: none; }

/* ---- countdown: the table-number cards ---- */
.esite-skin-terracotta-swirl .ss-scope[data-type="countdown"]:has(.cdv-tiles) { background-color: var(--sk-sec-bg, var(--s-band)); }
.esite-skin-terracotta-swirl .cdv-tiles .ss-cd { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(12px, 2.6vw, 28px); }
/* each tile is the set's table-number card: the leaves over its top right corner, the two blobs in its bottom left, the number between */
.esite-skin-terracotta-swirl .cdv-tiles .cd-unit {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center !important; gap: 4px; width: clamp(104px, 14vw, 168px); aspect-ratio: 1;
  padding: 0; border: 0; border-radius: 0; outline: 0; color: var(--s-text); box-shadow: 0 14px 28px -20px rgba(0, 0, 0, .4);
  background: var(--sk-bird, none) 100% 0 / 50% auto no-repeat, var(--sk-table-low, none) 0 100% / 58% auto no-repeat, var(--s-bg);
}
.esite-skin-terracotta-swirl .cdv-tiles .cd-unit::before, .esite-skin-terracotta-swirl .cdv-tiles .cd-unit::after { display: none; }
.esite-skin-terracotta-swirl .cdv-tiles .cd-unit:nth-child(even) { background-position: 0 0, 100% 100%; background-image: var(--sk-rsvp-l, none), var(--sk-flower, none); background-size: 36% auto, 40% auto; }
.esite-skin-terracotta-swirl .ss-countdown .cd-n { font-family: var(--s-fhead) !important; font-weight: 700; font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1; }
.esite-skin-terracotta-swirl .cd-l { margin-top: 6px; text-transform: uppercase; letter-spacing: .2em; font-size: .6875rem; font-weight: 700; }
.esite-skin-terracotta-swirl .cdv-tiles .ss-h { font-family: var(--sk-accent-font); font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--s-accent); }

/* ---- the day ---- */
.esite-skin-terracotta-swirl .schv-wide .ss-tl-time { font-style: italic; color: var(--s-accent); font-size: 1.125rem; }
.esite-skin-terracotta-swirl .ss-tl-title { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .9375rem; }
.esite-skin-terracotta-swirl .ss-faq-q { font-weight: 700; font-size: 1.125rem; }

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

/* ---- RSVP: the set's reply card ---- */
.esite-skin-terracotta-swirl .ss-rsvp-form {
  max-width: 600px; padding: 170px 44px 170px; border-radius: 0; box-shadow: 0 22px 46px -28px rgba(0, 0, 0, .45);
  background: var(--sk-rsvp-l, none) 0 0 / 28% auto no-repeat, var(--sk-flower, none) 100% 100% / 36% auto no-repeat, var(--sk-paper);
}

@media (max-width: 1100px) {
  .esite-skin-terracotta-swirl .ss-scope:not([data-type="hero"])::after, .esite-skin-terracotta-swirl .hs-classic.no-photo::after { display: none; }
}
@media (max-width: 900px) {
  .esite-skin-terracotta-swirl .hs-classic.no-photo .cl-panel { min-height: 0; padding: 104px 18px 240px; }
  .esite-skin-terracotta-swirl .hs-classic.no-photo .cl-panel::before { inset: auto auto -4% -12vw; width: 54vw; height: 300px; }
  .esite-skin-terracotta-swirl .hs-classic.no-photo .cl-panel::after { inset: 56px 0 0 auto; width: 60vw; background-size: 18vw auto, 46vw auto; }
  .esite-skin-terracotta-swirl .hs-classic.no-photo .cl-panel { padding-top: 118px; }
  .esite-skin-terracotta-swirl .cl-panel .h-kicker { font-size: 1.125rem; }
  .esite-skin-terracotta-swirl .cl-facts b { font-size: .875rem; letter-spacing: .06em; }
  .esite-skin-terracotta-swirl .ss-scope[data-type="faq"]::before { display: none; }
  .esite-skin-terracotta-swirl .hs-classic .cl-names { font-size: calc(2.6rem * var(--s-hscale, 1)); }
  .esite-skin-terracotta-swirl .ss-scope[data-type="story"]::before, .esite-skin-terracotta-swirl .ss-scope[data-type="schedule"]::before { display: none; }
  .esite-skin-terracotta-swirl .ss-rsvp-form { padding: 130px 22px 140px; background-size: 36% auto, 44% auto, auto; }
}
@media (max-width: 640px) {
  .esite-skin-terracotta-swirl .cdv-tiles .ss-cd { flex-wrap: nowrap; gap: 8px; }
  .esite-skin-terracotta-swirl .cdv-tiles .cd-unit { width: 21vw; }
  .esite-skin-terracotta-swirl .ss-countdown .cd-n { font-size: 1.9rem; }
  .esite-skin-terracotta-swirl .cd-l { letter-spacing: .08em; font-size: .5625rem; }
}