:root{
  --navy:#21364d; --navy-d:#16263a; --ink:#2b3d52; --cream:#f7f5ed; --cream-2:#efebe0; --line:#ded9cb; --soft:#8a93a0;
  --serif:'Cormorant Garamond',Georgia,serif; --display:'Marcellus',Georgia,serif; --script:'Pinyon Script',cursive;
  --ease:cubic-bezier(.77,0,.18,1); --out:cubic-bezier(.16,1,.3,1);
  --col:min(100vw,560px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--navy-d);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.55;-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden;height:100vh;height:100dvh}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}

/* ---------- intro ---------- */
#intro{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#0e1724;overflow:hidden;transition:transform 1.9s var(--ease)}
#intro.leaving{transform:translateY(-100%)}
#intro.gone{display:none}
.intro-bg{position:absolute;top:-40px;right:-40px;bottom:-40px;left:-40px;background-size:cover;background-position:center;filter:blur(28px) brightness(.55) saturate(1.1);transform:scale(1.1)}
.intro-frame{cursor:pointer;-webkit-tap-highlight-color:transparent;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;height:100%;aspect-ratio:9/16;max-width:100%;overflow:hidden;box-shadow:0 0 80px rgba(0,0,0,.45)}
@media (max-aspect-ratio:9/16){.intro-frame{width:100%;height:auto;aspect-ratio:auto;top:0;right:0;bottom:0;left:0}}
@supports not (aspect-ratio:1){.intro-frame{width:calc(100vh * 9 / 16);max-width:100%}.gate-hit{height:44vw;max-height:30vh}.map{height:calc(var(--u)*270)}}
#film{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;background:#0e1724}
.gate-hit{position:absolute;left:50%;top:47%;width:44%;aspect-ratio:1;transform:translate(-50%,-50%);border:0;background:none;border-radius:50%;padding:0;transition:opacity .6s}
.gate-hit .ring{position:absolute;top:30%;right:30%;bottom:30%;left:30%;border-radius:50%;border:1.5px solid rgba(255,248,236,.85);box-shadow:0 0 30px rgba(255,236,200,.55),inset 0 0 18px rgba(255,236,200,.35);animation:pulse 2.4s var(--out) infinite}
.gate-hit .r2{animation-delay:1.2s}
@keyframes pulse{0%{transform:scale(.55);opacity:0}25%{opacity:1}100%{transform:scale(1.6);opacity:0}}
.intro-hint{position:absolute;left:0;right:0;bottom:9%;text-align:center;color:#fff8ee;text-shadow:0 2px 18px rgba(0,0,0,.55);pointer-events:none;transition:opacity .6s,transform .8s var(--out)}
.hint-line{display:block;font-family:var(--display);letter-spacing:.32em;text-transform:uppercase;font-size:13px;opacity:.9}
.hint-script{display:block;font-family:var(--script);font-size:46px;line-height:1.2;margin-top:4px}
.playing .gate-hit,.playing .intro-hint{opacity:0;pointer-events:none}
.playing .intro-hint{transform:translateY(20px)}
.intro-names{display:none}
.veil{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% 55%,rgba(255,250,240,0) 0%,rgba(255,250,240,0) 40%,rgba(247,245,237,0) 100%);pointer-events:none;opacity:0;transition:opacity 1.2s}
.skip{position:absolute;top:max(18px,env(safe-area-inset-top));right:18px;z-index:3;border:1px solid rgba(255,248,236,.55);background:rgba(15,24,38,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff8ee;border-radius:40px;padding:8px 18px 9px;font-family:var(--display);font-size:13px;letter-spacing:.18em;text-transform:uppercase;transition:background .3s,opacity .5s}
.skip:hover{background:rgba(15,24,38,.6)}
.leaving .skip{opacity:0}

/* sparkle seam while the intro lifts */
.seam{position:fixed;left:0;right:0;height:2px;z-index:60;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,244,222,.95),transparent);box-shadow:0 0 40px 12px rgba(255,236,200,.55);transition:top 1.9s var(--ease),opacity .6s}

/* ---------- sound ---------- */
.sound{position:fixed;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:40;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(247,245,237,.92);box-shadow:0 6px 24px rgba(20,30,45,.18);display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity .6s,transform .6s var(--out)}
.sound.show{opacity:1;transform:none}
.bars{display:flex;gap:3px;align-items:flex-end;height:16px}
.bars i{width:3px;height:100%;background:var(--navy);border-radius:2px;animation:eq 1s ease-in-out infinite}
.bars i:nth-child(2){animation-delay:.2s}.bars i:nth-child(3){animation-delay:.45s}.bars i:nth-child(4){animation-delay:.1s}
.sound.muted .bars i{animation:none;height:3px}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}

/* ---------- layout: every section is exactly one phone screen ---------- */
:root{--vh:100svh;--u:min(calc(var(--col) / 390), calc(var(--vh) / 844))}
@supports not (height:100svh){:root{--vh:100vh}}
html{scroll-snap-type:y mandatory}
body:not(.locked){overscroll-behavior-y:none}
main{position:relative;width:var(--col);margin:0 auto;background:var(--cream);box-shadow:0 0 120px rgba(0,0,0,.35);overflow:hidden}
body::before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;background:url(assets/final.jpg) center/cover;filter:blur(30px) brightness(.6);transform:scale(1.15)}
main>section,main>footer{position:relative;min-height:var(--vh);scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;justify-content:center;align-items:center}

/* ---------- invitation card ---------- */
.card{height:var(--vh);padding:calc(var(--u)*100) calc(var(--u)*20) calc(var(--u)*30);text-align:center;background:radial-gradient(ellipse at 50% 30%,#fbfaf4 0%,var(--cream) 60%);justify-content:flex-start}
.lily{position:absolute;top:0;width:calc(var(--u)*138);pointer-events:none;opacity:0}
.lily-l{left:0;transform-origin:20% 95%}
.lily-r{right:0;transform-origin:80% 95%}
.ornament{position:absolute;top:calc(var(--u)*16);left:50%;width:calc(var(--u)*140);transform:translateX(-50%);opacity:0}
.names{margin:0 auto;width:calc(var(--u)*300);position:relative;z-index:2;-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}
.names img{width:100%}
.framebox{position:relative;width:100%;margin:calc(var(--u)*6) 0 0;padding:calc(var(--u)*4) calc(var(--u)*8) calc(var(--u)*18);border:1px solid var(--line);border-top-color:transparent;border-radius:0 0 calc(var(--u)*22) calc(var(--u)*22);background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.35))}
.framebox::before{content:"";position:absolute;left:-1px;right:-1px;top:calc(var(--u)*-34);height:calc(var(--u)*50);border:1px solid var(--line);border-bottom:0;border-radius:calc(var(--u)*22) calc(var(--u)*22) 0 0;-webkit-mask-image:linear-gradient(transparent,#000);mask-image:linear-gradient(transparent,#000)}
.lead{font-family:var(--display);font-size:calc(var(--u)*21);line-height:1.3;color:#3a4b5f;margin:calc(var(--u)*14) 0 calc(var(--u)*16)}
.families{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*8);font-family:var(--display);font-size:calc(var(--u)*16.5);color:#3a4b5f;line-height:1.3}
.families div{display:flex;flex-direction:column}
.families em{font-family:var(--serif);font-style:italic;font-size:1.1em;padding:0 3px}
.date{margin:calc(var(--u)*16) 0 calc(var(--u)*10);font-family:var(--display);color:var(--navy)}
.date .month,.date .year{font-size:calc(var(--u)*27);letter-spacing:.02em;line-height:1.2}
.date .row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:calc(var(--u)*10)}
.date .side{font-size:calc(var(--u)*20);padding:calc(var(--u)*5) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.date .day{font-family:var(--serif);font-weight:300;font-size:calc(var(--u)*96);line-height:.9}
.venue{font-family:var(--display);font-size:calc(var(--u)*17.5);line-height:1.35;margin:calc(var(--u)*10) 0 0;color:#3a4b5f}
.venue span{font-size:.92em}
.quote{margin:calc(var(--u)*14) calc(var(--u)*6) 0;font-style:italic;font-size:calc(var(--u)*12.5);color:var(--soft);line-height:1.45}
.scroll-cue{position:absolute;left:0;right:0;bottom:calc(var(--u)*10 + env(safe-area-inset-bottom));margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*4);color:var(--soft);font-family:var(--display);font-size:calc(var(--u)*9.5);letter-spacing:.35em;text-transform:uppercase}
.scroll-cue i{width:1px;height:calc(var(--u)*22);background:linear-gradient(var(--soft),transparent);animation:cue 1.8s var(--out) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* card entrance (after the film) */
.open .lily-l{animation:lilyIn 2.2s var(--out) .2s forwards}
.open .lily-r{animation:lilyInR 2.2s var(--out) .35s forwards}
.open .ornament{animation:fade 1.6s ease .9s forwards}
.open .names{animation:write 2.4s cubic-bezier(.45,.05,.3,1) .7s forwards}
@keyframes lilyIn{0%{opacity:0;transform:rotate(-14deg) scale(.82)}100%{opacity:1;transform:none}}
@keyframes lilyInR{0%{opacity:0;transform:rotate(14deg) scale(.82)}100%{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
@keyframes write{to{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}
.lily-l.sway{animation:swayL 7s ease-in-out infinite}
.lily-r.sway{animation:swayR 7.6s ease-in-out infinite}
@keyframes swayL{0%,100%{opacity:1;transform:rotate(0)}50%{opacity:1;transform:rotate(-1.6deg)}}
@keyframes swayR{0%,100%{opacity:1;transform:rotate(0)}50%{opacity:1;transform:rotate(1.6deg)}}

.reveal{opacity:0;transform:translateY(calc(var(--u)*22));filter:blur(4px);transition:opacity 1.1s var(--out),transform 1.1s var(--out),filter 1.1s var(--out)}
.reveal.in{opacity:1;transform:none;filter:none}

/* ---------- blocks ---------- */
.block{padding:calc(var(--u)*34 + env(safe-area-inset-top)) calc(var(--u)*24) calc(var(--u)*34 + env(safe-area-inset-bottom));text-align:center;border-top:1px solid rgba(222,217,203,.6)}
.block:nth-of-type(odd){background:var(--cream-2)}
.block>*{width:100%}
.divider img{width:calc(var(--u)*130);margin:0 auto calc(var(--u)*2);opacity:.9}
.script{font-family:var(--script);font-weight:400;font-size:calc(var(--u)*50);line-height:1.1;color:var(--navy);margin:0 0 calc(var(--u)*12)}
.sub{max-width:calc(var(--u)*340);margin:0 auto calc(var(--u)*18);font-size:calc(var(--u)*17);line-height:1.45;color:#4a5a6c}
.place{font-family:var(--display);font-size:calc(var(--u)*19);line-height:1.4;margin:0 0 calc(var(--u)*8)}
.place strong{font-weight:400;font-size:1.12em;color:var(--navy)}
.when{font-family:var(--display);color:var(--navy);font-size:calc(var(--u)*22);margin:0 0 calc(var(--u)*8);letter-spacing:.06em}
.loc{margin:0 0 calc(var(--u)*14);font-size:calc(var(--u)*16);color:#4a5a6c}
.loc span{display:block;font-family:var(--display);font-size:calc(var(--u)*11);letter-spacing:.28em;text-transform:uppercase;color:var(--soft);margin-bottom:2px}

.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*8);max-width:calc(var(--u)*340);margin:calc(var(--u)*4) auto calc(var(--u)*26)}
.countdown div{background:var(--cream);border:1px solid var(--line);border-radius:calc(var(--u)*14);padding:calc(var(--u)*14) 2px calc(var(--u)*10);box-shadow:0 8px 24px rgba(33,54,77,.06)}
.countdown b{display:block;font-family:var(--serif);font-weight:300;font-size:calc(var(--u)*38);line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.countdown span{display:block;margin-top:calc(var(--u)*5);font-family:var(--display);font-size:calc(var(--u)*9.5);letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}

.btns{display:flex;flex-wrap:wrap;gap:calc(var(--u)*9);justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:calc(var(--u)*44);padding:calc(var(--u)*10) calc(var(--u)*20);border-radius:40px;border:1px solid var(--navy);background:var(--navy);color:#f7f5ed;text-decoration:none;font-family:var(--display);font-size:calc(var(--u)*12.5);letter-spacing:.14em;text-transform:uppercase;transition:transform .25s var(--out),box-shadow .25s,background .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(33,54,77,.22)}
.btn.ghost{background:transparent;color:var(--navy)}
.btn.solid{width:100%;max-width:calc(var(--u)*340)}
.map{margin:0 auto calc(var(--u)*16);width:100%;max-width:calc(var(--u)*342);height:calc(var(--u)*270);border-radius:calc(var(--u)*18);overflow:hidden;border:1px solid var(--line);box-shadow:0 14px 34px rgba(33,54,77,.12);background:var(--cream)}
.map iframe{width:100%;height:100%;border:0;filter:saturate(.75) sepia(.12)}

/* ---------- forms ---------- */
form{max-width:calc(var(--u)*342);margin:0 auto;text-align:left}
.hp{position:absolute;left:-9999px}
.field{display:block;margin:0 0 calc(var(--u)*11);border:0;padding:0}
.field>span,legend,.field.two label span{display:block;font-family:var(--display);font-size:calc(var(--u)*11);letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin:0 0 calc(var(--u)*5)}
.field small{text-transform:none;letter-spacing:0;font-family:var(--serif);font-size:calc(var(--u)*13)}
.field.two{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*10)}
input,textarea{width:100%;font:inherit;font-size:max(16px,calc(var(--u)*17));color:var(--ink);background:var(--cream);border:1px solid var(--line);border-radius:calc(var(--u)*12);padding:calc(var(--u)*9) calc(var(--u)*12);outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none}
input:focus,textarea:focus{border-color:var(--navy);box-shadow:0 0 0 4px rgba(33,54,77,.08)}
textarea{resize:none}
.choice{display:grid;gap:calc(var(--u)*8)}
.opt{position:relative;display:block}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{display:flex;flex-direction:column;padding:calc(var(--u)*10) calc(var(--u)*14) calc(var(--u)*10) calc(var(--u)*46);border:1px solid var(--line);border-radius:calc(var(--u)*14);background:var(--cream);transition:all .25s var(--out);position:relative}
.opt span::before{content:"";position:absolute;left:calc(var(--u)*15);top:50%;width:calc(var(--u)*18);height:calc(var(--u)*18);margin-top:calc(var(--u)*-9);border-radius:50%;border:1.5px solid var(--soft);transition:all .25s}
.opt b{font-family:var(--display);font-weight:400;font-size:calc(var(--u)*17);color:var(--navy)}
.opt small{color:var(--soft);font-size:calc(var(--u)*13.5)}
.opt input:checked+span{border-color:var(--navy);box-shadow:0 10px 26px rgba(33,54,77,.12);transform:translateY(-1px)}
.opt input:checked+span::before{border-color:var(--navy);background:radial-gradient(circle,var(--navy) 0 45%,transparent 50%)}
.count{display:flex;align-items:center;justify-content:space-between;gap:12px}
.count>span{margin:0}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:40px;background:var(--cream);overflow:hidden}
.stepper button{width:calc(var(--u)*42);height:calc(var(--u)*42);border:0;background:none;font-size:calc(var(--u)*20);color:var(--navy)}
.stepper input{width:calc(var(--u)*40);border:0;background:none;text-align:center;padding:0}
.error{color:#9b3b3b;font-size:calc(var(--u)*15);margin:0 0 calc(var(--u)*10)}
#rsvp .btn.solid,#memory .btn.solid{display:flex;margin:calc(var(--u)*4) auto 0}
.thanks{max-width:calc(var(--u)*340);margin:0 auto;padding:calc(var(--u)*20);animation:fadeUp 1s var(--out)}
.thanks img{width:70%;margin:0 auto 6px}
.thanks p{margin:0}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ---------- footer ---------- */
.end{height:var(--vh);text-align:center;background:var(--navy-d);color:#efeadf;justify-content:flex-start;padding:0 0 calc(var(--u)*20 + env(safe-area-inset-bottom))}
.end-img{position:relative;width:100%;flex:1 1 auto;min-height:0;overflow:hidden}
.end-img img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.end-img::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(transparent 60%,var(--navy-d))}
.closing{max-width:calc(var(--u)*330);margin:calc(var(--u)*6) auto calc(var(--u)*10);padding:0 calc(var(--u)*10);font-family:var(--serif);font-style:italic;font-size:calc(var(--u)*22);line-height:1.4;color:#f3efe4}
.end .small{font-family:var(--display);letter-spacing:.22em;font-size:calc(var(--u)*11.5);text-transform:uppercase;opacity:.7;margin:0 0 calc(var(--u)*16)}
.replay{border:1px solid rgba(243,239,228,.4);background:none;color:#f3efe4;border-radius:40px;padding:calc(var(--u)*9) calc(var(--u)*20);font-family:var(--display);font-size:calc(var(--u)*11);letter-spacing:.2em;text-transform:uppercase}

.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);background:var(--navy);color:#f7f5ed;padding:12px 22px;border-radius:30px;font-family:var(--display);font-size:14px;letter-spacing:.08em;opacity:0;pointer-events:none;transition:all .4s var(--out);z-index:70}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- memories ---------- */
.eyebrow{font-family:var(--display);font-size:calc(var(--u)*11.5);letter-spacing:.32em;text-transform:uppercase;color:var(--soft);margin:0 0 calc(var(--u)*2)}
#memory{max-width:calc(var(--u)*342);margin:0 auto;text-align:left}
.drop{position:relative;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*2);padding:calc(var(--u)*14) calc(var(--u)*14);margin:0 0 calc(var(--u)*10);border:1.5px dashed #b9b3a3;border-radius:calc(var(--u)*18);background:var(--cream);color:var(--navy);text-align:center;cursor:pointer;transition:border-color .25s,background .25s,transform .25s var(--out)}
.drop:hover,.drop.over{border-color:var(--navy);background:#fbfaf5}
.drop input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}
.drop b{font-family:var(--display);font-weight:400;font-size:calc(var(--u)*17)}
.drop small{color:var(--soft);font-size:calc(var(--u)*13.5)}
.drop-icon svg{width:calc(var(--u)*34);height:calc(var(--u)*34)}
.drop-icon{color:var(--navy);opacity:.8}
.thumbs{list-style:none;margin:0 0 calc(var(--u)*10);padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:calc(var(--u)*6)}
.thumbs:empty{display:none}
.thumbs li{position:relative;aspect-ratio:1;border-radius:calc(var(--u)*10);overflow:hidden;background:#e4dfd2;animation:fadeUp .5s var(--out)}
.thumbs img,.thumbs video{width:100%;height:100%;object-fit:cover;display:block}
.thumbs .vid{position:absolute;left:4px;bottom:4px;background:rgba(22,38,58,.75);color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;font-family:var(--display);letter-spacing:.06em}
.thumbs .rm{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(22,38,58,.7);color:#fff;font-size:14px;line-height:1}
.thumbs .st{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:rgba(247,245,237,.55);color:var(--navy);font-family:var(--display);font-size:12px;opacity:0;transition:opacity .3s}
.thumbs li.up .st,.thumbs li.ok .st,.thumbs li.bad .st{opacity:1}
.thumbs li.ok .st{background:rgba(33,54,77,.45);color:#fff;font-size:20px}
.thumbs li.bad .st{background:rgba(155,59,59,.55);color:#fff}
.upbar{position:relative;height:calc(var(--u)*30);border-radius:20px;background:#e4dfd2;overflow:hidden;margin:0 0 calc(var(--u)*10)}
.upbar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#2b4660,var(--navy));transition:width .3s}
.upbar span{position:relative;display:block;text-align:center;line-height:calc(var(--u)*30);font-family:var(--display);font-size:calc(var(--u)*12);letter-spacing:.1em;color:#fff;mix-blend-mode:difference}
#memThanks .btn{margin-top:calc(var(--u)*16)}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}.names{clip-path:none}.lily,.ornament{opacity:1}}
[hidden]{display:none!important}

/* safety net: if the script fails, show the invitation directly */
.no-intro #intro{display:none}
.no-intro .lily,.no-intro .ornament{opacity:1}
.no-intro .names{-webkit-clip-path:none;clip-path:none}
.no-intro .reveal{opacity:1;transform:none;filter:none}