/* ============================================================
   Self-hosted fonts.

   These used to load from fonts.googleapis.com with display=swap, which meant
   every visitor saw the page render in a system fallback and then re-wrap when
   the real font arrived. Combined with text-wrap: balance and text-wrap: pretty
   on the headings, whole paragraphs visibly reflowed. That was the "text
   glitches and reformats" on load.

   Served from our own domain the files arrive with the page, so there is no
   swap to see. It also drops a third-party dependency: no Google request on
   page load, and the site keeps working if Google is blocked or slow.

   140 KB total. DM Sans and JetBrains Mono are variable fonts, so one file
   each covers every weight the site uses.

   Family names deliberately match what the old Google link provided, so
   nothing else in the CSS had to change.
   ============================================================ */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/dm-sans-variable.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-variable.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/space-mono-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-mono-700.woff2') format('woff2');
}

/* solutions.html sets font-family: 'Inter' directly. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-variable.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/press-start-2p.woff2') format('woff2');
}

/* ============================================================
   Metric-matched fallbacks.

   Self-hosting removed the flash of unstyled text, but not the reflow. On a
   slow connection the real fonts still arrive a second or two after first
   paint, and the fallback the browser uses in the meantime is a different
   width. Different width means a different number of lines, and when the real
   font lands every paragraph below re-flows and the page jumps under you.
   Measured on a 400kbps connection: text moving up by 26 to 56px, two or three
   seconds after the page appeared. That is the "glitch" it looks like.

   These faces are the plain system fonts, scaled so they take up the same
   horizontal space as the real thing. Same width means the same line count,
   so when the real font swaps in the text stays exactly where it was.

   size-adjust values are measured, not guessed: rendered width of the real
   font divided by the fallback at the same size. DM Sans runs 103.76% of
   Arial, JetBrains Mono 99.66% of monospace, and Press Start 2P a full 166.1%,
   which is why the pixel labels moved the most.

   Re-measure these if a font is ever swapped out. scratchpad/metrics.mjs in
   the session that added this shows how.
   ============================================================ */

@font-face {
  font-family: 'DM Sans Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 106%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'JetBrains Mono Fallback';
  src: local('Courier New'), local('Liberation Mono'), local('DejaVu Sans Mono');
  size-adjust: 99.66%;
  ascent-override: 102%;
  descent-override: 30%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Press Start 2P Fallback';
  src: local('Courier New'), local('Liberation Mono'), local('DejaVu Sans Mono');
  size-adjust: 166.1%;
  ascent-override: 60%;
  descent-override: 15%;
  line-gap-override: 0%;
}

/* solutions.html uses Inter and Space Mono rather than DM Sans and JetBrains
   Mono, so those need matched fallbacks too. Same method, same reason. */

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Space Mono Fallback';
  src: local('Courier New'), local('Liberation Mono'), local('DejaVu Sans Mono');
  size-adjust: 101.65%;
  ascent-override: 101%;
  descent-override: 25%;
  line-gap-override: 0%;
}