:root {
  --bg: #0b0b0a;
  --fg: #ece8e0;
  --dim: rgba(236, 232, 224, .56);
  --faint: rgba(236, 232, 224, .2);
  --hair: rgba(236, 232, 224, .09);
  --paper: #ebe7df;
  --ink: #0d0d0c;
  --red: #ff3d1f;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--red); color: #fff; }

/* Grotesque étendue en capitales */
.xl {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: -.025em;
  line-height: .82;
}
/* Sérif italique en contrepoint */
.it { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
/* Étiquettes techniques */
.mono { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }
.outline { color: transparent; -webkit-text-stroke: 1.5px var(--stroke, var(--fg)); }
.red { color: var(--red); }