/* ─────────────────────────────────────────────────────────────────────────────
   base.css — typographic foundation
   原则：先把字、行、距、色搞对，组件就稳了。
   ───────────────────────────────────────────────────────────────────────────── */

/* 1. Reset (light) — 不抹掉所有标签默认样式，只统一可预测点 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--sp-6) 0; }

/* Selection: 用 brand 的弱回响 */
::selection { background: var(--c-brand-glow); color: var(--c-ink); }

/* 2. Headings — 衬线、紧排、tracking 收紧，最有学术感 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-serif);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  margin: 0;
  text-wrap: balance;
}

/* 3. Links — 微妙 underline-offset，hover 才换色 */
a {
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: var(--c-line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease-standard),
              text-decoration-color var(--dur-fast) var(--ease-standard);
}
a:hover {
  color: var(--c-brand);
  text-decoration-color: var(--c-brand);
}
a:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 3px;
  border-radius: 2px;
}

/* 4. Layout containers */
.shell {
  width: min(100% - var(--gutter) * 2, var(--shell-max));
  margin-inline: auto;
}
.shell--tight  { max-width: var(--shell-tight); }
.shell--prose  { max-width: var(--shell-prose); }
.page { display: flex; flex-direction: column; min-height: 100dvh; }
.page__body { flex: 1; padding-block: var(--sp-7) var(--sp-8); }

/* 5. Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-ink); color: var(--c-paper);
  padding: var(--sp-2) var(--sp-4); z-index: 100;
}
.skip-link:focus { left: var(--sp-3); top: var(--sp-3); }

/* 6. Focus default */
:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

/* 7. Subtle paper texture: 微噪点，几乎看不见，但让屏幕"暖"起来。
      用合成层隔离，避免拖累滚动帧率。 */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: 0.025;
  z-index: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--c-ink) 1px, transparent 0);
  background-size: 3px 3px;
  /* GPU 合成，不参与重绘 */
  will-change: transform;
  transform: translateZ(0);
}
.page__body, .masthead, .page__footer { position: relative; z-index: 1; }

/* 8. Utility classes used across pages */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--c-ink-mute);
  font-weight: 500;
}
.lede {
  font-family: var(--ff-serif);
  font-size: 1.2rem;
  color: var(--c-ink-soft);
  line-height: var(--lh-snug);
  text-wrap: balance;
}
.muted { color: var(--c-ink-mute); }
.faint { color: var(--c-ink-faint); }

/* number with caps tracking, monospaced figures */
.tabular { font-variant-numeric: tabular-nums; }
.cap-num { font-variant-numeric: oldstyle-nums; }

/* Hairline rule used between sections instead of <hr> */
.rule { display: block; height: 1px; background: var(--c-line); margin: var(--sp-6) 0; }
.rule--soft { background: var(--c-paper-edge); }
.rule--strong { background: var(--c-line-strong); }

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}