/* Article pages use photography directly below the fixed navigation. Keep the
   header on the same solid surface as game pages so artwork never shows through. */
.site-header:not(#site-header) {
  background: rgba(8,8,15,.98);
  border-bottom: 1px solid var(--clr-border);
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.site-header:not(#site-header) .logo-icon { color: transparent; }
.article-page { padding: calc(var(--header-h) + var(--sp-8)) 0 var(--sp-20); }
.article-shell { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:.55rem; color:var(--txt-secondary); font-size:.9rem; margin-bottom:var(--sp-6); }
.breadcrumbs a { color:var(--cyan-l); text-decoration:underline; text-underline-offset:3px; }
.article-hero { overflow:hidden; border:1px solid var(--clr-border); border-radius:var(--r-2xl); background:var(--clr-surface); box-shadow:var(--shadow-card); }
.article-hero img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.article-hero-copy { padding:clamp(1.4rem,5vw,3.5rem); }
.article-kicker { color:var(--pink-l); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; }
.article-title { font-family:var(--ff-heading); font-size:clamp(2.1rem,7vw,4.5rem); line-height:1.02; margin:.65rem 0 1rem; }
.article-dek { color:var(--txt-secondary); font-size:clamp(1rem,2vw,1.22rem); max-width:70ch; }
.article-meta { margin-top:1rem; color:var(--txt-muted); font-size:.88rem; }
.article-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:clamp(2rem,5vw,4rem); margin-top:var(--sp-10); align-items:start; }
.article-body { max-width:760px; min-width:0; }
.article-body h2 { font-family:var(--ff-heading); font-size:clamp(1.65rem,4vw,2.35rem); line-height:1.15; margin:3.3rem 0 1rem; scroll-margin-top:6rem; }
.article-body h3 { font-family:var(--ff-heading); font-size:1.3rem; margin:2rem 0 .75rem; scroll-margin-top:6rem; }
.article-body p { color:#cbd5e1; margin:.85rem 0; }
.article-body a:not(.btn) { color:var(--cyan-l); text-decoration:underline; text-underline-offset:3px; }
.article-body ul,.article-body ol { list-style:revert; padding-left:1.35rem; color:#dbe4ef; }
.article-body li { margin:.58rem 0; padding-left:.2rem; }
.question-list { counter-reset:item; list-style:none!important; padding:0!important; display:grid; gap:.65rem; }
.question-list li { position:relative; padding:.85rem 1rem .85rem 3.1rem; margin:0; background:rgba(255,255,255,.035); border:1px solid var(--clr-border); border-radius:var(--r-md); }
.question-list li::before { counter-increment:item; content:counter(item); position:absolute; left:.85rem; top:.72rem; width:1.55rem; height:1.55rem; display:grid; place-items:center; border-radius:50%; background:var(--grad-purple); font-size:.75rem; font-weight:800; }
.note,.play-cta { border:1px solid rgba(168,85,247,.3); background:linear-gradient(135deg,rgba(168,85,247,.12),rgba(6,182,212,.07)); border-radius:var(--r-xl); padding:1.25rem; margin:1.5rem 0; }
.play-cta h2,.play-cta h3 { margin-top:0; }
.toc { position:sticky; top:calc(var(--header-h) + 1rem); padding:1.2rem; border:1px solid var(--clr-border); border-radius:var(--r-lg); background:rgba(13,13,26,.92); }
.toc strong { display:block; font-family:var(--ff-heading); margin-bottom:.7rem; }
.toc ul { list-style:none; padding:0; display:grid; gap:.45rem; }
.toc a { color:var(--txt-secondary); font-size:.88rem; }
.toc a:hover { color:var(--cyan-l); }
.fact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.idea-card { border:1px solid var(--clr-border); background:var(--clr-surface); border-radius:var(--r-lg); padding:1.15rem; }
.idea-card h3 { margin:0 0 .55rem; }
.idea-card dl { display:grid; grid-template-columns:auto 1fr; gap:.3rem .65rem; font-size:.88rem; color:#cbd5e1; }
.idea-card dt { color:var(--txt-muted); font-weight:700; }
.table-wrap { overflow-x:auto; border:1px solid var(--clr-border); border-radius:var(--r-lg); }
table { width:100%; border-collapse:collapse; min-width:650px; }
th,td { padding:.8rem; text-align:left; border-bottom:1px solid var(--clr-border); vertical-align:top; }
th { background:rgba(168,85,247,.13); font-family:var(--ff-heading); }
td { color:#cbd5e1; }
.faq details { border-top:1px solid var(--clr-border); padding:1rem 0; }
.faq summary { cursor:pointer; font-family:var(--ff-heading); font-weight:700; }
.related-grid,.article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.article-card { display:flex; flex-direction:column; border:1px solid var(--clr-border); border-radius:var(--r-xl); overflow:hidden; background:var(--clr-surface); transition:transform var(--t-base),border-color var(--t-base); }
.article-card:hover { transform:translateY(-4px); border-color:rgba(168,85,247,.45); }
.article-card img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.article-card-content { padding:1rem; display:flex; flex-direction:column; flex:1; }
.article-card h3 { font-family:var(--ff-heading); font-size:1.15rem; margin:0 0 .45rem; }
.article-card p { color:var(--txt-secondary); font-size:.9rem; margin-bottom:1rem; }
.article-card span { margin-top:auto; color:var(--cyan-l); font-weight:700; }
.hub-hero { padding:calc(var(--header-h) + var(--sp-16)) 0 var(--sp-10); text-align:center; }
.hub-hero h1 { font-family:var(--ff-heading); font-size:clamp(2.3rem,7vw,4.6rem); }
@media(max-width:1024px){.site-header:not(#site-header) .nav-links{display:flex}}
@media(max-width:900px){.article-layout{grid-template-columns:1fr}.toc{position:static;order:-1}.toc ul{grid-template-columns:repeat(2,1fr)}.related-grid,.article-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.site-header:not(#site-header) .nav-links{display:none}}
@media(max-width:600px){.fact-grid,.related-grid,.article-grid{grid-template-columns:1fr}.toc ul{grid-template-columns:1fr}.article-shell{width:min(100% - 1.25rem,1120px)}.article-hero{border-radius:var(--r-xl)}}