@font-face{font-family:Script;src:url(assets/script.ttf)}@font-face{font-family:Body;src:url(assets/body.ttf)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#ebe7df;color:#4c473f;font-family:Body,sans-serif;font-size:15px;line-height:1.9}button,a,input{ -webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer;font:inherit}a{color:inherit;text-decoration:none}main{max-width:600px;margin:auto;background:#fffefa;overflow:hidden;box-shadow:0 0 90px #6b645414}h1,h2,.hosts,.footer-monogram{font-family:Script,cursive;font-weight:400}h2{font-size:42px;line-height:1.5;margin:18px 0 26px}p{margin:18px 0}.eyebrow{font-size:10px;letter-spacing:2.7px;font-weight:500}section{text-align:center;padding:80px 38px}.hero{height:850px;max-height:115svh;min-height:710px;position:relative}.hero>img{width:100%;height:69%;object-fit:cover;object-position:50% 30%}.hero:after{content:"";position:absolute;inset:35% 0 20%;background:linear-gradient(transparent,#fffefa 85%);pointer-events:none}.hero-copy{position:absolute;z-index:1;top:50%;width:100%;text-align:center}.hero-copy .eyebrow{font-size:9px}h1{font-size:70px;line-height:1.2;margin:25px 0}h1 span{display:block}h1 i{display:block;font:italic 30px Georgia;margin:10px;color:#a99576}.date{letter-spacing:4px;font-size:14px}.down{display:inline-block;font-size:24px;padding:5px 25px}.welcome{padding-top:32px}.welcome p{line-height:2.1}.welcome strong{font-weight:500}.fine-line{height:1px;background:#b9ab92;width:40px;margin:40px auto}.hosts{font-size:29px}.calendar-section{background:#f5f1e9}.month{letter-spacing:2px;font-size:14px}.calendar{display:grid;grid-template-columns:repeat(7,1fr);max-width:350px;margin:26px auto;gap:8px 0}.calendar span{height:38px;display:flex;align-items:center;justify-content:center;font-size:13px}.calendar .day-label{font-size:10px;color:#8d8477}.calendar .selected{border:1px solid #ae8c60;border-radius:50%;width:38px;justify-self:center;background:#fff9ed}.outline{display:inline-block;border:1px solid #a89b87;padding:14px 25px;font-size:11px;letter-spacing:1px;background:transparent;min-height:48px}.time{font-size:12px}.photo-break{height:470px;position:relative}.photo-break img{width:100%;height:100%;object-fit:cover;object-position:center 43%}.photo-break:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,#29271c78)}.photo-break p{position:absolute;bottom:30px;text-align:center;width:100%;z-index:1;color:white;font-family:Script;font-size:35px;line-height:1.6}.program h2{font-size:36px}.schedule{max-width:380px;margin:40px auto 0;text-align:left}.schedule>div{display:flex;gap:25px;position:relative;padding-bottom:32px}.schedule>div:before{content:"";position:absolute;left:75px;top:18px;bottom:-15px;border-left:1px solid #d7cab6}.schedule>div:last-child:before{display:none}.schedule time{font-family:Script;font-size:22px;width:64px;flex-shrink:0}.schedule p{margin:4px 0;font-size:13px;padding-left:15px}.schedule small{display:block;color:#8f877a;font-size:10px;margin-top:7px}.venue{background:#f5f1e9}.venue h2{font-size:40px}.venue-rule{width:80px;height:1px;background:#b5a58b;margin:auto}.venue p{margin:30px auto}.countdown-section{padding-bottom:45px}.countdown{display:flex;justify-content:center;gap:24px}.countdown b{font:32px Georgia;display:block}.countdown span{font-size:9px;letter-spacing:1px}.rsvp h2{font-size:36px}.rsvp>p{font-size:12px}form{text-align:left;max-width:370px;margin:32px auto}form>label,legend{font-size:11px}input[type=text],input:not([type]){width:100%;border:0;border-bottom:1px solid #bbae98;padding:15px 0;background:transparent;font:14px Body;border-radius:0}fieldset{border:0;padding:24px 0;margin:0}legend{padding-top:25px}fieldset label{display:flex;align-items:center;gap:10px;min-height:48px;font-size:12px}input[type=radio]{accent-color:#887255;width:18px;height:18px}.submit{background:#746651;color:#fff;border:0;padding:17px 10px;width:100%;font-size:12px}.form-note{font-size:10px;line-height:1.7;color:#948b7e}footer{text-align:center;padding:60px 25px 30px;background:#f5f1e9}footer h2{font-size:37px}.footer-monogram{font-size:40px;margin:28px}footer>span{font-size:10px;letter-spacing:3px}.order{display:block;margin:65px auto 16px;width:fit-content;border-bottom:1px solid #b8ad9b;font-size:10px;padding:6px}footer small{font-size:8px;color:#978d80}.music{position:fixed;z-index:5;right:max(18px,calc((100vw - 600px)/2 + 18px));top:20px;width:47px;height:47px;border:1px solid #d2c8b9;border-radius:50%;background:#fffef7df;color:#796b57;font-size:21px;display:none;box-shadow:0 3px 14px #0001}.music span{position:absolute;top:46px;left:0;width:100%;font-size:8px}.music[aria-pressed=true]{background:#756750;color:white}.cover{position:fixed;inset:0;z-index:20;background:radial-gradient(ellipse at 50% 35%,#fff,#f4f0e8);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;transition:opacity .7s,visibility .7s}.cover-title{text-align:center;margin-bottom:45px}.cover-title span{font-size:10px;letter-spacing:3px;color:#96866e}.cover-title p{font:42px Script;margin:14px}.envelope{position:relative;width:min(86vw,420px);height:280px;perspective:1000px;background:#eae4d9;border:0;box-shadow:0 25px 55px #6a51351f;padding:0}.letter{position:absolute;inset:10px 20px;background:#fffefb;border:1px solid #e2d8c8;display:flex;align-items:center;justify-content:center;gap:20px;font:48px Script;transition:transform 1s .35s}.letter i{font:25px Georgia;color:#b6a17f}.fold{position:absolute;inset:0;background:#fffdf8;filter:drop-shadow(0 -1px 1px #b9ab9920)}.left{clip-path:polygon(0 0,55% 54%,0 100%);background:#faf7f0}.right{clip-path:polygon(100% 0,45% 54%,100% 100%);background:#f8f4ec}.bottom{clip-path:polygon(0 100%,50% 42%,100% 100%)}.flap{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 58%);background:linear-gradient(#fffefa,#eee7db);transform-origin:top;transition:transform .9s}.seal{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);width:67px;height:67px;border:4px double #c8b68f;background:radial-gradient(circle at 30% 25%,#f8ecd2,#cdb792);border-radius:48% 52% 49% 48%;display:grid;place-content:center;font:18px Script;color:#85704d;box-shadow:1px 3px 7px #7c684144;transition:opacity .3s}.cover-hint{font-size:10px;color:#958774;margin-top:40px}.cover-date{font-size:11px;letter-spacing:4px;margin-top:15px}.opening .flap{transform:rotateX(180deg)}.opening .seal{opacity:0}.opening .letter{transform:translateY(-75px)}.cover.gone{opacity:0;visibility:hidden;pointer-events:none}.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s,transform .8s}.reveal.visible{opacity:1;transform:none}#audio-status{position:fixed;top:80px;right:15px;z-index:8;font-size:10px;background:#fff;max-width:200px}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #927752;outline-offset:5px}@media(max-width:400px){section{padding:65px 25px}h1{font-size:62px}.hero{min-height:730px}.envelope{height:240px}.countdown{gap:20px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}}
#music-panel{position:fixed;right:16px;top:90px;z-index:10;background:#fffefa;padding:8px;box-shadow:0 6px 25px #0002;width:260px}#music-panel iframe{width:244px;height:140px;border:0}#music-panel span{display:block;font-size:10px;text-align:center}.hero:after{inset:30% 0 25%;background:linear-gradient(transparent 0%,#fffefa 80%)}
@font-face{font-family:WeddingScript;src:url(assets/calligraphy.woff)}@font-face{font-family:WeddingSerif;src:url(assets/serif.woff)}@font-face{font-family:KazakhSerif;src:url(assets/serif-fallback.ttf)}
body{font-family:WeddingSerif,KazakhSerif,serif;background:#e9e4db}
main{background:#fffdf8 url(assets/paper.avif) repeat;background-size:600px}
h1,h2,.hosts,.footer-monogram,.cover-title p,.letter,.seal{font-family:WeddingScript,Script,cursive}
h1{font-size:92px;line-height:1.15;margin:20px 0}
h1 i{margin:2px 0;font-size:28px}
h2{font-size:56px}
.hero{height:1050px;max-height:none;min-height:0}
.hero>img{height:58%;mask-image:linear-gradient(to bottom,#000 35%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 35%,transparent 100%)}
.hero:after{display:none}
.hero-copy{top:42%}
.hero-copy .eyebrow{font-family:WeddingSerif,KazakhSerif,serif;letter-spacing:2px;font-size:11px}
.hero h1,.hosts{color:#967239;background:linear-gradient(115deg,#735328,#b99a5c 50%,#87642e);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.date{font-family:WeddingSerif,KazakhSerif,serif;font-size:18px;letter-spacing:4px}
.music-block{display:flex;align-items:center;flex-direction:column;margin:26px auto 10px;gap:4px}
.record-button{width:72px;height:72px;border:0;border-radius:50%;background:transparent;padding:0;display:block}
.record{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:repeating-radial-gradient(circle,#ede4d1 0px,#ede4d1 2px,#c7b58c 3px,#ede4d1 4px);border:1px solid #bca77c;box-shadow:0 5px 20px #8b714827;animation:record-spin 9s linear infinite;animation-play-state:paused}
.record-center{background:#fff9ec;border:1px solid #c7ac75;border-radius:50%;width:30px;height:30px;font:18px Georgia;display:grid;place-items:center;color:#94713a}
.record-button[aria-pressed=true] .record{animation-play-state:running}
#music-caption{font-size:12px;color:#7d6848;margin-top:10px}
.music-song{font-size:9px;color:#9b8a70}
#audio-status{position:static;font:11px KazakhSerif;background:transparent;margin:0}
.welcome{position:relative;padding-top:30px;padding-bottom:60px}
.glass-panel{position:relative;padding:45px 22px;border:1px solid #fff;outline:1px solid #c8b89055;outline-offset:7px;background:linear-gradient(135deg,#ffffffb0,#fff9ed70);backdrop-filter:blur(12px);border-radius:140px 140px 8px 8px;box-shadow:0 15px 55px #8266310a}
.welcome .eyebrow{font-size:9px;margin-top:30px}
.welcome p{font-size:16px}
.welcome .hosts{font-size:40px}
.wedding-rings{height:80px;position:relative;width:120px;margin:0 auto 28px;animation:float 6s ease-in-out infinite}
.wedding-rings i{position:absolute;width:62px;height:62px;border:4px double #ba9757;border-radius:50%;transform:rotate(-25deg);left:6px;top:4px;box-shadow:inset 1px 1px 2px #fff,1px 2px 4px #987c4330}
.wedding-rings i+i{left:49px;top:18px;transform:rotate(25deg)}
.calendar-section,.venue,footer{background:linear-gradient(140deg,#f2e9d975,#fffdfb99),url(assets/paper.avif);background-size:auto,600px}
.calendar{padding:18px 12px;border:1px solid #d7c7a2;background:#fffdf980;backdrop-filter:blur(10px);border-radius:12px;box-shadow:0 12px 40px #92784e10}
.calendar span{font-family:KazakhSerif,serif}
.calendar .selected{background:linear-gradient(135deg,#c3a56b,#e4d2ad);color:#fff;border-color:#b89658;box-shadow:0 0 0 4px #c3a56b18;animation:date-glow 4s ease-in-out infinite}
.program h2,.venue h2,.rsvp h2{font-size:48px}
.schedule time{font-family:WeddingScript,serif;font-size:30px;color:#a28048}
.schedule p{font-size:15px}.schedule small{font-size:12px}
.map-button{display:inline-flex;align-items:center;gap:17px;border:1px solid #c3b28d;border-radius:9px;background:#fffdf8ad;box-shadow:0 6px 25px #84704b12;backdrop-filter:blur(12px);letter-spacing:0;font-size:15px}
.map-button>span:nth-child(2){text-align:left}.map-button small{display:block;font-size:9px;color:#9b8a70}
.gis-logo{background:#85bc46;color:#fff;border-radius:9px;padding:3px 7px;font:bold 20px Arial}.gis-logo span{font-size:12px}
.map-button>b{font-weight:400;color:#a1834c}
.countdown b{color:#aa884b}.countdown{padding:25px 10px;background:#ffffff80;border:1px solid #e5d9c2;border-radius:12px;backdrop-filter:blur(10px)}
.submit{background:linear-gradient(110deg,#9b7b48,#b59b69);border-radius:6px;font-family:KazakhSerif}
footer h2{font-size:48px}
.order{padding:19px 22px;border:1px solid #ccb78c;border-radius:9px;background:#fffaf280;box-shadow:0 8px 25px #957b4510;max-width:100%;font-family:KazakhSerif}
.order span{display:block;font-size:11px;text-decoration:underline;text-underline-offset:5px}.order span+span{font-size:10px;margin-top:9px;color:#8f7650}
@keyframes record-spin{to{transform:rotate(360deg)}}@keyframes float{50%{transform:translateY(-7px) rotate(3deg)}}@keyframes date-glow{50%{box-shadow:0 0 0 7px #c3a56b16}}
@media(max-width:420px){h1{font-size:77px}.hero{height:980px}.hero-copy{top:40%}.hero>img{height:55%}h2{font-size:48px}.program h2,.venue h2,.rsvp h2{font-size:40px}.welcome{padding-left:24px;padding-right:24px}.glass-panel{padding:38px 12px}.welcome p{font-size:14px}.music-block{margin-top:23px}.order{padding:17px 14px}}