/* ╔══════════════════════════════════════════════════════════════════════╗ ║ FONTS — the unified type layer for BOTH worlds ║ ║ Authored 2026-07-28 per L's directive. Load BEFORE tokens.css. ║ ║ ║ ║ THE RULE, in one line: ║ ║ Latin → Satoshi. Always. Chinese headings → LINE Seed TW. ║ ║ Chinese body/UI → Chiron Hei HK 昭源黑體. Fallback → Noto Sans TC. ║ ║ ║ ║ ── How "Satoshi even inside Chinese text" is GUARANTEED ── ║ ║ Not by stack order alone — by `unicode-range`. Every CJK face below ║ ║ is pinned to the CJK blocks, so those files are not even CANDIDATES ║ ║ for a Latin glyph. A digit or an English word inside a 繁中 sentence ║ ║ cannot land on LINE Seed or Chiron no matter where they sit in the ║ ║ stack; the browser resolves fallback PER GLYPH, and only Satoshi ║ ║ claims U+0000–024F. This is why the previous project shipped a real ║ ║ bug where 「USD 5,860」 rendered in a generic system sans: a bare ║ ║ `sans-serif` sat mid-stack and matched first. ║ ║ ║ ║ ⚠ A generic family (`sans-serif`) may ONLY be the final item of a ║ ║ complete stack. Stranded mid-stack it always matches and everything ║ ║ after it becomes unreachable. ║ ║ ║ ║ ── The 350 floor (L: "for chiron hei hk 350 is the minimal weight") ──║ ║ Enforced in the @font-face descriptor, not by convention. Chiron's ║ ║ variable axis physically runs 250–900, but the face is DECLARED as ║ ║ `font-weight: 350 900`. The browser clamps any lighter request to the ║ ║ declared floor, so a stray `font-weight: 300` on Chinese body text ║ ║ renders at 350 instead of going wispy. No consumer can violate it, ║ ║ and no audit is needed to keep it true. ║ ╚══════════════════════════════════════════════════════════════════════╝ */ /* ── SATOSHI — every Latin glyph in the system, both worlds, both locales ── Static instances (Fontshare / Indian Type Foundry, free for personal and commercial use). NO unicode-range: Satoshi is the default face and must be free to claim anything the CJK faces do not. 400 / 500 / 700 are first-paint weights → `block` (a swap would flash the system fallback on the very text the eye lands on first). 300 / 900 are sparse and unpreloaded → `swap`, because blocking on a weight that may not appear above the fold trades one problem for a worse one. */ @font-face { font-family: 'Satoshi'; src: url('assets/fonts/Satoshi-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('assets/fonts/Satoshi-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; } @font-face { font-family: 'Satoshi'; src: url('assets/fonts/Satoshi-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: block; } @font-face { font-family: 'Satoshi'; src: url('assets/fonts/Satoshi-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: block; } @font-face { font-family: 'Satoshi'; src: url('assets/fonts/Satoshi-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } /* ── LINE SEED TW — Chinese HEADINGS only ── SUBSET builds (~410KB each), not the full OTF conversions (~3.4MB each). The four full files were 15MB of a 22MB deploy and, worse, a real first-paint cost: with unicode-range pinning the browser fetches these whenever CJK headings render, which on the zh-Hant default is immediately. 12MB saved. Coverage note: these subsets were cut against the Creator Studio corpus. A heading glyph outside it falls through to Chiron Hei HK, then Noto Sans TC — both self-hosted — so the worst case is a different correct face, never tofu. Re-subset against the full Ztor corpus before this is the only CJK source. */ A geometric brand face: excellent large and bold, and it closes up at small sizes (its counters fill in around 12px), which is exactly why body text hands off to Chiron below. These are the full weights, now CJK-pinned so they can no longer claim Latin. */ @font-face { font-family: 'LINE Seed TW'; src: url('assets/fonts/LINESeedTW-Th-subset.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; } @font-face { font-family: 'LINE Seed TW'; src: url('assets/fonts/LINESeedTW-Rg-subset.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; } @font-face { font-family: 'LINE Seed TW'; src: url('assets/fonts/LINESeedTW-Bd-subset.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; } @font-face { font-family: 'LINE Seed TW'; src: url('assets/fonts/LINESeedTW-Eb-subset.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; } /* ── CHIRON HEI HK 昭源黑體 — Chinese BODY / UI / small text ── A screen-corrected redraw of Source Han Sans / Noto Sans CJK (Tamcy, SIL OFL), variable 250–900. Chosen because its vertical metrics are IDENTICAL to Noto's (typo 880/−120, hhea 1160/−288, cap 733, x-height 543), so it can sit directly in front of Noto as the primary with zero baseline shift on fallback — and it holds its counters at 12px where LINE Seed fills in. Declared 350–900, NOT 250–900: see the 350-floor note in the header. */ @font-face { font-family: 'Chiron Hei HK'; src: url('assets/fonts/ChironHeiHK-subset.woff2') format('woff2-variations'); font-weight: 350 900; font-style: normal; font-display: swap; unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; } /* ── NOTO SANS TC — the CJK safety net ── Variable 100–900 so every requested weight maps through the axis. */ @font-face { font-family: 'Noto Sans TC'; src: url('assets/fonts/NotoSansTC-subset.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; } /* ╔══════════════════════════════════════════════════════════════════════╗ ║ THE STACKS — one definition, consumed by both worlds ║ ║ Token NAMES are unchanged (32+ consumers in the component CSS ║ ║ resolve through them); only the values moved. ║ ╚══════════════════════════════════════════════════════════════════════╝ */ :root { /* Display / heading tier — Chinese lands on LINE Seed. */ --font-cjk-display: 'Satoshi', 'LINE Seed TW', 'Chiron Hei HK', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif; /* Text / body / UI tier — Chinese lands on Chiron. LINE Seed is kept LAST among the CJK faces as a coverage net, not as a preference: the Chiron and Noto files are subsets, and a rare glyph absent from both should fall to a self-hosted face rather than to the OS or to tofu. Per-glyph fallback means this costs nothing for the common case. */ --font-cjk-text: 'Satoshi', 'Chiron Hei HK', 'Noto Sans TC', 'LINE Seed TW', 'PingFang TC', 'Microsoft JhengHei', sans-serif; /* Latin-only contexts (numerals, code, Latin-only UI). */ --font-latin: 'Satoshi', system-ui, -apple-system, sans-serif; /* Quantities. Same face as the UI tier by design — the contract is "this string is a number", not "this face". Consumers pair it with tabular-nums; heading transforms (uppercase / tracking) must not reach numerals. */ --font-numeric: 'Satoshi', system-ui, -apple-system, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; } /* English locale: identical stacks. Latin is already Satoshi everywhere, so the locale needs no font swap at all — this block exists to make that explicit and to override the retired proxima-nova / Inter / Afacad declarations rather than leave them to be rediscovered later. (2026-07-28, L: "use satoshi for all english fonts" — Afacad retired.) */ html[lang='en'] { --font-cjk-display: 'Satoshi', system-ui, -apple-system, sans-serif; --font-cjk-text: 'Satoshi', system-ui, -apple-system, sans-serif; --font-latin: 'Satoshi', system-ui, -apple-system, sans-serif; } /* CJK optical corrections — applied where Chinese is actually rendering. Negative tracking is a Latin device: it tightens wide Latin sidebearings at display sizes. Square CJK glyphs already sit flush, so the same value jams them together. Zeroed for zh-Hant only. */ :lang(zh-Hant) { --type-display-64-tracking: 0; --type-display-44-tracking: 0; --type-title-40-tracking: 0; --type-title-32-tracking: 0; --type-title-24-tracking: 0; --type-label-15-tracking: 0; }