:root{--gold:#c9a24b;--gold-l:#efdc9d;--gold-d:#94711c;--ink:#40362a;--ivory:#fffdf8;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:300 1.05rem/1.7 'Jost',system-ui,sans-serif;color:var(--ink);overflow-x:hidden;
background:radial-gradient(60rem 40rem at 5% -10%,#fff4cf,transparent 60%),radial-gradient(50rem 40rem at 105% 35%,#fff0c2,transparent 55%),var(--ivory)}
body.locked{overflow:hidden;height:100svh}
img{max-width:100%;display:block}
h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:600;line-height:1.1}
h2{font-size:clamp(2rem,7vw,3rem)}
.gold-text{background:linear-gradient(100deg,var(--gold-d),#f4e3a1 25%,var(--gold) 50%,#f8ecbd 75%,var(--gold-d));background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:-250% 0}}
.sr{position:absolute;left:-9999px}.hp{position:absolute;left:-9999px;opacity:0}
section,.hero,footer{position:relative;z-index:2;max-width:960px;margin:auto;padding:5rem 1.25rem;text-align:center}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:110}
.lead{max-width:34rem;margin:1.2rem auto 0;font-size:1.15rem}
.rule{width:90px;height:2px;margin:1.2rem auto;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s)}
.reveal.l{transform:translateX(-60px)}.reveal.r{transform:translateX(60px)}.reveal.z{transform:scale(.85)}
.reveal.in{opacity:1;transform:none}

/* envelope */
.envelope{position:fixed;inset:0;z-index:100;display:grid;place-items:center;text-align:center;transition:opacity .8s ease .9s,visibility 0s linear 1.7s}
.env-half{position:absolute;top:0;bottom:0;width:50.3%;box-shadow:0 0 50px rgba(148,113,28,.25);transition:transform 1.4s var(--ease)}
.env-half::before{content:"";position:absolute;inset:14px;border:1px solid var(--gold-l)}
.env-l{left:0;background:linear-gradient(160deg,#fff,#f8edcb)}
.env-r{right:0;background:linear-gradient(200deg,#fff,#f8edcb)}
.envelope.open .env-l{transform:translateX(-102%)}.envelope.open .env-r{transform:translateX(102%)}
.envelope.open{opacity:0;visibility:hidden}
.env-center{position:relative;z-index:2;padding:1rem}
.env-small{letter-spacing:.2em;text-transform:uppercase;font-size:.72rem;transition:opacity .4s}
.env-names{font:clamp(2.4rem,11vw,4rem)/1.2 'Pinyon Script',cursive;margin:.4rem 0 1.6rem;display:inline-block}
.seal{position:relative;width:104px;height:104px;border:0;border-radius:50%;cursor:pointer;color:#fff;font:600 1.5rem 'Cormorant Garamond',serif;
background:radial-gradient(circle at 30% 28%,#f8e7a6,var(--gold) 55%,var(--gold-d));box-shadow:0 12px 30px rgba(148,113,28,.5),inset 0 -4px 8px rgba(0,0,0,.18);
animation:beat 2.2s ease-in-out infinite;transition:transform .9s var(--ease),opacity .9s}
.seal i{font-style:normal;font-size:1rem;margin:0 .15em}
.seal::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px solid var(--gold);animation:ripple 2.2s ease-out infinite}
.envelope.open .seal{transform:scale(1.8) rotate(25deg);opacity:0;animation:none}
.env-hint{margin-top:1.6rem;font-size:.85rem;letter-spacing:.12em;opacity:.7;animation:blink 2.2s ease-in-out infinite}
.envelope.open .env-hint,.envelope.open .env-small{opacity:0}
@keyframes beat{50%{transform:scale(1.07)}}
@keyframes ripple{to{transform:scale(1.5);opacity:0}}
@keyframes blink{50%{opacity:.25}}

/* hero */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:3rem}
.h-in{opacity:0;transform:translateY(30px)}
.open .h-in{animation:rise 1.2s var(--ease) var(--d,0s) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.eyebrow{letter-spacing:.35em;text-transform:uppercase;font-size:.78rem}
.frame{position:relative;width:min(78vw,340px);margin:1.4rem auto 1.8rem;padding:10px;border-radius:30px;opacity:0;
background:linear-gradient(135deg,#f6e7b0,var(--gold),#f6e7b0);box-shadow:0 30px 60px -20px rgba(148,113,28,.5)}
.frame img{width:100%;height:auto;aspect-ratio:757/946;border-radius:22px}
.frame::after{content:"";position:absolute;inset:-15px;border:1px solid var(--gold-l);border-radius:42px;animation:glow 3.5s ease-in-out infinite}
.open .frame{animation:pop 1.5s var(--ease) .3s forwards,float 7s ease-in-out 1.8s infinite}
@keyframes pop{from{opacity:0;transform:scale(.7) rotate(-4deg)}to{opacity:1;transform:none}}
@keyframes float{50%{transform:translateY(-12px)}}
@keyframes glow{50%{opacity:.3;transform:scale(1.03)}}
.names{display:flex;flex-direction:column;align-items:center;font-family:'Pinyon Script',cursive;font-weight:400;font-size:clamp(3rem,15vw,5.6rem);line-height:1.05}
.names em{font:italic 500 1.6rem 'Cormorant Garamond',serif;color:var(--gold)}
.date-line{margin-top:.8rem;letter-spacing:.28em;text-transform:uppercase;font-size:.9rem;color:var(--gold-d)}
.cue{margin-top:2rem;width:26px;height:44px;border:2px solid var(--gold);border-radius:14px;position:relative}
.cue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--gold);animation:wheel 1.8s infinite}
@keyframes wheel{to{transform:translateY(14px);opacity:0}}

/* countdown */
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-top:2rem}
.box{padding:1.2rem .3rem;border:1px solid var(--gold-l);border-radius:18px;background:rgba(255,255,255,.75);backdrop-filter:blur(6px);box-shadow:0 14px 30px -18px rgba(148,113,28,.6)}
.box b{display:block;font:600 clamp(1.8rem,8vw,3rem)/1 'Cormorant Garamond',serif;color:var(--gold-d)}
.box b.flip{animation:flip .5s var(--ease)}
@keyframes flip{from{transform:rotateX(90deg);opacity:0}}
.box small{letter-spacing:.14em;text-transform:uppercase;font-size:.62rem}
.done-msg{display:none;font:600 2rem 'Cormorant Garamond',serif;margin-top:1rem}
#countdown.done .done-msg{display:block}

/* venues, timeline, dress */
.venues{display:grid;gap:1.2rem;margin-top:2rem}
.card{padding:2rem 1.4rem;border-radius:22px;background:#fff;border:1px solid var(--gold-l);box-shadow:0 20px 40px -26px rgba(148,113,28,.6)}
.card small{letter-spacing:.25em;text-transform:uppercase;color:var(--gold-d);font-size:.72rem}
.card h3{font-size:1.8rem;margin:.3rem 0}.card p{margin-bottom:1.2rem}
.btn{display:inline-block;position:relative;overflow:hidden;padding:.95rem 2.2rem;border:0;border-radius:999px;cursor:pointer;color:#fff;font:500 .9rem 'Jost',sans-serif;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
background:linear-gradient(120deg,var(--gold-d),var(--gold),#e8cf86);box-shadow:0 12px 26px -10px rgba(148,113,28,.7);transition:transform .3s var(--ease)}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);animation:sweep 3s infinite}
@keyframes sweep{60%,100%{left:140%}}
.btn:hover{transform:translateY(-3px)}.btn:disabled{opacity:.6;pointer-events:none}
.btn.ghost{background:transparent;color:var(--gold-d);box-shadow:inset 0 0 0 1.5px var(--gold)}
.tl{position:relative;max-width:420px;margin:2.5rem auto 0;padding-left:2.4rem;text-align:left;list-style:none}
.tl::before{content:"";position:absolute;left:.5rem;top:.4rem;bottom:.4rem;width:2px;background:linear-gradient(var(--gold),var(--gold-l));transform:scaleY(0);transform-origin:top;transition:transform 2s var(--ease) .2s}
.tl.in::before{transform:scaleY(1)}
.tl li{position:relative;margin-bottom:2rem}
.tl li::before{content:"";position:absolute;left:-2.25rem;top:.55rem;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--gold);box-shadow:0 0 0 0 rgba(201,162,75,.5);animation:dot 2.4s infinite}
@keyframes dot{70%{box-shadow:0 0 0 12px rgba(201,162,75,0)}}
.tl time{font:600 1.7rem 'Cormorant Garamond',serif;color:var(--gold-d)}
.tl h3{font-size:1.3rem;font-weight:500}
.swatches{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem;margin-top:2rem}
.swatches span{display:block;width:62px;height:62px;border-radius:50%;border:1px solid var(--gold-l);box-shadow:0 10px 20px -8px rgba(148,113,28,.6),inset 0 -6px 10px rgba(0,0,0,.08);transition:transform .4s var(--ease)}
.swatches figure:hover span{transform:scale(1.2) rotate(8deg)}
.swatches figcaption{font-size:.7rem;margin-top:.5rem;letter-spacing:.08em}

/* form */
form{max-width:440px;margin:2.2rem auto 0;text-align:left;display:grid;gap:1.3rem}
.field{position:relative}
.field input,.field textarea{width:100%;padding:1.2rem .2rem .4rem;border:0;border-bottom:1.5px solid var(--gold-l);background:transparent;font:inherit;color:var(--ink);outline:0;resize:vertical;border-radius:0}
.field label{position:absolute;left:.2rem;top:1rem;color:#8c7e66;pointer-events:none;transition:.25s var(--ease)}
.field input:focus,.field textarea:focus{border-color:var(--gold)}
.field input:focus+label,.field input:not(:placeholder-shown)+label,.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{top:-.2rem;font-size:.75rem;color:var(--gold-d)}
fieldset{border:0;display:grid;gap:.6rem}
.choice input{position:absolute;opacity:0}
.choice span{display:block;padding:.9rem 1.1rem;border:1.5px solid var(--gold-l);border-radius:14px;background:#fff;cursor:pointer;transition:.3s var(--ease)}
.choice input:checked+span{border-color:var(--gold);background:linear-gradient(120deg,#fff8e0,#f6e8b8);transform:scale(1.02);box-shadow:0 10px 24px -14px rgba(148,113,28,.8)}
.choice input:focus-visible+span{outline:2px solid var(--gold-d)}
form .btn{justify-self:center;margin-top:.6rem}
footer{padding-bottom:6rem}.verse{font:italic 500 1.2rem 'Cormorant Garamond',serif;max-width:30rem;margin:0 auto 1.5rem}
.sign{font:clamp(2.4rem,10vw,3.4rem) 'Pinyon Script',cursive;display:inline-block}

/* music + popup */
.mute{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:90;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--gold);background:rgba(255,255,255,.9);display:flex;gap:3px;align-items:flex-end;justify-content:center;padding-bottom:15px;cursor:pointer;box-shadow:0 8px 20px -8px rgba(148,113,28,.6)}
.mute i{width:3px;height:6px;background:var(--gold-d);border-radius:2px}
.mute.on i{animation:eq .9s ease-in-out infinite}.mute.on i:nth-child(2){animation-delay:.2s}.mute.on i:nth-child(3){animation-delay:.4s}
@keyframes eq{50%{height:18px}}
.popup{position:fixed;inset:0;z-index:120;display:none;place-items:center;padding:1.2rem;background:rgba(255,253,248,.85);backdrop-filter:blur(8px)}
.popup.show{display:grid}
.pbox{width:min(92vw,380px);padding:2rem 1.5rem;border-radius:24px;background:#fff;border:1px solid var(--gold-l);text-align:center;box-shadow:0 30px 60px -20px rgba(148,113,28,.5);animation:pop .6s var(--ease)}
.pbox>*{margin-inline:auto}.pbox p{margin:1rem 0 1.4rem}
.st-loading,.st-success,.st-error{display:none}
[data-state=loading] .st-loading,[data-state=success] .st-success,[data-state=error] .st-error{display:block}
[data-state=loading] #popup-close{display:none}
.spin{width:64px;height:64px;border-radius:50%;border:3px solid var(--gold-l);border-top-color:var(--gold);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.st-success circle,.st-success path,.st-error circle,.st-error path{stroke-width:3;stroke-linecap:round;stroke-dasharray:160;stroke-dashoffset:160;animation:draw .9s ease forwards}
.st-success *{stroke:var(--gold)}.st-error *{stroke:#b4533a}.st-success path,.st-error path{animation-delay:.5s}
@keyframes draw{to{stroke-dashoffset:0}}

@media(min-width:720px){.venues{grid-template-columns:1fr 1fr}.swatches span{width:78px;height:78px}}
@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,.h-in,.frame{opacity:1;transform:none}}