:root { --ink:#1f1c19; --cream:#f5f0e5; --paper:#fffaf0; --red:#cf3e2d; --gold:#f0a72e; --teal:#197e96; --line:rgba(31,28,25,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1240px,calc(100% - 48px)); margin-inline:auto; }
.nav { height:92px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); font-size:13px; font-weight:700; }
.brand { display:flex; align-items:center; gap:12px; text-transform:uppercase; letter-spacing:.08em; }
.brand-mark { display:grid; place-items:center; width:42px; height:34px; border-radius:5px; background:#153d31; color:#dff879; font:800 12px/1 monospace; letter-spacing:.08em; box-shadow:inset 0 0 0 3px #e7dec9; }
.nav-links { display:flex; gap:34px; }
.nav-links a { position:relative; }
.nav-links a::after { content:''; position:absolute; left:0; right:100%; bottom:-6px; height:2px; background:var(--red); transition:right .2s; }
.nav-links a:hover::after { right:0; }
.nav-cta { justify-self:end; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--ink); padding-bottom:5px; }
.hero { min-height:720px; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:40px; padding-block:55px 70px; overflow:hidden; }
.eyebrow { text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:800; display:flex; align-items:center; gap:10px; }
.eyebrow span { width:8px; height:8px; background:var(--red); border-radius:50%; }
h1,h2 { margin:0; letter-spacing:-.055em; line-height:.92; }
h1 { font-size:clamp(66px,8.3vw,126px); font-weight:900; margin-top:26px; }
h1 em,h2 em { font-family:Georgia,'Times New Roman',serif; font-weight:400; }
h1 em { color:var(--red); }
.hero-lede { max-width:520px; font:400 clamp(20px,2vw,27px)/1.38 Georgia,serif; margin:32px 0; }
.text-link { display:inline-flex; align-items:center; gap:9px; padding-bottom:5px; border-bottom:1px solid; font-weight:700; font-size:14px; }
.hero-art { position:relative; min-height:570px; display:grid; place-items:center; }
.hero-art img { width:110%; height:auto; position:relative; z-index:2; mix-blend-mode:multiply; filter:drop-shadow(0 25px 32px rgba(70,52,31,.08)); }
.signal { position:absolute; border:2px solid rgba(207,62,45,.18); border-radius:50%; aspect-ratio:1; }
.signal-one { width:520px; } .signal-two { width:690px; }
.status-card { position:absolute; z-index:3; right:2%; bottom:9%; padding:14px 18px; border:1px solid var(--line); background:rgba(255,250,240,.9); backdrop-filter:blur(8px); transform:rotate(-2deg); font:700 12px monospace; box-shadow:5px 5px 0 var(--ink); }
.status-light { display:inline-block; width:8px; height:8px; background:#4bc46a; border-radius:50%; margin-right:8px; box-shadow:0 0 0 3px rgba(75,196,106,.16); }
.marquee { overflow:hidden; border-block:1px solid var(--ink); background:var(--gold); padding:17px 0; white-space:nowrap; font-size:13px; font-weight:900; letter-spacing:.14em; }
.marquee div { width:max-content; animation:roll 25s linear infinite; } .marquee span { margin:0 25px; }
@keyframes roll { to { transform:translateX(-25%); } }
.mission { padding-block:120px 130px; }
.section-kicker { display:flex; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid var(--ink); text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:800; }
.section-kicker span { color:#766f66; }
.mission-grid { display:grid; grid-template-columns:1fr .8fr; gap:80px; padding:68px 0 90px; }
.mission h2 { font-size:clamp(48px,6vw,84px); }
.mission-copy { padding-top:8px; font-size:16px; line-height:1.65; max-width:530px; }
.mission-copy .large-copy { font:400 26px/1.4 Georgia,serif; margin-top:0; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); }
.principle { padding:32px 34px 0 0; min-height:260px; border-right:1px solid var(--line); }
.principle+.principle { padding-left:34px; } .principle:last-child { border-right:0; }
.principle>span { font:700 12px monospace; color:var(--red); }
.principle h3 { font:400 27px/1.15 Georgia,serif; margin:52px 0 18px; }
.principle p { color:#665f57; font-size:14px; line-height:1.6; max-width:310px; }
.game { display:grid; grid-template-columns:1.06fr .94fr; min-height:760px; background:var(--ink); color:var(--paper); width:min(1440px,100%); }
.game-visual { position:relative; display:grid; place-items:center; overflow:hidden; min-height:650px; background:var(--teal); }
.checker { position:absolute; inset:0; opacity:.12; background-image:linear-gradient(45deg,#fff 25%,transparent 25%),linear-gradient(-45deg,#fff 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#fff 75%),linear-gradient(-45deg,transparent 75%,#fff 75%); background-size:80px 80px; background-position:0 0,0 40px,40px -40px,-40px 0; }
.game-visual img { width:min(72%,600px); height:auto; border-radius:22%; position:relative; z-index:2; transform:rotate(-5deg); box-shadow:0 38px 70px rgba(0,0,0,.35); transition:transform .35s ease; }
.game:hover .game-visual img { transform:rotate(-2deg) scale(1.025); }
.first-release { position:absolute; top:40px; left:40px; z-index:3; background:var(--gold); color:var(--ink); padding:13px 18px; border-radius:50%; width:90px; height:90px; display:grid; place-items:center; text-align:center; text-transform:uppercase; font-weight:900; font-size:11px; line-height:1.1; transform:rotate(-10deg); }
.game-copy { padding:clamp(60px,7vw,110px); align-self:center; } .game-copy .eyebrow span { background:var(--gold); }
.game h2 { font-size:clamp(76px,9vw,140px); margin:28px 0 25px; } .game h2 em { color:var(--gold); }
.game-tagline { font:400 27px/1.25 Georgia,serif!important; color:var(--paper)!important; }
.game-copy>p { color:#beb8ae; line-height:1.65; max-width:470px; }
.game-details { display:flex; gap:30px; padding:26px 0; margin:32px 0; border-block:1px solid rgba(255,255,255,.18); }
.game-details span { font-weight:700; font-size:13px; } .game-details small { display:block; color:#8f8981; text-transform:uppercase; letter-spacing:.12em; font-size:9px; margin-bottom:7px; }
.button { display:inline-flex; align-items:center; gap:10px; background:var(--paper); color:var(--ink); border-radius:3px; padding:16px 20px; font-size:13px; font-weight:800; box-shadow:4px 4px 0 var(--gold); transition:transform .2s; }
.button:hover { transform:translate(-2px,-2px); }
.manifesto { background:var(--red); color:var(--paper); padding:120px 0; }
.manifesto-inner { text-align:center; } .manifesto p { text-transform:uppercase; letter-spacing:.15em; font-size:11px; font-weight:800; }
.manifesto h2 { font-size:clamp(50px,7vw,100px); max-width:1050px; margin:30px auto 0; } .manifesto h2 em { color:var(--gold); }
.footer { display:grid; grid-template-columns:1fr 1fr; padding-block:72px 30px; min-height:320px; }
.footer-brand { display:grid; grid-template-columns:auto 1fr; align-items:center; align-content:start; gap:0 14px; }
.footer-brand strong { text-transform:uppercase; letter-spacing:.08em; } .footer-brand p { grid-column:2; margin:3px 0; font:italic 16px Georgia,serif; }
.footer-note { justify-self:end; text-align:right; font-size:13px; line-height:1.6; } .footer-note a { display:inline-flex; align-items:center; gap:5px; margin-top:20px; border-bottom:1px solid; }
.copyright { grid-column:1/-1; align-self:end; border-top:1px solid var(--line); padding-top:18px; font-size:10px; text-transform:uppercase; letter-spacing:.14em; }
@media(max-width:900px){.nav{grid-template-columns:1fr auto}.nav-links{display:none}.hero{grid-template-columns:1fr;padding-top:70px}.hero-art{min-height:420px}.hero-art img{width:min(760px,120%)}.mission-grid{grid-template-columns:1fr;gap:38px}.principles{grid-template-columns:1fr}.principle,.principle+.principle{border-right:0;border-bottom:1px solid var(--line);padding:30px 0;min-height:auto}.principle h3{margin-top:24px}.game{grid-template-columns:1fr}.game-copy{order:-1}}
@media(max-width:560px){.shell{width:min(100% - 30px,1240px)}.nav{height:78px}.brand>span:last-child,.nav-cta svg{display:none}.nav-cta{font-size:11px}.hero{min-height:auto;padding:60px 0 40px}h1{font-size:58px}.hero-art{min-height:300px}.status-card{right:1%;bottom:3%}.mission{padding-block:80px}.mission-grid{padding-block:45px 55px}.mission h2{font-size:48px}.game-copy{padding:64px 25px}.game h2{font-size:82px}.game-visual{min-height:430px}.game-visual img{width:72%}.first-release{width:72px;height:72px;top:24px;left:24px;font-size:9px}.game-details{gap:15px;flex-wrap:wrap}.manifesto{padding-block:85px}.footer{grid-template-columns:1fr;gap:50px}.footer-note{justify-self:start;text-align:left}.copyright{grid-column:1}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marquee div{animation:none}.game-visual img,.button{transition:none}}