:root{--cream:#f7f2e9;--paper:#fffdf8;--taupe:#74665c;--dark:#3f3732;--gold:#b18a47;--gold-light:#ddc99c;--line:rgba(177,138,71,.38)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#ded7cc;color:var(--dark);font-family:Montserrat,sans-serif}
body.intro-active{overflow:hidden}
.intro{position:fixed;inset:0;z-index:100;overflow:hidden;background:radial-gradient(circle at 50% 42%,#fffdf8 0,#f6f0e6 58%,#e9dfd0 100%);cursor:pointer;touch-action:manipulation;transition:opacity .9s ease,visibility .9s ease}
.intro:before{content:"";position:absolute;inset:18px;border:1px solid rgba(177,138,71,.45);pointer-events:none}
.intro-glow{position:absolute;left:50%;top:42%;width:min(74vw,470px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(222,201,156,.22),transparent 68%)}
.intro-small{position:absolute;z-index:3;top:6.5%;left:0;right:0;margin:0;text-align:center;font:italic 1.55rem "Cormorant Garamond",serif;color:var(--taupe);letter-spacing:.04em;transition:opacity .4s ease}
.intro-couple{position:absolute;inset:10% 0 11%;z-index:2}
.intro-couple img{position:absolute;bottom:0;height:min(73svh,760px);width:auto;max-width:none;filter:drop-shadow(0 15px 20px rgba(80,60,45,.08));transition:transform 2.15s cubic-bezier(.22,.76,.18,1)}
.intro-bride{right:50%;transform:translateX(-68%)}
.intro-groom{left:50%;bottom:clamp(40px,6.5svh,70px)!important;transform:translateX(58%)}
.intro-heart{position:absolute;left:50%;top:39%;transform:translate(-50%,-50%) scale(0);color:#b18a47;font-size:.8rem;opacity:0;transition:transform .55s ease 1.8s,opacity .55s ease 1.8s}
.intro.is-opening .intro-bride{transform:translateX(0)}
.intro.is-opening .intro-groom{transform:translateX(-10%)}
.intro.is-opening .intro-heart{transform:translate(-50%,-50%) scale(1);opacity:.9}
.intro.is-opening .tap-instruction,.intro.is-opening .intro-small{opacity:0}
.intro.is-complete{opacity:0;visibility:hidden;pointer-events:none}
.tap-instruction{position:absolute;z-index:4;bottom:5.5%;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:.7rem;color:var(--taupe);transition:opacity .35s ease}
.tap-instruction strong{font-size:.69rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.tap-ring{width:38px;height:38px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;animation:tapPulse 1.8s infinite}.tap-ring i{width:8px;height:8px;border-radius:50%;background:var(--gold)}
@keyframes tapPulse{50%{transform:scale(1.12);box-shadow:0 0 0 8px rgba(177,138,71,.09)}}
main{width:min(100%,680px);margin:auto;background:var(--cream);box-shadow:0 0 50px rgba(47,39,33,.13);overflow:hidden}
.hero{min-height:100svh;position:relative;text-align:center;padding:6rem 1.2rem 0;background:radial-gradient(circle at 50% 20%,#fff 0,var(--cream) 65%)}
.hero:before{content:"";position:absolute;inset:18px;border:1px solid var(--line);pointer-events:none}
.eyebrow,.section-kicker{font-size:.7rem;letter-spacing:.27em;text-transform:uppercase;color:var(--gold);font-weight:600}
h1{font-family:"Cormorant Garamond",serif;font-weight:400;font-size:clamp(3.3rem,14vw,6.2rem);line-height:.72;margin:1.2rem 0 .85rem;position:relative;z-index:2}
h1 span{display:block} h1 i{font-weight:400;color:var(--gold);font-size:.54em;display:block;line-height:.8}
.date-line{letter-spacing:.38em;font-size:.75rem;color:var(--taupe);margin:0}
.artwork{margin:1.1rem -1.2rem 0;height:58svh;min-height:430px;position:relative}
.artwork:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--cream) 0,transparent 15%,transparent 90%,var(--cream) 100%);pointer-events:none}
.artwork img{width:100%;height:100%;object-fit:cover;object-position:center 62%;mix-blend-mode:multiply}
.music-button{position:fixed;z-index:20;top:18px;right:max(18px,calc((100vw - 650px)/2));border:1px solid var(--line);background:rgba(255,253,248,.9);color:var(--dark);border-radius:99px;padding:.65rem .9rem;display:flex;align-items:center;gap:.45rem;font:500 .69rem Montserrat,sans-serif;box-shadow:0 5px 20px rgba(70,55,44,.09);backdrop-filter:blur(8px)}
.music-icon{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--gold);color:white}.music-button[aria-pressed=true] .music-icon{animation:pulse 1.5s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 5px rgba(177,138,71,.15)}}
.scroll-hint{position:absolute;bottom:17px;left:50%;width:1px;height:35px;background:var(--line)}.scroll-hint span{display:block;width:5px;height:5px;border-radius:50%;background:var(--gold);transform:translateX(-2px);animation:down 1.8s infinite}@keyframes down{to{transform:translate(-2px,30px);opacity:0}}
.invitation{text-align:center;padding:6rem 1.7rem 5rem;background:var(--paper)}
.ornament{color:var(--gold);font-size:1.6rem}.script{font:italic 2rem "Cormorant Garamond",serif;color:var(--taupe);margin:1rem 0}.message{font:400 .94rem/2 Montserrat,sans-serif;max-width:520px;margin:0 auto;color:#5e554f}
.families{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:3.5rem auto 0;max-width:560px;border-top:1px solid var(--line);padding-top:2rem}.families div:first-child{border-right:1px solid var(--line)}.families strong{display:block;font:500 1.18rem/1.3 "Cormorant Garamond",serif}.families span{display:block;color:var(--gold);font-size:.61rem;letter-spacing:.12em;text-transform:uppercase;margin-top:.5rem}
.countdown-section{text-align:center;padding:5rem 1rem;background:var(--taupe);color:var(--paper);position:relative}.countdown-section:before,.countdown-section:after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:70px;height:1px;background:var(--gold-light)}.countdown-section:before{top:28px}.countdown-section:after{bottom:28px}.countdown-section h2,.venue h2{font:400 3rem "Cormorant Garamond",serif;margin:.5rem 0 2rem}.countdown{display:grid;grid-template-columns:repeat(4,1fr);max-width:560px;margin:auto}.countdown div{border-right:1px solid rgba(255,255,255,.19)}.countdown div:last-child{border:0}.countdown strong{display:block;font:400 clamp(1.7rem,8vw,2.8rem) "Cormorant Garamond",serif}.countdown span{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light)}
.details{text-align:center;padding:5rem 1.3rem 5.5rem;background:var(--cream)}
.date-card{margin:0 auto 4rem;max-width:390px}.weekday{display:block;text-transform:uppercase;letter-spacing:.22em;font-size:.67rem;color:var(--gold)}.calendar-row{display:grid;grid-template-columns:1fr 1.1fr 1fr;align-items:center;margin:1rem 0}.calendar-row span{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.8rem 0;text-transform:uppercase;letter-spacing:.1em;font-size:.67rem}.calendar-row strong{font:400 4.5rem "Cormorant Garamond",serif;color:var(--taupe)}.time{font:500 .85rem Montserrat,sans-serif;letter-spacing:.1em}.venue h2{margin:.5rem 0 1rem}.venue address{font-style:normal;font-size:.86rem;line-height:1.8;color:#665c55}.map-button{display:inline-flex;align-items:center;gap:.6rem;margin-top:2rem;padding:1rem 1.7rem;background:var(--gold);color:white;text-decoration:none;border-radius:2px;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 8px 22px rgba(128,94,41,.18);transition:.2s}.map-button:hover{background:#987337;transform:translateY(-2px)}
footer{text-align:center;background:#403934;color:var(--cream);padding:4rem 1rem}.monogram{font:400 2rem "Cormorant Garamond",serif;letter-spacing:.1em}.monogram i{color:var(--gold-light);font-weight:400}footer p{font:italic 1.4rem "Cormorant Garamond",serif;margin:.8rem}footer small{color:#c9bfb5;font-size:.62rem;letter-spacing:.11em;text-transform:uppercase}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:420px){.families{grid-template-columns:1fr}.families div:first-child{border-right:0;border-bottom:1px solid var(--line);padding-bottom:1.3rem}.hero{padding-top:5.5rem}.message br{display:none}.music-button{right:12px;top:12px}.music-button #musicLabel{display:none}}
@media(max-width:420px){.intro-couple img{height:min(68svh,650px)}.intro-groom{bottom:clamp(34px,6svh,56px)!important}.intro.is-opening .intro-bride{transform:translateX(0)}.intro.is-opening .intro-groom{transform:translateX(-10%)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.intro.is-opening .intro-bride{transform:translateX(0)}.intro.is-opening .intro-groom{transform:translateX(-10%)}}