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


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

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

@font-face {
  font-family: "IBMSERIF";
  src: url("fonts/IBMPlexSerif.woff") format("woff");
  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;
}


: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;
}

body {
  font-family: "IBMSERIF";
  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;
}


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;
}

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

.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;
}

.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);
}

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


@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;
  }

  .epigraphe, .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;
  }
}