/* ============================================================================
 * css/base.css — 重置、排版、骨架、技术底纹
 * ----------------------------------------------------------------------------
 * 页面骨架不是「一个全局居中列」。唯一约束全局的是左右 gutter；
 * 每一块内容自己决定自己的 measure（page-design §6）。
 * 全站 4 种 section 形态：stage-banner（阶段横幅）· board（看板）
 *                        slab（数据板）· poster（海报）
 * ==========================================================================*/

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--ground);
  color: var(--ink);
  font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
  overflow-x: hidden;
}
body.modal-open { overflow: hidden; }

::selection { background: var(--signal); color: #fff; }

/* ---------------------------------------------------------------- 排版 */

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

/* 中文大字：不紧字距、行高反而要松（page-design §4）。
   .u-lat 是给纯拉丁/数字的钩子 —— 那边才收紧。 */
h1, h2, h3 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-cjk-display);
  letter-spacing: var(--ls-cjk-display);
  text-wrap: balance;
}
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }

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

/* 拉丁/数字展示字：紧字距、近 1.0 行高 */
.u-lat, .num, .mscore, .sbnums b, .hero-year {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  font-variant-numeric: tabular-nums;
}

.mono, .u-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* 眉题：12px 级、大写、宽字距 —— 给区块一个身份但不动用第二个标题层级 */
.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-mid);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--muted);
}
.muted { color: var(--muted); }

/* 长文 measure 逐元素设定，不给 body 设 */
.measure { max-width: var(--measure); }

/* 下划线用 1px 发丝线而不是浏览器默认，且压在字下面而不是贴着基线 */
.link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color var(--dur-fast) var(--e-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .link:hover { border-bottom-color: var(--ink); }
}

/* ---------------------------------------------------------------- 焦点
 * 只给键盘。信号色圆环在两种主题下都 ≥ 3:1，且不依赖背景色。 */
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

/* 跳转链接：键盘用户第一下 Tab 就能跳过 20 个导航项 */
.skip {
  position: fixed; left: var(--s-4); top: var(--s-4); z-index: 200;
  padding: 10px 16px;
  background: var(--ink); color: var(--on-accent);
  font: var(--fw-mid) var(--fs-sm)/1 var(--font-sans);
  border-radius: var(--r-2);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--e-out-expo);
}
.skip:focus-visible { transform: translateY(0); }

/* ---------------------------------------------------------------- 骨架 */

.app { min-height: 100dvh; display: flex; flex-direction: column; }

/* 全宽页：没有全局 max-width，只有 gutter */
.wrap {
  width: 100%;
  padding-inline: var(--gutter);
  margin-inline: auto;
}
.wrap--wide { max-width: 1560px; }
.wrap--read { max-width: 900px; }

main { display: block; flex: 1; }

.page {
  display: flex;
  flex-direction: column;
  padding-block: var(--s-4) var(--s-9);
}
/* 段间距刻意不恒定：同拍紧、换拍松（page-design §6） */
.page > * + * { margin-top: var(--s-5); }
.page > .stage-banner + * { margin-top: var(--s-6); }
.page > .slab + .slab { margin-top: var(--s-3); }   /* 两块数据板属于同一拍 */

/* ---------------------------------------------------------------- 技术底纹
 * 密度不是靠加文案，是靠底下一层「工程图」：
 * 发丝网格 + 区块坐标刻度。每个元素都参与布局，不是贴上去的装饰。 */
.underlay {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--underlay) 1px, transparent 1px),
    linear-gradient(90deg, var(--underlay) 1px, transparent 1px);
  background-size: var(--u-grid) var(--u-grid);
  background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .35) 62%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .35) 62%, transparent 100%);
}
.has-underlay { position: relative; isolation: isolate; }
.has-underlay > *:not(.underlay) { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- 尺度条
 * 一串刻度 + 读数。既是分隔，也是「这里是一个量过的仪器」的声明。 */
.ruler {
  position: relative; height: 13px;
  display: flex; align-items: flex-end; gap: 4px;
  overflow: hidden;
}
.ruler i {
  flex: 1; height: 4px; background: var(--underlay-strong);
}
.ruler i:nth-child(4n + 1) { height: 11px; background: var(--line); }
.ruler i:nth-child(4n + 3) { height: 7px; }

/* ---------------------------------------------------------------- 无障碍 */

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* 系统关闭动效：只留状态切换，不做位移/缩放；HTML 内容全部保持可见 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}