@font-face {
  font-family: "VICTORMONO";
  src: url("fonts/VictorMono-BoldItalic.woff"),
       url("fonts/VictorMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBMSERIF";
  src: url("fonts/IBMPlexSerif-Light.woff") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "vmd";
  src: url("fonts/VictorMono-SemiBoldItalic.woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}



/* =========================
   VARIABLES
========================= */

:root {
  --text: #000;
  --background: #fff;
  --muted: #444;
  --border: #ccc;
  --border-muted: #ddd;
}

:root[data-force-color-mode="dark"] {
  --text: #fff;
  --background: #000000e1;
  --muted: #ccc;
  --border: #555;
  --border-muted: #444;
}



/* =========================
   BASE
========================= */

body {
  font-family: "IBMSERIF", monospace;
  background-color: var(--background);
  color: var(--text);
  max-width: 41.18em;
  margin: auto;
  padding: 2.35em 1.18em;
  line-height: 1.6;
  font-size: 1em;

  /* 👇 suppression justification */
  text-align: left;
}



/* =========================
   TITRES
========================= */

h1,
h2,
h3 {
  font-family: "vmd", monospace;
  font-weight: 700;
  color: var(--text);
  line-height: 1.9em;
}

h1 {
  font-size: 3.53em;
  letter-spacing: 0.1em;
  line-height: 1.1em;
  margin-bottom: 0.59em;
}

h2 {
  font-size: 1.65em;
  margin-bottom: 1.18em;
}

h3 {
  font-size: 1.65em;
  margin-bottom: 1.18em;
}



/* =========================
   TEXTE
========================= */

p {
  margin-bottom: 0.88em;
  color: var(--text);

  /* 👇 pas de justification */
  text-align: left;

  /* 👇 pas de césure */
  hyphens: none;
}



/* =========================
   COMPOSANTS
========================= */

.authors {
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 1.76em;
}

.quote {
  font-style: italic;
  border-left: 0.18em solid var(--border-muted);
  color: var(--muted);
  padding-left: 0.7em;
  text-align: left;
}

.readmore {
  text-align: right;
}

.biography {
  font-size: 0.82em;
  color: var(--muted);
  border-top: 0.06em solid var(--border);
}

.footnotes {
  font-size: 0.76em;
  color: var(--muted);
}



/* =========================
   LIENS
========================= */

a {
  font-family: "vmd", monospace;
  color: var(--text);
  text-decoration: none;
}



/* =========================
   RESPONSIVE
========================= */

@media (max-width: 37.5em) {
  body {
    max-width: 100%;
    padding: 1.18em 0.88em;
    font-size: 0.94em;
  }

  p {
    text-align: left;
  }

  h1 {
    font-size: 2.12em;
    letter-spacing: 0.06em;
  }

  h2,
  h3 {
    font-size: 1.29em;
  }

  .quote {
    margin: 0.88em 0;
    padding-left: 0.47em;
    border-left-width: 0.12em;
  }

  .readmore {
    margin-top: 1.18em;
  }

  .biography,
  .footnotes {
    font-size: 0.76em;
  }
}