/* ==========================================================================
   base.css —— 重置 / 排版 / 全局可达性基座
   依据：docs/design-spec.md § 3.3 排版硬规则、§ 8 无障碍要点
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* § 8.2-6：锚点跳转不被 sticky 导航遮挡。
     [修复 P2] 与 --nav-h 令牌联动（顶栏 72/56px）+ 16px 呼吸空间，
     与 sections.css 的 scroll-margin-top 取值一致，避免两套偏移叠加/冲突。 */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--sp-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--neutral-000);
  color: var(--neutral-100);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  /* § 3.3-1：中文不用 justify，左对齐 + pretty */
  text-align: left;
  text-wrap: pretty;
  overflow-x: hidden;
  /* 主题切换（四季）时平滑过渡 */
  transition: background-color var(--season-transition) var(--season-ease),
              color var(--season-transition) var(--season-ease);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked { overflow: hidden; }

/* 标题统一：衬线、高亮色、字距收紧 */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  color: var(--neutral-050);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); letter-spacing: var(--ls-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-semibold); letter-spacing: var(--ls-h4); }

p { margin: 0 0 var(--sp-5); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--primary-light);
  text-decoration-color: var(--neutral-350);
  text-underline-offset: 3px;
}
a:hover { color: var(--neutral-050); }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

img { max-width: 100%; height: auto; display: block; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

strong, b { font-weight: var(--fw-bold); color: var(--neutral-050); }

mark {
  background: transparent;
  color: var(--primary-light);
  font-weight: var(--fw-semibold);
}

/* 日文区块 —— ⚠ 走样点 1（§ 10）
   lang="ja" 是浏览器选字形的依据，必须由 HTML 提供；
   这里只负责字体栈与行高补偿（假名有字面下伸部，行高 +0.1）。 */
:lang(ja) {
  font-family: var(--font-serif-ja);
  letter-spacing: 0.02em;          /* § 10：假名需要呼吸空间，禁止负值 */
  line-height: calc(var(--lh-body) + 0.1);
}
/* 日文强调块（咏唱、台词原文）单独行高 */
.ja-verse :lang(ja),
[lang="ja"].ja-verse { line-height: 1.75; }

/* ==========================================================================
   焦点态（§ 8.2）—— 硬性可见，禁止 outline:none 且无替代
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--primary-glow);
  outline-offset: 2px;
  border-radius: inherit;
}
/* C 基调纸底区块：浅色焦点环在纸底几乎不可见，换铜色 */
.on-paper :focus-visible,
.on-paper:focus-visible {
  outline-color: var(--paper-focus);
}

/* ==========================================================================
   跳转到主内容（§ 8.2-5）
   ========================================================================== */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  z-index: 300;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-5);
  background: var(--primary-deep);
  color: var(--on-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body-ui);
  font-weight: var(--fw-medium);
  text-decoration: none;
  border-radius: var(--r-md);
  transition: top 200ms var(--ease-std);
}
.skip-link:focus { top: var(--sp-4); color: var(--on-primary); }

/* ==========================================================================
   容器与栅格（§ 4.3）
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--safe-x);
}
.wrap--wide { max-width: var(--wide); }
.wrap--measure { max-width: calc(var(--measure) + var(--safe-x) * 2); }

/* 区块：统一纵向节奏 —— 对应 § 7「A 基调连续不超过 2 个整屏区块」的节奏规则 */
.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--breath { padding-block: var(--section-y-breath); }   /* 换气缝 128px */

/* 区块标题组 */
.section-head {
  max-width: var(--measure);
  margin-bottom: var(--sp-7);
}
.section-head--wide { max-width: none; }

/* ==========================================================================
   排版工具类（严格取自 § 3.2 阶梯，不新增字号）
   ========================================================================== */
.t-display {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-bold);
  color: var(--neutral-050);
}
.t-lead {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  color: var(--neutral-100);
}
.t-body-l {
  font-family: var(--font-serif);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--neutral-100);
}
.t-caption {
  font-family: var(--font-serif);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  color: var(--neutral-200);
}
.t-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  font-weight: var(--fw-medium);
  color: var(--neutral-150);
  text-transform: uppercase;
}
.t-micro {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-micro);
  font-weight: var(--fw-medium);
  color: var(--neutral-200);
}
.t-num {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}

/* 数值高亮（能力数值 / 年份） */
.t-num-accent { color: var(--primary-light); }

/* 正文栏宽限制 —— § 3.3-3：≤38 汉字/行 */
.measure { max-width: var(--measure); }
.measure > p { margin-bottom: var(--sp-5); }

/* 段落节奏（正文段之间留呼吸，§ 0 文学气质） */
.prose p { margin-bottom: var(--sp-5); }
.prose > *:last-child { margin-bottom: 0; }
.prose h3 { margin-top: var(--sp-7); margin-bottom: var(--sp-4); }
.prose h4 { margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
.prose h2 + p, .prose h3 + p, .prose h4 + p { margin-top: 0; }

/* 列表（正文内） */
.prose ul, .prose ol { margin-bottom: var(--sp-5); }
.prose li {
  list-style: disc;
  margin-left: 1.4em;
  margin-bottom: var(--sp-2);
}
.prose ol > li { list-style: decimal; }

/* ==========================================================================
   屏幕阅读器专用（关系图等价文本、灯箱标题等）
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   全局动效降级（§ 8.3-1）
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* § 8.3-2：四季转场降级为 240ms 纯 opacity 交叉淡入（由 JS 加 .is-reduced） */
  :root { --season-transition: 240ms; }

  /* 无限循环装饰动效清单（§ 8.3-5）全部停用 */
  .hero__scroll-hint,
  .hero__glow,
  .hero-portrait__glow,
  .kicker__particles,
  .magic__particles,
  .skeleton::after { animation: none !important; }
  .hero__glow { opacity: 0.8; }
  /* [修复 P0] 立绘在 reduce-motion 下必须照常显示（仅停掉光晕呼吸） */
  .hero-portrait__glow { opacity: 0.8; }
}

/* 高对比模式兜底：系统要求更高对比时不削弱边框 */
@media (prefers-contrast: more) {
  .card, .table th, .table td { border-color: var(--neutral-300); }
}

/* 打印：去掉背景与动效。
   此处刻意写死纯黑白 —— 打印介质不继承本站暗底基调，
   若沿用 token 会导致整页变黑底浪费墨粉。这是全站唯一允许的硬编码色值例外。 */
@media print {
  body { background: #fff; color: #000; }
  .site-nav, .tabbar, .drawer, .lightbox, .magic, .hero__controls { display: none !important; }
}