@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,700&display=swap');

:root { --ink:#eee9df; --muted:#aaa397; --paper:#17140f; --panel:#211d17; --line:#3b342a; --gold:#e6b85c; --red:#d75c45; --max:1180px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope, sans-serif; line-height:1.65; }
a { color:inherit; }
.skip-link { position:absolute; left:-9999px; top:1rem; background:var(--gold); color:#17140f; padding:.6rem 1rem; z-index:10; }
.skip-link:focus { left:1rem; }
.site-header { max-width:var(--max); margin:auto; padding:1.4rem 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; gap:.7rem; align-items:center; text-decoration:none; font-weight:700; letter-spacing:-.02em; }
.brand small { display:block; color:var(--muted); font:400 .64rem/1.2 DM Mono, monospace; letter-spacing:.08em; text-transform:uppercase; }
.brand-mark { display:grid; place-items:center; width:42px; aspect-ratio:1; color:#17140f; background:var(--gold); font:500 .72rem DM Mono, monospace; border-radius:50%; }
nav { display:flex; gap:1.6rem; }
nav a { color:var(--muted); text-decoration:none; font-size:.9rem; }
nav a:hover, nav a[aria-current] { color:var(--ink); }
main { min-height:70vh; }
.hero, .archive-section, .game-page, .about-hero, .principles { max-width:var(--max); margin:auto; padding-left:24px; padding-right:24px; }
.hero { min-height:490px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:4rem; }
.kicker, .eyebrow, .section-number { margin:0 0 .7rem; color:var(--gold); font:500 .72rem DM Mono, monospace; letter-spacing:.12em; text-transform:uppercase; }
h1, h2, p { margin-top:0; }
h1 { margin-bottom:1.5rem; font-size:clamp(3rem, 7vw, 6.7rem); line-height:.94; letter-spacing:-.065em; }
h1 em { color:var(--gold); font-family:Playfair Display, serif; font-weight:700; }
.hero-copy { max-width:650px; color:var(--muted); font-size:1.12rem; }
.hero-stat { min-width:190px; padding:2rem; border:1px solid var(--line); border-radius:100px; text-align:center; }
.hero-stat strong, .hero-stat span { display:block; }
.hero-stat strong { font-size:2.4rem; color:var(--gold); }
.hero-stat span { margin-bottom:1rem; color:var(--muted); font:400 .68rem DM Mono, monospace; text-transform:uppercase; }
.archive-section { padding-top:5rem; padding-bottom:7rem; border-top:1px solid var(--line); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:2rem; }
.section-heading h2 { font-size:2.4rem; }
.section-heading > p { color:var(--muted); font:400 .72rem DM Mono, monospace; }
.filters { margin:2rem 0 2.4rem; display:flex; gap:1.4rem; justify-content:space-between; align-items:end; }
.filters label { flex:1; max-width:420px; }
.filters label span { display:block; margin-bottom:.5rem; color:var(--muted); font:400 .68rem DM Mono, monospace; text-transform:uppercase; }
input { width:100%; padding:.9rem 1rem; color:var(--ink); background:#100e0b; border:1px solid var(--line); border-radius:4px; font:inherit; }
input:focus { outline:2px solid var(--gold); outline-offset:2px; }
.platform-filters { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.45rem; }
button { padding:.55rem .75rem; border:1px solid var(--line); border-radius:3px; color:var(--muted); background:transparent; cursor:pointer; font:400 .68rem DM Mono, monospace; }
button:hover, button.is-active { border-color:var(--gold); color:#17140f; background:var(--gold); }
.game-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.game-card { min-width:0; background:var(--paper); }
.game-card[hidden] { display:none; }
.game-card a { display:block; height:100%; padding:1.1rem; text-decoration:none; transition:background .2s ease; }
.game-card a:hover { background:var(--panel); }
.game-art { position:relative; aspect-ratio:3/4; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:1.15rem; background:linear-gradient(145deg,#5c3025,#1d1712 70%); border:1px solid #604735; box-shadow:0 20px 50px #0005; }
.game-art::after { content:""; position:absolute; inset:10px; border:1px solid #ffffff26; pointer-events:none; }
.game-art span, .game-art i { z-index:1; font:500 .65rem DM Mono, monospace; letter-spacing:.12em; text-transform:uppercase; }
.game-art b { z-index:1; max-width:90%; font-size:clamp(1.25rem,2vw,2rem); line-height:1.02; letter-spacing:-.04em; }
.game-art i { align-self:end; color:var(--gold); font-style:normal; }
.art-nes { background:linear-gradient(150deg,#983e32,#241b18 72%); }.art-snes { background:linear-gradient(150deg,#685d8b,#211d2b 72%); }.art-genesis { background:linear-gradient(150deg,#2e5b80,#101b25 72%); }.art-game-boy { background:linear-gradient(150deg,#788f44,#202619 72%); }.art-ps1 { background:linear-gradient(150deg,#5d5d61,#19191b 72%); }.art-xbox { background:linear-gradient(150deg,#357f3a,#142116 72%); }
.card-copy { padding:.95rem .15rem .35rem; }
.card-copy h2 { margin-bottom:.65rem; font-size:1.15rem; line-height:1.2; }
.card-copy > p:not(.eyebrow) { color:var(--muted); font-size:.84rem; line-height:1.55; }
.read-more { color:var(--gold); font:500 .67rem DM Mono, monospace; text-transform:uppercase; }
.empty-state { padding:4rem; text-align:center; color:var(--muted); }
.game-page { padding-top:3rem; padding-bottom:8rem; }
.back-link { display:inline-block; margin-bottom:2rem; color:var(--muted); text-decoration:none; font:400 .72rem DM Mono, monospace; }
.game-hero { display:grid; grid-template-columns:minmax(260px, 420px) 1fr; gap:clamp(3rem,8vw,8rem); align-items:center; padding-bottom:6rem; border-bottom:1px solid var(--line); }
.game-art-large { width:100%; }
.game-hero h1 { font-size:clamp(3rem,6vw,6rem); }
.game-dek { max-width:700px; color:var(--muted); font-size:1.15rem; }
dl { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2.5rem; }
dt { color:var(--muted); font:400 .62rem DM Mono, monospace; text-transform:uppercase; }
dd { margin:.25rem 0 0; font-size:.85rem; }
.article-layout { display:grid; grid-template-columns:minmax(0, 2fr) minmax(260px, 1fr); gap:clamp(3rem,8vw,8rem); padding-top:5rem; }
.article-copy section { display:grid; grid-template-columns:50px 180px 1fr; gap:1rem; padding:0 0 4rem; }
.article-copy h2 { font-size:1.35rem; }
.article-copy section > p:last-child { color:#cbc4b8; }
.checklist { position:sticky; top:2rem; padding:2rem; background:var(--panel); border-top:3px solid var(--gold); }
.checklist h2 { font-size:1.45rem; }
.checklist ul { margin:1.5rem 0 0; padding:0; list-style:none; }
.checklist li { padding:.8rem 0 .8rem 1.5rem; border-top:1px solid var(--line); color:#cbc4b8; font-size:.88rem; }
.checklist li::before { content:"□"; margin-left:-1.5rem; margin-right:.7rem; color:var(--gold); }
.editorial-note { margin-top:1rem; color:var(--muted); font-size:.72rem; }
.about-hero { max-width:900px; padding-top:7rem; padding-bottom:6rem; }
.about-hero h1 { font-size:clamp(3rem,7vw,6rem); }
.about-hero > p:last-child { max-width:700px; color:var(--muted); font-size:1.2rem; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); padding-bottom:8rem; }
.principles article { padding:2rem; border:1px solid var(--line); }
.principles span { color:var(--gold); font:400 .72rem DM Mono, monospace; }
.principles p { color:var(--muted); }
footer { max-width:var(--max); margin:auto; padding:3rem 24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:2rem; color:var(--muted); font-size:.8rem; }
footer p { margin:.35rem 0 0; }
.footer-note { max-width:400px; text-align:right; }
@media (max-width:950px) { .game-grid{grid-template-columns:repeat(2,1fr)} .game-hero{grid-template-columns:300px 1fr;gap:3rem}.article-copy section{grid-template-columns:45px 1fr}.article-copy section>p:last-child{grid-column:2}.principles{grid-template-columns:1fr}.filters{align-items:stretch;flex-direction:column}.platform-filters{justify-content:flex-start} }
@media (max-width:680px) { .site-header{align-items:flex-start}.brand small{display:none}.hero{display:block;min-height:auto;padding-top:6rem;padding-bottom:5rem}.hero-stat{display:none}h1{font-size:3.3rem}.game-grid{grid-template-columns:1fr}.game-card a{display:grid;grid-template-columns:120px 1fr;gap:1rem}.game-art{aspect-ratio:3/4;padding:.7rem}.game-art b{font-size:1rem}.game-hero{grid-template-columns:1fr}.game-hero>div:first-child{max-width:260px;margin:auto}.game-hero h1{font-size:3.4rem}dl{grid-template-columns:1fr 1fr}.article-layout{grid-template-columns:1fr}.article-copy section{display:block}.article-copy .section-number{margin-bottom:.3rem}.checklist{position:static}.about-hero{padding-top:5rem}.principles{padding-bottom:5rem}footer{display:block}.footer-note{text-align:left;margin-top:2rem} }
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto} }