/* CSS systems — self-hosted webfonts (#559)
*
* The homepage type system: Jost (hero) + Victor Mono (body), both SIL
* OFL 1.1, subset and self-hosted under assets/fonts/ (no CDN). These were
* first vendored and trialled in the type-scale explorer (#558); this file
* promotes them onto the live homepage.
*
* Paths are ../assets/fonts/* because url() resolves relative to this CSS
* file (in css/), not the linking document at the repository root.
*
* Both keep their upstream family names: neither Jost nor Victor Mono
* declares an OFL Reserved Font Name (their OFL copyright lines carry no
* "with Reserved Font Name" clause), so a subset may ship under the
* original name. See assets/fonts/README.md and the Third-Party Asset
* Whitelist in docs/ARCHITECTURE.md.
*
* FOUC / CLS prevention strategy
* ──────────────────────────────
* Three techniques work together:
*
* 1. Preload: index.html carries for all three woff2
* files. Browsers fetch them during the earliest network phase so the
* fonts are almost always ready before first paint.
*
* 2. font-display: optional — the browser renders the brand font if it
* arrives inside the ~100 ms block period (preload makes this near-
* certain on any warm connection), and stays on the fallback with zero
* swap if it does not. This is a stricter budget than "swap" but
* eliminates the guaranteed fallback→swap jank entirely.
*
* 3. Metric-matched fallback families ("Jost Fallback", "Victor Mono
* Fallback") override ascent/descent/line-gap and size-adjust so the
* fallback glyph boxes occupy the same space as the web fonts. If the
* brand fonts miss the block period the fallback renders with the same
* geometry — no shift, no re-layout. The font stacks in css/base.css
* insert the fallback family immediately after the brand family.
*
* Metric derivation (all values extracted from the actual shipped woff2
* files via fontTools — no guessing):
*
* Jost (jost-hero.woff2):
* unitsPerEm=1000, USE_TYPO_METRICS=true
* sTypoAscender=1070, sTypoDescender=-375, sTypoLineGap=0
* avg advance=460.18 → 46.02 % of UPM
*
* Victor Mono (both faces, identical metrics):
* unitsPerEm=1100, USE_TYPO_METRICS=true
* sTypoAscender=1100, sTypoDescender=-250, sTypoLineGap=200
* avg advance=600 (monospace) → 54.55 % of UPM
*
* Fallback proxy — Arial / LiberationSans (metric-compatible with Arial):
* unitsPerEm=2048, USE_TYPO_METRICS=false → hhea used by browsers
* hheaAscent=1854, hheaDescent=-434, hheaLineGap=67
* avg advance=1171.76 → 57.21 % of UPM
*
* Fallback proxy — Courier New / LiberationMono (metric-compatible):
* unitsPerEm=2048, USE_TYPO_METRICS=false → hhea used by browsers
* hheaAscent=1705, hheaDescent=-615, hheaLineGap=0
* avg advance=1229.00 (monospace) → 60.01 % of UPM
*
* size-adjust scales the em — and the metric overrides scale WITH it — so the
* ascent/descent/line-gap overrides are the raw font ratios DIVIDED by
* size-adjust (the Fontaine/Capsize formula). Without that division the line
* box is double-shrunk (e.g. Jost's H1 was ~15-20px short), which defeats the
* whole point.
*
* Jost Fallback overrides (local Arial → matches Jost's line box):
* size-adjust = (460.18/1000) /
* (1171.76/2048) = 80.43 %
* ascent-override = 1070/1000 / 0.8043 = 133.04 %
* descent-override = 375/1000 / 0.8043 = 46.63 %
* line-gap-override = 0/1000 / 0.8043 = 0.00 %
*
* Victor Mono Fallback overrides (local Courier New → matches Victor Mono):
* size-adjust = (600/1100) /
* (1229/2048) = 90.89 %
* ascent-override = 1100/1100 / 0.9089 = 110.03 %
* descent-override = 250/1100 / 0.9089 = 25.01 %
* line-gap-override = 200/1100 / 0.9089 = 20.00 % */
/* ─── Metric-matched fallback families ──────────────────────────────────── */
/* "Jost Fallback": Arial overridden to match Jost's line-box geometry.
local('Arial') on Windows/Linux; local('Helvetica Neue') on macOS (also
metrically close); local('Liberation Sans') on Linux as the primary proxy.
All three are metric-compatible sans-serif faces wide enough to approach
Jost's x-advance after the 80.43% size-adjust. */
@font-face {
font-family: "Jost Fallback";
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
/* size-adjust scales the em (and the metric overrides with it), so the
ascent/descent/line-gap overrides are Jost's raw ratios DIVIDED by
size-adjust — otherwise the line box is double-shrunk (Fontaine/Capsize
formula): 1070/1000/0.8043 = 133.04%, 375/1000/0.8043 = 46.63%. */
size-adjust: 80.43%;
ascent-override: 133.04%;
descent-override: 46.63%;
line-gap-override: 0%;
}
/* "Victor Mono Fallback": Courier New overridden to match Victor Mono's
line-box geometry. Courier New is monospaced, like Victor Mono — width
matching via size-adjust is exact (no proportional averaging artefacts).
local('Courier New') on Windows; local('Courier') on macOS/Linux. */
@font-face {
font-family: "Victor Mono Fallback";
src: local('Courier New'), local('Courier'), local('Liberation Mono');
/* Overrides divided by size-adjust (see Jost Fallback above): 1100/1100/0.9089
= 110.03%, 250/1100/0.9089 = 25.01%, 200/1100/0.9089 = 20.00%. */
size-adjust: 90.89%;
ascent-override: 110.03%;
descent-override: 25.01%;
line-gap-override: 20.00%;
}
/* ─── Web-font @font-face rules ─────────────────────────────────────────── */
/* font-display: optional — renders brand font if present within the ~100 ms
block period (guaranteed by the in index.html); stays
on the metric-matched fallback with zero layout shift if not. */
@font-face {
font-family: "Jost"; /* subset, OFL 1.1 (no Reserved Font Name) */
src: url("../assets/fonts/jost-hero.woff2") format("woff2");
font-weight: 100 900; /* variable range */
font-style: normal;
font-display: optional;
}
@font-face {
font-family: "Victor Mono"; /* roman (subset), OFL 1.1 */
src: url("../assets/fonts/victor-mono-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: optional;
}
@font-face {
font-family: "Victor Mono"; /* cursive italic (subset), OFL 1.1 */
src: url("../assets/fonts/victor-mono-italic.woff2") format("woff2");
font-weight: 400;
font-style: italic;
font-display: optional;
}