/* ============================================================
   base.css — 重置 + 排版基线
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;              /* JS 会按 reduced-motion 关闭 */
  scroll-padding-top: 96px;             /* 锚点避开固定导航 */
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;                   /* 视差元素不产生横向滚动 */
}

/* 中文断行更均匀 */
p, li, h1, h2, h3 { hanging-punctuation: allow-end; }

h1, h2, h3, h4 {
  margin: 0;
  font-synthesis-weight: none;
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;                    /* 标题断行均衡 */
}

p { margin: 0; text-wrap: pretty; letter-spacing: var(--track-micro); }

a { color: inherit; text-decoration: none; }

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

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

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

::selection { background: rgba(16, 163, 127, 0.18); }

::selection { color: var(--c-ink); }

/* 正文测量:中文最佳阅读宽度 */
.container p, .sectionHead p { max-width: 34em; }

/* 焦点环:更精致、更克制 */
:focus-visible {
  outline: 1.5px solid var(--c-ink);
  outline-offset: 2px;
  border-radius: 4px;
}

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* 滚动条（桌面） */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb {
    background: var(--c-line-strong);
    border-radius: 99px;
    border: 3px solid transparent;
    background-clip: content-box;
  }
  ::-webkit-scrollbar-track { background: transparent; }
}

/* ─── 排版工具类 ─── */
.t-hero { font-size: var(--fs-hero); line-height: var(--lh-tight); font-weight: var(--w-bold); letter-spacing: var(--track-tight); }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); font-weight: var(--w-semibold); letter-spacing: var(--track-tight); }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: var(--w-semibold); }
.t-lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--c-ink-2); font-weight: var(--w-regular); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink-2); }
.t-sm { font-size: var(--fs-sm); line-height: 1.6; color: var(--c-ink-3); }
.t-xs { font-size: var(--fs-xs); line-height: 1.5; color: var(--c-ink-3); }
.t-eyebrow {
  font-size: var(--fs-xs); font-weight: var(--w-semibold);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-accent);
}
.t-mono { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: -0.01em; }

/* 深色区块内的文字 */
.on-dark { color: var(--c-on-dark); }
.on-dark .t-lead, .on-dark .t-body { color: var(--c-on-dark-2); }
.on-dark .t-sm, .on-dark .t-xs { color: var(--c-on-dark-3); }

/* 屏幕阅读器专用 */
.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;
}

/* 跳到主内容 */
.skip-link {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  z-index: 400; padding: 10px 20px; border-radius: 99px;
  background: var(--c-ink); color: var(--c-bg); font-size: var(--fs-sm); font-weight: var(--w-medium);
  transition: top var(--dur-micro) var(--ease-in-out);
}
.skip-link:focus { top: 12px; }

/* ─── 胶片颗粒层：印刷质感,消除纯数字味(纯 CSS,不加载任何资源) ─── */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
[data-theme="dark"] body::after { mix-blend-mode: screen; opacity: calc(var(--grain-opacity) * 1.6); }