/* ============================================================
   TRINOEL — Emmanuel & Trinity · 27 November 2026
   ============================================================ */

:root{
  /* palette */
  --cream:      #fffdfb;
  --cream-2:    #faf6ef;
  --tint:       #f6f1e8;
  --ink:        #3a3a3a;
  --ink-soft:   #6b6b6b;
  --ink-faint:  #9a958d;
  --gold:       #c8aa78;
  --gold-lt:    #dfc48e;
  --gold-pale:  #ede5cc;
  --blue:       #7a9aaa;
  --blue-pale:  #dce8ee;
  --black:      #1a1916;
  --line:       #e6ded1;

  /* type */
  --serif:  'Rufina', Georgia, serif;
  --script: 'Imperial Script', cursive;
  --body:   'Cormorant Garamond', Georgia, serif;

  /* rhythm */
  --sp:     clamp(64px, 9vw, 130px);
  --radius: 2px;
  --ease:   cubic-bezier(.22,.61,.36,1);
}

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

/* An author `display` rule beats the UA stylesheet's [hidden] { display:none },
   which would otherwise leave .audio-toggle and .count visible when hidden. */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(16px,1.15vw,18px);
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.is-locked{ overflow:hidden; height:100%; }

img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ---------- layout helpers ---------- */
.wrap{ width:min(1180px,90vw); margin-inline:auto; }
.wrap--wide{ width:min(1320px,93vw); }
.wrap--mid{ width:min(880px,90vw); }
.wrap--narrow{ width:min(660px,90vw); }
.center{ text-align:center; }

.section{ padding:var(--sp) 0; position:relative; }
.section--tint{ background:var(--tint); }

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--body);
  font-size:.72rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 1.1rem;
  font-weight:500;
}

.h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.85rem,4vw,3rem);
  line-height:1.24;
  letter-spacing:.005em;
  margin:0 0 1.1rem;
  color:var(--ink);
}

.section__lede{
  max-width:44ch;
  margin:0 auto;
  color:var(--ink-soft);
  font-size:1.08em;
}

.lede{ font-size:1.14em; color:var(--ink-soft); }

.sign{
  font-family:var(--script);
  font-size:clamp(2rem,4.4vw,2.9rem);
  color:var(--gold);
  margin-top:1.6rem;
  line-height:1;
}

sup{ font-size:.6em; }

/* ---------- buttons ---------- */
.btn{
  --btn-bg:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:1.05em 2.4em;
  border:1px solid var(--gold);
  border-radius:var(--radius);
  background:var(--btn-bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:.78rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn::after{
  content:"";
  position:absolute; inset:0;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .5s var(--ease);
  z-index:0;
}
.btn > *{ position:relative; z-index:1; }
.btn:hover::after{ transform:scaleX(1); transform-origin:left; }
.btn:hover{ color:var(--black); }

.btn--solid{ --btn-bg:var(--gold); color:var(--black); }
.btn--solid::after{ background:var(--black); }
.btn--solid:hover{ color:var(--gold-pale); border-color:var(--black); }

.btn--full{ width:100%; }

.btn:focus-visible,
.link-btn:focus-visible,
.audio-toggle:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

.link-btn{
  background:none; border:0; padding:0;
  font-family:var(--body); font-size:.95em;
  color:var(--ink-faint);
  border-bottom:1px solid var(--line);
  cursor:pointer;
  transition:color .3s, border-color .3s;
}
.link-btn:hover{ color:var(--gold); border-color:var(--gold); }

/* ============================================================
   ENTRY GATE — a sealed envelope filling the whole screen
   ============================================================ */
.gate{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  overflow:hidden;
  background:#f2eee6;
  transition:opacity 1.1s var(--ease), visibility 1.1s;
}
.gate.is-open{ opacity:0; visibility:hidden; pointer-events:none; }

/* --- the paper: speckled handmade stock --- */
.gate__paper{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 12% 22%, rgba(138,126,104,.30) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 68% 14%, rgba(138,126,104,.24) 0 1.4px, transparent 1.9px),
    radial-gradient(circle at 34% 76%, rgba(138,126,104,.27) 0 1.1px, transparent 1.6px),
    radial-gradient(circle at 84% 62%, rgba(138,126,104,.20) 0 1.5px, transparent 2.1px),
    radial-gradient(circle at 52% 42%, rgba(138,126,104,.22) 0 1px,   transparent 1.5px),
    radial-gradient(circle at 22% 58%, rgba(138,126,104,.18) 0 1.3px, transparent 1.8px),
    linear-gradient(158deg, #fbf9f5 0%, #f4f0e8 48%, #ece7dd 100%);
  background-size:130px 130px, 170px 170px, 190px 190px, 230px 230px, 110px 110px, 150px 150px, 100% 100%;
}

/* --- four flaps meeting at the seal --- */
.flap{ position:absolute; display:block; }

/* Tonal differences stay very slight — the seam lines do the describing. */
.flap--left{
  top:0; left:0; width:50%; height:100%;
  clip-path:polygon(0 0, 100% 50%, 0 100%);
  background:linear-gradient(90deg, rgba(255,255,255,.30), rgba(255,255,255,.05));
}
.flap--right{
  top:0; right:0; width:50%; height:100%;
  clip-path:polygon(100% 0, 0 50%, 100% 100%);
  background:linear-gradient(270deg, rgba(255,255,255,.30), rgba(255,255,255,.05));
}
.flap--bottom{
  bottom:0; left:0; width:100%; height:50%;
  clip-path:polygon(0 100%, 50% 0, 100% 100%);
  background:linear-gradient(0deg, rgba(206,196,178,.16), rgba(206,196,178,.02));
}
/* the big top flap, drawn last so it sits over the others */
.flap--top{
  top:0; left:0; width:100%; height:50%;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  background:linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(252,249,243,.24) 70%, rgba(226,218,203,.16) 100%);
  filter:drop-shadow(0 10px 16px rgba(120,106,80,.16));
  transform-origin:50% 0;
  transition:transform 1.05s var(--ease), opacity .9s var(--ease);
}
.gate.is-opening .flap--top{ transform:rotateX(-118deg); }
.gate.is-open    .flap--top{ transform:rotateX(-118deg); opacity:0; }

/* Seal and label step aside once the envelope is opening. */
.gate.is-opening .gate__open,
.gate.is-open    .gate__open{
  opacity:0;
  transform:translateY(-14px) scale(.9);
  pointer-events:none;
  transition:opacity .4s var(--ease), transform .5s var(--ease);
}

/* crisp diagonal seams, independent of viewport aspect */
.gate__seams{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}

/* --- the letter that rises out of the envelope --- */
.letter__rule{
  display:block;
  width:46px; height:1px;
  margin:0 auto;
  background:var(--gold);
  opacity:.7;
}
.letter__rule + .letter__kicker{ margin-top:1.2rem; }

.letter__kicker{
  margin:0 0 .9rem;
  font-size:.58rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink-faint);
}
.letter__names{
  margin:0 0 .7rem;
  font-family:var(--script);
  font-size:clamp(2.3rem,7.5vw,3.4rem);
  line-height:1;
  color:var(--ink);
}
.letter__names span{ color:var(--gold); }
.letter__invite{
  margin:0 0 1.3rem;
  font-family:var(--body);
  font-size:.92rem;
  color:var(--ink-soft);
  font-style:italic;
}
.letter__date{
  margin:0 0 .35rem;
  font-family:var(--serif);
  font-size:clamp(.95rem,2.6vw,1.15rem);
  letter-spacing:.06em;
  color:var(--ink);
}
.letter__venue{
  margin:0 0 1.2rem;
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* --- the wax seal --- */
.gate__open{
  position:relative; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:1.5rem;
  background:none; border:0; padding:0;
  cursor:pointer;
  transition:transform .5s var(--ease);
}
.gate__open:hover{ transform:translateY(-4px); }
.gate__open:active{ transform:translateY(0) scale(.97); }

.seal{
  display:block;
  width:clamp(104px,19vw,148px);
  filter:drop-shadow(0 10px 18px rgba(120,96,44,.34));
  animation:sealBreathe 3.6s ease-in-out infinite;
}
.seal svg{ width:100%; height:auto; display:block; }
.seal__heart{ opacity:.62; }

@keyframes sealBreathe{
  0%,100%{ transform:scale(1)     rotate(0deg); }
  50%    { transform:scale(1.045) rotate(-1.5deg); }
}

.gate__label{
  font-family:var(--serif);
  font-size:clamp(1rem,2.6vw,1.3rem);
  letter-spacing:.04em;
  color:#4a4234;
  position:relative;
}
.gate__label::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-7px;
  height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:center;
  transition:transform .45s var(--ease);
  opacity:.4;
}
.gate__open:hover .gate__label::after{ transform:scaleX(1); }

.gate__open:focus-visible{ outline:2px solid var(--gold); outline-offset:14px; border-radius:6px; }

/* ============================================================
   AUDIO TOGGLE
   ============================================================ */
.audio-toggle{
  position:fixed;
  right:clamp(16px,3vw,34px);
  bottom:clamp(16px,3vw,34px);
  z-index:900;
  width:52px; height:52px;
  border-radius:50%;
  border:1px solid var(--gold);
  background:rgba(255,253,251,.86);
  backdrop-filter:blur(8px);
  display:grid; place-items:center;
  cursor:pointer;
  transition:transform .35s var(--ease), background .35s, box-shadow .35s;
  box-shadow:0 6px 26px rgba(58,58,58,.12);
}
.audio-toggle:hover{ transform:translateY(-3px); background:var(--gold-pale); }

.audio-toggle__bars{ display:flex; align-items:flex-end; gap:3px; height:18px; }
.audio-toggle__bars i{
  width:2.5px; background:var(--gold); border-radius:2px;
  height:6px;
  animation:eq .9s ease-in-out infinite;
}
.audio-toggle__bars i:nth-child(2){ animation-delay:.18s; }
.audio-toggle__bars i:nth-child(3){ animation-delay:.36s; }
.audio-toggle__bars i:nth-child(4){ animation-delay:.54s; }

@keyframes eq{
  0%,100%{ height:5px; }
  50%    { height:17px; }
}

/* muted state */
.audio-toggle[aria-pressed="false"] .audio-toggle__bars i{
  animation-play-state:paused; height:9px; background:var(--ink-faint);
}
.audio-toggle__off{
  position:absolute;
  width:30px; height:1.5px;
  background:var(--ink-faint);
  transform:rotate(-45deg);
  opacity:0;
  transition:opacity .3s;
}
.audio-toggle[aria-pressed="false"] .audio-toggle__off{ opacity:1; }

/* ============================================================
   01 · HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  text-align:center;
  overflow:hidden;
  color:var(--cream);
}

.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 32%;
  transform:scale(1.08);
  animation:kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns{
  from{ transform:scale(1.08) translate3d(0,0,0); }
  to  { transform:scale(1.16) translate3d(0,-1.6%,0); }
}

.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(20,16,12,.52) 0%, rgba(20,16,12,.30) 38%, rgba(20,16,12,.68) 100%),
    radial-gradient(ellipse at 50% 45%, rgba(20,16,12,0) 30%, rgba(20,16,12,.42) 100%);
}

.hero__content{
  position:relative; z-index:2;
  padding:16vh clamp(20px,6vw,40px) 18vh;
  width:min(900px,92vw);
}

.hero .eyebrow{ color:rgba(255,253,251,.72); }

.hero__names{
  font-family:var(--script);
  font-weight:400;
  font-size:clamp(3.4rem,12vw,8rem);
  line-height:.92;
  margin:0 0 .5rem;
  text-shadow:0 3px 40px rgba(0,0,0,.4);
}
.hero__amp{ color:var(--gold-lt); display:inline-block; padding:0 .12em; }

.hero__mono{
  font-family:var(--serif);
  font-size:clamp(.68rem,1.5vw,.86rem);
  letter-spacing:.6em;
  color:var(--gold-lt);
  margin:0 0 1.6rem;
  text-indent:.6em;
}

.hero__tag{
  font-family:var(--serif);
  font-size:clamp(1.05rem,2.4vw,1.5rem);
  letter-spacing:.06em;
  margin:0 0 2rem;
  color:rgba(255,253,251,.94);
}

.hero__actions{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:center;
}
.hero .btn--ghost{ border-color:rgba(255,253,251,.6); color:var(--cream); }
.hero .btn--ghost::after{ background:var(--cream); }
.hero .btn--ghost:hover{ color:var(--black); }

.hero__scroll{
  position:absolute; z-index:3;
  bottom:34px; left:50%; transform:translateX(-50%);
  width:1px; height:62px;
  background:rgba(255,253,251,.28);
  overflow:hidden;
}
.hero__scroll span{
  position:absolute; inset:0;
  background:var(--gold-lt);
  animation:scrollcue 2.2s var(--ease) infinite;
}
@keyframes scrollcue{
  0%  { transform:translateY(-100%); }
  60% { transform:translateY(100%); }
  100%{ transform:translateY(100%); }
}

/* ============================================================
   02 · SCRATCH TO REVEAL
   ============================================================ */
.section--reveal{ background:var(--cream); }

.scratch{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,2vw,20px);
  width:min(560px,100%);
  margin:2.8rem auto 3.6rem;
}

.scratch__tile{
  position:relative;
  aspect-ratio:3/4;
  display:grid;
  place-content:center;
  align-content:center;
  gap:.4rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--cream-2);
  overflow:hidden;
  box-shadow:0 18px 44px -30px rgba(58,58,58,.5);
}

.scratch__label{
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-faint);
  text-align:center;
}
.scratch__value{
  font-family:var(--serif);
  font-size:clamp(2rem,7vw,3.2rem);
  line-height:1;
  color:var(--ink);
  text-align:center;
}
.scratch__value--word{ font-size:clamp(1.5rem,5vw,2.4rem); }

.scratch__canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  cursor:grab;
  touch-action:none;
}
.scratch__canvas:active{ cursor:grabbing; }

.scratch__hint{
  position:absolute;
  left:50%; bottom:-2.2rem;
  transform:translateX(-50%);
  margin:0;
  white-space:nowrap;
  font-size:.68rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-faint);
  pointer-events:none;
  animation:bob 2.4s ease-in-out infinite;
  transition:opacity .4s;
}
.scratch.is-active .scratch__hint,
.scratch.is-done   .scratch__hint{ opacity:0; }

@keyframes bob{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%    { transform:translateX(-50%) translateY(-5px); }
}

.scratch__after{
  margin:0 0 1.4rem;
  font-family:var(--serif);
  font-size:clamp(.95rem,2.2vw,1.15rem);
  color:var(--gold);
  letter-spacing:.04em;
  animation:fadeUp .8s var(--ease) both;
}

.confetti{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:5;
}

/* ============================================================
   02b · THE INVITATION — envelope opens on scroll, card rises out
   ============================================================ */
.section--invite{ background:var(--cream); overflow:hidden; }

.env{
  position:relative;
  width:min(420px,86vw);
  /* room above the envelope for the card to stand in once risen */
  margin:clamp(40px,6vw,70px) auto 0;
  padding-top:clamp(240px,32vw,310px);

  /* 0 = sealed, 1 = fully open. Written by main.js from the scroll position,
     so the card rises with the scroll rather than snapping open once. */
  --p:0;
}

/* --- the envelope itself ---
   Tall enough that the card fits entirely inside it when closed; the flap
   covers the top, the front pocket the bottom, so nothing peeks out. */
.env__body{
  position:relative;
  /* Must exceed the card's own height plus its bottom offset, or the card
     pokes out above the flap while the envelope is still closed. */
  height:clamp(390px,54vw,450px);
}

.env__back,
.env__front,
.env__flap{
  position:absolute;
  left:0; right:0;
  display:block;
}

/* paper stock, shared */
.env__back,
.env__front,
.env__flap{
  background:
    radial-gradient(circle at 22% 58%, rgba(138,126,104,.16) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 64% 30%, rgba(138,126,104,.13) 0 1px,   transparent 1.5px),
    linear-gradient(168deg, #fdfbf7 0%, #f5f1e9 60%, #ebe5d9 100%);
  background-size:120px 120px, 160px 160px, 100% 100%;
}

.env__back{
  top:0; bottom:0;
  z-index:0;
  border:1px solid rgba(190,176,150,.55);
  border-radius:2px;
}

/* The front face of the envelope: a solid panel, not a shaped pocket. The
   card lives behind it, so while it is down it is hidden completely. A
   clip-path pocket leaves an uncovered gap in the middle and the card shows
   straight through it. */
.env__front{
  top:26%;
  bottom:0;
  z-index:3;
  border-radius:0 0 2px 2px;
  border-top:1px solid rgba(178,164,138,.5);
  box-shadow:0 -10px 26px -18px rgba(90,80,62,.6);
}

/* the top flap, hinged along the envelope's top edge */
.env__flap{
  top:0;
  height:62%;
  z-index:4;                       /* over the front while it is still sealed */
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:50% 0;
  /* Scroll-linked: the flap peels back gradually, tracking --p. */
  transform:rotateX(calc(var(--p) * -172deg));
  box-shadow:0 8px 18px -14px rgba(90,80,62,.55);
}

/* Once the flap has folded past upright it lies behind the envelope, and it
   reaches further above the top edge than the card rises. Left in front it
   paints over the card's top third. main.js drops it behind at the halfway
   point, where the flap is edge-on and the swap cannot be seen. */
.env.flap-behind .env__flap{ z-index:1; }

.env__seal{
  position:absolute;
  top:calc(62% - 26px);
  left:50%;
  z-index:5;
  width:52px;
  filter:drop-shadow(0 6px 12px rgba(120,96,44,.35));
  /* Breaks early in the scroll, before the flap has moved far. */
  opacity:clamp(0, calc(1 - var(--p) * 4), 1);
  transform:translateX(-50%) scale(calc(1 - var(--p) * 0.3));
}
.env__seal svg{ width:100%; height:auto; display:block; }

/* --- the card ---
   Bottom-anchored a little above the envelope's base so the whole card sits
   within the envelope's height while closed. */
.env__card{
  position:absolute;
  left:50%;
  bottom:14px;
  z-index:2;                        /* between the back and the front pocket */
  width:min(320px,74vw);
  padding:clamp(1.1rem,3vw,1.5rem) clamp(.9rem,2.6vw,1.3rem);
  text-align:center;
  background:linear-gradient(178deg, #fffefc 0%, #fdfaf4 60%, #f8f2e7 100%);
  border:1px solid rgba(200,170,120,.42);
  border-radius:1px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 24px 44px -26px rgba(90,74,44,.5);
  /* Rises with the scroll. At --p 1 the card clears the envelope's top edge
     with its base still tucked behind the front. */
  transform:translate(-50%, calc(var(--p) * -82%));
}

@media (prefers-reduced-motion:reduce){
  .env{ --p:1; }
}

/* ============================================================
   03 · COUNTDOWN
   ============================================================ */
.count{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(8px,2vw,26px);
  margin:2.8rem auto 2.4rem;
  max-width:720px;
}
.count__cell{
  padding:1.6rem .5rem 1.3rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--cream);
}
.count__cell b{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.7rem,5.4vw,2.9rem);
  line-height:1;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.count__cell span{
  display:block;
  margin-top:.6rem;
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-faint);
}
.count__done{
  font-family:var(--script);
  font-size:clamp(2rem,6vw,3.2rem);
  color:var(--gold);
  margin:2rem 0;
}

/* ============================================================
   04 · WELCOME
   ============================================================ */
.split{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5.5rem);
  align-items:center;
}
.split__media{ position:relative; }
.split__media img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:var(--radius);
  filter:saturate(.96);
}
.split__frame{
  position:absolute;
  inset:18px -18px -18px 18px;
  border:1px solid var(--gold);
  border-radius:var(--radius);
  z-index:-1;
}
.split__body p{ margin:0 0 1.1rem; }

/* ============================================================
   05 · SCHEDULE
   ============================================================ */
/* --- cloud bank that parts on scroll --- */
.section--clouded{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* Hidden unless main.js turns them on. If the script fails to load, the
   schedule must never be left sitting behind a veil that cannot part. */
.clouds{
  position:absolute; inset:-6% -2%;
  z-index:3;
  pointer-events:none;
  display:none;
}
.section--clouded.clouds-on .clouds{ display:block; }

.cloud{
  position:absolute;
  top:0; bottom:0;
  width:64%;
  display:block;
  /* --p is 0 (closed) to 1 (fully parted), written by main.js */
  --p:0;
}
.cloud svg{
  width:100%; height:100%; display:block;
  /* Cream-on-cream would be invisible, so give each bank a soft edge shadow
     to separate it from the section behind. */
  filter:drop-shadow(0 6px 22px rgba(122,154,170,.28));
}

.cloud--left{
  left:0;
  transform:translate3d(calc(var(--p) * -78%), 0, 0);
  opacity:calc(1 - var(--p) * 0.85);
}
.cloud--right{
  right:0;
  transform:translate3d(calc(var(--p) * 78%), 0, 0);
  opacity:calc(1 - var(--p) * 0.85);
}

@media (prefers-reduced-motion:reduce){
  .section--clouded.clouds-on .clouds{ display:none; }
}

.order{
  list-style:none;
  margin:2.8rem 0 0;
  padding:0;
}

.order__row{
  display:flex;
  align-items:baseline;
  gap:1rem;
  padding:.85rem 0;
  border-bottom:1px solid rgba(200,170,120,.22);
}
.order__row:last-child{ border-bottom:0; }

.order__time{
  font-family:var(--serif);
  font-size:clamp(.95rem,2.1vw,1.2rem);
  color:var(--gold);
  letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
  flex:0 0 auto;
}

/* dotted leader between the time and the name */
.order__rule{
  flex:1 1 auto;
  height:1px;
  min-width:1.5rem;
  background-image:radial-gradient(circle, var(--ink-faint) .8px, transparent .9px);
  background-size:7px 1px;
  background-repeat:repeat-x;
  background-position:0 center;
  opacity:.45;
  transform:translateY(-.25em);
}

.order__name{
  font-family:var(--serif);
  font-size:clamp(1rem,2.3vw,1.35rem);
  color:var(--ink);
  letter-spacing:.01em;
  flex:0 0 auto;
  text-align:right;
}

/* ============================================================
   06 · VENUE
   ============================================================ */
.venue__addr{
  font-size:.8rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-soft); margin:0;
}

.venue__card{
  margin-top:3rem;
  display:grid;
  grid-template-columns:1.25fr 1fr;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--cream);
}
.venue__map{ position:relative; min-height:340px; background:var(--tint); }
.venue__map iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
  filter:grayscale(.34) contrast(.96);
}
.venue__info{ padding:clamp(1.6rem,3vw,2.4rem); display:flex; flex-direction:column; gap:1.1rem; }
.venue__row{ display:flex; flex-direction:column; gap:.15rem; }
.venue__label{
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-faint);
}
.venue__val{ color:var(--ink); }
.venue__info .btn{ margin-top:auto; }

/* ============================================================
   07 · DRESS CODE
   ============================================================ */
.dress{
  margin-top:3.2rem;
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  gap:clamp(1.8rem,5vw,3.6rem);
  align-items:start;
}
.dress__divider{ background:var(--line); align-self:stretch; }
.dress__col h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.15rem,2.4vw,1.45rem);
  margin:0 0 .8rem;
}
.dress__col p{ margin:0; color:var(--ink-soft); }

.swatches{ display:flex; gap:10px; margin-top:1.4rem; }
.swatches i{
  width:30px; height:30px;
  border-radius:50%;
  background:var(--s);
  border:1px solid rgba(58,58,58,.14);
  display:block;
}

/* ============================================================
   08 · GALLERY
   ============================================================ */
.carousel{
  position:relative;
  margin-top:3rem;
  padding-bottom:3rem;
}

.carousel__track{
  display:flex;
  gap:clamp(12px,2vw,24px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding-inline:max(calc((100vw - 1180px) / 2), 5vw);
  cursor:grab;
}
.carousel__track::-webkit-scrollbar{ display:none; }
.carousel__track.is-dragging{ cursor:grabbing; scroll-behavior:auto; scroll-snap-type:none; }
.carousel__track:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

.slide{
  position:relative;
  margin:0;
  flex:0 0 clamp(260px,52vw,620px);
  scroll-snap-align:center;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--tint);
  aspect-ratio:4/5;
}
.slide img{
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(.94);
  transition:transform 1.2s var(--ease), filter .8s;
  user-select:none;
  -webkit-user-drag:none;
}
.slide:hover img{ transform:scale(1.04); filter:saturate(1.04); }

.slide figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:2.4rem 1.6rem 1.3rem;
  background:linear-gradient(to top, rgba(20,16,12,.72), transparent);
  color:var(--cream);
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  text-align:center;
}

.slide--quote{
  display:grid; place-items:center;
  background:var(--tint);
  border:1px solid var(--line);
  padding:2rem;
  text-align:center;
}
.slide--quote blockquote{ margin:0; }
.slide--quote p{
  font-family:var(--serif);
  font-size:clamp(1.2rem,2.8vw,1.8rem);
  line-height:1.5;
  margin:0 0 1rem;
  color:var(--ink);
}
.slide--quote cite{
  font-style:normal;
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold);
}

/* arrows */
.carousel__nav{
  position:absolute; top:calc(50% - 1.5rem);
  transform:translateY(-50%);
  z-index:4;
  width:52px; height:52px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(255,253,251,.9);
  backdrop-filter:blur(6px);
  color:var(--ink);
  display:grid; place-items:center;
  cursor:pointer;
  box-shadow:0 6px 24px -12px rgba(58,58,58,.4);
  transition:background .3s, border-color .3s, opacity .3s, transform .3s var(--ease);
}
.carousel__nav svg{ width:20px; height:20px; }
.carousel__nav:hover{ background:var(--gold); border-color:var(--gold); color:var(--black); }
.carousel__nav:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.carousel__nav[disabled]{ opacity:.25; pointer-events:none; }
.carousel__nav--prev{ left:clamp(10px,3vw,32px); }
.carousel__nav--next{ right:clamp(10px,3vw,32px); }

/* dots */
.carousel__dots{
  position:absolute; bottom:0; left:0; right:0;
  display:flex; justify-content:center; gap:.55rem;
}
.carousel__dot{
  width:8px; height:8px; padding:0;
  border-radius:50%;
  border:1px solid var(--gold);
  background:transparent;
  cursor:pointer;
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.carousel__dot.is-on{ background:var(--gold); transform:scale(1.3); }
.carousel__dot:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ============================================================
   09 · RSVP
   ============================================================ */
.form{ margin-top:2.8rem; text-align:left; }

.field{ margin-bottom:1.5rem; border:0; padding:0; }
.field > label,
.field legend{
  display:block;
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:.6rem;
  padding:0;
}
.opt{ letter-spacing:.1em; text-transform:none; opacity:.7; }

.field input[type="text"],
.field input[type="tel"],
.field input[type="number"],
.field textarea{
  width:100%;
  padding:.95em 1.1em;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--cream);
  font-family:var(--body);
  font-size:1em;
  color:var(--ink);
  transition:border-color .3s, box-shadow .3s;
}
.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(200,170,120,.16);
}
.field textarea{ resize:vertical; }

.field--half-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.field--half{ margin-bottom:0; }

.choices{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }
.choice{ position:relative; cursor:pointer; }
.choice input{
  position:absolute; opacity:0; width:0; height:0;
}
.choice span{
  display:block;
  text-align:center;
  padding:.9em .6em;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--cream);
  font-size:.82em;
  letter-spacing:.06em;
  transition:all .35s var(--ease);
}
.choice:hover span{ border-color:var(--gold); }
.choice input:checked + span{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--black);
}
.choice input:focus-visible + span{ outline:2px solid var(--blue); outline-offset:2px; }

.field__err{
  display:none;
  margin-top:.45rem;
  font-size:.8em;
  color:#b5533f;
  letter-spacing:.04em;
}
.field.has-err .field__err{ display:block; }
.field.has-err input,
.field.has-err textarea{ border-color:#d59b8c; }

.form__note{
  margin:1.2rem 0 0;
  text-align:center;
  font-size:.88em;
  color:var(--ink-faint);
}
.form__note a{ color:var(--gold); text-decoration:none; border-bottom:1px solid currentColor; }

.form__ok{
  margin-top:2.8rem;
  padding:3rem 2rem;
  border:1px solid var(--gold);
  border-radius:var(--radius);
  background:var(--cream);
  animation:fadeUp .7s var(--ease) both;
}
.form__ok-mark{
  width:56px; height:56px;
  margin:0 auto 1.2rem;
  border-radius:50%;
  border:1px solid var(--gold);
  display:grid; place-items:center;
  color:var(--gold);
  font-size:1.4rem;
}
.form__ok h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.4rem,3vw,1.9rem);
  margin:0 0 .6rem;
}
.form__ok p{ margin:0 0 1.4rem; color:var(--ink-soft); }

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:none; }
}

/* ============================================================
   10 · CLOSING
   ============================================================ */
.closing{
  padding:var(--sp) 0 clamp(48px,7vw,80px);
  background:var(--black);
  color:var(--cream);
  text-align:center;
}
.closing__ornament{ width:120px; margin:0 auto 2rem; color:var(--gold); }
.closing__ornament svg{ width:100%; height:auto; }

.closing__line{
  font-family:var(--serif);
  font-size:clamp(1.1rem,2.6vw,1.5rem);
  margin:0 0 .6rem;
  color:rgba(255,253,251,.86);
}
.closing__names{
  font-family:var(--script);
  font-size:clamp(3rem,10vw,5.5rem);
  line-height:1;
  margin:0 0 1.4rem;
  color:var(--gold-lt);
}
.closing__mono{
  font-family:var(--serif);
  font-size:.7rem; letter-spacing:.44em;
  color:rgba(255,253,251,.5);
  margin:0 0 2.8rem;
  text-indent:.44em;
}
.closing__actions{
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  margin-bottom:3rem;
}
.closing .btn--ghost{ border-color:rgba(223,196,142,.45); color:var(--gold-lt); }
.closing .btn--ghost::after{ background:var(--gold-lt); }
.closing .btn--ghost:hover{ color:var(--black); }

.closing__credit{
  margin:0;
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,253,251,.34);
}

/* ============================================================
   GIFT LIST — its own page, and the small band that links to it
   ============================================================ */

/* --- the band on the invitation --- */
.giftband{
  padding:clamp(52px,7vw,84px) 0;
  background:var(--cream);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-align:center;
}
.giftband__q{
  font-family:var(--serif);
  font-size:clamp(1.2rem,3vw,1.7rem);
  margin:0 0 .6rem;
  color:var(--ink);
}
.giftband__sub{
  margin:0 0 1.8rem;
  color:var(--ink-soft);
  max-width:46ch;
  margin-inline:auto;
}

/* --- the page --- */
.giftspage{ background:var(--cream); }

.gifthead{
  padding:clamp(70px,11vw,130px) 0 clamp(40px,6vw,70px);
  position:relative;
}
.gifthead__back{
  display:inline-block;
  margin-bottom:2.4rem;
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-faint);
  text-decoration:none;
  transition:color .3s;
}
.gifthead__back:hover{ color:var(--gold); }

.gifthead__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2rem,5.4vw,3.4rem);
  line-height:1.2;
  margin:0 0 1.3rem;
  color:var(--ink);
}
.gifthead__lede{
  max-width:52ch;
  margin:0 auto;
  color:var(--ink-soft);
  font-size:1.08em;
}

/* --- the shop --- */
.shop{ text-align:center; }
.shop__kicker{
  margin:0 0 .8rem;
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold);
}
.shop__note{
  max-width:52ch;
  margin:0 auto 2.2rem;
  color:var(--ink-soft);
}
.shop__card{
  width:min(460px,100%);
  margin-inline:auto;
  padding:clamp(1.6rem,4vw,2.2rem);
  background:var(--cream);
  border:1px solid var(--gold);
  border-radius:var(--radius);
  text-align:left;
  box-shadow:0 22px 50px -34px rgba(58,58,58,.4);
}
.shop__name{
  margin:0 0 1.3rem;
  font-family:var(--serif);
  font-size:clamp(1.15rem,2.6vw,1.45rem);
  text-align:center;
  color:var(--ink);
}
.shop__rows{ margin:0 0 1.6rem; }
.shop__rows > div{
  display:flex; gap:1rem;
  padding:.6rem 0;
  border-bottom:1px solid var(--line);
}
.shop__rows > div:last-child{ border-bottom:0; }
.shop__rows dt{
  flex:0 0 84px;
  margin:0;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-faint);
  padding-top:.25em;
}
.shop__rows dd{ margin:0; flex:1; color:var(--ink); }
.shop__rows a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
.shop__rows a:hover{ border-color:var(--gold); }

/* --- the list --- */
.gifts{
  list-style:none;
  margin:3rem 0 2.4rem;
  padding:0;
}
.gift{
  display:flex;
  align-items:baseline;
  gap:1.4rem;
  padding:1.15rem .2rem;
  border-bottom:1px solid var(--line);
}
.gift:last-child{ border-bottom:0; }

.gift__body{ flex:1 1 auto; }
.gift__name{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.05rem,2.4vw,1.3rem);
  margin:0;
  color:var(--ink);
}
.gift__note{
  margin:.25rem 0 0;
  font-size:.92em;
  color:var(--ink-faint);
}
.gift__side{ flex:0 0 auto; text-align:right; }
.gift__price{
  font-family:var(--serif);
  font-size:clamp(1rem,2.2vw,1.2rem);
  color:var(--gold);
  letter-spacing:.03em;
  white-space:nowrap;
}
.gift__taken{
  font-size:.64rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint);
  white-space:nowrap;
}
.gift--taken .gift__name{ color:var(--ink-faint); text-decoration:line-through; text-decoration-thickness:1px; }

.gifts__foot{
  text-align:center;
  color:var(--ink-faint);
  max-width:46ch;
  margin:0 auto;
  font-style:italic;
}

@media (max-width:520px){
  .gift{ flex-direction:column; gap:.35rem; }
  .gift__side{ text-align:left; }
}

/* ============================================================
   ADD-TO-CALENDAR PICKER
   ============================================================ */
.calmenu{
  position:fixed; inset:0; z-index:950;
  display:grid; place-items:center;
  padding:6vh 5vw;
  background:rgba(26,25,22,.42);
  backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity .25s var(--ease);
}
.calmenu.is-open{ opacity:1; }

.calmenu__panel{
  position:relative;
  width:min(380px,100%);
  max-height:86vh;
  overflow-y:auto;
  padding:1.9rem 1.5rem 1.3rem;
  background:var(--cream);
  border:1px solid var(--gold);
  border-radius:var(--radius);
  box-shadow:0 30px 70px -30px rgba(26,25,22,.6);
  transform:translateY(14px) scale(.98);
  transition:transform .3s var(--ease);
}
.calmenu.is-open .calmenu__panel{ transform:none; }

.calmenu__head{
  margin:0 0 1.2rem;
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-faint);
  text-align:center;
}

.calmenu__item{
  display:flex; flex-direction:column; gap:.15rem;
  width:100%;
  padding:.85rem 1rem;
  margin-bottom:.5rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.calmenu__item:hover{
  border-color:var(--gold);
  background:var(--cream-2);
  transform:translateX(3px);
}
.calmenu__item:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.calmenu__item:last-of-type{ margin-bottom:0; }

.calmenu__name{
  font-family:var(--serif);
  font-size:1rem;
  letter-spacing:.01em;
}
.calmenu__hint{
  font-size:.76rem;
  color:var(--ink-faint);
  letter-spacing:.04em;
}

.calmenu__close{
  position:absolute; top:.5rem; right:.6rem;
  width:32px; height:32px;
  border:0; border-radius:50%;
  background:none;
  color:var(--ink-faint);
  font-size:1.5rem; line-height:1;
  cursor:pointer;
  transition:color .25s, background .25s;
}
.calmenu__close:hover{ color:var(--ink); background:var(--tint); }

@media (prefers-reduced-motion:reduce){
  .calmenu,.calmenu__panel{ transition:none; }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .95s var(--ease), transform .95s var(--ease);
  transition-delay:calc(var(--d,0) * 110ms);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .split{ grid-template-columns:1fr; }
  .split__media{ width:min(420px,100%); margin-inline:auto; }
  .split__frame{ inset:14px -14px -14px 14px; }
  .split__body{ text-align:center; }

  .venue__card{ grid-template-columns:1fr; }
  .venue__map{ min-height:280px; }

  .dress{ grid-template-columns:1fr; text-align:center; }
  .dress__divider{ height:1px; width:64px; margin-inline:auto; }
  .swatches{ justify-content:center; }

  .carousel__nav{ width:44px; height:44px; }
}

@media (max-width:640px){
  .count{ grid-template-columns:1fr 1fr; }
  .choices{ grid-template-columns:1fr; }
  .field--half-wrap{ grid-template-columns:1fr; gap:1.5rem; }

  .order__row{ gap:.7rem; padding:.75rem 0; }

  .hero__content{ padding:14vh 20px 20vh; }
  .hero__actions .btn,
  .closing__actions .btn{ flex:1 1 100%; }

  .slide{ flex-basis:78vw; }
  .carousel__nav{ width:40px; height:40px; }
  .carousel__nav--prev{ left:6px; }
  .carousel__nav--next{ right:6px; }
  .scratch{ gap:8px; }
}

/* ============================================================
   MOTION / PRINT
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__media img{ transform:scale(1.02); }
}

@media print{
  .gate,.audio-toggle,.hero__scroll,.form,.venue__map{ display:none !important; }
  body{ background:#fff; }
  .closing{ background:#fff; color:#3a3a3a; }
  .closing__names{ color:#c8aa78; }
}