@charset "UTF-8";
/* Warhammer Guide — 暗黑武侠 skin (single visual file). Injected as the last stylesheet.
   Their tokens: --paper = background, --ink = text. Remapped to dark wuxia. */

/* 暗黑武侠为默认档：同时命中 :root 与 [data-theme=dark]，
   保证站点自带的偏好脚本切换主题时也走同一套令牌 */
:root,:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0B0D0B;   /* background */
  --ink:#EAE6DA;     /* text */
  --muted:#ADADA0;
  --line:#2E342C;
  --gold:#D3AE62;    /* bronze */
  --jade:#CE4B3E;    /* blade red */
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --serif:'Cormorant Garamond','Iowan Old Style',Georgia,serif;
  --blade:#CE4B3E;
  --bronze:#D3AE62;
  --panel:#191D18;
  --panel-2:#212620;
  --radius:14px;
}

/* 亮色档（宣纸）：只有当访客主动切到 light 时生效 */
:root[data-theme="light"]{
  color-scheme:light;
  --paper:#F2EDE2;
  --ink:#232620;
  --muted:#5C6157;
  --line:#DED8C8;
  --gold:#8A6A22;
  --jade:#A8382C;
  --blade:#A8382C;
  --bronze:#8A6A22;
  --panel:#FFFDF8;
  --panel-2:#F4EFE4;
}
:root[data-theme="light"] .hero h1{color:#F6F2E8}
:root[data-theme="light"] .status-strip,
:root[data-theme="light"] .card,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .guide-card,
:root[data-theme="light"] .mod-card,
:root[data-theme="light"] .question,
:root[data-theme="light"] .feature{background:var(--panel)}
:root[data-theme="light"] ::selection{background:var(--bronze);color:#FFFDF8}

/* ---------- base ---------- */
body{background:var(--paper);color:var(--ink);font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--ink);letter-spacing:-.015em}
h1{font-size:clamp(40px,6vw,76px);letter-spacing:-.03em}
h2{font-size:clamp(28px,3.2vw,40px)}
h3{font-size:clamp(20px,2.2vw,25px)}
p{color:var(--muted);font-size:16px;line-height:1.8}
a{color:inherit}
strong{color:var(--ink)}
::selection{background:var(--blade);color:#fff}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--bronze);outline-offset:4px}

/* ---------- header ---------- */
.site-header{background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;height:auto;min-height:88px}
.brand{color:var(--ink);font-size:17px}
.brand svg{color:var(--blade)}
.brand-bottom{color:var(--muted);font-size:10px;letter-spacing:3px}
.site-header nav>a{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:.3px}
.site-header nav>a:hover,.site-header nav>a.active{color:var(--ink)}
.site-header nav>a.active:after{background:var(--blade);width:24px}
.new{background:color-mix(in srgb,var(--blade) 25%,transparent);color:var(--bronze);font-size:10px;letter-spacing:1.2px;border-radius:4px}
.search-trigger{border:1px solid var(--line);color:var(--muted);font-size:13px;border-radius:8px;padding:10px 14px}
.search-trigger:hover{border-color:var(--blade);color:var(--blade)}
.search-trigger kbd{border-color:var(--line)}

/* ---------- hero ---------- */
.hero{min-height:560px;background:#0A0C0A}
.hero h1{color:#F6F2E8;text-shadow:0 2px 30px rgba(0,0,0,.55)}
.hero-content{padding-top:90px}
.hero p{color:#C9C7B8}

/* ---------- sections, cards, panels ---------- */
.section{position:relative}
.status-strip{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.card,.panel,.guide-card,.mod-card,.question,.feature{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);transition:transform .18s,border-color .18s}
.card:hover,.panel:hover,.guide-card:hover,.mod-card:hover{border-color:var(--line);transform:translateY(-3px)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--bronze);text-transform:uppercase}
.eyebrow:before{content:'';display:inline-block;width:16px;height:1px;background:var(--blade);vertical-align:middle;margin-right:10px;margin-bottom:3px}
.tag,.badge,.pill{border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:11px;letter-spacing:1px;padding:4px 11px}

/* ---------- prose ---------- */
.prose,.article-body,.answer{max-width:70ch}
.prose h2,.article-body h2{font-size:clamp(24px,2.6vw,31px);margin-bottom:14px}
.prose p,.article-body p{font-size:17px;line-height:1.85}
a:not(.brand):not(.button){text-underline-offset:3px}
.prose a,.article-body a,.answer a{color:var(--bronze);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--bronze) 45%,transparent)}
table{border-color:var(--line)}
th{background:var(--panel);color:var(--ink);font-size:14px}
td{color:var(--muted);font-size:15px;border-color:var(--line)}
blockquote,.callout,.answer-box{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--blade);border-radius:0 var(--radius) var(--radius) 0;padding:20px 24px}

/* ---------- buttons / footer ---------- */
.button,.cta,button.primary{background:var(--blade);border:1px solid var(--blade);color:#fff;border-radius:10px;font-size:14px;font-weight:600;padding:12px 22px;box-shadow:0 8px 26px rgba(206,75,62,.26)}
.button:hover,.cta:hover{background:#B83F33;border-color:#B83F33}
footer,.site-footer{border-top:1px solid var(--line);background:var(--paper);color:var(--muted)}
footer a,.site-footer a{color:var(--muted);font-size:14px}
footer a:hover,.site-footer a:hover{color:var(--bronze)}

/* ---------- ads ---------- */
.ad-slot,.ad-banner,.sponsor{border-radius:var(--radius)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .site-header{flex-wrap:wrap;gap:22px;padding:16px 5%}
  .site-header nav{gap:20px}
  h1{font-size:clamp(34px,8vw,56px)}
}
@media (max-width:650px){
  body{font-size:16px}
  .site-header{padding:14px 5%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* ============================================================
   v2 打磨（2026-09-22）· 氛围光 / 滚动条 / 代码 / 图片 / 表格层次
   ============================================================ */

/* 1. 顶部氛围光：刀锋红与铜金薄晕 */
body{
  background:
    radial-gradient(58% 460px at 88% -110px,rgba(206,75,62,.1),transparent 70%),
    radial-gradient(52% 540px at -6% 280px,rgba(211,174,98,.07),transparent 72%),
    var(--paper);
  background-attachment:fixed;
}
:root[data-theme="light"] body{
  background:
    radial-gradient(58% 460px at 88% -110px,rgba(168,56,44,.05),transparent 70%),
    radial-gradient(52% 540px at -6% 280px,rgba(138,106,34,.07),transparent 72%),
    var(--paper);
  background-attachment:fixed;
}

/* 2. 滚动条 */
html{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:2px solid var(--paper)}
::-webkit-scrollbar-thumb:hover{background:var(--bronze)}

/* 3. 卡片悬浮落地阴影 */
.card:hover,.panel:hover,.guide-card:hover,.mod-card:hover{box-shadow:0 14px 34px -16px rgba(0,0,0,.55)}
:root[data-theme="light"] .card:hover,:root[data-theme="light"] .panel:hover,
:root[data-theme="light"] .guide-card:hover,:root[data-theme="light"] .mod-card:hover{
  box-shadow:0 14px 30px -16px rgba(78,62,38,.26)
}

/* 4. 正文细节：图片收边、行内代码、代码块 */
.prose img,.article-body img{border-radius:10px;border:1px solid var(--line)}
.prose code,.article-body code{background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:.08em .38em;font-size:.88em;color:var(--bronze)}
.prose pre,.article-body pre{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.prose pre code,.article-body pre code{background:none;border:0;padding:0;color:inherit}

/* 5. 表格行悬浮 / 分隔线 / 折叠块 / 按钮按压 */
tbody tr:hover td{background:color-mix(in srgb,var(--blade) 8%,transparent)}
hr{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
details>summary{cursor:pointer}
details>summary::marker{color:var(--bronze)}
.button:active,.cta:active,button.primary:active{transform:translateY(1px)}

/* Hela-inspired visual pass: black metal, captured battle art, and focused reading. */
:root,:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0d0d0f;--ink:#e8e4dc;--muted:#aaa49a;--line:#2a2a30;
  --gold:#c9a962;--bronze:#c9a962;--jade:#8b2e2e;--blade:#8b2e2e;
  --panel:#16161a;--panel-2:#202025;--radius:12px;
  --reading-bg:var(--paper);--reading-background:var(--paper);
  --reading-panel:var(--panel);--reading-raised:var(--panel-2);
  --reading-text:var(--ink);--reading-muted:var(--muted);
  --reading-line:var(--line);--reading-accent:var(--gold);
}
:root[data-theme="light"]{
  color-scheme:light;
  --paper:#fff;--ink:#171719;--muted:#5f6064;--line:#dedee1;
  --gold:#8d6f32;--bronze:#8d6f32;--jade:#8b2e2e;--blade:#8b2e2e;
  --panel:#fff;--panel-2:#f3f3f4;--radius:12px;
  --reading-bg:var(--paper);--reading-background:var(--paper);
  --reading-panel:var(--panel);--reading-raised:var(--panel-2);
  --reading-text:var(--ink);--reading-muted:var(--muted);
  --reading-line:var(--line);--reading-accent:var(--gold);
}

html{scroll-padding-top:92px}
body{
  color:var(--ink);
  background:radial-gradient(72% 440px at 50% -190px,rgba(201,169,98,.09),transparent 74%),var(--paper);
  background-attachment:fixed;
}
:root[data-theme="light"] body{background:#fff}
a{color:var(--gold)}
a:hover{color:color-mix(in srgb,var(--gold) 78%,white)}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

.site-header{
  position:sticky;top:0;z-index:80;
  background:rgba(10,10,12,.91);color:#eee9df;
  border:0;border-bottom:1px solid rgba(201,169,98,.18);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 12px 30px rgba(0,0,0,.17);
}
.site-header::after{
  content:"";position:absolute;bottom:-1px;left:4%;right:4%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(201,169,98,.68),transparent);
}
:root[data-theme="light"] .site-header{background:rgba(255,255,255,.94);color:#171719;border-bottom-color:rgba(80,72,55,.18);box-shadow:0 12px 28px rgba(20,20,24,.07)}
:root[data-theme="light"] .site-header::after{background:linear-gradient(90deg,transparent,rgba(141,111,50,.55),transparent)}
.site-header #main-nav>a,.site-header .games-switch summary{transition:color .2s ease,border-color .2s ease}
.site-header #main-nav>a:hover,.site-header .games-switch summary:hover{color:var(--gold)}
.site-header .search-trigger,.site-header .theme-switch summary,.site-header .language-switch summary,.site-header .menu-toggle{
  border-color:rgba(201,169,98,.28);background:rgba(255,255,255,.035);border-radius:6px;
}
:root[data-theme="light"] .site-header .search-trigger,:root[data-theme="light"] .site-header .theme-switch summary,
:root[data-theme="light"] .site-header .language-switch summary,:root[data-theme="light"] .site-header .menu-toggle{background:#fff;border-color:var(--line)}

.hub-hero{
  position:relative;isolation:isolate;display:flex;align-items:center;overflow:hidden;
  width:100%;min-height:clamp(620px,calc(100svh - 74px),850px);margin:0;padding:0;
  color:#f5f1e8;background:#090a0d;border:0;border-radius:0;
}
.hub-hero-art{position:absolute!important;inset:0!important;z-index:0;width:100%;height:100%;opacity:1;overflow:hidden}
.hub-hero-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%;filter:saturate(.92) contrast(1.04)}
.hub-hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,6,8,.96) 0%,rgba(5,6,8,.84) 28%,rgba(5,6,8,.42) 54%,rgba(5,6,8,.06) 82%),
    linear-gradient(0deg,#0d0d0f 0%,rgba(9,10,12,.58) 13%,transparent 44%,rgba(5,6,8,.16) 100%);
}
.hub-hero::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:5rem;background:linear-gradient(0deg,var(--paper),transparent);pointer-events:none}
.hub-hero-copy{
  position:relative;z-index:2;width:min(1240px,90%);max-width:1240px;margin:0 auto;
  padding:clamp(82px,12vh,138px) 0 clamp(126px,17vh,176px);color:#f2eee6;
}
.hub-hero-copy>.eyebrow{color:#dfc782;letter-spacing:.19em;font-size:11px}
.hub-hero-copy h1{
  max-width:1120px;margin:24px 0 24px;color:#f6f2e9;
  font-family:var(--serif);font-size:clamp(3.2rem,6vw,5.5rem);font-weight:700;
  line-height:.98;letter-spacing:.012em;text-shadow:0 5px 28px rgba(0,0,0,.48);text-wrap:balance;
}
.hub-hero-copy h1 em{color:#e2c681;font-style:normal}
.hub-hero-copy>p{max-width:610px;margin:0;color:#e0ddd6;font-size:clamp(16px,1.5vw,19px);line-height:1.75}
.hero-actions{gap:13px;margin-top:30px}
.hero-actions .button.gold{position:relative;overflow:hidden;border:1px solid #ddc27e;border-radius:5px;background:#c9a962;color:#171411;box-shadow:0 10px 28px #0005}
.hero-actions .button.gold::after{content:"";position:absolute;inset:0;transform:translateX(-120%);background:linear-gradient(110deg,transparent 25%,#fff7 50%,transparent 75%);transition:transform .5s ease}
.hero-actions .button.gold:hover::after{transform:translateX(120%)}
.hero-actions .hero-search{border:1px solid rgba(236,228,207,.48);border-radius:5px;background:rgba(10,11,13,.34);color:#f5f1e8;backdrop-filter:blur(5px)}
.hero-actions .hero-search:hover{border-color:var(--gold);background:rgba(10,11,13,.66)}
.hero-footnote{color:#d5d0c7;letter-spacing:.09em}
.hero-art-note{position:absolute;right:5%;bottom:22px;z-index:3;padding:7px 10px;border:1px solid #ffffff24;border-radius:3px;background:#08090bb0;color:#e5e1d8;font-size:10px;letter-spacing:.04em}

.hub-section,.answers-section,.updates-section{color:var(--ink)}
.hub-section{width:min(1280px,92%);margin:clamp(54px,7vw,92px) auto;padding:0;background:transparent;border-color:var(--line)}
.section-heading{align-items:end;margin-bottom:26px}
.section-heading .eyebrow,.questions-heading .eyebrow{color:var(--gold);letter-spacing:.17em}
.section-heading h2,.questions-heading h2{font-family:var(--serif);font-size:clamp(32px,4.3vw,50px);line-height:1.08;color:var(--ink)}
.section-heading>p,.section-note{color:var(--muted)}
.game-family{display:flex;align-items:baseline;gap:16px;margin:8px 0 15px;padding:0 0 12px;border-bottom:1px solid var(--line)}
.game-family h3{margin:0;color:var(--ink);font-family:var(--serif);font-size:20px}
.game-family>span{color:var(--muted);font-size:12px}
.game-grid.strategy-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.game-grid .game-card{
  position:relative;display:block;min-height:420px;overflow:hidden;border:1px solid #ffffff24;
  border-radius:10px;background:var(--panel);box-shadow:0 18px 48px rgba(0,0,0,.25);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.game-grid .game-card:hover,.game-grid .game-card:focus-visible{transform:translateY(-4px);border-color:rgba(201,169,98,.88);box-shadow:0 28px 58px rgba(0,0,0,.36)}
.game-card-art{position:absolute;inset:0;z-index:0;width:100%;height:100%;aspect-ratio:auto;overflow:hidden;background:var(--panel-2)}
.game-card-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,9,11,.97) 0%,rgba(8,9,11,.82) 28%,rgba(8,9,11,.16) 73%,rgba(8,9,11,.02) 100%)}
.game-card-art img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .35s ease}
.game-card:hover .game-card-art img{transform:scale(1.045);filter:brightness(1.07)}
.game-card .art-chip{top:16px;right:16px;bottom:auto;z-index:1;padding:6px 9px;border:1px solid #ffffff53;border-radius:3px;background:#090a0dcc;color:#f3ead6;font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.game-card-copy{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;min-height:0;padding:34px 34px 28px;flex-direction:column;color:#f2eee6}
.game-card-copy>.eyebrow{color:#e2c681;letter-spacing:.16em}
.game-card h3{margin:12px 0 10px;color:#f6f2e9;font-family:var(--serif);font-size:clamp(25px,3vw,38px);line-height:1.08;text-shadow:0 2px 14px #0009}
.game-card p{max-width:520px;margin:0 0 22px;color:#ded9d0;font-size:14px;line-height:1.55}
.game-card .card-action{padding-top:13px;border-top:1px solid #ffffff49;color:#ead49b;font-size:12px;letter-spacing:.04em}

.answers-section{width:min(1280px,92%);margin:0 auto;padding:clamp(42px,6vw,72px) 0;border-color:var(--line)}
.answer-grid{gap:12px}
.answer-grid>a,.mod-directory>a,.quick-brief,.brief-card{
  border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.answer-grid>a{padding:22px 24px}
.answer-grid>a+a{padding-left:24px;border-left:1px solid var(--line)}
.answer-grid>a:hover,.mod-directory>a:hover,.quick-brief:hover,.brief-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--gold) 65%,var(--line));box-shadow:0 16px 36px #0003}
.answer-grid h3,.mod-directory h3{color:var(--ink);font-family:var(--serif)}
.answer-grid p,.mod-directory p{color:var(--muted)}
.updates-section{width:min(1280px,92%);margin:clamp(48px,6vw,78px) auto;padding-top:30px;border-top:1px solid var(--line)}
.update-row{border-color:var(--line);color:var(--ink)}
.update-row time{color:var(--muted)}

.article-hero,.briefing-hero{
  position:relative;isolation:isolate;display:flex;min-height:clamp(430px,58vw,590px);
  align-items:center;overflow:hidden;border:0;border-radius:0;background:#090a0d;color:#f2eee6;
}
.article-hero .hero-art,.briefing-hero .future-panel{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;opacity:1;background-size:cover;background-position:center 42%;
}
.article-hero::before,.briefing-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#08090cf2 0%,#08090cbb 36%,#08090c20 78%),linear-gradient(0deg,#0d0d0f 0%,transparent 34%);pointer-events:none}
.article-hero-inner{position:relative;z-index:2;width:min(1160px,90%);max-width:1160px;margin:0 auto;padding:90px 0 82px;color:#f2eee6}
.article-hero .breadcrumbs{margin-bottom:28px;color:#d2c8b1}
.article-hero .breadcrumbs a{color:#e0c477}
.article-hero-inner>.eyebrow{color:#e0c477;letter-spacing:.16em}
.article-hero h1{max-width:890px;margin:22px 0 20px;color:#f7f2e7;font-family:var(--serif);font-size:clamp(3rem,7.2vw,5.7rem);line-height:1.02;text-shadow:0 4px 24px #0008}
.article-hero h1 em{color:#e0c477}
.article-hero :is(h1){word-break:normal;overflow-wrap:normal;hyphens:none}
.article-hero-inner>p{max-width:700px;color:#ddd8d0;font-size:17px;line-height:1.7}
:root[data-theme] .warhammer-mods-page .article-hero p.hero-art-note,
:root[data-theme] .warhammer-hub-page .article-hero p.hero-art-note{
  position:absolute;left:auto;right:5%;bottom:18px;display:inline-block;width:max-content;max-width:86%;margin:0;
  padding:7px 10px;border:1px solid #ffffff24;border-radius:3px;background:#08090bb0;color:#e5e1d8;font-size:10px;line-height:1.5;
}
.article-layout{width:min(1240px,92%);max-width:1240px;margin:38px auto 76px;gap:32px;align-items:start}
.guide-article{min-width:0;padding:clamp(24px,3.3vw,46px);border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:9px;background:var(--panel);color:var(--ink);box-shadow:0 20px 48px #0002}
.guide-article h2,.guide-article h3{color:var(--ink);font-family:var(--serif);text-wrap:balance}
.guide-article h2{margin-top:1.8em;font-size:clamp(27px,3vw,36px);line-height:1.15}
.guide-article h3{font-size:23px}
.guide-article p,.guide-article li{color:var(--ink);font-size:16px;line-height:1.8}
.guide-article a,.source-list a{color:var(--gold);text-underline-offset:3px}
.guide-article blockquote,.quick-brief,.toc,.toc-note,.source-list{border-color:var(--line);border-radius:7px;background:var(--panel-2);color:var(--ink)}
.toc{position:sticky;top:94px;padding:20px;border:1px solid var(--line)}
.toc a{color:var(--muted)}
.toc a:hover,.toc a[aria-current="location"]{color:var(--gold)}
.briefing-body{width:min(1240px,92%);margin:36px auto 76px;padding:clamp(24px,3.3vw,46px);border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink)}
.briefing-grid{gap:16px}
.brief-card{padding:22px}
.brief-card h2,.brief-card h3{color:var(--ink);font-family:var(--serif)}
.about-page{width:min(1040px,92%);margin:40px auto 72px;padding:clamp(26px,4vw,50px);border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink)}
.site-footer{background:#090a0c;color:#d4d0c7;border-top:1px solid #29282a}
:root[data-theme="light"] .site-footer{background:#f6f6f6;color:#323236;border-color:var(--line)}
.site-footer a{color:var(--gold)}

@media(max-width:760px){
  html{scroll-padding-top:78px}
  .hub-hero{min-height:660px;min-height:min(760px,calc(100svh - 58px));min-height:max(640px,calc(100svh - 58px))}
  .hub-hero-art img{object-position:50% 40%}
  .hub-hero::before{background:linear-gradient(90deg,rgba(5,6,8,.88),rgba(5,6,8,.42) 80%),linear-gradient(0deg,#0d0d0f 0%,rgba(9,10,12,.4) 23%,transparent 70%)}
  .hub-hero-copy{width:90%;margin:0 auto;padding:70px 0 130px}
  .hub-hero-copy h1{font-size:clamp(3rem,12vw,4.5rem);line-height:1.02}
  .hub-hero-copy>p{max-width:34em;font-size:16px}
  .hero-actions{flex-wrap:wrap}
  .hero-art-note{right:5%;bottom:14px;max-width:70%;font-size:9px}
  .hub-section,.answers-section,.updates-section{width:90%}
  .game-grid.strategy-grid{grid-template-columns:1fr;gap:16px}
  .game-grid .game-card{min-height:360px}
  .game-card-copy{padding:27px 22px 22px}
  .answer-grid{grid-template-columns:1fr;gap:10px}
  .answer-grid>a,.answer-grid>a+a{padding:19px;border:1px solid var(--line)}
  .article-hero,.briefing-hero{min-height:440px}
  .article-hero-inner{width:90%;padding:70px 0 82px}
  .article-hero h1{max-width:100%;font-size:clamp(2.2rem,9.8vw,3.25rem);word-break:normal;overflow-wrap:normal;hyphens:none}
  :root[data-theme] .article-hero h1{word-break:normal;overflow-wrap:normal;hyphens:none}
  .article-hero-inner>p{font-size:15px}
  :root[data-theme] .warhammer-mods-page .article-hero p.hero-art-note,
  :root[data-theme] .warhammer-hub-page .article-hero p.hero-art-note{right:5%;bottom:14px;max-width:82%;font-size:9px}
  .article-layout{width:92%;grid-template-columns:1fr;gap:18px;margin:24px auto 54px}
  .toc{position:static;order:-1}
  .guide-article{padding:24px 20px}
  .briefing-body{width:92%;margin:24px auto 54px;padding:24px 20px}
  .briefing-grid{grid-template-columns:1fr}
}
@media(max-width:430px){
  .game-grid .game-card{min-height:330px}
  .game-card h3{font-size:27px}
  .section-heading{align-items:start;gap:8px}
  .section-heading>p{max-width:11em;text-align:right}
  .update-row{grid-template-columns:74px 1fr 18px;gap:10px}
  .update-row p{grid-column:2 / 3}
}
@media(prefers-reduced-motion:reduce){
  .game-grid .game-card,.game-card-art img,.hero-actions .button.gold::after{transition:none!important}
}

/* HelaGuide-inspired atmosphere for the fantasy pages; retain each game's own scene. */
:root[data-theme="dark"] body.portal-home-v2,
:root[data-theme="dark"] body.endtimes-page,
:root[data-theme="dark"] body.campaign-page{
  background-color:#070908;
  background-image:radial-gradient(80% 820px at 50% 0%,rgba(35,59,49,.32),transparent 76%),linear-gradient(180deg,rgba(4,7,6,.83),rgba(4,7,6,.93));
  background-attachment:fixed,fixed;
}
:root[data-theme="dark"] body.portal-home-v2{background-image:radial-gradient(80% 820px at 50% 0%,rgba(35,59,49,.16),transparent 76%),linear-gradient(180deg,rgba(4,7,6,.28),rgba(4,7,6,.5)),url("/assets/endtimes-necropolis.webp");background-size:auto,auto,cover;background-position:center top,center,center top}
:root[data-theme="dark"] body.endtimes-page[data-endtimes-scene="hub"]{background-image:radial-gradient(80% 820px at 50% 0%,rgba(35,59,49,.32),transparent 76%),linear-gradient(180deg,rgba(4,7,6,.83),rgba(4,7,6,.93)),url("/assets/endtimes-burial-fields.webp");background-size:auto,auto,cover;background-position:center top,center,center top}
:root[data-theme="dark"] body.endtimes-page[data-endtimes-scene="necropolis"]{background-image:radial-gradient(80% 820px at 50% 0%,rgba(35,59,49,.32),transparent 76%),linear-gradient(180deg,rgba(4,7,6,.83),rgba(4,7,6,.93)),url("/assets/endtimes-necropolis.webp");background-size:auto,auto,cover;background-position:center top,center,center top}
:root[data-theme="dark"] body.endtimes-page[data-endtimes-scene="nagash"]{background-image:radial-gradient(80% 820px at 50% 0%,rgba(35,59,49,.32),transparent 76%),linear-gradient(180deg,rgba(4,7,6,.83),rgba(4,7,6,.93)),url("/assets/nagash-obsidian-horizon.webp");background-size:auto,auto,cover;background-position:center top,center,center top}
:root[data-theme="dark"] body.endtimes-page[data-endtimes-scene="battlefield"]{background-image:radial-gradient(80% 820px at 50% 0%,rgba(35,59,49,.32),transparent 76%),linear-gradient(180deg,rgba(4,7,6,.83),rgba(4,7,6,.93)),url("/assets/endtimes-burial-fields.webp");background-size:auto,auto,cover;background-position:center top,center,center top}
:root[data-theme="dark"] body.campaign-page{background-image:radial-gradient(80% 820px at 50% 0%,rgba(35,59,49,.32),transparent 76%),linear-gradient(180deg,rgba(4,7,6,.83),rgba(4,7,6,.93)),url("/assets/cathay-settlements-1536.webp");background-size:auto,auto,cover;background-position:center top,center,center top}

:root[data-theme="dark"] body.portal-home-v2 .answers-section,
:root[data-theme="dark"] body.portal-home-v2 .hub-section,
:root[data-theme="dark"] body.portal-home-v2 .updates-section{
  box-sizing:border-box;padding:clamp(22px,3vw,34px);border:1px solid rgba(201,169,98,.2);border-radius:16px;background:rgba(7,10,10,.4);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 20px 50px rgba(0,0,0,.22)
}
:root[data-theme="dark"] body.portal-home-v2 .answers-section{margin:34px auto 48px}
:root[data-theme="dark"] body.portal-home-v2 .hub-section{margin-top:48px;margin-bottom:48px}
:root[data-theme="dark"] body.portal-home-v2 .updates-section{margin-top:48px}
.game-grid .game-card,.answer-grid>a,.mod-directory>a,.guide-article,.toc,.briefing-body,.brief-card{border-radius:14px}
:root[data-theme="dark"] body.endtimes-page .guide-article,
:root[data-theme="dark"] body.endtimes-page .toc,
:root[data-theme="dark"] body.campaign-page .guide-article,
:root[data-theme="dark"] body.campaign-page .toc{
  border-color:rgba(201,169,98,.2);background:rgba(7,10,10,.91);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)
}
:root[data-theme="dark"] body.endtimes-page .guide-article blockquote,
:root[data-theme="dark"] body.endtimes-page .guide-article .quick-brief,
:root[data-theme="dark"] body.campaign-page .guide-article blockquote,
:root[data-theme="dark"] body.campaign-page .guide-article .quick-brief{border-radius:11px;background:rgba(19,25,23,.9)}
body.endtimes-page .toc-note strong{display:block;font-size:clamp(18px,1.5vw,22px);line-height:1.15;overflow-wrap:anywhere}
:root[data-theme="light"] body.portal-home-v2,
:root[data-theme="light"] body.endtimes-page,
:root[data-theme="light"] body.campaign-page{background:var(--paper);background-image:none;background-attachment:scroll}
:root[data-theme="light"] body.portal-home-v2 .answers-section,
:root[data-theme="light"] body.portal-home-v2 .hub-section,
:root[data-theme="light"] body.portal-home-v2 .updates-section{background:rgba(255,255,255,.94);border-color:var(--line);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 12px 32px rgba(20,20,24,.06)}
:root[data-theme="light"] body.endtimes-page .guide-article,
:root[data-theme="light"] body.endtimes-page .toc,
:root[data-theme="light"] body.campaign-page .guide-article,
:root[data-theme="light"] body.campaign-page .toc{background:var(--panel);border-color:var(--line);-webkit-backdrop-filter:none;backdrop-filter:none}

.portal-home-v2 .update-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.portal-home-v2 .update-card{box-sizing:border-box;display:grid;grid-template-columns:132px minmax(0,1fr) 18px;align-items:center;gap:16px;min-width:0;padding:13px;border:1px solid var(--line);border-radius:15px;background:var(--panel);color:var(--ink);text-decoration:none;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.portal-home-v2 .update-card:hover,.portal-home-v2 .update-card:focus-visible{transform:translateY(-2px);border-color:color-mix(in srgb,var(--gold) 65%,var(--line));box-shadow:0 16px 36px #0003}
.portal-home-v2 .update-image{position:relative;min-width:0;aspect-ratio:16/10;overflow:hidden;border-radius:10px;background:var(--panel-2)}
.portal-home-v2 .update-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.portal-home-v2 .update-card:hover .update-image img{transform:scale(1.04)}
.portal-home-v2 .update-image>span{position:absolute;right:6px;bottom:6px;left:6px;overflow:hidden;padding:4px 6px;border:1px solid #ffffff35;border-radius:5px;background:#080a0bd9;color:#f2eee6;font-size:8px;letter-spacing:.08em;text-overflow:ellipsis;white-space:nowrap}
.portal-home-v2 .update-copy{min-width:0}
.portal-home-v2 .update-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:7px;color:var(--muted);font-size:10px}
.portal-home-v2 .update-label{color:var(--jade);font-weight:700;letter-spacing:.08em}
.portal-home-v2 .update-card h3{margin:0 0 7px;color:var(--ink);font-family:var(--serif);font-size:clamp(16px,1.5vw,20px);line-height:1.2}
.portal-home-v2 .update-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.portal-home-v2 .update-arrow{color:var(--gold);font-size:20px}
.portal-home-v2 .update-archive{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);border-radius:0}
:root[data-theme="dark"] body.portal-home-v2 .update-card{border-color:rgba(201,169,98,.22);background:rgba(14,18,17,.94)}
:root[data-theme="light"] body.portal-home-v2 .update-card{border-color:var(--line);background:#fff}

@media(max-width:760px){
  :root[data-theme="dark"] body.portal-home-v2{background-attachment:scroll,scroll,fixed}
  :root[data-theme="dark"] body.endtimes-page,
  :root[data-theme="dark"] body.campaign-page{background-attachment:scroll,scroll,scroll}
  :root[data-theme="dark"] body.portal-home-v2 .answers-section,
  :root[data-theme="dark"] body.portal-home-v2 .hub-section,
  :root[data-theme="dark"] body.portal-home-v2 .updates-section{padding:20px 16px}
  .portal-home-v2 .update-grid{grid-template-columns:1fr;gap:11px}
  .portal-home-v2 .update-card{grid-template-columns:100px minmax(0,1fr) 16px;gap:12px;padding:11px}
  .portal-home-v2 .update-card>.update-arrow{grid-column:3;grid-row:1;text-align:center}
  .portal-home-v2 .update-card h3{font-size:17px}
  .portal-home-v2 .update-card p{font-size:11px}
}
@media(max-width:430px){
  .portal-home-v2 .update-card{grid-template-columns:76px minmax(0,1fr) 14px;gap:9px;padding:9px}
  .portal-home-v2 .update-image{aspect-ratio:1/1}
  .portal-home-v2 .update-image>span{right:3px;bottom:3px;left:3px;padding:3px;font-size:7px}
  .portal-home-v2 .update-meta{gap:4px 7px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){.portal-home-v2 .update-card,.portal-home-v2 .update-image img{transition:none!important}}

/* Knowledge-base homepage layout: four clear entry paths, an actual game overview, and a final action. */
.portal-home-v2 .starter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.portal-home-v2 .starter-card{position:relative;display:flex;min-width:0;min-height:245px;flex-direction:column;align-items:flex-start;padding:25px 21px 21px;border:1px solid rgba(201,169,98,.26);border-radius:14px;background:linear-gradient(155deg,rgba(31,39,35,.96),rgba(12,16,15,.96));color:#f2eee6;text-decoration:none;box-shadow:0 14px 30px rgba(0,0,0,.18);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.portal-home-v2 .starter-card::before{content:attr(data-step);display:grid;width:34px;height:30px;place-items:center;margin-bottom:21px;border:1px solid rgba(201,169,98,.55);border-radius:5px;color:#e2c579;font-family:var(--serif);font-size:14px}
.portal-home-v2 .starter-card:hover,.portal-home-v2 .starter-card:focus-visible{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 18px 38px rgba(0,0,0,.32)}
.portal-home-v2 .starter-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.portal-home-v2 .starter-card>.eyebrow{color:#d6b96f;font-size:10px;letter-spacing:.12em}
.portal-home-v2 .starter-card h3{margin:11px 0 9px;color:#f7f1e4;font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);line-height:1.24;text-wrap:balance}
.portal-home-v2 .starter-card p{margin:0 0 19px;color:#c9c8c0;font-size:13px;line-height:1.6}
.portal-home-v2 .starter-card .card-action{display:flex;gap:7px;align-items:center;margin-top:auto;color:#e2c579;font-size:12px;font-weight:700}
:root[data-theme="light"] body.portal-home-v2 .starter-card{border-color:var(--line);background:linear-gradient(155deg,#fff,#f5f2eb);color:var(--ink);box-shadow:0 12px 28px rgba(20,20,24,.07)}
:root[data-theme="light"] body.portal-home-v2 .starter-card h3{color:var(--ink)}
:root[data-theme="light"] body.portal-home-v2 .starter-card p{color:var(--muted)}
:root[data-theme="light"] body.portal-home-v2 .starter-card>.eyebrow{color:#75602c}

.portal-home-v2 .game-intro-section .section-heading{align-items:end}
.portal-home-v2 .game-intro-section .section-heading h2{max-width:21ch}
.portal-home-v2 .text-link{color:var(--gold);font-size:13px;font-weight:700;text-decoration:none;text-underline-offset:4px}
.portal-home-v2 .text-link:hover{text-decoration:underline}
.portal-home-v2 .game-intro-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(270px,.85fr);gap:clamp(24px,5vw,68px);align-items:center}
.portal-home-v2 .game-intro-story{max-width:710px}
.portal-home-v2 .game-intro-copy{margin:0 0 16px;color:var(--ink);font-size:16px;line-height:1.8}
.portal-home-v2 .game-intro-story .button{margin-top:7px}
.portal-home-v2 .game-facts{display:grid;grid-template-columns:1fr 1fr;margin:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.portal-home-v2 .game-facts>div{min-width:0;padding:16px 18px;border-bottom:1px solid var(--line)}
.portal-home-v2 .game-facts>div:nth-child(odd){border-right:1px solid var(--line)}
.portal-home-v2 .game-facts>div:nth-last-child(-n+2){border-bottom:0}
.portal-home-v2 .game-facts dt{margin-bottom:6px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.portal-home-v2 .game-facts dd{margin:0;color:var(--ink);font-size:13px;font-weight:650;line-height:1.5;overflow-wrap:anywhere}
.portal-home-v2 .game-facts a{color:var(--gold);text-decoration:none}
.portal-home-v2 .game-facts a:hover{text-decoration:underline}
:root[data-theme="dark"] body.portal-home-v2 .game-facts{border-color:rgba(201,169,98,.22);background:rgba(12,16,15,.88)}

.portal-home-v2 .final-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:48px;margin-bottom:56px;border:1px solid rgba(201,169,98,.42);border-radius:16px;background:linear-gradient(110deg,rgba(34,42,36,.98),rgba(11,15,14,.98));color:#f2eee6}
.portal-home-v2 .final-cta .eyebrow{color:#e2c579;letter-spacing:.14em}
.portal-home-v2 .final-cta h2{margin:8px 0;color:#f7f1e4;font-family:var(--serif);font-size:clamp(25px,3vw,36px);line-height:1.15}
.portal-home-v2 .final-cta p{margin:0;color:#d4d1c8;font-size:14px;line-height:1.6}
.portal-home-v2 .final-cta-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
.portal-home-v2 .final-cta .button{white-space:nowrap}
.portal-home-v2 .final-cta .button.outline{border:1px solid rgba(226,197,121,.6);background:transparent;color:#f1dfad}
:root[data-theme="light"] body.portal-home-v2 .final-cta{border-color:var(--line);background:linear-gradient(110deg,#fbf7ec,#f1eadb);color:var(--ink)}
:root[data-theme="light"] body.portal-home-v2 .final-cta h2{color:var(--ink)}
:root[data-theme="light"] body.portal-home-v2 .final-cta p{color:var(--muted)}
:root[data-theme="light"] body.portal-home-v2 .final-cta .button.outline{border-color:#b59a5b;color:#56451f}

@media(max-width:900px){
  .portal-home-v2 .starter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portal-home-v2 .starter-card{min-height:225px}
}
@media(max-width:760px){
  .portal-home-v2 .game-intro-layout{grid-template-columns:1fr;gap:22px}
  .portal-home-v2 .game-intro-section .section-heading{align-items:start}
  .portal-home-v2 .final-cta{align-items:flex-start;flex-direction:column}
  .portal-home-v2 .final-cta-actions{justify-content:flex-start}
}
@media(max-width:600px){
  .portal-home-v2 .starter-grid{grid-template-columns:1fr}
  .portal-home-v2 .starter-card{min-height:0;padding:21px}
  .portal-home-v2 .starter-card::before{width:30px;height:27px;margin-bottom:15px}
  .portal-home-v2 .game-intro-copy{font-size:15px}
  .portal-home-v2 .game-facts{grid-template-columns:1fr}
  .portal-home-v2 .game-facts>div,.portal-home-v2 .game-facts>div:nth-child(odd){border-right:0;border-bottom:1px solid var(--line)}
  .portal-home-v2 .game-facts>div:nth-last-child(2){border-bottom:1px solid var(--line)}
  .portal-home-v2 .game-facts>div:last-child{border-bottom:0}
  .portal-home-v2 .final-cta-actions{width:100%;flex-direction:column;align-items:stretch}
  .portal-home-v2 .final-cta-actions .button{justify-content:center;white-space:normal;text-align:center}
}
@media(prefers-reduced-motion:reduce){.portal-home-v2 .starter-card{transition:none!important}}

/* WH-20261015-SITE-UI-01: clear question paths and mobile guide navigation */
.briefing-hero{
  flex-direction:column;
  align-items:flex-start;
}
.briefing-hero h1{
  width:100%;
  max-width:900px;
  overflow-wrap:normal;
  hyphens:none;
}
.warhammer-hub-page .hub-questions .question-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}
.warhammer-hub-page .hub-questions .question-grid>a{
  min-height:190px;
}
@media(max-width:760px){
  :root[data-theme] .briefing-hero{
    flex-direction:column;
    align-items:stretch;
  }
  :root[data-theme] .briefing-hero h1{
    align-self:stretch;
    width:100%;
    word-break:normal;
    overflow-wrap:normal;
    hyphens:none;
  }
  :root[lang="de"] .buying-guide .article-hero h1{
    font-size:clamp(29px,8vw,32px);
  }
  .warhammer-hub-page .hub-questions .question-grid{
    grid-template-columns:1fr;
  }
  .buying-guide .article-hero{
    min-height:390px;
  }
  .buying-guide .article-hero-inner{
    padding:24px 0 28px;
  }
  .buying-guide .article-hero-inner h1{
    margin:16px 0 12px;
  }
  .buying-guide .article-hero-inner>p{
    font-size:14.5px;
    line-height:1.5;
  }
  .buying-guide .article-layout,
  .campaign-page .article-layout{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:16px;
  }
  .buying-guide .article-layout>.toc,
  .campaign-page .article-layout>.toc{
    order:0;
    position:static;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-content:start;
    gap:2px 8px;
    width:100%;
    padding:12px;
  }
  .buying-guide .article-layout>.toc>.eyebrow,
  .campaign-page .article-layout>.toc>.eyebrow{
    grid-column:1/-1;
    margin-bottom:2px;
  }
  .buying-guide .article-layout>.toc>a,
  .campaign-page .article-layout>.toc>a{
    min-width:0;
    padding:3px 3px;
    font-size:12px;
    line-height:1.3;
    overflow-wrap:anywhere;
  }
  .buying-guide .article-layout>.toc .toc-note,
  .campaign-page .article-layout>.toc .toc-note{
    grid-column:1/-1;
    margin:6px 0 0;
    padding:4px 6px;
    font-size:10px;
    line-height:1.35;
  }
  .buying-guide .article-layout>.guide-article,
  .campaign-page .article-layout>.guide-article{
    order:1;
  }
}




/* 2026-10-28: WH3 hub hero text sat flush against the viewport edge on desktop; restore the site gutter (hub page only). */
@media (min-width:860px){
  .warhammer-hub-page .article-hero>.article-hero-inner{padding-inline-start:clamp(28px,6vw,76px)}
}