/* Levi & Billy — v8 */
:root{
 --ink:#2B1700;--cream:#FBF7EC;--cream2:#F4EEDF;
 --script:'Pinyon Script',cursive;
 --serif:'Times New Roman',Times,Tinos,serif;
 --ease:cubic-bezier(.22,.8,.24,1);
 --sh:0 1px 1px rgba(43,23,0,.10),0 4px 10px rgba(43,23,0,.10),0 18px 30px -12px rgba(43,23,0,.25);
 --paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fbfbfa url(img/paper.jpg) repeat;background-size:540px auto;color:var(--ink);font:400 17px/1.6 var(--serif);-webkit-font-smoothing:antialiased}
body.intro-on{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ol,ul,figure{margin:0;padding:0}
.script{font-family:var(--script);font-weight:400;line-height:1}
.caps{font-family:var(--serif);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--ink);color:#fff;border:0;border-radius:6px;padding:13px 34px;font:400 .74rem/1 var(--serif);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background .2s,transform .2s}
.btn:hover{background:#432608}
.btn.light{background:#FBF7EC;color:var(--ink)}
/* ---------- photo stamps (from v7) ---------- */
.stamp-pos{position:absolute;display:block;transform:rotate(var(--r,3deg));filter:drop-shadow(0 1px 1px rgba(30,15,0,.28)) drop-shadow(0 3px 5px rgba(30,15,0,.18))}
.stamp{display:block;width:80px;height:100px;padding:7px;background:var(--paper),#FCFBF7;
 -webkit-mask:radial-gradient(circle at 5px 5px,transparent 2.7px,#000 3.1px) -5px -5px/10px 10px,linear-gradient(#000 0 0) 3px 3px/calc(100% - 6px) calc(100% - 6px) no-repeat;
 mask:radial-gradient(circle at 5px 5px,transparent 2.7px,#000 3.1px) -5px -5px/10px 10px,linear-gradient(#000 0 0) 3px 3px/calc(100% - 6px) calc(100% - 6px) no-repeat}
.stamp-face{position:relative;display:block;height:100%;overflow:hidden;outline:1px solid rgba(43,23,0,.55);outline-offset:2px;background:#ddd}
.stamp-face img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:saturate(.8) sepia(.12)}
.st-val{position:absolute;right:4px;top:3px;font:700 11px/1 var(--serif);color:#fff;text-shadow:0 0 3px rgba(0,0,0,.6)}
.st-lb{position:absolute;left:4px;bottom:3px;font:400 7px/1 var(--serif);letter-spacing:.18em;font-style:normal;color:#fff;text-shadow:0 0 3px rgba(0,0,0,.6)}
.postmark{position:absolute;width:150px;left:30px;top:20px;color:rgba(43,23,0,.62);transform:rotate(-8deg);pointer-events:none;mix-blend-mode:multiply}

/* ---------- INTRO ---------- */
.intro{position:fixed;inset:0;z-index:50;background:#fbfbfa url(img/paper.jpg) repeat;background-size:540px auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;overflow:hidden;transition:opacity .8s var(--ease)}
body:not(.intro-on) .intro{display:none}
.intro.done{opacity:0;pointer-events:none}
.splash{position:relative;width:min(78vw,480px);aspect-ratio:1.48;border:0;padding:0;background:none;cursor:pointer;perspective:1400px;font:inherit;
 transition:transform 1s var(--ease) 1.1s,opacity .8s ease 1.3s}
.sp-body{position:absolute;inset:0;z-index:2;border-radius:2px;background:var(--paper),linear-gradient(160deg,#3E2A14,#2B1700 60%,#241300);
 box-shadow:0 1px 1px rgba(0,0,0,.25),0 4px 8px -2px rgba(40,25,20,.25),0 30px 44px -18px rgba(40,25,20,.5)}
.sp-body::before{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent 49.6%,rgba(255,255,255,.05) 50%,transparent 50.6%),linear-gradient(to top left,transparent 49.6%,rgba(0,0,0,.18) 50%,transparent 50.6%)}
.sp-flap{position:absolute;left:0;right:0;top:0;height:56%;z-index:4;transform-origin:50% 0;transition:transform 1s var(--ease) .15s;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4)) drop-shadow(0 6px 8px rgba(0,0,0,.18))}
.sp-flap::before{content:"";position:absolute;inset:0;background:var(--paper),linear-gradient(180deg,#3A2610,#2B1700);clip-path:polygon(0 0,100% 0,52% 96%,50% 100%,48% 96%)}
.sp-liner{position:absolute;left:0;right:0;bottom:99.6%;height:56%;z-index:1;background:var(--paper),#F4EEDF;clip-path:polygon(0 100%,50% 0,100% 100%);opacity:0;transition:opacity .15s .5s}
.sp-seal{position:absolute;z-index:6;width:15%;left:42.5%;top:45%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4));transition:opacity .3s}
.sp-st1{z-index:6;right:5%;top:8%;--r:4deg}
.sp-st2{z-index:6;right:calc(5% + 92px);top:10%;--r:-5deg}
.sp-bouquet{position:absolute;z-index:7;width:40%;left:-9%;top:-30%;transform:rotate(-8deg);pointer-events:none;filter:drop-shadow(0 6px 8px rgba(30,15,0,.28));transition:opacity .5s}
.intro.opening .sp-flap{transform:rotateX(180deg)}
.intro.opening .sp-liner{opacity:1}
.intro.opening .sp-seal,.intro.opening .sp-bouquet,.intro.opening .sp-ring{opacity:0}
.intro.opening .splash{transform:translateY(70vh) rotate(4deg);opacity:0}
.sp-under{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:clamp(30px,6vh,54px);transition:opacity .5s}
.sp-invited{font-size:clamp(2.4rem,8vw,3.4rem)}
.sp-to{margin-top:14px;font-size:.76rem}
.sp-names{font-size:clamp(3rem,10vw,4.4rem);margin-top:8px;line-height:1.1}
.sp-date{margin-top:10px;font-size:.76rem}
.intro-cta{margin-top:clamp(20px,4vh,36px);opacity:.6;font-size:.64rem;letter-spacing:.3em;animation:pulse 2.4s ease-in-out infinite}
.intro.opening .sp-under,.intro.opening .intro-cta{opacity:0;animation:none}
@keyframes pulse{50%{opacity:.25}}
@media (max-width:560px){.stamp{width:50px;height:60px;padding:5px}.sp-st2{right:calc(5% + 58px)}.postmark{width:100px;left:18px;top:14px}.st-val{font-size:9px}.st-lb{font-size:5.5px}
 .sp-bouquet{width:46%;left:-10%;top:-46%}}

/* ---------- VIEWS ---------- */
.view{display:none;opacity:0;transition:opacity .45s var(--ease)}
.view.shown{display:block}
.view.active{opacity:1}

/* ---------- HOME BOARD ---------- */
.board{position:relative;width:100%;max-width:620px;margin:0 auto;container-type:inline-size;height:214cqw;overflow:hidden}
.pc{position:absolute;left:calc(var(--x)*1cqw);top:calc(var(--y)*1cqw);width:calc(var(--w)*1cqw);transform:rotate(var(--r,0deg));z-index:var(--z,1);
 opacity:0;translate:0 14px;transition:opacity .8s var(--ease),translate .8s var(--ease),transform .4s var(--ease);transition-delay:calc(var(--i,0)*90ms + .1s)}
#home.active .pc{opacity:1;translate:0 0}
a.pc:hover{transform:rotate(var(--r,0deg)) scale(1.02)}

.pola{background:#fff;padding:3.2% 3.2% 0;box-shadow:var(--sh)}
.pola img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.pola figcaption{text-align:center;font-size:clamp(1.1rem,5cqw,1.9rem);padding:2% 0 4%;color:var(--ink)}
.p1{--x:5;--y:-4;--w:40;--r:-3deg;--z:2}
.p2{--x:54;--y:132;--w:44;--r:5deg;--z:3}

.card{--x:51;--y:2;--w:52;--r:4deg;--z:3;aspect-ratio:200/260;filter:drop-shadow(0 1px 1px rgba(43,23,0,.12)) drop-shadow(0 12px 16px rgba(43,23,0,.18))}
.card svg{position:absolute;inset:0;width:100%;height:100%}
.c-fill{fill:var(--cream)}.c-line{fill:none;stroke:var(--ink);stroke-width:.7}
.card-in{position:absolute;inset:19% 22% 22%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4.2cqw}
.c-k{font-size:1.85cqw;line-height:1.6}
.c-names{font-size:7.6cqw;line-height:1.05}.c-names span{font-size:.8em}
.c-date{font-size:1.85cqw;line-height:1.75}

.flower{--x:-2;--y:33;--w:64;--r:-4deg;--z:4;aspect-ratio:1;filter:drop-shadow(0 2px 2px rgba(43,23,0,.2)) drop-shadow(0 14px 18px rgba(43,23,0,.22))}
.flower svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--ink)}
.fl-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#FBF7EC;gap:1.6cqw}
.fl-t{font-size:12cqw;transform:rotate(-8deg)}
.ill-w{width:11cqw;filter:brightness(0) invert(1);opacity:.95}
.fl-c{font-size:2.5cqw;letter-spacing:.18em}

.feature{--x:56;--y:66;--w:46;--r:5deg;--z:3;filter:drop-shadow(0 1px 1px rgba(43,23,0,.12)) drop-shadow(0 12px 16px rgba(43,23,0,.16))}
.feature>img:first-child{width:100%}

.kenv{--x:1;--y:92;--w:72;--r:-5deg;--z:5;aspect-ratio:1.5;filter:drop-shadow(0 1px 1px rgba(43,23,0,.14)) drop-shadow(0 14px 18px rgba(43,23,0,.2))}
.kenv svg{position:absolute;inset:0;width:100%;height:100%}
.ke-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:9%;gap:3cqw}
.ke-t{font-size:11cqw;text-align:center;line-height:.95;transform:rotate(-6deg)}
.ke-c{font-size:2.5cqw}

.arch{--x:7;--y:148;--w:50;--r:-2deg;--z:4;aspect-ratio:.72;background:var(--ink);border-radius:999px 999px 0 0;box-shadow:var(--sh);overflow:hidden}
.arch-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#FBF7EC;gap:3cqw;padding-top:10%}
.arch-t{font-size:12cqw}
.arch-c{font-size:2.5cqw}
.sprig{--x:10.6;--y:137.2;--w:22;--r:0deg;--z:6;pointer-events:none;filter:drop-shadow(0 6px 6px rgba(30,15,0,.25))}

@media (min-width:900px){
 #home{--bw:min(100vw,1040px);--mt:max(0px,calc((100svh - var(--bw)*.5529)/2 - var(--bw)*.0144));padding-top:var(--mt)}
 .board{max-width:1040px;height:max(calc(var(--bw)*.58),calc(100svh - var(--mt)));translate:-1.5px 0}
 .p1{--x:13;--y:3;--w:15;--r:-6deg;--z:5}
 .flower{--x:23;--y:6;--w:26;--r:-4deg}
 .card{--x:46;--y:2;--w:22;--r:3deg}
 .feature{--x:65;--y:5;--w:22;--r:6deg;--z:2}
 .p2{--x:68;--y:27;--w:15;--r:6deg;--z:4}
 .kenv{--x:40;--y:28;--w:30;--r:-3deg}
 .arch{--x:21;--y:30;--w:19;--r:-2deg}
 .sprig{--x:21.7;--y:24.5;--w:8.2;--r:0deg}
 .c-k,.c-date{font-size:.78cqw}.c-names{font-size:3.2cqw}.card-in{gap:1.65cqw}
 .fl-t{font-size:5.2cqw}.ill-w{width:4.7cqw}.fl-c,.ke-c,.arch-c{font-size:1.05cqw}.fl-in{gap:.7cqw}
 .ke-t{font-size:4.9cqw}.ke-in{gap:1.3cqw}
 .arch-t{font-size:4.9cqw}.arch-in{gap:1.3cqw}
 .pc.pola{padding:.6cqw .6cqw 0;margin:0}
 .pola img{aspect-ratio:4/5}
 .pola figcaption{font-size:1.5cqw;padding:.7cqw 0 1cqw;line-height:1}
}

/* finale */
.finale{position:relative;height:100svh;min-height:520px;overflow:hidden}
.finale img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.8)}
.fin-in{position:absolute;inset:auto 0 12% 0;display:flex;flex-direction:column;align-items:center;color:#fff;gap:14px;text-align:center}
.fin-names{font-size:clamp(3.4rem,11vw,6rem);text-shadow:0 2px 20px rgba(0,0,0,.3)}
.fin-date{font-size:.8rem}

/* ---------- PAGES ---------- */
.page{padding:22px 22px 110px}
.back{display:inline-block;font-size:.68rem;padding:6px 0;opacity:.85}
.p-head{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:20px}
.head-ill{width:120px;margin-bottom:6px}
.head-ill.sm{width:64px;margin:14px 0 6px}
.p-title{font-size:clamp(3.6rem,13vw,5.6rem);line-height:1.1}
.p-body{max-width:620px;margin:0 auto;text-align:center}
.sub{font-size:clamp(2.6rem,9vw,3.4rem);margin:64px 0 18px;line-height:1.1}
.p-body .sub:first-child{margin-top:34px}
.lbl{font-size:.7rem;margin-top:22px;letter-spacing:.22em}
.val{font-size:.96rem;opacity:.92;margin-top:4px;line-height:1.55}
.tlink{display:inline-block;margin-top:12px;font-size:.66rem;border-bottom:1px solid rgba(43,23,0,.4);padding-bottom:2px}
.zig{list-style:none;position:relative;max-width:520px;margin:10px auto 0;padding:6px 0 10px}
.zig li{display:flex;flex-direction:column;align-items:center;padding:14px 0;width:50%;box-sizing:border-box;position:relative;opacity:.35;transition:opacity .6s ease}
.zig li:nth-child(odd){padding-right:28px}
.zig li:nth-child(even){margin-left:50%;padding-left:28px}
.zig li+li{margin-top:-44px}
.zig::before,.zig::after{content:"";position:absolute;left:50%;top:0;width:1.5px;margin-left:-.75px;background:var(--ink);border-radius:1px}
.zig::before{bottom:0;opacity:.14}
.zig::after{height:calc(var(--fill,0) * 100%)}
.zig li::after{content:"";position:absolute;top:35px;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid rgba(43,23,0,.45);background:#fbfaf6;transition:background .4s,border-color .4s,transform .4s}
.zig li:nth-child(odd)::after{right:-5.5px}
.zig li:nth-child(even)::after{left:-5.5px}
.zig li.on{opacity:1}
.zig li.on::after{background:var(--ink);border-color:var(--ink);transform:scale(1.15)}
@media (prefers-reduced-motion:reduce){.zig li{opacity:1;transition:none}.zig li::after{background:var(--ink);border-color:var(--ink)}.zig::after{height:100%}}
.zig .ill{width:62px;height:56px;object-fit:contain;margin-bottom:8px}
.zig time{font-size:.68rem}
.zig p{font-size:.98rem;font-style:italic}
.zig .tbc time{opacity:.6}
.note{font-size:.88rem;font-style:italic;opacity:.75;margin-top:78px}
.list+.note{margin-top:18px}
.prose{font-size:1rem;line-height:1.7;max-width:520px;margin:0 auto}
.prose.c{margin-top:8px;max-width:340px}
.list{list-style:none;max-width:460px;margin:8px auto 0;border-top:1px solid rgba(43,23,0,.18)}
.list li{border-bottom:1px solid rgba(43,23,0,.18)}
.list a{display:flex;flex-direction:column;align-items:center;padding:14px 6px;gap:3px;transition:background .2s}
.list a:hover{background:rgba(43,23,0,.03)}
.l-n{font-size:1.06rem}
.l-m{font-size:.62rem;opacity:.8}
.l-d{font-size:.9rem;font-style:italic;opacity:.85}
.cta{margin-top:70px;display:flex;flex-direction:column;align-items:center;gap:22px}
.cta-t{font-size:clamp(2.2rem,8vw,3rem);line-height:1.15}

/* RSVP */
.rsvp-pola{width:150px;transform:rotate(-3deg);margin-bottom:22px}
.reply{margin:18px 0 0;font-size:.82rem;font-weight:700}
.reply strong{white-space:nowrap}
.tbc-tag{opacity:.7}
.form-wrap{margin-top:40px;text-align:left;max-width:520px;scroll-margin-top:20px}
#rsvp-form{scroll-margin-top:20px}
.field{display:block;margin-bottom:18px}
.field>span,legend{display:block;margin-bottom:7px;font-size:.66rem}
input[type=text],input[type=email],textarea{width:100%;border:1px solid rgba(43,23,0,.35);border-radius:6px;background:#fff;padding:12px 13px;font:400 1rem var(--serif);color:var(--ink)}
input:focus,textarea:focus{outline:2px solid rgba(43,23,0,.35);outline-offset:1px}
fieldset{border:0;padding:0;margin:0 0 18px}
.choices{display:grid;gap:8px}.choices.two{grid-template-columns:1fr 1fr}.choices.four{grid-template-columns:1fr 1fr}
.opt{position:relative;cursor:pointer}
.opt input{position:absolute;opacity:0}
.opt span{display:block;text-align:center;border:1px solid rgba(43,23,0,.35);border-radius:6px;background:#fff;padding:11px 8px;font-size:.95rem;transition:all .2s}
.opt input:checked+span{background:var(--ink);color:#fff;border-color:var(--ink)}
.opt input:focus-visible+span{outline:2px solid rgba(43,23,0,.4)}
.diet.hide{display:none}
.error{color:#8a2a10;min-height:1.2em;font-size:.9rem;margin-bottom:8px}
.send{display:block;width:auto;margin:0 auto;padding:14px 40px;border-radius:6px}
.thanks{text-align:center;padding:30px 0}.thanks h3{font-size:3.2rem;margin-bottom:14px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.signoff{font-size:2rem;margin-top:28px;text-align:center}
.stamps{display:flex;justify-content:center;align-items:flex-start;margin:36px auto 8px;max-width:460px}
.stp{width:32%;margin:0 -2.5%;text-align:center}
.stp img{width:100%;display:block}
.stp figcaption{font-size:.62rem;margin-top:10px;color:var(--ink)}
.s1{transform:rotate(-6deg) translateY(6px)}.s2{transform:rotate(2deg);z-index:1}.s3{transform:rotate(7deg) translateY(10px)}
#details .head-ill{width:min(520px,88%)}
button,input,select,textarea,input::placeholder,textarea::placeholder{font-family:var(--serif)}
.sub.getting{line-height:1.1}
.sp-ring{position:absolute;z-index:6;width:27%;aspect-ratio:1;left:50%;top:56.1%;translate:-50% -50%;transition:opacity .3s}
.sp-ring svg{width:100%;height:100%;display:block;overflow:visible;animation:ringspin 20s linear infinite}
.sp-ring text{fill:#FFFDF7;font-family:var(--serif);font-size:8.2px;letter-spacing:.12em;text-shadow:0 1px 2px rgba(0,0,0,.35)}
@keyframes ringspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sp-ring svg{animation:none}}
.zig p.lh1{line-height:1}
@media (min-width:701px){.pola.rsvp-pola{padding:7px 7px 26px;margin:0 0 22px}}
@media (max-width:700px){.pola.rsvp-pola{padding:7px 7px 24px;margin:0 0 26px}}