/* =====================================================================
   MAYA & RAFAEL — Engagement Party
   Luxury editorial. Terracotta / burgundy / brass / ink on warm ivory.
   Sections: Tokens · Base · Motion contract · Loader · Topbar · Hero ·
             Chapter rule · Story rail · Countdown · Plates · Quote ·
             Details · RSVP · Footer · Reveal · Responsive
   ===================================================================== */

/* ============================== Tokens ============================== */
:root{
  --ivory:#f4efe7;
  --ivory-2:#eae1d4;
  --ivory-3:#ded2c0;
  --terracotta:#9c4a2f;
  --terracotta-lt:#b8583a;
  --terracotta-dk:#7d3823;
  --burgundy:#5b1c26;
  --burgundy-dk:#3d131a;
  --brass:#b08d57;
  --brass-lt:#d9bd8c;
  --ink:#171210;
  --ink-2:#241b17;
  --ink-soft:#4a3a32;

  --serif:"Bodoni Moda", "Bodoni MT", Didot, "Times New Roman", serif;
  --sans:"Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  --gut: clamp(20px, 5vw, 84px);
  --maxw: 1440px;

  /* motion contract — overridden by html[data-motion="calm"] */
  --enter: 2.15s;      /* when the hero starts, after the loader */
  --wipe: 1.05s;       /* section clip-path wipe */
  --wipe-lag: 0.09s;   /* stagger between revealed children */
  --travel: 44px;      /* reveal travel distance */
  --settle: 1.03;      /* scale settle start */
  --hov: 0.55s;        /* hover transitions */
  --ease: cubic-bezier(.22,.85,.24,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

html[data-motion="calm"]{
  --enter: 1.45s;
  --wipe: 0.5s;
  --wipe-lag: 0.05s;
  --travel: 12px;
  --settle: 1.005;
  --hov: 0.3s;
}

/* ============================== Base ============================== */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html[data-motion="calm"]{ scroll-behavior:auto; }

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(15px,0.55vw + 13.4px,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
html.is-loading, html.is-loading body{ overflow:hidden; }

img,svg{ max-width:100%; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }

::selection{ background:var(--terracotta); color:var(--ivory); }

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.skip{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--ink); color:var(--ivory); padding:12px 20px;
  font:600 13px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; transition:top .2s ease;
}
.skip:focus{ top:16px; }

:focus-visible{
  outline:2px solid var(--terracotta);
  outline-offset:3px;
  border-radius:1px;
}
.rsvp :focus-visible, .count :focus-visible, .plate--c:focus-visible,
.card--dark :focus-visible{ outline-color:var(--brass-lt); }

/* type helpers */
.kicker{
  margin:0 0 14px; font:600 11px/1 var(--sans);
  letter-spacing:.34em; text-transform:uppercase; color:var(--terracotta);
}
.kicker--light{ color:var(--brass-lt); }

.h2{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,5.4vw,72px); line-height:0.98; letter-spacing:-.015em;
  color:var(--ink);
}
.h2--light{ color:var(--ivory); }

.lede{
  margin:18px 0 0; max-width:46ch; color:var(--ink-soft);
  font-size:clamp(15px,1.1vw,18px); line-height:1.6;
}
.lede--light{ color:rgba(244,239,231,.72); }
.lede b{ color:var(--ivory); font-weight:600; }

/* ============================== Buttons & links ============================== */
.btn{
  --btn-fg:var(--ivory); --btn-bg:var(--terracotta);
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:17px 40px; border:0; cursor:pointer; text-decoration:none;
  font:600 12px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase;
  color:var(--btn-fg); background:var(--btn-bg);
  overflow:hidden; isolation:isolate;
  transition:color var(--hov) var(--ease);
}
.btn span{ position:relative; z-index:2; }
.btn::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--ink); transform:scaleY(0); transform-origin:bottom center;
  transition:transform var(--hov) var(--ease);
}
.btn:hover::before, .btn:focus-visible::before{ transform:scaleY(1); transform-origin:top center; }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ivory); box-shadow:inset 0 0 0 1px var(--brass); }
.btn--ghost::before{ background:var(--brass); }
.btn--ghost:hover, .btn--ghost:focus-visible{ color:var(--ink); }

.ilink{ position:relative; color:inherit; text-decoration:none; }
.ilink span{ position:relative; }
.ilink span::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:var(--brass); transform:scaleX(0); transform-origin:right center;
  transition:transform var(--hov) var(--ease);
}
.ilink:hover span::after, .ilink:focus-visible span::after{ transform:scaleX(1); transform-origin:left center; }

/* ============================== Loader ============================== */
.loader{
  position:fixed; inset:0; z-index:150; overflow:hidden;
  animation:ldGone 0.01s linear calc(var(--enter) - 0.05s) forwards;
}
@keyframes ldGone{ to{ visibility:hidden; pointer-events:none; } }

/* The whole loader is time-based CSS. If JS never runs it still clears. */
.loader__blinds{ position:absolute; inset:0; display:flex; }
.loader__blinds i{
  flex:1 1 0; background:var(--ink); display:block;
  transform-origin:top center;
  animation:ldBlind .55s var(--ease-out) calc(1.30s + var(--i) * .045s) forwards;
}
@keyframes ldBlind{ from{ transform:scaleY(1);} to{ transform:scaleY(0);} }

.loader__core{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center;
  gap:6px; text-align:center;
  animation:ldCoreOut .28s var(--ease) 1.15s forwards;
}
@keyframes ldCoreOut{ to{ opacity:0; transform:translateY(-12px); } }

.loader__mono{ width:clamp(200px,44vw,300px); overflow:visible; }
.loader__mono text{
  font-family:var(--serif); fill:var(--ivory); text-anchor:middle;
  transform-box:fill-box; transform-origin:center;
  opacity:0; animation:ldIn .62s var(--ease-out) forwards;
}
.loader__m,.loader__r{ font-size:78px; }
.loader__amp{ font-size:52px; font-style:italic; fill:var(--terracotta-lt); }
.loader__m{ animation-delay:.16s; }
.loader__r{ animation-delay:.24s; }
.loader__amp{ animation-delay:.32s; }
@keyframes ldIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }

.loader__ring{
  fill:none; stroke:var(--brass); stroke-width:1;
  stroke-dasharray:560; stroke-dashoffset:560;
  animation:ldRing 1s var(--ease-out) .08s forwards;
}
@keyframes ldRing{ to{ stroke-dashoffset:0; } }

.loader__word{
  margin:16px 0 0; font:500 11px/1 var(--sans); letter-spacing:.42em;
  text-transform:uppercase; color:var(--brass-lt); opacity:0;
  animation:ldIn .55s var(--ease-out) .42s forwards;
}
.loader__rule{
  display:block; width:110px; height:1px; background:var(--brass);
  transform:scaleX(0); animation:ldRule .6s var(--ease-out) .48s forwards;
}
@keyframes ldRule{ to{ transform:scaleX(1); } }

/* calm: same choreography, roughly two-thirds the running time */
html[data-motion="calm"] .loader__blinds i{
  animation-duration:.38s; animation-delay:calc(.72s + var(--i) * .026s);
}
html[data-motion="calm"] .loader__core{ animation-duration:.22s; animation-delay:.62s; }
html[data-motion="calm"] .loader__mono text{ animation-duration:.34s; }
html[data-motion="calm"] .loader__m{ animation-delay:.05s; }
html[data-motion="calm"] .loader__r{ animation-delay:.09s; }
html[data-motion="calm"] .loader__amp{ animation-delay:.13s; }
html[data-motion="calm"] .loader__ring{ animation-duration:.5s; animation-delay:.04s; }
html[data-motion="calm"] .loader__word{ animation-duration:.3s; animation-delay:.18s; }
html[data-motion="calm"] .loader__rule{ animation-duration:.34s; animation-delay:.22s; }

.loader.is-done{ visibility:hidden; pointer-events:none; }

/* ============================== Top bar ============================== */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:90;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:18px var(--gut);
  opacity:0;
  animation:barIn .9s var(--ease-out) calc(var(--enter) + .25s) forwards;
  transition:background .5s ease, box-shadow .5s ease, padding .5s ease;
}
@keyframes barIn{ from{opacity:0; transform:translateY(-14px);} to{opacity:1; transform:translateY(0);} }

.topbar.is-stuck{
  background:rgba(244,239,231,.92);
  backdrop-filter:blur(9px);
  box-shadow:0 1px 0 rgba(23,18,16,.14);
  padding-top:12px; padding-bottom:12px;
}

.topbar__mark{
  display:inline-flex; align-items:baseline; gap:2px; text-decoration:none;
  font-family:var(--serif); font-size:24px; color:var(--ink); line-height:1;
}
.topbar__mark em{ color:var(--terracotta); font-size:17px; }

.topbar__nav ul{ display:flex; gap:clamp(14px,2.2vw,34px); margin:0; padding:0; list-style:none; align-items:center; }
.topbar__nav a{
  position:relative; display:inline-block; text-decoration:none; color:var(--ink);
  font:600 11px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase;
  padding:6px 0;
}
.topbar__nav a span{ position:relative; display:block; }
.topbar__nav a span::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:var(--brass); transform:scaleX(0); transform-origin:right center;
  transition:transform var(--hov) var(--ease);
}
.topbar__nav a:hover span::after,
.topbar__nav a:focus-visible span::after{ transform:scaleX(1); transform-origin:left center; }
.topbar__cta{ color:var(--terracotta) !important; }

/* ============================== Hero ============================== */
.hero{
  position:relative; min-height:100svh; padding:0 var(--gut);
  display:flex; align-items:center; overflow:hidden;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(176,141,87,.20), transparent 58%),
    radial-gradient(100% 80% at 6% 96%, rgba(156,74,47,.16), transparent 60%),
    var(--ivory);
}
.hero__grain{
  position:absolute; inset:-20%; pointer-events:none; opacity:.5;
  background:
    repeating-linear-gradient(103deg, rgba(23,18,16,.045) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(17deg, rgba(156,74,47,.05) 0 1px, transparent 1px 11px);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{ from{ transform:translate3d(-1.4%,-1%,0) rotate(0.1deg);} to{ transform:translate3d(1.6%,1.4%,0) rotate(-0.15deg);} }
html[data-motion="calm"] .hero__grain{ animation-duration:52s; opacity:.36; }

.hero__grid{
  position:relative; width:100%; max-width:var(--maxw); margin:0 auto;
  display:grid; gap:0 clamp(20px,3vw,54px);
  grid-template-columns:repeat(12,1fr);
  align-items:center;
  padding:120px 0 92px;
}

.hero__eyebrow{
  grid-column:1 / 8; margin:0 0 clamp(16px,2vw,30px);
  display:flex; align-items:center; gap:12px;
  font:600 11px/1 var(--sans); letter-spacing:.32em; text-transform:uppercase;
  color:var(--terracotta);
}
.tick{ display:block; width:clamp(26px,4vw,58px); height:1px; background:var(--brass); transform-origin:left center; }

.hero__title{
  grid-column:1 / 9; margin:0;
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(58px,12.2vw,182px); line-height:.86; letter-spacing:-.035em;
}
.hero__line{ display:block; }
.hero__line.l2{ margin-left:clamp(20px,7vw,150px); }
.hero__amp{
  display:inline-block; font-style:italic; color:var(--terracotta);
  font-size:.52em; vertical-align:.12em; margin:0 .12em 0 .16em;
}

.hero__plate{
  grid-column:9 / 13; grid-row:2 / 4; align-self:center;
  aspect-ratio:31/41; overflow:hidden; position:relative;
  box-shadow:0 30px 70px -34px rgba(23,18,16,.6);
}
.hero__plate svg{ width:100%; height:100%; }

.hero__meta{ grid-column:1 / 8; margin-top:clamp(28px,4vw,54px); }
.hero__meta dl{
  display:flex; flex-wrap:wrap; gap:0; margin:0 0 22px;
  border-top:1px solid rgba(23,18,16,.2); border-bottom:1px solid rgba(23,18,16,.2);
}
.hero__meta dl > div{
  flex:1 1 120px; padding:14px 18px 14px 0;
  border-right:1px solid rgba(23,18,16,.12);
}
.hero__meta dl > div:last-child{ border-right:0; }
.hero__meta dt{
  font:600 10px/1 var(--sans); letter-spacing:.28em; text-transform:uppercase;
  color:var(--terracotta); margin-bottom:7px;
}
.hero__meta dd{ margin:0; font-family:var(--serif); font-size:clamp(19px,1.7vw,26px); line-height:1.1; }
.hero__blurb{ max-width:44ch; color:var(--ink-soft); margin:0 0 28px; }

.hero__folio{
  grid-column:12 / 13; grid-row:5; justify-self:end; margin:34px 0 0;
  font:600 10px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase;
  color:rgba(23,18,16,.42);
}
.hero__cue{
  grid-column:1 / 4; grid-row:5; margin-top:34px;
  display:inline-flex; align-items:center; gap:14px; text-decoration:none;
  font:600 10px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-soft);
}
.hero__cue-line{
  display:block; width:56px; height:1px; background:var(--terracotta);
  transform-origin:left center; animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{ 0%,100%{ transform:scaleX(.35);} 50%{ transform:scaleX(1);} }
html[data-motion="calm"] .hero__cue-line{ animation-duration:5s; }

/* hero entrance — CSS only, independent of JS */
.hero__eyebrow,.hero__title .hero__line,.hero__title .hero__amp,
.hero__plate,.hero__meta,.hero__folio,.hero__cue{
  opacity:0; animation:heroUp .95s var(--ease-out) forwards;
}
@keyframes heroUp{ from{ opacity:0; transform:translateY(var(--travel)); } to{ opacity:1; transform:translateY(0); } }
.hero__eyebrow{ animation-delay:calc(var(--enter) + .00s); }
.hero__title .l1{ animation-delay:calc(var(--enter) + .09s); }
.hero__title .hero__amp{ animation-delay:calc(var(--enter) + .16s); }
.hero__title .l2{ animation-delay:calc(var(--enter) + .22s); }
.hero__meta{ animation-delay:calc(var(--enter) + .34s); }
.hero__folio{ animation-delay:calc(var(--enter) + .46s); }
.hero__cue{ animation-delay:calc(var(--enter) + .46s); }

.hero__plate{
  animation-name:plateIn; animation-duration:1.25s;
  animation-delay:calc(var(--enter) + .12s);
}
@keyframes plateIn{
  from{ opacity:0; transform:translateY(var(--travel)) scale(var(--settle)); clip-path:inset(0 0 100% 0); }
  to{ opacity:1; transform:translateY(0) scale(1); clip-path:inset(0 0 0 0); }
}
.tick{ animation:tickIn .8s var(--ease-out) calc(var(--enter) + .2s) backwards; }
@keyframes tickIn{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }

/* ============================== Chapter rule ============================== */
.chapline{
  max-width:var(--maxw); margin:0 auto; padding:0 0 clamp(38px,5vw,74px);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,60px);
  align-items:start;
}
.chapline__no{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(72px,13vw,190px); line-height:.7; letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1px rgba(156,74,47,.55);
  text-stroke:1px rgba(156,74,47,.55);
}
.chapline__no--light{ -webkit-text-stroke-color:rgba(176,141,87,.7); }
.chapline__txt{ padding-top:clamp(4px,1vw,14px); }
.chapline--tight{ padding-bottom:clamp(30px,4vw,54px); }

/* ============================== Story rail ============================== */
.story{ padding:clamp(90px,12vw,170px) var(--gut) clamp(70px,9vw,120px); background:var(--ivory); }

.story-rail{ max-width:var(--maxw); margin:0 auto; }

.story-viewport{
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity;
  -ms-overflow-style:none; scrollbar-width:none;
  cursor:grab;
  padding-bottom:8px;
}
.story-viewport::-webkit-scrollbar{ display:none; }
.story-viewport.is-drag{ cursor:grabbing; scroll-snap-type:none; }
.story-viewport.is-nosnap{ scroll-snap-type:none; }

.story-track{
  display:flex; align-items:stretch; gap:clamp(18px,2.4vw,38px);
  margin:0; padding:0 0 6px; list-style:none;
}

.chap{
  scroll-snap-align:start;
  flex:0 0 clamp(280px,32vw,430px);
  position:relative;
  padding:clamp(26px,2.6vw,40px);
  background:var(--ivory-2);
  border-top:1px solid var(--brass);
  display:flex; flex-direction:column;
  min-height:clamp(340px,42vh,470px);
  transition:background var(--hov) var(--ease), transform var(--hov) var(--ease);
}
.chap:hover{ background:var(--ivory-3); }
.chap:nth-child(even){ background:var(--ivory-3); }
.chap:nth-child(even):hover{ background:var(--ivory-2); }
.chap--last{ background:var(--burgundy); border-top-color:var(--brass-lt); }
.chap--last:hover{ background:var(--burgundy-dk); }
.chap--last .chap__title, .chap--last .chap__no i{ color:var(--ivory); }
.chap--last .chap__body{ color:rgba(244,239,231,.78); }
.chap--last .chap__year{ color:var(--brass-lt); }

.chap__no{ margin:0 0 auto; }
.chap__no i{
  font-family:var(--serif); font-style:normal; font-size:clamp(40px,4.2vw,62px);
  line-height:1; color:var(--terracotta); display:block;
}
.chap__year{
  margin:26px 0 8px; font:600 10px/1 var(--sans); letter-spacing:.28em;
  text-transform:uppercase; color:var(--terracotta-dk);
}
.chap__title{
  margin:0 0 14px; font-family:var(--serif); font-weight:400;
  font-size:clamp(24px,2.5vw,34px); line-height:1.08; letter-spacing:-.01em;
}
.chap__body{ margin:0; color:var(--ink-soft); font-size:15px; line-height:1.62; }
.chap__mark{ width:96px; height:auto; margin-top:22px; opacity:.85; }

.story-bar{
  display:flex; align-items:center; gap:clamp(16px,2.4vw,32px);
  margin-top:clamp(24px,3vw,40px);
}
.story-nav{ display:flex; gap:10px; }
.rbtn{
  width:52px; height:52px; border:1px solid rgba(23,18,16,.28); background:transparent;
  color:var(--ink); cursor:pointer; display:grid; place-items:center;
  transition:background var(--hov) var(--ease), color var(--hov) var(--ease), border-color var(--hov) var(--ease);
}
.rbtn svg{ width:22px; height:22px; }
.rbtn:hover:not(:disabled){ background:var(--terracotta); color:var(--ivory); border-color:var(--terracotta); }
.rbtn:disabled{ opacity:.3; cursor:default; }

.story-progress{ flex:1 1 auto; height:1px; background:rgba(23,18,16,.2); position:relative; }
.story-progress span{
  position:absolute; inset:0; background:var(--terracotta);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .28s linear;
}
.story-count{
  margin:0; font-family:var(--serif); font-size:19px; color:var(--ink-soft);
  min-width:72px; text-align:right;
}
.story-count i{ font-style:normal; color:var(--brass); margin:0 4px; }

/* ============================== Countdown ============================== */
.count{
  position:relative; padding:clamp(80px,11vw,150px) var(--gut);
  background:var(--ink); color:var(--ivory); overflow:hidden;
}
.count::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(80% 60% at 78% 12%, rgba(156,74,47,.34), transparent 62%),
    radial-gradient(60% 60% at 12% 92%, rgba(176,141,87,.18), transparent 66%);
  animation:drift 34s ease-in-out infinite alternate;
}
html[data-motion="calm"] .count::before{ animation-duration:60s; }
.count__inner{ position:relative; max-width:var(--maxw); margin:0 auto; }

.clock{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(176,141,87,.5);
  border-bottom:1px solid rgba(176,141,87,.5);
}
.clock__unit{
  padding:clamp(22px,3vw,44px) 10px;
  text-align:center;
  border-right:1px solid rgba(176,141,87,.28);
}
.clock__unit:last-child{ border-right:0; }
.clock__num{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(44px,8.4vw,124px); line-height:.9; letter-spacing:-.03em;
  color:var(--ivory); font-variant-numeric:tabular-nums;
}
.clock__lab{
  display:block; margin-top:14px;
  font:600 10px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase;
  color:var(--brass-lt);
}
.clock.is-over{ grid-template-columns:1fr; }
.clock.is-over .clock__unit{ border-right:0; }
.clock__note{
  margin:22px 0 0; font:600 11px/1.6 var(--sans); letter-spacing:.24em;
  text-transform:uppercase; color:rgba(244,239,231,.62);
}
.clock__num.tickpop{ animation:tickpop .5s var(--ease-out); }
@keyframes tickpop{ from{ transform:translateY(6px); opacity:.55; } to{ transform:translateY(0); opacity:1; } }
html[data-motion="calm"] .clock__num.tickpop{ animation-duration:.28s; }

/* ============================== Plates ============================== */
.gallery{ padding:clamp(90px,12vw,170px) var(--gut) clamp(60px,8vw,110px); }

.plates{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(18px,2.6vw,44px);
  align-items:start;
}

.plate{ margin:0; position:relative; cursor:pointer; }
.plate__art{
  position:relative; overflow:hidden; background:var(--ivory-2);
  box-shadow:0 26px 58px -38px rgba(23,18,16,.7);
}
.plate__art svg{ width:100%; height:auto; display:block; transition:transform var(--hov) var(--ease); }
.plate__art::after{
  content:""; position:absolute; inset:0; background:var(--ink);
  opacity:0; transition:opacity var(--hov) var(--ease);
}
.plate:hover .plate__art svg,
.plate:focus-visible .plate__art svg{ transform:scale(1.055) translateY(-1.4%); }
.plate:hover .plate__art::after,
.plate:focus-visible .plate__art::after{ opacity:.16; }

.plate__cap{
  display:flex; align-items:baseline; gap:12px;
  margin-top:16px; padding-top:12px;
  border-top:1px solid rgba(23,18,16,.22);
  opacity:.55; transform:translateY(-6px);
  transition:opacity var(--hov) var(--ease), transform var(--hov) var(--ease);
}
.plate:hover .plate__cap,
.plate:focus-visible .plate__cap{ opacity:1; transform:translateY(0); }
.plate__no{
  font-family:var(--serif); font-style:italic; font-size:16px; color:var(--brass);
  letter-spacing:.06em;
}
.plate__txt{
  font:600 11px/1.5 var(--sans); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink);
}

/* the asymmetric magazine grid */
.plate--a{ grid-column:1 / 6; }
.plate--b{ grid-column:7 / 13; margin-top:clamp(40px,7vw,120px); }
.plate--c{ grid-column:3 / 7; margin-top:clamp(20px,3vw,50px); }
.plate--d{ grid-column:8 / 12; margin-top:clamp(-40px,-3vw,0px); }
.plate--e{ grid-column:2 / 10; margin-top:clamp(30px,5vw,90px); }
.plate--f{ grid-column:10 / 13; margin-top:clamp(30px,5vw,90px); }

.plateMono{ font-family:var(--serif); font-size:104px; fill:var(--ivory); }
.plateSub{ font-family:var(--sans); font-size:15px; letter-spacing:.3em; fill:#b08d57; }

/* ============================== Pull quote ============================== */
.quote{
  padding:clamp(70px,10vw,150px) var(--gut);
  background:var(--ivory);
}
.quote blockquote{
  max-width:1080px; margin:0 auto; padding:0;
  border-top:1px solid var(--brass); border-bottom:1px solid var(--brass);
}
.quote p{
  margin:clamp(40px,5vw,72px) 0;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(28px,4.6vw,64px); line-height:1.08; letter-spacing:-.02em;
  color:var(--ink); text-indent:clamp(0px,6vw,120px);
}
.quote em{ color:var(--terracotta); }
.quote footer{
  display:flex; align-items:center; gap:16px; padding-bottom:clamp(22px,3vw,38px);
  font:600 10px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-soft);
}
.quote__rule{ display:block; width:clamp(40px,8vw,110px); height:1px; background:var(--terracotta); }

/* ============================== Details ============================== */
.details{ padding:clamp(80px,11vw,160px) var(--gut); background:var(--ivory); }

.cards{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(16px,2vw,28px);
}
.card{
  grid-column:span 4;
  padding:clamp(26px,2.6vw,42px);
  background:var(--ivory-2);
  border-top:2px solid var(--terracotta);
  transition:transform var(--hov) var(--ease), background var(--hov) var(--ease);
}
.card:hover{ transform:translateY(-6px); background:var(--ivory-3); }
.card--wide{ grid-column:span 12; }
.card--dark{
  background:var(--ink); color:var(--ivory); border-top-color:var(--brass);
}
.card--dark:hover{ background:var(--ink-2); }
.card--dark .card__tag{ color:var(--brass-lt); }
.card--dark .card__p{ color:rgba(244,239,231,.76); }

.card__tag{
  margin:0 0 16px; font:600 10px/1 var(--sans); letter-spacing:.3em;
  text-transform:uppercase; color:var(--terracotta);
}
.card__h{
  margin:0 0 14px; font-family:var(--serif); font-weight:400;
  font-size:clamp(24px,2.6vw,38px); line-height:1.06;
}
.card__p{ margin:0 0 12px; color:var(--ink-soft); }
.card__p:last-child{ margin-bottom:0; }
.card__p b{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.card--dark .card__p b{ color:var(--ivory); }
.card__p--sm{ font-size:14px; opacity:.85; }

.swatch{ display:flex; gap:10px; margin:18px 0; padding:0; list-style:none; }
.swatch li{
  width:34px; height:34px; background:var(--s);
  box-shadow:inset 0 0 0 1px rgba(23,18,16,.18);
  transition:transform var(--hov) var(--ease);
}
.card:hover .swatch li{ transform:translateY(-4px); }
.card:hover .swatch li:nth-child(2){ transition-delay:.04s; }
.card:hover .swatch li:nth-child(3){ transition-delay:.08s; }
.card:hover .swatch li:nth-child(4){ transition-delay:.12s; }

/* ============================== RSVP ============================== */
.rsvp{
  position:relative; overflow:hidden;
  padding:clamp(80px,11vw,160px) var(--gut) clamp(70px,9vw,130px);
  background:var(--burgundy); color:var(--ivory);
}
.rsvp::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 70% at 88% 6%, rgba(156,74,47,.5), transparent 60%),
    radial-gradient(60% 60% at 4% 96%, rgba(23,18,16,.5), transparent 62%);
  animation:drift 40s ease-in-out infinite alternate;
}
html[data-motion="calm"] .rsvp::before{ animation-duration:70s; }
.rsvp__inner{ position:relative; max-width:1100px; margin:0 auto; }
.rsvp__stage{ position:relative; }

.form{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,30px);
}
.field{ display:flex; flex-direction:column; min-width:0; }
.field--full{ grid-column:1 / -1; }
.field--radio{ grid-column:1 / -1; border:0; margin:0; padding:0; }

.form label, .form legend{
  display:block; margin-bottom:10px; padding:0;
  font:600 10px/1.4 var(--sans); letter-spacing:.26em; text-transform:uppercase;
  color:var(--brass-lt);
}
.opt{ letter-spacing:.12em; opacity:.7; text-transform:none; font-weight:500; }

.form input[type="text"], .form input[type="email"], .form textarea, .form select{
  width:100%; padding:15px 2px; background:transparent; color:var(--ivory);
  border:0; border-bottom:1px solid rgba(217,189,140,.42);
  font-family:var(--sans); font-size:16px; border-radius:0;
  transition:border-color var(--hov) var(--ease), background var(--hov) var(--ease);
}
.form textarea{ resize:vertical; min-height:76px; }
.form input::placeholder, .form textarea::placeholder{ color:rgba(244,239,231,.36); }
.form input:hover, .form textarea:hover, .form select:hover{ border-bottom-color:var(--brass-lt); }
.form input:focus, .form textarea:focus, .form select:focus{
  outline:none; border-bottom-color:var(--brass-lt); background:rgba(244,239,231,.05);
}
.form input:focus-visible, .form textarea:focus-visible, .form select:focus-visible{
  outline:2px solid var(--brass-lt); outline-offset:2px;
}

.selectwrap{ position:relative; }
.form select{ appearance:none; -webkit-appearance:none; padding-right:30px; cursor:pointer; }
.form select option{ background:var(--burgundy-dk); color:var(--ivory); }
.selectwrap__caret{
  position:absolute; right:6px; top:50%; width:9px; height:9px; pointer-events:none;
  border-right:1px solid var(--brass-lt); border-bottom:1px solid var(--brass-lt);
  transform:translateY(-70%) rotate(45deg);
}

.radios{ display:flex; flex-wrap:wrap; gap:14px 30px; }
.radio{
  display:inline-flex !important; align-items:center; gap:12px; cursor:pointer;
  margin:0 !important; letter-spacing:normal !important; text-transform:none !important;
  font-size:15px !important; font-weight:500 !important; color:var(--ivory) !important;
}
.radio input{ position:absolute; opacity:0; width:1px; height:1px; }
.radio__box{
  width:19px; height:19px; flex:0 0 19px; border:1px solid rgba(217,189,140,.6);
  border-radius:50%; display:grid; place-items:center;
  transition:border-color var(--hov) var(--ease);
}
.radio__box::after{
  content:""; width:9px; height:9px; border-radius:50%; background:var(--brass-lt);
  transform:scale(0); transition:transform .28s var(--ease-out);
}
.radio input:checked + .radio__box{ border-color:var(--brass-lt); }
.radio input:checked + .radio__box::after{ transform:scale(1); }
.radio input:focus-visible + .radio__box{ outline:2px solid var(--brass-lt); outline-offset:3px; }
.radio__txt{ line-height:1.3; }

.form__foot{
  grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center;
  gap:18px 26px; margin-top:8px;
}
.form__hint{ margin:0; font-size:13px; color:rgba(244,239,231,.6); }

.form__err{
  margin:8px 0 0; font:500 13px/1.4 var(--sans); color:#f0b9a4;
}
.form__err--top{
  grid-column:1 / -1; margin:0; padding:14px 18px;
  background:rgba(23,18,16,.35); border-left:2px solid #f0b9a4;
}
.form .is-bad input, .form .is-bad textarea, .form .is-bad select{ border-bottom-color:#e08b6b; }
.field.shake{ animation:shake .4s var(--ease); }
@keyframes shake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-5px);} 75%{transform:translateX(5px);} }
html[data-motion="calm"] .field.shake{ animation:none; }

/* confirmation */
.done{ text-align:center; padding:clamp(20px,4vw,50px) 0; }
.done[hidden]{ display:none; }
.done__mark{ width:clamp(86px,10vw,120px); margin:0 auto 26px; }
.done__tick{ stroke-dasharray:90; stroke-dashoffset:90; }
.done.is-in .done__tick{ animation:tick .8s var(--ease-out) .18s forwards; }
@keyframes tick{ to{ stroke-dashoffset:0; } }
.done__h{
  margin:0 0 14px; font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,5vw,68px); line-height:1; color:var(--ivory);
}
.done__p{ margin:0 auto 30px; max-width:52ch; color:rgba(244,239,231,.78); }
.done.is-in > *{ animation:doneUp .7s var(--ease-out) backwards; }
.done.is-in > *:nth-child(1){ animation-delay:.02s; }
.done.is-in > *:nth-child(2){ animation-delay:.12s; }
.done.is-in > *:nth-child(3){ animation-delay:.2s; }
.done.is-in > *:nth-child(4){ animation-delay:.28s; }
.done.is-in > *:nth-child(5){ animation-delay:.36s; }
@keyframes doneUp{ from{ opacity:0; transform:translateY(var(--travel)); } to{ opacity:1; transform:translateY(0); } }

/* ============================== Footer ============================== */
.foot{
  padding:clamp(60px,8vw,110px) var(--gut) clamp(40px,5vw,64px);
  background:var(--ink); color:var(--ivory); text-align:center;
}
.foot__mark{
  display:inline-flex; align-items:baseline; gap:3px;
  font-family:var(--serif); font-size:clamp(38px,6vw,72px); line-height:1;
}
.foot__mark em{ color:var(--terracotta-lt); font-size:.62em; }
.foot__date{
  margin:22px 0 6px; font:600 10px/1.6 var(--sans); letter-spacing:.3em;
  text-transform:uppercase; color:var(--brass-lt);
}
.foot__fine{ margin:0; font-size:14px; color:rgba(244,239,231,.5); }

/* ============================== Scroll reveal ==============================

   The resting state must NOT clip.

   This previously carried `clip-path:inset(0 0 100% 0)`, which collapsed the
   element's box to zero height. IntersectionObserver measures the clipped
   rectangle, so a fully-clipped element never reports as intersecting — the
   observer that was supposed to reveal it could never fire, and every section
   below the hero stayed invisible forever. The element hid itself too well to
   be found.

   The wipe survives: it now runs as a keyframe on .is-in, by which point the
   observer has already done its job and clipping is harmless.
   ========================================================================== */
html.js .reveal{
  opacity:0;
  transform:translateY(var(--travel)) scale(var(--settle));
  transition:
    opacity var(--wipe) var(--ease-out),
    transform var(--wipe) var(--ease-out);
  transition-delay:var(--d,0s);
  will-change:transform, opacity;
}
html.js .reveal.is-in{
  opacity:1; transform:translateY(0) scale(1);
  animation:revealWipe var(--wipe) var(--ease-out) var(--d,0s) both;
}
/* `both` holds the collapsed state through the stagger delay, so grouped plates
   still wipe in one after another rather than all at once. */
@keyframes revealWipe{
  from{ clip-path:inset(0 0 100% 0); }
  to  { clip-path:inset(0 0 0 0); }
}
html.js .reveal.is-done{ will-change:auto; }

/* ============================== Responsive ============================== */
@media (max-width:1180px){
  .plate--a{ grid-column:1 / 7; }
  .plate--b{ grid-column:7 / 13; }
  .plate--c{ grid-column:1 / 6; }
  .plate--d{ grid-column:7 / 12; }
  .plate--e{ grid-column:1 / 10; }
  .plate--f{ grid-column:10 / 13; }
  .card{ grid-column:span 6; }
}

@media (max-width:900px){
  .hero__grid{ padding:112px 0 76px; }
  .hero__title{ grid-column:1 / 13; }
  .hero__eyebrow{ grid-column:1 / 13; }
  .hero__plate{
    grid-column:1 / 13; grid-row:auto; margin:34px 0 0;
    aspect-ratio:16/10; max-height:44vh;
  }
  .hero__meta{ grid-column:1 / 13; }
  .hero__cue{ grid-column:1 / 8; grid-row:auto; }
  .hero__folio{ grid-column:1 / 13; grid-row:auto; justify-self:start; margin-top:16px; }
}

/* --- 768px: the rail degrades to a vertical stack. No scroll trapping. --- */
@media (max-width:768px){
  .topbar{ padding-left:18px; padding-right:18px; }
  .topbar__nav ul{ gap:13px; }
  .topbar__nav a{ font-size:10px; letter-spacing:.12em; }

  .chapline{ grid-template-columns:1fr; gap:10px; }
  .chapline__no{ font-size:clamp(60px,17vw,110px); }

  .story-viewport{
    overflow:visible; cursor:auto; scroll-snap-type:none; padding-bottom:0;
  }
  .story-track{ flex-direction:column; gap:16px; padding:0; }
  .chap{
    flex:1 1 auto; width:100%; min-height:0;
    padding:26px 22px 30px;
    scroll-snap-align:none;
  }
  .chap__no{ margin-bottom:0; }
  .chap__year{ margin-top:14px; }
  .story-bar{ display:none; }

  .clock{ grid-template-columns:repeat(2,1fr); }
  .clock__unit:nth-child(2){ border-right:0; }
  .clock__unit:nth-child(1),.clock__unit:nth-child(2){ border-bottom:1px solid rgba(176,141,87,.28); }

  .plates{ grid-template-columns:1fr; }
  .plate--a,.plate--b,.plate--c,.plate--d,.plate--e,.plate--f{
    grid-column:1 / -1; margin-top:0;
  }
  .plate--c{ margin-inline:0; }

  .cards{ grid-template-columns:1fr; }
  .card, .card--wide{ grid-column:1 / -1; }

  .form{ grid-template-columns:1fr; }
  .quote p{ text-indent:0; }
}

@media (max-width:420px){
  :root{ --gut:20px; }
  .hero__line.l2{ margin-left:26px; }
  .hero__meta dl{ display:grid; grid-template-columns:1fr 1fr; }
  .hero__meta dl > div:nth-child(2){ border-right:0; }
  .hero__meta dl > div:nth-child(3){
    grid-column:1 / -1; border-top:1px solid rgba(23,18,16,.12); border-right:0;
  }
  .btn{ padding:16px 26px; width:100%; }
  .form__foot .btn{ width:100%; }
  .radios{ flex-direction:column; gap:14px; }
  .clock__lab{ letter-spacing:.2em; font-size:9px; }
}

/* ============================== Print ============================== */
@media print{
  .loader,.topbar,.hero__cue,.story-bar,.skip{ display:none !important; }
  body{ background:#fff; color:#000; }
  html.js .reveal{ opacity:1 !important; transform:none !important; clip-path:none !important; }
}

/* ==========================================================================
   Narrow-phone top bar

   Below ~620px the mark plus four section links plus the RSVP pill no longer
   fit on one line, and the tail of the list — including RSVP, the one thing a
   guest actually needs — was being pushed past the right edge. The section
   links are a convenience on a page this short, so they stand down and the
   mark and RSVP keep their places.
   ========================================================================== */
@media (max-width: 620px) {
  .topbar { gap: 12px; }

  .topbar__nav ul {
    gap: 0;
    justify-content: flex-end;
  }
  /* Every item except the RSVP pill steps out. */
  .topbar__nav li:not(:last-child) { display: none; }

  .topbar__cta { font-size: 11px; letter-spacing: .14em; }
}