/* ============================================================
   WEDDING TEMPLATE — "Quiet Luxury" (Template 2)
   Demo couple: Adam & Lora — 07.07.2027 — Beirut
   Palette : ivory / sand / mocha / a single soft rosewood accent
   Type    : Bodoni Moda (editorial serif) · Beau Rivage (script,
             names only) · Manrope (everything else)
   Motif   : fine stationery — arches, an oversized ampersand,
             hairline rules, mixed-case type. Signature gesture
             is "hold to begin" rather than a single tap.
   ============================================================ */

:root{
  --ivory:    #F8F4EE;  /* page background                    */
  --sand:     #EFE7DB;  /* alt section wash                    */
  --cream:    #FCFAF6;  /* card / lightest surface             */
  --taupe:    #B4A692;  /* hairlines, quiet dividers            */
  --mocha:    #4A3F35;  /* body ink                             */
  --mocha-soft:#6E6152; /* secondary text                       */
  --rosewood: #B98072;  /* the one accent hue                   */
  --rosewood-2:#96594B; /* accent hover / deeper                */
  --champagne:#C9AD7F;  /* metallic hairline detail             */
  --charcoal: #2B241D;  /* gate + closing backdrop              */
  --charcoal-2:#211B15; /* deepest shade                        */

  --script: "Beau Rivage", cursive;
  --serif:  "Bodoni Moda", "Didot", Georgia, serif;
  --sans:   "Manrope", "Helvetica Neue", Arial, sans-serif;

  --shell: 1160px;
  --pad: clamp(20px, 5vw, 56px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-slow: cubic-bezier(.16,.5,.2,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ivory);
  color:var(--mocha);
  font-family:var(--sans);
  font-size:clamp(16px,1.05vw,18px);
  font-weight:400;
  line-height:1.75;
  overflow-x:hidden;
  position:relative;
}
body.is-locked{ overflow:hidden; height:100%; }

/* very faint paper grain across the whole page — a fine cotton-
   stock feeling rather than a flat digital surface */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.5'/></svg>");
}

img,video,iframe{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

::selection{ background:var(--rosewood); color:var(--cream); }
:focus-visible{ outline:2px solid var(--rosewood); outline-offset:4px; border-radius:2px; }

/* ---------- shared ---------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:2; }
.center{ text-align:center; }

/* editorial "kicker" label — sentence case, not tracked caps */
.tag{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:1.02rem; color:var(--rosewood-2);
  margin:0 0 1.1rem;
}
.tag::before{ content:""; width:26px; height:1px; background:var(--champagne); flex:0 0 auto; }
.tag.center{ justify-content:center; }

.display{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.3rem,4.8vw,3.8rem);
  line-height:1.06;
  letter-spacing:-.008em;
  margin:0 0 1.3rem;
}
.display em{ font-style:italic; color:var(--rosewood); }

.lede{ font-size:1.08em; color:var(--mocha-soft); }

.amp-mark{
  display:block; text-align:center;
  font-family:var(--script); font-size:clamp(2.3rem,5.6vw,3.4rem);
  color:var(--champagne); opacity:.75;
  margin:1.3rem 0 2rem;
}

.section{ padding:clamp(70px,10vw,124px) 0; position:relative; }
.section__note{ font-style:italic; color:var(--mocha-soft); margin:-.3rem auto 3rem; max-width:44em; }

/* ---------- buttons: soft pill, not boxy ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; padding:1.05em 2.15em;
  border-radius:999px; border:1px solid var(--mocha); color:var(--mocha); background:transparent;
  cursor:pointer;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .25s var(--ease);
}
.btn--solid{ background:var(--rosewood); color:var(--cream); border-color:var(--rosewood); }
.btn--solid:hover{ background:var(--rosewood-2); border-color:var(--rosewood-2); }
.btn--ghost:hover{ background:var(--mocha); color:var(--cream); border-color:var(--mocha); }
.btn--sm{ padding:.85em 1.6em; font-size:.66rem; }
.btn:active{ transform:translateY(1px); }

/* arch-topped media frame, used for a couple of key photos */
.arch{ border-radius:clamp(90px,18vw,190px) clamp(90px,18vw,190px) 4px 4px; overflow:hidden; }

/* ============================================================
   1 · THE GATE
   ============================================================ */
.gate{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center; overflow:hidden;
  background:var(--charcoal); color:var(--cream);
  transition:opacity 1.5s var(--ease-slow), visibility 1.5s;
}
.gate.is-open{ opacity:0; visibility:hidden; pointer-events:none; }

.gate__media{ position:absolute; inset:0; }
.gate__poster,.gate__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center;
}
.gate__poster{ filter:grayscale(.3) contrast(1.02) brightness(.94) sepia(.08); }
.gate__video{ opacity:0; transition:opacity 1.4s var(--ease-slow); filter:grayscale(.08) contrast(1.02); }
.gate__video.is-playing{ opacity:1; }

.gate__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(43,36,29,.3) 0%, rgba(43,36,29,.74) 55%, rgba(33,27,21,.94) 100%),
    linear-gradient(180deg, rgba(185,128,114,.14), rgba(33,27,21,.62));
}
.gate__date-mark{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; overflow:hidden; }
.gate__date-mark span{
  font-family:var(--serif); font-weight:300; font-size:clamp(9rem,40vw,24rem);
  color:rgba(252,250,246,.045); letter-spacing:-.02em; line-height:1; user-select:none; white-space:nowrap;
}

.gate__content{
  position:relative; z-index:2; text-align:center;
  padding:clamp(30px,7vw,60px) var(--pad); max-width:620px;
}
.gate__eyebrow{ color:var(--champagne); justify-content:center; }
.gate__eyebrow::before{ background:rgba(252,250,246,.5); }
.gate__names{
  font-family:var(--script); font-weight:400;
  font-size:clamp(3.6rem,12vw,6.4rem);
  line-height:1; margin:.2rem 0 .7rem;
}
.gate__names .amp{
  font-family:var(--serif); font-style:italic; font-size:.55em;
  color:var(--champagne); padding:0 .1em; vertical-align:.03em;
}
.gate__place{
  font-family:var(--sans); font-weight:300; font-size:.94rem;
  color:rgba(252,250,246,.78); letter-spacing:.01em;
  margin:0 0 clamp(34px,6vw,50px);
}

/* ---- hold to begin (signature tap element) ---- */
.hold{
  position:relative; width:clamp(122px,27vw,150px); aspect-ratio:1;
  margin:0 auto; display:grid; place-items:center;
  background:none; border:0; padding:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.hold__glass{
  position:absolute; inset:0; border-radius:50%;
  background:rgba(252,250,246,.08);
  border:1px solid rgba(252,250,246,.26);
  backdrop-filter:blur(6px);
  transition:background .5s var(--ease), transform .5s var(--ease), opacity .8s var(--ease);
}
.hold:hover .hold__glass{ background:rgba(252,250,246,.13); }
.hold.is-filling .hold__glass{ background:rgba(185,128,114,.2); transform:scale(1.045); }

.hold__ring{ position:absolute; inset:0; transform:rotate(-90deg); transition:opacity .6s var(--ease); }
.hold__ring circle{ fill:none; cx:50%; cy:50%; }
.hold__track{ stroke:rgba(252,250,246,.2); stroke-width:1; }
.hold__fg{
  stroke:var(--champagne); stroke-width:1.4; stroke-linecap:round;
  stroke-dasharray:295; stroke-dashoffset:295;
}

.hold__label{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:.28rem;
  transition:opacity .5s var(--ease);
}
.hold__word{ font-family:var(--sans); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--cream); }
.hold__sub{ font-family:var(--serif); font-style:italic; font-size:.82rem; color:rgba(252,250,246,.68); }

.hold.is-released .hold__glass{ transform:scale(1.55); opacity:0; transition:transform 1.1s var(--ease-slow), opacity 1.1s var(--ease-slow); }
.hold.is-released .hold__ring{ opacity:0; }
.hold.is-released .hold__label{ opacity:0; }

.gate__hint{
  margin:1.1rem 0 0; font-family:var(--serif); font-style:italic; font-size:.86rem;
  color:rgba(252,250,246,.7); opacity:0; transition:opacity .5s var(--ease); min-height:1.4em;
}
.gate__hint.is-shown{ opacity:1; }

.gate__fallback{
  display:inline-block; margin-top:clamp(22px,4vw,34px);
  font-family:var(--sans); font-size:.72rem; letter-spacing:.02em;
  color:rgba(252,250,246,.5); text-decoration:underline; text-underline-offset:3px;
  background:none; border:0; padding:0; cursor:pointer;
  transition:color .3s var(--ease);
}
.gate__fallback:hover{ color:var(--cream); }

/* ============================================================
   2 · PROLOGUE (save-the-date hero)
   ============================================================ */
.page{ opacity:0; transition:opacity 1.1s var(--ease-slow) .15s; }
.page.is-visible{ opacity:1; }

.prologue{
  position:relative; min-height:92svh;
  display:grid; align-content:center;
  padding:clamp(90px,13vh,140px) 0 clamp(70px,11vh,110px);
  overflow:hidden; background:var(--ivory);
}
.prologue__wash{
  position:absolute; inset:0;
  background:
    radial-gradient(58% 42% at 14% 8%, rgba(185,128,114,.1), rgba(255,255,255,0) 68%),
    radial-gradient(50% 38% at 90% 96%, rgba(201,173,127,.14), rgba(255,255,255,0) 72%);
}
.prologue__inner{ position:relative; z-index:1; }

.dateline{
  display:flex; align-items:baseline; justify-content:center;
  gap:clamp(10px,2.4vw,22px); margin:0 0 .6rem;
}
.dateline__num{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(3.6rem,11vw,7rem); line-height:1; color:var(--mocha);
  font-variant-numeric:tabular-nums;
}
.dateline__num em{ color:var(--rosewood); font-style:italic; }
.dateline__sep{ font-family:var(--serif); font-size:clamp(1.6rem,4vw,2.6rem); color:var(--champagne); }

.prologue__venue{ font-style:italic; color:var(--mocha-soft); font-family:var(--serif); font-size:1.15rem; margin:0 0 2.6rem; }
.prologue__venue b{ font-style:normal; color:var(--mocha); font-weight:400; }

/* ---- minimal typographic countdown, no boxes ---- */
.countdown{ display:flex; justify-content:center; gap:0; margin:0 0 2.6rem; padding:0; list-style:none; }
.countdown li{ position:relative; display:flex; flex-direction:column; align-items:center; padding:0 clamp(14px,3.2vw,30px); }
.countdown li + li::before{
  content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background:var(--taupe); opacity:.6;
}
.countdown b{
  font-family:var(--serif); font-weight:300; font-size:clamp(2.2rem,5.6vw,3.4rem);
  color:var(--mocha); font-variant-numeric:tabular-nums; line-height:1;
}
.countdown span{
  display:block; margin-top:.5rem; font-family:var(--sans); font-size:.68rem;
  letter-spacing:.04em; color:var(--mocha-soft); font-style:italic;
}

.prologue__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.scroll-cue{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
  width:1px; height:50px; overflow:hidden;
}
.scroll-cue span{
  display:block; width:1px; height:100%;
  background:linear-gradient(180deg, transparent, var(--rosewood));
  animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

/* ============================================================
   3 · STORY (editorial, drop cap, arch photo)
   ============================================================ */
.story{ background:var(--sand); }
.story__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(30px,5vw,70px); align-items:center; }
.story__figure{ margin:0; }
.story__figure img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.story__text .dropcap:first-letter{
  font-family:var(--serif); font-style:italic; font-size:3.3em; float:left; line-height:.78;
  padding:.06em .1em 0 0; color:var(--rosewood); font-weight:400;
}
.story__text p{ margin:0 0 1.15rem; }
.signoff{
  font-family:var(--script); color:var(--rosewood); font-size:1.7rem; margin-top:1.4rem !important;
}

/* ============================================================
   4 · IN FRAME (gallery, museum-label style)
   ============================================================ */
.frames{ background:var(--ivory); }
.frames__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:clamp(24px,3.2vw,40px);
}
.frame{
  background:var(--cream); padding:12px 12px 0;
  border:1px solid rgba(74,63,53,.12);
  box-shadow:0 22px 50px -38px rgba(43,36,29,.4);
}
.frame__img{ overflow:hidden; }
.frame__img img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  filter:saturate(.94); transition:transform .8s var(--ease);
}
.frame:hover .frame__img img{ transform:scale(1.04); }
.frame figcaption{
  padding:1rem 0 1.15rem; text-align:center;
  font-family:var(--serif); font-style:italic; font-size:.92rem; color:var(--mocha-soft);
}

/* ============================================================
   5 · THE VENUES (rich detail + subsections)
   ============================================================ */
.venues{ background:var(--sand); }
.venue-detail{
  display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(30px,4.6vw,60px);
  align-items:start; padding:clamp(30px,4vw,10px) 0;
}
.venue-detail + .venue-detail{ margin-top:clamp(50px,7vw,88px); }

.venue-detail__media{
  position:relative; aspect-ratio:4/5;
  background:linear-gradient(160deg, rgba(185,128,114,.22), rgba(201,173,127,.16));
  display:grid; place-items:center;
  border:1px solid rgba(74,63,53,.14);
}
.venue-detail__media svg{ width:34%; height:34%; color:var(--rosewood-2); opacity:.85; }

.venue-detail__body{ min-width:0; }
.venue-detail__lede{ color:var(--mocha-soft); margin:0 0 2rem; }

.subsections{ display:grid; gap:1.6rem; margin:0 0 2.1rem; }
.subsection h4{
  font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rosewood-2); margin:0 0 .4rem;
}
.subsection p{ margin:0; color:var(--mocha); }

.venue-connector{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  margin:clamp(30px,5vw,50px) 0; color:var(--mocha-soft);
  font-family:var(--serif); font-style:italic; font-size:.98rem;
}
.venue-connector::before,.venue-connector::after{ content:""; flex:1; height:1px; background:var(--taupe); opacity:.6; }

/* ============================================================
   6 · THE SET LIST (grouped into acts)
   ============================================================ */
.setlist{ background:var(--ivory); }
.setlist__act + .setlist__act{ margin-top:clamp(46px,6vw,72px); }
.setlist__act-head{ margin-bottom:1.6rem; }
.setlist__act-title{ font-family:var(--script); font-size:clamp(1.9rem,4.2vw,2.5rem); color:var(--rosewood); margin:0 0 .25rem; }
.setlist__act-sub{ font-family:var(--serif); font-style:italic; color:var(--mocha-soft); margin:0; }

.setlist__entries{ list-style:none; margin:0; padding:0; }
.setlist__entry{
  display:grid; grid-template-columns:5.4em 1fr; gap:clamp(14px,2.6vw,28px);
  padding:1.15rem 0; border-top:1px solid rgba(74,63,53,.14);
}
.setlist__entries li:last-child{ border-bottom:1px solid rgba(74,63,53,.14); }
.setlist__time{ font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--rosewood-2); padding-top:.1rem; }
.setlist__what{ display:block; font-family:var(--sans); font-weight:700; font-size:1.03rem; }
.setlist__desc{ display:block; font-family:var(--sans); color:var(--mocha-soft); font-size:.94rem; margin-top:.25rem; }

/* ============================================================
   7 · REGISTRY
   ============================================================ */
.registry{
  background:
    radial-gradient(56% 46% at 50% 0%, rgba(185,128,114,.1), rgba(255,255,255,0) 70%),
    var(--sand);
}
.registry__cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,3vw,28px); }
.registry-card{
  background:var(--cream); border:1px solid rgba(74,63,53,.14);
  padding:clamp(26px,3.4vw,36px);
  box-shadow:0 22px 50px -40px rgba(43,36,29,.32);
}
.registry-card__top{ display:flex; align-items:center; gap:.8rem; margin-bottom:1.15rem; }
.registry-card__icon{ width:26px; height:26px; color:var(--rosewood); flex:0 0 auto; }
.registry-card__label{ font-family:var(--sans); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--rosewood-2); font-weight:700; }
.registry-card__value{
  font-family:var(--serif); font-size:1.08rem; letter-spacing:.01em;
  padding:.9rem 1.05rem; background:var(--sand); border:1px solid rgba(74,63,53,.12);
  word-break:break-all; margin:0 0 1rem;
}
.registry-card__meta{ font-style:italic; color:var(--mocha-soft); font-size:.92rem; margin:0 0 1.3rem; }
.registry-card__meta b{ font-style:normal; color:var(--mocha); }

.copy{
  width:100%; border-radius:999px;
  font-family:var(--sans); font-size:.68rem; letter-spacing:.1em; font-weight:600; text-transform:uppercase;
  background:var(--mocha); color:var(--cream); border:1px solid var(--mocha);
  padding:.85em 1.4em; cursor:pointer;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.copy:hover{ background:var(--charcoal); }
.copy.is-done{ background:var(--rosewood); border-color:var(--rosewood); }

.registry__note{ margin:2.4rem 0 0; font-style:italic; color:var(--mocha-soft); }
.registry__note a{ color:var(--rosewood-2); text-decoration:underline; text-underline-offset:3px; }

/* ============================================================
   8 · RSVP
   ============================================================ */
.rsvp{ background:var(--ivory); }
.rsvp__inner{ max-width:800px; }
.rsvp__card{
  background:var(--cream);
  border:1px solid rgba(74,63,53,.14);
  box-shadow:0 26px 60px -42px rgba(43,36,29,.3);
  padding:clamp(10px,2vw,18px);
}
.rsvp__mount{ min-height:560px; }
.rsvp__fallback{ display:grid; place-items:center; gap:1.3rem; text-align:center; padding:clamp(34px,7vw,64px) 1.2rem; }
.rsvp__fallback-text{ margin:0; font-style:italic; color:var(--mocha-soft); }
.rsvp__help{ margin-top:1.8rem; font-size:.96rem; color:var(--mocha-soft); }
.rsvp__help a{ color:var(--rosewood-2); text-decoration:underline; text-underline-offset:3px; }

/* ============================================================
   9 · CLOSING
   ============================================================ */
.closing{
  background:linear-gradient(180deg, var(--charcoal) 0%, var(--charcoal-2) 100%);
  color:var(--cream);
  padding:clamp(66px,9vw,110px) 0 clamp(46px,6vw,72px);
}
.closing__mono{ font-family:var(--script); font-size:clamp(3rem,7.4vw,4.4rem); color:var(--cream); margin:0 0 1.1rem; }
.closing__mono .amp{ color:var(--champagne); font-family:var(--serif); font-style:italic; font-size:.6em; padding:0 .1em; }
.closing__line{ font-family:var(--serif); font-style:italic; font-size:1.24rem; margin:0 0 1.6rem; }
.closing__meta{ font-family:var(--sans); font-size:.78rem; letter-spacing:.02em; color:#B8A98F; margin:0 0 2.2rem; font-weight:300; }
.closing__credit{ font-size:.86rem; color:#8C7F6C; margin:0; }

/* ============================================================
   SOUND TOGGLE + TOAST
   ============================================================ */
.sound-toggle{
  position:fixed; z-index:92;
  right:clamp(16px,3vw,30px); bottom:clamp(16px,3vw,30px);
  display:inline-flex; align-items:center; gap:10px;
  padding:.65em 1.1em; border-radius:999px;
  background:rgba(248,244,238,.86);
  border:1px solid rgba(201,173,127,.55);
  backdrop-filter:blur(8px);
  box-shadow:0 14px 30px -22px rgba(43,36,29,.7);
  cursor:pointer;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.sound-toggle:hover{ background:var(--cream); border-color:var(--rosewood); }
.sound-toggle__label{ font-family:var(--sans); font-size:.62rem; letter-spacing:.08em; color:var(--rosewood-2); font-weight:600; }
.sound-toggle__bars{ display:flex; align-items:flex-end; gap:2px; height:13px; }
.sound-toggle__bars i{ width:2px; height:100%; background:var(--rosewood); transform-origin:bottom; animation:eq .9s ease-in-out infinite; }
.sound-toggle__bars i:nth-child(2){ animation-delay:.15s; }
.sound-toggle__bars i:nth-child(3){ animation-delay:.3s; }
.sound-toggle__bars i:nth-child(4){ animation-delay:.45s; }
@keyframes eq{ 0%,100%{ transform:scaleY(.3);} 50%{ transform:scaleY(1);} }
.sound-toggle[aria-pressed="false"] .sound-toggle__bars i{ animation-play-state:paused; transform:scaleY(.28); }

.toast{
  position:fixed; z-index:95; left:50%; bottom:34px; transform:translate(-50%,18px);
  background:var(--charcoal); color:var(--cream);
  font-family:var(--sans); font-size:.72rem; letter-spacing:.03em;
  padding:.9em 1.6em; border-radius:999px;
  opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.toast.is-shown{ opacity:1; transform:translate(-50%,0); }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity 1s var(--ease-slow), transform 1s var(--ease-slow); }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .story__grid{ grid-template-columns:1fr; }
  .story__figure{ max-width:420px; margin-inline:auto; }
  .venue-detail{ grid-template-columns:1fr; }
  .venue-detail__media{ max-width:320px; margin:0 auto; aspect-ratio:1; }
}

@media (max-width:640px){
  .countdown{ gap:0; }
  .countdown li{ padding:0 clamp(10px,3vw,18px); }
  .registry__cards{ grid-template-columns:1fr; }
  .rsvp__mount{ min-height:640px; }
  .setlist__entry{ grid-template-columns:1fr; gap:.25rem; }
  .setlist__time{ padding-top:0; }
}

/* ============================================================
   REDUCED MOTION / PRINT
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .scroll-cue span{ animation:none !important; }
}

@media print{
  .gate,.sound-toggle,.scroll-cue,.toast{ display:none !important; }
  body{ background:#fff; }
  .page{ opacity:1 !important; }
}