/* tokens.css - Knightcott Tyres. Every colour is measured off his logo (_research/logo-measure.json):
   red #c61c35 (KNIGHTCOTT), yellow #fabd3d (TYRES and its speed lines), navy #274163 (THE TYRE SPECIALISTS).
   Shades and tints are those three, darkened or lightened; the ground is the silver-white of his van's side.
   Type: Saira (squared, technical capitals like the strapline) for display; Archivo for reading. Both OFL, self-hosted. */
@font-face {
  font-family: "Saira";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/Saira-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/Archivo-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Saira Fallback";
  src: local("Arial");
  size-adjust: 107.56%;
  ascent-override: 105.52%;
  descent-override: 40.82%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial");
  size-adjust: 101%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  /* the mark's three materials, shadow / body / light */
  --red-d: #a8172c;
  --red: #c61c35;
  --red-l: #ff6b7f;          /* red on the darkest navy only (5.86:1) */
  --red-tint: #fff4f5;
  --yellow-d: #d99a1a;
  --yellow: #fabd3d;
  --yellow-l: #ffd77f;
  --navy-l: #3b5a85;
  --navy: #274163;
  --navy-d: #1b2f4b;
  --deep: #13213a;           /* the hero, the tyre centre */
  --night: #0b1422;          /* the room before the lights come on */

  /* grounds and neutrals: the van's silver-white, cool greys that sit with the navy */
  --ground: #ffffff;
  --silver: #eef1f5;
  --line: #d5dbe3;
  --line-dark: rgba(255, 255, 255, .22);
  --ink: #13213a;            /* body text on white: 16.1:1 */
  --ink-soft: #4b5b72;       /* secondary text on white 6.9:1, on silver 6.1:1 */
  --on-dark: #ffffff;
  --on-dark-soft: #c8d3e2;   /* on --deep 10.6:1, on --navy 7.4:1 */

  /* photographs: clear over the subject, dark behind the words (JORDON_PREFERS: .06 / .74) */
  --scrim-clear: rgba(19, 33, 58, .06);
  --scrim-dark: rgba(19, 33, 58, .78);

  --f-display: "Saira", "Saira Fallback", Arial, sans-serif;
  --f-text: "Archivo", "Archivo Fallback", Arial, sans-serif;

  --cut: 12px;               /* the chamfer, cut like the wordmark's letters */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --pad: 20px;
  --sec: 30px;
  --hdr-h: 64px;
}
@media (min-width: 700px) {
  :root { --pad: 36px; --sec: 72px; --hdr-h: 72px; }
}
@media (min-width: 1100px) {
  :root { --pad: 56px; --sec: 104px; --hdr-h: 84px; }
}