/* ============================================================================
   LORNA & RITJA — "Sage" edition
   Sage, champagne and neutral tones, set in a handwritten display face
   (Birthstone), a soft human serif (Fraunces) and a rounded sans (Quicksand).
   ========================================================================== */

:root{
  /* sage */
  --sage-950:#1d251c; --sage-900:#2f3b2e; --sage-700:#46573f; --sage-500:#7f9279;
  --sage-300:#a8b8a2; --sage-200:#c9d3c4; --sage-100:#e6ebe1; --sage-50:#f1f4ed;
  /* champagne & neutrals */
  --champagne:#e8d5b2; --champagne-lt:#f3e7cf; --gold:#b99a5c; --gold-deep:#8f7340;
  --ivory:#faf6ee; --sand:#f1ebdd; --beige:#d9cbb6; --taupe:#a39382;
  --ink:#2b3228; --ink-soft:#586052; --ink-mute:#7b8275;

  --display:'Birthstone','Segoe Script',cursive;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Quicksand','Trebuchet MS',system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::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(--sans); font-weight:500; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.locked{ overflow:hidden; height:100svh; touch-action:none }
img{ max-width:100%; display:block }
button{ font:inherit; color:inherit; cursor:pointer }
a{ color:inherit }
[hidden]{ display:none !important }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }

/* ── reveal on scroll ───────────────────────────────────────────────────────── */
.rv{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s ease var(--d,0s), transform 1.1s var(--ease) var(--d,0s);
}
.rv.in{ opacity:1; transform:none }
html:not(.js) .rv{ opacity:1; transform:none }

/* ══════════════════════════════════════════════════════════════════════════
   GATE
   ══════════════════════════════════════════════════════════════════════════ */
.gate{
  position:fixed; inset:0; z-index:100; background:var(--sage-950);
  overflow:hidden; -webkit-tap-highlight-color:transparent;
}
/* same box as the hero (100svh from the top), so the two photographs line up exactly */
.gate-photo,.gate-photo img{ position:absolute; left:0; top:0; width:100%; height:100vh; height:100svh; object-fit:cover }
.gate-bw img{ filter:grayscale(1) contrast(1.06) brightness(.82); opacity:.46 }
.gate-bw::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(14,20,13,.7)) }
.gate-colour{ display:block; clip-path:circle(0px at 50% 70%); will-change:clip-path }
/* the same scrim the hero carries, so the names are legible while the colour is still blooming */
.gate-colour::after{
  content:""; position:absolute; left:0; top:0; width:100%; height:100vh; height:100svh;
  background:linear-gradient(180deg, rgba(20,27,19,.38) 0%, rgba(20,27,19,0) 26%, rgba(20,27,19,0) 42%, rgba(20,27,19,.82) 100%);
}
.gate-ring{
  position:absolute; left:0; top:0; width:120px; height:120px; margin:-60px 0 0 -60px; border-radius:50%;
  border:1.5px solid var(--champagne); box-shadow:0 0 40px 6px rgba(232,213,178,.35), inset 0 0 28px 2px rgba(232,213,178,.25);
  opacity:0; pointer-events:none; will-change:transform,opacity;
}
.gate-inner{
  position:absolute; left:0; right:0; bottom:calc(14svh + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center; gap:1.1rem; text-align:center; padding:0 1.5rem;
  transition:opacity .6s ease, transform .8s var(--ease);
}
.gate-line{
  margin:0; font-family:var(--display); font-size:clamp(2.9rem,12vw,3.8rem); line-height:1;
  color:var(--champagne-lt); text-shadow:0 2px 24px rgba(0,0,0,.45);
  animation:gate-in 1.4s .3s var(--ease) both;
}
.gate-btn{
  display:inline-flex; align-items:center; gap:.7rem; border:0; border-radius:999px;
  padding:1.05rem 1.9rem; background:var(--champagne); color:var(--sage-900);
  font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  box-shadow:0 14px 40px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.25) inset;
  transition:transform .35s var(--ease), box-shadow .35s ease;
  animation:gate-in 1.4s .6s var(--ease) both;
}
.gate-btn:hover{ transform:translateY(-2px) }
.gate-btn:active{ transform:scale(.97) }
.gate.is-opening .gate-inner{ opacity:0; transform:translateY(14px) scale(.96); pointer-events:none }
.gate.is-gone{ opacity:0; transition:opacity .7s ease; pointer-events:none }
@keyframes gate-in{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

/* ══════════════════════════════════════════════════════════════════════════
   HERO — the slideshow
   ══════════════════════════════════════════════════════════════════════════ */
.hero{
  position:relative; height:100vh; height:100svh; min-height:34rem; overflow:hidden; background:var(--sage-950);
  color:var(--ivory);
}
.slides,.slide,.slide img{ position:absolute; inset:0; width:100%; height:100% }
/* One continuous drift. The motion starts on the tap and the gate's colour layer
   runs the SAME keyframes from the same instant, so when the gate lifts the
   picture underneath is exactly where the gate's picture was. A slide that is
   leaving keeps drifting while it fades (.out), so nothing snaps back. */
.slide{ opacity:0; transition:opacity 2.6s cubic-bezier(.45,.05,.3,1); pointer-events:none }
.slide.on{ opacity:1 }
.slide img,.gate-photo img{ object-fit:cover; transform:scale(1.02); will-change:transform; backface-visibility:hidden }
body.opened .slide.on img,body.opened .slide.out img,.gate.is-opening .gate-colour img{ animation:kb 16s linear both }
.slide:nth-child(even) img{ --kx:-1.4%; --ky:-1%;  transform-origin:30% 40% }
.slide:nth-child(odd) img,.gate-photo img{ --kx:1.4%;  --ky:-.6%; transform-origin:70% 45% }
@keyframes kb{ from{ transform:scale(1.02) translate3d(0,0,0) } to{ transform:scale(1.16) translate3d(var(--kx,0),var(--ky,0),0) } }

.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,27,19,.38) 0%, rgba(20,27,19,0) 26%, rgba(20,27,19,0) 42%, rgba(20,27,19,.82) 100%);
}
.dust{ position:absolute; inset:0; pointer-events:none; overflow:hidden; opacity:0; transition:opacity 2s ease 1.6s }
body.opened .dust{ opacity:1 }
.dust i{
  position:absolute; bottom:-10px; border-radius:50%; background:var(--champagne); opacity:0;
  box-shadow:0 0 8px 1px rgba(232,213,178,.7);
  animation:rise linear infinite;
}
@keyframes rise{
  0%{ transform:translate3d(0,0,0); opacity:0 }
  12%{ opacity:.8 }
  100%{ transform:translate3d(var(--dx,20px),-105svh,0); opacity:0 }
}

.lockup{
  position:absolute; z-index:110; left:0; right:0; bottom:calc(15svh + env(safe-area-inset-bottom));
  text-align:center; padding:0 1.25rem;
  pointer-events:none;           /* it sits above the gate, so it must never swallow the tap */
}
.lockup > *{ opacity:0 }
.lk-eyebrow{
  margin:0 0 .5rem; font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.42em; text-indent:.42em;
  text-transform:uppercase; color:var(--champagne);
}
.lk-names{
  margin:0; font-family:var(--display); font-weight:400; color:var(--ivory);
  font-size:clamp(4rem,19vw,6.2rem); line-height:1.02; padding:.04em .1em .1em;
  text-shadow:0 4px 40px rgba(0,0,0,.45);
  -webkit-mask-image:linear-gradient(90deg,#000 42%,transparent 58%); mask-image:linear-gradient(90deg,#000 42%,transparent 58%);
  -webkit-mask-size:260% 100%; mask-size:260% 100%; -webkit-mask-position:100% 0; mask-position:100% 0;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.lk-names i{ font-style:normal; color:var(--champagne) }
.lk-date{
  margin:.3rem 0 0; display:flex; align-items:center; justify-content:center; gap:.9rem;
  font-family:var(--sans); font-weight:700; font-size:.85rem; letter-spacing:.32em; text-indent:.32em; color:var(--champagne);
}
.lk-rule{ display:block; width:2.6rem; height:1px; background:linear-gradient(90deg,transparent,var(--champagne)) }
.lk-rule:last-child{ background:linear-gradient(90deg,var(--champagne),transparent) }
.lk-place{
  margin:.9rem 0 0; font-family:var(--sans); font-weight:600; font-size:.68rem; letter-spacing:.24em; text-indent:.24em;
  text-transform:uppercase; color:rgba(250,246,238,.82);
}
body.opened .lk-eyebrow{ animation:lk-up 1.3s 1.0s var(--ease) both }
body.opened .lk-names{ opacity:1; animation:lk-wipe 2.6s 1.4s cubic-bezier(.55,.05,.25,1) both }
body.opened .lk-date{ animation:lk-up 1.3s 3.2s var(--ease) both }
body.opened .lk-place{ animation:lk-up 1.3s 3.5s var(--ease) both }
@keyframes lk-up{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@keyframes lk-wipe{
  from{ -webkit-mask-position:100% 0; mask-position:100% 0; opacity:1 }
  to  { -webkit-mask-position:0 0;    mask-position:0 0;    opacity:1 }
}

.scroll-cue{
  position:absolute; z-index:110; left:50%; bottom:calc(3.2svh + env(safe-area-inset-bottom)); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem; text-decoration:none; color:rgba(250,246,238,.8);
  font-weight:700; font-size:.6rem; letter-spacing:.34em; text-indent:.34em; text-transform:uppercase; opacity:0;
  pointer-events:none;
}
body.opened .scroll-cue{ pointer-events:auto }
.scroll-cue i{ display:block; width:1px; height:30px; background:linear-gradient(var(--champagne),transparent); animation:cue 2.2s ease-in-out infinite; transform-origin:top }
body.opened .scroll-cue{ animation:lk-up 1.2s 4.2s var(--ease) both }
@keyframes cue{ 0%{ transform:scaleY(0) } 45%{ transform:scaleY(1) } 100%{ transform:scaleY(1); opacity:0 } }

/* ══════════════════════════════════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════════════════════════════════ */
.sec{ padding:clamp(4.2rem,12vw,7.5rem) 0; position:relative }
.wrap{ width:min(100% - 2.5rem, 68rem); margin:0 auto; text-align:center }
.narrow{ max-width:38rem }
.sec-welcome{ background:var(--ivory) }
.sec-story{ background:var(--sand) }
.sec-day{ background:linear-gradient(180deg,var(--sage-50),var(--ivory)) }
.sec-program{ background:var(--ivory) }
.sec-wear{ background:var(--sand) }
.sec-gallery{ background:var(--ivory) }
.sec-rsvp{ background:var(--sage-100) }
.sec-gifts{ background:var(--ivory) }

.label{
  margin:0 0 .4rem; font-family:var(--sans); font-weight:700; font-size:.7rem;
  letter-spacing:.34em; text-indent:.34em; text-transform:uppercase; color:var(--sage-700);
}
.label-sm{ margin-top:2.2rem; font-size:.62rem; color:var(--ink-mute) }
.script{
  margin:0; font-family:var(--display); font-weight:400; color:var(--sage-700);
  font-size:clamp(3.4rem,16vw,5rem); line-height:1.04; padding:.05em .1em .12em;
  text-wrap:balance;
}
.flourish{
  display:block; position:relative; width:9rem; height:1px; margin:1.1rem auto 1.6rem;
  background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent);
}
.flourish::after{
  content:""; position:absolute; left:50%; top:50%; width:7px; height:7px; background:var(--gold);
  transform:translate(-50%,-50%) rotate(45deg); box-shadow:0 0 0 5px var(--ivory);
}
.sec-story .flourish::after,.sec-wear .flourish::after{ box-shadow:0 0 0 5px var(--sand) }
.lede{
  margin:0 auto; max-width:34rem; font-family:var(--serif); font-weight:400; font-size:clamp(1.04rem,3.9vw,1.2rem);
  line-height:1.85; color:var(--ink-soft); text-wrap:pretty;
}
.sign{ margin:1rem 0 0; font-family:var(--display); font-size:2.4rem; line-height:1; color:var(--gold-deep) }
.micro{ margin:.9rem 0 0; font-family:var(--serif); font-style:italic; font-size:.95rem; color:var(--ink-mute) }

/* countdown */
.sec-welcome .wrap + .wrap{ margin-top:clamp(3.2rem,9vw,5rem) }
/* the countdown sits ON a photograph of the two of them */
.cd-photo{
  position:relative; max-width:26rem; margin:1rem auto 0; aspect-ratio:2/3; border-radius:30px; overflow:hidden;
  background:var(--sand); box-shadow:0 40px 70px -40px rgba(47,59,46,.55), 0 0 0 1px rgba(185,154,92,.25);
}
.cd-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 70% }
.cd-scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(29,37,28,0) 55%,rgba(29,37,28,.55) 100%) }
.cd{
  position:absolute; left:.75rem; right:.75rem; bottom:.9rem;
  display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem;
}
.cd-photo.plain{ aspect-ratio:auto; background:none; box-shadow:none; overflow:visible }
.cd-photo.plain .cd{ position:static }
.cd-cell{
  background:rgba(236,220,184,.93); border-radius:14px; padding:.8rem .2rem .65rem;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 12px 22px -14px rgba(20,27,19,.7);
}
.cd-cell b{ display:block; font-family:var(--sans); font-weight:700; font-size:clamp(1.45rem,7vw,2rem); line-height:1.1; color:var(--sage-900); font-variant-numeric:tabular-nums lining-nums }
.cd-cell span{ display:block; margin-top:.25rem; font-weight:600; font-size:.58rem; letter-spacing:.12em; text-indent:.12em; text-transform:lowercase; color:var(--sage-700) }

/* story */
.story-card{
  max-width:62rem; margin:0 auto; background:#fffdf8; border-radius:30px; overflow:hidden; text-align:center;
  box-shadow:0 40px 70px -40px rgba(47,59,46,.5), 0 0 0 1px rgba(185,154,92,.22);
}
.story-photo{ margin:0; aspect-ratio:4/4.6; overflow:hidden }
.story-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 25% }
.story-body{ padding:2.2rem 1.5rem 2.6rem }
.story-text{
  margin:0 auto; max-width:34rem; text-align:left; hyphens:auto; -webkit-hyphens:auto;
  font-family:var(--serif); font-size:clamp(1rem,3.8vw,1.1rem); line-height:1.9; color:var(--ink-soft);
}
.story-text::first-letter{ font-family:var(--display); font-size:3.4em; line-height:.8; float:left; padding:.08em .1em 0 0; color:var(--gold-deep) }

/* day */
.day-line{ margin:.4rem 0 0; font-family:var(--serif); font-style:italic; font-size:clamp(1.1rem,4.4vw,1.35rem); color:var(--ink-soft) }
.events{ display:grid; gap:1rem; margin-top:2.4rem }
.ev{
  position:relative; overflow:hidden; border-radius:28px; min-height:27rem; color:var(--ivory);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; text-align:center; padding:2.2rem 1.6rem 2.4rem;
  box-shadow:0 30px 50px -30px rgba(29,37,28,.7); isolation:isolate;
}
.ev img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; filter:saturate(.85) brightness(.8) }
.ev::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(36,46,35,.18) 0%,rgba(36,46,35,.35) 38%,rgba(36,46,35,.88) 100%) }
.ev::after{ content:""; position:absolute; inset:12px; border:1px solid rgba(232,213,178,.4); border-radius:20px; pointer-events:none }
.ev svg{ width:46px; height:46px; stroke:var(--champagne); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round }
.ev h3{ margin:.5rem 0 0; font-family:var(--display); font-weight:400; font-size:clamp(2.8rem,12vw,3.4rem); line-height:1.05; color:var(--champagne-lt) }
.ev-rule{ display:block; width:3.4rem; height:1px; margin:.6rem 0 .9rem; background:var(--champagne); opacity:.8 }
.ev-time{ margin:0; font-family:var(--sans); font-weight:700; font-size:1.25rem; letter-spacing:.18em; text-indent:.18em }
.ev-line{ margin:.9rem 0 0; max-width:17rem; font-family:var(--serif); font-style:italic; font-size:1rem; line-height:1.6; color:rgba(250,246,238,.9) }

.venue{
  margin:1.6rem auto 0; max-width:34rem; background:#fff; border-radius:28px; padding:2.2rem 1.5rem 2.1rem;
  box-shadow:0 30px 50px -36px rgba(47,59,46,.55), 0 0 0 1px rgba(185,154,92,.25);
}
.venue-name{ margin:.2rem 0 0; font-family:var(--serif); font-weight:600; font-size:clamp(1.4rem,5.6vw,1.8rem); line-height:1.25; color:var(--sage-900) }
.venue-addr{ margin:.35rem 0 0; font-family:var(--serif); font-size:1.05rem; color:var(--ink-soft) }
.venue-note{ margin:.9rem auto 0; max-width:24rem; font-family:var(--serif); font-style:italic; font-size:.95rem; color:var(--ink-mute) }
.btn-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin-top:1.6rem }
.btn{
  display:inline-block; border:1px solid var(--sage-700); border-radius:999px; padding:.95rem 1.6rem; background:transparent; color:var(--sage-700);
  font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.16em; text-indent:.16em; text-transform:uppercase; text-decoration:none;
  transition:background .3s ease, color .3s ease, transform .3s var(--ease);
}
.btn:hover{ background:var(--sage-700); color:var(--ivory) }
.btn:active{ transform:scale(.97) }
.btn-solid{ background:var(--sage-700); color:var(--ivory) }
.btn-solid:hover{ background:var(--sage-900) }
.btn.done{ background:var(--sage-100); border-color:var(--sage-300); color:var(--sage-700); pointer-events:none }

/* programme */
.prog{ list-style:none; margin:1.6rem 0 0; padding:0; text-align:left }
.prog li{
  display:grid; grid-template-columns:4.8rem 1fr; column-gap:1.2rem; align-items:baseline;
  padding:1.15rem 0; border-top:1px solid rgba(185,154,92,.4);
}
.prog li:last-child{ border-bottom:1px solid rgba(185,154,92,.4) }
.pr-time{ margin:0; text-align:right; font-family:var(--serif); font-style:italic; font-size:1.35rem; line-height:1.2; color:var(--gold-deep); font-variant-numeric:lining-nums tabular-nums }
.pr-title{ margin:0; font-family:var(--sans); font-weight:700; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--sage-900) }
.pr-desc{ margin:.25rem 0 0; font-family:var(--serif); font-size:1.02rem; line-height:1.65; color:var(--ink-soft) }

/* what to wear — the six silks */
.silks{
  list-style:none; margin:1rem auto 0; padding:0; max-width:25rem;
  display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem .5rem;
}
.silk{ display:flex; flex-direction:column; gap:.5rem }
.silk i{
  display:block; aspect-ratio:1; border-radius:8px; background-color:var(--c);
  /* satin: a bright sheen, a deep fold and fine ripples laid over the colour */
  background-image:
    radial-gradient(110% 70% at 18% 12%, rgba(255,255,255,.5), transparent 58%),
    radial-gradient(80% 60% at 88% 84%, rgba(0,0,0,.3), transparent 62%),
    radial-gradient(60% 40% at 55% 45%, rgba(0,0,0,.16), transparent 70%),
    repeating-linear-gradient(118deg, rgba(255,255,255,.06) 0 6px, rgba(0,0,0,.035) 6px 15px, transparent 15px 28px);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06), 0 12px 20px -14px rgba(47,59,46,.55);
}
.silk span{ font-weight:700; font-size:.56rem; letter-spacing:.18em; text-indent:.18em; text-transform:uppercase; color:var(--ink-mute); text-align:center }
.sec-wear .micro{ max-width:26rem; margin-left:auto; margin-right:auto }

/* what to wear (guides) */
.swatches,.dots{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center }
.swatches{ gap:clamp(.6rem,2.6vw,1.4rem); margin-top:1rem }
.sw{ display:flex; flex-direction:column; align-items:center; gap:.65rem; width:clamp(58px,15.5vw,86px) }
.sw i{
  display:block; width:clamp(46px,12.5vw,66px); aspect-ratio:1; border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.7), 0 0 0 2px rgba(60,50,40,.14), 0 14px 24px -14px rgba(47,59,46,.6), inset 0 1px 0 rgba(255,255,255,.35);
}
.sw span{ font-weight:700; font-size:.5rem; letter-spacing:.16em; text-indent:.16em; text-transform:uppercase; line-height:1.6; color:var(--ink-mute); text-align:center }
.guides{ margin-top:2.2rem }
.guide{ position:relative; padding-top:1.8rem }
.guide + .guide{ margin-top:1.8rem }
.guide::before{ content:""; position:absolute; top:0; left:50%; width:min(11rem,48%); height:1px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,var(--gold),transparent) }
.guide h3{ margin:0 0 .6rem; font-family:var(--display); font-weight:400; font-size:2.6rem; line-height:1; color:var(--sage-700) }
.guide p{ margin:0 auto; max-width:27rem; font-family:var(--serif); font-size:1.06rem; line-height:1.75; color:var(--ink-soft) }
.groups{ margin-top:1.3rem; display:flex; flex-direction:column; gap:1.1rem; align-items:center }
.groups .label{ margin:0 0 .7rem; font-size:.54rem; color:var(--ink-mute) }
.dots{ gap:clamp(.5rem,2.2vw,1rem) }
.dots .sw{ width:clamp(54px,14vw,72px); gap:.5rem }
.dots .sw i{ width:clamp(30px,8.4vw,40px) }

/* gallery — one strip that drifts sideways; swipe or drag it, tap a photograph to open it */
.sec-gallery .wrap{ margin-bottom:2rem }
.strip{
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  touch-action:pan-x pan-y;
}
.strip::-webkit-scrollbar{ display:none }
.strip.drag{ cursor:grabbing; user-select:none }
.strip-track{ display:flex; gap:.8rem; width:max-content; padding:.4rem .8rem 1rem }
.gal-i{
  flex:none; height:clamp(21rem,78vw,30rem); padding:0; border:0; border-radius:20px; overflow:hidden;
  background:var(--sand); cursor:zoom-in;
  box-shadow:0 22px 34px -24px rgba(47,59,46,.6);
}
.strip.drag .gal-i{ cursor:grabbing }
.gal-i img{ width:100%; height:100%; object-fit:cover; display:block; user-select:none; -webkit-user-drag:none }

/* rsvp */
.form{ margin-top:1.8rem; text-align:left }
.field{ display:block; margin-bottom:1rem }
.field > span,.choice legend{
  display:block; margin:0 0 .45rem .2rem; font-weight:700; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sage-700);
}
.field input,.field select{
  width:100%; padding:.95rem 1.05rem; border:1px solid var(--sage-300); border-radius:14px; background:#fff; color:var(--ink);
  font-family:var(--sans); font-weight:500; font-size:1rem; appearance:none; -webkit-appearance:none;
}
.field select{ background-image:linear-gradient(45deg,transparent 50%,var(--sage-700) 50%),linear-gradient(-45deg,transparent 50%,var(--sage-700) 50%); background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%; background-size:6px 6px; background-repeat:no-repeat }
.field.req > span::after{ content:" *"; color:#c0604a }
.field.invalid select{ border-color:#b4553f }
.btn-gold{ background:var(--champagne); border-color:var(--champagne); color:var(--sage-900) }
.btn-gold:hover{ background:var(--champagne-lt); color:var(--sage-900) }
.sec-rsvp .lede{ font-size:clamp(1rem,3.8vw,1.1rem) }
.field input:focus,.field select:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(185,154,92,.25) }
.field.invalid input{ border-color:#b4553f }
.choice{ border:0; padding:0; margin:0 0 1rem; display:grid; grid-template-columns:1fr 1fr; gap:.6rem }
.choice legend{ grid-column:1/-1; padding:0 }
.seg{
  padding:1rem .6rem; border:1px solid var(--sage-300); border-radius:14px; background:#fff; color:var(--sage-700);
  font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; line-height:1.35;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.seg.on{ background:var(--sage-700); border-color:var(--sage-700); color:var(--ivory) }
.form-error{ margin:0 0 1rem; padding:.8rem 1rem; border-radius:12px; background:#f6e4de; color:#8c3a27; font-weight:600; font-size:.9rem; text-align:center }
.form .btn-solid,.form .btn-gold{ width:100%; padding:1.1rem; margin-top:.3rem }
.policy{ margin:1.6rem 0 0; font-family:var(--serif); font-size:.95rem; line-height:1.75; color:var(--ink-soft); text-align:center }
.contacts{ list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1.6rem }
.contacts a{ text-decoration:none; font-weight:700; font-size:.78rem; letter-spacing:.12em; color:var(--sage-700) }
.contacts b{ font-family:var(--display); font-weight:400; font-size:1.7rem; margin-right:.35rem; color:var(--gold-deep); letter-spacing:0 }
.done{ margin-top:1.6rem; padding:2.2rem 1.4rem; background:#fff; border-radius:26px; box-shadow:0 30px 50px -36px rgba(47,59,46,.5) }
.done .btn{ margin-top:1.4rem }

/* finale */
.finale{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; color:var(--ivory); background:var(--sage-950) }
.finale-photo,.finale-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.finale-scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,27,19,.45),rgba(20,27,19,.05) 35%,rgba(20,27,19,.88)) }
.finale-in{ position:relative; text-align:center; padding:0 1.5rem clamp(4rem,12vh,6rem) }
.fin-line{ margin:.2rem 0 0; font-family:var(--display); font-weight:400; font-size:clamp(4.2rem,20vw,7rem); line-height:1; color:var(--ivory); text-shadow:0 4px 40px rgba(0,0,0,.5) }
.fin-sub{ margin:.6rem 0 0; font-family:var(--serif); font-size:clamp(1.1rem,4.4vw,1.4rem); color:var(--champagne-lt) }
.finale .micro{ color:rgba(250,246,238,.75) }

/* music */
.music{
  position:fixed; z-index:200; left:max(14px,env(safe-area-inset-left)); bottom:max(14px,env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:.7rem; padding:.55rem .6rem; border:1px solid rgba(232,213,178,.35); border-radius:999px;
  background:rgba(29,37,28,.78); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); color:var(--ivory);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.6); opacity:0; transform:translateY(10px); transition:opacity .8s ease, transform .8s var(--ease);
}
body.opened .music{ opacity:1; transform:none; transition-delay:2.6s }
.eq{ display:flex; align-items:flex-end; gap:3px; width:38px; height:38px; padding:10px; border-radius:50%; background:var(--champagne) }
.eq i{ display:block; width:3px; height:30%; background:var(--sage-900); border-radius:2px }
.music.playing .eq i{ animation:eq 1s ease-in-out infinite }
.music.playing .eq i:nth-child(2){ animation-delay:-.3s } .music.playing .eq i:nth-child(3){ animation-delay:-.6s } .music.playing .eq i:nth-child(4){ animation-delay:-.15s }
@keyframes eq{ 0%,100%{ height:25% } 50%{ height:100% } }
.music-text{ display:flex; flex-direction:column; line-height:1.25; padding-right:.7rem; max-width:12rem; overflow:hidden; white-space:nowrap; transition:max-width .7s var(--ease), opacity .5s ease, padding .5s ease }
.music-text b{ font-weight:700; font-size:.82rem }
.music-text small{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--champagne) }
.music.mini{ gap:0 }
.music.mini .music-text{ max-width:0; opacity:0; padding-right:0 }

/* lightbox */
.lb{ position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; background:rgba(16,22,15,.95) }
.lb-img{ max-width:92vw; max-height:86svh; object-fit:contain; border-radius:6px }
.lb button{ position:absolute; border:0; background:rgba(250,246,238,.12); color:var(--ivory); width:46px; height:46px; border-radius:50%; font-size:1.7rem; line-height:1 }
.lb-x{ top:max(14px,env(safe-area-inset-top)); right:14px }
.lb-n{ top:50%; margin-top:-23px }
.lb-prev{ left:10px } .lb-next{ right:10px }

/* ══════════════════════════════════════════════════════════════════════════
   WIDER SCREENS
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:820px){
  .lk-names{ font-size:clamp(6rem,10vw,9rem) }
  .lockup{ bottom:18svh }
  .script{ font-size:clamp(4rem,6vw,5.6rem) }
  .events{ grid-template-columns:repeat(3,1fr); gap:1.4rem }
  .ev{ min-height:28rem }
  .story-card{ display:grid; grid-template-columns:1fr 1.05fr; text-align:left }
  .story-photo{ aspect-ratio:auto; height:100% }
  .story-body{ padding:3.4rem 3rem; display:flex; flex-direction:column; justify-content:center; text-align:left }
  .story-body .flourish{ margin-left:0 }
  .gal-i{ height:clamp(24rem,60vh,34rem) }
  .strip-track{ gap:1rem }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .rv{ opacity:1; transform:none; transition:none }
  body.opened .slide.on img,body.opened .slide.out img,.gate.is-opening .gate-colour img{ animation:none }
  .dust{ display:none }
  .lockup > *,.scroll-cue{ opacity:1 }
  body.opened .lk-names,body.opened .lk-eyebrow,body.opened .lk-date,body.opened .lk-place,body.opened .scroll-cue{ animation:none }
  .lk-names{ -webkit-mask-image:none; mask-image:none }
}