:root{
  --paper:#f3ece2; --paper-2:#ebe1d4; --ink:#35251b; --ink-soft:#655042; --gold:#b08d57; --gold-ink:#7a5a2e;
  --brown:#3a271c; --line:rgba(53,37,27,.16); --field:#fffdf9; --field-line:#c9baa7; --error:#9a2b1d; --ok:#3f6a46;
  --surround:#1c1410;
  --aw:min(100vw, calc(100vh * .5625)); --ah:calc(var(--aw) * 16 / 9);
  --ax:calc(50% - var(--aw) / 2); --ay:calc(50% - var(--ah) / 2);
  --len:0;
  color-scheme: light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 Jost,"Avenir Next","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--brown);color:#fff;padding:10px 14px;border-radius:10px;text-decoration:none}
.skip:focus{top:max(12px,env(safe-area-inset-top))}

/* ---------- cinematic stage ---------- */
.cine{background:var(--surround)}
.track{position:relative;height:calc(var(--len) * 100vh + 100vh);height:calc(var(--len) * 100svh + 100lvh)}
.stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;contain:layout paint}
.art{position:absolute;left:var(--ax);top:var(--ay);width:var(--aw);height:var(--ah);outline:none;background:#e9e1d6}
.scene{position:absolute;inset:0;visibility:hidden;opacity:0;z-index:0}
/* Scene changes are a short cross-dissolve: the incoming film fades in over the outgoing one (compositor-only). */
.scene.prev{visibility:visible;opacity:1;z-index:1}
.scene.live{visibility:visible;opacity:1;z-index:2;transition:opacity .32s cubic-bezier(.4,0,.2,1)}
.scene video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;pointer-events:none;background:#e9e1d6}
.fallback{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:32px 28px;background:#3a271c;color:#f3ece2}
.fb-eyebrow{margin:0 0 18px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#d7b97e}
.fb-title{margin:0;font:400 38px/1.1 Marcellus,Georgia,serif;letter-spacing:.1em}
.fb-sub{margin:14px 0 0;font-size:16px;line-height:1.5}
.fb-note{margin:34px 0 0;font-size:13px;color:#cdb9a3}

.seal{position:absolute;z-index:5;left:49.7%;top:51.6%;width:41%;aspect-ratio:1;transform:translate(-50%,-50%);border:0;padding:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:opacity .35s ease}
.seal .glow{position:absolute;inset:-14%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(226,190,122,0) 50%,rgba(226,190,122,.55) 60%,rgba(226,190,122,.18) 68%,rgba(226,190,122,0) 76%);
  opacity:.45;animation:glow 3.2s ease-in-out infinite}
.seal:active .glow{opacity:.9}
.seal:focus-visible{outline:2px solid #f2dcae;outline-offset:8px}
@keyframes glow{0%,100%{opacity:.35;transform:scale(.98)}50%{opacity:.85;transform:scale(1.02)}}
.seal-hint{position:absolute;left:0;right:0;top:69%;margin:0;text-align:center;pointer-events:none;
  font:400 clamp(11px,calc(var(--aw) * .036),16px)/1.2 Jost,system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#5e4637;transition:opacity .35s ease}
.opening .seal,.opening .seal-hint{opacity:0;pointer-events:none}
html:not(.sealed) .seal,html:not(.sealed) .seal-hint{display:none}
.seal.waiting .glow{animation-duration:1.1s}

/* Scroll cue: pinned inside the SMALL viewport (100svh), so mobile browser toolbars never cover it */
.cue{position:absolute;text-decoration:none;left:50%;top:calc(100vh - 58px);top:calc(100svh - 58px - env(safe-area-inset-bottom));z-index:5;margin:0;
  display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 18px;border-radius:999px;white-space:nowrap;pointer-events:none;
  background:rgba(40,28,21,.74);border:1px solid rgba(255,255,255,.28);
  box-shadow:0 4px 18px rgba(0,0,0,.18);
  font:500 11px/1 Jost,system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#f7f0e6;
  opacity:0;transform:translate(-50%,8px);transition:opacity .45s ease .25s,transform .45s ease .25s}
.cue.on{opacity:1;transform:translate(-50%,0)}
.cue .chev{display:block;width:8px;height:8px;margin:-4px 0 0;border:solid #f7f0e6;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);animation:bob 1.8s ease-in-out infinite}

html.sealed .after-open{display:none}
html.sealed #invite .track{height:100vh;height:100lvh}

.music{position:fixed;z-index:30;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(40,28,21,.6);color:#f3ece2;cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:opacity .4s ease}
.music svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.music svg .off{display:none}
.music[aria-pressed=false] svg .off{display:block}
.music[aria-pressed=false]{opacity:.7}
.music:focus-visible{outline:2px solid #f2dcae;outline-offset:3px}

.vprobe{position:fixed;left:0;top:0;width:0;height:0;visibility:hidden;pointer-events:none;overflow:hidden}
.vprobe i{position:absolute;left:0;top:0;width:1px}
.vprobe .sv{height:100vh;height:100svh}
.vprobe .lv{height:100vh;height:100lvh}

html:not(.js) .track{height:auto}
html:not(.js) .stage{position:static;height:auto}
html:not(.js) .art{position:relative;left:auto;top:auto;width:min(100%,56.25vh);height:auto;aspect-ratio:9/16;margin:0 auto}
html:not(.js) .scene{position:relative;visibility:visible;opacity:1;height:auto;aspect-ratio:9/16}
html:not(.js) .scene video{position:relative}
html:not(.js) .seal,html:not(.js) .seal-hint,html:not(.js) .cue{display:none}
html:not(.js) .after-open{display:block}

/* ---------- paper sections ---------- */
.paper{background:var(--paper)}
.wrap{max-width:34rem;margin:0 auto;padding:clamp(56px,9vh,96px) max(20px,env(safe-area-inset-right)) clamp(40px,6vh,64px) max(20px,env(safe-area-inset-left))}
#details .wrap{text-align:center}
.eyebrow{margin:0 0 14px;font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink)}
.title{margin:0;font:400 clamp(34px,10vw,44px)/1.1 Marcellus,"Cormorant Garamond",Georgia,serif;letter-spacing:.08em;color:var(--ink)}
.title-sm{font-size:clamp(28px,8vw,34px);text-align:center}
.sub{margin:10px 0 4px;font:400 19px/1.35 Marcellus,Georgia,serif;letter-spacing:.03em}
.by{margin:0;font-size:14px;color:var(--ink-soft);letter-spacing:.04em}
.rule{display:block;width:64px;height:1px;margin:28px auto;background:var(--gold);position:relative}
.rule::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;background:var(--gold);transform:translate(-50%,-50%) rotate(45deg)}
.facts{margin:0 0 28px;text-align:center}
.facts div{padding:12px 0;border-top:1px solid var(--line)}
.facts div:last-child{border-bottom:1px solid var(--line)}
.facts dt{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink)}
.facts dd{margin:2px 0 0;font-size:17px;line-height:1.45}
.actions{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left}
@media (max-width:359px){.actions{grid-template-columns:1fr}}
.act{display:flex;align-items:center;gap:12px;min-height:62px;padding:11px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.5);text-decoration:none;color:var(--ink);transition:transform .15s ease,background-color .15s ease;-webkit-tap-highlight-color:transparent}
.act:hover{background:rgba(255,255,255,.8)}
.act:active{transform:scale(.98)}
.act svg{flex:none;width:24px;height:24px;fill:none;stroke:var(--gold-ink);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.act svg .fill{fill:var(--gold-ink);stroke:none}
.act b{display:block;font-weight:500;font-size:15px;line-height:1.25}
.act small{display:block;font-size:13px;color:var(--ink-soft);line-height:1.3}
.ig-badge{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;color:#fff;
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.ig-badge svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round}
.ig-badge svg .dot{fill:#fff;stroke:none}

/* ---------- form ---------- */
#rsvp .wrap{padding-top:clamp(24px,4vh,40px);padding-bottom:clamp(56px,9vh,96px)}
.lead{text-align:center;margin:8px 0 28px;color:var(--ink-soft)}
form{position:relative}
.field{margin:0 0 20px}
.field label{display:block;margin:0 0 7px;font-size:15px;font-weight:500;color:var(--ink)}
.opt{font-weight:400;color:var(--ink-soft)}
.field input{display:block;width:100%;min-height:52px;margin:0;padding:12px 14px;font:400 17px/1.3 Jost,system-ui,sans-serif;color:var(--ink);background:var(--field);border:1px solid var(--field-line);border-radius:12px;-webkit-appearance:none;appearance:none;transition:border-color .15s ease,box-shadow .15s ease}
.field input[type=date]{min-height:52px;text-align:left}
.field input::-webkit-date-and-time-value{text-align:left}
.field input:focus{outline:none;border-color:var(--gold-ink);box-shadow:0 0 0 3px rgba(176,141,87,.32)}
.field input[aria-invalid=true]{border-color:var(--error);box-shadow:0 0 0 1px var(--error)}
.field input[readonly]{background:var(--paper-2)}
.hint{margin:6px 0 0;font-size:13px;color:var(--ink-soft)}
.err{margin:6px 0 0;font-size:14px;color:var(--error)}
.err:empty{display:none}
.prefix{position:relative}
.prefix span{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-soft);font-size:17px;pointer-events:none}
.prefix input{padding-left:32px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.submit-row{margin-top:28px}
.btn{position:relative;display:block;width:100%;min-height:56px;border:0;border-radius:999px;background:var(--brown);color:#f7f0e6;font:500 15px/1 Jost,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color .15s ease,transform .15s ease}
.btn:hover{background:#2c1d15}
.btn:active{transform:scale(.99)}
.btn[aria-disabled=true]{cursor:progress;background:#5a4436}
.btn.busy .btn-label::after{content:"";display:inline-block;width:14px;height:14px;margin-left:10px;vertical-align:-2px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.status{margin-top:14px;font-size:15px;line-height:1.45;text-align:center}
.status:empty{display:none}
.status.error{color:var(--error);text-align:left;padding:12px 14px;border:1px solid rgba(154,43,29,.35);border-radius:12px;background:rgba(154,43,29,.05)}
.success{text-align:center;padding:30px 20px 26px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.55);outline:none}
.success h3{margin:10px 0 6px;font:400 26px/1.2 Marcellus,Georgia,serif;letter-spacing:.06em}
.success-text{margin:0 0 10px}
.success-note{margin:0;font-size:14px;color:var(--ink-soft)}
.success-mark{width:46px;height:46px;margin:0 auto;border:1px solid var(--gold);border-radius:50%;position:relative}
.success-mark::after{content:"";position:absolute;left:16px;top:11px;width:10px;height:18px;border:solid var(--gold-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.continue{margin:26px 0 0;font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink)}
.chev{display:block;width:10px;height:10px;margin:10px auto 0;border:solid var(--gold-ink);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(5px) rotate(45deg)}}

.foot{padding:28px 20px calc(28px + env(safe-area-inset-bottom));text-align:center;font-size:13px;color:var(--ink-soft);background:var(--paper);border-top:1px solid var(--line)}
.foot p{margin:0}

@media (prefers-reduced-motion:reduce){
  .seal .glow{animation:none;opacity:.6}
  .chev,.cue .chev,.btn.busy .btn-label::after{animation:none}
  .act,.btn{transition:none}
}

[hidden]{display:none!important}

/* attendee dropdown */
.select{position:relative}
.select select{display:block;width:100%;min-height:52px;margin:0;padding:12px 44px 12px 14px;font:400 17px/1.3 Jost,system-ui,sans-serif;color:var(--ink);background:var(--field);border:1px solid var(--field-line);border-radius:12px;-webkit-appearance:none;appearance:none;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}
.select::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;margin-top:-6px;border:solid var(--gold-ink);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);pointer-events:none}
.select select:focus{outline:none;border-color:var(--gold-ink);box-shadow:0 0 0 3px rgba(176,141,87,.32)}
.select select[aria-invalid=true]{border-color:var(--error)}

/* socials */
.follow-title{margin:30px 0 12px;font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink)}
.follow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.follow a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px 8px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.5);color:var(--ink);text-decoration:none;font-size:14px;transition:background-color .15s ease,transform .15s ease;-webkit-tap-highlight-color:transparent}
.follow a:hover{background:rgba(255,255,255,.85)}
.follow a:active{transform:scale(.97)}
.follow svg{width:20px;height:20px;fill:none;stroke:var(--gold-ink);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.follow svg .fill{fill:var(--gold-ink);stroke:none}
.follow .ig-badge{width:22px;height:22px;border-radius:7px}
.follow .ig-badge svg{width:15px;height:15px;stroke:#fff;stroke-width:2}

/* in-page cue on the details card */
.next-cue{display:flex;flex-direction:column;align-items:center;gap:10px;margin:34px 0 0;font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-ink)}
.next-cue .chev{width:9px;height:9px;margin:0;border:solid var(--gold-ink);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);animation:bob 1.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.next-cue .chev,.cue .chev{animation:none}}

.see-you{margin:18px 0 0;font:400 17px/1.45 Marcellus,Georgia,serif;color:var(--ink)}

/* last-scene cue is a real link to the RSVP, and nudges if the guest pauses */
.cue.link{pointer-events:auto;cursor:pointer;background:rgba(58,39,28,.82);border-color:rgba(241,215,154,.55)}
.cue.nudge{animation:nudge 2.4s ease-in-out 2}
@keyframes nudge{0%,100%{transform:translate(-50%,0)}20%{transform:translate(-50%,-7px)}40%{transform:translate(-50%,0)}55%{transform:translate(-50%,-4px)}70%{transform:translate(-50%,0)}}

/* thank-you overlay */
.thanks{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:40;background:#1c1410;overflow:hidden;opacity:0;transition:opacity .5s ease}
.thanks.in{opacity:1}
.thanks .art{position:absolute;left:var(--ax);top:var(--ay);width:var(--aw);height:var(--ah)}
.thanks-card{position:absolute;left:50%;bottom:calc(100lvh - 100svh + max(18px,env(safe-area-inset-bottom)));bottom:max(18px,env(safe-area-inset-bottom));transform:translate(-50%,16px);
  width:min(92vw,380px);padding:22px 22px 20px;border-radius:20px;text-align:center;background:rgba(247,240,230,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 12px 40px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .6s ease,transform .6s ease}
@supports (height:100svh){.thanks-card{bottom:calc(100lvh - 100svh + max(18px,env(safe-area-inset-bottom)))}}
.thanks.done .thanks-card{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.thanks-card h2{margin:10px 0 6px;font:400 24px/1.2 Marcellus,Georgia,serif;letter-spacing:.05em;color:var(--ink)}
.thanks-text{margin:0 0 6px;font-size:15px;color:var(--ink)}
.thanks-date{margin:0 0 16px;font-size:14px;color:var(--ink-soft)}
.thanks-done{width:100%;min-height:48px;letter-spacing:.14em;text-transform:uppercase;font-size:13px}
.thanks-close{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(40,28,21,.6);display:grid;place-items:center;cursor:pointer}
.thanks-close svg{width:18px;height:18px;stroke:#f7f0e6;stroke-width:1.8;fill:none;stroke-linecap:round}
html.thanks-open,html.thanks-open body{overflow:hidden}
@media (prefers-reduced-motion:reduce){.cue.nudge{animation:none}.thanks,.thanks-card{transition:none}}

/* Tap cues ("Tap the seal to open" / "Tap to open"): a soft pulsing dot instead of the chevron */
.seal-hint{display:none!important}
.cue.tap .chev{width:7px;height:7px;margin:0;border:0;border-radius:50%;background:#f1d79a;transform:none;animation:tapdot 1.6s ease-in-out infinite}
@keyframes tapdot{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
html.sealed .cue.tap{transition-delay:.6s}
@media (prefers-reduced-motion:reduce){.cue.tap .chev{animation:none}}
@media (prefers-reduced-motion:reduce){.scene.live{transition:none}}
.follow a{padding:7px 16px 7px 10px}
.follow .fl{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left}
.follow .fl b{font-weight:500;font-size:14px}
.follow .fl small{font-size:11.5px;color:var(--gold-ink);letter-spacing:.02em}
.art,.thanks .art{z-index:0}

/* Preparing: the envelope film downloads completely before the seal can be tapped; the pill fills like a progress bar */
#invite:not(.prepared) [data-scene="1"] video{opacity:0}
[data-scene="1"] video{transition:opacity .6s ease}
#invite:not(.prepared) .seal{pointer-events:auto;cursor:progress}
#invite:not(.prepared) .seal .glow{opacity:0;animation:none}
.cue.prep{overflow:hidden;isolation:isolate;background:rgba(58,39,28,.78);border-color:rgba(241,215,154,.4)}
.cue.prep::before{content:"";position:absolute;inset:0;z-index:-1;width:var(--p,0%);background:rgba(176,141,87,.55);transition:width .25s linear}
.cue.prep .chev{width:9px;height:9px;margin:0;border:1.5px solid rgba(247,240,230,.35);border-top-color:#f7f0e6;border-radius:50%;transform:none;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
html.sealed .cue.prep{transition-delay:0s}
@media (prefers-reduced-motion:reduce){.cue.prep .chev{animation:none}}