*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#120c09;--fg:#f3e9dc;--mut:#b59f86;--acc:#d9a35b}
html{background:var(--bg);color:var(--fg);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1,h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.01em}
em{color:var(--acc);font-style:italic}
.badge{position:fixed;top:12px;right:12px;z-index:9;background:rgba(18,12,9,.75);border:1px solid #5a4330;color:var(--mut);font-size:12px;padding:5px 10px;border-radius:99px;backdrop-filter:blur(6px)}
.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--acc)}
.hero{min-height:88vh;display:flex;flex-direction:column;justify-content:center;padding:12vh 8vw 6vh;max-width:900px}
.hero h1{font-size:clamp(3rem,11vw,7rem);line-height:.95;margin:.3em 0 .4em}
.claim{max-width:30em;color:var(--mut);font-size:1.1rem}
.hint{margin-top:3em;color:var(--mut);font-size:13px;letter-spacing:.15em}
.story{height:700vh;position:relative}
.sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;gap:6vw;overflow:hidden}
.stage{position:relative;width:min(62vw,calc(84vh*4/3));aspect-ratio:4/3;border-radius:6px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.stage canvas,.stage .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage .still{display:none}
.stage figcaption{position:absolute;left:10px;bottom:8px;font-size:11px;color:rgba(243,233,220,.6)}
.steps{width:min(360px,26vw)}
.captions{list-style:none;position:relative;height:6.5em}
.captions li{position:absolute;inset:0;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s;font-family:Georgia,serif;font-size:1.7rem;line-height:1.2}
.captions li span{display:block;font:600 12px system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin-bottom:.5em}
.captions li.on{opacity:1;transform:none}
.dots{display:flex;gap:6px;margin-top:1.4em}
.dots i{width:22px;height:3px;border-radius:2px;background:#4a382a;transition:background .4s}
.dots i.on{background:var(--acc)}
@media (max-width:799px){
 .sticky{flex-direction:column;justify-content:center;gap:0}
 .stage{width:100vw;aspect-ratio:1/1;border-radius:0;box-shadow:none}
 .stage canvas,.stage .still{object-position:52% 50%}
 .steps{width:auto;align-self:stretch;padding:1.8em 7vw 0}
 .captions{height:4.6em}.captions li{font-size:1.4rem}
}
.cta{padding:16vh 8vw;text-align:center;background:radial-gradient(ellipse at 50% 0,#2a1a10,var(--bg) 70%)}
.cta h2{font-size:clamp(2.2rem,6vw,4rem);margin:.3em 0}
.cta p{color:var(--mut);max-width:32em;margin:0 auto}
.btn{display:inline-block;margin:2em 0;padding:.95em 2.2em;border-radius:99px;background:var(--acc);color:#1a110b;font-weight:600;text-decoration:none;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px);background:#e8b672}
.addr{font-size:14px}.addr small{opacity:.7}
footer{padding:2em 8vw;font-size:12px;color:#8a7662;text-align:center;border-top:1px solid #2a1f17}
footer a{color:var(--mut)}
@media (prefers-reduced-motion:reduce){
 .story{height:auto}.sticky{position:relative;height:auto;padding:4vh 0;flex-wrap:wrap}
 .stage canvas{display:none}.stage .still{display:block}
 .captions{height:auto}.captions li{position:static;opacity:1;transform:none;font-size:1.1rem;margin-bottom:.8em}
 .dots{display:none}
 @media (max-width:799px){.steps{position:static;background:none;padding:2em 7vw}}
}