/* Typefaces * * The reference build uses two commercially licensed families: * headings — Söhne Schmal Halbfett (ultra-condensed grotesque, weight 600) * body — PP Neue Montreal (neo-grotesque, weights 400/500) * * Neither can be redistributed, so we self-host the closest open substitutes and * alias them to the original family names. Every extracted rule still asks for * "Soehne Schmal Halbfett" / "Neue Montreal", so nothing downstream changes — * drop the licensed files in here and the site is pixel-identical. * * Roboto Flex @ wdth 25 -> Söhne Schmal Halbfett (SIL OFL 1.1) * Inter variable -> PP Neue Montreal (SIL OFL 1.1) * * Heading substitute — how it was chosen * ------------------------------------- * Measured against the live reference at 100px, "WEBSITES FOR" is 338px wide in * Söhne Schmal Halbfett. Candidates, by width error: * * Roboto Flex (wdth 25) +10.3% <- chosen * Bebas Neue +27.1% (also: no lowercase) * Saira Extra Condensed +28.7% * Big Shoulders Display +45.4% * Anton +52.4% * Oswald +72.5% * * Roboto Flex wins because its width axis goes far enough to reach genuinely * ultra-condensed. Per-glyph it is closer still — a cap "H" is 36px against * Söhne's 34.9px, only 3% wide — so most of that 10.3% is sidebearing, which * the tracking correction below absorbs. */ /* --- Headings: Roboto Flex, condensed and metric-matched ----------- * * * The three override descriptors are doing real work, not fine-tuning: * * size-adjust 97% scales glyphs so "H" matches Söhne's 34.9px * ascent-override 107.2% Söhne's ascent is 104/100em; against the adjusted * descent-override 23.7% em that is 104/97, likewise 23/97 for descent * line-gap-override 0% Söhne has none * * Without the ascent/descent overrides the substitute reports a 117.5px line box * where Söhne reports 127px. Headings on this site are set at line-height 0.85em, * which is already tighter than the glyphs — with the wrong metrics the hero * headline's lines overlap each other by roughly a tenth of their height. */ @font-face { font-family: 'Soehne Schmal Halbfett'; src: url('/assets/fonts/roboto-flex-var-latin.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: optional; size-adjust: 97%; ascent-override: 107.2%; descent-override: 23.7%; line-gap-override: 0%; 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: 'Soehne Schmal Halbfett'; src: url('/assets/fonts/roboto-flex-var-latin-ext.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: optional; size-adjust: 97%; ascent-override: 107.2%; descent-override: 23.7%; line-gap-override: 0%; 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; } /* --- Body: Inter variable ----------------------------------------- * * Neue Montreal and Inter are close enough in width and x-height that no * metric overrides are needed. */ @font-face { font-family: 'Neue Montreal'; src: url('/assets/fonts/inter-var-latin.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: optional; 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; } /* NOTE (2026-07-30): every self-hosted face uses `font-display: optional`, not * `swap`. With swap the fallback painted first and the real face swapped in a * beat later, reflowing headline spacing on load — the visible "glitch". The * display faces are preloaded in Base.astro, so optional resolves to the real * font on virtually every load and NEVER reflows afterwards. */ /* --- Manrope (real) — the site's chosen typeface for everything ------------- * Logo, nav, body and hero all use Manrope; the hero just leans on size/weight. * Self-hosted variable woff2 (weight axis 200–800). */ @font-face { font-family: 'Manrope'; src: url('/assets/fonts/manrope-var-latin.woff2') format('woff2-variations'); font-weight: 200 800; font-style: normal; font-display: optional; 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: 'Manrope'; src: url('/assets/fonts/manrope-var-latin-ext.woff2') format('woff2-variations'); font-weight: 200 800; font-style: normal; font-display: optional; 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: 'Neue Montreal'; src: url('/assets/fonts/inter-var-latin-ext.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: optional; 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; } /* Roboto Flex only reaches ultra-condensed when the width axis is driven * explicitly — the @font-face descriptors can't carry it. Applied to everything * that asks for the display family so no rule has to opt in. * * The extra -0.006em of tracking closes the residual sidebearing gap noted * above; combined with size-adjust it brings a line of display text to within * about 1% of the reference's measure. */ :where([class*='heading-style'], h1, h2, h3, h4, h5, h6, .home-hero_title, .menu-link-heading) { font-variation-settings: 'wdth' 25, 'wght' 700, 'opsz' 144; letter-spacing: calc(-0.01em - 0.006em); }