:root{
  --night:#14030a; --bordeaux:#2a0610; --velvet:#4b0a1a; --ruby:#8e1630; --rose:#c9485b;
  --gold:#d8b67a; --champ:#f1dcb3; --ivory:#f8f0e6; --ink:#3a0a14;
  --script:"Pinyon Script","Snell Roundhand",cursive; --caps:"Cinzel","Times New Roman",serif; --serif:"Cormorant Garamond",Georgia,serif;
}
*{box-sizing:border-box;margin:0}
html{background:#0b0206;-webkit-text-size-adjust:100%}
body{font:400 1.15rem/1.55 var(--serif);color:var(--ivory);background:#0b0206;overflow-x:hidden}
#hero,#main{max-width:560px;margin:0 auto}
[hidden]{display:none!important}
.amp{font-family:var(--script);color:var(--gold)}

/* ---------- HERO ---------- */
#hero{position:relative;height:100vh;height:100svh;min-height:520px;max-width:min(560px,max(292px,56.25vh));max-width:min(560px,max(292px,56.25svh));overflow:hidden;background:var(--night);text-align:center}
#hero>*{position:absolute;inset:0;width:100%;height:100%}
.stage{background:radial-gradient(70% 42% at 50% 80%,#641027 0,#22050e 58%,#0d0206 100%)}
.stage>*{position:absolute}
.curtain{top:0;bottom:0;width:24%;background:repeating-linear-gradient(90deg,#3a0612 0,#74122a 9%,#2a040d 19%,#4b0a1a 26%);box-shadow:inset -30px 0 40px #0009}
.curtain.l{left:0}.curtain.r{right:0;transform:scaleX(-1)}
.beam{left:-10%;top:-4%;width:120%;height:88%;background:linear-gradient(#fff5,#fff0 92%);clip-path:polygon(45% 0,55% 0,82% 100%,18% 100%);filter:blur(8px);animation:beam 5s ease-in-out infinite alternate}
@keyframes beam{to{opacity:.65}}
.floor{left:13%;bottom:7%;width:74%;aspect-ratio:3.1;border-radius:50%;background:radial-gradient(#fdebd8 0,#c56a7c 34%,#4b0a1a 72%);box-shadow:0 0 0 2px #ffd9c0aa,0 0 60px 12px #ff8fa055}
.mono{left:50%;bottom:20%;width:4.6em;height:4.6em;margin-left:-2.3em;display:grid;place-items:center;border:1px solid var(--gold);border-radius:50%;outline:1px solid #d8b67a66;outline-offset:6px;font:400 1.5rem var(--caps);letter-spacing:.12em;color:var(--champ);background:#2a0610aa;text-shadow:0 0 18px #ffd9a0}
#film{object-fit:cover;opacity:0;transition:opacity .8s}
.has-film #film{opacity:1}
.shade{background:linear-gradient(#14030ad9 0,#14030a80 24%,#14030a00 40%)}
.names{padding:max(8vh,48px) 18px 0;display:flex;flex-direction:column;align-items:center;gap:.35em;pointer-events:none;text-shadow:0 2px 18px #000a}
.names p{font-style:italic;font-size:1.08rem}
.names h1{font:400 min(13.5vw,60px)/1.08 var(--script);display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:.22em;margin:.1em 0 .04em}
.names h1 .amp{font-size:.55em}
.names .num{font:400 1.2rem var(--caps);letter-spacing:.34em;font-style:normal;margin-top:.5em;color:var(--champ)}
.l{opacity:0;transform:translateY(16px);transition:opacity 1.1s ease,transform 1.1s ease}
.show .l{opacity:1;transform:none}
.show .l1{transition-delay:var(--d,1.1s)}.show .l2{transition-delay:calc(var(--d,1.1s) + .6s)}.show .l3{transition-delay:calc(var(--d,1.1s) + 1s)}.show .l4{transition-delay:calc(var(--d,1.1s) + 1.3s)}
.show .l5{transition-delay:calc(var(--d,1.1s) + 2.1s)}.show .l6{transition-delay:calc(var(--d,1.1s) + 2.7s)}.show .l7{transition-delay:calc(var(--d,1.1s) + 3.2s)}
#glitter{pointer-events:none;transition:opacity .7s}
#cover{background:linear-gradient(#14030a80 0,#14030a00 30%,#14030a00 55%,#14030aa6 100%);border:0;color:var(--ivory);font:inherit;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:max(10vh,56px) 22px max(13vh,70px);text-shadow:0 2px 14px #000c;transition:opacity .5s;-webkit-tap-highlight-color:transparent}
#cover span{display:flex;flex-direction:column;align-items:center;gap:.5em}
#cover em{font-size:1.2rem}
#cover small{font:400 .95rem var(--caps);letter-spacing:.4em;color:var(--champ)}
#cover strong{font:400 3.3rem/1 var(--script);animation:pulse 2.2s ease-in-out infinite;transition:opacity .25s}
#cover.swap strong{opacity:0}
.glow{background:radial-gradient(62% 46% at 50% 56%,#ffd9a04d 0,#ffd9a000 72%);opacity:0;transition:opacity 1.2s;pointer-events:none}
.armed .glow{opacity:1;animation:breathe 2.6s ease-in-out 1.2s infinite}
@keyframes breathe{50%{opacity:.4}}
.open .glow{opacity:0;animation:none;transition:opacity .5s}
@keyframes pulse{50%{transform:scale(1.06);text-shadow:0 0 26px #ffd9a0}}
.open #cover{opacity:0;pointer-events:none}
.hint{top:auto!important;height:auto!important;bottom:18px;font:400 .68rem var(--caps);letter-spacing:.36em;text-transform:uppercase;color:var(--champ);opacity:0;transition:opacity 1s calc(var(--d,1.1s) + 4.3s);pointer-events:none}
.hint i{display:block;width:1px;height:26px;margin:8px auto 0;background:var(--gold);animation:drop 1.6s ease-in-out infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}60%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(1);opacity:0}}
.show .hint{opacity:1}
#main:focus{outline:none}

/* ---------- SECTIONS ---------- */
.sec{position:relative;padding:76px 24px;text-align:center}
.velvet{background:radial-gradient(120% 80% at 50% 0,#6a0f25 0,var(--velvet) 40%,var(--bordeaux) 100%)}
.night{background:linear-gradient(var(--night),#1f040c)}
.paper{color:var(--ink);background:var(--ivory) radial-gradient(#d8b67a2e 1px,#0000 1.5px) 0 0/22px 22px}
.eyebrow{font:500 .72rem var(--caps);letter-spacing:.38em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.paper .eyebrow{color:var(--ruby)}
.sec h2{font:400 2.9rem/1.1 var(--script);margin-bottom:18px;color:var(--champ)}
.paper h2{color:var(--ruby)}
.it{font-style:italic}
.big{font:400 1.35rem/1.4 var(--caps);letter-spacing:.06em;margin:18px 0 6px}
.script{font:400 3rem/1.2 var(--script);color:var(--champ)}
.btn{display:inline-block;margin-top:22px;padding:14px 30px;border:0;border-radius:40px;font:500 .78rem var(--caps);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--ink);background:linear-gradient(120deg,#c79a57,var(--champ) 50%,#c79a57);box-shadow:0 8px 24px #0006;cursor:pointer}
.btn:active{transform:scale(.97)}
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
.rv.in{opacity:1;transform:none}

.card{position:relative;max-width:420px;margin:0 auto;padding:54px 28px 36px;background:#fffaf2;color:var(--ink);border:1px solid #d8b67a;outline:1px solid #d8b67a88;outline-offset:-9px;box-shadow:0 24px 60px #0008}
.card h2{color:var(--ruby);font-size:2.5rem}
.card .sign{font:400 2.2rem var(--script);color:var(--ruby);margin-top:18px}
.seal{position:absolute;top:-30px;left:50%;margin-left:-30px;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font:500 .7rem var(--caps);font-style:normal;letter-spacing:.06em;color:var(--champ);background:radial-gradient(circle at 35% 30%,#c9485b,#7a0f25 70%);box-shadow:0 6px 14px #0007,inset 0 0 0 4px #8e1630}

.couple{display:flex;flex-direction:column;align-items:center;gap:4px}
.couple b{display:block;font:400 3.5rem/1.15 var(--script);color:var(--ruby)}
.couple div span{display:block;max-width:300px;margin:0 auto;font-size:1.02rem;font-style:italic;line-height:1.35}
.couple .amp{font-size:2.3rem;color:var(--gold);margin:12px 0 2px}

.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px 0;max-width:330px;margin:0 auto 10px;padding:22px 16px;background:#fffaf2;color:var(--ink);border-radius:4px;box-shadow:0 18px 44px #0009;font:400 1rem var(--caps)}
.cal span{height:34px;display:grid;place-items:center;position:relative}
.cal .wd{font-size:.62rem;letter-spacing:.1em;color:#9a7a7f}
.cal .on{color:var(--ruby);font-weight:500}
.cal .on::after{content:"";position:absolute;inset:-3px 4px;border:2px solid var(--rose);border-radius:50%;transform:scale(0) rotate(-20deg);transition:transform .8s cubic-bezier(.3,1.5,.5,1) .5s}
.cal.in .on::after{transform:scale(1) rotate(-8deg)}

.events{max-width:420px;margin:26px auto 0;text-align:left;border-left:1px solid #d8b67a;padding-left:22px}
.ev{position:relative;padding:0 0 30px}
.ev::before{content:"";position:absolute;left:-27px;top:9px;width:9px;height:9px;border-radius:50%;background:var(--ruby);box-shadow:0 0 0 4px var(--ivory),0 0 0 5px var(--gold)}
.ev small{font:500 .7rem var(--caps);letter-spacing:.2em;color:var(--ruby);text-transform:uppercase}
.ev b{display:block;font:400 2.2rem/1.15 var(--script)}
.ev span{display:block;line-height:1.35}
.ev .it{opacity:.75}

.map{margin:26px auto 0;max-width:460px;height:230px;border-radius:10px;overflow:hidden;border:1px solid #d8b67a66;background:#1f040c}
.map button{width:100%;height:100%;border:0;background:none;color:var(--champ);font:500 .74rem var(--caps);letter-spacing:.24em;text-transform:uppercase;cursor:pointer}
.map iframe{width:100%;height:100%;border:0}
.sw{display:flex;justify-content:center;gap:12px;margin-top:18px}
.sw i{width:40px;height:40px;border-radius:50%;border:2px solid #fff;box-shadow:0 4px 12px #0003}
.sw i:nth-child(1){background:#f4ead9}.sw i:nth-child(2){background:#d8b67a}.sw i:nth-child(3){background:#8e1630}.sw i:nth-child(4){background:#3a0a14}

.form{display:grid;gap:12px;max-width:400px;margin:22px auto 0}
.form input:not([type=radio]),.form textarea{width:100%;padding:14px 16px;font:inherit;color:var(--ivory);background:#14030a66;border:1px solid #d8b67a77;border-radius:8px}
.form ::placeholder{color:#f8f0e699}
.form .bad{border-color:#ff8fa0}
.opt{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt input{position:absolute;opacity:0}
.opt span{display:block;padding:12px 6px;border:1px solid #d8b67a77;border-radius:8px;font-size:1rem;cursor:pointer}
.opt input:checked+span{background:var(--champ);color:var(--ink)}
.opt input:focus-visible+span,.btn:focus-visible,#cover:focus-visible{outline:2px solid #fff;outline-offset:3px}

.cd{display:flex;justify-content:center;gap:16px;margin:10px 0 34px;font:400 .62rem var(--caps);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.cd b{display:block;font:400 2.3rem/1.2 var(--caps);letter-spacing:0;color:var(--champ);min-width:1.6em}
.closing{padding-bottom:90px}
.credit{margin-top:44px;font:400 .66rem/1.8 var(--caps);letter-spacing:.16em;text-transform:uppercase;color:#d8b67acc;text-wrap:balance}
#snd{position:fixed;right:14px;bottom:14px;z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid var(--gold);background:#14030acc;color:var(--champ);font-size:1.2rem;cursor:pointer}
#snd.off{opacity:.45;text-decoration:line-through}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01s!important;transition-delay:0s!important}
  .show .l,.show .hint{transition-delay:var(--d,1.1s)!important}}