/* ── Self-hosted fonts ─────────────────────────────────────────
   The real files, from Brand/Fonts in the vault (OFL), subset to latin,
   narrowed to the axis ranges this site actually uses, and served as
   variable woff2.

   The masters carry more range than the site needs: Bricolage ships
   wght 200-800 and a width axis, DM Sans wght 100-1000. Instancing them
   down to the ranges below took the three files from 303KB to 191KB
   with no visual change at all — the optical size axis is kept on both
   faces, because Bricolage is set from 15px labels to 300px display and
   the opsz axis is what keeps that looking right.

   Bricolage is now pinned to a single weight, because 800 is the only
   weight the site uses. Do not set a Bricolage rule to any other weight:
   there is no axis left to interpolate along, so the browser would
   synthesise it and a faked weight on a display face looks wrong.

   The optical size axis stays on both faces. Signed off by Olly,
   1 Sep 2026, after seeing the comparison — this is a decision, not a
   default, so do not instance it away to save the 19KB.

   Why: opsz is what fits the face to its size. Measured with it pinned
   to the display value, text sets 10.2% narrower at 15px, 9.6% at 20px
   and 8.9% at 26px, and reads cramped at the small end. Bricolage runs
   from 15px venn labels to 300px display type here, so the axis is
   doing real work. Evidence:
   reference_assets/screenshots/zoom-out-build/font-opsz-kept-vs-pinned.png

   Regenerate with fontTools if the ranges ever need to change:
     instancer  <master>  wdth=100 wght=800     (Bricolage)
     instancer  <master>  wght=300:700          (DM Sans, both)
     subset     --unicodes=<latin> --flavor=woff2 Self-hosted rather than Google-hosted: cache
   partitioning killed the shared-CDN argument, and it removes a third-party
   request from every page. Preload the two roman files in each page's head:

     <link rel="preload" href="/assets/fonts/BricolageGrotesque-var.woff2"
           as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="/assets/fonts/DMSans-var.woff2"
           as="font" type="font/woff2" crossorigin>
*/

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../assets/fonts/BricolageGrotesque-var.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/DMSans-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/DMSans-Italic-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}