:root{
  --emerald:#0c2219; --emerald2:#143426; --burgundy:#6b1e2a; --gold:#c9a35c; --gold2:#e6cf97;
  --ivory:#f7f0e2; --ink:#3a2a1e;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--emerald);color:var(--ivory);font-family:"Cormorant Garamond",Georgia,serif;-webkit-font-smoothing:antialiased}
body{min-height:100vh;background:radial-gradient(ellipse at 50% 0%,#1b4632 0%,var(--emerald) 60%,#07150f 100%) fixed}
.hidden{display:none!important}
#stars{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}

/* opening stage: fixed 9:16 box so the card text lines up with the film */
#opening{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;overflow:hidden}
#opening::before{content:"";position:absolute;inset:-40px;background:url(closed.jpg) center/cover;filter:blur(28px) brightness(.45)}
.stage{position:relative;width:min(100vw,100dvh*0.5625);aspect-ratio:9/16;max-height:100dvh}
.stage .still,.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage video{opacity:0;transition:opacity .25s}
.stage video.on{opacity:1}
.envelope-line{position:absolute;top:2.2%;left:0;right:0;text-align:center;font-family:"Pinyon Script",cursive;font-size:calc(var(--u)*7.2);color:var(--gold2);text-shadow:0 2px 12px rgba(0,0,0,.7);transition:opacity .6s}
.stage{--u:min(1vw,1dvh*0.5625)}
.seal-btn{position:absolute;left:50%;top:31.6%;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent;cursor:pointer}
.seal-btn .ring{position:absolute;inset:-8%;border-radius:50%;border:2px solid rgba(230,207,151,.75);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.tap-hint{position:absolute;bottom:3%;left:0;right:0;text-align:center;letter-spacing:.32em;text-transform:uppercase;font-size:calc(var(--u)*3);color:var(--gold2);text-shadow:0 2px 10px rgba(0,0,0,.8);animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{opacity:.45}}

/* words on the blank card (card spans x 20-80%, y 22-58%) */
.card-text{position:absolute;left:24%;right:24%;top:25%;height:31%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#8a6a2c}
.card-text>div{opacity:0;transform:translateY(10px);transition:opacity .6s cubic-bezier(.22,.8,.3,1),transform .6s cubic-bezier(.22,.8,.3,1);will-change:opacity,transform}
.card-text.show>div{opacity:1;transform:none}
.ct-invite{font-size:calc(var(--u)*2.7);letter-spacing:.28em;text-transform:uppercase;color:#6d5730}
.ct-title1{font-family:"Pinyon Script",cursive;font-size:calc(var(--u)*11);line-height:1;margin-top:2%;background:linear-gradient(100deg,#9a7330 10%,#e9cf8a 45%,#a57b33 60%,#d9b56a 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ct-title2{font-family:"Pinyon Script",cursive;font-size:calc(var(--u)*6);line-height:1.1;color:#8f6c2e}
.ct-rule{width:30%;height:1px;background:#b8955a;margin:5% 0 4%}
.ct-date,.ct-time{font-size:calc(var(--u)*3.1);color:#4f3c24;font-style:italic}
.scroll-cue{position:absolute;bottom:3%;left:0;right:0;text-align:center;letter-spacing:.3em;text-transform:uppercase;font-size:calc(var(--u)*3);color:var(--gold2);cursor:pointer;animation:breathe 2.4s ease-in-out infinite}
.scroll-cue span{display:block;font-size:2em;line-height:.6}

/* details */
main{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:6vh 18px 10vh}
.block{margin:0 0 56px;text-align:center}
.eyebrow{letter-spacing:.32em;text-transform:uppercase;font-size:14px;color:var(--gold2)}
.script{font-family:"Pinyon Script",cursive;font-weight:400;font-size:46px;color:var(--gold2);line-height:1.2;margin:4px 0 18px}
.polaroid{display:inline-block;background:#fbf7ee;padding:14px 14px 18px;transform:rotate(-2.2deg);box-shadow:0 18px 40px rgba(0,0,0,.5);max-width:86%}
.polaroid img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.polaroid figcaption{font-family:"Pinyon Script",cursive;color:var(--ink);font-size:28px;margin-top:10px}
.countdown{display:flex;justify-content:center;gap:10px}
.countdown div{background:rgba(247,240,226,.06);border:1px solid rgba(201,163,92,.45);border-radius:10px;min-width:68px;padding:12px 6px}
.countdown b{display:block;font-size:34px;font-weight:500;color:var(--ivory)}
.countdown span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2)}
.paper{position:relative;background:linear-gradient(#f8f2e5,#efe5d0);color:var(--ink);border-radius:6px;padding:36px 24px 30px;box-shadow:0 20px 50px rgba(0,0,0,.45);outline:1px solid rgba(201,163,92,.6);outline-offset:-10px}
.paper .script{color:var(--burgundy)}
.paper .eyebrow{color:#8a6a2c}
.sprig{position:absolute;top:-34px;right:-12px;width:62px;transform:rotate(18deg)}
.facts{display:grid;gap:14px;text-align:left;margin:0 auto 24px;max-width:400px}
.facts div{border-bottom:1px solid rgba(138,106,44,.25);padding-bottom:10px}
.facts dt{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#8a6a2c}
.facts dd{font-size:21px;line-height:1.3}
.buttons{display:flex;flex-direction:column;gap:10px;max-width:340px;margin:0 auto}
.btn{display:block;text-decoration:none;text-align:center;font:600 15px/1 "Cormorant Garamond",serif;letter-spacing:.18em;text-transform:uppercase;color:var(--burgundy);border:1.5px solid var(--burgundy);border-radius:999px;padding:14px 18px;background:transparent;cursor:pointer}
.btn.ghost{border-color:rgba(107,30,42,.35)}
.btn.solid{background:var(--burgundy);color:var(--ivory);width:100%;margin-top:8px}
form{display:grid;gap:14px;text-align:left;max-width:400px;margin:0 auto}
form label{font-size:17px;display:grid;gap:6px}
form input,form textarea{font:inherit;font-size:18px;padding:11px 12px;border:1px solid rgba(107,30,42,.3);border-radius:8px;background:#fffdf8;color:var(--ink)}
.choice{display:grid;gap:8px}
.choice label{display:flex;align-items:center;gap:10px;background:#fffdf8;border:1px solid rgba(107,30,42,.25);border-radius:8px;padding:12px}
.form-msg{text-align:center;font-style:italic;min-height:1.2em}
.album{display:flex;justify-content:center;gap:14px}
.album img{width:44%;aspect-ratio:1;object-fit:cover;border:8px solid #fbf7ee;box-shadow:0 12px 26px rgba(0,0,0,.45)}
.album img:nth-child(odd){transform:rotate(-3deg)}.album img:nth-child(even){transform:rotate(2.5deg)}
.signoff .script{font-size:52px;margin:0}
.signoff .hosts{letter-spacing:.3em;text-transform:uppercase;color:var(--gold2);font-size:15px}
.fade-in{animation:fadeUp 1.1s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}