/* ============ tokens ============ */
:root {
  --ivory: #FBF4F0;
  --card: #F5E3DB;
  --blush: #F2DCD4;
  --gold: #B08A52;
  --gold-deep: #86622F;
  --ink: #5A4036;
  --ink-soft: #7A5F53;
  --line: #DCC3B0;

  --script: 'Pinyon Script', 'Snell Roundhand', cursive;
  --serif: 'Cormorant Garamond', Cormorant, Garamond, 'Times New Roman', serif;

  /* foil for lettering: darker than the ornament gold so thin script strokes stay legible */
  --foil-text: linear-gradient(100deg, #7A5526 0%, #A98347 28%, #D4B576 44%, #9C7336 60%, #B99355 78%, #7A5526 100%);
  --foil-btn: linear-gradient(135deg, #7A5628 0%, #9E7840 50%, #7F5B2C 100%);
  --ease-drape: cubic-bezier(.65, 0, .25, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* mobile first; tablets and desktops read from further away, so everything sized in rem steps up */
@media (min-width: 760px) { html { font-size: 106.25%; } }
@media (min-width: 1200px) { html { font-size: 112.5%; } }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.65;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; height: 100svh; }
img, svg { max-width: 100%; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.foil, .hero__names, .script-title, .closing__names {
  background: var(--foil-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.script-title {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(2.5rem, 10vw, 3.4rem);
  line-height: 1.15;
  margin: 0 0 .45em;
  padding: 0 .15em;           /* room for the script's swashes inside the clipped background */
  text-wrap: balance;
}
.amp { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* ============ Bismillah, in Nastaliq calligraphy ============ */
.bismillah {
  width: fit-content;
  margin: 0 auto;
  padding: 0 .35em;
  font-family: 'Gulzar', 'Noto Nastaliq Urdu', 'Amiri', serif;
  font-weight: 400;
  line-height: 1.9;
  direction: rtl;
  background: var(--foil-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gate__bismillah {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: max(calc(env(safe-area-inset-top) + 6px), 2svh);
  font-size: clamp(1.15rem, 5.2vw, 1.8rem);
  pointer-events: none;
}
.hero__bismillah { font-size: 1.2rem; font-size: max(.9rem, 6cqw); line-height: 1.75; }

/* ============ 0. loading screen ============ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  background: radial-gradient(75% 60% at 50% 42%, #FFFBF8, #F8EBE5 60%, #EFD9D0);
  transition: opacity .8s ease, visibility .8s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__mark { position: relative; width: 132px; aspect-ratio: 1; }
.loader__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.loader__track { fill: none; stroke: rgba(176, 138, 82, .18); stroke-width: 1.5; }
.loader__fill {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .35s ease-out;
}
.loader__mono {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: var(--serif), Georgia, serif;
  font-style: italic;
  font-size: 2.1rem;
  letter-spacing: .04em;
  color: var(--gold-deep);
}
.loader__mono span { font-size: .6em; margin: 0 .12em; }
.loader__text { margin: 0; font-style: italic; font-size: 1.05rem; color: var(--ink-soft); }
.loader__text span { font-style: normal; font-variant-numeric: tabular-nums; margin-left: .35em; color: var(--gold-deep); }
@media (prefers-reduced-motion: reduce) { .loader__fill { transition: none; } }

/* ============ 1. gate ============ */
.gate {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: none;
}
.no-js .gate { display: none; }
.gate__veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.gate__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.gate__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, rgba(90, 50, 30, 0) 55%, rgba(90, 50, 30, .16) 100%);
}
.gate__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
}
.gate__lock {
  position: relative;
  display: block;
  width: clamp(170px, 54vw, 240px);
  aspect-ratio: 200 / 290;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 45% / 35%;
}
.gate__lock svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gate__lock::after {
  content: '';
  position: absolute;
  left: 34%; right: 34%; top: 36%; bottom: 36%;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 224, 150, 0);
  transition: box-shadow .35s;
  pointer-events: none;
}
.gate__lock.is-near::after { box-shadow: 0 0 40px 18px rgba(255, 224, 150, .6); }
.gate__lock:focus-visible { outline: 1px solid var(--gold); outline-offset: 10px; }

.gate__key {
  position: relative;
  z-index: 2;
  width: clamp(140px, 44vw, 200px);
  aspect-ratio: 260 / 90;
  margin-top: clamp(18px, 5svh, 40px);
  touch-action: none;
  cursor: grab;
  will-change: transform;
  filter: drop-shadow(0 3px 2.5px rgba(70, 40, 15, .45));   /* keeps the gold key readable over the gold lock */
}
.gate__key.is-dragging { cursor: grabbing; }
/* the key's two faces: the side profile, and its head standing at right angles at the bow */
.key3d { position: absolute; inset: 0; transform-style: preserve-3d; }
.key3d .key { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; backface-visibility: hidden; }
.key3d .key--face {
  left: calc(176 / 260 * 100%);
  top: calc(15 / 90 * 100%);
  width: calc(82 / 260 * 100%);
  height: calc(60 / 90 * 100%);
  overflow: hidden;
  transform: rotateY(90deg);
}
.gate__key:focus-visible { outline: 1px solid var(--gold); outline-offset: 6px; border-radius: 8px; }

.gate__names {
  margin: clamp(20px, 5svh, 40px) 0 0;
  font-size: 1.15rem;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: .3em;
  color: var(--gold-deep);
}
.gate__hint { margin: 4px 0 0; font-style: italic; font-size: 1.05rem; color: var(--ink-soft); }
/* a soft ivory halo so the door's gold mouldings don't run through the lettering */
.gate__names, .gate__hint {
  position: relative;
  z-index: 1;
  padding: 1px 14px;
  border-radius: 999px;
  background: rgba(249, 239, 234, .92);
  box-shadow: 0 0 14px 10px rgba(249, 239, 234, .92);
}

.gate__glow {
  position: absolute;
  width: 320px; height: 320px;
  margin: -160px 0 0 -160px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFCF4 0%, rgba(255, 238, 196, .8) 22%, rgba(255, 222, 160, .3) 46%, rgba(255, 222, 160, 0) 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.sparkle {
  position: absolute;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: linear-gradient(135deg, #FFF7DC, #D8B26A);
  box-shadow: 0 0 8px rgba(255, 228, 170, .95);
  pointer-events: none;
  z-index: 4;
}

/* ============ 2. hero ============ */
.hero {
  --o: .3;                       /* how far the curtains stay open (fraction of each half) */
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 380px;
  overflow: hidden;
  isolation: isolate;
  container-type: size;          /* lets the arch size itself from the hero's real width and height */
  background:
    radial-gradient(60% 45% at 50% 38%, rgba(255, 248, 240, .9), rgba(255, 248, 240, 0) 70%),
    linear-gradient(180deg, #F4E2DA 0%, #EFD5CA 60%, #E6C4B6 100%);
}
@media (min-width: 760px) { .hero { --o: .5; } }
@media (min-width: 1200px) { .hero { --o: .62; } }

.hero__scene { position: absolute; inset: 0; }

/* The stage is exactly the drawn arch (400 × 720 units): as tall as the hero allows, never wider than the
   screen can show. Everything inside is placed in fractions of it, so it holds on every screen size. */
.hero__stage {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(108vw, 95vh * 400 / 720);
  width: min(108cqw, 95cqh * 400 / 720);
  aspect-ratio: 400 / 720;
  transform: translateX(-50%);
  container-type: inline-size;   /* hero text sizes itself in cqw: fractions of the arch's width */
}
.hero__arch { position: absolute; inset: 0; }
.hero__arch svg { display: block; width: 100%; height: 100%; }
.hero__arch .flame { animation: flicker 2.8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.hero__arch .flame:nth-of-type(3n) { animation-delay: -1.3s; }
@keyframes flicker { 0% { transform: scale(1, 1); opacity: .95; } 50% { transform: scale(.92, 1.08); opacity: 1; } 100% { transform: scale(1.04, .94); opacity: .85; } }

/* The text column fills the arch's opening between the chandelier and the roses. The names and date are
   centred in it and "Scroll down" sits at its foot, so nothing can collide however short the screen. */
.hero__copy {
  position: absolute;
  z-index: 1;
  left: 17%;
  right: 17%;
  top: 35.5%;
  bottom: 12.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero__text { margin-block: auto; width: 100%; }
.hero__pre { margin: 0 0 .2em; font-style: italic; font-size: 1rem; font-size: max(.75rem, 4.6cqw); line-height: 1.3; color: var(--ink-soft); }
.hero__names {
  margin: 0;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(3.4rem, 17vw, 6rem);
  font-size: 19cqw;
  line-height: .95;
  padding: 0 .2em;
}
.hero__names span { display: block; }
.hero__names .amp { font-size: .42em; line-height: 1.2; }
.hero__date { margin: .8em 0 0; font-size: 1rem; font-size: max(.75rem, 4.5cqw); font-weight: 500; letter-spacing: .03em; line-height: 1.35; text-wrap: balance; }
.hero__place { margin: .15em 0 0; font-size: 1rem; font-size: max(.75rem, 4.5cqw); font-style: italic; line-height: 1.35; color: var(--ink-soft); }

/* curtains: the fabric gathers (scaleX) while the silhouette pinches at the tie-back (clip-path) */
.curtain {
  position: absolute;
  top: 0; bottom: 0;
  width: 50.5%;
  z-index: 2;
  pointer-events: none;
  transition: clip-path 2.6s var(--ease-drape);
}
/* Both states share the same 15 points so clip-path can animate between them.
   Open, the inner edge follows a drape: full at the top, pinched at the tie-back (62%), pooling at the floor. */
.curtain--left {
  left: 0;
  clip-path: polygon(0 0, 100% 0, 100% 10%, 100% 20%, 100% 30%, 100% 40%, 100% 50%, 100% 58%, 100% 62%,
    100% 66%, 100% 74%, 100% 84%, 100% 92%, 100% 100%, 0 100%);
}
.curtain--right {
  right: 0;
  clip-path: polygon(100% 0, 0 0, 0 10%, 0 20%, 0 30%, 0 40%, 0 50%, 0 58%, 0 62%,
    0 66%, 0 74%, 0 84%, 0 92%, 0 100%, 100% 100%);
}
.curtain__fabric {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transition: transform 2.6s var(--ease-drape);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 30%, rgba(110, 55, 45, .1) 100%),
    repeating-linear-gradient(90deg, #E8C4B9 0, #F7E4DD 14px, #F2D7CE 24px, #D8AB9F 40px, #EFD0C7 52px, #E8C4B9 64px);
}
.curtain--right .curtain__fabric { transform-origin: right center; }
.hero.is-open .curtain__fabric { transform: scaleX(var(--o)); }
.hero.is-open .curtain--left {
  clip-path: polygon(0 0, calc(var(--o) * 100%) 0, calc(var(--o) * 99%) 10%, calc(var(--o) * 95%) 20%,
    calc(var(--o) * 88%) 30%, calc(var(--o) * 77%) 40%, calc(var(--o) * 63%) 50%, calc(var(--o) * 52%) 58%,
    calc(var(--o) * 47%) 62%, calc(var(--o) * 52%) 66%, calc(var(--o) * 66%) 74%, calc(var(--o) * 83%) 84%,
    calc(var(--o) * 96%) 92%, calc(var(--o) * 104%) 100%, 0 100%);
}
.hero.is-open .curtain--right {
  clip-path: polygon(100% 0, calc(100% - var(--o) * 100%) 0, calc(100% - var(--o) * 99%) 10%, calc(100% - var(--o) * 95%) 20%,
    calc(100% - var(--o) * 88%) 30%, calc(100% - var(--o) * 77%) 40%, calc(100% - var(--o) * 63%) 50%, calc(100% - var(--o) * 52%) 58%,
    calc(100% - var(--o) * 47%) 62%, calc(100% - var(--o) * 52%) 66%, calc(100% - var(--o) * 66%) 74%, calc(100% - var(--o) * 83%) 84%,
    calc(100% - var(--o) * 96%) 92%, calc(100% - var(--o) * 104%) 100%, 100% 100%);
}

/* gold rope wrapped round each curtain at its waist, with a tassel hanging from the inner end */
.tieback {
  position: absolute;
  top: 62%;
  z-index: 3;
  width: calc(50.5% * var(--o) * .47 + 10px);
  height: 7px;
  margin-top: -4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #F2DDA4, #B08A52 55%, #7F5B2C);
  box-shadow: 0 2px 4px rgba(90, 55, 30, .3);
  opacity: 0;
  transition: opacity .8s 1.8s;
  pointer-events: none;
}
.tieback--left { left: -4px; transform: rotate(-4deg); transform-origin: left; }
.tieback--right { right: -4px; transform: rotate(4deg); transform-origin: right; }
.tieback::after {
  content: '';
  position: absolute;
  top: 3px;
  width: 12px;
  height: 30px;
  background: linear-gradient(90deg, #8A6430, #E9CF8E 45%, #A47635);
  clip-path: polygon(35% 0, 65% 0, 70% 22%, 100% 100%, 0 100%, 30% 22%);
  border-radius: 0 0 4px 4px;
}
.tieback--left::after { right: -2px; }
.tieback--right::after { left: -2px; }
.hero.is-open .tieback { opacity: 1; }

.hero__valance {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(46px, 8svh, 84px);
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(120, 70, 55, .16));
}
.hero__valance svg { display: block; width: 100%; height: 100%; }

.hero__flowers { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; pointer-events: none; }
.hero__flowers svg {
  position: absolute;
  bottom: -3vw;
  width: clamp(150px, 44vw, 320px);
  width: max(130px, min(44cqw, 28cqh, 320px));     /* shorter screens get smaller corner roses */
  filter: drop-shadow(0 6px 10px rgba(120, 70, 55, .15));
}
.hero__flowers .is-left { left: -4vw; }
.hero__flowers .is-right { right: -4vw; }

.doves { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.alpha-video { position: absolute; pointer-events: none; }
.dove {
  position: absolute;
  left: 0; top: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 3px 4px rgba(110, 70, 55, .22));
}
.dove.is-far { filter: drop-shadow(0 2px 3px rgba(110, 70, 55, .16)) blur(.3px); }
.dove__svg { display: block; width: 100%; height: auto; overflow: visible; animation: bob var(--flap) ease-in-out infinite; }
.dove__wing { transform-box: view-box; transform-origin: 66px 40px; animation: flap var(--flap) ease-in-out infinite; }
.dove__wing--far { animation-delay: calc(var(--flap) * -.12); }
@keyframes flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(-.72) skewX(-8deg); } }
@keyframes bob { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-2px); } }

/* sits at the foot of the arch's text column */
.hero__scroll {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: .5em;
  font-family: var(--script);
  font-size: 1.4rem;
  font-size: 6cqw;
  line-height: 1;
  color: var(--ink-soft);
  text-decoration: none;
}
.hero:not(.is-open) .hero__scroll { opacity: 0; }
.hero__scroll svg { width: 1em; margin-top: .25em; animation: drift 2.4s ease-in-out infinite; }
/* very short screens (a phone on its side): drop the scroll hint to keep the names and date clear */
@media (max-height: 480px) { .hero__scroll { display: none; } }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ============ sections ============ */
main { position: relative; z-index: 1; }
main > section { padding: clamp(72px, 12vw, 128px) 24px; text-align: center; }
main > section p { max-width: 34ch; margin-inline: auto; }

.invite { padding-top: 0; }
.garland {
  position: relative;
  width: min(112%, 760px);
  margin: -58px 50% 36px;
  transform: translateX(-50%);
  filter: drop-shadow(0 6px 10px rgba(120, 70, 55, .14));
}
.garland svg { display: block; width: 100%; height: auto; }
/* monogram inside a wreath that draws itself, then blooms */
.monogram { position: relative; width: min(60vw, 240px); aspect-ratio: 1; margin: -8px auto 22px; }
.monogram__wreath { position: absolute; inset: 0; }
.monogram__letters {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .12em;
  margin: 0;
  font-family: var(--script);
  font-size: clamp(1.9rem, 9vw, 2.5rem);
  line-height: 1;
  background: var(--foil-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.monogram__letters .amp { font-size: .5em; }

/* watercolour spray and gold rings, above their section titles */
.divider { width: min(88vw, 420px); aspect-ratio: 963 / 386; margin: -24px auto -18px; }
.rsvp__rings { width: 104px; aspect-ratio: 1; margin: 0 auto 2px; }

.invite__kicker { margin: 0 auto .5em; font-style: italic; font-size: 1.15rem; color: var(--ink-soft); }
.invite__couple {
  margin: 0 auto;
  padding: 0 .15em;
  font-family: var(--script);
  font-size: clamp(2.3rem, 10.5vw, 3.4rem);
  line-height: 1.2;
  text-wrap: balance;
  background: var(--foil-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.invite__parents { margin: .15em auto 0; font-style: italic; font-size: 1.05rem; color: var(--ink-soft); }
.invite__and { margin: .55em auto; font-style: italic; font-size: 1.7rem; line-height: 1; color: var(--gold); }
.invite__lead { max-width: 24ch; margin: 1.3em auto 0; font-size: 1.3rem; line-height: 1.45; font-style: italic; }

.countdown { background: linear-gradient(180deg, var(--ivory), #F7E9E3); }
.countdown__clock {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(6px, 3vw, 22px);
  font-variant-numeric: lining-nums tabular-nums;
}
.countdown__clock div { display: flex; flex-direction: column; align-items: center; min-width: 2.4ch; }
.countdown__clock span { font-size: clamp(2.8rem, 13vw, 4.4rem); font-weight: 500; line-height: 1; }
.countdown__clock i { font-style: normal; font-size: clamp(2.2rem, 10vw, 3.4rem); line-height: 1.05; color: var(--gold); }
.countdown__clock small { margin-top: 8px; font-size: .9rem; font-style: italic; color: var(--ink-soft); }
.countdown__done { font-size: 1.6rem; font-style: italic; }

.schedule { background: linear-gradient(180deg, #F7E9E3, var(--ivory)); }
.arch-card { width: min(100%, 440px); margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(130, 85, 65, .12)); }
.arch-card__cap { aspect-ratio: 400 / 150; margin-bottom: -1px; }
.arch-card__cap svg { display: block; width: 100%; height: 100%; }
.arch-card__body { position: relative; display: flow-root; background: var(--card); padding: 0 7% 44px; }
.arch-card__body::before {
  content: '';
  position: absolute;
  top: 0; bottom: 14px; left: 3%; right: 3%;
  border: 1px solid var(--gold);
  border-top: 0;
  pointer-events: none;
}
.arch-card .script-title { position: relative; margin-top: -1.55em; font-size: clamp(2rem, 8.6vw, 2.8rem); }

.events { list-style: none; margin: 14px 0 0; padding: 0; }
.event { padding: 14px 0; }
.event + .event::before {
  content: '◆';
  display: block;
  width: 120px;
  margin: 0 auto 16px;
  font-size: .55rem;
  line-height: 1;
  color: var(--gold);
  background:
    linear-gradient(var(--gold), var(--gold)) left center / 46px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right center / 46px 1px no-repeat;
}
.event__name {
  margin: 0;
  font-family: var(--script);
  font-weight: 400;
  font-size: 2.1rem;
  line-height: 1.25;
  background: var(--foil-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.event--main .event__name { font-size: 2.6rem; }
.event__when { margin: .15em auto 0; font-size: 1.08rem; line-height: 1.45; }
.event__where { margin: .25em auto 0; font-style: italic; color: var(--ink-soft); }

.venue__art { width: min(100%, 440px); margin: 0 auto 4px; }
.venue__art svg { display: block; width: 100%; height: auto; }
.venues { list-style: none; display: grid; gap: 38px; max-width: 1000px; margin: 26px auto 0; padding: 0; }
@media (min-width: 900px) { .venues { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.venues li { display: flex; flex-direction: column; align-items: center; }
.venues__name { margin: 0; font-size: 1.45rem; font-weight: 500; line-height: 1.25; }
.venues__for {
  margin: .05em 0 0;
  font-family: var(--script);
  font-size: 1.75rem;
  line-height: 1.25;
  background: var(--foil-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.venues__address { margin: .25em 0 1em; font-style: italic; line-height: 1.45; color: var(--ink-soft); }
.venues .btn { margin-top: auto; }
#addToCalendar { margin-top: 42px; }

.btn {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid var(--gold-deep);
  border-radius: 999px;
  background: var(--foil-btn);
  color: #FFFBF3;
  font: 500 1.1rem/1.2 var(--serif);
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(122, 86, 40, .2); }
.btn:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.btn:disabled { opacity: .7; cursor: progress; transform: none; }
.btn--ghost { background: transparent; color: var(--gold-deep); }

.dress { background: linear-gradient(180deg, var(--ivory), #F7E9E3 60%, var(--ivory)); }
.swatches { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 340px; margin: 30px auto 0; padding: 0; }
.swatches li {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55), 0 0 0 1px rgba(166, 124, 69, .35), 0 6px 12px rgba(120, 80, 60, .1);
}

.rsvp__form { display: grid; gap: 20px; width: min(100%, 420px); margin: 32px auto 0; text-align: left; }
.field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > span, .field legend { padding: 0; font-size: 1.05rem; font-style: italic; color: var(--ink-soft); }
.field legend { margin-bottom: 6px; }
.rsvp input:not([type="radio"]), .rsvp select, .rsvp textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .65);
  color: var(--ink);
  font: inherit;
  font-size: 1.12rem;
}
.rsvp textarea { resize: vertical; }
.rsvp input:focus-visible, .rsvp select:focus-visible, .rsvp textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.choice { display: grid; gap: 8px; }
.choice--row { grid-template-columns: 1fr 1fr; }
.choice label {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .65);
  cursor: pointer;
}
.choice label:has(input:checked) { border-color: var(--gold); background: #FFF8F2; box-shadow: inset 0 0 0 1px var(--gold); }
.choice input { margin: 0; accent-color: var(--gold-deep); width: 18px; height: 18px; }
.rsvp__form .btn { justify-self: center; min-width: 210px; margin-top: 4px; }
.rsvp__error { margin: 0; text-align: center; font-style: italic; color: #9A3B2E; }
.rsvp__thanks { margin-top: 28px; outline: none; }
.rsvp__call { margin-top: 26px; font-style: italic; color: var(--ink-soft); }
.rsvp__call a { color: var(--gold-deep); text-decoration: none; border-bottom: 1px solid rgba(134, 98, 47, .35); white-space: nowrap; }

.closing { padding: 40px 24px calc(110px + env(safe-area-inset-bottom)); text-align: center; }
.closing__key { width: 128px; aspect-ratio: 260 / 90; margin: 0 auto 22px; transform: rotate(-14deg); }
.closing__key svg { display: block; width: 100%; height: 100%; overflow: visible; }
.closing__line { margin: 0; font-style: italic; color: var(--ink-soft); }
.closing__names { margin: .15em 0 0; font-family: var(--script); font-size: 3.2rem; line-height: 1.2; display: inline-block; padding: 0 .2em; }

/* ============ music button ============ */
.music {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 30;
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  padding: 0;
  border: 1px solid rgba(255, 250, 240, .6);
  border-radius: 50%;
  background: var(--foil-btn);
  color: #FFF8EC;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(90, 60, 40, .25);
}
.music:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.music__note { width: 20px; height: 20px; }
.music__bars { display: none; align-items: flex-end; gap: 3px; height: 16px; }
.music.is-playing .music__bars { display: flex; }
.music.is-playing .music__note { display: none; }
.music__bars i { width: 3px; height: 6px; border-radius: 2px; background: currentColor; animation: eq 1.1s ease-in-out infinite; }
.music__bars i:nth-child(2) { animation-delay: -.35s; }
.music__bars i:nth-child(3) { animation-delay: -.7s; }
@keyframes eq { 0%, 100% { height: 5px; } 50% { height: 16px; } }

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .curtain, .curtain__fabric { transition-duration: .01s; }
  .hero__arch .flame, .hero__scroll svg, .music__bars i { animation: none; }
  .doves { display: none; }
}