/* ==================================================================
   JHOMELL & TRISH — responsive rebuild of the Canva original

   Everything here is measured off the live Canva site at its native
   design width of 1905px.  To convert a measured pixel value to the
   vw figure used below:   vw = px / 1905 * 100.

   Real assets live in assets/img/ + assets/img/media/ (110 files).
   See CANVA-SOURCE.md.
   ================================================================== */

:root {
  /* section bands, sampled off the original */
  --paper:    #fdfaf4;
  --pink:     #ffe4eb;   /* countdown */
  --blue:     #dbf0ff;   /* timeline  */
  --mint:     #d5f1da;   /* rsvp      */
  --lavender: #f1e5ff;   /* FAQs      */
  --cream:    #fff8c8;   /* love-story frame + gifts arch */
  --ink:      #100f0d;
  --muted:    #6b6660;
  --line:     rgba(16, 15, 13, .9);
  --danger:   #a4463c;

  /* Poppins is the exact body font from the design.
     New Icon  -> Bodoni Moda   (high-contrast Didone, closest free match)
     Bobby Jones -> Bakbak One  (heavy condensed display)
     Gotham / Canva Sans -> Poppins */
  --display: "Bakbak One", "Poppins", system-ui, sans-serif;
  --serif:   "Bodoni Moda", "Playfair Display", Georgia, serif;
  --body:    "Poppins", "Segoe UI", system-ui, sans-serif;

  --texture: url("../img/media/c33c8ecffb46885dff01c79503732555.jpg");
  --poses:   url("../img/media/07c5e90c540541f5308e92169c82a1ba.png");
  --poses-b: url("../img/media/dca0360bae35848c7c1627e9d9c90550.png");
  --couple:  url("../img/media/a296cf8df9bda4d025ebc09d9f6b3396.png");
  --wave:    url("../img/media/7581a2c35aa6cbea0acce1b732f15041.svg");

  --section-y: clamp(3rem, 7vw, 8rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Paper texture as one fixed, viewport-sized layer — tiling it left a
   visible seam wherever the tile repeated. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--texture) center / cover no-repeat;
  z-index: -1;
}

img { max-width: 100%; display: block; }
button, summary, a, label.choice__opt { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.wrap { width: min(100% - 2.25rem, 68rem); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.25rem, 40rem); }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- the big Bobby-Jones-style headings ----
   Original: cap-height ~91px on a 1905px design.  Bakbak One's caps
   are ~0.73em, so 125px ≈ 6.55vw reproduces the size. */
h2.script, h2.display, .display-type {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 6.4rem);
  line-height: 1.15;
  letter-spacing: -.005em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 clamp(1.5rem, 3.1vw, 3rem);
  color: var(--ink);
  /* Bobby Jones is far more condensed than any free face; squeezing
     Bakbak One horizontally lands on the original's proportions. */
  transform: scaleX(.8);
}

/* ---- body copy: Poppins 33.3px / lh 37px / ls -0.4px, centred ---- */
.prose { text-align: center; width: min(100%, max(46vw, 21rem)); margin-inline: auto; }
.prose p {
  margin: 0 0 clamp(1.1rem, 1.9vw, 2rem);
  font-size: clamp(1rem, 1.75vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -.012em;
}
.prose p:last-child { margin-bottom: 0; }

.section { padding-block: var(--section-y); position: relative; }
.section--pink     { background: var(--pink); }
.section--blue     { background: var(--blue); }
.section--mint     { background: var(--mint); }
.section--lavender { background: var(--lavender); }

.reveal { opacity: 1; transform: none; }
html.js-anim .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
html.js-anim .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js-anim .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------- buttons ----------------
   The original's only button is a solid black pill. */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(.9rem, 1.55vw, 1.6rem);
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .62em 1.55em;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  transition: opacity .25s ease;
}
.btn:hover { opacity: .82; }
.btn--ghost {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--line);
  font-family: var(--body); font-weight: 500;
  font-size: clamp(.68rem, 1vw, .8rem); letter-spacing: .18em;
  border-radius: 999px;
}
.btn--ghost:hover { background: var(--ink); color: #fff; opacity: 1; }
.btn--text {
  background: none; color: var(--muted); border: 0; padding: .6rem 0;
  font-family: var(--body); font-weight: 400; font-size: .85rem;
  letter-spacing: .06em; text-transform: none; text-decoration: underline;
}
.btn--text:hover { color: var(--ink); opacity: 1; }
.btn--full { display: block; width: 100%; margin-top: .9rem; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------------- couple sprite sheets ----------------
   07c5e90c… and dca0360b… are 3x2 sheets of six poses each. */
.pose {
  width: 100%;
  margin-inline: auto;
  background-image: var(--poses);
  background-repeat: no-repeat;
}

/* Per-pose crops. The contact sheet is NOT a clean 3x2 grid — the
   figures sit at arbitrary offsets and pose 6 actually starts at
   x=784 of 1200, crossing the nominal 800px cell boundary. Scanning
   per-cell therefore split pose 6 in half (bride only, groom cut off).
   These bounds come from scanning the whole sheet for columns with no
   content, which finds the real figure clusters, then finding each
   cluster's vertical bands — the figure and its "1."-"6." caption come
   out as two cleanly separated bands. Each box frames only the figure,
   so no mask is needed and nothing can clip at any size. */
.pose--1{aspect-ratio:270/335;background-size:444.44% auto;background-position:10.97% 9.03%;}
.pose--2{aspect-ratio:281/335;background-size:427.05% auto;background-position:50.60% 7.31%;}
.pose--3{aspect-ratio:247/337;background-size:485.83% auto;background-position:86.57% 7.78%;}
.pose--4{aspect-ratio:215/346;background-size:558.14% auto;background-position:14.42% 88.55%;}
.pose--5{aspect-ratio:300/292;background-size:400.00% auto;background-position:47.44% 86.81%;}
.pose--6{aspect-ratio:277/342;background-size:433.21% auto;background-position:84.94% 88.86%;}
.pose--alt { background-image: var(--poses-b); }

/* ---------------- decorative banners / bleed strips ---------------- */
.banner {
  width: 100%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: 62% bottom;
  background-size: 108% auto;
  /* the strips carry a baked-in near-white plate; multiply drops it
     into the paper texture instead of showing a hard rectangle */
  mix-blend-mode: multiply;
}
.banner--hero    { height: 30.2vw; background-image: url("../img/media/a7aa7f6b2b5a450a428a7704b310f520.png"); }
.banner--sponsor { height: 29.2vw; background-image: url("../img/media/2161b0bf96e54d2ab305b7264a85fb61.png"); background-size: 100% auto; background-position: center bottom; }

/* ---------------- hand-drawn doodle flowers ----------------
   Recreated as an inline SVG symbol: the Canva originals are
   runtime-recoloured composites that are not in the asset dump. */
.doodle {
  position: absolute;
  display: block;
  pointer-events: none;
  color: #f0a99b;             /* petal   */
  --eye: #f7c942;             /* centre  */
  --inner: #fdfaf4;           /* inside  */
}
.doodle svg { width: 100%; height: 100%; display: block; }

/* ---------------- cover page ---------------- */
.cover {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  padding: clamp(2.5rem, 8vw, 5rem) 1.25rem;
  text-align: center;
  overflow: hidden;
}
.cover__inner { max-width: 52rem; width: 100%; position: relative; z-index: 2; }

.cover__hi {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 6.6vw, 4.4rem);
  line-height: 1.18;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
}

.cover__couple {
  height: clamp(230px, 52vh, 560px);
  aspect-ratio: 540 / 920;
  width: auto;
  margin: 0 auto clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--couple) no-repeat center / 260% auto;
}

.cover__btn {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(.9rem, 2.4vw, 1.4rem);
  letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
  padding: .62em 1.55em;
  border-radius: 999px;
  background: var(--ink); color: #fff;
  transition: opacity .3s ease;
}
.cover__btn:hover { opacity: .82; }

/* ---------------- scattered watercolour stems ---------------- */
.petals { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.petal {
  position: absolute; display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .95;
}
.petal--1 { background-image: url("../img/media/294081458c27a6ad6f091efe86cd36f0.png"); }
.petal--2 { background-image: url("../img/media/287306754841adea3771e1d6b46a482e.png"); }
.petal--3 { background-image: url("../img/media/9c4da348053472bc8d697fea83860ea4.png"); }
.petal--4 { background-image: url("../img/media/a92724a3b1e32492e4bca27e00096916.png"); }
.petal--5 { background-image: url("../img/media/aff3f8684eb13c9827814188cd0e2db8.png"); }
.petal--6 { background-image: url("../img/media/90cea4cddb170976332acd3e6ebb6f0f.png"); }
.petal--7 { background-image: url("../img/media/8a15210e43b5a4e0a219ec56346ea9fd.png"); }
.petal--8 { background-image: url("../img/media/e94e1d6a0df0f2c191ad46890b225d81.png"); }

.cover .petal--1 { top: 3%;   left: -2%;  width: clamp(70px, 13vw, 190px); height: clamp(120px, 22vw, 330px); transform: rotate(-18deg); }
.cover .petal--2 { top: 1%;   right: 3%;  width: clamp(60px, 11vw, 160px); height: clamp(110px, 20vw, 300px); transform: rotate(14deg); }
.cover .petal--3 { top: 40%;  left: 1%;   width: clamp(55px, 10vw, 145px); height: clamp(100px, 18vw, 270px); transform: rotate(-8deg); }
.cover .petal--4 { top: 36%;  right: -1%; width: clamp(65px, 12vw, 175px); height: clamp(115px, 21vw, 310px); transform: rotate(22deg); }
.cover .petal--5 { bottom: 3%; left: 5%;  width: clamp(55px, 10vw, 150px); height: clamp(100px, 18vw, 265px); transform: rotate(9deg); }
.cover .petal--6 { bottom: 5%; right: 4%; width: clamp(50px, 9vw, 135px);  height: clamp(95px, 17vw, 245px); transform: rotate(-14deg); }


@media (max-width: 620px) {
  .cover .petal { opacity: .8; }
  .cover .petal--3, .cover .petal--4 { display: none; }
}

/* =================================================================
   0 — HERO
   Names, ampersand and the couple are one overlapping lockup,
   exactly as in the original.  All coordinates are percentages of
   the lockup box, so the composition survives every screen width.
   ================================================================= */
.hero { overflow-x: clip; position: relative; padding: clamp(2.5rem, 6vw, 6rem) 0 0; text-align: center; }
/* full-bleed on purpose: the name sizes below are expressed in vw, so
   the lockup box must stay the same width as the viewport or the names
   would outgrow their container on very wide screens */
.hero__inner { width: calc(100% - 1.5rem); margin-inline: auto; }

.hero__pretitle {
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(.95rem, 1.82vw, 1.9rem);
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1.38;
  margin: 0 0 clamp(1rem, 2.2vw, 2.2rem);
}

/* Measured off the original at its 1905px design width:
     JHOMELL  x 465..1457  (52% wide, centred)   cap top y 490
     couple   x 342..1308  (50.7% wide)          y 537..1503
     &        x 1172..1352 (61.5% from the left) y 845..1057
     TRISH    x  872..1419 (centre 60.1%)        cap top y 1230
   The art box below spans y 430..1520 of that canvas. */
.hero__art {
  position: relative;
  /* one shrink knob for the whole lockup: names, couple and ampersand
     are all sized against this box via cqw / % */
  width: 78%;
  max-width: 90rem;
  container-type: inline-size;
  aspect-ratio: 1905 / 1090;
  margin-inline: auto;
}
.hero__name {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 28;
  font-optical-sizing: none;
  font-size: 11.7cqw;
  line-height: .9;
  letter-spacing: .005em;
  white-space: nowrap;
  z-index: 2;
  opacity: 1;
}
.hero__name--first { top: 0; }
.hero__name--last  { top: 72%; left: 60%; }
.hero__amp {
  position: absolute;
  top: 34%; left: 61.5%;
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 28;
  font-optical-sizing: none;
  font-size: 14cqw;
  line-height: .85;
  z-index: 2;
  opacity: 1;
}
.hero__pose {
  position: absolute;
  top: 10%; left: 50%;
  transform: translateX(-50%);
  width: 35.5%;
  z-index: 1;
}

.hero__date, .hero__venue {
  font-family: var(--body);
  font-size: clamp(.95rem, 2vw, 2.1rem);
  line-height: 1.35;
  margin: 0;
}
.hero__date  { font-weight: 700; margin-top: clamp(1rem, 2.5vw, 2.5rem); }
.hero__venue { font-weight: 400; }

/* =================================================================
   1 — OUR LOVE STORY
   Cream panel whose inner edge is the real Canva wave, used as a
   CSS mask so the paper texture shows through the middle.
   ================================================================= */
.story {
  position: relative;
  overflow: hidden;
  padding: 0 0 clamp(3rem, 8vw, 9rem);
}
.story::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cream);
  -webkit-mask: var(--wave) center / 100% 185% no-repeat;
          mask: var(--wave) center / 100% 185% no-repeat;
  mask-mode: alpha;
  pointer-events: none;
  z-index: 0;
}
.story > * { position: relative; z-index: 1; }
.story__footband { display: none; }

/* ---- the title banner: the heading lives INSIDE the yellow band ---- */
.story__banner {
  position: relative;
  z-index: 2;
  background: var(--cream);
  padding: clamp(2.2rem, 6vw, 4.5rem) 1rem clamp(1.6rem, 4vw, 3.2rem);
  margin-bottom: clamp(2.6rem, 7vw, 5rem);
}
.story__banner h2 { margin: 0; }
/* scalloped bottom edge — pure radial-gradient, no mask */
.story__banner::after {
  content: "";
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 22px;
  background: radial-gradient(circle at 50% -6px, var(--cream) 0 20px, rgba(0,0,0,0) 21px);
  background-size: 46px 28px;
  background-position: center top;
  background-repeat: repeat-x;
}
/* keep the copy inside the paper inset, never on the cream border */
.story .wrap { width: min(100% - 5rem, 68rem); }
/* on phones the section is far taller than it is wide, so the wave is
   scaled up to keep the cream border a thin frame rather than a slab */
@media (max-width: 720px) {
  .story { padding-bottom: 0; }
  /* the mask frame's bands land in device-dependent places (this
     browser resolves the percentage mask-size against WIDTH) — on
     phones the top banner + this explicit foot band replace it */
  .story::before { display: none; }
  .story__footband {
    display: block;
    position: relative;
    z-index: 2;
    height: 36px;
    background: var(--cream);
    margin-top: 1.25rem;
  }
  .story__footband::before {
    content: "";
    position: absolute;
    bottom: 100%; left: 0; right: 0;
    height: 22px;
    background: radial-gradient(circle at 50% 34px, var(--cream) 0 20px, rgba(0,0,0,0) 21px);
    background-size: 46px 28px;
    background-position: center bottom;
    background-repeat: repeat-x;
  }
  .story__art { width: 76%; }
  .story::before {
    -webkit-mask-size: 120% 200%;
            mask-size: 120% 200%;
  }
}

.story__art {
  position: relative;
  width: min(100%, 62rem);
  margin: clamp(1.5rem, 3vw, 3rem) auto 0;
  aspect-ratio: 1 / .5;
}
.story__pose {
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 30%;
  height: auto;
}
/* three doodles to the left of the couple, three to the right —
   scattered in the empty space, clear of both figures */
.story__art .doodle { width: 9%; aspect-ratio: 1; }
.story__art .d1 { left:  3%; top: 40%; transform: rotate(-12deg); }
.story__art .d2 { left: 14%; top: 20%; transform: rotate(8deg); width: 10%; }
.story__art .d3 { left: 15%; top: 58%; transform: rotate(-4deg); }
.story__art .d4 { right: 14%; top: 24%; transform: rotate(10deg); }
.story__art .d5 { right:  3%; top: 44%; transform: rotate(-9deg); }
.story__art .d6 { right: 13%; top: 60%; transform: rotate(15deg); }

/* =================================================================
   2 — COUNTDOWN
   One row:  22 : 15 : 25 : 51  with the unit under each number.
   ================================================================= */
.countdown {
  background: var(--pink);
  padding: clamp(2.2rem, 4.2vw, 4.4rem) 1rem clamp(2.5rem, 5vw, 5rem);
  text-align: center;
}
.countdown__label {
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(.72rem, 1.82vw, 1.9rem);
  letter-spacing: .23em;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0 0 clamp(1.2rem, 2.2vw, 2.4rem);
}
.countdown__grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(.15rem, .8vw, 1rem);
  max-width: 62rem;
  margin-inline: auto;
}
.cd { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.cd__num {
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(2.4rem, 8.8vw, 9rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.cd__unit {
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(.7rem, 2.36vw, 2.4rem);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0;
}
.cd__sep {
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(1.6rem, 5.6vw, 5.6rem);
  line-height: 1.35;
  opacity: .85;
}
.countdown__done {
  font-family: var(--display);
  font-size: clamp(1.1rem, 3vw, 2rem);
  text-transform: uppercase;
  margin: 0;
}

/* =================================================================
   3 — PRIMARY SPONSORS
   ================================================================= */
.sponsors { list-style: none; margin: 0; padding: 0; text-align: center; }
.sponsors li {
  font-size: clamp(1rem, 1.94vw, 2rem);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -.005em;
}

/* =================================================================
   4 — VENUE
   ================================================================= */
.venue__figure {
  position: relative;
  width: min(100%, 66rem);
  margin: 0 auto clamp(1.5rem, 3vw, 3rem);
}
.venue__photo { width: 100%; height: auto; }
.venue__figure .doodle { width: 9%; aspect-ratio: 1; color: #ee7ea0; }
.venue__figure .v1 { left:  2%; bottom:  6%; transform: rotate(-14deg); width: 11%; }
.venue__figure .v2 { left: 13%; bottom:  0%; transform: rotate(9deg); }
.venue__figure .v3 { left:  5%; bottom: -9%; transform: rotate(-3deg); }

.venue__name {
  font-family: var(--body);
  font-size: clamp(1.05rem, 2vw, 2.1rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 clamp(1.4rem, 2.6vw, 2.6rem);
}
.venue__name span { font-weight: 400; }
.venue__extra { margin-top: 1rem; }

/* =================================================================
   5 — WEDDING TIMELINE  (4 icon columns)
   ================================================================= */
.timeline {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.5rem, 2vw, 2.5rem);
  align-items: end;
  max-width: 62rem;
  margin-inline: auto;
}
.timeline__item { text-align: center; min-width: 0; }
/* the original is a fixed 1905px canvas; four columns cannot survive a
   320px phone, so they fold to 2x2 on the narrowest screens */
@media (max-width: 560px) {
  .timeline { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
}
.timeline__icon {
  display: block;
  height: clamp(44px, 8vw, 130px);
  margin: 0 auto clamp(.5rem, 1.2vw, 1.2rem);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}
.timeline__icon--rings {
  aspect-ratio: 800 / 514;
  background-image: url("../img/media/8a3535b45b06d56dd12be2a96c399ba6.png");
  background-size: 200% 100%;
  background-position: left center;
  filter: invert(1);
  mix-blend-mode: multiply;
}
.timeline__icon--cake  { aspect-ratio: 253 / 285; background-image: url("../img/media/3c51eb12c8224a507c8d2da05a34476f.svg"); }
.timeline__icon--table { aspect-ratio: 295 / 241; background-image: url("../img/media/36cd98e59de5111d2767621e5532d48d.svg"); }
.timeline__icon--hearts{ aspect-ratio: 799 / 575; background-image: url("../img/media/d45bc5c1d74458dd85150cd923ab0850.png"); }

.timeline__time, .timeline__what {
  display: block;
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(.78rem, 1.75vw, 1.85rem);
  line-height: 1.25;
  letter-spacing: -.005em;
}

/* =================================================================
   6 — ATTIRE GUIDE
   ================================================================= */
.attire__lead {
  text-align: center;
  width: min(100%, max(70vw, 20rem));
  font-weight: 700;
  font-style: italic;
  font-size: clamp(.9rem, 1.75vw, 1.85rem);
  line-height: 1.3;
  /* shorthand FIRST, then the auto centring — the other order resets
     the side margins to 0 and left-anchors the block */
  margin: 0 0 clamp(1.4rem, 2.4vw, 2.4rem);
  margin-inline: auto;
}
.attire__group { text-align: center; margin-bottom: clamp(1rem, 1.6vw, 1.6rem); }
.attire__group p {
  margin: 0 0 .45rem;
  font-size: clamp(.9rem, 1.75vw, 1.85rem);
  line-height: 1.3;
}
.attire__group strong { font-weight: 700; }

/* swatches sit in a tight, slightly overlapping row */
.swatches { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; }
.swatches li { line-height: 0; }
.swatches li + li { margin-left: -.35em; }
.swatch {
  display: block;
  width: clamp(1.6rem, 2.95vw, 3.1rem);
  height: clamp(1.6rem, 2.95vw, 3.1rem);
  border-radius: 50%;
  background: var(--sw);
}
.swatch--lg { width: clamp(2rem, 3.7vw, 3.9rem); height: clamp(2rem, 3.7vw, 3.9rem); }

#attire .wrap { width: min(100% - 2.25rem, 84rem); }
/* measured on the original: the five-guest illustration is 51% of the
   section width, centred, directly under the Ladies swatch row */
.attire__figure { width: min(100%, max(51vw, 17rem)); height: auto; margin: clamp(1.5rem, 3vw, 3rem) auto clamp(1.5rem, 3vw, 3rem); }
.attire__note {
  text-align: center;
  width: min(100%, max(52vw, 20rem));
  margin: 0 auto;
  font-size: clamp(.9rem, 1.75vw, 1.85rem);
  line-height: 1.2;
}

/* =================================================================
   6b — YOUR PRESENCE IS YOUR PRESENT  (cream arch)
   ================================================================= */
.gifts {
  position: relative;
  padding: clamp(3rem, 7vw, 8rem) 0 0;
  overflow: hidden;
}
.gifts::before {
  content: "";
  position: absolute;
  left: 50%; top: clamp(1.5rem, 4vw, 5rem);
  transform: translateX(-50%);
  width: min(94%, 72rem);
  height: 200%;
  background: var(--cream);
  border-radius: 50% 50% 0 0 / 22% 22% 0 0;
  z-index: 0;
}
.gifts > * { position: relative; z-index: 1; }
.gifts .banner { position: relative; z-index: 1; margin-top: clamp(1rem, 3vw, 3rem); }

/* =================================================================
   7 — RSVP
   ================================================================= */
.rsvp-section { position: relative; overflow: hidden; }
.rsvp-section::after {
  content: "";
  position: absolute;
  right: -8%; bottom: -3%;
  width: min(88%, 54rem);
  aspect-ratio: 1537 / 1922;
  background: url("../img/media/f1d1f54dcd08e893243b4fe612bd62c2.png") no-repeat center / contain;
  opacity: .9;
  pointer-events: none;
  z-index: 0;
}
.rsvp-section > * { position: relative; z-index: 1; }

.rsvp__intro {
  max-width: 44ch; margin: 0 auto 1.1rem; text-align: center;
  font-size: clamp(.9rem, 1.75vw, 1.85rem);
  line-height: 1.2;
}
.rsvp {
  /* mostly transparent so the banquet line-art shows through the card;
     the inputs themselves stay solid white, so the form stays legible */
  background: rgba(255,255,255,.28);
  border: 1.5px solid var(--line);
  padding: clamp(1.4rem, 5vw, 2.5rem);
  margin-top: 2rem;
}
.rsvp__preview { background: var(--cream); border: 1.5px solid var(--line); padding: .8rem 1rem; margin: 0 0 1.5rem; font-size: .82rem; line-height: 1.6; }
.rsvp__h { font-family: var(--display); font-size: clamp(1.1rem, 3vw, 1.6rem); letter-spacing: .01em; text-transform: uppercase; text-align: center; margin: 0 0 .5rem; }
.rsvp__greeting { margin-bottom: 1.6rem; }

.field { margin-bottom: 1.4rem; border: 0; padding: 0; }
.field > label, .field > legend {
  display: block; font-size: .66rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; margin-bottom: .55rem; padding: 0;
}
.field input[type="text"], .field select, .field textarea {
  width: 100%; font-family: var(--body); font-size: 1rem; font-weight: 400; color: var(--ink);
  background: #fff; border: 1.5px solid rgba(16,15,13,.28); padding: .8rem .95rem;
  border-radius: 0; transition: border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); outline: none; }
.field textarea { resize: vertical; }
.field select { appearance: none; }
.field__hint { font-size: .8rem; color: var(--muted); margin: .45rem 0 0; }
.field__error { font-size: .85rem; color: var(--danger); margin: .45rem 0 0; font-weight: 400; }
.field.is-invalid input, .field.is-invalid select { border-color: var(--danger); }

.choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .7rem; }
.choice__opt {
  display: flex; align-items: center; gap: .65rem;
  padding: .9rem 1rem; border: 1.5px solid rgba(16,15,13,.28); background: #fff; font-size: .92rem;
}
.choice__opt:hover { border-color: var(--ink); }
.choice__opt input { accent-color: var(--ink); margin: 0; }
.choice__opt:has(input:checked) { border-color: var(--ink); background: var(--cream); }

.names { display: grid; gap: .55rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.success__mark { width: 3rem; height: 3rem; margin: 0 auto 1.1rem; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: 1.3rem; }

/* =================================================================
   8 — FAQs — thin black-outlined boxes on lavender, all open
   ================================================================= */
.faq-section { position: relative; overflow: hidden; }
.faq-section .doodle { width: clamp(58px, 11vw, 210px); aspect-ratio: 1; z-index: 0; }
.faq-section .f1 { right:  7%; top:  9%; color: #f386b4; transform: rotate(12deg); }
.faq-section .f2 { left:   3%; top: 22%; color: #f0a99b; transform: rotate(-16deg); }
.faq-section .f3 { left:   5%; top: 47%; color: #b083e0; transform: rotate(8deg); }
.faq-section .f4 { right:  5%; top: 38%; color: #ef5f6a; transform: rotate(-10deg); }
.faq-section .f5 { right:  9%; top: 72%; color: #ef5f6a; transform: rotate(18deg); }
.faq-section > .wrap { position: relative; z-index: 1; }
/* on phones the boxes fill the width, so the doodles move to the very
   edges and soften rather than sitting under the answer text */
@media (max-width: 720px) {
  .faq-section .doodle { width: 22vw; opacity: .55; }
  .faq-section .f1 { right: -6%; }
  .faq-section .f2 { left:  -7%; }
  .faq-section .f3 { left:  -7%; }
  .faq-section .f4 { right: -6%; }
  .faq-section .f5 { right: -5%; }
}

.faq { display: grid; gap: clamp(.9rem, 1.9vw, 2rem); max-width: 44rem; margin-inline: auto; }
.faq__item {
  background: transparent;
  border: 2px solid var(--ink);
  padding: clamp(1.1rem, 2.2vw, 2.2rem) clamp(1rem, 2.4vw, 2.4rem);
  text-align: center;
}
.faq__q {
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(.92rem, 1.8vw, 1.9rem);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .005em;
  margin: 0 0 .7em;
}
.faq__item p {
  margin: 0;
  font-size: clamp(.88rem, 1.75vw, 1.85rem);
  line-height: 1.22;
}

/* =================================================================
   9 — CLOSING  (paper + pastel flower confetti + curved names)
   ================================================================= */
.closing {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 8rem) 1rem clamp(3rem, 6vw, 7rem);
  text-align: center;
}
.closing::before {
  content: "";
  position: absolute; inset: -6% 0;
  background: url("../img/media/91123b15abfaa00b02abd99439992e34.png") repeat-y center top / 100% auto;
  opacity: .9;
  pointer-events: none;
}
.closing > * { position: relative; z-index: 1; }

.closing__lockup {
  position: relative;
  width: min(100%, 44rem);
  margin: 0 auto clamp(1.5rem, 3vw, 3rem);
  aspect-ratio: 1 / 1;
}
.closing__pose {
  position: absolute;
  /* smaller + sat lower so the groom's head clears the JHOMELL arc,
     and nudged right so the pair sits inside the arch's opening */
  left: 50%; top: 24%;
  transform: translateX(calc(-50% + var(--poseNudge, 4%)));
  height: 74%;
  width: auto;
}
.closing__arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 2; }
.closing__arc text {
  font-family: var(--display);
  font-size: 11px;
  fill: var(--ink);
  letter-spacing: .02em;
}

.closing__line {
  font-family: var(--display);
  font-size: clamp(1.3rem, 4.4vw, 4.6rem);
  line-height: 1.16;
  text-transform: uppercase;
  margin: 0;
}
.closing__heart {
  display: inline-block;
  width: .8em; height: .72em;
  vertical-align: -.02em;
  margin-left: .18em;
  background: url("../img/media/31c0105f470124ec88db7826b2892025.svg") no-repeat center / contain;
}

/* legacy footer classes kept harmless */
.footer { padding: 0; }

/* Phones need the lockup back at near-full width, otherwise the 78%
   desktop shrink makes the names too small to read. Must come AFTER
   the base .hero__art rule to win the cascade. */
@media (max-width: 720px) {
  .hero__art { width: 96%; }
}

/* ==================================================================
   HERO ENTRANCE — the original animates its lockup in: the names fly
   in from the right, the couple from the left, the ampersand fades up.

   The pieces are absolutely positioned and already carry a centring
   translateX(-50%), so every keyframe re-declares that translate and
   chains the travel onto it — animating `transform` alone would drop
   the centring and the elements would jump left on the first frame.
   ================================================================== */
@keyframes heroFromRight {
  from { opacity: 0; transform: translateX(-50%) translateX(85vw); }
  to   { opacity: 1; transform: translateX(-50%); }
}
@keyframes heroFromLeft {
  from { opacity: 0; transform: translateX(-50%) translateX(-85vw); }
  to   { opacity: 1; transform: translateX(-50%); }
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateX(-50%) translateY(28%); }
  to   { opacity: 1; transform: translateX(-50%); }
}

.hero__name--first { animation: heroFromRight 1.15s cubic-bezier(.22,.61,.36,1) .10s backwards; }
.hero__pose        { animation: heroFromLeft  1.25s cubic-bezier(.22,.61,.36,1) .18s backwards; }
.hero__amp         { animation: heroFadeUp    .95s cubic-bezier(.22,.61,.36,1) .70s backwards; }
.hero__name--last  { animation: heroFromRight 1.15s cubic-bezier(.22,.61,.36,1) .34s backwards; }

/* The hero drives its own entrance, so it must not also be caught by
   the generic .reveal fade — the two stacked and washed the lockup out
   on load. (The .reveal class is removed from .hero__inner in the HTML;
   this is the belt-and-braces.) */
html.js-anim .hero__inner,
html.js-anim .hero__art { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__name--first,
  .hero__pose,
  .hero__amp,
  .hero__name--last { animation: none; }
}

/* phones: the banquet line-art was barely visible at 70% of a narrow
   section — let it own the bottom of the card area */
@media (max-width: 720px) {
  .rsvp-section::after {
    width: 130%;
    right: -22%;
    bottom: -2%;
  }
}


/* =================================================================
   WEDDING-DAY PHOTO WALL  (day.html)
   ================================================================= */
.pw { max-width: 64rem; margin-inline: auto; padding: clamp(1.5rem, 4vw, 3rem) 1rem 4rem; }
.pw__head { text-align: center; margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.pw__names { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 7vw, 3.6rem); margin: .2em 0; }
.pw__names .amp { font-style: italic; }
.pw__date { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin: 0; color: var(--muted); }
.pw__h { font-size: clamp(1.6rem, 6vw, 3rem) !important; }
.pw__panel { text-align: center; }
.pw__lead { margin: 0 0 1.5rem; }

.pw__uploader {
  max-width: 26rem; margin: 0 auto 2rem; text-align: left;
  background: rgba(255,255,255,.6); border: 1.5px solid var(--line);
  padding: 1.25rem;
}
.pw__uploader .field-label { display:block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.4rem; }
.pw__uploader input[type=text] {
  width:100%; font-family: var(--body); font-size:1rem; padding:.7rem .9rem;
  border:1.5px solid rgba(16,15,13,.3); background:#fff; margin-bottom:1rem;
}
.pw__pick {
  display:block; text-align:center; cursor:pointer;
  background: var(--ink); color:#fff; border-radius:999px;
  font-family: var(--display); font-size:1.05rem; letter-spacing:.02em;
  padding:.85em 1.2em;
}
.pw__pick input { display:none; }
.pw__status { min-height:1.2em; font-size:.85rem; margin:.8rem 0 0; text-align:center; }
.pw__status.is-error { color: var(--danger); }

/* the collage — CSS-columns masonry, shuffled on first paint */
.pw-grid { columns: 3 150px; column-gap: 8px; margin-top: 1rem; }
.pw-item { break-inside: avoid; margin: 0 0 8px; position: relative; }
.pw-item img { width:100%; display:block; border-radius:2px; background:#eee; min-height:60px; }
.pw-item figcaption {
  position:absolute; left:0; right:0; bottom:0;
  font-size:.66rem; padding:.25rem .45rem; text-align:left;
  color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.55));
}

/* day-of banner on the invitation/cover */
.dayof-banner {
  display:block; text-align:center; text-decoration:none;
  background: var(--ink); color:#fff;
  font-family: var(--body); font-weight:600; font-size:.9rem;
  padding:.8rem 1rem;
}
.dayof-banner:hover { opacity:.85; }

/* =================================================================
   THE PHOTO WALL — big-screen display (wall.html)
   Dark so photos pop on a projector/TV; no scrolling, no chrome.
   ================================================================= */
.page-wall {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background: #0d0c0b;
  color: #fdfaf4;
}
.page-wall::before { display: none; }        /* no paper texture here */
.page-wall.is-idle { cursor: none; }

.wall__stage {
  position: fixed;
  inset: 0;
  display: flex;
  gap: 10px;
  padding: 10px;
}
.wall__col { flex: 1 1 0; overflow: hidden; }

/* the continuous upward drift; the track holds two copies of the
   column's photos so -50% lands exactly on the seam */
.wall__track {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: wallDrift var(--dur, 80s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}
@keyframes wallDrift {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

.wall__item { margin: 0; position: relative; border-radius: 4px; overflow: hidden; }
.wall__item img { width: 100%; display: block; background: #1a1917; }
.wall__item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: .78rem; letter-spacing: .04em;
  padding: 1.6rem .6rem .5rem;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
}

/* ---- waiting for the first photo ---- */
.wall__empty {
  position: fixed; inset: 0;
  display: grid; place-content: center; text-align: center;
  background: #0d0c0b;
  z-index: 5;
}
.wall__pre {
  font-family: "Poppins", system-ui, sans-serif; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase;
  font-size: clamp(.7rem, 1.4vw, 1.1rem); margin: 0 0 1rem; opacity: .7;
}
.wall__names {
  font-family: "Bodoni Moda", Georgia, serif; font-weight: 400;
  font-size: clamp(2.4rem, 8vw, 8rem); margin: 0; line-height: 1;
}
.wall__names span { font-style: italic; opacity: .8; }
.wall__hint { margin-top: 2rem; opacity: .65; font-size: clamp(.9rem, 1.6vw, 1.3rem); }

/* ---- new-arrival announcement ---- */
.wall__hero {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-content: center; justify-items: center;
  background: rgba(13,12,11,.93);
  opacity: 0; transition: opacity .7s ease;
  backdrop-filter: blur(6px);
}
.wall__hero.is-in { opacity: 1; }
.wall__hero img {
  max-width: 78vw; max-height: 74vh;
  border-radius: 6px;
  box-shadow: 0 30px 90px -30px rgba(0,0,0,.9);
  transform: scale(.94);
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.wall__hero.is-in img { transform: scale(1); }
.wall__heroName {
  font-family: "Bodoni Moda", Georgia, serif; font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 2rem); margin: 1.2rem 0 0; opacity: .9;
}

/* ---- corner furniture ---- */
.wall__brand, .wall__meta {
  position: fixed; z-index: 8;
  font-family: "Poppins", system-ui, sans-serif;
  text-shadow: 0 2px 12px rgba(0,0,0,.9);
  pointer-events: none;
}
.wall__brand { left: 1.4rem; bottom: 1.2rem; }
.wall__brandNames {
  display: block; font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(1rem, 2vw, 1.9rem); letter-spacing: .06em;
}
.wall__brandMeta {
  display: block; font-size: clamp(.6rem, 1vw, .8rem);
  letter-spacing: .22em; text-transform: uppercase; opacity: .65;
}
.wall__meta {
  right: 1.4rem; bottom: 1.2rem;
  display: flex; align-items: center; gap: .8rem;
  font-size: clamp(.6rem, 1vw, .8rem); letter-spacing: .18em;
  text-transform: uppercase; opacity: .6;
}
.wall__meta button {
  pointer-events: auto; cursor: pointer;
  background: none; border: 1px solid rgba(253,250,244,.3);
  color: inherit; border-radius: 4px; padding: .2rem .45rem; font-size: 1rem;
}
.is-idle .wall__meta button { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .wall__track { animation: none; }
}

/* upload page: a small confirmation strip, not the full wall */
.pw-grid--mine { columns: 3 110px; max-width: 30rem; margin-inline: auto; }
.pw__wallnote { margin-top: 1.25rem; }

/* A `display` rule beats the UA stylesheet's [hidden]{display:none},
   so any element given display:grid/flex here would ignore its hidden
   attribute. This puts [hidden] back in charge everywhere. */
[hidden] { display: none !important; }

/* ---- VIEW 2: scattered collage (?view=scatter) ----
   Photos land as tilted prints with a white border, newest on top. */
.wall__print {
  position: absolute;
  margin: 0;
  padding: 8px 8px 26px;                 /* polaroid-ish border */
  background: #fdfaf4;
  border-radius: 2px;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.75), 0 2px 6px rgba(0,0,0,.4);
  transform: translateY(-14vh) scale(1.12) rotate(var(--tilt, 0deg));
  opacity: 0;
  transition: transform 1s cubic-bezier(.19,.86,.35,1), opacity .6s ease;
  will-change: transform, opacity;
}
.wall__print.is-down {
  transform: translateY(0) scale(1) rotate(var(--tilt, 0deg));
  opacity: 1;
}
.wall__print img { width: 100%; display: block; background: #e8e4dc; }
.wall__print figcaption {
  position: absolute; left: 0; right: 0; bottom: 5px;
  text-align: center;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: .72rem; letter-spacing: .05em;
  color: #4a453e; background: none; padding: 0;
}

/* the scatter stage is a plain canvas, not a flex row of columns */
[data-view="scatter"] .wall__stage {
  display: block;
  padding: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, #1a1815 0%, #0d0c0b 70%);
}

@media (prefers-reduced-motion: reduce) {
  .wall__print { transition: opacity .4s ease; transform: rotate(var(--tilt,0deg)); }
}

/* view dropdown on the wall */
.wall__viewpick {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: .45rem;
}
.wall__viewpick > span {
  font-size: inherit; letter-spacing: .18em; text-transform: uppercase; opacity: .75;
}
.wall__viewpick select {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: .72rem; letter-spacing: .1em;
  color: #fdfaf4;
  background: rgba(253,250,244,.08);
  border: 1px solid rgba(253,250,244,.3);
  border-radius: 4px;
  padding: .25rem 1.6rem .25rem .5rem;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #fdfaf4 50%),
                    linear-gradient(135deg, #fdfaf4 50%, transparent 50%);
  background-position: right .72rem center, right .48rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.wall__viewpick select option { background: #16150f; color: #fdfaf4; }
/* fade the controls out once the screen is left alone */
.is-idle .wall__viewpick { opacity: 0; transition: opacity .5s ease; }

/* =================================================================
   PRINTABLE QR CARDS (qr.html) — 4 per A4, cut along the guides
   ================================================================= */
.page-qr { background: #fff; }
.page-qr::before { display: none; }

.qr-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1.2rem; background: #100f0d; color: #fdfaf4;
  font-family: "Poppins", system-ui, sans-serif; font-size: .85rem;
}
.qr-toolbar button {
  font-family: "Poppins", system-ui, sans-serif; font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  background: #fdfaf4; color: #100f0d; border: 0; border-radius: 999px;
  padding: .5rem 1.4rem;
}

.qsheet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 210mm; min-height: 297mm;
  margin: 0 auto; background: #fff;
}
.qcard {
  border: 1px dashed #c9c4bb;          /* cut guide */
  padding: 10mm 8mm;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    var(--texture) center/cover,
    #fdfaf4;
}
.qcard__pre {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 13pt; letter-spacing: .08em; margin: 0 0 2mm; color: #100f0d;
}
.qcard__h {
  font-family: "Bakbak One", system-ui, sans-serif; font-weight: 400;
  font-size: 21pt; line-height: 1.05; letter-spacing: .02em;
  text-transform: uppercase; margin: 0 0 3mm; color: #100f0d;
  transform: scaleX(.85);
}
.qcard__lead {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 9pt; line-height: 1.45; margin: 0 0 5mm; color: #3b372f;
}
.qcard__qr { width: 52mm; height: 52mm; }
.qcard__qr svg { display: block; width: 100%; height: 100%; }
.qcard__url {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 6.5pt; letter-spacing: .02em; word-break: break-all;
  margin: 3mm 0 0; color: #6b6660;
}
.qcard__foot {
  font-family: "Poppins", system-ui, sans-serif; font-weight: 600;
  font-size: 7.5pt; letter-spacing: .12em; text-transform: uppercase;
  margin: 4mm 0 0; color: #100f0d;
}

@media print {
  .qr-toolbar { display: none; }
  .qsheet { width: auto; min-height: auto; }
  .qcard { break-inside: avoid; }
  @page { size: A4; margin: 8mm; }
}


/* JHOMELL (7 letters) is 47% wider than TRISH (5). With unequal widths
   you cannot have symmetric margins AND a centred gap AND aligned outer
   tips — fixing one always breaks another. Tracking TRISH out to match
   JHOMELL's width makes all three true at once, and wide letter-spacing
   on an arched name reads as a deliberate monogram treatment. */
.closing__arc text:last-of-type { letter-spacing: var(--trishTrack, 0.30em); }