/* Expanding Ranks web fonts, as served.
 *
 * This is brand/fonts/fonts.css with the src paths pointed at where the site
 * actually serves the files from. The declarations themselves, the axis
 * ranges, the display strategy and the logotype rule are owned by
 * brand/fonts/fonts.css and are not re-decided here.
 *
 * Paths are RELATIVE (./..) rather than absolute (/fonts/..) on purpose, so
 * site/styleguide.html opens correctly straight off the filesystem. At the
 * served root the two resolve to the same place.
 *
 * Four files, 599KB, every weight and width covered. Never add a static weight
 * file alongside these, and never link a font CDN: self-hosting is faster and
 * it keeps every visitor's IP off a third party, which matters more in a
 * product holding recruiting data.
 *
 * Preload the two upright files only, with crossorigin, which is required even
 * same origin. A CSS @font-face fetch is always anonymous-CORS mode and a
 * preload only satisfies a later request when the modes match, so dropping it
 * downloads every font twice:
 *
 *   <link rel="preload" as="font" type="font/woff2" crossorigin
 *         href="./fonts/Archivo-Variable.woff2">
 *   <link rel="preload" as="font" type="font/woff2" crossorigin
 *         href="./fonts/DMSans-Variable.woff2">
 */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-Italic-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}

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

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Italic-Variable.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

/* DM Sans carries an optical size axis. Left alone the browser tracks
 * font-size automatically, which is the behaviour we want. Do not pin
 * font-optical-sizing to none. */