:root{--navy:#14284b;--sky:#7fb2e5;--pastel:#dbe9f7;--cream:#faf6ee;--card:#fffdf8;--ink:#23324d;--mute:#5c6b85;--line:#d5deea;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--cream:#0f1a30;--card:#16264a;--ink:#e8eefb;--mute:#a9b8d4;--line:#2a3d66;--pastel:#1e3560}}
:root[data-theme="dark"]{--cream:#0f1a30;--card:#16264a;--ink:#e8eefb;--mute:#a9b8d4;--line:#2a3d66;--pastel:#1e3560}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font:300 15px/1.7 Poppins,system-ui,sans-serif;overflow-x:hidden}
body.lock{overflow:hidden;height:100vh}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;margin:0;color:var(--navy)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) h1,:root:not([data-theme="light"]) h2,:root:not([data-theme="light"]) h3{color:#cfe2fb}}
.script{font-family:'Great Vibes',cursive;font-weight:400}
.wrap{max-width:none}
section{padding:64px 22px;text-align:center}
.alt{background:linear-gradient(180deg,var(--pastel),var(--cream))}
h2{font-size:32px;margin-bottom:6px}
.sub{color:var(--mute);font-size:13px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px;margin:14px 0;box-shadow:0 8px 24px rgba(20,40,75,.08)}
.btn{display:inline-flex;gap:8px;align-items:center;justify-content:center;border:0;border-radius:999px;padding:11px 22px;font:500 13px Poppins,sans-serif;background:var(--navy);color:#fff;cursor:pointer;text-decoration:none}
.btn.o{background:transparent;color:var(--navy);border:1px solid var(--navy)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.o{color:#cfe2fb;border-color:#cfe2fb}}
.rv{opacity:0;transform:translateY(26px);transition:.9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* COVER */
#cover{position:fixed;inset:0;z-index:100;background:linear-gradient(160deg,#0d1b38,#1d3d73 55%,#4d86c6);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;transition:transform 1.2s cubic-bezier(.7,0,.2,1) .9s,opacity .6s 1.5s;padding:20px}
#cover.open{transform:translateY(-105%);opacity:0;pointer-events:none}
#cover small{letter-spacing:.35em;font-size:11px;opacity:.8}
.env{position:relative;width:min(300px,80vw);height:200px;margin:26px 0;perspective:900px}
.env .back{position:absolute;inset:0;background:#e9f1fb;border-radius:8px;box-shadow:0 20px 40px rgba(0,0,0,.35)}
.env .letter{position:absolute;left:8%;right:8%;top:6%;height:84%;background:var(--card,#fffdf8);color:#14284b;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform 1s ease .5s;z-index:2;font-size:12px}
.env .letter b{font-family:'Great Vibes',cursive;font-size:32px;font-weight:400;line-height:1.1}
.env .front{position:absolute;inset:0;z-index:3;border-radius:8px;background:linear-gradient(135deg,#c9dcf2 50%,transparent 50%),linear-gradient(225deg,#d6e5f6 50%,transparent 50%);clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%)}
.env .front::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#dfeaf8,#cfe0f3);clip-path:polygon(0 100%,50% 40%,100% 100%)}
.env .flap{position:absolute;left:0;right:0;top:0;height:58%;background:#b9d2ee;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .9s ease;z-index:4}
.seal{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;z-index:5;border:0;cursor:pointer;color:#fff;font:600 20px 'Cormorant Garamond',serif;background:radial-gradient(circle at 30% 30%,#4f8fd6,#14346a);box-shadow:0 4px 12px rgba(0,0,0,.4),inset 0 0 0 4px rgba(255,255,255,.15);animation:pulse 2s infinite;transition:opacity .4s}
@keyframes pulse{50%{box-shadow:0 0 0 12px rgba(127,178,229,.25),0 4px 12px rgba(0,0,0,.4)}}
#cover.opening .flap{transform:rotateX(180deg);z-index:1}
#cover.opening .letter{transform:translateY(-70px)}
#cover.opening .seal{opacity:0;animation:none}
#cover .to{margin-top:6px;font-size:13px}#cover .to b{display:block;font:600 20px 'Cormorant Garamond',serif}
#cover .btn{background:#fff;color:#14284b;margin-top:18px}

/* HERO */
#hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;background:linear-gradient(180deg,rgba(13,27,56,.55),rgba(13,27,56,.85)),radial-gradient(circle at 70% 20%,#7fb2e5,#14284b 70%);position:relative}
#hero h1{color:#fff;font-family:'Great Vibes',cursive;font-weight:400;font-size:clamp(54px,17vw,80px);line-height:1.05;margin:10px 0}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) #hero h1{color:#fff}}
.photo{width:190px;height:240px;border-radius:100px 100px 20px 20px;border:3px solid rgba(255,255,255,.7);background:linear-gradient(160deg,#a9cdf0,#3f73b5);display:flex;align-items:center;justify-content:center;font-size:64px;box-shadow:0 20px 40px rgba(0,0,0,.35);margin-bottom:10px;overflow:hidden}
#hero .q{max-width:340px;font-style:italic;opacity:.9;font-size:13px;margin-top:18px}
.chev{margin-top:22px;animation:bob 1.6s infinite}@keyframes bob{50%{transform:translateY(8px)}}

/* PLAYER */
#player{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:90;display:none;gap:6px;background:rgba(20,40,75,.92);padding:6px;border-radius:999px;backdrop-filter:blur(8px)}
#player.on{display:flex}
#player button{width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:15px;cursor:pointer}
#player .disc{animation:spin 6s linear infinite;animation-play-state:paused}#player.playing .disc{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}

/* COUNTDOWN & CAL */
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cd div{background:var(--navy);color:#fff;border-radius:14px;padding:12px 2px}
.cd b{display:block;font:600 28px 'Cormorant Garamond',serif}.cd span{font-size:10px;letter-spacing:.15em;text-transform:uppercase;opacity:.8}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:13px;margin-top:10px}
.cal i{font-style:normal;padding:7px 0;border-radius:50%}.cal .h{color:var(--mute);font-size:11px}
.cal .d{background:var(--navy);color:#fff;font-weight:500;box-shadow:0 0 0 4px var(--pastel)}

/* EVENTS */
.ev h3{font-size:26px}.ev .ic{font-size:30px}
.ev p{margin:4px 0;color:var(--mute)}.ev .t{color:var(--ink);font-weight:500}
.tl{text-align:left;position:relative;margin:10px 0 0 22px;border-left:2px dashed var(--sky);padding-left:26px}
.tl div{position:relative;margin-bottom:22px}
.tl div::before{content:attr(data-i);position:absolute;left:-47px;top:-4px;width:40px;height:40px;border-radius:50%;background:var(--card);border:2px solid var(--sky);display:flex;align-items:center;justify-content:center;font-size:18px}
.tl b{display:block;font:600 19px 'Cormorant Garamond',serif;color:var(--navy)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .tl b{color:#cfe2fb}}
.tl small{color:var(--sky);font-weight:500}

/* DRESS */
.sw{display:flex;justify-content:center;gap:12px;margin:14px 0}
.sw i{width:46px;height:46px;border-radius:50%;border:3px solid var(--card);box-shadow:0 3px 10px rgba(0,0,0,.18)}
.notes{list-style:none;padding:0;margin:0;text-align:left}.notes li{padding:10px 0;border-bottom:1px solid var(--line);display:flex;gap:12px}.notes li:last-child{border:0}

/* GIFT */
.bank{display:flex;align-items:center;gap:14px;text-align:left}
.bank .lg{flex:0 0 52px;height:52px;border-radius:14px;background:var(--pastel);display:flex;align-items:center;justify-content:center;font:600 13px Poppins;color:var(--navy)}
.bank b{font:500 17px Poppins;letter-spacing:.06em;display:block}
.qr{width:170px;height:170px;margin:12px auto;background:#fff;padding:10px;border-radius:14px;border:1px solid var(--line)}

/* FORMS */
label{display:block;text-align:left;font-size:12px;font-weight:500;margin:12px 0 4px;color:var(--mute)}
input,select,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--cream);color:var(--ink);font:300 14px Poppins,sans-serif}
input:focus,select:focus,textarea:focus{outline:2px solid var(--sky);border-color:transparent}
.ft{display:flex;gap:8px;margin-top:6px}.ft label{flex:1;margin:0;cursor:pointer}
.ft input{display:none}.ft span{display:block;text-align:center;padding:10px 4px;border:1px solid var(--line);border-radius:12px;font-size:12px}
.ft input:checked+span{background:var(--navy);color:#fff;border-color:var(--navy)}
.feed{max-height:380px;overflow-y:auto;text-align:left;margin-top:14px}
.msg{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--sky);border-radius:14px;padding:12px 14px;margin-bottom:10px;animation:pop .5s}
@keyframes pop{from{opacity:0;transform:scale(.95)}}
.msg b{font-size:14px}.msg em{font-size:11px;color:var(--mute);font-style:normal;margin-left:6px}.msg p{margin:4px 0 0;font-size:13px;white-space:pre-wrap;word-break:break-word}
.badge{font-size:10px;padding:2px 8px;border-radius:99px;background:var(--pastel);color:var(--navy);margin-left:6px}
.stat{font-size:12px;color:var(--mute);margin-top:8px;min-height:18px}

/* GALLERY */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gal div{aspect-ratio:1;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:30px;cursor:pointer;transition:transform .3s}
.gal div:nth-child(1),.gal div:nth-child(5){grid-column:span 2;grid-row:span 2}
.gal div:active{transform:scale(.96)}
.vid{aspect-ratio:16/9;border-radius:16px;margin-top:10px;background:linear-gradient(135deg,#14284b,#4d86c6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;gap:10px}
#lb{position:fixed;inset:0;background:rgba(8,16,34,.92);z-index:120;display:none;align-items:center;justify-content:center;font-size:120px}
footer{padding:50px 22px calc(90px + env(safe-area-inset-bottom,0px));background:var(--navy);color:#dbe9f7;text-align:center}
footer h2{color:#fff;font-family:'Great Vibes',cursive;font-weight:400;font-size:48px}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) footer h2{color:#fff}}
#toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);background:var(--navy);color:#fff;padding:10px 18px;border-radius:99px;font-size:13px;opacity:0;transition:.3s;z-index:130;pointer-events:none}
#toast.s{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01s!important}}

/* ===== RESPONSIF: HP, TABLET, DESKTOP ===== */
img,svg{max-width:100%}
body.lock{height:100vh;height:100dvh}
#cover{overflow-y:auto}
#hero{min-height:100vh;min-height:100svh}
section:not(#hero){display:flex;flex-direction:column;align-items:center}
section:not(#hero)>*{width:100%;max-width:560px}
section.wide:not(#hero)>*{max-width:860px}
#rsvp>.feed,#rsvp>.stat{max-width:760px}
.grid{display:block}
.gal div{min-width:0}

@media(max-width:380px){
 section{padding:54px 16px}
 h2{font-size:28px}
 .card{padding:18px 14px}
 .bank{flex-wrap:wrap}.bank .btn{margin-left:auto}
 .cd{gap:5px}.cd b{font-size:24px}
}
@media(max-height:560px){
 .env{height:140px;margin:10px 0}
 #cover .btn{margin-top:10px}
}
@media(min-width:700px){
 .tl{max-width:440px;margin-left:auto;margin-right:auto;transform:translateX(24px)}
}
@media(min-width:900px){
 body{font-size:16px}
 section{padding:96px 32px}
 h2{font-size:42px}
 .sub{font-size:14px}
 section:not(#hero)>.grid{max-width:1040px;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
 section:not(#hero)>.grid.g3{grid-template-columns:repeat(3,1fr)}
 .grid .card{margin:0 0 14px}
 .g3 .bank{flex-wrap:wrap;justify-content:center;text-align:center}
 .g3 .bank>div:nth-child(2){flex:1 1 100%}
 .g3 .bank .btn{margin:0 auto}
 section:not(#hero)>.cd{max-width:640px}
 .cd b{font-size:42px}.cd span{font-size:12px}
 .cal{font-size:15px}
 .photo{width:240px;height:300px;font-size:84px}
 #hero h1{font-size:120px}
 #hero .q{max-width:520px;font-size:15px}
 #hero p.rv{max-width:480px!important;font-size:15px!important}
 .gal{gap:14px}
 .card{padding:28px}
 .ev h3{font-size:30px}
 #rsvp .feed{max-height:460px}
 footer{padding:70px 32px 100px}
 footer p{max-width:620px;margin-left:auto;margin-right:auto}
 .btn:hover{filter:brightness(1.15);transform:translateY(-1px)}
 .btn{transition:.2s}
 .gal div:hover{transform:scale(1.03)}
 #player{right:24px;bottom:24px}
}
@media(min-width:1400px){
 section:not(#hero)>.grid{max-width:1180px}
}