:root{color-scheme:light;--ink:#29251f;--muted:#6b6258;--paper:#fffdf8;--line:#e8dfd1;--brand:#d99117;--soft:#f7f0e5}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.72 system-ui,-apple-system,"Segoe UI",sans-serif}.article-header{border-bottom:1px solid var(--line);background:#fff;}.article-nav,.article-main,.article-footer{width:min(100% - 36px,900px);margin-inline:auto}.article-nav{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px}.article-brand{font-size:1.12rem;font-weight:800;color:var(--ink);text-decoration:none}.article-nav a:last-child,.article-back{color:#8a590b;text-decoration:none;font-weight:650}.article-main{padding:44px 0 70px}.article-eyebrow{margin:0 0 8px;color:#966212;font-size:.83rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.article-title{max-width:780px;margin:0;font-size:clamp(2rem,6vw,3.2rem);line-height:1.15;letter-spacing:-.035em}.article-description{max-width:720px;margin:18px 0;color:var(--muted);font-size:1.16rem}.article-meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.9rem}.article-prose{max-width:720px;margin:38px 0 0}.article-prose h2{margin:32px 0 8px;font-size:1.45rem;line-height:1.3}.article-prose p{margin:0 0 16px}.article-list{display:grid;gap:18px;margin-top:30px}.article-card{padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:#fff;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}.article-card:hover{border-color:var(--brand);transform:translateY(-2px)}.article-card h2{margin:8px 0;font-size:1.35rem;line-height:1.3}.article-card p{margin:0;color:var(--muted)}.article-card-meta{font-size:.84rem;color:#8a590b}.article-footer{padding:22px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}.article-footer a{color:#8a590b;text-decoration:none}@media(max-width:600px){.article-nav,.article-main,.article-footer{width:min(100% - 28px,900px)}.article-main{padding-top:30px}.article-card{padding:18px}.article-description{font-size:1.05rem}}

/* Use the shared game header and theme tokens on static article pages. */
body.article-page { --ink:var(--text-main); --muted:var(--text-muted); --paper:var(--bg-primary); --line:var(--border-color); --brand:var(--accent-amber); color-scheme:normal; }
.article-page .article-card { background:var(--bg-secondary); }
.article-page :is(.article-eyebrow,.article-card-meta,.article-back,.article-footer a,.article-header-link) { color:var(--accent-amber); }
.article-header-link { text-decoration:none; font-weight:650; white-space:nowrap; }
html body.article-page .article-app-header { display:flex!important; position:relative!important; height:auto!important; min-height:60px; padding:12px 24px!important; gap:12px!important; margin:0!important; flex-wrap:nowrap!important; overflow:visible!important; }
html body.article-page .article-app-header .logo-area { display:flex!important; width:auto!important; min-width:0; gap:10px; }
html body.article-page .article-app-header #header-brand-name { display:inline-flex!important; position:static!important; transform:none!important; font-size:22px; }
html body.article-page .article-app-header .header-right-group { display:flex!important; position:static!important; width:auto!important; flex-shrink:0; }
html body.article-page .article-app-header #game-menu-container { display:block!important; position:static!important; width:auto!important; }
.article-page .game-nav-item[hidden] { display:none!important; }
.article-page .article-main { flex:1; }
@media(max-width:640px) {
  html body.article-page .article-app-header { min-height:52px; padding:8px 12px!important; gap:8px!important; }
  html body.article-page .article-app-header #header-brand-name { font-size:18px!important; }
  .article-page #btn-game-menu, .article-page .article-header-link { display:none!important; }
  html body.article-page .article-app-header .logo-area { flex:1; justify-content:flex-start!important; }
  html body.article-page .article-app-header .game-menu-dropdown { position:absolute!important; top:calc(100% + 8px)!important; left:10px!important; right:10px!important; width:auto!important; max-width:none!important; transform:none!important; max-height:calc(100dvh - 76px)!important; }
}