/* ========================================================= OSWALD SKIN — retunes the design-system type tokens for the one typeface the homepage uses. Load LAST, after colors_and_type.css / styles.css / scorecard.css. Why a skin instead of editing the tokens: the teardown samples link the same colors_and_type.css and deliberately stay Fraunces. They are standalone artefacts you send someone, not pages in the site's scroll. Editing tokens in place would restyle them by accident. Colors, spacing, atmospheres and layout are untouched: the palette already matches the homepage exactly. This file only moves type. This file also SHIPS the typeface, and it is the right place for it precisely because of the Fraunces note above: the two teardown samples do not link this file, so they never download a font they do not render. ========================================================= */ /* --------------------------------------------------------- Oswald, self-hosted. It used to come from fonts.googleapis.com, which cost two things. Every visitor's IP address was handed to Google before they had agreed to anything, which is the part that has actually produced litigation in Europe. And the stylesheet was a render-blocking request to a third origin, so nothing painted until two extra round trips had completed. Both files are the same bytes Google serves, same version (v57). Latin and latin-ext only: the site is English, and latin-ext covers European names without dragging in Cyrillic or Vietnamese. --------------------------------------------------------- */ @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 200 700; /* one variable file covers the range */ font-display: swap; src: url('/assets/fonts/oswald-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: 'Oswald'; font-style: normal; font-weight: 200 700; font-display: swap; src: url('/assets/fonts/oswald-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; } /* The metric-matched stand-in that renders during the swap. Oswald is condensed, and the old fallback chain went straight to ui-sans-serif, which is far wider. So the first paint laid out at one width and the page visibly re-wrapped when Oswald arrived. On the homepage that hits a hero at clamp(52px, 9.2vw, 136px) with text-wrap: balance, which is the single largest layout shift on the site. Numbers are measured, not guessed: Oswald's average lowercase advance is 0.3999em against Arial's 0.4895em, so the stand-in is scaled to 81.69% to match line breaks. The ascent and descent overrides are Oswald's own (1193/1000 and 289/1000) divided by that scale, so the line box keeps Oswald's height rather than shrinking with the glyphs. */ @font-face { font-family: 'Oswald Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Liberation Sans'); size-adjust: 81.69%; ascent-override: 146.04%; descent-override: 35.38%; line-gap-override: 0%; /* Deliberately limited to the ranges Oswald itself covers. Without this the stand-in would also serve glyphs Oswald LACKS, and it would serve them at 81.69% with overridden metrics. Arrows are the case that bites: Oswald has no glyph for U+2190 or U+2192, Arial has both, so every "->" in a CTA would quietly render 18% too small. Capping the range makes this font do one job, stand in for Oswald's own letters, and lets anything else fall through to the next entry. */ 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, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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; } :root { /* All roles resolve to one family, same as the homepage. The three symbol families after the fallback exist for one reason: Oswald ships no arrow glyphs, so the "->" in every CTA and the "<-" in every back link have always been drawn by whatever the OS picked. Naming them makes that deterministic and consistent across platforms instead of undefined. Everything else still renders in Oswald. */ --font-display: 'Oswald', 'Oswald Fallback', 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'DejaVu Sans', ui-sans-serif, system-ui, sans-serif; --font-body: 'Oswald', 'Oswald Fallback', 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'DejaVu Sans', ui-sans-serif, system-ui, sans-serif; --font-mono: 'Oswald', 'Oswald Fallback', 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'DejaVu Sans', ui-sans-serif, system-ui, sans-serif; --font-prose: 'Oswald', 'Oswald Fallback', 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'DejaVu Sans', ui-sans-serif, system-ui, sans-serif; /* Condensed letterforms crowd fast, so negative tracking has to go. Mono-role tracking matches the homepage's --track-mono: .22em. */ --track-hero: -0.005em; --track-display: 0; --track-mono: 0.22em; --track-mono-loose: 0.14em; --track-sidenav: 0.18em; } /* Body: lighter weight, taller lines. Narrow letterforms need vertical air. font-optical-sizing is a Fraunces feature and does nothing here. */ html, body, .m-body, .m-prose { font-weight: 200; line-height: 1.68; letter-spacing: .012em; font-optical-sizing: none; } .m-body strong, .m-prose strong { color: var(--fg); font-weight: 400; } /* Display: Oswald's 400 carries a headline where Fraunces needed 300-400. */ .m-hero { font-weight: 400; line-height: .95; } .m-h2 { font-weight: 400; line-height: 1.02; } /* ---- No italic anywhere ---- Oswald ships no italic, so every italic below would render as a synthetic skew. Emphasis becomes the homepage gesture instead: gradient + weight 600. The gradient/background-clip already comes from colors_and_type.css. */ i, em, cite, address, dfn, var { font-style: normal; } .m-accent, .m-hero em, .m-h2 em { font-style: normal; font-weight: 600; } .m-stat .unit { font-style: normal; font-weight: 500; } /* Small uppercase labels: Oswald 200 disappears at 11-12px, so the mono-role classes all need weight 400+ to hold their own. */ .m-eyebrow, .m-mono, .m-label, .m-mono-link, .form-status, .score-of, .phase-name, .phase-entry { font-weight: 400; font-optical-sizing: none; } /* ---- One small-text size across the diagnostic UI ---- The token layer scatters 10/11/12px across labels, hints and statuses. In Oswald they all land on 12px: legible at weight 400, and every piece of small chrome reads as the same voice. */ .m-label, .m-mono, .m-eyebrow, .m-mono-link, .form-status, .opt, .gate-privacy, .gate-consent span, .back-link, .score-of, .phase-entry { font-size: 12px; } /* Buttons and inputs inherit the body weight, which is too light for a CTA. */ .m-cta { font-weight: 500; } .m-input { font-weight: 300; } .back-link { font-weight: 400; } /* The mad-libs slots ARE the headline, and each one is a gradient keyword. Underline stays (it's the affordance that says "tap me"), italic goes. */ .slot { font-style: normal; font-weight: 500; } /* Chat bubbles run at 15-18px, where weight 200 gets thin on a dark canvas. 300 keeps the airy feel and stays readable. */ .bubble, .chip, .sharp-read, .phase-blurb { font-weight: 300; } /* Oswald has proportional digits, so a 0-to-100 count-up visibly jitters as the width of each glyph changes. tabular-nums locks the advance width, and the min-width is the belt-and-braces fallback if the feature is missing. */ .score-number { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; min-width: 3ch; text-align: center; }