/* ============================================================================ CINEMERE — self-hosted fonts ---------------------------------------------------------------------------- These were previously loaded from Google Fonts (fonts.googleapis.com / fonts.gstatic.com). That handed every visitor's IP address to Google on every page load, before any interaction — the exact practice EU courts have ruled an unlawful transfer under the GDPR (LG München I, 3 O 17493/20). Self-hosting the woff2 files removes that transfer entirely: no visitor data ever reaches Google. Cormorant Garamond and Syne are VARIABLE fonts, so a single file per subset/ style covers the whole weight range (declared below as `font-weight: min max`). Both the Latin and Latin-Extended subsets are included so accented member names (common across the EU) render correctly. font-display:swap keeps text visible while the face loads. Source: Google Fonts (Open Font License). Files live in ./fonts/. ========================================================================== */ /* ============================================================================ METRIC-MATCHED FALLBACKS — why the text used to jump between pages ---------------------------------------------------------------------------- Every face below uses font-display:swap, so the browser paints a fallback immediately and swaps in the real face when it arrives. The fallbacks were wildly mismatched, so that swap MOVED the layout: measured on this codebase, Cormorant Garamond is 13.1% NARROWER than Georgia, and Syne's ascent is 11.8% shorter than system-ui's. That is exactly the "text alignment and size shift after a slight delay" when moving between pages. The faces below re-shape the local fallback to the webfont's own metrics, so the swap is invisible: same advance width, same ascent, same descent, so the line boxes never change height and blocks never reflow. The numbers are MEASURED, not guessed (canvas TextMetrics at 100px em): width/em ascent% descent% Cormorant Garamond 24.644 92 29 <- target Georgia 28.355 92 22 Times New Roman 25.882 89 22 Syne 27.091 93 28 <- target Arial 28.239 91 21 size-adjust = target_width / fallback_width. Note the override descriptors are applied BEFORE size-adjust scales them (verified empirically: ascent-override 92% under size-adjust 86.91% renders as 80%), so each override is pre-divided by the size-adjust factor. Verified after the fact: width, ascent and descent all match the webfont exactly. Platforms without Georgia/Arial (e.g. Android) simply fall through to the next family in the stack; there they are protected by the font preloads in each page head instead, which get the real face in before first paint. ========================================================================== */ @font-face { /* Cormorant Garamond -> Georgia */ font-family: 'Cinemere Serif Fallback'; src: local('Georgia'); size-adjust: 86.91%; ascent-override: 105.86%; /* 92 / 0.8691 */ descent-override: 33.37%; /* 29 / 0.8691 */ line-gap-override: 0%; } @font-face { /* Cormorant Garamond -> Times New Roman */ font-family: 'Cinemere Serif Fallback 2'; src: local('Times New Roman'); size-adjust: 95.22%; ascent-override: 96.62%; /* 92 / 0.9522 */ descent-override: 30.46%; /* 29 / 0.9522 */ line-gap-override: 0%; } @font-face { /* Syne -> Arial (Roboto/Helvetica where absent) */ font-family: 'Cinemere Sans Fallback'; src: local('Arial'), local('Roboto'), local('Helvetica Neue'); size-adjust: 95.94%; ascent-override: 96.94%; /* 93 / 0.9594 */ descent-override: 29.19%; /* 28 / 0.9594 */ line-gap-override: 0%; } /* Inter is now the face carrying every paragraph, so it needs its own matched fallback or the body copy reflows on swap. Measured the same way as the rest of this file (canvas TextMetrics at 100px em, mean advance over a-z): Inter 53.521 wide, ascent 97, descent 24 <- target Arial 48.954 wide, ascent 91, descent 21 size-adjust = 53.521 / 48.954 = 109.33%; the overrides are pre-divided by it, per the note at the top of this file. */ @font-face { font-family: 'Cinemere Text Fallback'; src: local('Arial'), local('Roboto'), local('Helvetica Neue'); size-adjust: 109.33%; ascent-override: 88.72%; /* 97 / 1.0933 */ descent-override: 21.95%; /* 24 / 1.0933 */ line-gap-override: 0%; } /* ⛬ Syne Mono had NO matched fallback at all, and the comment on the --mono stack justified that with "already metric-matched: 33.55 vs 33.54 width/em". That is an ADVANCE-WIDTH comparison, which is very nearly true of any two monospace faces by construction, and it says nothing about x-height, cap-height or descender depth — the three things a reader actually sees. Measured here (100px em): Syne Mono adv 55.00 asc 71 desc 20 x-height 49.8% cap 65.6% <- target Consolas adv 54.98 asc 70 desc 22 x-height 50.0% cap 64.1% Courier New adv 60.01 asc 62 desc 19 x-height 42.2% cap 57.8% So on Windows the bare `monospace` keyword really was a near-perfect match, and on iOS/macOS — where `monospace` resolves to Courier — it is a face with a **15% smaller x-height** and a hairline descender. One generic keyword, two completely different outcomes, which is the shape of a defect that "only some members see". Two faces rather than one, following the Serif Fallback / Serif Fallback 2 pattern above, because a single size-adjust cannot serve both: matching Courier's advance (91.65%) would shrink its already-small x-height further. ⛬ Menlo, SF Mono, DejaVu Sans Mono and Liberation Mono are deliberately ABSENT. None are installed on the measuring machine, and a probe against a nonsense family returned byte-identical metrics for all of them — i.e. they were silently measuring the default sans. A size-adjust written from that would be a guessed number wearing a decimal point. They fall through to Fallback 2, which IS measured. */ @font-face { /* Syne Mono -> Consolas (Roboto Mono on Android) */ font-family: 'Cinemere Mono Fallback'; src: local('Consolas'), local('Roboto Mono'), local('Droid Sans Mono'); size-adjust: 100.04%; /* 55.00 / 54.98 */ ascent-override: 70.97%; /* 71 / 1.0004 */ descent-override: 19.99%; /* 20 / 1.0004 */ line-gap-override: 0%; } @font-face { /* Syne Mono -> Courier New (the iOS/macOS path) */ font-family: 'Cinemere Mono Fallback 2'; src: local('Courier New'), local('Courier'); size-adjust: 91.65%; /* 55.00 / 60.01 */ ascent-override: 77.47%; /* 71 / 0.9165 */ descent-override: 21.82%; /* 20 / 0.9165 */ line-gap-override: 0%; } /* ---- Cormorant Garamond — display serif (--serif) ---- */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/cormorant-garamond-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/cormorant-garamond-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url(fonts/cormorant-garamond-italic-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url(fonts/cormorant-garamond-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---- Syne — UI sans (--sans) ---- */ @font-face { font-family: 'Syne'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/syne-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Syne'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/syne-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---- Inter — the TEXT face for running prose (--sans-text) ---------------- ⛬ WHY THERE ARE TWO SANS FACES. Syne is the brand's voice and stays on every heading, nav link, button, chip and HUD label. It is NOT a text face: its descenders end in a blunt, square terminal at a constant stroke width, which MEASURES as a taper of exactly 0.00 (the ink-pixel count per row for the last 8 rows of `g` is 33,33,33,33,33,33,33,33 and then nothing). Every text face tapers to a point instead: g depth g taper Syne 19.8% 0.00 <- stops dead Inter 21.5% 0.92 <- chosen Source Sans 3 22.3% 0.76 IBM Plex Sans 21.0% 0.66 Public Sans 17.0% 0.81 In running text at reading sizes a blunt curved tail reads as a CHOPPED-OFF letter, which is what a member reported: "every g looks cut". It is not a bug, not a clip and not a broken file, so no font-size or CSS change can fix it. Only a different face can. Inter has the deepest properly-tapered descender of the candidates and is built for screen text. Applied by making `body` default to --sans-text. Everything that explicitly declares var(--sans) (all the chrome) keeps Syne automatically; only prose, which merely inherits, changes. Source: Google Fonts (Open Font License). */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/inter-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---- Syne Mono — HUD / metadata (--mono) ---- */ @font-face { font-family: 'Syne Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/syne-mono-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Syne Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/syne-mono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }