*{box-sizing:border-box;margin:0;padding:0}
:root{--cream:#f5eee4;--paper:#eee2d2;--beige:#dfcfbb;--brown:#5b4939;--muted:#876f58;--gold:#a78b6e}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--brown);font-family:Montserrat,sans-serif;font-weight:300}
button,a{font:inherit;color:inherit}
a{text-decoration:none}
.hidden{display:none!important}

/* Envelope */
.envelope-screen{height:100svh;min-height:600px;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#f9f2e8,#ddcdb9 90%);overflow:hidden}
.envelope{position:relative;width:min(520px,84vw);height:min(360px,58vw);min-height:260px;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 25px 30px rgba(76,55,38,.18));transition:transform .4s}
.envelope:hover{transform:translateY(-7px)}
.envelope-body{position:absolute;inset:0;background:#eee0ce;border:1px solid #cdb99f;border-radius:3px}
.envelope-body:before,.envelope-body:after{content:"";position:absolute;bottom:0;width:70%;height:100%;border-top:1px solid #c5ae93}
.envelope-body:before{left:0;clip-path:polygon(0 0,100% 100%,0 100%)}
.envelope-body:after{right:0;clip-path:polygon(100% 0,100% 100%,0 100%)}
.envelope-flap{position:absolute;z-index:2;top:0;left:0;width:100%;height:62%;background:#e6d5c0;clip-path:polygon(0 0,100% 0,50% 100%);border:1px solid #cdb99f;transform-origin:top;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.envelope.open .envelope-flap{transform:rotateX(180deg)}
.wax-seal{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;display:grid;place-content:center;background:#8c6e51;color:#f5eadc;border:4px solid #b69b7c;box-shadow:0 4px 10px #876b502b;font-family:"Cormorant Garamond";font-size:18px;line-height:11px}
.wax-seal span{font-size:11px}
.tap{position:absolute;z-index:6;bottom:-65px;left:0;right:0;text-align:center;letter-spacing:4px;font-size:10px;color:#695442}
.tap span{display:block;margin-top:10px}

/* Site */
.site{background:var(--cream)}
.topbar{position:fixed;z-index:50;top:0;left:0;right:0;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:#f5eee4d9;backdrop-filter:blur(8px);border-bottom:1px solid #a78b6e25}
.topbar nav{display:flex;gap:28px}
.topbar nav a,.mini-logo{font-size:9px;letter-spacing:3px}
.mini-logo{font-family:"Cormorant Garamond";font-size:19px;letter-spacing:2px}.mini-logo span{font-size:13px}
.icon-btn{border:0;background:none;font-size:22px;cursor:pointer}

.section{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:90px 22px;overflow:hidden}
.hero{background:linear-gradient(#f0e4d4cc,#eadbc8cc),radial-gradient(circle at 75% 20%,#d4bea4,#f7efe4 55%);min-height:100svh}
.arch{position:absolute;width:min(540px,70vw);height:78%;border:1px solid #a78b6e36;border-radius:280px 280px 0 0;top:12%;left:50%;transform:translateX(-50%)}
.hero-content{position:relative;z-index:3}.eyebrow{font-size:9px;letter-spacing:4px;margin:8px 0 14px}.small-caps{font-size:8px;letter-spacing:5px;margin-bottom:22px}
.hero h1,.closing h2{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(64px,13vw,120px);line-height:.72;letter-spacing:2px}
.and{display:flex;align-items:center;gap:18px;justify-content:center;margin:22px 0 16px;font-family:"Cormorant Garamond";font-size:45px;font-style:italic}.and i{display:block;width:65px;height:1px;background:var(--gold)}
.script{font-family:Parisienne,"Cormorant Garamond",serif;font-size:23px}.hero .script{margin:28px 0}
.date{font-family:"Cormorant Garamond";font-size:35px;letter-spacing:7px}
.scroll-cue{margin-top:35px;font-size:22px}
.flowers{position:absolute;width:240px;height:360px;opacity:.5;background:radial-gradient(circle,#fff 0 7px,transparent 8px) 0 0/35px 35px;filter:blur(.2px)}
.flowers-left{left:-55px;bottom:-80px;transform:rotate(25deg)}.flowers-right{right:-55px;bottom:-70px;transform:rotate(-25deg)}

.countdown{background:#f4ecdf}
.timer{display:flex;gap:clamp(18px,6vw,70px);margin:25px 0 32px}.timer div{min-width:65px}.timer strong{display:block;font:500 clamp(40px,7vw,62px) "Cormorant Garamond";line-height:1}.timer span{font-size:8px;letter-spacing:2px;opacity:.65}
.ornament{font-size:10px;letter-spacing:2px;color:var(--gold);margin:5px 0 30px}.ornament b{margin:0 12px}.quote{line-height:1.6}

.details{background:#eee2d3}.section-title{text-align:center}.line{width:70px;height:1px;background:var(--gold);opacity:.6;margin:0 auto 42px}.details-grid{width:min(1000px,100%);display:grid;grid-template-columns:repeat(3,1fr);gap:0}.details-grid article{padding:10px 35px;border-right:1px solid #a78b6e42}.details-grid article:last-child{border:0}.detail-icon{display:block;font-size:34px;margin-bottom:20px;color:var(--muted)}.details-grid small{font-size:8px;letter-spacing:4px}.details-grid h3{font:500 23px "Cormorant Garamond";margin-top:10px}.details-grid p{font-size:10px;opacity:.65;margin:4px 0 18px}

.pill{display:inline-flex;align-items:center;justify-content:center;padding:12px 27px;border-radius:30px;background:#8a6e54;color:#fffaf4;font-size:10px;letter-spacing:1px;border:1px solid #8a6e54;transition:.25s}.pill:hover{transform:translateY(-2px);background:#725943}

.story{background:linear-gradient(120deg,#d9c8b3,#f4ebdf 52%,#d7c3ac)}.story-card{width:min(620px,90vw);padding:70px 30px;background:#f7efe4c9;border:1px solid #a78b6e2e;box-shadow:0 20px 60px #745c4517}.large{font-size:32px;line-height:1.45}.story-card h2{font:500 35px "Cormorant Garamond";margin-top:18px}.heart{font-size:30px;margin:18px}.story-note{max-width:400px;margin:auto;font-size:11px;line-height:1.8;opacity:.7}

.location{background:#f5eee5}.map-placeholder{width:min(760px,92vw);height:330px;margin:0 auto 25px;background:linear-gradient(135deg,#ded3c5,#eee8df);border:1px solid #b39a7d55;display:grid;place-content:center;position:relative;overflow:hidden}.map-placeholder:before{content:"";position:absolute;inset:-40px;background:repeating-linear-gradient(28deg,transparent 0 34px,#fff9 35px 37px),repeating-linear-gradient(-20deg,transparent 0 62px,#c4b5a1 63px 65px);opacity:.45}.map-placeholder span{position:relative;font-size:42px}.map-placeholder p{position:relative;font-size:9px;letter-spacing:3px}.location-note{margin-top:45px;line-height:1.5}

.rsvp{background:#eee2d3}.rsvp-intro{font:22px "Cormorant Garamond";line-height:1.4;margin:-15px 0 28px}form{width:min(500px,92vw);display:grid;gap:12px}form label{border:1px solid #a78b6e66;border-radius:28px;padding:13px 18px;text-align:left;font-size:11px;background:#f8f0e6aa}form label span{display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid #a78b6e;border-radius:50%;margin-right:10px}form input[type=radio]{display:none}form input[type=radio]:checked+span{background:#8a6e54;color:white}form input[type=text],form input[type=tel]{border:1px solid #a78b6e66;background:#f8f0e6aa;border-radius:28px;padding:14px 18px;outline:none;color:var(--brown);font-size:11px}.submit{width:100%;cursor:pointer}.success{font-size:10px;margin-top:15px}

.closing{min-height:75svh;background:linear-gradient(120deg,#d6c2aa,#eee1d0,#d8c5af)}.closing h2{font-size:clamp(55px,10vw,92px);line-height:1}.closing h2 span{font-size:45px;font-style:italic}.thanks{font-size:9px;letter-spacing:4px;line-height:2;margin-top:25px}

@media(max-width:700px){.topbar nav{display:none}.topbar{padding:0 20px}.details-grid{grid-template-columns:1fr;gap:28px}.details-grid article{border-right:0;border-bottom:1px solid #a78b6e42;padding:10px 0 28px}.details-grid article:last-child{border:0}.arch{width:88vw}.flowers{width:150px;height:260px}.timer{gap:10px}.timer div{min-width:55px}.date{font-size:28px}}
