@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#090909; --panel:#11110f; --text:#e9e4d7; --muted:#99958b;
  --gold:#c8a86b; --gold2:#8d6c39; --red:#8f2924;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;line-height:1.6}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 20%,rgba(200,168,107,.08),transparent 35%),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:auto,80px 80px;z-index:-2}
.noise{position:fixed;inset:0;opacity:.04;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
.nav{position:fixed;top:0;left:0;right:0;height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(9,9,9,.72);backdrop-filter:blur(16px);z-index:20}
.brand{font-family:Cinzel,serif;font-weight:800;letter-spacing:2px}.brand span{font-family:Inter;font-size:.55em;color:var(--gold);letter-spacing:3px}
.nav nav{display:flex;gap:30px;font-size:12px;text-transform:uppercase;letter-spacing:2px;color:#aaa}.nav nav a:hover{color:var(--gold)}
.steam-small{border:1px solid var(--gold2);padding:9px 15px;font-size:11px;letter-spacing:2px}
.hero{min-height:100vh;position:relative;display:flex;align-items:center;padding:120px 8vw 70px;overflow:hidden}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#090909 0%,rgba(9,9,9,.9) 43%,rgba(9,9,9,.15) 100%),radial-gradient(circle at 75% 55%,rgba(139,96,45,.24),transparent 30%);z-index:-1}
.hero-glow{position:absolute;width:560px;height:560px;border-radius:50%;right:7%;top:20%;background:radial-gradient(circle,rgba(201,168,107,.13),transparent 65%);filter:blur(10px)}
.hero-content{max-width:720px;position:relative;z-index:2}
.eyebrow,.section-label,.role,.location{font-size:11px;letter-spacing:4px;color:var(--gold);font-weight:700}
h1,h2,h3{font-family:Cinzel,serif;line-height:.98;margin:0}
h1{font-size:clamp(60px,9vw,135px);letter-spacing:-4px;text-shadow:0 8px 40px #000}
h1 span{color:transparent;-webkit-text-stroke:1px #d0c3a6}
h2{font-size:clamp(48px,7vw,100px);letter-spacing:-3px}h2 em{font-style:normal;color:var(--gold)}
.tagline{max-width:560px;font-size:18px;color:#bbb6ab;margin:28px 0}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:15px 22px;font-size:11px;font-weight:800;letter-spacing:2px;border:1px solid var(--gold2);transition:.25s}.btn.primary{background:var(--gold);color:#0b0b09}.btn.primary:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(200,168,107,.2)}.btn.ghost:hover{background:rgba(200,168,107,.08)}
.camera-illustration{position:absolute;right:8%;top:50%;transform:translateY(-50%) rotate(-7deg);width:min(42vw,580px);height:370px;opacity:.9}
.camera-body{position:absolute;width:76%;height:60%;left:12%;top:20%;border:3px solid #776548;border-radius:22px;background:linear-gradient(145deg,#26231d,#0d0d0b);box-shadow:30px 40px 80px #000,inset 0 0 40px #000}
.lens{position:absolute;width:205px;height:205px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);border:13px solid #494237;background:radial-gradient(circle at 40% 35%,#87909b 0 4%,#1b232b 18%,#050607 44%,#17120b 60%,#514027 62%,#080808 70%);box-shadow:0 0 0 4px #1c1a16,0 0 70px rgba(200,168,107,.12)}
.viewfinder{position:absolute;width:90px;height:32px;background:#171613;border:2px solid #5d513c;left:50px;top:-24px;border-radius:6px}.shutter{position:absolute;width:24px;height:24px;background:#8b7551;border-radius:50%;right:60px;top:-12px}
.camera-ring{position:absolute;inset:0;border:1px solid rgba(200,168,107,.25);border-radius:50%;transform:scale(.9)}
.camera-caption{position:absolute;bottom:-50px;right:0;color:#716955;font-size:10px;letter-spacing:3px}
.scroll{position:absolute;bottom:28px;left:8vw;font-size:9px;letter-spacing:3px;color:#777}
section{padding:120px 8vw}.section-label{margin-bottom:55px}
.intro{background:#0d0d0c}.split{display:grid;grid-template-columns:1fr 1fr;gap:10vw}.copy{max-width:620px;color:#aaa;font-size:17px}.copy p+p{margin-top:25px}
.feature-band{background:#151410}.feature-band>h2{max-width:700px;margin-bottom:70px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{min-height:240px;border:1px solid #302d26;padding:30px;background:linear-gradient(145deg,#181713,#0e0e0c)}.card span{color:var(--gold);font-size:12px}.card h3{font-size:23px;margin:50px 0 16px}.card p,.artifact p,.character-grid p,.world-copy,.steam p{color:#9d998f}
.artifacts{background:#0b0b0a}.artifact-intro{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:65px}.artifact-intro p{max-width:450px;color:#999}.artifact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.artifact{min-height:390px;padding:32px;border:1px solid #353026;position:relative;overflow:hidden}.artifact:before{content:"";position:absolute;width:230px;height:230px;border-radius:50%;right:-80px;top:-80px;background:radial-gradient(circle,rgba(200,168,107,.18),transparent 65%)}.artifact-number{font-size:12px;color:var(--gold)}.artifact-icon{font-size:72px;font-family:serif;margin:55px 0 35px;color:#c4ae82}.artifact h3{font-size:25px}.artifact p{font-size:14px}
.world{background:#10100e}.world-layout{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}.world h2{margin:15px 0 30px}.map-card{height:380px;border:1px solid #4a4335;position:relative;background:radial-gradient(circle at 50% 50%,rgba(200,168,107,.08),transparent 45%)}.map-line{position:absolute;width:55%;height:1px;background:#806a45;left:22%;top:52%;transform:rotate(-18deg)}.map-point{position:absolute;font-size:9px;letter-spacing:2px;color:#c8a86b}.p1{left:8%;bottom:15%}.p2{left:25%;top:48%}.p3{right:28%;top:33%}.p4{right:7%;top:14%}.map-note{position:absolute;bottom:15px;right:15px;font-size:8px;color:#555}
.characters{background:#0a0a09}.character-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#302d27}.character-grid article{padding:45px;background:#0d0d0b;min-height:260px}.character-grid h3{font-size:28px;margin:14px 0 18px}.role{font-size:9px}
.boss{min-height:720px;position:relative;display:flex;align-items:end;background:radial-gradient(circle at 70% 45%,rgba(111,30,25,.32),transparent 30%),linear-gradient(120deg,#090908,#1a0d0b);overflow:hidden}.boss:before{content:"CURATOR";position:absolute;right:-4vw;bottom:-70px;font-family:Cinzel;font-size:22vw;color:rgba(255,255,255,.025);font-weight:800}.boss-content{max-width:650px;position:relative;z-index:2}.boss-content>p:not(.eyebrow){color:#aaa;max-width:550px}.boss-moves{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}.boss-moves span{border:1px solid #4c2d27;padding:7px 10px;font-size:9px;letter-spacing:1px;color:#b6a69c}
.steam{text-align:center;background:linear-gradient(180deg,#0d0c0a,#17120d);padding-top:150px;padding-bottom:150px}.steam h2{margin-bottom:25px}.steam p{max-width:560px;margin:0 auto 35px}.huge{padding:18px 30px}.steam small{display:block;color:#555;margin-top:18px;font-size:9px}
footer{padding:35px 8vw;border-top:1px solid #222;display:flex;justify-content:space-between;gap:20px;color:#68645d;font-size:10px;letter-spacing:1px}
@media(max-width:850px){.nav nav{display:none}.hero{padding-top:150px}.camera-illustration{opacity:.18;right:-20%;width:650px}.split,.world-layout,.cards,.artifact-grid,.character-grid{grid-template-columns:1fr}.artifact-intro{display:block}.artifact-intro p{margin-top:25px}.hero h1{font-size:65px}.camera-caption{display:none}section{padding:90px 6vw}.scroll{left:6vw}footer{flex-direction:column}}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.show{opacity:1;transform:none}