:root{--paper:#f7f4ec;--ink:#30332e;--sage:#7b8878;--gold:#b59b71;--taupe:#756d63}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif}button,a{font:inherit}button{cursor:pointer}a{color:inherit}.topbar{height:86px;padding:0 clamp(20px,5vw,80px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ded9cd;gap:14px}.brand{text-decoration:none;font-family:"Playfair Display",serif;letter-spacing:.08em;font-size:18px}.brand em{color:#90744f}.back{font-size:12px;text-decoration:none}.top-note{font-size:10px;letter-spacing:.16em;color:#756d63}.experience{position:relative;min-height:calc(100svh - 135px);display:grid;place-items:center;padding:55px 18px 70px;overflow:hidden;background:radial-gradient(circle at 20% 25%,#e6e4d8 0,transparent 33%),radial-gradient(circle at 80% 80%,#e2d9c9 0,transparent 35%),var(--paper)}.ambient{position:absolute;border:1px solid #d7d0c0;border-radius:50%;pointer-events:none}.ambient-one{width:410px;height:410px;top:-290px;right:-100px}.ambient-two{width:360px;height:360px;bottom:-250px;left:-100px}.invite-stage{text-align:center;z-index:1;width:min(100%,740px)}.eyebrow{font-size:11px;letter-spacing:.23em;font-weight:700;color:#826e4f}h1,h2{font-family:"Playfair Display",serif;font-weight:400}h1{font-size:clamp(36px,5vw,58px);margin:10px 0}.intro{color:var(--taupe);font-size:14px}.envelope-scene{height:310px;display:grid;place-items:center;perspective:1000px;transition:opacity .35s,transform .5s}.envelope{position:relative;width:min(350px,82vw);height:220px;filter:drop-shadow(0 22px 22px #353a2e22)}.envelope-back{position:absolute;inset:0;background:#c4c8b9;border-radius:4px}.envelope-front{position:absolute;inset:0;background:#dce0d2;clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);z-index:3;border-radius:4px}.envelope-flap{position:absolute;inset:0;background:#b5bdad;clip-path:polygon(0 0,100% 0,50% 57%);z-index:5;transform-origin:top;transition:transform .8s ease,z-index 0s .3s}.envelope-letter{position:absolute;left:10%;width:80%;height:195px;top:12px;background:#fffdf7;border:1px solid #d8c9b1;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:transform .85s ease .35s}.envelope-letter span,.envelope-letter small{font-size:9px;letter-spacing:.2em}.envelope-letter strong{font-family:"Playfair Display",serif;font-size:28px;font-weight:400}.seal{position:absolute;top:94px;left:calc(50% - 26px);height:52px;width:52px;display:grid;place-items:center;border-radius:50%;background:#ad8e63;color:white;font-family:"Playfair Display",serif;z-index:6;box-shadow:0 3px 9px #0002;transition:opacity .2s}.seal span{font-size:13px}.envelope.open .envelope-flap{transform:rotateX(180deg);z-index:1}.envelope.open .envelope-letter{transform:translateY(-105px)}.envelope.open .seal{opacity:0}.primary,.secondary{display:inline-flex;justify-content:center;align-items:center;gap:15px;border:1px solid var(--ink);padding:15px 25px;text-decoration:none;font-size:13px;font-weight:700;transition:transform .2s,background .2s}.primary{background:var(--ink);color:white}.secondary{background:transparent;color:var(--ink)}.primary:hover,.secondary:hover{transform:translateY(-2px)}button:focus-visible,a:focus-visible{outline:3px solid #b59b71;outline-offset:4px}.hint{color:#8a8276;font-size:12px;margin-top:18px}.details{margin:35px auto 0;width:min(100%,630px);animation:appear .75s ease both}.details[hidden]{display:none}.details-inner{background:#fffdf8;border:1px solid #dcd1bd;box-shadow:0 22px 50px #292d2620;padding:clamp(28px,6vw,64px)}.ornament{color:var(--gold);font-size:28px;margin:22px 0}.details h2{font-size:clamp(43px,7vw,75px);margin:8px 0 10px}.details h2 em{font-weight:400;color:#8b9a86}.subheading{font-family:"Playfair Display",serif;font-style:italic;color:#776f61}.rule{height:1px;width:70px;background:var(--gold);margin:32px auto}.info-grid{display:grid;gap:25px}.info-grid div{display:grid;gap:5px}.info-grid span{font-size:10px;letter-spacing:.2em;color:#967f5e}.info-grid strong{font-family:"Playfair Display",serif;font-weight:400;font-size:20px}.info-grid small{color:var(--taupe);font-size:12px}.rsvp-note{margin:32px 0 22px;font-family:"Playfair Display",serif;font-style:italic}.actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.disclaimer{font-size:11px;color:#776f61;line-height:1.7;margin:25px auto 0;max-width:440px}footer{padding:18px;text-align:center;font-size:10px;letter-spacing:.15em;background:var(--ink);color:white}footer a{color:#e7d4b5}@keyframes appear{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){.topbar{height:72px}.brand{font-size:13px}.top-note{display:none}.experience{padding-top:40px}.envelope-scene{height:285px}.actions>*{width:100%}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Midnight black & champagne gold theme */
body{background:#131317;color:#f5e9d6}
.topbar{background:#161619!important;border-bottom:1px solid #a8884e66!important}
.topbar a,.topbar .brand,.top-note{color:#e5c688!important}
.experience{background:radial-gradient(circle at 50% 24%,#483423 0,#19181b 48%,#101013 100%)!important}
.invite-stage h1,.invite-stage .intro,.eyebrow,.hint{color:#f6e6c9!important}
.envelope-back,.envelope-front{filter:sepia(.6) brightness(.72)}
.envelope-flap{filter:sepia(.6) brightness(.72)}
.seal{background:#c9a252!important;color:#191717!important}
.primary{background:#c6a15a!important;color:#171416!important;border-color:#c6a15a!important}
.details-inner{background:#1e1b1b!important;color:#f5e9d6!important;border:1px solid #b89555!important}
.details-inner h2,.details-inner strong,.details-inner .subheading,.details-inner .rsvp-note,.details-inner small,.details-inner p{color:#f5e9d6!important}
.secondary{color:#e7c687!important;border-color:#b89555!important}
.demo-next{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:30px 0}
.demo-next a{color:#f2d397;text-decoration:underline;text-underline-offset:5px}