/* ============================================================
   Roger & Rita — 10.10.2026 — Phoenicia Hotel, Beirut
   Palette : white / ivory / beige, dusty rose florals, sage, antique gold
   Type    : Cormorant Garamond (display + body) · Jost (utility caps)
   ============================================================ */

:root{
  --white:   #FFFFFF;
  --ivory:   #FBF7F1;
  --beige:   #EFE4D5;
  --beige-2: #E1D2BE;
  --blush:   #E9C3BB;
  --rose:    #B9796A;   /* dusty rose — floral accent */
  --sage:    #7E8A6C;   /* foliage */
  --gold:    #B08D4F;   /* antique gold, used sparingly */
  --ink:     #33291F;   /* warm sepia ink for text */
  --night:   #17110C;   /* only behind the video gate */

  --serif: "Cormorant Garamond", Garamond, Georgia, serif;
  --util:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --shell: 1180px;
  --pad: clamp(20px, 5vw, 56px);
  --ease: cubic-bezier(.22,.61,.36,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(--ink);
  font-family:var(--serif);
  font-size:clamp(18px,1.2vw,20px);
  font-weight:400;
  line-height:1.75;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; height:100%; }
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(--blush); color:var(--ink); }
:focus-visible{ outline:2px solid var(--rose); outline-offset:4px; border-radius:2px; }

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

.eyebrow{
  font-family:var(--util);
  font-size:.7rem; font-weight:400;
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--rose);
  margin:0 0 1.3rem;
}

.h-display{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.2rem,5vw,3.7rem);
  line-height:1.1;
  letter-spacing:.005em;
  margin:0 0 1.5rem;
}

.lede{ font-size:1.14em; font-style:italic; color:#4A3B2C; }

.garland{
  display:block;
  width:clamp(200px,34vw,300px); height:46px;
  margin:1.8rem auto 2.2rem;
  color:var(--sage);
  opacity:.85;
}

.section{ padding:clamp(76px,11vw,140px) 0; position:relative; }
.section__note{ font-style:italic; color:#61503E; margin:-.4rem auto 3rem; max-width:46em; }

/* ============================================================
   1 · THE GATE
   ============================================================ */
.gate{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center; overflow:hidden;
  background:var(--night); color:var(--white);
  transition:opacity 1.1s var(--ease), visibility 1.1s;
}
.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:sepia(.18) saturate(.85); }
.gate__video{ opacity:0; transition:opacity 1.2s var(--ease); }
.gate__video.is-playing{ opacity:1; }

.gate__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(23,17,12,.34) 0%, rgba(23,17,12,.72) 55%, rgba(23,17,12,.9) 100%),
    linear-gradient(180deg, rgba(185,121,106,.16), rgba(23,17,12,.6));
}
.gate__grain{
  position:absolute; inset:-50%; opacity:.14; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
  animation:grain 5s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)}
}

.gate__frame{
  position:absolute; inset:clamp(14px,2.4vw,30px);
  border:1px solid rgba(251,247,241,.34);
  pointer-events:none;
}
.gate__frame::after{ content:""; position:absolute; inset:7px; border:1px solid rgba(233,195,187,.2); }
.gate__sprig{
  position:absolute; width:clamp(74px,13vw,140px); height:clamp(74px,13vw,140px);
  color:var(--blush); opacity:.6;
}
.gate__sprig--tl{ top:14px; left:14px; }
.gate__sprig--br{ bottom:14px; right:14px; transform:rotate(180deg); }

.gate__content{
  position:relative; z-index:2; text-align:center;
  padding:clamp(30px,7vw,60px) var(--pad); max-width:640px;
}
.gate__eyebrow{ color:var(--blush); }
.gate__kicker{
  font-style:italic; font-size:1.1rem; letter-spacing:.06em;
  opacity:.85; margin:0 0 .3rem;
}
.gate__names{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.9rem,9.5vw,4.8rem);
  line-height:1; margin:0 0 .9rem; letter-spacing:.01em;
  text-shadow:0 2px 34px rgba(0,0,0,.42);
}
.gate__names .amp{ font-style:italic; color:var(--blush); padding:0 .1em; }
.gate__place{
  font-family:var(--util); font-size:.72rem; letter-spacing:.28em;
  text-transform:uppercase; opacity:.82;
  margin:0 0 clamp(30px,6vw,48px);
}
.gate__note{
  font-family:var(--util); font-size:.64rem; letter-spacing:.22em;
  text-transform:uppercase; opacity:.55; margin:clamp(24px,5vw,34px) 0 0;
}

/* ---- the seal (signature element) ---- */
.seal{
  position:relative; width:clamp(184px,46vw,228px); aspect-ratio:1;
  margin:0 auto; display:grid; place-items:center;
  background:none; border:0; padding:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.seal__halo{
  position:absolute; inset:14%; border-radius:50%;
  background:radial-gradient(circle, rgba(233,195,187,.34) 0%, rgba(233,195,187,0) 68%);
  animation:breathe 3.6s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ transform:scale(.94); opacity:.5; }
  50%{ transform:scale(1.1); opacity:1; }
}
.seal__ring{ position:absolute; inset:0; width:100%; height:100%; animation:spin 34s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.seal__rule{ fill:none; stroke:rgba(251,247,241,.5); stroke-width:1; }
.seal__rule--thin{ stroke:rgba(233,195,187,.42); }
.seal__text{
  fill:#F6E7E2; font-family:var(--util); font-size:9.4px; letter-spacing:3.4px;
}
.seal__core{
  position:relative; width:52%; aspect-ratio:1; border-radius:50%;
  display:grid; place-content:center; gap:.1rem;
  background:radial-gradient(circle at 34% 28%, rgba(233,195,187,.3), rgba(23,17,12,.6) 72%);
  border:1px solid rgba(233,195,187,.6);
  backdrop-filter:blur(3px);
  transition:transform .5s var(--ease), background .5s var(--ease);
}
.seal__mono{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.7rem,5vw,2.1rem); line-height:1; color:var(--white);
}
.seal__amp{ color:var(--blush); font-style:italic; padding:0 .04em; }
.seal__cue{
  font-family:var(--util); font-size:.56rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--blush);
}
.seal:hover .seal__core,
.seal:focus-visible .seal__core{
  transform:scale(1.07);
  background:radial-gradient(circle at 34% 28%, rgba(233,195,187,.46), rgba(23,17,12,.5) 72%);
}
.seal:active .seal__core{ transform:scale(.97); }
.seal.is-pressed{ animation:sealOut .9s var(--ease) forwards; }
@keyframes sealOut{ to{ transform:scale(1.5); opacity:0; } }

/* ============================================================
   2 · OVERTURE
   ============================================================ */
.page{ opacity:0; transition:opacity 1s var(--ease) .15s; }
.page.is-visible{ opacity:1; }

.overture{
  position:relative; min-height:100svh;
  display:grid; align-content:center;
  padding:clamp(90px,13vh,140px) 0 clamp(80px,12vh,120px);
  text-align:center; overflow:hidden;
  background:var(--white);
}
.overture__wash{
  position:absolute; inset:0;
  background:
    radial-gradient(70% 46% at 50% 0%, rgba(233,195,187,.34), rgba(255,255,255,0) 68%),
    radial-gradient(60% 40% at 50% 100%, rgba(239,228,213,.85), rgba(255,255,255,0) 72%);
}
.overture__wash::after{
  content:""; position:absolute; inset:clamp(14px,2.4vw,30px);
  border:1px solid rgba(176,141,79,.3);
}
.overture__corner{
  position:absolute; width:clamp(90px,15vw,180px); height:clamp(90px,15vw,180px);
  color:var(--sage); opacity:.4; pointer-events:none;
}
.overture__corner--tl{ top:26px; left:26px; }
.overture__corner--tr{ top:26px; right:26px; transform:scaleX(-1); }
.overture__inner{ position:relative; z-index:1; }

.overture__names{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(3.2rem,11.5vw,7rem);
  line-height:.98; margin:0; letter-spacing:.01em;
}
.overture__names .line{ display:block; }
.overture__amp{ font-style:italic; color:var(--rose); font-size:.6em; line-height:1.5; }
.overture__surnames{
  font-family:var(--util); font-size:.7rem; letter-spacing:.4em;
  text-transform:uppercase; color:#7A6650; margin:1.1rem 0 0;
  padding-left: 14px;
}
.overture__line{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(14px,3vw,26px);
  font-family:var(--util); font-size:.72rem; letter-spacing:.26em;
  text-transform:uppercase; color:#7A6650; margin:0 0 .9rem;
}
.overture__line b{
  font-family:var(--serif); font-size:1.7rem; font-weight:400;
  letter-spacing:.05em; color:var(--gold);
  margin-bottom: 6px;
}
.overture__venue{ font-style:italic; color:#61503E; margin:0 0 2.4rem; }

.count{
  list-style:none; display:flex; justify-content:center; flex-wrap:wrap;
  gap:clamp(16px,5vw,46px); margin:0 0 2.6rem; padding:0;
}
.count li{ min-width:64px; }
.count b{
  display:block; font-family:var(--serif); font-weight:300;
  font-size:clamp(1.9rem,4.6vw,2.7rem); font-variant-numeric:tabular-nums; color:var(--ink);
}
.count span{
  font-family:var(--util); font-size:.58rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--rose);
}

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

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-family:var(--util);
  font-size:.68rem; letter-spacing:.28em; text-transform:uppercase;
  text-decoration:none; padding:1.05em 2.3em;
  border:1px solid var(--rose); color:var(--ink); background:transparent;
  cursor:pointer;
  transition:background .45s var(--ease), color .45s var(--ease), transform .3s var(--ease);
}
.btn--solid{ background:var(--rose); color:var(--white); }
.btn--solid:hover{ background:#A66857; border-color:#A66857; }
.btn--ghost:hover{ background:var(--rose); color:var(--white); }
.btn--sm{ padding:.85em 1.7em; font-size:.62rem; }
.btn:active{ transform:translateY(1px); }

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

/* ============================================================
   3 · STORY  (ivory)
   ============================================================ */
.story{ background:var(--ivory); }
.story__grid{
  display:grid; grid-template-columns:1fr 1.05fr;
  gap:clamp(30px,5vw,70px); align-items:center;
}
.story__figure{ margin:0; position:relative; }
.story__figure img{
  width:100%; height:100%; object-fit:cover; filter:sepia(.1) saturate(.95);
}
.story__figure--a{ grid-row:span 2; }
.story__figure--a img{ aspect-ratio:3/4; }
.story__figure::after{
  content:""; position:absolute; inset:10px;
  border:1px solid rgba(255,255,255,.75); pointer-events:none;
}
.story__text p{ margin:0 0 1.1rem; }
.signoff{
  font-style:italic; color:var(--rose); font-size:1.1rem; margin-top:1.7rem !important;
}

/* ============================================================
   4 · GALLERY  (beige)
   ============================================================ */
.gallery{ background:linear-gradient(180deg, var(--beige) 0%, #F4EADB 100%); }
.gallery__rail{
  display:flex; gap:clamp(16px,2.4vw,30px);
  overflow-x:auto; padding:.6rem var(--pad) 2rem;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin; scrollbar-color:var(--rose) transparent;
}
.gallery__rail::-webkit-scrollbar{ height:2px; }
.gallery__rail::-webkit-scrollbar-thumb{ background:var(--rose); }

.plate{ flex:0 0 auto; width:clamp(214px,30vw,300px); margin:0; scroll-snap-align:center; }
.plate img{
  width:100%; height:clamp(260px,32vw,330px); object-fit:cover;
  background:var(--white); padding:8px;
  border:1px solid rgba(176,141,79,.35);
  box-shadow:0 18px 40px -28px rgba(51,41,31,.55);
  filter:sepia(.12) saturate(.95);
  transition:filter .6s var(--ease), transform .6s var(--ease);
}
.plate--tall img{ height:clamp(320px,40vw,410px); }
.plate:hover img{ filter:none; transform:translateY(-6px); }
.plate figcaption{
  font-family:var(--util); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:#8A7157; margin-top:.9rem;
}

/* ============================================================
   5 · THE CHURCH  (white)
   ============================================================ */
.church{ background:var(--white); }
.church__grid{
  display:grid; grid-template-columns:1fr 1.05fr;
  gap:clamp(34px,5vw,72px); align-items:center;
}
.church__figure{
  margin:0; position:relative;
  background:var(--white); padding:10px;
  border:1px solid rgba(176,141,79,.35);
  box-shadow:0 24px 60px -40px rgba(51,41,31,.6);
}
.church__figure img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  filter:sepia(.1) saturate(.95);
}
.church__text p{ color:#54452F; }
.church__actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ============================================================
   6 · SETLIST  (ivory)
   ============================================================ */
.setlist{ background:var(--ivory); }
.setlist__list{ list-style:none; margin:0 auto; padding:0; max-width:760px; }
.setlist__item{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,4vw,44px);
  align-items:baseline; padding:1.45rem 0;
  border-top:1px solid var(--beige-2);
}
.setlist__item:last-child{ border-bottom:1px solid var(--beige-2); }
.setlist__time{
  font-family:var(--serif); font-size:clamp(1.3rem,3vw,1.7rem);
  font-variant-numeric:tabular-nums; color:var(--rose); min-width:3.4em;
}
.setlist__what b{ display:block; font-family:var(--serif); font-size:1.3rem; font-weight:500; }
.setlist__what i{ display:block; color:#6C5B48; font-size:1rem; }

/* ============================================================
   7 · VENUE  (white)
   ============================================================ */
.venue{ background:var(--white); }
.venue__grid{
  display:grid; grid-template-columns:1fr 1.15fr;
  gap:clamp(34px,5vw,72px); align-items:center;
}
.venue__text p{ color:#54452F; }

.facts{ margin:2.3rem 0; }
.facts div{
  display:grid; grid-template-columns:9.5em 1fr; gap:16px;
  padding:.72rem 0; border-bottom:1px solid var(--beige-2);
}
.facts dt{
  font-family:var(--util); font-size:.62rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--rose); padding-top:.45em;
}
.facts dd{ margin:0; }
.venue__actions{ display:flex; gap:12px; flex-wrap:wrap; }

.venue__map{
  position:relative; aspect-ratio:4/3.4;
  background:var(--white); padding:10px;
  border:1px solid rgba(176,141,79,.35);
  box-shadow:0 24px 60px -40px rgba(51,41,31,.6);
}
.venue__map iframe{ width:100%; height:100%; border:0; filter:sepia(.2) saturate(.85); }

/* ============================================================
   8 · GIFTS  (blush wash)
   ============================================================ */
.gifts{
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(233,195,187,.5), rgba(255,255,255,0) 70%),
    var(--beige);
  overflow:hidden;
}
.gifts__corner{
  position:absolute; width:clamp(110px,18vw,220px); height:clamp(110px,18vw,220px);
  color:var(--sage); opacity:.28; pointer-events:none;
}
.gifts__corner--tl{ top:10px; left:-14px; }
.gifts__corner--br{ bottom:10px; right:-14px; transform:rotate(180deg); }
.gifts__inner{ position:relative; z-index:1; max-width:900px; }

.gifts__number{
  background:var(--white);
  border:1px solid rgba(176,141,79,.4);
  box-shadow:0 26px 60px -42px rgba(51,41,31,.7);
  text-align:center;
  padding:clamp(26px,5vw,42px) clamp(20px,4vw,40px);
  max-width:520px; margin:0 auto 2.6rem;
}
.gifts__label{
  display:block; font-family:var(--util); font-size:.6rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--rose);
  margin-bottom:.9rem;
}
.gifts__phone{
  display:flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--serif); font-weight:400;
  /**font-size:clamp(1.7rem,5.4vw,2.5rem); letter-spacing:.02em;**/
  font-size: large;
  font-variant-numeric:tabular-nums;
}
.flag{
  width:1.32em; height:.88em; flex:0 0 auto;
  border:1px solid rgba(51,41,31,.18);
}
.gifts__holder{
  display:block; font-style:italic; color:#6C5B48; font-size:.98rem; margin-top:.5rem;
}
.copy{
  margin-top:1.5rem;
  font-family:var(--util); font-size:.64rem; letter-spacing:.26em; text-transform:uppercase;
  background:var(--ink); color:var(--white); border:1px solid var(--ink);
  padding:.95em 2.1em; cursor:pointer;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.copy:hover{ background:transparent; color:var(--ink); }
.copy.is-done{ background:var(--sage); border-color:var(--sage); color:var(--white); }

.gifts__cards{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,3vw,30px);
}
.gift-card{
  background:var(--white);
  border:1px solid rgba(176,141,79,.3);
  padding:clamp(24px,3.6vw,36px);
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
}
.gift-card__logo{
  height:52px; display:grid; place-items:center; margin-bottom:.7rem;
}
.gift-card__logo img{ max-height:44px; width:auto; object-fit:contain; }
.gift-card__wordmark{
  font-family:var(--util); font-weight:500; font-size:1.5rem; letter-spacing:.02em; color:var(--ink);
}
.gift-card h4{
  font-family:var(--serif); font-weight:500; font-size:1.45rem; margin:0;
}
.gift-card p{ margin:.2rem 0 1.2rem; color:#5A4A38; font-size:1rem; }
.gift-card .btn{ margin-top:auto; }
.gifts__note{ margin:2.6rem 0 0; font-style:italic; color:#5A4A38; }
.gifts__note a{ color:var(--rose); text-decoration:underline; text-underline-offset:3px; }

/* ============================================================
   9 · RSVP  (white)
   ============================================================ */
.rsvp{ background:var(--white); }
.rsvp__inner{ max-width:820px; }
.rsvp__card{
  background:var(--white);
  border:1px solid var(--beige-2);
  box-shadow:0 24px 60px -38px rgba(51,41,31,.5);
  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:#6C5B48; }
.rsvp__help{ margin-top:1.8rem; font-size:1rem; color:#6C5B48; }
.rsvp__help a{ color:var(--rose); text-decoration:underline; text-underline-offset:3px; }

/* ============================================================
   10 · CLOSING
   ============================================================ */
.closing{
  background:linear-gradient(180deg, var(--beige) 0%, #EAD9C4 100%);
  padding:clamp(64px,9vw,110px) 0 clamp(46px,6vw,74px);
}
.closing__garland{ margin-top:0; }
.closing__mono{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.4rem,6vw,3.2rem); color:var(--ink); margin-bottom:1rem;
}
.closing__mono span{ color:var(--rose); font-style:italic; padding:0 .04em; }
.closing__line{ font-style:italic; font-size:1.28rem; margin:0 0 1.5rem; }
.closing__meta{
  font-family:var(--util); font-size:.64rem; letter-spacing:.26em;
  text-transform:uppercase; color:#8A7157; margin:0 0 2.2rem;
}
.closing__credit{ font-size:.95rem; color:#8A7157; opacity:.85; 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:.7em 1.1em;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(176,141,79,.5);
  backdrop-filter:blur(8px);
  box-shadow:0 14px 30px -22px rgba(51,41,31,.8);
  cursor:pointer;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.sound-toggle:hover{ background:var(--white); border-color:var(--rose); }
.sound-toggle__label{
  font-family:var(--util); font-size:.58rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--rose);
}
.sound-toggle__bars{ display:flex; align-items:flex-end; gap:2px; height:13px; }
.sound-toggle__bars i{
  width:2px; height:100%; background:var(--rose);
  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(--ink); color:var(--white);
  font-family:var(--util); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.9em 1.6em;
  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(26px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .story__grid{ grid-template-columns:1fr; }
  .story__figure--a{ grid-row:auto; max-width:440px; margin-inline:auto; }
  .church__grid{ grid-template-columns:1fr; }
  .church__figure{ max-width:460px; margin-inline:auto; }
  .venue__grid{ grid-template-columns:1fr; }
  .venue__map{ aspect-ratio:4/3.6; }
  .overture__corner{ opacity:.25; }
}

@media (max-width:640px){
  .gate__frame{ inset:12px; }
  .gate__sprig{ opacity:.42; }
  .count{ gap:14px; }
  .count li{ min-width:56px; }
  .facts div{ grid-template-columns:1fr; gap:2px; }
  .facts dt{ padding-top:0; }
  .setlist__item{ grid-template-columns:1fr; gap:2px; }
  .overture__line{ gap:10px; }
  .gifts__cards{ grid-template-columns:1fr; }
  .rsvp__mount{ min-height:640px; }
}

/* ============================================================
   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; }
  .seal__ring,.seal__halo,.gate__grain,.scroll-cue span{ animation:none !important; }
}

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