/* ============================================================================
   WILL YOU BE MY GROOMSMAN — "Sage" edition
   Charcoal and graphite grounds, champagne gold, dove-grey suiting tones.
   Same opening and feel as the Lorna & Ritja invitation.
   ========================================================================== */
:root{
  --ink-950:#121010; --ink-900:#1b1918; --ink-850:#211e1d; --ink-800:#292625; --ink-700:#35312f;
  --grey-50:#f1efec; --grey-100:#e6e3de; --grey-200:#d3d0ca; --grey-300:#b9b5ae; --grey-500:#8f8b85; --grey-700:#625f5b;
  --gold:#c9a24b; --gold-lt:#ecd9a8; --gold-deep:#a8832f; --blush:#e5b7a9;
  --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(--ink-900); color:var(--grey-100); font-family:var(--sans); font-weight:500; line-height:1.6; -webkit-font-smoothing:antialiased }
body.locked{ overflow:hidden; height:100svh; touch-action:none }
img{ max-width:100%; display:block }
button{ font:inherit; color:inherit; cursor:pointer }
[hidden]{ display:none !important }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }

.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(--ink-950); overflow:hidden; -webkit-tap-highlight-color:transparent }
.gate-photo,.gate-photo img{ position:absolute; left:0; top:0; width:100%; height:100vh; height:100svh; object-fit:cover }
/* fallback used until real photographs are added: graphite, then gold */
.gate-bw{ background:radial-gradient(110% 80% at 50% 38%, #3a3633, #161413 70%) }
.gate-colour{ display:block; clip-path:circle(0px at 50% 70%); will-change:clip-path;
  background:radial-gradient(90% 60% at 50% 34%, rgba(201,162,75,.55), transparent 70%), radial-gradient(120% 90% at 50% 40%, #6b6560, #24211f 72%) }
.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(10,8,8,.7)) }
.gate-colour::after{ content:""; position:absolute; left:0; top:0; width:100%; height:100vh; height:100svh;
  background:linear-gradient(180deg, rgba(14,12,12,.38) 0%, rgba(14,12,12,0) 26%, rgba(14,12,12,0) 42%, rgba(14,12,12,.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(--gold-lt); box-shadow:0 0 40px 6px rgba(236,217,168,.35), inset 0 0 28px 2px rgba(236,217,168,.25); opacity:0; pointer-events:none }
.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.7rem,11vw,3.6rem); line-height:1.05; color:var(--gold-lt); text-shadow:0 2px 24px rgba(0,0,0,.5); 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(--gold-lt); color:var(--ink-900); font-weight:700; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; box-shadow:0 14px 40px -12px rgba(0,0,0,.7); transition:transform .35s var(--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 ─────────────────────────────────────────────────────────────────── */
.hero{ position:relative; height:100vh; height:100svh; min-height:34rem; overflow:hidden; background:var(--ink-950) }
.slides,.slide,.slide img{ position:absolute; inset:0; width:100%; height:100% }
.slides.fallback{ background:radial-gradient(90% 60% at 50% 34%, rgba(201,162,75,.55), transparent 70%), radial-gradient(120% 90% at 50% 40%, #6b6560, #24211f 72%) }
.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 }
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) } to{ transform:scale(1.16) translate3d(var(--kx,0),var(--ky,0),0) } }
.hero-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,12,12,.38) 0%, rgba(14,12,12,0) 26%, rgba(14,12,12,0) 42%, rgba(14,12,12,.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(--gold-lt); opacity:0; box-shadow:0 0 8px 1px rgba(236,217,168,.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(18svh + env(safe-area-inset-bottom)); text-align:center; padding:0 1.25rem; pointer-events:none }
.lockup > *{ opacity:0 }
.lk-eyebrow{ margin:0 0 .5rem; font-weight:700; font-size:.72rem; letter-spacing:.42em; text-indent:.42em; text-transform:uppercase; color:var(--gold-lt) }
.lk-names{ margin:0; font-family:var(--display); font-weight:400; color:var(--grey-50); font-size:clamp(4.6rem,22vw,7rem); line-height:1; padding:.04em .1em .1em; text-shadow:0 4px 40px rgba(0,0,0,.5);
  -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-date{ margin:.3rem 0 0; display:flex; align-items:center; justify-content:center; gap:.9rem; font-weight:700; font-size:.85rem; letter-spacing:.3em; text-indent:.3em; color:var(--gold-lt) }
.lk-rule{ display:block; width:2.4rem; height:1px; background:linear-gradient(90deg,transparent,var(--gold-lt)) }
.lk-rule:last-child{ background:linear-gradient(90deg,var(--gold-lt),transparent) }
.lk-place{ margin:.9rem 0 0; font-weight:600; font-size:.68rem; letter-spacing:.24em; text-indent:.24em; text-transform:uppercase; color:rgba(241,239,236,.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(241,239,236,.8); font-weight:700; font-size:.6rem; letter-spacing:.34em; text-indent:.34em; text-transform:uppercase; opacity:0; pointer-events:none }
.scroll-cue i{ display:block; width:1px; height:30px; background:linear-gradient(var(--gold-lt),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; pointer-events:auto }
@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 }
.wrap{ width:min(100% - 2.5rem, 68rem); margin:0 auto; text-align:center }
.narrow{ max-width:38rem }
.sec-ask{ background:var(--ink-900) }
.sec-dates{ background:var(--ink-850) }
.sec-kit{ background:var(--grey-100); color:var(--ink-900) }
.sec-pay{ background:var(--ink-850) }
.label{ margin:0 0 .4rem; font-weight:700; font-size:.7rem; letter-spacing:.34em; text-indent:.34em; text-transform:uppercase; color:var(--gold) }
.label-sm{ margin-top:2.4rem; font-size:.62rem; color:var(--grey-500) }
.script{ margin:0; font-family:var(--display); font-weight:400; color:var(--gold-lt); font-size:clamp(3.2rem,15vw,4.8rem); line-height:1.04; padding:.05em .1em .12em; text-wrap:balance }
.sec-kit .script{ color:var(--ink-700) }
.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(--ink-900) }
.lede{ margin:0 auto; max-width:34rem; font-family:var(--serif); font-size:clamp(1.04rem,3.9vw,1.2rem); line-height:1.85; color:var(--grey-300); text-wrap:pretty }
.micro{ margin:.9rem 0 0; font-family:var(--serif); font-style:italic; font-size:.95rem; color:var(--grey-500) }

/* answer */
.answer{ margin-top:2.2rem }
.field{ display:block; margin:0 auto 1.1rem; max-width:22rem; text-align:left }
.field > span{ display:block; margin:0 0 .45rem .2rem; font-weight:700; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold) }
.field input{ width:100%; padding:.95rem 1.05rem; border:1px solid var(--ink-700); border-radius:14px; background:var(--ink-800); color:var(--grey-50); font-family:var(--sans); font-weight:500; font-size:1rem }
.field input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,75,.25) }
.field.invalid input{ border-color:#c0604a }
.form-error{ margin:0 auto 1rem; max-width:22rem; padding:.7rem 1rem; border-radius:12px; background:#3a2420; color:#f0b8a8; font-weight:600; font-size:.9rem }
.yn{ display:flex; justify-content:center; gap:.8rem; flex-wrap:wrap }
.btn{ display:inline-block; min-width:8.5rem; border:1px solid var(--gold); border-radius:999px; padding:1rem 1.8rem; background:transparent; color:var(--gold-lt); font-weight:700; font-size:.76rem; letter-spacing:.18em; text-indent:.18em; text-transform:uppercase; text-decoration:none; transition:background .3s ease, transform .3s var(--ease) }
.btn:hover{ background:rgba(201,162,75,.15) } .btn:active{ transform:scale(.97) } .btn:disabled{ opacity:.6 }
.btn-gold{ background:var(--gold-lt); border-color:var(--gold-lt); color:var(--ink-900) } .btn-gold:hover{ background:var(--grey-50) }
.result{ margin-top:2rem; padding:2rem 1.4rem; border-radius:26px; background:var(--ink-800); box-shadow:0 0 0 1px rgba(201,162,75,.3) }

/* dates */
.days{ display:grid; gap:1rem; margin-top:2.2rem }
.day{ border-radius:26px; padding:2rem 1.4rem; background:linear-gradient(180deg,var(--ink-800),var(--ink-850)); box-shadow:0 0 0 1px rgba(201,162,75,.28), 0 30px 50px -34px rgba(0,0,0,.8) }
.day-tag{ margin:0; font-weight:700; font-size:.68rem; letter-spacing:.4em; text-indent:.4em; text-transform:uppercase; color:var(--gold) }
.day-num{ margin:.4rem 0 0; font-family:var(--serif); font-weight:500; font-size:clamp(3.6rem,16vw,4.8rem); line-height:1; color:var(--grey-50) }
.day-sub{ margin:.5rem 0 0; font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--grey-300) }
.day-note{ margin:.8rem 0 0; font-size:.9rem; color:var(--grey-500) }
.places{ margin:1.6rem 0 0; font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--grey-300) }
.cd{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; max-width:26rem; margin:1rem auto 0 }
.cd-cell{ background:var(--gold-lt); border-radius:14px; padding:.8rem .2rem .65rem; box-shadow:0 12px 22px -14px rgba(0,0,0,.7) }
.cd-cell b{ display:block; font-weight:700; font-size:clamp(1.45rem,7vw,2rem); line-height:1.1; color:var(--ink-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-transform:lowercase; color:var(--grey-700) }

/* package */
.sec-kit .label{ color:var(--gold-deep) }
.kit{ display:grid; gap:1.2rem; margin-top:2.2rem; text-align:left }
.kit-card{ background:#fff; border-radius:28px; overflow:hidden; box-shadow:0 30px 50px -34px rgba(27,25,24,.6), 0 0 0 1px rgba(168,131,47,.22) }
.kit-photo{ margin:0; aspect-ratio:4/4.6; overflow:hidden; background:var(--grey-200) }
.kit-photo img{ width:100%; height:100%; object-fit:cover }
.kit-body{ padding:1.6rem 1.5rem 1.9rem; text-align:center }
.kit-tag{ margin:0; font-weight:700; font-size:.66rem; letter-spacing:.34em; text-indent:.34em; text-transform:uppercase; color:var(--gold-deep) }
.kit-title{ margin:.2rem 0 1rem; font-family:var(--display); font-weight:400; font-size:2.9rem; line-height:1.05; color:var(--ink-700) }
.kit-list{ list-style:none; margin:0; padding:0 }
.kit-list li{ padding:.7rem 0; border-top:1px solid rgba(168,131,47,.3); font-family:var(--serif); font-size:1.08rem; color:var(--ink-700) }
.kit-list li:last-child{ border-bottom:1px solid rgba(168,131,47,.3) }
.total{ display:inline-flex; align-items:baseline; gap:1rem; margin-top:2.2rem; padding:1rem 1.8rem; border-radius:999px; background:var(--ink-900); color:var(--gold-lt) }
.total span{ font-weight:700; font-size:.7rem; letter-spacing:.3em; text-transform:uppercase }
.total b{ font-family:var(--serif); font-weight:500; font-size:1.7rem; color:var(--grey-50) }
.sec-kit .micro{ color:var(--grey-700) }

/* payment / banking (shown only when supplied) */
.inst{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:.7rem }
.inst li{ display:flex; justify-content:space-between; gap:1rem; padding:1rem 1.2rem; border-radius:16px; background:var(--ink-800) }
.bank{ margin:1.6rem 0 0; text-align:left }
.bank div{ display:flex; justify-content:space-between; gap:1rem; padding:.8rem 0; border-top:1px solid rgba(201,162,75,.3) }
.bank dt{ color:var(--gold); font-weight:700; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase }
.bank dd{ margin:0; font-family:var(--serif); font-size:1.08rem; color:var(--grey-50) }

/* finale */
.finale{ position:relative; min-height:70svh; display:flex; align-items:center; justify-content:center; text-align:center; padding:6rem 1.5rem; background:radial-gradient(90% 70% at 50% 40%, #3a3532, var(--ink-950)) }
.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(--grey-50) }
.fin-sub{ margin:.6rem 0 0; font-family:var(--serif); font-size:1.3rem; color:var(--gold-lt) }

@media (min-width:820px){
  .lk-names{ font-size:clamp(7rem,12vw,10rem) }
  .lockup{ bottom:20svh }
  .script{ font-size:clamp(4rem,6vw,5.6rem) }
  .days{ grid-template-columns:1fr 1fr; gap:1.4rem; max-width:44rem; margin-left:auto; margin-right:auto }
  .kit{ grid-template-columns:1fr 1fr; gap:1.6rem; max-width:52rem; margin-left:auto; margin-right:auto }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto } .rv{ opacity:1; transform:none; transition:none } .dust{ display:none }
  body.opened .slide.on img,body.opened .slide.out img,.gate.is-opening .gate-colour img{ animation: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 }
}