/* ============================================================
   MILKY LANE · SELF-HOSTED TYPE
   ------------------------------------------------------------
   26 Aug 2026. Anton, Bebas Neue and Inter were loaded ONLY from
   fonts.googleapis.com with display=swap, even though the real
   .ttf files had been sitting in fonts/ the whole time with no
   @font-face pointing at them.

   That is the "skinny font". With display=swap the browser paints
   the FALLBACK first on every cold load and swaps when Google
   answers - so headings flash system-sans instead of Anton, body
   copy flashes a generic sans instead of Inter, and the page
   reflows. Where Google Fonts is blocked outright - corporate
   networks, ad blockers, strict privacy modes - it never swaps
   at all and the site stays skinny permanently.

   Self-hosting fixes all of it: the faces are same-origin, they
   arrive with the CSS, there is no third-party request to fail,
   and it drops a render-blocking dependency on a domain we do
   not control. Converted to woff2 - 64% smaller than the TTFs.

   Loaded FIRST, before every other stylesheet.
   ============================================================ */

@font-face {
  font-family: "Anton";
  src: url("fonts/Anton-Regular.woff2") format("woff2"),
       url("fonts/Anton-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal;
  /* block, not swap: Anton is the brand voice and a flash of
     Impact is worse than 100ms of nothing. Falls back after the
     block period regardless, so it can never hang the page. */
  font-display: block;
}

@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/BebasNeue-Regular.woff2") format("woff2"),
       url("fonts/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal;
  font-display: block;
}

/* Inter carries body copy, so swap is right here - text must be
   readable immediately even on a cold cache. */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Regular.woff2") format("woff2"),
       url("fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Bold.woff2") format("woff2"),
       url("fonts/Inter-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal;
  font-display: swap;
}
/* 500 and 600 are used across the site but only 400 and 700 ship.
   Map them onto the real faces so the browser interpolates from a
   genuine Inter rather than synthesising a bold from a fallback. */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Driftline ML";
  src: url("fonts/DriftlineML.woff2") format("woff2"),
       url("fonts/DriftlineML.ttf") format("truetype");
  font-weight: 400; font-style: normal;
  font-display: block;
}

/* 800 is used in four places. Only 400 and 700 ship as real files, so point
   800 at Bold and let the browser embolden from a genuine Inter rather than
   from whatever system sans it would otherwise fall back to. */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}