static/assets/css/base.css

/* =============================================================================
   base.css · reset、字体、排版基础
   ============================================================================= */

/* ── 字体 ────────────────────────────────────────────────────────────────────
   自托管，不走 CDN：Google Fonts 在中国大陆被墙，jsdelivr 也不稳。
   unicode-range 必须写 —— 保证中英混排时英文一定落在 Instrument Sans 上，
   不会被中文字体里的拉丁字形接管（中英混排最常见的翻车点）。          */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;                       /* 可变字重，一个 30KB 文件覆盖全部 */
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F;
}

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

/* hidden 属性必须能压过组件自己的 display。
   UA 样式表里的 [hidden]{display:none} 特异性只有 0-1-0，
   任何 .field{display:flex} 都会把它盖掉 —— 元素会"逻辑上隐藏、视觉上还在"。 */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--field);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;                          /* 应用外壳自己管滚动 */
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { background: var(--field-sunk); }       /* 加载中不留白洞 */

button, input, textarea, select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
button { background: none; border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
textarea { resize: none; }

/* 键盘焦点：墨色实线，任何底色上都清楚。鼠标点击不出现。 */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--bronze-wash); }

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

/* 时间码、时长、计数一律用等宽数字，不用等宽字体 ——
   等宽字体会让播放器带上"终端工具"的味道，和 Apple 观感相反。 */
.tnum { font-variant-numeric: tabular-nums; }

/* 细滚动条，不抢视觉 */
* { scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border: 3px solid transparent;
  border-radius: 99px;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-4); background-clip: content-box; }

/* ── 通用排版件 ──────────────────────────────────────────────────────────── */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--bronze);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
}
.eyebrow::before {
  content: "";
  width: 18px; height: 1.5px;
  background: var(--bronze);
  flex: none;
}

.page-title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-h1);
  line-height: var(--lh-snug);
}
.page-lead {
  font-size: var(--fs-lead);
  color: var(--ink-2);
  margin-top: 10px;
  max-width: 62ch;
  line-height: 1.6;
}

.icon { width: 18px; height: 18px; flex: none; }
.icon-sm { width: 15px; height: 15px; flex: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}