/* ============================================================
   万川官网 · 自托管字体
   ------------------------------------------------------------
   文件由 website/tools/subset_fonts.py 产出，进 git（约 436 KB）。
   源字体（1.1MB × 2）在 fonts/_cache/，不进 git，脚本按需重新下载。

   ★ 为什么自托管而不是 Google Fonts：
     站点主要读者在中国大陆，fonts.googleapis.com 不可靠。
     首屏字体拿不到时读者不会等、也不会刷新——他们只会觉得这个站很糙。

   ★ 两款字体都是 SIL OFL 1.1：
     Geist（Vercel）· Noto Sans SC（Google/Adobe 思源黑体）
     英文站要给平台方 ISV 审核，字体授权是他们会核的东西之一。

   ★ unicode-range 不是装饰，它省的是英文站的 300 KB：
     中文字面限定在 CJK 码位后，浏览器只在真的要画汉字时才去取它。
     纯英文页面（ISV 审核员看的那些）一个字节的中文字体都不下载。
   ============================================================ */

/* ── 拉丁：Geist ──
   四个字重全量收录，每个约 33 KB。
   ★ 刻意不用 Inter：lili 与 keystone 两个官网都在用它，撞字体的效果
     和撞主色一样。Geist 的数字字形对这个站尤其重要——首页到处是
     94.5% / 14,606 / 3,598 这类数据。 */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Geist-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, 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: "Geist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Geist-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, 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: "Geist";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Geist-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, 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: "Geist";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Geist-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 中文：Noto Sans SC（思源黑体），按用字裁剪 ──
   只要 400 / 700 两个字重：CJK 每多一个字重多约 150 KB，
   而中文排版里正文 400 + 标题 700 已经够用。
   500 / 600 在 CSS 里会被浏览器自动合成或就近取整，观感损失远小于体积代价。

   ⚠️ unicode-range 必须覆盖到子集里**所有**非拉丁码位，
     漏掉的那一段会静默落回系统字体——最常见的是漏了 U+3000-303F，
     于是全站的中文逗号、句号、书名号是另一套字形。 */
@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/NotoSansSC-400.woff2") format("woff2");
  unicode-range: U+2010-2027, U+2030, U+2032-2033, U+203B, U+2190-2193,
                 U+2260, U+2264-2265, U+3000-303F, U+4E00-9FFF,
                 U+3400-4DBF, U+F900-FAFF, U+FF00-FFEF;
}
@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/NotoSansSC-700.woff2") format("woff2");
  unicode-range: U+2010-2027, U+2030, U+2032-2033, U+203B, U+2190-2193,
                 U+2260, U+2264-2265, U+3000-303F, U+4E00-9FFF,
                 U+3400-4DBF, U+F900-FAFF, U+FF00-FFEF;
}

/* ── 排版微调 ──
   ★ 中文和拉丁需要不同的字距。混排时按 Latin 调好的负字距
     会让汉字挤在一起；按汉字调好的正字距又会让英文松散。
     做法是给容器一个中性值，只在纯拉丁的元素（数字、平台名）上收紧。 */
:root {
  --tracking-cjk: 0.01em;
  --tracking-latin: -0.011em;
}

body {
  letter-spacing: var(--tracking-cjk);
  /* 中文正文行高要比拉丁大：方块字没有 x-height 的视觉喘息 */
  line-height: 1.75;
}

/* 标题：字重上去之后字距要回收，否则显得散 */
h1, h2, h3, h4 { letter-spacing: -0.015em; line-height: 1.24; }

/* 纯拉丁/数字的元素单独收紧字距并开等宽数字 */
.num, .data-table td, .stat-value, .mono, code, kbd {
  letter-spacing: var(--tracking-latin);
  font-feature-settings: "tnum" 1, "kern" 1;
}

/* ★ 中文标点的视觉留白问题：
     「，」「。」在方框里居中，两个连着会出现一个很宽的空洞。
     text-spacing-trim 是 CSS Text 4 的标点挤压，Chrome 123+ / Safari 18+ 支持，
     不支持的浏览器忽略它——没有回落方案，也不需要，这是纯增强。 */
@supports (text-spacing-trim: trim-start) {
  body { text-spacing-trim: trim-start; }
}

/* ── 断行 ──
   ★ 中文里「孤字掉行」比拉丁的孤字更难看：一个「则。」独占一行，
     视觉上像是文案写错了。text-wrap 让浏览器在断行时把末行也算进去。
       balance —— 标题：各行长度尽量均匀（只对 ≤6 行生效，正合标题）
       pretty  —— 正文：避免末行只剩一两个字
     两者都是纯增强，不支持的浏览器按老规则断行，不需要回落方案。 */
h1, h2, h3, .hero-title, .section-title, .cta-title { text-wrap: balance; }
p, .section-lede, li, summary, dd { text-wrap: pretty; }
