/* RuneScape: Dragonwilds Guide — runescapedragonwilds.site
   ============================================================================
   Section 1 = design tokens, copied verbatim from
     02-design/20260917-runescape-dragonwilds/tokens_RuneScapeDragonwilds.css
     (site_plan run 652, v1, 2026-09-17). Two-stage tokens: `:root` is the ash
     ground default and `.note` is the paper-note scope with its own pairings.
   Section 2 = component layer, ported from the reviewed preview
     02-design/20260917-runescape-dragonwilds/preview/style.css
   Section 3 = what the built pages need that the two-page preview never
     rendered: the article shell, `.related`, the `.btn--primary` action, the
     ledger caption and the 404 block. No new colour literals: every value comes
     from the token block in section 1.
   Class hooks consumed by check-geo.mjs / capture.cjs must survive:
     h1, .btn, details, .table-wrap, footer <strong>brand</strong>, the byline
     and <time>.

   Deliberately not ported from preview/style.css: `.coverage`, `.missable`,
   `.steps` and `.chip`. The preview styles them for modules the reviewed
   preview never rendered, and no approved page copy in this batch emits their
   markup (the bundle contains zero `▲` markers and no coverage bars), so they
   would be dead rules. See README.md "Deviations from the reviewed preview".
   ============================================================================ */

/* ---------- 1. Design tokens (verbatim from tokens_RuneScapeDragonwilds.css) ---------- */

:root {
  /* ---- 背景层（灰烬地，由深到浅） ---- */
  --surface-sunken: #0A0908;   /* 页脚、表头粘性区、代码/配置块 */
  --surface-page:   #100E0C;   /* 页面底色 */
  --surface-raised: #17140F;   /* 分区带、导航条 */
  --surface-card:   #1F1A13;   /* 卡片、表格斑马行、控制台块 */

  /* ---- 前景 ---- */
  --ink-primary:   #F2EDE3;    /* 标题、正文主体 */
  --ink-secondary: #C9C0AE;    /* 次要说明、表注 */
  --ink-muted:     #9C9282;    /* 元信息、日期戳、来源行 */

  /* ---- 品牌（陈铜：结构色，不承载状态语义） ---- */
  --brand:      #C08A2E;       /* 铜：描边、图标、装饰线（3:1 用途） */
  --brand-text: #E3B45F;       /* 铜的文字变体（不直接改品牌色） */
  --brand-deep: #6B4A12;       /* 深压色，仅作装饰底纹，不承载文字 */

  /* ---- 行动色（取自官方站唯一行动按钮的荧光绿，只用于主行动） ---- */
  --accent:      #63CE84;      /* 主行动按钮描边/填充（UI 3:1 用途） */
  --surface-action-tint: #1D2D1F;  /* 主行动按钮静默态底色（真值，不用 color-mix，便于核验） */
  --brand-text-on-action: #0A0908; /* 行动色填充上的文字（真实配对见 contrast-pairs.json） */

  /* ---- 语义状态（事实印章 / 状态带 / 表格状态列） ---- */
  --state-confirmed:  #6ED3A6;  /* 官方一手已确认（商店页、官方站、官方 wiki） */
  --state-conflict:   #E88A5A;  /* 多来源口径冲突，需自行判断 */
  --state-unpublished:#A9A296;  /* 官方未公布 / 未列出（注意：不等于「没有」） */
  --state-missable:   #B79BE0;  /* 易错过 / 不可补救 */

  /* ---- 描边 ---- */
  --border-subtle: #332B21;    /* 分区线、表格行线（纯装饰，不套文字阈值） */
  --border-strong: #7A6C56;    /* 需要辨认的控件边框（3:1） */

  /* ---- 排版 ---- */
  --font-display: "Spectral", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-heading: "Spectral", "Iowan Old Style", Georgia, "Noto Serif", serif;
  --font-body:    "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-data:    "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* 展示标题不套文章字号限制 */
  --fs-logo:    clamp(1.375rem, 1.05rem + 1.4vw, 2rem);
  --fs-hero:    clamp(2.125rem, 1.3rem + 2.9vw, 3.375rem);
  --fs-article: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);
  --fs-h2:      clamp(1.25rem, 1.05rem + 0.85vw, 1.625rem);
  --fs-h3:      1.0625rem;
  --fs-body:    1rem;
  --fs-data:    0.9375rem;    /* 表格与数值 */
  --fs-small:   0.8125rem;
  --fs-micro:   0.6875rem;    /* 仅日期戳/来源行，最小可读底线 */

  --lh-tight: 1.10;
  --lh-head:  1.24;
  --lh-body:  1.65;

  --ls-logo:   0.30em;   /* 字标宽字距（仅 .logotype，单行） */
  --ls-hero:   0.06em;   /* H1 字距 */
  --ls-marker: 0.20em;   /* 区块标记（.marker） */
  --ls-label:  0.09em;   /* 小标签、状态带 */

  /* ---- 构图 ---- */
  --container: 70rem;
  --container-wide: 84rem;   /* 对账块、宽总表 */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --space-1: 0.375rem;
  --space-2: 0.75rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3.25rem;
  --space-6: 5rem;

  --radius-sm: 2px;    /* 本作几乎不用圆角：石板/铭牌感优先 */
  --radius-md: 3px;
  --rule-hair: 1px;
  --rule-heavy: 2px;

  --shadow-card: 0 1px 0 rgba(242, 237, 227, 0.04), 0 14px 34px rgba(0, 0, 0, 0.55);

  /* 原创标记：三段式山脊（代表 Ashenfall 山脊线），非官方 logotype 复刻 */
  --mark-ridge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23C08A2E' stroke-width='2.2' stroke-linejoin='round' d='M3 25 L11 12 L16 19 L21 9 L29 25'/%3E%3Cpath fill='%23C08A2E' d='M3 25 H29 V28 H3 Z'/%3E%3C/svg%3E");
}

/* 纸面注记主题：只用于 .note（页内「口径说明」「编辑者注」）与 .marker--note。
   自带一套配对，独立核验；不参与灰烬地配对。 */
.note {
  --paper-surface: #E9E2D3;
  --paper-edge:    #CFC4AC;

  --ink-primary:   #171308;
  --ink-secondary: #3C3425;
  --ink-muted:     #554C3B;   /* 需同时满足 paper-surface 与 paper-edge 的 4.5:1 */

  --brand-text:        #684304;   /* 首跑 3.88 未过，压深后 5.07（见 核验 F-01） */
  --state-confirmed:   #10583A;
  --state-conflict:    #7E3610;   /* 首跑 4.40 未过，压深后 5.01 */
  --state-unpublished: #4C463A;
  --state-missable:    #563C86;
  --border-strong:     #6E6148;   /* 首跑 2.37 未过，压深后 3.50 */
}

/* 尊重系统减弱动效设置：动画不得是唯一信息载体 */
:root { --motion: 150ms; }
@media (prefers-reduced-motion: reduce) { :root { --motion: 0s; } }

/* ---------- 2. Component layer (ported from preview/style.css) ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--ink-primary);
  font: var(--fs-body)/var(--lh-body) var(--font-body);
  font-feature-settings: "kern" 1;
  overflow-x: hidden;
}

a { color: var(--brand-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--wide { max-width: var(--container-wide); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--surface-card); color: var(--ink-primary);
  padding: var(--space-2) var(--space-3);
}
.skip:focus { left: var(--space-3); top: var(--space-3); }
/* Visually hidden, still announced: used for the ledger filter's own label. */
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 全站骨架 ---------- */

.brandline { height: var(--rule-heavy); background: var(--brand); }

.masthead {
  background: var(--surface-raised);
  border-bottom: var(--rule-hair) solid var(--border-subtle);
  position: sticky; top: 0; z-index: 20;
}
.masthead__inner {
  display: flex; align-items: center; gap: var(--space-3);
  /* 横向必须沿用 .wrap 的 --gutter：写 0 会把页头内容顶到容器边缘，
     与下方正文（有 gutter）差 16–40px，桌面与移动端都看得出来 */
  flex-wrap: wrap; padding: var(--space-2) var(--gutter);
}
/* 站点自有标记：三段山脊 + 基线，自创，非官方 logotype 复刻 */
.brandmark {
  flex: none; width: 1.85rem; height: 1.85rem;
  background: var(--mark-ridge) center/contain no-repeat;
}
.logotype {
  font: 600 var(--fs-logo)/1 var(--font-display);
  letter-spacing: var(--ls-logo);
  text-transform: uppercase;
  color: var(--ink-primary);
  white-space: nowrap;
}
.logotype small {
  display: block;
  font: 400 var(--fs-micro)/1.5 var(--font-body);
  letter-spacing: var(--ls-label);
  color: var(--ink-muted);
  text-transform: uppercase;
}
.nav { margin-left: auto; display: flex; gap: var(--space-3); flex-wrap: wrap; }
.nav a {
  font-size: var(--fs-small);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-secondary);
}
.nav a[aria-current="page"] { color: var(--brand-text); }

/* ---------- 首屏 ---------- */

.hero { padding: var(--space-6) 0 var(--space-5); border-bottom: var(--rule-hair) solid var(--border-subtle); }
.hero__eyebrow {
  font: 600 var(--fs-micro)/1 var(--font-body);
  letter-spacing: var(--ls-marker);
  text-transform: uppercase;
  color: var(--state-conflict);
  margin: 0 0 var(--space-3);
}
.hero h1 {
  font: 600 var(--fs-hero)/var(--lh-tight) var(--font-display);
  letter-spacing: var(--ls-hero);
  margin: 0 0 var(--space-3);
  max-width: 20ch;
  text-wrap: balance;   /* 避免出现只剩一个词的孤行（桌面 1440 下 "…release date" 会断成 "date" 单独一行） */
}
.hero__deck {
  font-size: 1.0625rem;
  color: var(--ink-secondary);
  max-width: 62ch;
  margin: 0 0 var(--space-4);
}
.hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }

.btn {
  display: inline-block;
  border: var(--rule-heavy) solid var(--border-strong);
  color: var(--ink-primary);
  background: transparent;
  padding: 0.7rem 1.35rem;
  font: 600 var(--fs-small)/1 var(--font-body);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
}
/* 唯一主行动：行动色只出现在这一枚按钮上（视觉系统 §5 adaptations） */
.btn--primary {
  border-color: var(--accent);
  background: var(--surface-action-tint);
  color: var(--accent);
}
.btn--primary:hover { background: var(--accent); color: var(--brand-text-on-action); text-decoration: none; }
.btn--ghost {
  border-color: var(--border-strong);
  background: transparent;
  color: var(--ink-secondary);
}
.btn--ghost:hover { background: transparent; color: var(--ink-primary); border-color: var(--brand); text-decoration: none; }

/* ---------- 签名组件 1：状态带 .statusstrip ---------- */
/* 用途：页面顶部与表头，一眼区分「官方已确认 / 口径冲突 / 未公布 / 易错过」。
   何时不用：不要用在同一语义已经由正文明确表达的普通段落里，会变成噪声。 */

.statusstrip {
  list-style: none; margin: var(--space-4) 0 0; padding: 0;
  display: grid; gap: var(--rule-hair);
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  border: var(--rule-hair) solid var(--border-subtle);
  background: var(--border-subtle);
}
.statusstrip li {
  background: var(--surface-card);
  padding: var(--space-2) var(--space-3);
}
.statusstrip dt,
.statusstrip .k {
  font: 600 var(--fs-micro)/1.4 var(--font-body);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.statusstrip .v {
  display: block;
  font: 600 var(--fs-data)/1.35 var(--font-data);
  margin-top: 0.15rem;
  color: var(--ink-primary);
}
.statusstrip .v--confirmed   { color: var(--state-confirmed); }
.statusstrip .v--conflict    { color: var(--state-conflict); }
.statusstrip .v--unpublished { color: var(--state-unpublished); }
.statusstrip .v--missable    { color: var(--state-missable); }

/* ---------- 事实印章 .stamp（内联证据标记） ---------- */

.stamp {
  display: inline-block;
  font: 600 var(--fs-micro)/1 var(--font-body);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: 0.22em 0.5em;
  border: var(--rule-hair) solid currentColor;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  vertical-align: 0.08em;
}
.stamp--confirmed   { color: var(--state-confirmed); }
.stamp--conflict    { color: var(--state-conflict); }
.stamp--unpublished { color: var(--state-unpublished); }
.stamp--missable    { color: var(--state-missable); }
.stamp--community   { color: var(--ink-muted); }

/* ---------- 版本徽章 .vstamp ---------- */

.vstamp {
  display: inline-flex; align-items: center; gap: 0.4em;
  font: 600 var(--fs-micro)/1.6 var(--font-data);
  letter-spacing: var(--ls-label);
  color: var(--brand-text);
  border: var(--rule-hair) solid var(--brand);
  border-radius: var(--radius-sm);
  padding: 0.2em 0.55em;
}
.vstamp::before { content: "◆"; font-size: 0.75em; }
/* 版本徽章行：首页首屏与内页页头共用同一条节奏（徽章 + 事实印章） */
.vstamprow { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-4) 0 0; }

/* ---------- 签名组件 2：对账块 .reconcile ---------- */
/* 用途：同一事实在不同来源上的口径不一致时，按来源逐行并列，不代为裁定。
   内容要求：每行必须有「来源 + 值 + 采集日期 + 一手/二手」四要素。
   何时不用：只有单一来源时不要用，直接用正文写事实 + 来源行即可。 */

.reconcile {
  margin: var(--space-4) 0;
  border: var(--rule-hair) solid var(--border-subtle);
  background: var(--surface-card);
}
.reconcile__head {
  display: flex; align-items: baseline; gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-3) var(--space-2);
  border-bottom: var(--rule-hair) solid var(--border-subtle);
}
.reconcile__title {
  font: 600 var(--fs-h3)/1.3 var(--font-heading);
  margin: 0;
}
.reconcile__q { color: var(--ink-secondary); font-size: var(--fs-small); margin: 0; }
.reconcile__rows { margin: 0; padding: 0; list-style: none; }
.reconcile__row {
  display: grid;
  /* 第一列必须容得下最长的 kind 标签（UNRESOLVED / FIRST-PARTY）；
     4.5rem 时 “UNRESOLVED” 会溢出列宽并与来源名粘连（第二代截图实测） */
  grid-template-columns: 5.75rem minmax(6rem, 1fr) minmax(0, 1.7fr) 7.5rem;
  gap: var(--space-2);
  align-items: start;
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--rule-hair) solid var(--border-subtle);
}
.reconcile__row:last-child { border-bottom: 0; }
.reconcile__kind {
  font: 600 var(--fs-micro)/1.7 var(--font-body);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.reconcile__src { font-size: var(--fs-small); color: var(--ink-secondary); }
.reconcile__src strong { color: var(--ink-primary); display: block; font-weight: 600; }
.reconcile__val {
  font: 600 var(--fs-data)/1.45 var(--font-data);
  color: var(--ink-primary);
}
.reconcile__val--conflict { color: var(--state-conflict); }
.reconcile__meta {
  font: 400 var(--fs-micro)/1.6 var(--font-data);
  color: var(--ink-muted);
  text-align: right;
}
.reconcile__verdict {
  padding: var(--space-3);
  border-top: var(--rule-hair) solid var(--border-subtle);
  background: var(--surface-sunken);
  font-size: var(--fs-small);
  color: var(--ink-secondary);
  margin: 0;
}
.reconcile__verdict strong { color: var(--ink-primary); }

/* ---------- 签名组件 3：结构化总表 .ledger ---------- */
/* 用途：可检索、可筛选的实体/数值总表（护甲套装加成、50 条成就、四端对照、区域）。
   内容要求：表头必须带「来源」或「首次加入版本」这类可核验列。
   何时不用：行数少于 4 行时用定义列表（dl）更省空间；不要为排版把两列表硬拉成 A 型表。 */

.ledger { margin: var(--space-4) 0; }
.ledger__bar {
  display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.ledger__search {
  flex: 1 1 14rem;
  min-width: 0;
  background: var(--surface-card);
  border: var(--rule-hair) solid var(--border-strong);
  color: var(--ink-primary);
  font: var(--fs-small)/1.4 var(--font-body);
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
}
.ledger__search::placeholder { color: var(--ink-muted); }
.ledger__count { font: var(--fs-micro)/1.6 var(--font-data); color: var(--ink-muted); }

/* A 类页宽表：移动端横向滚动，不改卡片流 */
.table-wrap {
  overflow-x: auto;
  border: var(--rule-hair) solid var(--border-subtle);
  -webkit-overflow-scrolling: touch;
}
table.ledger__table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-variant-numeric: tabular-nums;
}
.ledger__table caption {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font: 600 var(--fs-micro)/1.6 var(--font-body);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: var(--rule-hair) solid var(--border-subtle);
  background: var(--surface-sunken);
}
.ledger__table th,
.ledger__table td {
  text-align: left;
  padding: 0.6rem var(--space-3);
  border-bottom: var(--rule-hair) solid var(--border-subtle);
  font-size: var(--fs-small);
  vertical-align: top;
}
.ledger__table thead th {
  position: sticky; top: 0;
  background: var(--surface-sunken);
  color: var(--ink-secondary);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-size: var(--fs-micro);
  white-space: nowrap;
}
.ledger__table tbody tr:nth-child(even) { background: var(--surface-card); }
.ledger__table td.num { font-family: var(--font-data); color: var(--ink-primary); white-space: nowrap; }
.ledger__table td.src { color: var(--ink-muted); font-size: var(--fs-micro); }

/* ---------- 纸面注记 .note ---------- */

.note {
  background: var(--paper-surface);
  color: var(--ink-primary);
  border-left: var(--rule-heavy) solid var(--brand-text);
  padding: var(--space-3) var(--space-3);
  margin: var(--space-4) 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  max-width: 68ch;
}
.note__label {
  display: block;
  font: 600 var(--fs-micro)/1 var(--font-body);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brand-text);
  margin-bottom: var(--space-1);
}
.note a { color: var(--brand-text); }
.note strong { color: var(--ink-primary); }

/* ---------- 通用区块 ---------- */

section { padding: var(--space-5) 0; }
.section--tight { padding-top: var(--space-4); }
.rule { border: 0; border-top: var(--rule-hair) solid var(--border-subtle); margin: 0; }

.marker {
  font: 600 var(--fs-micro)/1 var(--font-body);
  letter-spacing: var(--ls-marker);
  text-transform: uppercase;
  color: var(--brand-text);
  margin: 0 0 var(--space-2);
}
h2.sec {
  font: 600 var(--fs-article)/var(--lh-head) var(--font-heading);
  margin: 0 0 var(--space-3);
  max-width: 26ch;
}
h3.sub {
  font: 600 var(--fs-h2)/var(--lh-head) var(--font-heading);
  margin: var(--space-4) 0 var(--space-2);
}
p { margin: 0 0 var(--space-3); max-width: 68ch; }
.lede { color: var(--ink-secondary); }

.cols { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

.panel {
  background: var(--surface-card);
  border: var(--rule-hair) solid var(--border-subtle);
  padding: var(--space-3);
}
.panel h3 { font: 600 var(--fs-h3)/1.35 var(--font-heading); margin: 0 0 var(--space-2); }
.panel p { font-size: var(--fs-small); color: var(--ink-secondary); margin-bottom: var(--space-2); }
.panel ul { margin: 0; padding-left: 1.1rem; font-size: var(--fs-small); color: var(--ink-secondary); }
.panel li { margin-bottom: 0.35rem; }

/* 显式列数：卡片数为偶数（首页 8 张）时 auto-fit 会在 1440 宽下排成 6+2，
   第二行右侧四个空槽会露出容器底色，看起来像缺卡（第二代截图实测）。
   固定 4 列 / 2 列 / 1 列，任何卡片数都不会出现半截行。 */
.router { display: grid; gap: var(--rule-hair); grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--border-subtle); border: var(--rule-hair) solid var(--border-subtle); }
@media (min-width: 52rem) { .router { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.router a {
  display: block; background: var(--surface-card); padding: var(--space-3);
  color: var(--ink-primary);
}
.router a:hover { background: var(--surface-raised); text-decoration: none; }
.router .t { font: 600 var(--fs-h3)/1.3 var(--font-heading); display: block; margin-bottom: 0.35rem; }
.router .d { font-size: var(--fs-small); color: var(--ink-secondary); }
.router .k { font: var(--fs-micro)/1.6 var(--font-data); color: var(--ink-muted); display: block; margin-top: 0.4rem; }

.sources {
  border-top: var(--rule-hair) solid var(--border-subtle);
  padding-top: var(--space-3);
  font-size: var(--fs-micro);
  color: var(--ink-muted);
  line-height: 1.85;
}
.sources ol { margin: 0; padding-left: 1.2rem; }
.sources li { margin-bottom: 0.25rem; }

.footer {
  background: var(--surface-sunken);
  border-top: var(--rule-hair) solid var(--border-subtle);
  padding: var(--space-4) 0;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}
.footer__grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.footer h3 {
  font: 600 var(--fs-micro)/1.6 var(--font-body);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin: 0 0 var(--space-1);
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 0.3rem; }
.footer a { color: var(--ink-muted); }
.footer a:hover { color: var(--brand-text); }
.footer__legal {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--rule-hair) solid var(--border-subtle);
  max-width: 74ch;
}
.footer__ident { max-width: 34ch; }
.footer__ident p { font-size: var(--fs-small); margin-bottom: var(--space-2); }
.footer__stamp {
  font: var(--fs-micro)/1.6 var(--font-data);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brand-text);
  margin: 0 0 var(--space-2);
}

/* ---------- 事实网格 .statgrid（home_plan 新增，见内容包第 2 节） ---------- */
/* 用途：aboutGame 的 label/value 事实集，条目多且长度不齐时用网格而不是表格。
   与 .ledger 的分工：.statgrid 只读、无来源列；需要按来源逐行核对或需要筛选时用 .ledger。 */

.statgrid {
  margin: var(--space-4) 0;
  display: grid;
  gap: var(--space-2) var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.statgrid__row { min-width: 0; }
.statgrid dt {
  font: 600 var(--fs-micro)/1.5 var(--font-body);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.statgrid dd {
  margin: 0.15rem 0 0;
  font: 600 var(--fs-data)/1.45 var(--font-data);
  color: var(--ink-primary);
  overflow-wrap: anywhere;
}
.statgrid .asof {
  display: block;
  font: 400 var(--fs-micro)/1.6 var(--font-data);
  color: var(--ink-muted);
  margin-top: 0.15rem;
}

/* ---------- 问答区 .faq（home_plan 新增，见内容包第 2 节） ---------- */
/* 用途：首屏之下的常见疑问，可逐条展开，不依赖 JS。
   内容要求：answer 必须自足（展开即读得懂），且与 JSON-LD 的 FAQPage 逐字一致。 */

.faq {
  margin: var(--space-4) 0;
  display: grid;
  gap: var(--rule-hair);
  background: var(--border-subtle);
  border: var(--rule-hair) solid var(--border-subtle);
}
.faq__item { background: var(--surface-card); }
.faq__item[open] { background: var(--surface-raised); }
.faq__q {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3);
  font: 600 var(--fs-h3)/1.45 var(--font-heading);
  color: var(--ink-primary);
}
.faq__q::-webkit-details-marker { display: none; }
/* 问题文本必须是显式的 flex item 且 basis 为 0：
   用匿名文本 item 时 flex-wrap 会按 max-content 分行，窄屏下 “+” 会独占一行 */
.faq__t { flex: 1 1 0; min-width: 0; }
.faq__q::before {
  content: "+";
  flex: none;
  font: 600 var(--fs-data)/1.45 var(--font-data);
  color: var(--brand-text);
}
.faq__item[open] .faq__q::before { content: "–"; }
.faq__q .stamp { margin-left: auto; flex: none; }
.faq__a {
  padding: 0 var(--space-3) var(--space-3);
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-secondary);
  max-width: 74ch;
}

/* 锚点跳转不被 sticky 导航遮挡 */
:target, [id] { scroll-margin-top: 5.5rem; }

/* ---------- 移动端重组（375 起） ---------- */

@media (max-width: 40rem) {
  /* 字标在 375px 下必须收窄：原 0.30em 字距 + nowrap 会把整页撑宽 4px 并裁掉首字母 */
  :root { --fs-logo: 1.125rem; --ls-logo: 0.12em; }
  .logotype { letter-spacing: var(--ls-logo); white-space: normal; }
  .masthead__inner { align-items: center; gap: var(--space-2); padding: var(--space-2) var(--gutter) 0; }
  .brandmark { width: 1.6rem; height: 1.6rem; }
  .nav {
    width: 100%; margin-left: 0;
    order: 3; flex-wrap: wrap;
    gap: 0.35rem var(--space-3);
    padding: var(--space-2) 0;
    border-top: var(--rule-hair) solid var(--border-subtle);
    margin-top: var(--space-2);
  }
  .nav a { font-size: 0.75rem; }
  .hero { padding-top: var(--space-4); }
  .hero h1 { max-width: none; }
  .statusstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 奇数项时最后一项跨两列：否则 2 列布局的末行右侧会空出一格，
     露出 .statusstrip 的容器底色（看起来像少了一个状态） */
  .statusstrip li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .reconcile__row { grid-template-columns: 1fr; gap: 0.35rem; }
  .reconcile__kind { color: var(--brand-text); }
  .reconcile__meta { text-align: left; }
  .cols { grid-template-columns: 1fr; }
  .router { grid-template-columns: 1fr; }
  .statgrid { grid-template-columns: 1fr; }
  /* 窄屏 FAQ：问题与 “+” 必须在同一行内流里，印章另起一行。
     继续用 flex-wrap 不行 —— 零基文本项会先按 max-content 分行，
     只有 flex-basis:100% 能强制换行，但那会把印章边框拉满整行。 */
  .faq__q { display: block; }
  .faq__q::before { margin-right: 0.35rem; }
  .faq__q .stamp { display: block; width: max-content; max-width: 100%; margin: 0.4rem 0 0; }
  .btn { width: 100%; text-align: center; }
  section { padding: var(--space-4) 0; }
  /* A 类宽表在移动端保持横向滚动（不改成卡片流），但要给出可横滑的可见提示。
     提示挂在 caption 上，而 caption 宽度跟随表格（544px+），不处理就会落在可视区外；
     固定到滚动容器左侧并限宽，提示才真的看得见。 */
  .ledger__table caption {
    position: sticky; left: 0;
    max-width: 20rem;
  }
  .ledger__table caption::after { content: " · swipe for all columns"; color: var(--brand-text); }
}

/* ---------- 3. Additions for the built pages ---------- */

/* Article shell: every built page shares one head block, then the reading column. */
.pagehead {
  background: var(--surface-raised);
  border-bottom: var(--rule-hair) solid var(--border-subtle);
  padding: var(--space-5) 0 var(--space-4);
}
.pagehead .vstamprow { margin: 0 0 var(--space-3); }
.crumb {
  font: 600 var(--fs-micro)/1.6 var(--font-body);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2);
}
.crumb a { color: var(--ink-secondary); }
.pagehead h1 {
  font: 600 var(--fs-article)/var(--lh-head) var(--font-heading);
  color: var(--ink-primary);
  margin: 0 0 var(--space-2);
  max-width: 30ch;
}
/* 署名行是元数据行，不是阅读栏：组件层的 `p { max-width: 68ch }` 是按正文字号
   定的，套到 11px 等宽体上只有 450px，会把 "…· Checked September 17, 2026"
   折成两行。这里显式解除测度限制。 */
.byline { font: var(--fs-micro)/1.6 var(--font-data); letter-spacing: 0.02em; color: var(--ink-muted); margin: 0; max-width: none; }

.article-body { padding: var(--space-5) 0 var(--space-6); }
.article-body .prose > p,
.article-body .prose > ul,
.article-body .prose > ol,
.article-body .prose > blockquote { max-width: 68ch; }
.article-body h2 {
  font: 600 var(--fs-h2)/var(--lh-head) var(--font-heading);
  color: var(--ink-primary);
  margin: var(--space-5) 0 var(--space-2);
  max-width: 40ch;
}
.article-body h3 {
  font: 600 var(--fs-h3)/1.4 var(--font-heading);
  color: var(--ink-primary);
  margin: var(--space-4) 0 var(--space-2);
}
.article-body ul, .article-body ol { margin: 0 0 var(--space-3); padding-left: 1.2rem; color: var(--ink-secondary); }
.article-body li { margin-bottom: 0.35rem; }
.article-body blockquote {
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  border-left: var(--rule-heavy) solid var(--brand);
  background: var(--surface-card);
  color: var(--ink-secondary);
  font-size: var(--fs-small);
}
.article-body blockquote p { margin: 0; }
.article-body code {
  font: var(--fs-small)/1.5 var(--font-data);
  letter-spacing: 0.02em;
  padding: 0.0625rem 0.25rem;
  background: var(--surface-raised);
  border: var(--rule-hair) solid var(--border-subtle);
  overflow-wrap: anywhere;
}
.article-body hr { border: 0; border-top: var(--rule-hair) solid var(--border-subtle); margin: var(--space-4) 0; }
.article-body .note { max-width: 68ch; }
/* 屏读首块不留双倍上边距：正文第一块多半是 `**The short answer**` 一类的 h2 */
.article-body .prose > :first-child { margin-top: 0; }
/* 围栏代码块（/dedicated-server/ 的 steamcmd 命令）：只在正文里出现，逐字不换行折行 */
.article-body pre {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  max-width: 100%;
  overflow-x: auto;
  background: var(--surface-sunken);
  border: var(--rule-hair) solid var(--border-subtle);
}
.article-body pre code {
  padding: 0; border: 0; background: none;
  font: var(--fs-small)/1.6 var(--font-data);
  white-space: pre;
}
/* A 类宽表在窄屏的横滑提示：带 caption 的表已有 caption::after，这里只兜住
   没有 caption 的宽表（capture.cjs 断言的是 .table-wrap 可横滑，不是这行提示） */
.scrollhint {
  font: var(--fs-micro)/1.6 var(--font-data);
  color: var(--ink-muted);
  margin: var(--space-2) 0 0;
}
@media (min-width: 40.0625rem) { .scrollhint { display: none; } }

.related {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--rule-hair) solid var(--border-subtle);
}
.related h2 {
  font: 600 var(--fs-micro)/1.6 var(--font-body);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2);
}
.related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.related a { display: inline-flex; align-items: center; min-height: 2.5rem; }

/* 404 */
.notfound { padding: var(--space-6) 0; }
.notfound .hero__actions { margin-top: var(--space-4); }

@media (prefers-reduced-motion: no-preference) {
  a, .btn { transition: color var(--motion) ease, background-color var(--motion) ease, border-color var(--motion) ease; }
}

@media (max-width: 40rem) {
  .pagehead { padding-top: var(--space-4); }
  .related a { display: flex; min-height: 2.75rem; }
}