:root{color-scheme:dark;--bg:#090f13;--ink:#f5efe2;--muted:#b9c2c3;--gold:#eac477;--line:#5b4d36;--panel:#101a1d;--serif:Georgia,"Times New Roman",serif;--sans:system-ui,-apple-system,"Segoe UI",sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--sans)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure{margin:0}
.wrap{width:min(1200px,calc(100% - 112px));margin-inline:auto}
.skip{position:absolute;top:10px;left:10px;z-index:3;transform:translateY(-150%);padding:10px;background:#18242a}
.skip:focus{transform:none}
.top{position:absolute;inset:0 0 auto;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:18px max(32px,calc((100% - 1200px)/2));background:#080e13e8;border-bottom:1px solid #a783473d}
.brand{display:inline-flex;align-items:center;gap:11px;font:700 25px/1 var(--serif);white-space:nowrap}
.brand img{border:1px solid #ac854d75;border-radius:6px}
.top nav{display:flex;gap:clamp(15px,3vw,40px);color:var(--muted);font-size:14px}
.top nav a:hover,.secondary:hover,.footer a:hover{color:var(--gold)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:49px;padding:10px 19px;background:var(--gold);color:#161009;border:1px solid #f2d696;font-size:14px;font-weight:750}
.button:hover{background:#ffe0a4}
.button.small{min-height:38px;padding:6px 12px;background:transparent;color:var(--gold);border-color:#a3824f}
.button.small:hover{background:#342719}
.hero{min-height:660px;display:grid;align-content:center;position:relative;isolation:isolate;padding:120px 0 104px;border-bottom:1px solid var(--line);background:#13272b url("assets/hero.webp") 64% 48%/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#070d12f7 0%,#080f14d9 23%,#080f1480 52%,transparent 80%),linear-gradient(0deg,#080e13 0%,transparent 29%)}
.eyebrow{color:var(--gold);font-size:11px;font-weight:760;letter-spacing:.21em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.eyebrow span{width:7px;height:7px;transform:rotate(45deg);background:var(--gold);flex:none}
h1{font:700 clamp(53px,9vw,126px)/.98 var(--serif);letter-spacing:-.064em;margin:18px 0 15px;text-shadow:0 5px 36px #080d12}
.lead{font:400 clamp(28px,4vw,53px)/1.04 var(--serif);color:#f0d9ae}
.intro{max-width:420px;color:#d4d9d5;margin-top:19px}
.actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:26px}
.secondary{font-size:14px;font-weight:650;border-bottom:1px solid #d5b57382;padding:6px 0}
.hero-foot{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px max(24px,calc((100% - 1200px)/2));border-top:1px solid #ad89512e;color:#ceba92;font-size:10px;letter-spacing:.17em}
.section{padding-block:clamp(52px,8vw,96px);scroll-margin-top:20px}
.section-title{display:flex;justify-content:space-between;align-items:end;gap:28px;margin:14px 0 26px}
h2{font:400 clamp(34px,5vw,62px)/1.04 var(--serif);letter-spacing:-.04em}
.section-title>p{color:var(--muted);max-width:360px;font-size:15px}
.gameplay{border:1px solid var(--line);padding:6px;background:#12191a}
.gameplay img{width:100%}
.gameplay figcaption{display:flex;justify-content:space-between;padding:9px 7px 3px;color:var(--muted);font-size:12px}
.steps{padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:24px 0 0}
.steps li{padding:17px 0 0;border-top:1px solid var(--line)}
.steps span{color:var(--gold);font-size:12px;letter-spacing:.12em}
h3{font:400 29px/1.2 var(--serif);margin:5px 0}
.steps p,.cards p:not(.eyebrow),.test-note,.footer p{color:var(--muted);font-size:14px}
.factions{background:linear-gradient(120deg,#122221,#0c1519 70%);border-block:1px solid #3e4a42}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards article{display:grid;grid-template-columns:minmax(95px,35%) 1fr;align-items:center;border:1px solid #656046;background:radial-gradient(ellipse at 16% 80%,#354e50,transparent 55%),var(--panel);padding:18px;gap:15px}
.cards article+article{background:radial-gradient(ellipse at 16% 80%,#39523c,transparent 55%),var(--panel)}
.cards article:last-child{background:radial-gradient(ellipse at 16% 80%,#66382a,transparent 55%),var(--panel)}
@media(min-width:761px) and (max-width:1100px){.cards article{grid-template-columns:1fr}.cards img{width:110px;justify-self:center}}
.test-note{margin-top:12px}
.footer{border-top:1px solid #303c3d;background:#080c10}
.footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:22px}
.footer .brand{font-size:20px}
.footer .wrap>a:last-child{color:var(--gold);font-size:13px}
@media(max-width:760px){.wrap{width:calc(100% - 38px)}.top{padding:12px 19px;flex-wrap:wrap;gap:12px}.top nav{order:3;flex-basis:100%;justify-content:space-between}.brand{font-size:22px}.brand img{width:34px}.hero{padding-top:145px;min-height:640px;background-position:66% center}.hero::before{background:linear-gradient(90deg,#070d12f5,#070d1290 72%,#070d1240),linear-gradient(0deg,#080e13,transparent 30%)}.section-title{display:block}.section-title>p{margin-top:12px}.cards{grid-template-columns:1fr}.steps{gap:12px}.steps h3{font-size:22px}.footer .wrap{flex-wrap:wrap}}
@media(max-width:470px){.steps{grid-template-columns:1fr}.top nav{font-size:13px}.hero-foot{letter-spacing:.09em;font-size:9px}.hero{min-height:610px}.actions{gap:12px}.gameplay figcaption{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}