/* ==========================================================================
   Renz & Gen — Wedding Invitation
   Theme layer: cream paper, cocoa brown, champagne, antique gold.
   Loaded after styles.css and intentionally overrides the older light palette.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --espresso-950: #120A07;
  --espresso-900: #1B100B;
  --espresso-850: #21140E;
  --espresso-800: #281811;
  --espresso-700: #352117;
  --espresso-600: #472D20;

  --cream: #F7F4EC;
  --cream-deep: #EFEAE0;
  --champagne: #DCD6C9;
  --gold: #A8874A;
  --gold-light: #D8C7A6;
  --gold-deep: #8A6236;
  --mocha: #4A352A;

  /* Re-map the legacy tokens so shared components inherit the new palette. */
  --ivory: #F7F4EC;
  --ivory-deep: #F0EBE1;
  --sand: #DCD6C9;
  --sand-deep: #BCB099;
  --sage: #8A6F4C;
  --sage-deep: #8A6236;
  --sage-dark: #1B100B;
  --sage-ink: #120A07;
  --rose: #B09A78;
  --rose-deep: #6B4A2E;
  --ink: #1A100B;
  --muted: rgba(247, 244, 236, .66);
  --muted-light: rgba(247, 244, 236, .5);

  --display: "Pinyon Script", "Great Vibes", cursive;
  --script: "Great Vibes", "Pinyon Script", cursive;

  --hairline: rgba(168, 135, 74, .26);
  --hairline-soft: rgba(168, 135, 74, .16);
  --shadow-dark: 0 40px 90px -40px rgba(0, 0, 0, .85);
  --lace-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23A8874A' stroke-width='.8'%3E%3Cpath d='M60 18c9 12 9 26 0 42-9-16-9-30 0-42zM60 102c9-12 9-26 0-42-9 16-9 30 0 42zM18 60c12 9 26 9 42 0-16-9-30-9-42 0zM102 60c-12 9-26 9-42 0 16-9 30-9 42 0z'/%3E%3Ccircle cx='60' cy='60' r='3.2'/%3E%3Ccircle cx='24' cy='24' r='1.6'/%3E%3Ccircle cx='96' cy='24' r='1.6'/%3E%3Ccircle cx='24' cy='96' r='1.6'/%3E%3Ccircle cx='96' cy='96' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- 2. Base ---------- */
html { background: var(--espresso-900); scrollbar-color: var(--espresso-600) var(--espresso-900); }
::-webkit-scrollbar-track { background: var(--espresso-900); }
::-webkit-scrollbar-thumb { background: var(--espresso-600); border-color: var(--espresso-900); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

body {
  background: var(--espresso-900);
  color: var(--cream);
  font-family: var(--sans);
}

/* Keeps intrinsic image proportions when only the width is styled.
   Component rules that set height: 100% still win on specificity. */
img { height: auto; }

::selection { background: var(--gold); color: var(--espresso-900); }

:focus-visible { outline-color: var(--gold-light); }

:where(#save-the-date, #dress-code, #party, #story, #rsvp) { scroll-margin-top: 92px; }

.section { position: relative; }

 
.eyebrow::before,
.eyebrow--center::after { background: currentColor; opacity: .7; }

.section-title { color: var(--cream); }
.section-title em { color: var(--gold-light); }
.section-lede { color: var(--muted); }

.section-head--light .eyebrow { color: var(--gold-light); }
.section-head--light .section-title em { color: var(--gold); }

.text-link { color: var(--gold); }
.text-link:hover { color: var(--gold-light); border-bottom-color: var(--gold-light); }

/* ---------- 3. Buttons ---------- */
.btn {
  letter-spacing: .24em;
  border-radius: 0;
}
.btn--gold {
  background: linear-gradient(160deg, #D6BE96, var(--gold) 55%, #9A7A4A);
  border-color: rgba(228, 207, 164, .7);
  color: #1A100B;
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .8);
}
.btn--gold:hover {
  background: linear-gradient(160deg, #EED9AD, #C9AE86 60%, #A8874A);
  border-color: var(--gold-light);
  color: #1B100B;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .85);
}
.btn--gold svg { transition: transform .4s var(--ease); }
.btn--gold:hover svg { transform: translateY(2px); }

.btn--solid { background: var(--gold); border-color: var(--gold); color: var(--espresso-900); }
.btn--solid:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--espresso-900); }

.btn--light { background: var(--cream); border-color: var(--cream); color: var(--espresso-900); }
.btn--light:hover { background: #FAF7F0; border-color: #FAF7F0; }

.btn--ghost { background: transparent; border-color: rgba(247, 244, 236, .4); color: var(--cream); }
.btn--ghost:hover { background: rgba(247, 244, 236, .1); border-color: var(--cream); }

.btn--outline { border-color: var(--hairline); color: var(--gold-light); }
.btn--outline:hover { background: var(--gold); border-color: var(--gold); color: var(--espresso-900); }

.btn--nav {
  border-color: rgba(168, 135, 74, .55);
  color: var(--gold-light);
}
.btn--nav:hover { background: var(--gold); border-color: var(--gold); color: var(--espresso-900); }

.btn--lg { padding: 19px 42px; font-size: 10.5px; }

/* ==========================================================================
   4. Opening — vintage camera + instant photos
   ========================================================================== */
.intro {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 26px 20px 76px;
  background:
    radial-gradient(120% 96% at 50% 34%, #FAF8F2 0%, #F3F0E8 54%, #E6E1D6 100%);
  color: #1E1410;
  opacity: 1;
  visibility: visible;
  transition: opacity .9s var(--ease), visibility .9s;
}
.intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--lace-img);
  background-size: 140px 140px;
  opacity: .02;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.intro::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(92, 66, 42, .22);
  pointer-events: none;
}
.intro.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.intro[hidden] { display: none; }
html.intro-seen .intro { display: none; }
html:not(.js) .intro { display: none; }

.intro__halo { display: none; }
.intro__arcs { display: none; }

.intro__stage {
  position: relative;
  z-index: 2;
  width: min(100%, 620px);
  text-align: center;
  outline: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease-soft);
}

.intro__kicker {
  color: #7A5530;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .46em;
  text-transform: uppercase;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.intro__names {
  margin-top: 10px;
  font-family: var(--display);
  font-size: clamp(54px, 10.6vw, 100px);
  font-weight: 400;
  line-height: .95;
  color: #241710;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.intro__names span {
  display: inline-block;
  font-family: var(--serif);
  font-size: .38em;
  font-style: italic;
  color: #85603A;
  transform: translateY(-.32em);
  margin: 0 .06em;
}

/* The stage that holds the line, the camera, and the prints. */
.intro__camera-stage {
  position: relative;
  width: min(88vw, 44vh, 460px);
  margin: clamp(10px, 2vh, 20px) auto 0;
}
.polaroid {
  position: relative;
  aspect-ratio: 440 / 505;
}
.intro__line {
  margin-bottom: clamp(10px, 1.6vh, 16px);
  color: #5B3E24;
  font-family: var(--script);
  font-size: clamp(20px, 2.5vw, 27px);
  line-height: 1.2;
  opacity: 1;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

/* --- Polaroid Spirit 600 --- */
.camera {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  filter: drop-shadow(0 26px 34px rgba(74, 52, 32, .38));
  transition: transform .5s var(--ease), filter .5s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.camera:hover { transform: translateY(-4px) rotate(-.35deg); }
.camera:active { transform: translateY(1px) scale(.997); }
.camera:focus-visible { outline: 1px dashed rgba(168, 135, 74, .6); outline-offset: 10px; border-radius: 10px; }
.camera__art { display: block; width: 100%; height: 100%; overflow: visible; }

/* The flash window glows for a beat when the shutter trips. Every pop is
   driven by .is-flashing so the window, the bloom and the light veil always
   fire together — and exactly as many times as JS asks. */
.camera__flash-window { opacity: 0; }

/* The flash unit fires: the window blows out, a hot core blooms off it,
   and a soft veil of light briefly lifts the whole frame. */
.camera__burst {
  position: absolute;
  left: 73%;
  top: 17%;
  z-index: 5;
  width: 36%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.78);
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, .96) 20%,
      rgba(255, 253, 246, .66) 40%,
      rgba(255, 249, 232, .24) 62%,
      rgba(255, 246, 226, 0) 80%);
  filter: blur(3px);
  mix-blend-mode: screen;
}
.camera__burst::after {
  content: "";
  position: absolute;
  inset: -60%;
  background:
    radial-gradient(closest-side,
      rgba(255, 252, 242, .5) 0%,
      rgba(255, 248, 230, .18) 40%,
      rgba(255, 246, 226, 0) 72%);
  filter: blur(12px);
}
.intro.is-opening .camera { animation: cameraClick .55s var(--ease) both; }
@keyframes cameraClick {
  0% { transform: translateY(0); }
  22% { transform: translateY(3px) scale(.995); }
  55% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

/* --- The flash --- */
.intro__flash {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  /* The light blooms from the camera's flash window; JS sets the origin. */
  background:
    radial-gradient(42% 38% at var(--flash-x, 50%) var(--flash-y, 40%), #FFFFFF 0%, rgba(255, 254, 249, .82) 26%, rgba(255, 250, 238, .38) 52%, rgba(255, 248, 232, 0) 76%),
    radial-gradient(120% 110% at var(--flash-x, 50%) var(--flash-y, 40%), rgba(255, 253, 247, .5) 0%, rgba(255, 249, 236, .18) 42%, rgba(255, 247, 230, 0) 78%);
}
/* Each pop is short and distinct: one class add per flash. */
@keyframes cameraFlashQuick {
  0% { opacity: 0; }
  3% { opacity: .72; }
  9% { opacity: .9; }
  24% { opacity: .3; }
  56% { opacity: .05; }
  100% { opacity: 0; }
}
@keyframes cameraBurstQuick {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.84); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  46% { opacity: .5; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes cameraBulbQuick {
  0% { opacity: 0; }
  4% { opacity: 1; }
  18% { opacity: 1; }
  46% { opacity: .42; }
  100% { opacity: 0; }
}
.intro.is-flashing .intro__flash { animation: cameraFlashQuick .3s ease-out forwards; }
.intro.is-flashing .camera__burst { animation: cameraBurstQuick .3s cubic-bezier(.16, .62, .3, 1) both; }
.intro.is-flashing .camera__flash-window {
  animation: cameraBulbQuick .3s ease-out both;
  filter: drop-shadow(0 0 6px #FFFFFF) drop-shadow(0 0 14px rgba(255, 242, 206, .55));
}

/* --- Grain, paper, and film trimmings --- */
.intro__grain {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  filter: grayscale(1);
}
.intro__film,
.intro__stamp {
  position: fixed;
  bottom: calc(26px + env(safe-area-inset-bottom));
  z-index: 3;
  color: rgba(91, 62, 36, .55);
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: .26em;
  text-transform: uppercase;
  pointer-events: none;
}
.intro__film { left: clamp(20px, 4vw, 54px); }
.intro__stamp { right: clamp(20px, 4vw, 54px); font-size: 10px; letter-spacing: .2em; color: rgba(91, 62, 36, .72); }

.intro.is-opening .intro__hint,
.intro.is-emerging .intro__hint {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
}

.intro__hint {
  margin-top: clamp(12px, 2.2vh, 20px);
  padding: 7px 3px;
  border: 0;
  border-bottom: 1px solid rgba(120, 82, 48, .34);
  background: none;
  color: rgba(30, 20, 16, .62);
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .34em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .6s var(--ease), transform .6s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.intro__hint:hover,
.intro__hint:focus-visible { color: #4A3320; border-color: #4A3320; }
.intro__hint:focus-visible { outline: 1px dashed rgba(120, 82, 48, .5); outline-offset: 4px; }
.intro__skip {
  position: fixed;
  top: calc(24px + env(safe-area-inset-top));
  right: clamp(20px, 3.6vw, 44px);
  z-index: 7;
  padding: 8px 4px;
  border: 0;
  border-bottom: 1px solid rgba(120, 82, 48, .3);
  background: none;
  color: rgba(30, 20, 16, .5);
  font-family: var(--sans);
  font-size: 8.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.intro__skip:hover { color: #4A3320; border-color: #4A3320; }
/* --- Three separate Polaroids --- */
.prints {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.print {
  position: absolute;
  width: 70%;
  margin: 0;
  padding: 5.4% 5.4% 16.5%;
  background: linear-gradient(158deg, #FCFAF5 0%, #F6F2E9 46%, #EFEADF 100%);
  box-shadow:
    0 20px 32px -16px rgba(67, 47, 29, .55),
    0 0 0 1px rgba(96, 72, 42, .16);
  opacity: 0;
  transform: rotate(var(--r, 0deg));
  will-change: transform, opacity, clip-path;
}
.print img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #1A100B;
  box-shadow: inset 0 0 0 1px rgba(24, 14, 9, .22);
  filter: grayscale(.55) sepia(.34) saturate(.48) contrast(.95) brightness(1.1);
}
.print__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4.5%;
  color: #3B2A1D;
  font-family: var(--script);
  font-size: clamp(11px, 1.1vw, 16px);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.print--1 { left: -58%; top: 24%; --r: -8deg; --delay: 0s; --dur: .8s; }
.print--2 { left: 92%; top: 36%; --r: 7.5deg; --delay: .8s; --dur: .8s; }
.print--3 { left: 22%; top: 62%; --r: -2.5deg; --delay: 1.6s; --dur: .8s; }

.intro.is-emerging .print {
  animation: printEject var(--dur, .8s) linear var(--delay, 0s) both;
}
/* The paper first slides out of the film slot, then glides to its place.
   Each print runs for its full .8 s before the next one starts, so a print
   is always fully settled before the following one leaves the slot. */
@keyframes printEject {
  0% {
    opacity: 1;
    clip-path: inset(0 0 100% 0);
    transform: translate(var(--from-x, 0), var(--from-y, 0)) rotate(0deg);
    animation-timing-function: linear;
  }
  34% {
    clip-path: inset(0 0 0 0);
    transform: translate(var(--from-x, 0), var(--from-y, 0)) rotate(calc(var(--r, 0deg) * .06));
    animation-timing-function: cubic-bezier(.22, .58, .22, 1);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0) rotate(var(--r, 0deg));
  }
}

/* Narrow windows: pull the side prints in so they stay close to the camera. */
@media (max-width: 1000px) {
  .print--1 { left: -34%; top: 26%; }
  .print--2 { left: 66%; top: 38%; }
  .print--3 { left: 18%; top: 64%; }
}
@media (max-width: 540px) {
  .print--1 { left: 0%; top: 30%; }
  .print--2 { left: 32%; top: 40%; }
  .print--3 { left: 15%; top: 60%; }
}
.intro__stage.is-fading { opacity: .96; }
.intro.is-leaving .intro__stage {
  opacity: 0;
  transform: translateY(-14px);
}

/* Short screens: keep the whole camera and photo cluster in view. */
@media (max-height: 740px) {
  .intro__names { font-size: clamp(42px, 8.6vw, 68px); }
  .intro__line { font-size: 19px; }
  .intro__hint { margin-top: 12px; }
}

/* ==========================================================================
   5. Header + mobile menu
   ========================================================================== */
.site-header { color: var(--cream); }
.site-header.is-scrolled {
  background: rgba(18, 10, 7, .92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--hairline-soft);
  color: var(--cream);
}
.site-header.is-scrolled .btn--nav {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--espresso-900);
}
.site-header.is-scrolled .btn--nav:hover { background: var(--gold-light); border-color: var(--gold-light); }
.site-header.is-scrolled .nav-toggle { border-color: var(--hairline); }
.site-header.is-scrolled .brand__mark span { color: var(--gold); }

.brand__mark { color: var(--cream); }
.brand__mark span { color: var(--gold); }
.brand__date { color: rgba(247, 244, 236, .5); }

.site-nav__link { color: var(--cream); opacity: .78; }
.site-nav__link:hover,
.site-nav__link.is-active { opacity: 1; color: var(--gold-light); }

.nav-toggle { border-color: rgba(168, 135, 74, .45); }

.mobile-menu {
  background:
    radial-gradient(120% 80% at 85% 0%, rgba(168, 135, 74, .12), transparent 62%),
    var(--espresso-900);
  color: var(--cream);
}
.mobile-menu__nav a { color: var(--cream); border-bottom-color: var(--hairline-soft); }
.mobile-menu__nav a:hover { color: var(--gold-light); }
.mobile-menu__nav a span { color: var(--gold); }
.mobile-menu__date { color: rgba(247, 244, 236, .55); }
.mobile-menu__place { color: rgba(247, 244, 236, .5); }
.mobile-menu__foot .btn { color: var(--espresso-900); }

body.nav-open .site-header { color: var(--cream); }
body.nav-open .nav-toggle { border-color: var(--hairline); }

/* ==========================================================================
   6. Landing — lace collage
   ========================================================================== */
.cover {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #1A100B;
  isolation: isolate;
}
/* (the old full-bleed hero photograph and veil were replaced by the cream
   cover with its deep brown plate; see the landing section further down.) */

.cover__stage {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(0, 566px) minmax(190px, 1fr);
  align-items: center;
  justify-items: center;
  column-gap: clamp(12px, 3vw, 56px);
  width: min(100%, 1380px);
  margin: 0 auto;
  min-height: 100svh;
  padding: calc(var(--header-h) + 30px) clamp(18px, 3.6vw, 56px) 88px;
}

/* The collage pieces keep their own rotations; only fade them in.
   (The base hero animation animates transform, which would flatten them.) */
@keyframes coverIn {
  from { opacity: 0; filter: blur(5px); }
  to { opacity: 1; filter: blur(0); }
}
body.is-loaded .cover .reveal-hero { animation-name: coverIn; }

/* Gold arcs borrowed from the reference stationery. */
.cover__waves {
  position: absolute;
  left: -8%;
  top: 6%;
  z-index: 1;
  width: min(58vw, 620px);
  color: var(--gold-light);
  opacity: .13;
  pointer-events: none;
}
.cover__waves svg { width: 100%; height: auto; }

.cover__floral {
  position: absolute;
  z-index: 1;
  width: clamp(150px, 20vw, 258px);
  color: #F2EEE5;
  opacity: .3;
  pointer-events: none;
  filter: drop-shadow(0 18px 26px rgba(20, 11, 7, .35));
}
.cover__floral svg { width: 100%; height: auto; }
.cover__floral--left { left: max(-38px, -2.4vw); top: 10%; transform: rotate(-16deg); }
.cover__floral--right { right: max(-40px, -2.6vw); bottom: -2%; transform: rotate(158deg); opacity: .18; }

/* --- Ornate oval monogram --- */
.cover__left {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.cover__oval {
  position: relative;
  width: clamp(168px, 17vw, 242px);
  aspect-ratio: 3 / 4.05;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background:
    radial-gradient(62% 52% at 50% 28%, rgba(255, 253, 247, .95) 0%, rgba(244, 232, 212, .94) 66%, rgba(226, 207, 176, .96) 100%);
  box-shadow:
    0 0 0 1px rgba(91, 62, 36, .55),
    0 0 0 7px rgba(249, 241, 228, .82),
    0 0 0 8px rgba(140, 104, 58, .38),
    0 0 0 15px rgba(232, 214, 184, .16),
    0 36px 58px -24px rgba(0, 0, 0, .82);
  transform: rotate(-4deg);
}
.cover__oval::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 1px dotted rgba(140, 104, 58, .55);
  pointer-events: none;
}
.cover__oval::after {
  content: "";
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  border: 1px solid rgba(140, 104, 58, .26);
  pointer-events: none;
}
.cover__oval-inner {
  position: absolute;
  inset: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  overflow: hidden;
  border-radius: 50%;
  color: var(--gold-deep);
  text-align: center;
}
.cover__oval-lines {
  position: absolute;
  left: -10%;
  top: 20%;
  width: 120%;
  opacity: .22;
  pointer-events: none;
}
.cover__oval-kicker {
  position: relative;
  color: #5B3E24;
  font-size: 7px;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.cover__oval-mono {
  position: relative;
  color: #1E1410;
  font-family: var(--display);
  font-size: clamp(34px, 4vw, 52px);
  line-height: .95;
}
.cover__oval-mono i {
  font-family: var(--serif);
  font-size: .46em;
  font-style: italic;
  color: var(--gold-deep);
}
.cover__oval-date {
  position: relative;
  color: #4A3320;
  font-size: 7.5px;
  letter-spacing: .3em;
}

/* --- Main invitation card --- */
.cover__invite {
  position: relative;
  z-index: 5;
  width: min(100%, 566px);
  padding: clamp(38px, 4.4vw, 54px) clamp(22px, 3.6vw, 48px) clamp(30px, 3.6vw, 44px);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(168, 135, 74, .17), transparent 58%),
    linear-gradient(168deg, #FAF7F1, #F3EFE6 55%, #EEDFC6);
  color: var(--ink);
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(91, 62, 36, .26),
    0 0 0 8px rgba(249, 241, 227, .78),
    0 0 0 9px rgba(168, 135, 74, .32),
    0 46px 92px -42px rgba(0, 0, 0, .92);
}
.cover__invite::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(168, 135, 74, .42);
  pointer-events: none;
}
.cover__invite::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--lace-img);
  background-size: 90px 90px;
  opacity: .07;
  pointer-events: none;
}
.cover__invite > * { position: relative; z-index: 1; }

.ornate-corner {
  position: absolute;
  z-index: 2;
  display: block;
  width: clamp(30px, 4.4vw, 52px);
  height: clamp(30px, 4.4vw, 52px);
  color: var(--gold-deep);
  opacity: .85;
  pointer-events: none;
}
.ornate-corner svg { width: 100%; height: 100%; }
.ornate-corner--tl { top: 14px; left: 14px; }
.ornate-corner--tr { top: 14px; right: 14px; transform: rotate(90deg); }
.ornate-corner--br { bottom: 14px; right: 14px; transform: rotate(180deg); }
.ornate-corner--bl { bottom: 14px; left: 14px; transform: rotate(270deg); }

.cover__invite .eyebrow { color: var(--gold-deep); font-size: 8.5px; letter-spacing: .32em; }
.cover__invite .eyebrow::before,
.cover__invite .eyebrow::after { opacity: .6; }

.cover__names {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .1em;
  margin-top: 14px;
  font-family: var(--display);
  font-size: clamp(58px, 8.4vw, 102px);
  font-weight: 400;
  line-height: .92;
  color: #352117;
}
.cover__names i {
  font-family: var(--serif);
  font-size: .36em;
  font-weight: 300;
  color: var(--gold-deep);
  transform: translateY(-.08em);
}
/* The intro moves focus here for screen readers; the heading is not interactive,
   so suppress the visible ring that programmatic focus would otherwise paint. */
.cover__names:focus,
.cover__names:focus-visible { outline: none; }
.cover__fullnames {
  margin-top: 10px;
  color: #3A2519;
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.cover__request {
  margin-top: 18px;
  color: #40301F;
  font-family: var(--serif);
  font-size: clamp(14px, 1.5vw, 17px);
  font-style: italic;
  line-height: 1.7;
}

.cover__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 20px auto 18px;
  color: var(--gold-deep);
}
.cover__divider::before,
.cover__divider::after {
  content: "";
  width: 46px;
  height: 1px;
  background: currentColor;
  opacity: .4;
}
.cover__divider svg { width: 18px; height: 18px; }

.cover__date {
  color: #2B1E15;
  font-family: var(--serif);
  font-size: clamp(15px, 1.7vw, 19px);
  line-height: 1.7;
}
.cover__date strong {
  display: inline-block;
  margin-top: 3px;
  font-family: var(--sans);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #5B3E24;
}
.cover__time {
  margin-top: 10px;
  color: #4A352A;
  font-size: 8.5px;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.cover__venue {
  margin-top: 16px;
  color: #241710;
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.35;
}
.cover__venue span {
  display: block;
  margin-top: 2px;
  color: #5B3E24;
  font-family: var(--sans);
  font-size: 8.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.cover__invite .btn { margin-top: 26px; }

/* --- Lace envelope --- */
.cover__envelope {
  position: relative;
  z-index: 4;
  width: clamp(158px, 15vw, 206px);
  aspect-ratio: 1.55 / 1;
  transform: rotate(4.5deg);
  filter: drop-shadow(0 26px 34px rgba(20, 11, 7, .55));
  pointer-events: none;
}
.cover__envelope-body {
  position: absolute;
  inset: 0;
  background: linear-gradient(158deg, #F7F3EA, #F1ECE3 55%, #E4DED2);
  box-shadow: inset 0 0 0 1px rgba(91, 62, 36, .3);
  border-radius: 3px;
}
.cover__envelope-flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 56%;
  background: linear-gradient(180deg, #F4EFE6, #E6E0D4);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: 3;
}
.cover__envelope-lace {
  position: absolute;
  inset: 0;
  background-image: var(--lace-img);
  background-size: 52px 52px;
  opacity: .16;
  z-index: 2;
}
.cover__envelope-seal {
  position: absolute;
  left: 50%;
  top: 53%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5px;
  width: 34%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #EBD4A3, #A8874A 54%, #8A6236);
  border: 1px solid #4A3320;
  color: #1A100B;
  font-family: var(--serif);
  font-size: clamp(9px, 1.2vw, 13px);
  box-shadow: 0 6px 14px rgba(48, 28, 12, .4);
}
.cover__envelope-seal span { font-size: .8em; }

/* --- Save-the-date tag --- */
.cover__tag {
  position: relative;
  z-index: 4;
  width: clamp(178px, 17vw, 226px);
  margin: 0;
  padding: 26px 20px 20px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(168, 135, 74, .16), transparent 62%),
    linear-gradient(160deg, #F6F2E9, #EFE9DE);
  border: 1px solid rgba(140, 104, 58, .32);
  border-radius: 3px 16px 3px 3px;
  box-shadow:
    0 0 0 6px rgba(249, 241, 227, .6),
    0 0 0 7px rgba(168, 135, 74, .26),
    0 28px 46px -22px rgba(0, 0, 0, .78);
  transform: rotate(3.5deg);
  text-align: center;
  color: #2B1E15;
}
.cover__tag::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 8px;
  height: 1px;
  background: rgba(168, 135, 74, .4);
}
.cover__tag-kicker {
  display: block;
  color: #5B3E24;
  font-size: 7px;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.cover__tag blockquote {
  margin: 12px 0 10px;
  color: #3B2A1D;
  font-family: var(--script);
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.35;
}
.cover__tag figcaption {
  color: #5B3E24;
  font-size: 7.5px;
  letter-spacing: .3em;
}

.cover__right {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.6vh, 28px);
  width: 100%;
}

/* --- Save-the-date vinyl (music toggle) --- */
.cover__music {
  position: relative;
  z-index: 4;
  width: clamp(138px, 14vw, 188px);
  margin-left: -18px;
  transform: rotate(-15deg);
  transition: transform .7s var(--ease);
}
.cover__music:hover { transform: rotate(-5deg) translateY(-4px); }
.cover__vinyl {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.cover__vinyl:focus-visible { outline-offset: 8px; }
.cover__vinyl-disc {
  position: absolute;
  right: -42%;
  top: 50%;
  width: 88%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #080808;
  box-shadow:
    0 2.2cqw 4cqw rgba(0, 0, 0, .75),
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    inset 0 0 2cqw rgba(0, 0, 0, .9);
}
.cover__vinyl-grooves {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 214deg,
      transparent 0 15%, rgba(255, 255, 255, .14) 21%, transparent 29%,
      transparent 54%, rgba(255, 255, 255, .09) 63%, transparent 71%),
    repeating-radial-gradient(circle at 50% 50%, #1B1B1B 0 1px, #050505 1px 3px);
}
.cover__music.is-playing .cover__vinyl-grooves { animation: vinylSpin 9s linear infinite; }
@keyframes vinylSpin { to { transform: rotate(360deg); } }
.cover__vinyl-label {
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, #D8C7A6, #A8874A 60%, #8A6236);
  box-shadow: inset 0 0 0 2px rgba(24, 14, 9, .5);
}
.cover__vinyl-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 24%;
  height: 24%;
  transform: translate(-50%, -50%);
  color: #1A100B;
  pointer-events: none;
}
.cover__vinyl-icon--pause { display: none; }
.cover__music.is-playing .cover__vinyl-icon--play { display: none; }
.cover__music.is-playing .cover__vinyl-icon--pause { display: block; }
.cover__vinyl-sleeve {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  height: 100%;
  padding: 12px;
  background: linear-gradient(160deg, #F6F2E9, #F0EBE1);
  border: 1px solid rgba(168, 135, 74, .45);
  box-shadow: 0 26px 46px -24px rgba(0, 0, 0, .85);
  text-align: center;
}
.cover__vinyl-kicker {
  color: #5B3E24;
  font-size: 7.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.cover__vinyl-sleeve strong {
  color: #241710;
  font-family: var(--serif);
  font-size: clamp(15px, 1.7vw, 22px);
  font-weight: 400;
  letter-spacing: .06em;
  line-height: 1.2;
  white-space: nowrap;
}
.cover__vinyl-sleeve small {
  color: var(--gold-deep);
  font-family: var(--script);
  font-size: clamp(16px, 1.8vw, 22px);
  line-height: 1;
}
.cover__music-note {
  margin-top: 8px;
  color: rgba(247, 244, 236, .58);
  font-size: 7px;
  letter-spacing: .18em;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 1px 2px rgba(24, 13, 9, .75);
  text-transform: uppercase;
  transition: color .4s var(--ease);
}
.cover__music:hover .cover__music-note { color: var(--gold-light); }

.cover__scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 6;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  color: rgba(247, 244, 236, .55);
  font-size: 8px;
  letter-spacing: .3em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .4s var(--ease);
}
.cover__scroll:hover { color: var(--gold-light); }
.cover__scroll svg { width: 16px; height: 16px; animation: scrollHint 2.6s var(--ease-soft) infinite; }

/* Mobile-only CTA pinned beneath the stationery stack. */
.cover__enter { display: none; }
@keyframes scrollHint {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50% { transform: translateY(5px); opacity: 1; }
}

/* ==========================================================================
   7. Save the date — date card, celebration details, countdown, RSVP
   ========================================================================== */
.save-date {
  overflow: hidden;
  isolation: isolate;
  background: #f5efe3;
  border-top: 1px solid var(--hairline-soft);
}
.page-thread {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  overflow: visible;
  pointer-events: none;
}
.page-thread path { fill: none; }
.thread-mask {
  fill: none;
  stroke: #fff;
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.thread-line {
  fill: none;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(20, 12, 7, .45));
}
.thread-beads {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: .1 12;
  filter: drop-shadow(0 1px 1.5px rgba(20, 12, 7, .55));
}
.thread-tip {
  fill: #CE8680;
  opacity: 0;
  transition: opacity .3s var(--ease);
  filter: drop-shadow(0 0 4px rgba(206, 134, 128, .55));
}
.thread-tip.is-on { opacity: 1; }
.thread-burst {
  position: absolute;
  z-index: 60;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  opacity: 0;
  pointer-events: none;
  animation: threadBurst 1.1s cubic-bezier(.2, .7, .3, 1) both;
}
.thread-burst svg { display: block; width: 100%; height: 100%; }
.thread-burst path { fill: #CE8680; filter: drop-shadow(0 1px 2px rgba(90, 40, 30, .2)); }
@keyframes threadBurst {
  0% { opacity: 0; transform: translate(0, 0) scale(.2); }
  15% { opacity: 1; transform: translate(0, 0) scale(1.1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(calc(var(--s) * .9)) rotate(20deg); }
}
.save-date .container { position: relative; z-index: 1; }

.save-date__head { text-align: center; }
.save-date__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 22px);
  margin-top: 18px;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 9vw, 6.4rem);
  font-weight: 300;
  line-height: .95;
  color: var(--cream);
  letter-spacing: .01em;
}
.save-date__title i {
  font-family: var(--serif);
  font-style: normal;
  font-size: .3em;
  color: var(--gold);
}
.save-date__date-line {
  margin-top: 12px;
  color: var(--gold);
  font-size: 9px;
  letter-spacing: .34em;
  text-transform: uppercase;
}
.save-date__lede {
  max-width: none;
  margin: 10px auto 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: clamp(15px, 1.7vw, 18px);
  font-style: italic;
  line-height: 1.7;
}
.save-date__lede span { margin: 0 .4em; color: var(--gold); }

.save-date__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
  max-width: 620px;
  margin: clamp(38px, 5vw, 58px) auto 0;
}

/* --- Almanac calendar --- */
.almanac {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid rgba(91, 62, 36, .38);
  background: linear-gradient(160deg, #FFFDF8, #F6F0E4);
  box-shadow: 0 40px 80px -46px rgba(26, 16, 11, .38);
}
.almanac::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px dotted rgba(140, 104, 58, .4);
  pointer-events: none;
}
.almanac > * { position: relative; z-index: 1; }
.almanac__head { text-align: center; }
.almanac__kicker {
  color: var(--gold);
  font-size: 7.5px;
  letter-spacing: .34em;
  text-transform: uppercase;
}
.almanac__month {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin-top: 7px;
  color: #241710;
}
.almanac__month span {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.almanac__month em {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1;
  color: var(--gold-deep);
}
.almanac__sub {
  margin-top: 1px;
  color: var(--gold-deep);
  font-size: 8px;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.almanac__grid { margin-top: 20px; }
.almanac__weekdays,
.almanac__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.almanac__weekdays {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(91, 62, 36, .28);
}
.almanac__weekdays span {
  color: #7A5B3A;
  font-size: 6.5px;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
}
.almanac__days { border-left: 1px dotted rgba(140, 104, 58, .32); }
.almanac__day {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-right: 1px dotted rgba(140, 104, 58, .32);
  border-bottom: 1px dotted rgba(140, 104, 58, .32);
  color: #4A3728;
  font-family: var(--serif);
  font-size: clamp(13px, 1.3vw, 16px);
}
.almanac__day.is-empty { background: rgba(140, 104, 58, .045); }
.almanac__day--wedding { z-index: 2; }

/* The lace heart is supplied art; it sits behind the date with no motion. */
.almanac__heart {
  position: absolute;
  width: 140%;
  height: 140%;
  object-fit: contain;
  transform: rotate(-4deg);
  transform-origin: 50% 58%;
  filter: drop-shadow(0 5px 8px rgba(90, 40, 30, .2)) drop-shadow(0 0 1px rgba(90, 40, 30, .35));
}

.almanac__num {
  position: relative;
  z-index: 1;
  color: #FFFFFF;
  font-size: 2.1em;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: lining-nums;
  text-shadow: 0 1px 4px rgba(110, 38, 34, .4);
}

/* Torn masking tape holding the calendar to the page. */
.almanac > .almanac__tape {
  position: absolute;
  z-index: 4;
  width: clamp(104px, 11vw, 148px);
  height: auto;
  opacity: .92;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(60, 40, 20, .18));
}
.almanac__tape--tl {
  top: -26px;
  left: -34px;
  transform: rotate(-37deg);
}
.almanac__tape--br {
  right: -34px;
  bottom: -26px;
  transform: rotate(-37deg);
}

.calendar.calendar--compact {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid rgba(91, 62, 36, .34);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(168, 135, 74, .13), transparent 62%),
    linear-gradient(168deg, #FCFAF4, #F2ECE0);
  box-shadow: 0 30px 60px -38px rgba(26, 16, 11, .45);
}
.calendar.calendar--compact::before {
  inset: 8px;
  border: 1px dotted rgba(140, 104, 58, .42);
}
.calendar--compact::after { opacity: .04; }
.calendar--compact .calendar__month {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  color: #2B1E15;
  font-size: clamp(30px, 3.1vw, 38px);
}
.calendar--compact .calendar__month span {
  margin-left: 0;
  color: var(--gold-deep);
  font-size: 8px;
  letter-spacing: .28em;
}
.calendar--compact .calendar__weekdays {
  margin-top: 16px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(91, 62, 36, .2);
}
.calendar--compact .calendar__weekdays span {
  color: #7A5B3A;
  font-size: 6.5px;
  letter-spacing: .14em;
}
.calendar--compact .calendar__days { margin-top: 6px; gap: 1px; }
.calendar--compact .calendar__day { color: #4A3728; font-size: clamp(10px, .9vw, 12px); }
.calendar--compact .calendar__heart { width: 196%; height: 196%; }
.calendar--compact .calendar__foot {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(91, 62, 36, .14);
  color: var(--gold-deep);
  font-size: 7.5px;
}

/* The wedding-week strip: only 3–9 January is shown. */
.calendar--compact .calendar__kicker {
  margin-bottom: 5px;
  color: var(--gold);
  font-size: 7px;
  letter-spacing: .32em;
  text-align: center;
  text-transform: uppercase;
}
.calendar.calendar--week {
  max-width: 380px;
  padding: clamp(20px, 2.2vw, 26px);
}
.calendar--week .calendar__month { font-size: clamp(32px, 3.4vw, 42px); }
.calendar--week .calendar__weekdays { margin-top: 14px; }
.calendar--week .calendar__days { margin-top: 10px; }
.calendar--week .calendar__day { font-size: clamp(14px, 1.4vw, 17px); }
.calendar--week .calendar__day--wedding > span {
  font-size: 1.9em;
  font-variant-numeric: lining-nums;
}
.calendar--week .calendar__heart { width: 158%; height: 158%; }
.calendar--week .calendar__foot { margin-top: 16px; }

.save-date .eyebrow { color: #7A5230; }

.save-date__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 22px;
}
.save-date__ics,
.save-date__maps {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  color: var(--gold-deep);
  font-size: 8.5px;
  letter-spacing: .2em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.save-date__ics:hover,
.save-date__maps:hover { color: var(--ink); border-bottom-color: currentColor; }
.save-date__maps svg { width: 12px; height: 12px; }

/* --- Calendar --- */
.calendar {
  position: relative;
  padding: clamp(26px, 3.4vw, 40px);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(168, 135, 74, .14), transparent 58%),
    linear-gradient(168deg, #F6F2E9, #EFEADF);
  color: var(--ink);
  box-shadow: 0 44px 86px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(91, 62, 36, .28);
}
.calendar::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(168, 135, 74, .35);
  pointer-events: none;
}
.calendar::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--lace-img);
  background-size: 82px 82px;
  opacity: .06;
  pointer-events: none;
}
.calendar > * { position: relative; z-index: 1; }
.calendar__month {
  font-family: var(--display);
  font-size: clamp(38px, 4.6vw, 56px);
  line-height: 1;
  text-align: center;
  color: #241710;
}
.calendar__month span {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .32em;
  color: var(--gold-deep);
}
.calendar__weekdays,
.calendar__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendar__weekdays {
  margin-top: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(168, 135, 74, .28);
}
.calendar__weekdays span {
  color: #5B3E24;
  font-size: 7.5px;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
}
.calendar__days { margin-top: 8px; row-gap: 2px; }
.calendar__day {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  font-family: var(--serif);
  font-size: clamp(12px, 1.4vw, 16px);
  color: #2B1E15;
}
.calendar__day.is-empty { opacity: 0; }
.calendar__day--wedding { color: #241710; font-weight: 600; z-index: 2; }
.calendar__day--wedding::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 135, 74, .24), transparent 70%);
  z-index: 0;
}
.calendar__day--wedding > span {
  position: relative;
  z-index: 1;
  font-size: 2.1em;
  font-weight: 500;
  line-height: 1;
  color: #7C302A;
}
.calendar__heart {
  position: absolute;
  width: 234%;
  height: 234%;
  color: #A2453C;
  fill: rgba(162, 69, 60, .07);
  stroke: currentColor;
  stroke-width: 1.4;
  opacity: .9;
  transform: rotate(-4deg);
}
.calendar__foot {
  margin-top: 18px;
  color: #5B3E24;
  font-size: 8px;
  letter-spacing: .28em;
  text-align: center;
  text-transform: uppercase;
}

/* --- Countdown --- */
.countdown-panel {
  padding: clamp(28px, 3.4vw, 42px) clamp(22px, 3vw, 36px);
  border: 1px solid rgba(91, 62, 36, .26);
  background:
    radial-gradient(100% 100% at 50% 0%, rgba(168, 135, 74, .16), transparent 65%),
    rgba(255, 253, 247, .58);
  box-shadow: 0 28px 60px -40px rgba(26, 16, 11, .45);
  text-align: center;
}
.countdown-panel__kicker {
  color: var(--gold);
  font-size: 8.5px;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(4px, 1vw, 14px);
  margin-top: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hairline-soft);
}
.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  flex: 1;
}
.countdown__value {
  font-family: var(--serif);
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.countdown__label {
  margin-top: 10px;
  color: var(--gold);
  font-size: 7.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.countdown__sep {
  width: 1px;
  height: 40px;
  margin-top: 6px;
  background: var(--hairline);
}
.countdown-panel__note {
  margin-top: 16px;
  color: rgba(247, 244, 236, .55);
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
}

/* --- Timeline --- */
.timeline {
  position: relative;
  display: grid;
  gap: clamp(24px, 3vw, 38px);
  max-width: 960px;
  margin: clamp(34px, 4vw, 48px) auto 0;
  padding: 18px 0 68px;
  list-style: none;
}
.timeline[data-reveal],
.timeline[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  bottom: 28px;
  width: 3px;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  background:
    radial-gradient(circle, rgba(140, 104, 58, .62) .8px, transparent 1.35px) center top / 3px 12px repeat-y,
    linear-gradient(180deg, transparent, rgba(140, 104, 58, .26) 5%, rgba(140, 104, 58, .26) 95%, transparent) center / 1px 100% no-repeat;
  transition: transform 1.25s var(--ease) .15s;
  pointer-events: none;
}
.timeline.is-visible::before { transform: translateX(-50%) scaleY(1); }
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  min-height: 96px;
}
.timeline__item:nth-child(1) { --delay: 60ms; }
.timeline__item:nth-child(2) { --delay: 150ms; }
.timeline__item:nth-child(3) { --delay: 240ms; }
.timeline__item:nth-child(4) { --delay: 330ms; }
.timeline__item:nth-child(5) { --delay: 420ms; }
.timeline__copy { grid-row: 1; }
.timeline__item--left .timeline__copy {
  grid-column: 1;
  justify-self: end;
  max-width: 390px;
  width: calc(100% - clamp(36px, 4.5vw, 66px));
  padding: 18px clamp(20px, 2vw, 28px) 19px 22px;
  border: 1px solid rgba(91, 62, 36, .13);
  border-right: 0;
  background: linear-gradient(90deg, rgba(255, 253, 247, .48), rgba(255, 253, 247, .14));
  text-align: right;
  transition: background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.timeline__item--right .timeline__copy {
  grid-column: 2;
  justify-self: start;
  max-width: 390px;
  width: calc(100% - clamp(36px, 4.5vw, 66px));
  padding: 18px 22px 19px clamp(20px, 2vw, 28px);
  border: 1px solid rgba(91, 62, 36, .13);
  border-left: 0;
  background: linear-gradient(270deg, rgba(255, 253, 247, .48), rgba(255, 253, 247, .14));
  text-align: left;
  transition: background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.timeline__item.is-visible .timeline__copy {
  border-color: rgba(91, 62, 36, .2);
  box-shadow: 0 14px 28px -24px rgba(26, 16, 11, .28);
}
@media (hover: hover) {
  .timeline__copy:hover {
    background-color: rgba(255, 253, 247, .62);
    box-shadow: 0 18px 32px -24px rgba(26, 16, 11, .3);
    transform: translateY(-2px);
  }
}
.timeline__meta {
  display: flex;
  align-items: center;
  gap: 9px;
}
.timeline__item--left .timeline__meta { justify-content: flex-end; }
.timeline__item--right .timeline__meta { justify-content: flex-start; }
.timeline__meta > span {
  color: rgba(138, 98, 54, .7);
  font-size: 7px;
  letter-spacing: .18em;
}
.timeline__meta > span::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  margin: 0 0 2px 8px;
  background: rgba(138, 98, 54, .35);
}
.timeline__copy time {
  display: inline-block;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.timeline__copy h3 {
  margin-top: 8px;
  color: var(--cream);
  font-family: var(--serif);
  font-size: clamp(25px, 2.4vw, 32px);
  font-weight: 400;
  line-height: 1.15;
}
.timeline__copy p {
  margin-top: 6px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.75;
}
.timeline__dot {
  position: absolute;
  left: 50%;
  top: 22px;
  z-index: 2;
  width: 13px;
  height: 13px;
  transform: translateX(-50%) scale(.3);
  opacity: 0;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--espresso-850);
  box-shadow: 0 0 0 6px rgba(168, 135, 74, .08), 0 2px 8px rgba(26, 16, 11, .08);
  transition: opacity .5s var(--ease) .25s, transform .6s var(--ease) .25s;
}
.timeline__item.is-visible .timeline__dot {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.timeline__end {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 3;
  width: 28px;
  height: 28px;
  transform: translateX(-50%);
  transform-origin: 50% 0;
  animation: charmSway 4.6s ease-in-out infinite;
}
.timeline__end svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: #B27A6C;
  filter: drop-shadow(0 5px 7px rgba(90, 40, 30, .25));
}
@keyframes charmSway {
  0%, 100% { transform: translateX(-50%) rotate(-6deg); }
  50% { transform: translateX(-50%) rotate(4deg); }
}

/* --- Program sequence --- */
.program {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(168, 135, 74, .08), transparent 62%),
    var(--espresso-850);
}
.program__head { text-align: center; }
.program__head .eyebrow { color: var(--gold); }
.program__head .section-title {
  margin-top: 16px;
  font-size: clamp(2.5rem, 5vw, 4.4rem);
  letter-spacing: -.015em;
}
.program__lede {
  max-width: 44ch;
  margin: 16px auto 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: clamp(15px, 1.7vw, 18px);
 
  line-height: 1.75;
}
.program .timeline { margin-top: clamp(38px, 4.4vw, 54px); }

/* Program sequence — centred order of the day on a single axis. The lace
   from the calendar heart enters at the top of this axis. */
.timeline {
  max-width: 640px;
  margin: clamp(34px, 4vw, 52px) auto 0;
  padding: 10px 0 84px;
  gap: 0;
}
.timeline::before {
  top: 5px;
  bottom: 30px;
  width: 1px;
  background:
    radial-gradient(circle, rgba(140, 104, 58, .62) .8px, transparent 1.35px) center top / 3px 12px repeat-y,
    linear-gradient(180deg, rgba(140, 104, 58, .12), rgba(140, 104, 58, .34) 8%, rgba(140, 104, 58, .34) 92%, rgba(140, 104, 58, .12));
}
.timeline__item {
  display: block;
  min-height: 0;
  padding: 0 0 clamp(50px, 6vw, 72px);
  text-align: center;
}
.timeline__item:last-of-type { padding-bottom: 0; }
.timeline__copy,
.timeline__item--left .timeline__copy,
.timeline__item--right .timeline__copy {
  grid-column: auto;
  justify-self: auto;
  width: auto;
  max-width: none;
  margin: 0 auto;
  padding: clamp(40px, 4vw, 48px) clamp(12px, 2vw, 24px) 0;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: center;
  transition: none;
}
.timeline__copy:hover {
  background: none;
  box-shadow: none;
  transform: none;
}
.timeline__copy time {
  display: block;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: .34em;
}
.timeline__copy h3 {
  margin-top: 14px;
  font-size: clamp(30px, 3.6vw, 46px);
  letter-spacing: -.01em;
}
.timeline__copy p {
  max-width: 34ch;
  margin: 14px auto 0;
  font-size: 15px;
  line-height: 1.75;
}
.timeline__dot {
  top: 0;
  left: 50%;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-color: rgba(168, 135, 74, .8);
  background: var(--espresso-850);
  box-shadow: 0 0 0 7px rgba(168, 135, 74, .07), 0 4px 12px rgba(0, 0, 0, .3);
}
.timeline__dot > span {
  color: var(--gold);
  font-family: var(--sans);
  font-size: 8.5px;
  letter-spacing: .14em;
}
.timeline__item.is-visible .timeline__dot {
  transform: translateX(-50%) scale(1);
}
.timeline__end { bottom: 0; }
@media (max-width: 820px) {
  .timeline { padding-bottom: 70px; }
  .timeline__copy h3 { font-size: clamp(28px, 8vw, 36px); }
  .timeline__copy p { font-size: 14px; }
}

/* Program sequence — hanging paper tags. The centre line is the string the
   tags hang from; the lace from the calendar heart meets it at the top. */
.timeline {
  max-width: 480px;
  padding: 0 0 96px;
}
.timeline::before {
  top: 0;
  bottom: 44px;
  width: 1px;
  background: linear-gradient(180deg, rgba(201, 169, 110, .08), rgba(201, 169, 110, .6) 8%, rgba(201, 169, 110, .6) 92%, rgba(201, 169, 110, .08));
}
.timeline__item {
  padding: 0 0 56px;
}
.timeline__copy,
.timeline__item--left .timeline__copy,
.timeline__item--right .timeline__copy {
  position: relative;
  width: min(100%, 420px);
  margin: 26px auto 0;
  padding: 40px 32px 30px;
  border-radius: 3px;
  background: linear-gradient(172deg, #fffdf6 0%, #f4eddd 100%);
  box-shadow: 0 22px 34px -22px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .8);
  text-align: center;
  transition: none;
}
.timeline__item:nth-child(odd) .timeline__copy { transform: rotate(-1.4deg); }
.timeline__item:nth-child(even) .timeline__copy { transform: rotate(1.1deg); }
.timeline__copy:hover {
  background: linear-gradient(172deg, #fffdf6 0%, #f4eddd 100%);
  box-shadow: 0 22px 34px -22px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .8);
  transform: none;
}
.timeline__copy time {
  display: block;
  color: #8a6236;
  font-family: var(--serif);
  font-size: 19px;
  font-style: italic;
  letter-spacing: .02em;
  text-transform: none;
}
.timeline__copy h3 {
  margin-top: 6px;
  color: #2b1d12;
  font-size: clamp(30px, 3.4vw, 40px);
}
.timeline__copy p {
  margin: 10px auto 0;
  max-width: 30ch;
  color: #6b5646;
  font-size: 14.5px;
}
.timeline__dot {
  top: 24px;
  width: 16px;
  height: 16px;
  border: 1px solid #a8874a;
  background: radial-gradient(circle at 40% 38%, #fffdf6 0 28%, #d7c29a 70%, #a8874a 100%);
  box-shadow: 0 0 0 5px rgba(201, 169, 110, .12), 0 3px 6px rgba(0, 0, 0, .35);
}
.timeline__dot > span { display: none; }
.timeline__item.is-visible .timeline__dot { transform: translateX(-50%) scale(1); }
.timeline__end { bottom: 0; }
@media (max-width: 820px) {
  .timeline__copy { width: 100%; padding: 34px 24px 26px; }
}

/* Program sequence — tags alternate left and right of the centre string,
   each tied to it by a short branch. */
.timeline {
  max-width: 800px;
}
.timeline__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  padding: 0 0 64px;
  text-align: left;
}
.timeline__copy,
.timeline__item:nth-child(odd) .timeline__copy,
.timeline__item:nth-child(even) .timeline__copy {
  width: min(100%, 330px);
  margin: 40px 0 0;
  padding: 30px 30px 26px;
  transform: none;
}
.timeline__item:nth-child(odd) .timeline__copy {
  grid-column: 1;
  justify-self: end;
  margin-right: 44px;
  text-align: right;
}
.timeline__item:nth-child(even) .timeline__copy {
  grid-column: 2;
  justify-self: start;
  margin-left: 44px;
  text-align: left;
}
.timeline__copy::before {
  content: "";
  position: absolute;
  top: -8px;
  width: 44px;
  height: 1px;
  background: rgba(201, 169, 110, .55);
}
.timeline__item:nth-child(odd) .timeline__copy::before { right: -44px; }
.timeline__item:nth-child(even) .timeline__copy::before { left: -44px; }
.timeline__copy:hover { transform: none; }
.timeline__dot { top: 24px; }

/* Program sequence — detail layer: frames, texture, motion. */
.timeline__copy {
  background:
    radial-gradient(circle at 1px 1px, rgba(138, 98, 54, .09) 1px, transparent 1.4px) 0 0 / 14px 14px,
    linear-gradient(172deg, #fffdf6 0%, #f4eddd 100%);
  outline: 1px solid rgba(201, 169, 110, .34);
  outline-offset: 6px;
  transform-origin: 50% 0;
}
.timeline__copy::before {
  transform: scaleX(0);
  transition: transform .9s var(--ease) .5s;
}
.timeline__item:nth-child(odd) .timeline__copy::before { transform-origin: 100% 50%; }
.timeline__item:nth-child(even) .timeline__copy::before { transform-origin: 0 50%; }
.timeline__item.is-visible .timeline__copy::before { transform: scaleX(1); }
.timeline__copy h3::after {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  margin: 14px 0 0;
  background: linear-gradient(90deg, transparent, #a8874a, transparent);
}
.timeline__item:nth-child(odd) .timeline__copy h3::after { margin-left: auto; }
.timeline__item:nth-child(even) .timeline__copy h3::after { margin-right: auto; }
.timeline__item.is-visible .timeline__copy {
  animation: tagSwing 1.7s var(--ease) .3s both;
}
.timeline__item:nth-child(even).is-visible .timeline__copy {
  animation-name: tagSwingRight;
}
@keyframes tagSwing {
  0% { transform: rotate(-6deg); }
  35% { transform: rotate(3.5deg); }
  60% { transform: rotate(-1.5deg); }
  80% { transform: rotate(.8deg); }
  100% { transform: rotate(0); }
}
@keyframes tagSwingRight {
  0% { transform: rotate(6deg); }
  35% { transform: rotate(-3.5deg); }
  60% { transform: rotate(1.5deg); }
  80% { transform: rotate(-.8deg); }
  100% { transform: rotate(0); }
}
.timeline__item.is-visible .timeline__dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(201, 169, 110, .6);
  border-radius: 50%;
  animation: dotRing 3.2s ease-out 1.2s infinite;
}
@keyframes dotRing {
  0% { transform: scale(.6); opacity: .8; }
  70%, 100% { transform: scale(2.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .timeline__item.is-visible .timeline__copy,
  .timeline__item:nth-child(even).is-visible .timeline__copy { animation: none; }
  .timeline__item.is-visible .timeline__dot::after { animation: none; opacity: 0; }
  .timeline__copy::before { transition: none; transform: scaleX(1); }
}

/* Program sequence — ticket stubs, alternating left and right of the string. */
.timeline { counter-reset: ev; }
.timeline__item { counter-increment: ev; }
.timeline__copy,
.timeline__item:nth-child(odd) .timeline__copy,
.timeline__item:nth-child(even) .timeline__copy {
  margin-top: 40px;
  padding: 32px 36px 30px;
  border: 1px solid rgba(201, 169, 110, .28);
  border-radius: 4px;
  background: linear-gradient(135deg, #3b2b1e 0%, #281c13 100%);
  box-shadow: 0 26px 40px -28px rgba(0, 0, 0, .75);
  outline: 0;
}
.timeline__item:nth-child(odd) .timeline__copy { border-right: 1px dashed rgba(201, 169, 110, .5); }
.timeline__item:nth-child(even) .timeline__copy { border-left: 1px dashed rgba(201, 169, 110, .5); }
.timeline__copy::after {
  content: counter(ev, decimal-leading-zero);
  position: absolute;
  top: 6px;
  font-family: var(--serif);
  font-size: 84px;
  line-height: 1;
  color: rgba(201, 169, 110, .12);
  pointer-events: none;
}
.timeline__item:nth-child(odd) .timeline__copy::after { right: 18px; }
.timeline__item:nth-child(even) .timeline__copy::after { left: 18px; }
.timeline__copy > * { position: relative; z-index: 1; }
.timeline__copy::before { background: #c9a96e; }
.timeline__copy time {
  color: #d9b777;
  font-size: 18px;
}
.timeline__copy h3 {
  margin-top: 6px;
  color: #f7f0e2;
}
.timeline__copy h3::after { display: none; }
.timeline__copy p { color: #c9b79c; }
.timeline__item.is-visible .timeline__copy {
  animation: ticketIn 1s var(--ease) .25s both;
}
.timeline__item:nth-child(even).is-visible .timeline__copy {
  animation-name: ticketInRight;
}
@keyframes ticketIn {
  0% { opacity: 0; transform: translateX(-22px); }
  100% { opacity: 1; transform: none; }
}
@keyframes ticketInRight {
  0% { opacity: 0; transform: translateX(22px); }
  100% { opacity: 1; transform: none; }
}

/* Program sequence — aesthetic centre line and textured cards. */
.timeline::before {
  top: 0;
  bottom: 44px;
  width: 13px;
  background:
    radial-gradient(circle at 50% 50%, #e2c892 0 1.6px, rgba(226, 200, 146, .35) 2.4px, transparent 3.2px) center 32px / 13px 64px repeat-y,
    linear-gradient(180deg, transparent, rgba(201, 169, 110, .55) 6%, rgba(201, 169, 110, .55) 94%, transparent) center / 1px 100% no-repeat;
}
.timeline__copy,
.timeline__item:nth-child(odd) .timeline__copy,
.timeline__item:nth-child(even) .timeline__copy {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(201, 169, 110, .14), transparent 55%),
    repeating-linear-gradient(45deg, rgba(201, 169, 110, .045) 0 1px, transparent 1px 8px),
    linear-gradient(135deg, #3d2d1f 0%, #271b12 100%);
  box-shadow: 0 26px 40px -28px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 236, 200, .08);
  outline: 1px solid rgba(201, 169, 110, .14);
  outline-offset: -8px;
}

/* Program sequence — editorial medallions. Each event is a numbered medallion
   on the centre line with its text set beside it, alternating left and right. */
.timeline::before {
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(201, 169, 110, .6) 8%, rgba(201, 169, 110, .6) 92%, transparent);
}
.timeline__item {
  min-height: 110px;
  padding: 0 0 clamp(64px, 7vw, 92px);
  align-items: start;
}
.timeline__copy,
.timeline__item:nth-child(odd) .timeline__copy,
.timeline__item:nth-child(even) .timeline__copy {
  margin: 0;
  padding: 2px 0 0;
  width: min(100%, 300px);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
  animation: none;
}
.timeline__item:nth-child(odd) .timeline__copy { margin-right: 60px; }
.timeline__item:nth-child(even) .timeline__copy { margin-left: 60px; }
.timeline__copy::after { content: none; }
.timeline__copy::before {
  top: 30px;
  width: 36px;
  height: 1px;
  background: rgba(201, 169, 110, .5);
}
.timeline__item:nth-child(odd) .timeline__copy::before { right: -60px; }
.timeline__item:nth-child(even) .timeline__copy::before { left: -60px; }
.timeline__copy time {
  color: #c9a96e;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .34em;
  text-transform: uppercase;
}
.timeline__copy h3 {
  margin-top: 12px;
  color: #f7f0e2;
  font-size: clamp(32px, 3.6vw, 44px);
  font-style: italic;
  line-height: 1.05;
}
.timeline__copy p {
  margin-top: 12px;
  color: #b9a88f;
  font-size: 14.5px;
  line-height: 1.8;
}
.timeline__item:nth-child(odd) .timeline__copy h3,
.timeline__item:nth-child(odd) .timeline__copy time,
.timeline__item:nth-child(odd) .timeline__copy p { text-align: right; }
.timeline__item:nth-child(odd) .timeline__copy { text-align: right; }
.timeline__item:nth-child(even) .timeline__copy { text-align: left; }
.timeline__item:nth-child(odd) .timeline__copy h3::after,
.timeline__item:nth-child(even) .timeline__copy h3::after { display: none; }
.timeline__dot {
  top: 0;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(201, 169, 110, .7);
  background: radial-gradient(circle at 50% 40%, #f8f1e3 0%, #e9dcc2 100%);
  box-shadow: 0 0 0 6px rgba(201, 169, 110, .1), 0 10px 24px rgba(0, 0, 0, .35);
}
.timeline__dot > span { display: none; }
.timeline__dot::before {
  content: counter(ev, decimal-leading-zero);
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
  color: #4a3420;
}
@media (max-width: 820px) {
  .timeline__item { padding-left: 44px; }
  .timeline__copy,
  .timeline__item:nth-child(odd) .timeline__copy,
  .timeline__item:nth-child(even) .timeline__copy {
    width: 100%;
    margin: 0;
    padding: 4px 0 0;
    text-align: left;
  }
  .timeline__item:nth-child(odd) .timeline__copy h3,
  .timeline__item:nth-child(odd) .timeline__copy time,
  .timeline__item:nth-child(odd) .timeline__copy p,
  .timeline__item:nth-child(odd) .timeline__copy,
  .timeline__item:nth-child(even) .timeline__copy { text-align: left; }
  .timeline__copy::before { display: none; }
  .timeline__dot { left: 13px; width: 46px; height: 46px; }
  .timeline__dot::before { font-size: 16px; }
  .timeline__end { left: 13px; }
}

/* Program sequence — botanical. Deep forest ground, sage leaf-wreath
   medallions on the centre line, and sprig-toned text. */
.program {
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(143, 160, 130, .14), transparent 62%),
    #1d2820;
}
.timeline::before {
  background: linear-gradient(180deg, transparent, rgba(201, 169, 110, .55) 8%, rgba(201, 169, 110, .55) 92%, transparent);
}
.timeline__copy time {
  color: #b7c49f;
}
.timeline__copy h3 {
  color: #f1ead8;
}
.timeline__copy p {
  color: #a9b59a;
}
.timeline__copy::before {
  background: rgba(143, 160, 130, .6);
}
.timeline__dot {
  width: 64px;
  height: 64px;
  border: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='24' fill='none' stroke='%23c9a96e' stroke-opacity='.5' stroke-width='.7'/%3E%3Cg fill='%238fa082' fill-opacity='.9'%3E%3Cellipse cx='30' cy='8' rx='2.6' ry='5' transform='rotate(0 30 30)'/%3E%3Cellipse cx='30' cy='8' rx='2.6' ry='5' transform='rotate(36 30 30)'/%3E%3Cellipse cx='30' cy='8' rx='2.6' ry='5' transform='rotate(72 30 30)'/%3E%3Cellipse cx='30' cy='8' rx='2.6' ry='5' transform='rotate(108 30 30)'/%3E%3Cellipse cx='30' cy='8' rx='2.6' ry='5' transform='rotate(144 30 30)'/%3E%3Cellipse cx='30' cy='8' rx='2.6' ry='5' transform='rotate(180 30 30)'/%3E%3Cellipse cx='30' cy='8' rx='2.6' ry='5' transform='rotate(216 30 30)'/%3E%3Cellipse cx='30' cy='8' rx='2.6' ry='5' transform='rotate(252 30 30)'/%3E%3Cellipse cx='30' cy='8' rx='2.6' ry='5' transform='rotate(288 30 30)'/%3E%3Cellipse cx='30' cy='8' rx='2.6' ry='5' transform='rotate(324 30 30)'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat,
    radial-gradient(circle, #2a382d 0%, #1f2b22 100%);
  box-shadow: 0 0 0 6px rgba(143, 160, 130, .1), 0 12px 26px rgba(0, 0, 0, .4);
}
.timeline__dot::before {
  color: #e9dcc2;
  font-size: 19px;
}
.timeline__item.is-visible .timeline__dot::after {
  border-color: rgba(143, 160, 130, .6);
}
@media (max-width: 820px) {
  .timeline__dot { width: 50px; height: 50px; }
}

/* Program sequence — vintage tickets on dark coffee. Aged paper tickets hang
   from the centre line; rust stamps mark each event. */
.program {
  background: #f5efe3;
    padding-block: clamp(76px, 10vw, 136px);
}
.timeline::before,
.timeline.is-visible::before {
  transform: translateX(-50%) scaleY(var(--line, 0));
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.timeline__item .timeline__copy,
.timeline__item .timeline__art {
  opacity: 0;
  transition: opacity .9s var(--ease);
}
.timeline__item.is-visible .timeline__copy,
.timeline__item.is-visible .timeline__art {
  opacity: 1;
}
.program .section-title { color: #3a2a1d; }
.program .section-title em { color: #7a5230; }
.program__lede { color: #6b5544; }
.timeline::before {
  background: linear-gradient(180deg, transparent, rgba(222, 196, 146, .5) 8%, rgba(222, 196, 146, .5) 92%, transparent);
}
.timeline__copy,
.timeline__item:nth-child(odd) .timeline__copy,
.timeline__item:nth-child(even) .timeline__copy {
  margin-top: 14px;
  padding: 28px 30px 26px;
  background:
    radial-gradient(circle at 1px 1px, rgba(122, 74, 50, .10) 1px, transparent 1.4px) 0 0 / 9px 9px,
    linear-gradient(160deg, #f3e8cf 0%, #e6d6b2 100%);
  border: 1px solid #c4a978;
  border-radius: 3px;
  box-shadow: 0 16px 28px -16px rgba(0, 0, 0, .65), inset 0 0 40px rgba(122, 74, 50, .12);
  outline: 1px dashed rgba(122, 74, 50, .4);
  outline-offset: -9px;
}
.timeline__copy::after {
  content: counter(ev, decimal-leading-zero);
  display: block;
  position: absolute;
  top: 4px;
  font-family: var(--serif);
  font-size: 80px;
  line-height: 1;
  color: rgba(122, 74, 50, .09);
  pointer-events: none;
}
.timeline__item:nth-child(odd) .timeline__copy::after { right: 14px; }
.timeline__item:nth-child(even) .timeline__copy::after { left: 14px; }
.timeline__copy::before {
  top: 40px;
  background: rgba(196, 169, 120, .7);
}
.timeline__copy time {
  color: #8e4029;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.timeline__copy h3 {
  color: #2b1b10;
  font-style: italic;
}
.timeline__copy p {
  color: #5b4433;
}
.timeline__dot {
  width: 60px;
  height: 60px;
  border: 0;
  background: #efe4c9;
  outline: 1px dashed rgba(142, 64, 41, .75);
  outline-offset: 4px;
  box-shadow: 0 0 0 3px #efe4c9, 0 10px 22px rgba(0, 0, 0, .45);
}
.timeline__dot::before {
  color: #8e4029;
  font-size: 20px;
}
.timeline__item.is-visible .timeline__dot::after {
  border-color: rgba(142, 64, 41, .55);
}
@media (max-width: 820px) {
  .timeline__dot { width: 50px; height: 50px; }
  .timeline__copy::after { font-size: 60px; }
}

/* Program sequence — off-white paper panel on coffee. Pink heart markers on a
   centre line, serif times, and line-art illustrations opposite each text block. */
.timeline {
  max-width: 880px;
  margin-top: clamp(40px, 5vw, 60px);
  padding: 56px clamp(24px, 4vw, 56px) 120px;
}
.timeline::before {
  top: 0;
  bottom: 96px;
  width: 3px;
  background:
    radial-gradient(circle, rgba(140, 104, 58, .62) 1px, transparent 1.6px) center top / 3px 12px repeat-y,
    linear-gradient(180deg, transparent, rgba(140, 104, 58, .26) 5%, rgba(140, 104, 58, .26) 95%, transparent) center / 1px 100% no-repeat;
}
.timeline__item {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 170px;
  padding: 0 0 clamp(44px, 5vw, 64px);
}
.timeline__dot {
  top: 0;
  width: 26px;
  height: 24px;
  border: 0;
  outline: 0;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath fill='%23B27A6C' d='M50 84C22 64 8 48 8 32 8 18 19 8 32 8c7 0 13 3 18 9 5-6 11-9 18-9 13 0 24 10 24 24 0 16-14 32-42 52Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  box-shadow: none;
}
.timeline__dot::before,
.timeline__dot::after { content: none; display: none; }
.timeline__item.is-visible .timeline__dot { transform: translateX(-50%) scale(1); }
.timeline__item:nth-child(odd) .timeline__dot,
.timeline__item:nth-child(even) .timeline__dot { top: 50%; margin-top: -12px; }
.timeline__copy,
.timeline__item:nth-child(odd) .timeline__copy,
.timeline__item:nth-child(even) .timeline__copy {
  margin: 0;
  padding: 0;
  width: 100%;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
}
.timeline__item:nth-child(odd) .timeline__copy { padding-right: 112px; text-align: center; }
.timeline__item:nth-child(even) .timeline__copy { padding-left: 112px; text-align: center; }
.timeline__copy::before,
.timeline__copy::after { content: none; display: none; }
.timeline__copy time {
  display: block;
  color: #3a2a1d;
  font-family: var(--serif);
  font-size: clamp(32px, 3.4vw, 42px);
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}
.timeline__copy time::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin: 14px auto 0;
  background: #b08d57;
}
.timeline__copy h3 {
  margin-top: 16px;
  color: #3a2a1d;
  font-family: var(--sans);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.timeline__copy p {
  max-width: 28ch;
  margin: 10px auto 0;
  color: #6b5544;
  font-size: 14px;
  line-height: 1.7;
}
.timeline__item:nth-child(odd) .timeline__copy p { margin-left: auto; }
.timeline__art {
  display: block;
  width: clamp(130px, 15vw, 170px);
  height: auto;
}
.timeline__item:nth-child(odd) .timeline__art {
  grid-column: 2;
  justify-self: start;
  margin-left: 64px;
}
.timeline__item:nth-child(even) .timeline__art {
  grid-column: 1;
  justify-self: end;
  margin-right: 64px;
}
.timeline__end { bottom: 0; }
@media (max-width: 820px) {
  .timeline { max-width: none; padding: 56px 18px 110px; }
  .timeline::before { left: 31px; }
  .timeline__item { grid-template-columns: 1fr; padding: 0 0 52px 0; min-height: 0; }
  .timeline__dot { left: 13px; top: 6px; width: 22px; height: 20px; }
  .timeline__item:nth-child(odd) .timeline__dot,
  .timeline__item:nth-child(even) .timeline__dot { top: 6px; margin-top: 0; }
  .timeline__item:nth-child(odd) .timeline__copy,
  .timeline__item:nth-child(even) .timeline__copy { padding: 0 0 0 40px; text-align: left; }
  .timeline__item:nth-child(odd) .timeline__copy p,
  .timeline__item:nth-child(odd) .timeline__copy time::after { margin-left: 0; }
  .timeline__item:nth-child(odd) .timeline__copy { text-align: left; }
  .timeline__copy time { font-size: 32px; }
  .timeline__copy { grid-row: auto; }
  .timeline__art {
    display: block;
    width: 132px;
    margin: 20px 0 0 40px;
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }
  .timeline__end { left: 26px; }
}
@media (max-width: 820px) {
  .timeline { max-width: 560px; }
  .timeline__copy::before { display: none; }
}

/* --- Place card --- */
.place-card {
  position: relative;
  max-width: 780px;
  margin: clamp(56px, 8vw, 92px) auto 0;
  padding: clamp(30px, 4.4vw, 52px);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(168, 135, 74, .16), transparent 58%),
    linear-gradient(168deg, #F6F2E9, #EFEADF);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 44px 86px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(91, 62, 36, .28);
}
.place-card::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(168, 135, 74, .35);
  pointer-events: none;
}
.place-card > :not(.ornate-corner) { position: relative; z-index: 1; }
.place-card .ornate-corner { position: absolute; }
.place-card .eyebrow { color: var(--gold-deep); }
.place-card__media {
  position: relative;
  margin: 20px auto 24px;
  max-width: 620px;
  padding: 8px;
  border: 1px solid rgba(168, 135, 74, .4);
  background: rgba(255, 250, 240, .5);
}
.place-card h3 {
  font-family: var(--display);
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 400;
  line-height: 1.1;
  color: #241710;
}
.place-card__address {
  margin-top: 6px;
  color: #5B3E24;
  font-size: 8.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.place-card .btn { margin-top: 22px; }

/* ==========================================================================
   8. Story + venue
   ========================================================================== */
.story {
  background: var(--espresso-850);
  border-top: 1px solid var(--hairline-soft);
  border-bottom: 1px solid var(--hairline-soft);
}
.branch--story { color: var(--gold); opacity: .08; }
.story__figure {
  background: var(--espresso-700);
  box-shadow: var(--shadow-dark);
}
.story__figure--small { border-color: var(--espresso-850); }
.story__figure img { filter: saturate(.75) sepia(.14) contrast(1.02); }
.story__seal {
  background: var(--cream);
  border-color: var(--gold-deep);
  color: var(--gold-deep);
  box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .8);
}
.story__seal::before { border-color: rgba(168, 135, 74, .55); }
.story__seal em { color: var(--gold-deep); }
.story__body p { color: var(--muted); }
.story__signature { color: var(--gold-light); }
.milestones { border-top-color: var(--hairline); }
.milestones li { border-bottom-color: var(--hairline-soft); }
.milestones__year { color: var(--gold-light); }
.milestones strong { color: var(--cream); }
.milestones p { color: var(--muted); }

.venue {
  position: relative;
  background:
    radial-gradient(80% 60% at 12% 20%, rgba(168, 135, 74, .08), transparent 60%),
    var(--espresso-900);
}
/* The same hair-string frame as the dress code. */
.venue::before {
  content: "";
  position: absolute;
  inset: clamp(14px, 2vw, 24px);
  border: 1px solid rgba(226, 199, 158, .18);
  pointer-events: none;
}
.venue__media img {
  filter: saturate(.72) sepia(.16) brightness(.88) contrast(1.02);
  box-shadow: var(--shadow-dark);
}
.venue__media::after { border-color: rgba(247, 244, 236, .22); }
.venue__stamp {
  background: var(--cream);
  border-color: var(--gold-deep);
  box-shadow: 0 22px 44px -24px rgba(0, 0, 0, .8);
}
.venue__stamp-top { color: var(--gold-deep); }
.venue__stamp-date { color: var(--espresso-800); }
.venue__stamp-place { color: var(--gold-deep); }
.venue__address { color: var(--muted); }
.venue__address svg { color: var(--gold); }
.venue__text { color: var(--muted); }
.travel { border-top-color: var(--hairline); }
.travel__item { border-bottom-color: var(--hairline-soft); }
.travel__icon { border-color: var(--hairline); color: var(--gold); }
.travel__item h3 { color: var(--cream); letter-spacing: .22em; }
.travel__item p { color: var(--muted); }

/* ==========================================================================
   9. Gallery
   ========================================================================== */
.gallery {
  position: relative;
  background: linear-gradient(180deg, #251a12 0%, #1b120c 52%, #1f150e 100%);
  border-top: 1px solid var(--hairline-soft);
  overflow: hidden;
}
.gallery .container { position: relative; z-index: 1; }
.gallery .section-head--light .eyebrow { color: #C9A96E; }
.gallery .section-head--light .section-title { color: #F7F4EC; }
.gallery .section-head--light .section-title em { color: #D8BE8E; }
.gallery .section-head--light .section-lede { color: rgba(247, 244, 236, .62); }

/* the same hairline string as the landing page and dress code */
.gallery__frame {
  position: absolute;
  z-index: 0;
  top: clamp(18px, 2.4vw, 34px);
  bottom: clamp(18px, 2.4vw, 34px);
  left: clamp(18px, 2.4vw, 34px);
  right: clamp(18px, 2.4vw, 34px);
  border: 1px solid rgba(226, 199, 158, .18);
  pointer-events: none;
}

/* ---------- the salon wall ---------- */
.salon {
  position: relative;
  width: 100%;
  margin: clamp(34px, 5vw, 62px) auto 0;
  aspect-ratio: 1300 / 650;
}
@media (min-width: 901px) {
  .salon { width: 106%; margin-left: -3%; }
}
.salon::before {
  content: "";
  position: absolute;
  inset: -6% -2%;
  z-index: 0;
  background:
    radial-gradient(46% 52% at 50% 38%, rgba(255, 214, 150, .09), transparent 72%),
    radial-gradient(70% 70% at 50% 44%, rgba(255, 214, 150, .05), transparent 78%);
  pointer-events: none;
}
.salon__frame {
  --rot: 0deg;
  position: absolute;
  left: calc(var(--x) * 100% / 1300);
  top: calc(var(--y) * 100% / 650);
  width: calc(var(--w) * 100% / 1300);
  height: calc(var(--h) * 100% / 650);
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  transform: rotate(var(--rot));
  cursor: zoom-in;
  opacity: 1;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .45s ease;
}
.salon__mat {
  position: absolute;
  left: var(--hl);
  top: var(--ht);
  width: var(--hw);
  height: var(--hh);
  display: block;
  overflow: hidden;
  background: #0B0705;
  box-shadow: inset 0 0 0 1px rgba(34, 20, 10, .55);
}
.salon__frame--oval .salon__mat { border-radius: 50%; }
.salon__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(.3) saturate(.78) contrast(1.05) brightness(.88);
  transition: filter .55s ease;
}
.salon__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  filter:
    drop-shadow(0 3px 4px rgba(0, 0, 0, .55))
    drop-shadow(0 18px 22px rgba(0, 0, 0, .5))
    drop-shadow(0 38px 46px rgba(0, 0, 0, .3));
}
.salon:has(.salon__frame:hover) .salon__frame:not(:hover),
.salon:has(.salon__frame:focus-visible) .salon__frame:not(:focus-visible) { opacity: .42; }
.salon__frame:hover,
.salon__frame:focus-visible {
  z-index: 6;
  transform: rotate(var(--rot)) translateY(-10px) scale(1.04);
}
.salon__frame:hover .salon__photo,
.salon__frame:focus-visible .salon__photo {
  filter: sepia(.22) saturate(.88) contrast(1.05) brightness(1);
}
.salon__frame:focus-visible { outline: 2px solid rgba(216, 188, 140, .9); outline-offset: 6px; }
.salon__hint {
  margin: clamp(22px, 3vw, 36px) 0 0;
  text-align: center;
  font-size: 8.5px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(247, 244, 236, .3);
}
.salon__hint b { font-weight: 400; color: rgba(216, 188, 140, .8); }

@media (max-width: 900px) {
  .salon {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(20px, 5vw, 34px) clamp(16px, 4vw, 28px);
    aspect-ratio: auto;
    margin-top: clamp(28px, 6vw, 46px);
    padding-inline: clamp(8px, 3vw, 18px);
  }
  .salon::before { display: none; }
  .salon__frame {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: var(--w) / var(--h);
  }
  .salon__frame:nth-child(even) { margin-top: clamp(14px, 4vw, 30px); }
  .salon:has(.salon__frame:hover) .salon__frame:not(:hover),
  .salon:has(.salon__frame:focus-visible) .salon__frame:not(:focus-visible) { opacity: 1; }
}
@media (max-width: 480px) {
  .salon { gap: 18px 12px; }
  .salon__frame:nth-child(even) { margin-top: 14px; }
}

/* ==========================================================================
   10. Entourage
   ========================================================================== */
.entourage {
  position: relative;
  overflow: hidden;
  background: #f5efe3;
  color: var(--ink);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid rgba(91, 62, 36, .2);
}
.entourage__watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(240px, 42vw, 520px);
  pointer-events: none;
  user-select: none;
}
.entourage__watermark img {
  display: block;
  width: 100%;
  height: auto;
  opacity: .07;
  mix-blend-mode: multiply;
  filter: sepia(.45) saturate(.65);
}
.entourage .container {
  position: relative;
  z-index: 1;
  max-width: 1128px;
}

.entourage__head {
  text-align: center;
  max-width: 660px;
  margin: 0 auto clamp(44px, 5vw, 66px);
}
.entourage__head .eyebrow { color: var(--gold-deep); }
.entourage__title {
  margin-top: 14px;
  font-family: var(--script);
  font-size: clamp(56px, 8.4vw, 96px);
  font-weight: 400;
  line-height: .95;
  color: #241710;
}
.entourage__lede {
  margin-top: 14px;
  color: #40301F;
  font-family: var(--serif);
  font-size: clamp(15px, 1.7vw, 18px);
 
  line-height: 1.7;
}
.entourage__flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
  color: #A8874A;
}
.entourage__flourish span {
  height: 1px;
  width: min(150px, 20vw);
  background: linear-gradient(90deg, transparent, rgba(168, 135, 74, .75));
}
.entourage__flourish span:last-child {
  background: linear-gradient(90deg, rgba(168, 135, 74, .75), transparent);
}
.entourage__flourish i { font-style: normal; font-size: 7px; }

.entourage__body {
  max-width: 1000px;
  margin: 0 auto;
}

.party-label {
  margin: 0;
  color: #8A6236;
  font-family: var(--script);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: .1em;
 
}

.party-parents {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  text-align: center;
}
.party-parents > div { padding: 0 32px; }
.party-parents::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(168, 135, 74, .5) 18%, rgba(168, 135, 74, .5) 82%, transparent);
}
.party-parent__names {
  margin: 10px 0 0;
  color: #2A1A12;
  font-family: var(--serif);
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.9;
}

.party-group { margin-top: clamp(44px, 5vw, 58px); }
.party-group__title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  color: #8A6236;
  font-family: var(--script);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: .1em;
 
}
.party-group__title::before,
.party-group__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168, 135, 74, .6));
}
.party-group__title::after {
  background: linear-gradient(90deg, rgba(168, 135, 74, .6), transparent);
}

.party-sponsors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 60px;
  max-width: 640px;
  margin: 22px auto 0;
}
.party-sponsors__list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.party-sponsors__list li {
  color: #2A1A12;
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 2.05;
}
.party-sponsors__list span {
  color: #8A6236;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.party-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  margin-top: clamp(44px, 5vw, 52px);
  border-top: 1px solid rgba(168, 135, 74, .38);
  border-bottom: 1px solid rgba(168, 135, 74, .38);
}
.party-feature > div { padding: 30px 20px; text-align: center; }
.party-feature::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(168, 135, 74, .4), transparent);
}
.party-feature__name {
     color: #2A1A12;
    font-family: var(--serif);
    font-size: clamp(18px, 1.8vw, 22px);
    line-height: 2.05;
}

.party-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: clamp(40px, 4.6vw, 46px);
  text-align: center;
}
.party-names-list--inline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  justify-content: center;
  gap: 7px 36px;
  list-style: none;
  padding: 0;
  margin: 14px auto 0;
  color: #2A1A12;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.5;
  text-align: left;
}
.party-names-list--inline li { white-space: nowrap; }

.party-secondary--registry {
  position: relative;
  display: grid;
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0 64px;
  max-width: 620px;
  margin: 30px auto 0;
}
.party-secondary--registry::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(168, 135, 74, .35), transparent);
}
.party-secondary--registry > div {
  padding: 0 10px 26px;
  text-align: center;
}
.party-secondary--registry dt {
    margin: 0;
    color: #8A6236;
    font-family: var(--script);
    font-size: 25px;
    font-weight: 500;
    letter-spacing: .1em;
}
.party-secondary--registry dd {
  margin: 6px 0 0;
  color: #2A1A12;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .entourage .container { max-width: none; }
  .party-parents,
  .party-feature,
  .party-lists,
  .party-sponsors { grid-template-columns: 1fr; }

  .party-parents::before { display: none; }
  .party-parents > div { padding: 0; }
  .party-parents > div + div {
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid rgba(168, 135, 74, .25);
  }

  .party-feature::after { display: none; }
  .party-feature > div + div { border-top: 1px solid rgba(168, 135, 74, .25); }

  .party-sponsors__list + .party-sponsors__list {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(168, 135, 74, .22);
  }

  .party-names-list--inline { gap: 7px 26px; font-size: 15.5px; }

  .party-secondary--registry {
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 420px;
  }
  .party-secondary--registry::before { display: none; }
  .party-secondary--registry > div { padding: 0 0 20px; }
}

/* ==========================================================================
   11. Dress code — The Heirloom lace card
   ========================================================================== */
.dress-code {
  position: relative;
  overflow: hidden;
  padding: clamp(44px, 6vw, 92px) clamp(12px, 4vw, 40px);
  background:
    linear-gradient(180deg, rgba(20, 12, 8, .76), rgba(20, 12, 8, .9) 45%, rgba(20, 12, 8, .94)),
    url("../assets/images/dresscode.jpg") center 42% / cover no-repeat;
  color: #F3EDE3;
  border-top: 1px solid var(--hairline-soft);
}
.dress-code::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(226, 199, 158, .18);
  pointer-events: none;
}

.lacecard {
  position: relative;
  z-index: 1;
  width: min(100%, 900px);
  margin: 0 auto;
  box-sizing: border-box;
  background: #F7F3ED;
  background-clip: padding-box;
  border: clamp(32px, 8.4vw, 80px) solid transparent;
  border-image: url("../assets/images/dresscode/frame-lace.png") 150 fill round;
  padding: clamp(16px, 3.2vw, 34px) clamp(14px, 3vw, 32px) clamp(20px, 3.8vw, 40px);
  color: #2A1A12;
}

.lace-head {
  text-align: center;
  padding-bottom: clamp(14px, 2.2vw, 24px);
}
.lace-kicker {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(7px, 1vw, 9px);
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: #8E6C3F;
}
.lace-title {
    margin-top: 14px;
    font-family: var(--script);
    font-size: clamp(56px, 8.4vw, 96px);
    font-weight: 400;
    line-height: .95;
    color: #241710;
}
.lace-orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 9px;
  color: #A8874A;
}
.lace-orn::before,
.lace-orn::after {
  content: "";
  width: clamp(28px, 5vw, 48px);
  height: 1px;
  background: currentColor;
  opacity: .5;
}
.lace-orn span {
  width: 4px;
  height: 4px;
  transform: rotate(45deg);
  background: currentColor;
}

.lace-entry {
  padding: clamp(15px, 2.4vw, 26px) 0;
  border-top: 1px solid rgba(142, 108, 63, .18);
}
.lacecard > .lace-entry:first-of-type { border-top: 0; }
.lace-rowhead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.lace-script {
  margin: 0;
  font-family: var(--script);
  font-size: clamp(26px, 3.7vw, 40px);
  font-weight: 400;
  line-height: 1.02;
  text-align: center;
  color: #2A1A12;
}
.lace-script--duo { font-size: clamp(19px, 2.5vw, 28px); }

.lace-figure {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: clamp(96px, 14vw, 178px);
  margin: clamp(8px, 1.4vw, 14px) 0 0;
}
.lace-figure img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
}
.lace-figure--wide img {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.lace-swatch-strip {
  display: flex;
  justify-content: center;
  margin-top: clamp(6px, 1vw, 10px);
}
.lace-swatch-strip img {
  display: block;
  height: clamp(28px, 4vw, 42px);
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

.lace-duo .lace-swatch-strip img {
  width: 100%;
  height: auto;
}
.lace-color-names {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px 0;
  margin: clamp(6px, .9vw, 8px) 0 0;
  padding: 0;
  list-style: none;
  container-type: inline-size;
}
.lace-color-names li {
  font-family: var(--sans);
  font-size: clamp(4.6px, 1.5vw, 6.5px);
  font-size: clamp(4.6px, 2.3cqw, 8px);
  line-height: 1.2;
  letter-spacing: .02em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(42, 26, 18, .64);
}

.lace-note {
  max-width: 46ch;
  margin: clamp(12px, 1.8vw, 18px) auto 0;
  padding-top: clamp(10px, 1.6vw, 14px);
  border-top: 1px solid rgba(142, 108, 63, .18);
  font-family: var(--serif);
  font-size: clamp(9.5px, 1.1vw, 12px);
  font-style: italic;
  line-height: 1.5;
  text-align: center;
  color: rgba(42, 26, 18, .66);
}

.lace-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 3vw, 40px);
  margin-top: clamp(9px, 1.5vw, 16px);
  text-align: center;
}
.lace-pair__col + .lace-pair__col { border-left: 1px solid rgba(142, 108, 63, .2); }
.lace-label {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(17px, .95vw, 9px);
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #8E6C3F;
}
.lace-desc {
  margin: 5px 0 0;
  font-family: var(--serif);
  font-size: clamp(18px, 1.3vw, 14px);
  line-height: 1.45;
  color: #4A352A;
}

.lace-duo {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(14px, 3.2vw, 44px);
  padding: clamp(15px, 2.4vw, 26px) 0;
  border-top: 1px solid rgba(142, 108, 63, .18);
}
.lace-duo__col { min-width: 0; text-align: center; }
.lace-duo__col + .lace-duo__col {
  border-left: 1px solid rgba(142, 108, 63, .2);
  padding-left: clamp(12px, 3vw, 40px);
}
.lace-duo .lace-figure { height: clamp(82px, 11.5vw, 142px); }
.lace-duo .lace-desc { margin-top: 8px; }

@media (max-width: 760px) {
  .dress-code { padding-block: 40px; }
  .dress-code::before { inset: 10px; }
  .lacecard { border-width: 32px; padding: 14px 14px 22px; }
  .lace-script { font-size: clamp(23px, 7vw, 30px); }
  .lace-script--duo { font-size: clamp(17px, 5vw, 21px); }
  .lace-figure { height: clamp(90px, 28vw, 120px); }
  .lace-duo .lace-figure { height: clamp(76px, 22vw, 96px); }
  .lace-swatch-strip img { height: 30px; }
  .lace-desc { font-size: 10.5px; }
  .lace-label { font-size: 7px; letter-spacing: .2em; }
  .lace-duo { grid-template-columns: .92fr 1.08fr; gap: 10px; }
  .lace-duo__col + .lace-duo__col { padding-left: 10px; }
  .lace-color-names { gap: 3px 0; }
  .lace-note { font-size: 10.5px; }
  .lace-pair { gap: 12px; }
}

@media (max-width: 640px) {
  .lace-duo { grid-template-columns: 1fr; gap: 0; }
  .lace-duo__col + .lace-duo__col {
    border-left: 0;
    border-top: 1px solid rgba(142, 108, 63, .18);
    margin-top: clamp(12px, 3vw, 18px);
    padding: clamp(12px, 3vw, 18px) 0 0;
  }
  .lace-duo .lace-figure { height: clamp(108px, 32vw, 150px); }
}

/* ==========================================================================
   12. RSVP — the keepsake table
   ========================================================================== */
.rsvp {
  isolation: isolate;
  overflow: hidden;
  background-color: #E4D9C8;
  border-top: 1px solid rgba(27, 16, 11, .08);
  border-bottom: 1px solid rgba(27, 16, 11, .08);
  color: #2C1C12;
}
.rsvp::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../assets/images/page2.png") center / cover no-repeat;
}
.rsvp::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255, 252, 244, .34), transparent 58%),
    linear-gradient(180deg, rgba(255, 250, 240, .05), rgba(74, 50, 30, .10));
}
.rsvp .container { position: relative; z-index: 1; }

.rsvp__head {
  margin-bottom: clamp(38px, 4.4vw, 62px);
  text-align: center;
}
.rsvp__eyebrow {
  color: #7A5230;
  font-size: 8.5px;
  letter-spacing: .34em;
}
.rsvp__script {
  margin-top: 14px;
  color: #3A2A1D;
  font-family: var(--display);
  font-size: clamp(3rem, 5.4vw, 4.9rem);
  font-weight: 400;
  line-height: .95;
}
.rsvp__script span { color: var(--gold); }
.rsvp__orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  color: var(--gold);
}
.rsvp__orn::before,
.rsvp__orn::after {
  content: "";
  width: clamp(26px, 4vw, 58px);
  height: 1px;
  background: currentColor;
  opacity: .5;
}
.rsvp__orn i {
  width: 5px;
  height: 5px;
  background: currentColor;
  transform: rotate(45deg);
}

/* The layered desk: envelope behind, notebook in front, flower taped on top. */
.rsvp__stage {
  position: relative;
  width: min(100%, 820px);
  margin-inline: auto;
}
.rsvp__letter {
  position: absolute;
  z-index: 0;
  left: -58%;
  top: -49%;
  width: 100%;
  margin: 0;
  transform: rotate(-22deg);
  filter: drop-shadow(0 24px 34px rgba(61, 40, 22, .54));
}
.rsvp__letter img { width: 100%; height: auto; }

.rsvp__notebook {
  position: relative;
  z-index: 2;
  container-type: inline-size;
  width: 105%;
  margin-inline: auto;
  transform: rotate(-1.2deg);
  filter: drop-shadow(0 1px 2px rgba(61, 40, 22, 0.18))
    drop-shadow(0 12px 22px rgba(61, 40, 22, 0.2))
    drop-shadow(0 34px 48px rgba(61, 40, 22, 0.42));
}
.rsvp__notebook-img { display: block; width: 100%; height: auto; }

.rsvp__left {
  position: absolute;
    left: 7%;
    top: 17%;
    width: 37%;
    height: 73%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 3.5cqw;
    gap: 1.1cqw;
    text-align: center;
}
.rsvp__mono {
  display: block;
  line-height: 0;
}
.rsvp__mono img {
  display: block;
  width: clamp(40px, 12cqw, 96px);
  height: auto;
  filter:
    drop-shadow(0 1px 0 rgba(255, 253, 247, .55))
    drop-shadow(0 2px 3px rgba(61, 40, 22, .16));
}

/* The countdown lives on the left leaf, beneath the monogram. */
.rsvp__left-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: .2cqw;
}
.countdown--letter {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(4px, 1.1cqw, 12px);
  width: 100%;
  margin: 1.4cqw auto 0;
  padding: 0;
  border: 0;
}
.countdown--letter .countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0;
  border: 0;
  flex: 1 1 0;
  min-width: 0;
}
.countdown--letter .countdown__value {
  color: #3A2A1D;
  font-family: var(--serif);
  font-size: clamp(16px, 5.2cqw, 44px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255, 253, 247, .55);
}
.countdown--letter .countdown__label {
  margin-top: .5em;
  color: rgba(107, 74, 46, .74);
  font-size: clamp(4.5px, 1.15cqw, 8px);
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 253, 247, .4);
}
.countdown--letter .countdown__sep { display: none; }

.rsvp__page {
  position: absolute;
  left: 53.4%;
  top: 9.5%;
  width: 39.6%;
  height: 81%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}
.rsvp__kicker {
  color: #8E6634;
  font-size: clamp(5.5px, 1.18cqw, 9.5px);
  font-weight: 500;
  letter-spacing: .26em;
  line-height: 1.4;
  text-transform: uppercase;
}
.rsvp__title {
  margin-top: 1.1cqw;
  color: #2A1A10;
  font-family: var(--serif);
  font-size: clamp(18px, 5.15cqw, 44px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.005em;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255, 253, 247, .5);
}
.rsvp__title em { color: #9A7038; font-style: italic; }
.rsvp__scribble {
  display: block;
  width: 15cqw;
  min-width: 44px;
  max-width: 118px;
  height: 8px;
  margin: 1.5cqw 0 0;
  color: rgba(138, 98, 54, .7);
}
.rsvp__copy {
  max-width: 30ch;
  margin-top: 2.1cqw;
  color: #3E2B1B;
  font-family: var(--serif);
  font-size: clamp(11px, 2.75cqw, 19px);
  line-height: 1.58;
  text-wrap: pretty;
}
.rsvp__btn {
  display: inline-flex;
  align-items: center;
  gap: .75em;
  min-height: 36px;
  margin-top: 2.4cqw;
  padding: max(10px, 1.55cqw) max(17px, 3.2cqw);
  position: relative;
  border: 1px solid rgba(180, 141, 87, .6);
  border-radius: 1px;
  background: linear-gradient(180deg, #4B3020, #382214);
  color: #FBF5E8;
  font-family: var(--serif);
  font-size: clamp(9px, 1.85cqw, 14px);
  font-weight: 500;
  letter-spacing: .2em;
  white-space: nowrap;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(38, 22, 12, .5);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 226, .14),
    inset 0 0 0 3px rgba(255, 247, 231, .08),
    inset 0 0 0 4px rgba(192, 156, 104, .3),
    0 2px 3px rgba(43, 27, 16, .3),
    0 12px 20px -12px rgba(43, 27, 16, .7);
  transition:
    background .3s var(--ease),
    border-color .3s var(--ease),
    color .3s var(--ease),
    box-shadow .3s var(--ease),
    transform .3s var(--ease);
}
.rsvp__btn::before {
  content: "";
  width: .36em;
  height: .36em;
  flex: none;
  background: #C7A46C;
  transform: rotate(45deg);
  box-shadow: 0 0 0 .14em rgba(199, 164, 108, .14);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.rsvp__btn svg {
  width: 1.05em;
  height: 1.05em;
  color: #C7A46C;
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.rsvp__btn:hover {
  background: linear-gradient(180deg, #5B3D27, #452A19);
  border-color: rgba(214, 186, 143, .85);
  color: #FFF9EC;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 226, .18),
    inset 0 0 0 3px rgba(255, 247, 231, .1),
    inset 0 0 0 4px rgba(214, 186, 143, .5),
    0 3px 4px rgba(43, 27, 16, .34),
    0 16px 24px -12px rgba(43, 27, 16, .72);
}
.rsvp__btn:hover::before {
  background: #E0C596;
  box-shadow: 0 0 0 .14em rgba(224, 197, 150, .2);
}
.rsvp__btn:hover svg { color: #E0C596; transform: translate(1px, -1px); }
.rsvp__btn:focus-visible { outline-color: #6B4A2E; }
.rsvp__note {
  margin-top: 1.6cqw;
  color: rgba(62, 43, 27, .9);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(8px, 1.38cqw, 11px);
  letter-spacing: .015em;
  line-height: 1.5;
}

/* ---- The dried flower and its tape ---- */
.rsvp__flower {
  position: absolute;
  z-index: 4;
  right: -40%;
  top: -6%;
  width: 48%;
  margin: 0;
  transform: rotate(
1deg);
  pointer-events: none;
  filter: drop-shadow(0 10px 16px rgba(61, 40, 22, 0.58));
}
.rsvp__flower img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 26px rgba(61, 40, 22, .26));
}
.rsvp__tape {
  position: absolute;
  z-index: 8;
  width: 58%;
  aspect-ratio: 800 / 319;
  background: url("../assets/images/tape.png") center / contain no-repeat;
  opacity: .92;
  filter: drop-shadow(0 2px 2px rgba(61, 40, 22, .18));
  pointer-events: none;
}
.rsvp__flower .rsvp__tape--a { top: 32%; left: -14%; transform: rotate(-28deg); }
.rsvp__flower .rsvp__tape--b {top: 80%;left: 1%;transform: rotate(16deg);}
.rsvp__pin {
  z-index: 9;
  top: -3.2%;
  left: -10%;
  width: 26%;
  transform: rotate(-38deg);
}

/* ---- The pearl necklace, resting at the lower-left of the letter ---- */
.rsvp__pearls {
position: absolute;
    z-index: 3;
    left: 0%;
    bottom: -11%;
    width: 36%;
    margin: 0;
    transform: rotate(-25deg);
    filter: drop-shadow(0 10px 16px rgba(61, 40, 22, 0.58));
    pointer-events: none;
}
.rsvp__pearls img { display: block; width: 100%; height: auto; }

@media (max-width: 820px) {
  .rsvp__stage { width: 100%; }
  .rsvp__notebook { width: 100%; }
  .rsvp__letter { left: -8%; top: -13%; width: 38%; }
  .rsvp__flower { right: -7%; top: -11%; width: 24%; z-index: 1; }
  .rsvp__flower .rsvp__tape--b { display: none; }
}

@media (max-width: 560px) {
  .rsvp__head { margin-bottom: 34px; }
  .rsvp__letter { left: -10%; top: -10%; width: 42%; }
  .rsvp__flower { right: -12%; top: -15%; width: 24%; }
  .rsvp__pin { display: none; }
  .rsvp__pearls { bottom: -8%; width: 21%; }
}

@media (max-width: 400px) {
  .rsvp__page { top: 8.5%; height: 83%; }
  .rsvp__title { margin-top: .8cqw; }
  .rsvp__copy { margin-top: 1.6cqw; line-height: 1.5; }
  .rsvp__btn { margin-top: 1.8cqw; }
  .rsvp__note { margin-top: 1.2cqw; }
}

@media (max-width: 340px) {
  .countdown--letter { gap: 0; }
  .rsvp__btn { gap: .5em; padding-inline: 11px; letter-spacing: .16em; }
  .rsvp__copy { font-size: 10.5px; }
}

/* ==========================================================================
   13. Footer, mobile bar
   ========================================================================== */

.site-footer {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(168, 135, 74, .1), transparent 62%),
    #0F0805;
  color: var(--cream);
  border-top: 1px solid var(--hairline-soft);
}
.branch--footer { color: var(--gold); opacity: .07; }
.site-footer__mark { border-color: var(--hairline); color: var(--cream); }
.site-footer__mark span { color: var(--gold); }
.site-footer__names { color: var(--cream); }
.site-footer__date { color: rgba(247, 244, 236, .55); }
.site-footer__copy { color: rgba(247, 244, 236, .4); }
.site-footer__replay {
  display: inline-flex;
  margin-top: 18px;
  color: var(--gold);
  border-color: rgba(168, 135, 74, .35);
}
.site-footer__replay:hover { color: var(--gold-light); border-color: var(--gold-light); }

.mobile-bar {
  background: rgba(18, 10, 7, .94);
  border-top: 1px solid var(--hairline);
  color: var(--cream);
}
.mobile-bar__label { color: rgba(247, 244, 236, .5); }
.mobile-bar__copy strong { color: var(--cream); }

/* Floating music control — only where the vinyl is hidden. */
.music-fab {
  position: fixed;
  right: 16px;
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 60;
  display: none;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(168, 135, 74, .48);
  border-radius: 50%;
  background: rgba(18, 10, 7, .92);
  color: var(--gold);
  cursor: pointer;
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease), opacity .4s var(--ease), visibility .4s;
}
.music-fab svg { width: 20px; height: 20px; }
.music-fab:hover { transform: translateY(-2px); }
body.mobile-bar-on .music-fab { bottom: calc(88px + env(safe-area-inset-bottom)); }
body.on-cover .music-fab,
body.nav-open .music-fab {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
}
.music-fab[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--espresso-900);
}
.music-fab__rings {
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(168, 135, 74, .32);
  border-radius: 50%;
  pointer-events: none;
}
.music-fab[aria-pressed="true"] .music-fab__rings { animation: fabPulse 2.6s var(--ease-soft) infinite; }
@keyframes fabPulse {
  0% { transform: scale(.92); opacity: .7; }
  70% { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

.music-embed {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.music-embed iframe { width: 320px; height: 180px; border: 0; }

.lightbox {
  background: rgba(11, 6, 4, .6);
  -webkit-backdrop-filter: blur(20px) saturate(.85) brightness(.68);
  backdrop-filter: blur(20px) saturate(.85) brightness(.68);
}
.lightbox__caption { color: rgba(247, 244, 236, .72); }

/* ==========================================================================
   14. Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .cover__stage { grid-template-columns: minmax(140px, .85fr) minmax(0, 500px) minmax(170px, .95fr); column-gap: clamp(8px, 2vw, 36px); }
  .cover__names { font-size: clamp(52px, 7.4vw, 86px); }
  .cover__oval { width: clamp(150px, 15vw, 206px); }
  .cover__envelope { width: clamp(144px, 13.5vw, 182px); }
  .cover__tag { width: clamp(160px, 14.5vw, 198px); }
  .cover__music { width: clamp(126px, 12.5vw, 166px); }
  .cover__floral { opacity: .24; }
}

@media (max-width: 1024px) {
  .cover__oval { width: 148px; }
  .cover__envelope { width: 140px; }
  .cover__tag { width: 158px; }
  .cover__music { width: 124px; }
  .cover__invite { width: min(100%, 500px); }

  .save-date__grid { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 900px) {
  .cover__stage {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: clamp(16px, 3vw, 24px);
    padding-top: calc(var(--header-h) + 30px);
    padding-bottom: 100px;
  }
  .cover__left { order: 1; display: none; }
  .cover__invite { order: 2; width: min(100%, 540px); }
  .cover__right {
    order: 3;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 18px;
  }
  .cover__oval { width: 172px; }
  .cover__envelope { width: 156px; }
  .cover__tag { width: 186px; }
  .cover__music { width: 150px; margin-left: 0; }
  .cover__music-note { font-size: 6.5px; letter-spacing: .14em; }
  .cover__waves,
  .cover__floral--right { display: none; }
  .cover__floral { opacity: .18; }
  .cover__scroll { position: static; order: 4; transform: none; margin-top: 2px; }

  .music-fab { display: grid; }
}

@media (max-width: 720px) {
  .intro { padding-bottom: 92px; }
  .intro__camera-stage { width: min(90vw, 44vh, 420px); }
  .cover__stage { padding-top: calc(var(--header-h) + 24px); padding-bottom: 88px; gap: 18px; }
  .cover__invite { padding: 36px 20px 30px; }
  .cover__names { font-size: clamp(50px, 15vw, 78px); }
  .cover__oval { width: 148px; }
  .cover__envelope { display: none; }
  .cover__tag { width: 176px; }
  .cover__music { width: 142px; }
  .cover__scroll { display: none; }
  .ornate-corner { width: 26px; height: 26px; }
  .ornate-corner--tl { top: 9px; left: 9px; }
  .ornate-corner--tr { top: 9px; right: 9px; }
  .ornate-corner--br { bottom: 9px; right: 9px; }
  .ornate-corner--bl { bottom: 9px; left: 9px; }

  .calendar { padding: 24px 16px 22px; }
  .calendar__days { gap: 1px; }
  .calendar__heart { width: 205%; height: 205%; }
  .calendar__weekdays span { font-size: 6.5px; letter-spacing: .1em; }
  .calendar__day { font-size: 12px; }

  .place-card { padding: 28px 18px 32px; }

  .site-footer { padding-bottom: 104px; }
}

@media (max-width: 560px) {
  .almanac > .almanac__tape { width: 94px; }
  .almanac__tape--tl { top: -16px; left: -18px; }
  .almanac__tape--br { right: -18px; bottom: -16px; }

  .intro__names { font-size: clamp(46px, 14vw, 66px); }
  .intro__camera-stage { width: min(90vw, 44vh, 400px); }
  .intro__film { display: none; }

  .cover__stage { gap: 16px; }
  .cover__left { display: none; }
  .cover__invite { padding: 32px 16px 26px; }
  .cover__fullnames { font-size: 7.5px; letter-spacing: .2em; }
  .cover__request { margin-top: 14px; }
  .cover__date { font-size: 15px; }
  .cover__venue { font-size: 19px; }
  .cover__invite .btn { width: 100%; padding-inline: 16px; }
  .cover__right { gap: 14px; }
  .cover__tag { width: 164px; padding: 22px 16px 16px; }
  .cover__tag blockquote { font-size: 13px; }
  .cover__music { width: 132px; }
  .cover__vinyl-disc { right: -30%; }
  .cover__eyebrow { letter-spacing: .24em; }

  .save-date__title { gap: 8px; }
  .calendar__month { font-size: 40px; }
  .calendar__day { font-size: 11.5px; }
  .countdown-panel { padding: 26px 16px 24px; }
  .countdown__label { font-size: 6.8px; letter-spacing: .14em; }
  .countdown__value { font-size: clamp(26px, 9vw, 34px); }

  .entourage__head { margin-bottom: 34px; }
}

@media (max-width: 390px) {
  .cover__names { font-size: 46px; }
  .cover__invite { padding: 28px 14px 24px; }
  .program__head .section-title { font-size: clamp(1.75rem, 8.5vw, 2rem); }
  .calendar { padding: 20px 12px 18px; }
  .calendar__day { font-size: 10.5px; }
  .calendar__heart { width: 190%; height: 190%; }
  .countdown__value { font-size: 25px; }
  .countdown__label { font-size: 6.2px; }
}

/* Phones and short laptops: a smaller camera cluster so the prints clear
   the bottom edge and the skip control keeps its breathing room. */
@media (max-height: 600px) {
  .intro__camera-stage { width: min(88vw, 44vh, 300px); }
  .intro__line { font-size: 18px; margin-bottom: 8px; }
  .intro__names { font-size: clamp(38px, 7.4vw, 56px); }
}

/* ==========================================================================
   14b. Landing — the lace stationery collage on off-white paper
   ========================================================================== */
.cover {
  background:
    radial-gradient(120% 90% at 50% -10%, #FCFAF4 0%, rgba(252, 250, 244, 0) 60%),
    radial-gradient(85% 62% at 50% 46%, #FAF7EF 0%, rgba(250, 247, 239, 0) 74%),
    linear-gradient(180deg, #F1EBDF 0%, #F6F3EB 48%, #EDE7DA 100%);
  isolation: isolate;
}
/* The only ornament on the paper: the same single hairline string that
   frames the dress code. The stationery spills over the frame, so the
   cover reads like a printed card. */
.cover__frame {
  position: absolute;
  z-index: 1;
  top: calc(var(--header-h) + -1px);
  bottom: clamp(18px, 2.6vw, 38px);
  left: clamp(18px, 2.6vw, 38px);
  right: clamp(18px, 2.6vw, 38px);
  border: 1px solid rgba(226, 199, 158, .18);
  pointer-events: none;
}
.cover__grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: .06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  pointer-events: none;
}
.cover__stage {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: calc(var(--header-h) + 6px) clamp(12px, 2vw, 28px) 40px;
}
.cover__collage {
  --lace-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='160' height='160' fill='white'/%3E%3Cg fill='black'%3E%3Ccircle cx='8' cy='8' r='2.4'/%3E%3Ccircle cx='24' cy='8' r='2.4'/%3E%3Ccircle cx='40' cy='8' r='2.4'/%3E%3Ccircle cx='56' cy='8' r='2.4'/%3E%3Ccircle cx='72' cy='8' r='2.4'/%3E%3Ccircle cx='88' cy='8' r='2.4'/%3E%3Ccircle cx='104' cy='8' r='2.4'/%3E%3Ccircle cx='120' cy='8' r='2.4'/%3E%3Ccircle cx='136' cy='8' r='2.4'/%3E%3Ccircle cx='152' cy='8' r='2.4'/%3E%3Ccircle cx='8' cy='24' r='2.4'/%3E%3Ccircle cx='24' cy='24' r='2.4'/%3E%3Ccircle cx='40' cy='24' r='2.4'/%3E%3Ccircle cx='56' cy='24' r='2.4'/%3E%3Ccircle cx='72' cy='24' r='2.4'/%3E%3Ccircle cx='88' cy='24' r='2.4'/%3E%3Ccircle cx='104' cy='24' r='2.4'/%3E%3Ccircle cx='120' cy='24' r='2.4'/%3E%3Ccircle cx='136' cy='24' r='2.4'/%3E%3Ccircle cx='152' cy='24' r='2.4'/%3E%3Ccircle cx='8' cy='40' r='2.4'/%3E%3Ccircle cx='24' cy='40' r='2.4'/%3E%3Ccircle cx='40' cy='40' r='2.4'/%3E%3Ccircle cx='56' cy='40' r='2.4'/%3E%3Ccircle cx='72' cy='40' r='2.4'/%3E%3Ccircle cx='88' cy='40' r='2.4'/%3E%3Ccircle cx='104' cy='40' r='2.4'/%3E%3Ccircle cx='120' cy='40' r='2.4'/%3E%3Ccircle cx='136' cy='40' r='2.4'/%3E%3Ccircle cx='152' cy='40' r='2.4'/%3E%3Ccircle cx='8' cy='56' r='2.4'/%3E%3Ccircle cx='8' cy='72' r='2.4'/%3E%3Ccircle cx='8' cy='88' r='2.4'/%3E%3Ccircle cx='8' cy='104' r='2.4'/%3E%3Ccircle cx='8' cy='120' r='2.4'/%3E%3Ccircle cx='8' cy='136' r='2.4'/%3E%3Ccircle cx='8' cy='152' r='2.4'/%3E%3Ccircle cx='152' cy='56' r='2.4'/%3E%3Ccircle cx='152' cy='72' r='2.4'/%3E%3Ccircle cx='152' cy='88' r='2.4'/%3E%3Ccircle cx='152' cy='104' r='2.4'/%3E%3Ccircle cx='152' cy='120' r='2.4'/%3E%3Ccircle cx='152' cy='136' r='2.4'/%3E%3Ccircle cx='152' cy='152' r='2.4'/%3E%3Ccircle cx='24' cy='152' r='2.4'/%3E%3Ccircle cx='40' cy='152' r='2.4'/%3E%3Ccircle cx='56' cy='152' r='2.4'/%3E%3Ccircle cx='72' cy='152' r='2.4'/%3E%3Ccircle cx='88' cy='152' r='2.4'/%3E%3Ccircle cx='104' cy='152' r='2.4'/%3E%3Ccircle cx='120' cy='152' r='2.4'/%3E%3Ccircle cx='136' cy='152' r='2.4'/%3E%3Ccircle cx='24' cy='120' r='2.4'/%3E%3Ccircle cx='40' cy='120' r='2.4'/%3E%3Ccircle cx='56' cy='120' r='2.4'/%3E%3Ccircle cx='72' cy='120' r='2.4'/%3E%3Ccircle cx='88' cy='120' r='2.4'/%3E%3Ccircle cx='104' cy='120' r='2.4'/%3E%3Ccircle cx='120' cy='120' r='2.4'/%3E%3Ccircle cx='136' cy='120' r='2.4'/%3E%3Ccircle cx='24' cy='136' r='2.4'/%3E%3Ccircle cx='40' cy='136' r='2.4'/%3E%3Ccircle cx='56' cy='136' r='2.4'/%3E%3Ccircle cx='72' cy='136' r='2.4'/%3E%3Ccircle cx='88' cy='136' r='2.4'/%3E%3Ccircle cx='104' cy='136' r='2.4'/%3E%3Ccircle cx='120' cy='136' r='2.4'/%3E%3Ccircle cx='136' cy='136' r='2.4'/%3E%3Ccircle cx='24' cy='56' r='2.4'/%3E%3Ccircle cx='24' cy='72' r='2.4'/%3E%3Ccircle cx='24' cy='88' r='2.4'/%3E%3Ccircle cx='24' cy='104' r='2.4'/%3E%3Ccircle cx='136' cy='56' r='2.4'/%3E%3Ccircle cx='136' cy='72' r='2.4'/%3E%3Ccircle cx='136' cy='88' r='2.4'/%3E%3Ccircle cx='136' cy='104' r='2.4'/%3E%3Ccircle cx='40' cy='72' r='5'/%3E%3Ccircle cx='120' cy='72' r='5'/%3E%3Ccircle cx='72' cy='40' r='5'/%3E%3Ccircle cx='88' cy='40' r='5'/%3E%3Ccircle cx='40' cy='104' r='5'/%3E%3Ccircle cx='120' cy='104' r='5'/%3E%3Ccircle cx='72' cy='136' r='5'/%3E%3Ccircle cx='88' cy='136' r='5'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Crect width='160' height='160' fill='%23FCFAF5' mask='url(%23m)'/%3E%3C/svg%3E");
  position: relative;
  width: min(96vw, 82vh, 1080px);
  aspect-ratio: 1181 / 1160;
  container-type: inline-size;
}

/* Flowers and line-work */
.collage__sweetpea {
    position: absolute;
    left: -3%;
    top: -3%;
    z-index: 3;
    width: 48%;
    transform: rotate(-2deg);
    filter: drop-shadow(0 .8cqw 1.2cqw rgba(20, 12, 8, .45)) drop-shadow(0 2cqw 3cqw rgba(20, 12, 8, .4));
}
.collage__sweetpea,
.collage__calla,
.collage__lily { display: block; height: auto; object-fit: contain; }
.collage__calla {
    position: absolute;
    left: 71%;
    top: 13%;
    z-index: 3;
    width: 34%;
    transform: rotate(11deg);
    filter: drop-shadow(0 1.6cqw 2.6cqw rgba(20, 12, 8, .4));
}
.collage__lily {
  position: absolute;
  left: 44%;
  top: 79%;
  z-index: 6;
  width: 26%;
  transform: rotate(-5deg);
  filter: drop-shadow(0 1.2cqw 2cqw rgba(20, 12, 8, .4));
  pointer-events: none;
}
.collage__waves {
  position: absolute;
  left: 35%;
  top: 39%;
  z-index: 1;
  width: 43%;
  color: #EFEADF;
  opacity: .62;
}
.collage__waves svg { display: block; width: 100%; height: auto; }

/* Envelope */
.collage__envelope {
    position: absolute;
    left: 31%;
    top: 4%;
    z-index: 2;
    width: 60%;
    aspect-ratio: 1 / 1;
    overflow: visible;
    transform: rotate(35deg);
    filter: drop-shadow(0 .5cqw .8cqw rgba(20, 12, 8, .35)) drop-shadow(0 2.6cqw 4cqw rgba(20, 12, 8, .55));
    pointer-events: none;
}
.collage__envelope-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Ornate oval frame */
.collage__polaroid {
  position: absolute;
  left: 16%;
  top: 17%;
  z-index: 4;
  width: 27%;
  margin: 0;
  aspect-ratio: 666 / 799;
  transform: rotate(-15deg);
  filter: drop-shadow(0 .6cqw 1cqw rgba(20, 12, 8, .3)) drop-shadow(0 2.6cqw 4.4cqw rgba(20, 12, 8, .55));
}
.collage__polaroid-photo {
  position: absolute;
  left: 15.02%;
  top: 13.39%;
  width: 69.97%;
  height: 73.47%;
  object-fit: cover;
  object-position: 50% 42%;
  clip-path: ellipse(50% 50% at 50% 50%);
  filter: saturate(.85) sepia(.12) contrast(1.02);
}
.collage__polaroid-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.collage__polaroid-caption {
  display: none;
}

/* Swan ornament */
.collage__swans { display: none; }

/* Blossom tucked behind the letter's lower-left edge */
.collage__letter-flower {
     position: absolute;
    left: 14%;
    top: 61%;
    z-index: 4;
    width: 24%;
    height: auto;
    object-fit: contain;
    transform: rotate(-38deg);
    filter: drop-shadow(0 1.2cqw 2cqw rgba(20, 12, 8, .38));
    pointer-events: none;
}

/* Lace invitation card */
.collage__invite {
    position: absolute;
    left: 21.5%;
    top: 40.5%;
    z-index: 5;
    width: 42%;
    padding: 1.6cqw 2.4cqw 1.4cqw;
    border: 5.4cqw solid transparent;
    border-image: url(../assets/images/landing/letter-lace.png) 108 fill stretch round;
    background: none;
    box-shadow: none;
    filter: drop-shadow(0 2.4cqw 4cqw rgba(16, 9, 5, .55));
    color: #2B1E15;
    text-align: center;
    transform: rotate(-1deg);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    min-height: 54.34cqw;
}
.collage__invite > :not(img) {
  position: relative;
  z-index: 2;
}
.collage__dove { display: none; }
.cover__scroll {
  left: auto;
  right: clamp(20px, 3.4vw, 52px);
  bottom: clamp(54px, 5vw, 72px);
  transform: none;
  align-items: center;
  color: rgba(30, 20, 16, .55);
  text-shadow: none;
}
.cover__scroll:hover { color: var(--gold-deep); }
@keyframes coverReveal {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* The landing arrives bottom-up, one piece at a time; each item slides in
   from its own direction and the invitation lands last. The sequence starts
   as soon as the intro clears, so the cream backdrop is already painted. */
body.is-loaded .cover .reveal-hero {
  animation-name: coverSlide;
  animation-duration: .42s;
  animation-delay: var(--reveal-delay, 0s);
  animation-timing-function: cubic-bezier(.2, .68, .24, 1);
  animation-fill-mode: both;
}
@keyframes coverSlide {
  from {
    opacity: 0;
    translate: var(--reveal-x, 0) var(--reveal-y, 0);
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
.collage__music { --reveal-delay: .02s; --reveal-x: 70px; --reveal-y: 70px; }
.collage__lily { --reveal-delay: .06s; --reveal-x: 0; --reveal-y: 85px; }
.collage__letter-flower { --reveal-delay: .3s; --reveal-x: -55px; --reveal-y: 25px; }
.cover__scroll { --reveal-delay: .1s; --reveal-x: 70px; --reveal-y: 0; }
.collage__postcard { --reveal-delay: .14s; --reveal-x: 90px; --reveal-y: 20px; }
.collage__polaroid { --reveal-delay: .18s; --reveal-x: -90px; --reveal-y: 35px; }
.collage__envelope { --reveal-delay: .22s; --reveal-x: 0; --reveal-y: -85px; }
.collage__waves { --reveal-delay: .26s; --reveal-x: -80px; --reveal-y: -20px; }
.collage__calla { --reveal-delay: .3s; --reveal-x: 80px; --reveal-y: -60px; }
.collage__sweetpea { --reveal-delay: .34s; --reveal-x: -80px; --reveal-y: -60px; }
.collage__invite { --reveal-delay: .38s; --reveal-x: 0; --reveal-y: 95px; }
.collage__invite-kicker {
  color: #5B3E24;
  font-size: 1.3cqw;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.collage__invite-names {
  margin: .1cqw 0 .3cqw;
  color: #1E1410;
  font-family: var(--display);
  font-size: 5.9cqw;
  font-weight: 400;
  line-height: 1;
}
.collage__invite-names i {
  font-family: var(--serif);
  font-size: .4em;
  font-style: italic;
  color: #8A6236;
}
.collage__invite-line {
  color: #40301F;
  font-family: var(--serif);
  font-size: 1.95cqw;
  font-style: italic;
  line-height: 1.5;
}
.collage__invite-place {
  margin-top: .6cqw;
  color: #241710;
  font-family: var(--serif);
  font-size: 2.3cqw;
  line-height: 1.3;
}
.collage__invite-place span {
  display: block;
  margin-top: .4cqw;
  color: #5B3E24;
  font-family: var(--sans);
  font-size: 1.05cqw;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.collage__invite-date {
  margin-top: .7cqw;
  color: #1E1410;
  font-family: var(--serif);
  font-size: 2.4cqw;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.collage__invite-time {
  margin-top: .5cqw;
  color: #4A3320;
  font-size: 1.15cqw;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.collage__invite-link {
  display: inline-flex;
  align-items: center;
  gap: .5cqw;
  margin-top: 1.1cqw;
  padding-bottom: .4cqw;
  border-bottom: 1px solid rgba(140, 104, 58, .45);
  color: #5B3E24;
  font-size: 1.15cqw;
  letter-spacing: .22em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.collage__invite-link:hover { color: #1E1410; border-color: #1E1410; }
.collage__invite-link svg { width: 1.35cqw; height: 1.35cqw; }
.collage__corner {
  position: absolute;
  z-index: 2;
  width: 7.5%;
  height: 7.5%;
  color: #9A7C52;
  opacity: .8;
  pointer-events: none;
}
.collage__corner svg { width: 100%; height: 100%; }
.collage__corner--tl { top: 1.4cqw; left: 1.4cqw; }
.collage__corner--tr { top: 1.4cqw; right: 1.4cqw; transform: rotate(90deg); }
.collage__corner--br { bottom: 1.4cqw; right: 1.4cqw; transform: rotate(180deg); }
.collage__corner--bl { bottom: 1.4cqw; left: 1.4cqw; transform: rotate(270deg); }
.collage__invite-flourish {
  display: block;
  width: 50%;
  height: auto;
  margin: .5cqw auto .1cqw;
  color: #5B3E24;
  opacity: .8;
}
.collage__invite-flourish--bottom {
  width: 40%;
  margin: .5cqw auto .5cqw;
}

/* Vintage postcard */
.collage__postcard {
  position: absolute;
  left: 61%;
  top: 46%;
  z-index: 4;
  width: 33%;
  margin: 0;
  padding: 2.8cqw 2.8cqw 2.2cqw;
  background: linear-gradient(160deg, #FCFAF5, #F3EFE6);
  border: 1px solid rgba(140, 104, 58, .3);
  box-shadow: 0 .5cqw .9cqw rgba(16, 9, 5, .3), 0 2.4cqw 4cqw rgba(16, 9, 5, .5);
  transform: rotate(-3.5deg);
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 19.28cqw;
}
.collage__postcard::before {
  content: "";
  position: absolute;
 
  z-index: -1;
  background: #F8F5EE;
  border: 1px solid rgba(140, 104, 58, .25);
  box-shadow: 0 1.6cqw 3cqw rgba(16, 9, 5, .35);
  transform: rotate(5deg) translate(4%, 4%);
}
.collage__postcard::after {
  content: "";
  position: absolute;
  inset: 1.2cqw;
  border: 1px solid rgba(170, 135, 80, .28);
  pointer-events: none;
}
.collage__postcard-photo {
     position: absolute;
    right: -5%;
    top: -2%;
    z-index: 3;
    width: 48%;
    margin: 0;
    aspect-ratio: 707 / 808;
    transform: rotate(14deg);
    filter: drop-shadow(0 .8cqw 1.4cqw rgba(20, 10, 6, .35)) drop-shadow(0 1.8cqw 3cqw rgba(20, 10, 6, .4));
}
.collage__postcard-photo-img {
  position: absolute;
  z-index: 1;
  left: 15.42%;
  top: 15.59%;
  width: 72.84%;
  height: 65.72%;
  object-fit: cover;
  filter: saturate(.85) sepia(.12) contrast(1.02);
}
.collage__postcard-photo-frame {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.collage__postcard-stamp {
  position: absolute;
  right: 6%;
  top: 7%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 16%;
  aspect-ratio: 4 / 5;
  background: linear-gradient(150deg, #F4F0E7, #E4DED2);
  border: 2px dotted rgba(252, 250, 245, .9);
  box-shadow: 0 .2cqw .4cqw rgba(60, 40, 20, .3);
  transform: rotate(5deg);
  color: #5B3E24;
  font-family: var(--serif);
  font-size: 1.05cqw;
}
.collage__postcard-stamp::before {
  content: "";
  position: absolute;
  inset: 14%;
  border: 1px solid rgba(140, 90, 55, .4);
}
.collage__postcard-postmark {
  position: absolute;
  right: 15%;
  top: 9%;
  z-index: 2;
  width: 15%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(90, 70, 50, .35);
  box-shadow: inset 0 0 0 .25cqw rgba(90, 70, 50, .12);
  transform: rotate(-14deg);
}
.collage__postcard-postmark::before {
  content: "04·01·27";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(90, 70, 50, .55);
  font-size: .75cqw;
  letter-spacing: .1em;
}
.collage__postcard-kicker {
  color: #5B3E24;
  font-size: .85cqw;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.collage__postcard-date {
  margin-top: .7cqw;
  color: #1E1410;
  font-family: var(--serif);
  font-size: 2.2cqw;
  letter-spacing: .08em;
}
.collage__postcard-place {
  color: #5B3E24;
  font-size: .85cqw;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.collage__postcard-rule {
  display: block;
  height: 1px;
  margin: 1.1cqw 0;
  background: rgba(170, 135, 80, .35);
}
.collage__postcard blockquote {
  margin: auto 0;
  color: #35241A;
  font-family: var(--script);
  text-align: left;
  font-size: 1.55cqw;
  line-height: 1.45;
}

/* Record sleeve */
.collage__music {
  position: absolute;
  left: 63%;
  top: 64%;
  z-index: 4;
  width: 28%;
  margin: 0;
  transform: rotate(-15deg);
  filter: drop-shadow(0 1.6cqw 2.4cqw rgba(16, 9, 5, .55));
}
.collage__music .cover__vinyl-sleeve {
  padding: 2.4cqw 1.4cqw;
  border: 1px solid rgba(140, 104, 58, .35);
  background: linear-gradient(160deg, #FCFAF5, #F4EFE6);
  -webkit-mask-image: radial-gradient(circle at 100% 50%, transparent 0 16%, #000 16.8%);
  mask-image: radial-gradient(circle at 100% 50%, transparent 0 16%, #000 16.8%);
}
.collage__music .cover__vinyl-sleeve::before {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 46%;
  aspect-ratio: 1;
  transform: translate(50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(120, 90, 55, .28);
  pointer-events: none;
}
.collage__music .cover__vinyl-play {
  display: block;
  padding: 0 9% 0 5%;
  color: #35241A;
  font-family: var(--script);
  font-size: 1.9cqw;
  line-height: 1.35;
  text-align: center;
}
.collage__music .cover__vinyl-disc { right: -52%; }
.collage__music .cover__music-note { margin-top: .8cqw; font-size: .85cqw; letter-spacing: .18em; }

@media (max-width: 900px) {
  .cover__collage { width: min(96vw, 74vh, 780px); }
  .cover__stage { padding-bottom: 66px; }
}

@media (max-width: 700px) {
  .cover__stage {
    display: block;
    min-height: 100svh;
    padding: calc(var(--header-h) + 12px) 14px 18px;
  }
  .cover__collage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding-top: 28px;
    aspect-ratio: auto;
    container-type: normal;
  }

  /* Florals sit behind the stationery, pinned to the collage corners. */
  .collage__sweetpea {
    position: absolute;
    left: -9%;
    top: 0;
    width: 54%;
    z-index: 1;
    opacity: 1;
    transform: rotate(-3deg);
  }
  .collage__calla {
    position: absolute;
    right: 0;
    top: 9%;
    bottom: auto;
    left: 73%;
    width: 35%;
    z-index: 3;
    opacity: 1;
    transform: rotate(13deg);
  }
  .collage__lily { display: none; }
  .collage__letter-flower {
    position: relative;
    left: 4%;
    top: -137px;
    display: block;
    align-self: flex-start;
    width: 30%;
    margin: -41% 0 0 -6%;
    z-index: 4;
    transform: rotate(-29deg);
  }
  .collage__waves,
  .collage__swans { display: none; }

  .collage__envelope {
    position: relative;
    left: auto;
    top: auto;
    align-self: flex-end;
    width: 60%;
    margin: 0 4% 0 0;
    z-index: 2;
    transform: rotate(38deg);
  }

  .collage__polaroid {
    position: relative;
    left: 6%;
    top: -124px;
    align-self: flex-start;
    width: 32%;
    margin: -15% 0 0 7%;
    z-index: 4;
    transform: rotate(-12deg);
  }

  .collage__invite {
    position: relative;
    left: -60px;
    top: -139px;
    width: 50%;
    margin: -7% auto 0;
    padding: 16px 22px 15px;
    border: 18px solid transparent;
    border-image: url("../assets/images/landing/letter-lace.png") 108 fill stretch round;
    gap: 2px;
    z-index: 5;
    transform: rotate(-1deg);
    min-height: 0;
  }
  /* A single bloom peeks from the letter's bottom-right corner instead of
     covering the type, as the desktop plate does. */
  .collage__invite::after {
    content: "";
    position: absolute;
    right: -18%;
    bottom: -9%;
    width: 57%;
    aspect-ratio: 799 / 572;
    background: url("../assets/images/landing/flower-in-letter.png") center / contain no-repeat;
    transform: rotate(8deg);
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(0 2px 6px rgba(20, 12, 8, .35));
  }
  .collage__invite-names {/* font-size: clamp(31px, 9vw, 40px); */margin: 0 0 4px;}
  .collage__invite-line {font-size: 10px;line-height: 1.35;}
  .collage__invite-place {margin-top: 5px;font-size: 13px;}
  .collage__invite-place span {margin-top: 3px;font-size: 6.5px;letter-spacing: .22em;}
  .collage__invite-date {margin-top: 7px;font-size: 10px;}
  .collage__invite-time { font-size: 8.5px; }
  .collage__invite-link { display: none; }
  .collage__invite-flourish { width: 52%; margin: 0 auto 2px; }
  .collage__invite-flourish--bottom { width: 42%; margin: 2px auto 0; }

  .collage__postcard {
    position: relative;
    left: 45%;
    top: -322px;
    align-self: flex-start;
    width: 42%;
    margin: -12px 0 0 6%;
    padding: 14px 13px 12px;
    z-index: 3;
    transform: rotate(-2.5deg);
  }
  .collage__postcard-photo {
    width: 37%;
    top: -19%;
    right: -8%;
    transform: rotate(12deg);
  }
  .collage__postcard-kicker { font-size: 6.5px; letter-spacing: .16em; }
  .collage__postcard blockquote { font-size: 11.5px; line-height: 1.4; }

  .collage__music {
    position: relative;
    inset: auto;
    align-self: flex-end;
    width: 31%;
    left: 0%;
    top: -295px;
    margin: -6% 15% 0 0;
    z-index: 4;
    transform: rotate(-12deg);
  }
  .collage__music .cover__vinyl-play { width: 100%; font-size: 8px; line-height: 1.3; padding: 0 26% 0 6%; }
  .collage__music .cover__vinyl-sleeve { padding: 7px 5px; }

  .cover__enter {
    display: flex;
    width: max-content;
    align-items: center;
    align-self: center;
    gap: 7px;
    margin: 16px auto 0;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(140, 104, 58, .45);
    color: #5B3E24;
    font-size: 9.5px;
    letter-spacing: .24em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .3s var(--ease), border-color .3s var(--ease);
  }
  .cover__enter:hover { color: #1E1410; border-color: #1E1410; }
  .cover__enter svg { width: 12px; height: 12px; }
  .cover__scroll { display: none; }
}

/* Short phones: tighten the stack so the letter keeps its full text. */
@media (max-width: 700px) and (max-height: 730px) {
  .cover__stage { padding-bottom: 12px; }
  .cover__collage { padding-top: 20px; }
  .collage__envelope { width: 56%; }
  .collage__polaroid { width: 27%; margin-top: -13%; }
  .collage__invite { width: 92%; border-width: 15px; padding: 12px 18px 11px; }
  .collage__invite-names { font-size: clamp(28px, 8.4vw, 34px); }
  .collage__invite-line { font-size: 14px; }
  .collage__invite-place { font-size: 16.5px; }
  .collage__invite-date { margin-top: 6px; font-size: 14px; }
  .collage__postcard { width: 53%; padding: 12px 11px 10px; }
  .collage__postcard blockquote { font-size: 11px; }
  .collage__music { width: 24%; margin-right: 14%; }
  .cover__enter { margin-top: 12px; }
}

@media (max-width: 700px) and (max-height: 700px) {
  .cover__stage { padding-top: calc(var(--header-h) + 6px); padding-bottom: 10px; }
  .cover__collage { padding-top: 16px; }
  .collage__envelope { width: 50%; }
  .collage__polaroid { width: 23%; margin-top: -11%; }
  .collage__invite { border-width: 11px; padding: 9px 14px 8px; }
  .collage__invite::after { width: 27%; right: -6%; bottom: -8%; }
  .collage__invite-flourish { width: 44%; }
  .collage__invite-flourish--bottom { width: 36%; }
  .collage__invite-names { font-size: clamp(25px, 7.8vw, 30px); }
  .collage__invite-line { font-size: 12.5px; }
  .collage__invite-place { font-size: 15px; }
  .collage__invite-date { margin-top: 5px; font-size: 12.5px; }
  .collage__invite-time { font-size: 8px; }
  .collage__postcard { width: 50%; }
  .collage__postcard blockquote { font-size: 10.5px; }
  .collage__music { width: 21%; margin: -8% 13% 0 0; }
  .cover__enter { margin-top: 8px; }
}

/* Tiny phones (iPhone SE 1st gen and the like). */
@media (max-width: 700px) and (max-height: 600px) {
  .cover__stage { padding-top: calc(var(--header-h) + 2px); padding-bottom: 8px; }
  .cover__collage { padding-top: 12px; }
  .collage__sweetpea { width: 38%; }
  .collage__calla { width: 21%; }
  .collage__envelope { width: 42%; }
  .collage__polaroid { width: 21%; margin-top: -11%; }
  .collage__invite { width: 94%; border-width: 10px; padding: 8px 12px 8px; }
  .collage__invite::after { width: 24%; }
  .collage__invite-names { font-size: clamp(23px, 7.2vw, 27px); }
  .collage__invite-line { font-size: 11.5px; }
  .collage__invite-place { font-size: 14px; }
  .collage__invite-date { margin-top: 4px; font-size: 11.5px; }
  .collage__invite-time { font-size: 7.5px; }
  .collage__postcard { width: 47%; padding: 9px 9px 8px; }
  .collage__postcard blockquote { font-size: 10px; }
  .collage__music { width: 20%; margin-right: 12%; }
  .cover__enter { margin-top: 8px; font-size: 9px; }
}

/* Mobile: keep the desktop collage arrangement, scaled to the phone width. */
@media (max-width: 700px) {
  .cover__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100svh;
    padding: calc(var(--header-h) + 6px) 10px 18px;
    gap: 0;
  }
  .cover__collage {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0;
    aspect-ratio: 405 / 430;
    container-type: inline-size;
  }

  .collage__sweetpea {
    position: absolute;
    left: -9%;
    top: 3%;
    width: 73%;
    z-index: 3;
    opacity: 1;
    transform: rotate(-2deg);
  }
  .collage__calla {
    position: absolute;
    left: auto;
    right: -16%;
    top: 32%;
    bottom: auto;
    width: 54%;
    z-index: 4;
    opacity: 1;
    transform: rotate(18deg);
  }
  .collage__lily {
    display: block;
    position: absolute;
    left: 60%;
    top: 103%;
    width: 36%;
    z-index: 7;
    transform: rotate(-7deg);
  }
  .collage__letter-flower {
    position: absolute;
    left: 6%;
    top: 85%;
    display: block;
    width: 33%;
    margin: 0;
    align-self: auto;
    z-index: 4;
    transform: rotate(-45deg);
  }
  .collage__waves,
  .collage__swans { display: none; }

  .collage__envelope {
    position: absolute;
    left: 36%;
    top: 16%;
    width: 67%;
    margin: 0;
    align-self: auto;
    z-index: 3;
    transform: rotate(40deg);
  }
  .collage__polaroid {
    position: absolute;
    left: 14%;
    top: 23%;
    width: 33%;
    margin: 0;
    align-self: auto;
    z-index: 3;
    transform: rotate(-17deg);
  }
  .collage__invite {
    position: absolute;
    left: 18%;
    top: 50%;
    width: 67%;
    margin: 0;
    padding: 1.4cqw 2cqw 1.2cqw;
    border: 3.6cqw solid transparent;
    border-image: url("../assets/images/landing/letter-lace.png") 37 fill stretch round;
    min-height: 91cqw;
    gap: 0;
    z-index: 5;
    transform: rotate(-1deg);
  }
  .collage__invite::after { content: none; }
  .collage__invite-names {font-size: 8.9cqw;margin: -1.9cqw 0 .3cqw;}
  .collage__invite-line {font-size: 2.5cqw;line-height: 0.4;}
  .collage__invite-place {margin-top: .6cqw;font-size: 2.7cqw;line-height: 1.25;}
  .collage__invite-place span {margin-top: 0.4cqw;font-size: 1.7cqw;letter-spacing: .2em;}
  .collage__invite-date {margin-top: -1.3cqw;font-size: 2.7cqw;}
  .collage__invite-time { font-size: 1.1cqw; }
  .collage__invite-link { display: none; }
  .collage__invite-flourish {width: 50%;margin: 4.5cqw auto 0.1cqw;}
  .collage__invite-flourish--bottom {width: 40%;margin: 0.5cqw auto 5.5cqw;}

  .collage__postcard {
    position: absolute;
    left: 13%;
    top: 125%;
    width: 36%;
    margin: 0;
    padding: 2.4cqw 2.4cqw 1.8cqw;
    align-self: auto;
    min-height: 20cqw;
    z-index: 7;
    transform: rotate(-1deg);
  }
  .collage__postcard-photo { width: 48%; top: -12%; right: -8%; transform: rotate(14deg); }
  .collage__postcard-kicker { font-size: .85cqw; letter-spacing: .28em; }
  .collage__postcard blockquote { font-size: 1.8cqw; line-height: 1.45; }

  .collage__music {
    position: absolute;
    inset: auto;
    left: 50%;
    top: 120%;
    width: 35%;
    margin: 0;
    align-self: auto;
    z-index: 6;
    transform: rotate(-12deg);
  }
  .collage__music .cover__vinyl-play { width: auto; font-size: 1.9cqw; line-height: 1.35; padding: 0 9% 0 5%; }
  .collage__music .cover__vinyl-sleeve { padding: 2.4cqw 1.4cqw; }

  .cover__enter {
    display: flex;
    width: max-content;
    align-items: center;
    align-self: center;
    gap: 7px;
    margin: auto auto 0;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(140, 104, 58, .45);
    color: #5B3E24;
    font-size: 9.5px;
    letter-spacing: .24em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .3s var(--ease), border-color .3s var(--ease);
  }
  .cover__enter:hover { color: #1E1410; border-color: #1E1410; }
  .cover__enter svg { width: 12px; height: 12px; }
  .cover__scroll { display: none; }
}
/* ==========================================================================
   14c. Cream & brown vintage palette across the scroll
   ========================================================================== */
:root {
  --espresso-950: #EAE4D8;
  --espresso-900: #F6F3EB;
  --espresso-850: #F0EBE1;
  --espresso-800: #F7F4EC;
  --espresso-700: #DCD6C9;
  --espresso-600: #C9BFA9;
  --cream: #1E1410;
  --cream-deep: #2B1E15;
  --champagne: #D8CCB6;
  --gold: #8A6236;
  --gold-light: #5B3E24;
  --gold-deep: #5B3E24;
  --muted: rgba(30, 20, 16, .68);
  --muted-light: rgba(30, 20, 16, .5);
  --hairline: rgba(91, 62, 36, .28);
  --hairline-soft: rgba(91, 62, 36, .16);
  --shadow-dark: 0 34px 70px -38px rgba(26, 16, 11, .42);
}

html,
body { background: #F6F3EB; color: #1E1410; }
::selection { background: var(--gold); color: #1A100B; }
::-webkit-scrollbar-track { background: #F6F3EB; }
::-webkit-scrollbar-thumb { background: #C9BFA9; border-color: #F6F3EB; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

/* Header — cocoa ink over the cream cover, paper once scrolled past it. */
.site-header.is-scrolled {
  background: #F6F3EB;
  color: #1E1410;
  box-shadow: 0 1px 0 rgba(91, 62, 36, .18);
}
.site-header.is-scrolled .brand__mark { color: #1E1410; }
.site-header.is-scrolled .brand__mark span { color: var(--gold-deep); }
.site-header.is-scrolled .brand__date { color: rgba(30, 20, 16, .5); }
.site-header.is-scrolled .site-nav__link { color: #1E1410; }
.site-header.is-scrolled .site-nav__link:hover,
.site-header.is-scrolled .site-nav__link.is-active { color: var(--gold-deep); }
.site-header.is-scrolled .btn--nav { background: var(--gold-deep); border-color: var(--gold-deep); color: #F8F5EE; }
.site-header.is-scrolled .btn--nav:hover { background: #4A3320; border-color: #4A3320; }
.site-header.is-scrolled .nav-toggle { border-color: rgba(91, 62, 36, .4); }

body.on-cover .site-header:not(.is-scrolled) { color: #1E1410; }
body.on-cover .site-header:not(.is-scrolled) .brand__mark { color: #1E1410; }
body.on-cover .site-header:not(.is-scrolled) .brand__mark span { color: var(--gold-deep); }
body.on-cover .site-header:not(.is-scrolled) .brand__date { color: rgba(30, 20, 16, .5); }
body.on-cover .site-header:not(.is-scrolled) .site-nav__link { color: #1E1410; }
body.on-cover .site-header:not(.is-scrolled) .site-nav__link:hover,
body.on-cover .site-header:not(.is-scrolled) .site-nav__link.is-active { color: var(--gold-deep); }
body.on-cover .site-header:not(.is-scrolled) .btn--nav { color: #F8F5EE; background: var(--gold-deep); border-color: var(--gold-deep); }
body.on-cover .site-header:not(.is-scrolled) .btn--nav:hover { background: #4A3320; border-color: #4A3320; }
body.on-cover .site-header:not(.is-scrolled) .nav-toggle { border-color: rgba(91, 62, 36, .4); }
body:has(.cover) .site-header:not(.is-scrolled) { color: #1E1410; }
body:has(.cover) .site-header:not(.is-scrolled) .brand__mark { color: #1E1410; }
body:has(.cover) .site-header:not(.is-scrolled) .brand__mark span { color: var(--gold-deep); }
body:has(.cover) .site-header:not(.is-scrolled) .brand__date { color: rgba(30, 20, 16, .5); }
body:has(.cover) .site-header:not(.is-scrolled) .site-nav__link { color: #1E1410; }
body:has(.cover) .site-header:not(.is-scrolled) .site-nav__link:hover,
body:has(.cover) .site-header:not(.is-scrolled) .site-nav__link.is-active { color: var(--gold-deep); }
body:has(.cover) .site-header:not(.is-scrolled) .btn--nav { color: #F8F5EE; background: var(--gold-deep); border-color: var(--gold-deep); }
body:has(.cover) .site-header:not(.is-scrolled) .btn--nav:hover { background: #4A3320; border-color: #4A3320; }
body:has(.cover) .site-header:not(.is-scrolled) .nav-toggle { border-color: rgba(91, 62, 36, .4); }

/* Buttons tuned for the old dark canvas. */
.btn--solid,
.btn--nav:hover,
.btn--outline:hover,
.mobile-menu__foot .btn { color: #1A100B; }
.btn--light { background: #FCFAF5; border-color: #FCFAF5; color: #1E1410; }
.btn--light:hover { background: #F2EEE5; border-color: #F2EEE5; }
.btn--ghost { border-color: rgba(30, 20, 16, .35); color: #1E1410; }
.btn--ghost:hover { background: rgba(30, 20, 16, .06); border-color: #1E1410; }

/* Mobile menu, bar and music control. */
.mobile-menu { color: #1E1410; }
.mobile-menu__date { color: rgba(30, 20, 16, .55); }
.mobile-menu__place { color: rgba(30, 20, 16, .5); }
.mobile-bar { background: rgba(246, 243, 235, .97); border-top-color: rgba(91, 62, 36, .25); color: #1E1410; }
.mobile-bar__label { color: rgba(30, 20, 16, .55); }
.mobile-bar__copy strong { color: #1E1410; }
.music-fab {
  background: rgba(246, 243, 235, .95);
  border-color: rgba(91, 62, 36, .45);
  color: var(--gold-deep);
  box-shadow: 0 16px 30px -14px rgba(26, 16, 11, .45);
}

/* Cards and stamps that used the old cream token as a surface. */
.story__seal,
.venue__stamp { background: #1E1410; }
.story__seal { color: #D8C7A6; }
.venue__stamp-date { color: #F7F4EC; }
.countdown-panel__note { color: rgba(30, 20, 16, .6); }
.section-head--light .eyebrow { color: var(--gold-deep); }
.section-head--light .section-title { color: #1E1410; }
.section-head--light .section-title em { color: var(--gold-deep); }
.section-head--light .section-lede { color: rgba(30, 20, 16, .68); }

/* Footer stays a deep-brown anchor at the end of the scroll. */
.site-footer {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(168, 135, 74, .12), transparent 62%),
    #1A100B;
  color: #F7F4EC;
}
.site-footer__mark,
.site-footer__names { color: #F7F4EC; }
.site-footer__mark span { color: var(--gold-light); }
.site-footer__date { color: rgba(247, 244, 236, .55); }
.site-footer__copy { color: rgba(247, 244, 236, .4); }

/* ==========================================================================
   15. Motion & no-JS
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cover__scroll svg { animation: none; }
  .intro__flash { display: none; }
  .camera__burst { display: none; }
  .intro.is-opening .camera { animation: none; }
  .intro__camera-stage,
  .polaroid,
  .print { transition: none; }
  .intro.is-emerging .print {
    opacity: 1;
    animation: none;
    transform: rotate(var(--r, 0deg));
  }
  .cover__music.is-playing .cover__vinyl-grooves { animation: none; }
  .music-fab[aria-pressed="true"] .music-fab__rings { animation: none; }
  .intro::before { opacity: .04; }
  .almanac__heart,
  .almanac__num,
  .almanac__day--wedding::before,
  .timeline__end { animation: none; }
  .timeline::before { transform: translateX(-50%) scaleY(1); transition: none; }
  .timeline__dot { transform: translateX(-50%); opacity: 1; transition: none; }
}

html:not(.js) .intro { display: none; }
html:not(.js) body { overflow: auto; }
html:not(.js) .reveal-hero { opacity: 1 !important; }

@media print {
  .intro,
  .site-header,
  .mobile-bar,
  .cover__scroll,
  .music-fab,
  .music-embed,
  .lightbox,
  .site-footer__replay { display: none !important; }
  body { background: #fff; color: #1B100B; }
  .cover,
  .save-date,
  .story,
  .venue,
  .gallery,
  .entourage,
  .dress-code,
  .rsvp,
  .site-footer { background: #fff !important; color: #1B100B !important; }
  .section-title,
  .cover__names,
  .cover__date,
  .cover__venue { color: #1B100B !important; }
  .dress-code::before { display: none; }
  .lacecard { border: 0; background: #fff; color: #1B100B; }
  .lace-script,
  .lace-title { color: #1B100B; }
}

/* Program sequence - mobile: one column, text then image. */
@media (max-width: 820px) {
  .timeline__item { grid-template-columns: 1fr; }
  .timeline__copy { grid-row: auto; }
  .timeline__item:nth-child(odd) .timeline__art,
  .timeline__item:nth-child(even) .timeline__art {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    display: block;
    width: 132px;
    margin: 20px 0 0 40px;
  }
}

/* Program sequence - mobile: centred rail, items alternate either side. */
@media (max-width: 820px) {
  .timeline { padding: 40px 14px 88px; }
  .timeline::before { left: 50%; }
  .timeline__item {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: 0;
    padding: 0 0 30px;
  }
  .timeline__dot {
    left: 50%;
    top: 50%;
    margin-top: -10px;
    width: 20px;
    height: 18px;
  }
  .timeline__item:nth-child(odd) .timeline__dot,
  .timeline__item:nth-child(even) .timeline__dot { top: 50%; margin-top: -10px; }
  .timeline__item:nth-child(odd) .timeline__copy,
  .timeline__item:nth-child(even) .timeline__copy {
    margin: 0;
    padding: 0 24px;
    width: auto;
    text-align: right;
  }
  .timeline__item:nth-child(odd) .timeline__copy { grid-column: 1; justify-self: end; }
  .timeline__item:nth-child(even) .timeline__copy { grid-column: 2; justify-self: start; text-align: left; }
  .timeline__copy { grid-row: 1; }
  .timeline__copy time { font-size: 23px; }
  .timeline__copy time::after { width: 28px; margin: 10px 0 0; }
  .timeline__item:nth-child(odd) .timeline__copy time::after { margin-left: auto; margin-right: 0; }
  .timeline__item:nth-child(even) .timeline__copy time::after { margin-left: 0; margin-right: auto; }
  .timeline__copy h3 { margin-top: 10px; font-size: 9px; letter-spacing: .2em; }
  .timeline__copy p { margin: 8px 0 0; font-size: 11.5px; line-height: 1.6; max-width: none; }
  .timeline__item:nth-child(odd) .timeline__copy p { margin-left: 0; }
  .timeline__item:nth-child(odd) .timeline__art,
  .timeline__item:nth-child(even) .timeline__art {
    grid-row: 1;
    display: block;
    width: 88px;
    margin: 0;
    justify-self: center;
  }
  .timeline__item:nth-child(odd) .timeline__art { grid-column: 2; }
  .timeline__item:nth-child(even) .timeline__art { grid-column: 1; }
  .timeline__end { left: 50%; }
}
/* Program sequence - mobile alignment: each block hugs the centred rail. */
@media (max-width: 820px) {
  .timeline__item:nth-child(odd) .timeline__copy,
  .timeline__item:nth-child(odd) .timeline__copy p,
  .timeline__item:nth-child(odd) .timeline__copy h3,
  .timeline__item:nth-child(odd) .timeline__copy time { text-align: right; }
  .timeline__item:nth-child(even) .timeline__copy,
  .timeline__item:nth-child(even) .timeline__copy p,
  .timeline__item:nth-child(even) .timeline__copy h3,
  .timeline__item:nth-child(even) .timeline__copy time { text-align: left; }
  .timeline__item:nth-child(odd) .timeline__copy time::after { margin-left: auto; margin-right: 0; }
  .timeline__item:nth-child(even) .timeline__copy time::after { margin-left: 0; margin-right: auto; }
  .timeline__item:nth-child(odd) .timeline__copy p,
  .timeline__item:nth-child(even) .timeline__copy p { margin-top: 8px; }
}
/* Program sequence - mobile: a little more room above the rail so the lace
   can bend into it. */
@media (max-width: 820px) {
  .program .timeline { margin-top: 66px; }
}
/* Program sequence - mobile: the straight rail starts below the lace's bend. */
@media (max-width: 820px) {
  .timeline::before { top: 72px; }
}
/* Program sequence - mobile: rail starts where the lace finishes. */
@media (max-width: 820px) {
  .timeline::before { top: var(--rail-top, 72px); }
}
/* Program sequence - mobile: tighter space above the first event. */
@media (max-width: 820px) {
  .program .timeline { margin-top: 40px; }
  .timeline { padding-top: 8px; }
}
/* Program sequence - mobile: straight rail from the top again. */
@media (max-width: 820px) {
  .timeline::before { top: 6px; }
}
/* Program sequence - mobile: room for the lace's arc into a straight rail. */
@media (max-width: 820px) {
  .program .timeline { margin-top: 58px; }
}
/* Program sequence - mobile: more room for a smooth final curve. */
@media (max-width: 820px) {
  .program .timeline { margin-top: 104px; }
}
/* Program sequence - mobile: close the gap above the rail. */
@media (max-width: 820px) {
  .program .timeline { margin-top: 30px; }
}
/* Program sequence - mobile: room for the curve below the heading. */
@media (max-width: 820px) {
  .program .timeline { margin-top: 76px; }
}
/* Save the date - refined calendar actions: paper card, gold hairline,
   letterpress type, and a quiet diamond between the two small links. */
.save-date__actions {
  gap: 16px 26px;
}
.save-date__add {
  position: relative;
  padding: 15px 30px;
  border-color: rgba(168, 135, 74, .5);
  background: linear-gradient(180deg, #fffdf7 0%, #f4ecda 100%);
  color: #43301c;
  font-size: 9.5px;
  letter-spacing: .28em;
  box-shadow: 0 14px 28px -22px rgba(40, 24, 12, .6);
}
.save-date__add::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(168, 135, 74, .25);
  pointer-events: none;
}
.save-date__add svg { width: 14px; height: 14px; color: #8a6236; }
.save-date__add:hover {
  background: linear-gradient(180deg, #fffef9 0%, #efe4cd 100%);
  border-color: rgba(168, 135, 74, .85);
  color: #2b1b10;
  box-shadow: 0 18px 30px -22px rgba(40, 24, 12, .65);
}
.save-date__ics,
.save-date__maps {
  border-bottom: 0;
  padding: 2px 0;
  color: #7a5a34;
  font-size: 8.5px;
  letter-spacing: .22em;
}
.save-date__ics { position: relative; }
.save-date__ics::after {
  content: "";
  position: absolute;
  right: -15px;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1px;
  background: rgba(138, 98, 54, .45);
  transform: rotate(45deg);
}
.save-date__ics:hover,
.save-date__maps:hover {
  color: #2b1b10;
  border-bottom-color: transparent;
}
@media (max-width: 820px) {
  .save-date__actions { gap: 14px 22px; }
  .save-date__add {
    flex: 1 0 100%;
    width: 100%;
    max-width: 300px;
    margin-inline: auto;
    padding: 14px 22px;
    font-size: 9px;
    letter-spacing: .22em;
  }
}
/* Program sequence - mobile: tidy gap above the rail. */
@media (max-width: 820px) {
  .program .timeline { margin-top: 44px; }
}
/* Opening screen - no scrollbar while the camera intro plays. */
html:not(.intro-seen) { scrollbar-width: none; -ms-overflow-style: none; }
html:not(.intro-seen)::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Landing - deep coffee brown with a warm light-brown glow, keeping the
   hair-string frame. */
.cover {
  background: linear-gradient(180deg, #251a12 0%, #1b120c 52%, #1f150e 100%);
}
.cover__grain {
  opacity: .1;
  mix-blend-mode: soft-light;
}
.cover__scroll { color: rgba(235, 222, 196, .62); }
.cover__scroll:hover { color: #F3E7CD; }
@media (max-width: 820px) {
  .cover__enter {
    color: #E7D6B6;
    border-bottom-color: rgba(216, 188, 140, .5);
  }
  .cover__enter:hover { color: #FFF9EC; border-color: #FFF9EC; }
}
/* Landing - header legibility on the dark cover. */
body:has(.cover) .site-header:not(.is-scrolled),
body.on-cover .site-header:not(.is-scrolled) { color: #F6F1E6; }
body:has(.cover) .site-header:not(.is-scrolled) .brand__mark,
body.on-cover .site-header:not(.is-scrolled) .brand__mark { color: #F6F1E6; }
body:has(.cover) .site-header:not(.is-scrolled) .brand__mark span,
body.on-cover .site-header:not(.is-scrolled) .brand__mark span { color: var(--gold-light); }
body:has(.cover) .site-header:not(.is-scrolled) .brand__date,
body.on-cover .site-header:not(.is-scrolled) .brand__date { color: rgba(246, 241, 230, .55); }
body:has(.cover) .site-header:not(.is-scrolled) .site-nav__link,
body.on-cover .site-header:not(.is-scrolled) .site-nav__link { color: #F6F1E6; }
body:has(.cover) .site-header:not(.is-scrolled) .site-nav__link:hover,
body:has(.cover) .site-header:not(.is-scrolled) .site-nav__link.is-active,
body.on-cover .site-header:not(.is-scrolled) .site-nav__link:hover,
body.on-cover .site-header:not(.is-scrolled) .site-nav__link.is-active { color: var(--gold-light); }
body:has(.cover) .site-header:not(.is-scrolled) .btn--nav,
body.on-cover .site-header:not(.is-scrolled) .btn--nav {
  color: #241811;
  background: #EFE4CB;
  border-color: #EFE4CB;
}
body:has(.cover) .site-header:not(.is-scrolled) .btn--nav:hover,
body.on-cover .site-header:not(.is-scrolled) .btn--nav:hover {
  background: #FFF8E8;
  border-color: #FFF8E8;
}
body:has(.cover) .site-header:not(.is-scrolled) .nav-toggle,
body.on-cover .site-header:not(.is-scrolled) .nav-toggle { border-color: rgba(247, 244, 236, .4); }
/* Landing - full-strength nav type on the dark cover. */
body:has(.cover) .site-header:not(.is-scrolled) .site-nav__link,
body.on-cover .site-header:not(.is-scrolled) .site-nav__link { opacity: .92; }
body:has(.cover) .site-header:not(.is-scrolled) .site-nav__link:hover,
body:has(.cover) .site-header:not(.is-scrolled) .site-nav__link.is-active,
body.on-cover .site-header:not(.is-scrolled) .site-nav__link:hover,
body.on-cover .site-header:not(.is-scrolled) .site-nav__link.is-active { opacity: 1; }

/* Monogram brand — the supplied R&G artwork replaces the typographic lockup.
   The transparent cutout is cream on the dark cover and cocoa ink on the
   cream header once scrolled. */
.brand__mark { width: 64px; line-height: 0; }
.brand__mark img {
  display: block;
  width: 100%;
  height: auto;
  opacity: .95;
  filter: brightness(0) invert(1) sepia(.45) saturate(1.15) brightness(1.1);
}
.site-header.is-scrolled .brand__mark img {
  opacity: 1;
  filter: none;
}
body.nav-open .site-header .brand__mark img {
  filter: brightness(0) invert(1) sepia(.45) saturate(1.15) brightness(1.1);
}
@media (max-width: 700px) {
  .brand__mark { width: 56px; }
  .brand__date { font-size: 7px; letter-spacing: .24em; }
}
/* ==========================================================================
   Venue - "The setting": a wide dusk band and centred copy on the same
   espresso paper as the landing page.
   ========================================================================== */
.venue {
  background: linear-gradient(180deg, #251a12 0%, #1b120c 52%, #1f150e 100%);
  overflow: hidden;
}
.venue .container { position: relative; }
.venue__kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 0 18px;
    color: #C9A96E;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .34em;
    line-height: 1.4;
    text-transform: uppercase;
}
.venue__kicker::before,
.venue__kicker::after {
  content: "";
  width: 36px;
  height: 1px;
  flex: none;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 110, .8));
}
.venue__kicker::after {
  background: linear-gradient(90deg, rgba(201, 169, 110, .8), transparent);
}
.venue__band {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: #1a110b;
  box-shadow: 0 54px 84px -52px rgba(0, 0, 0, .92);
}
.venue__band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.86) sepia(.12) contrast(1.02) brightness(.92);
  transform: scale(1.015);
  transition: transform 6s var(--ease-soft);
}
.venue__band:hover img { transform: scale(1.045); }
.venue__band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(74% 92% at 50% 40%, transparent 28%, rgba(24, 15, 10, .74) 100%),
    linear-gradient(180deg, rgba(29, 19, 12, .3), transparent 36%, rgba(29, 19, 12, .52));
}
.venue__band::after {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 2;
  border: 1px solid rgba(201, 169, 110, .32);
  pointer-events: none;
}
.venue__band figcaption {
  position: absolute;
  left: 26px;
  bottom: 22px;
  z-index: 3;
  color: rgba(247, 244, 236, .92);
  font-size: 8px;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.venue__band figcaption::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  margin-right: 10px;
  vertical-align: 3px;
  background: rgba(201, 169, 110, .8);
}
.venue__copy {
  position: relative;
  max-width: 800px;
  margin: clamp(28px, 3.4vw, 67px) auto 0;
  text-align: center;
}
.venue .section-title {
  margin-top: 0;
  color: #F3E9D6;
  font-family: var(--script);
  font-size: clamp(2.5em, 6vw, 88px);
  font-weight: 400;
  line-height: 1.05;
}
.venue .section-title em { font-style: normal; color: #C9A96E; }
.venue__address {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 17px;
  color: #D8C6A6;
  font-size: 19.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.venue__address svg { width: 22px; height: 22px; color: #C9A96E; }
.venue__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: clamp(20px, 2.4vw, 28px);
}
.venue__actions .btn--outline {
  position: relative;
  padding: 15px 30px;
  border: 1px solid rgba(201, 169, 110, .55);
  border-radius: 999px;
  background: rgba(201, 169, 110, .07);
  color: #EFE4CB;
  font-size: 9px;
  letter-spacing: .3em;
  box-shadow: none;
}
.venue__actions .btn--outline svg {
  width: 12px;
  height: 12px;
  margin-left: 2px;
  transition: transform .35s var(--ease);
}
.venue__actions .btn--outline:hover {
  background: linear-gradient(180deg, #E9D6AE, #C9A96E);
  border-color: #E9D6AE;
  color: #241811;
  box-shadow: 0 18px 32px -20px rgba(0, 0, 0, .85);
}
.venue__actions .btn--outline:hover svg { transform: translate(2px, -2px); }
@media (max-width: 900px) {
  .venue__band { aspect-ratio: 4 / 3; }
  .venue__band::after { inset: 9px; }
  .venue__band figcaption { left: 18px; bottom: 15px; }
  .venue__copy { margin-top: 30px; }
}
@media (max-width: 560px) {
  .venue__band { aspect-ratio: 3 / 2; }
  .venue__kicker::before,
  .venue__kicker::after { width: 22px; }
  .venue__address {
    padding: 7px 13px;
    font-size: 13px;
    letter-spacing: .2em;
  }
}

/* ==========================================================================
   Our story — cinematic carousel, marquee lockup, chapter timeline
   ========================================================================== */
.story-film {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(100vh, 1040px);
  padding: clamp(76px, 9vw, 120px) clamp(20px, 5vw, 48px);
  overflow: hidden;
  isolation: isolate;
  background: #0a0806;
  color: #EFE5D2;
}

/* ---------- carousel ---------- */
.story-film__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0a0806;
}
.story-film__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  opacity: 0;
  animation: storyFilmSlide 35s linear infinite;
  animation-delay: calc(var(--i) * 5s);
  will-change: opacity, transform;
}
@keyframes storyFilmSlide {
  0%   { opacity: 0; transform: scale(1.03); }
  3%   { opacity: 1; }
  14%  { opacity: 1; transform: scale(1.09); }
  17%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1.09); }
}

/* ---------- film grade ---------- */
.story-film__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(54% 60% at 50% 48%, rgba(5, 4, 3, .66), transparent 76%),
    radial-gradient(100% 84% at 50% 44%, transparent 24%, rgba(5, 4, 3, .72) 100%),
    linear-gradient(180deg, rgba(4, 3, 2, .92), rgba(4, 3, 2, .18) 22%, rgba(4, 3, 2, .18) 72%, rgba(4, 3, 2, .96));
}
.story-film__grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
/* ---------- lockup ---------- */
.story-film__inner {
  position: relative;
  z-index: 5;
  width: min(880px, 100%);
  text-align: center;
}
.story-film__orn {
  display: block;
  position: relative;
  width: 150px;
  height: 7px;
  margin: 0 auto 22px;
}
.story-film__orn::before,
.story-film__orn::after {
  content: "";
  position: absolute;
  top: 3px;
  width: 58px;
  height: 1px;
}
.story-film__orn::before {
  right: calc(50% + 12px);
  background: linear-gradient(90deg, transparent, rgba(199, 169, 107, .55));
}
.story-film__orn::after {
  left: calc(50% + 12px);
  background: linear-gradient(90deg, rgba(199, 169, 107, .55), transparent);
}
.story-film__orn i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 7px;
  height: 7px;
  border: 1px solid #C7A96B;
  transform: translateX(-50%) rotate(45deg);
}
.story-film__kicker {
  margin: 0 0 18px;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .58em;
  text-transform: uppercase;
  color: #C7A96B;
}
.story-film__script {
      margin-top: 14px;
    font-family: var(--script);
    font-size: clamp(56px, 8.4vw, 96px);
    font-weight: 400;
    line-height: .95;
   
  color: #EFE5D2;
  text-shadow: 0 3px 30px rgba(0, 0, 0, .55);
}
.story-film__rule {
  display: block;
  width: 170px;
  height: 1px;
  margin: 16px auto 0;
  background: linear-gradient(90deg, transparent, #C7A96B, transparent);
}
.story-film__sub {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-size: 13.5px;
  font-style: italic;
  letter-spacing: .04em;
  color: rgba(239, 229, 210, .7);
}
.story-film__copy {
  margin: 32px auto 0;
  max-width: 552px;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.72;
  color: rgba(239, 229, 210, .84);
  text-shadow: 0 2px 20px rgba(0, 0, 0, .72);
}
.story-film__copy + .story-film__copy { margin-top: 13px; }
.story-film__sign {
  margin: 18px 0 0;
  font-family: var(--script);
  font-size: 26px;
  line-height: 1;
  color: #C7A96B;
}

/* ---------- chapter timeline ---------- */
.story-film__rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  width: min(760px, 100%);
  margin: 40px auto 0;
  padding: 0;
  list-style: none;
}
.story-film__rail li {
  position: relative;
  padding: 2px 6px 0;
}
.story-film__chapter {
  display: block;
  font-family: var(--sans);
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: .32em;
  text-indent: .32em;
  text-transform: uppercase;
  color: #D8BC84;
}
.story-film__chapter::before {
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  margin: 0 auto 9px;
  background: rgba(199, 169, 107, .6);
}
.story-film__year {
  display: block;
  margin-top: 10px;
  font-family: var(--script);
  font-size: clamp(19px, 1.6vw, 21px);
  line-height: 1;
  color: #C7A96B;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
}
.story-film__label {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(239, 229, 210, .9);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
}
.story-film__note {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(239, 229, 210, .72);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .65);
}

@media (max-width: 900px) {
  .story-film { min-height: min(100vh, 820px); }
  .story-film__rail { gap: 22px; }
  .story-film__copy { font-size: 14.5px; }
}

@media (max-width: 700px) {
  .story-film {
    min-height: 0;
    padding: 82px 22px 88px;
  }
  .story-film__orn { margin-bottom: 20px; }
  .story-film__kicker { letter-spacing: .46em; text-indent: .46em; }
  .story-film__copy {
    margin-top: 26px;
    font-size: 14.5px;
    line-height: 1.68;
  }
  .story-film__rail {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: min(340px, 100%);
    margin-top: 30px;
  }
  .story-film__rail li { padding: 20px 0; }
  .story-film__rail li + li { border-top: 1px solid rgba(199, 169, 107, .22); }
  .story-film__chapter::before { display: none; }
  .story-film__year { margin-top: 4px; font-size: 22px; }
  .story-film__note { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .story-film__slide { animation: none; }
  .story-film__slide:first-child { opacity: 1; }
}

/* ==========================================================================
   Interlude — one plain photograph between the programme and the gallery
   ========================================================================== */
.interlude {
  position: relative;
  height: clamp(340px, 52vw, 940px);
  overflow: hidden;
  background: #0a0806;
  border-top: 1px solid var(--hairline-soft);
  border-bottom: 1px solid var(--hairline-soft);
}
.interlude__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  filter: grayscale(1) contrast(1.14) brightness(.92);
}
/* Cinematic grade: soft vignette and a fine film grain over the still. */
.interlude::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 92% at 50% 46%, transparent 36%, rgba(6, 5, 4, .34) 76%, rgba(6, 5, 4, .7) 100%),
    linear-gradient(180deg, rgba(6, 5, 4, .26), transparent 24%, transparent 74%, rgba(6, 5, 4, .32));
}
.interlude::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .15;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

@media (max-width: 700px) {
  .interlude { height: clamp(240px, 62vw, 340px); }
  .interlude__photo { object-position: 62% center; }
}


/* The ampersand reads at the same colour as the R and G. */
.brand__mark span,
.site-header.is-scrolled .brand__mark span,
body:has(.cover) .site-header:not(.is-scrolled) .brand__mark span,
body.on-cover .site-header:not(.is-scrolled) .brand__mark span,
body.nav-open .site-header .brand__mark span { color: inherit; }

/* Program — inline time and event label, with the time nearest the centre rail. */
.program .timeline__item:nth-child(odd) .timeline__copy,
.program .timeline__item:nth-child(even) .timeline__copy {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 28px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
  text-align: left;
  white-space: nowrap;
}
.program .timeline__item:nth-child(odd) .timeline__copy {
  grid-column: 1;
  justify-self: stretch;
  flex-direction: row-reverse;
  justify-content: flex-start;
  text-align: right;
}
.program .timeline__item:nth-child(even) .timeline__copy {
  grid-column: 2;
  justify-self: stretch;
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
}
.program .timeline__copy time {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}
.program .timeline__copy time::after { display: none; }
.program .timeline__copy h3 {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}
.program .timeline__copy h3::before {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  flex: 0 0 auto;
  margin-right: 14px;
  background: #b08d57;
}
@media (max-width: 820px) {
  .program .timeline__item:nth-child(odd) .timeline__copy {
    gap: clamp(4px, 1vw, 8px);
    padding: 0 clamp(26px, 7vw, 32px) 0 clamp(4px, 1.2vw, 8px);
  }
  .program .timeline__item:nth-child(even) .timeline__copy {
    gap: clamp(4px, 1vw, 8px);
    padding: 0 clamp(4px, 1.2vw, 8px) 0 clamp(26px, 7vw, 32px);
  }
  .program .timeline__copy time {
    font-size: clamp(15px, 4.8vw, 21px);
  }
  .program .timeline__copy h3 {
    font-size: clamp(7px, 2vw, 9px);
    letter-spacing: .14em;
  }
  .program .timeline__copy h3::before {
    width: clamp(10px, 2.5vw, 16px);
    margin-right: clamp(4px, 1vw, 7px);
  }
}