/* ============================================================
   MILKY LANE · SELF-HOSTED TYPE
   Food truck landing page. Mirrors ml-fonts.css on the main
   Milky Lane build.

   Load this FIRST, before every other stylesheet.

   Three rules carried over from the main site, all of them
   learned the hard way:

   1. Self-host everything. No fonts.googleapis.com, ever.
      When the faces were loaded from Google with display=swap,
      the browser painted the FALLBACK on every cold load and
      swapped when Google answered, so headings flashed system
      sans and the page reflowed. Where Google Fonts is blocked,
      corporate networks, ad blockers, strict privacy modes, it
      never swapped at all and the site stayed skinny
      permanently.

   2. Same-origin, not just self-hosted. Pulling a face from
      another domain is a CORS request. If that host does not
      send Access-Control-Allow-Origin the browser fetches the
      file and then refuses to use it, silently. That is what
      was happening to Driftline on this page.

   3. block for the display faces, swap for body.

   Copy these files into assets/fonts/ on this host:
     Anton-Regular.woff2 / .ttf
     BebasNeue-Regular.woff2 / .ttf
     Inter-Regular.woff2 / .ttf
     Inter-Bold.woff2 / .ttf
     DriftlineML.woff2 / .ttf
   ============================================================ */

@font-face {
  font-family: "Anton";
  src: url("assets/fonts/Anton-Regular.woff2") format("woff2"),
       url("assets/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("assets/fonts/BebasNeue-Regular.woff2") format("woff2"),
       url("assets/fonts/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal;
  font-display: block;
}

/* The brand script face. Family name must be "Driftline ML" to
   match the main site. Must be served from THIS host. */
@font-face {
  font-family: "Driftline ML";
  src: url("assets/fonts/DriftlineML.woff2") format("woff2"),
       url("assets/fonts/DriftlineML.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("assets/fonts/Inter-Regular.woff2") format("woff2"),
       url("assets/fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Bold.woff2") format("woff2"),
       url("assets/fonts/Inter-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal;
  font-display: swap;
}

/* Only 400 and 700 ship as real files. 500, 600 and 800 are used
   across the brand, so map them onto the real faces. The browser
   then interpolates or emboldens from a genuine Inter rather
   than from whatever system sans it would otherwise reach for. */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Regular.woff2") format("woff2"), url("assets/fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Bold.woff2") format("woff2"), url("assets/fonts/Inter-Bold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Bold.woff2") format("woff2"), url("assets/fonts/Inter-Bold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}