:root {
  --mono: "MONO" 0.2;
  --casl: "CASL" 0;
  --slnt: "slnt" 0;
  --ital: "ital" 0.5;
}

* {
  font-variation-settings:
    var(--mono),
    var(--casl),
    var(--slnt),
    var(--ital);
}

body {
  font-family:
    "Recursive",
    "iA Writer Quattro",
    "IBM Plex Sans",
    Arial,
    Helvetica,
    sans-serif;
  line-height: 1.618;
  font-weight: 350;
}

cite,
em,
i {
  --slnt: "slnt" -15;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  --mono: "MONO" 0.1;
  --casl: "CASL" 0.5;

  margin: 1.5em 0 0.5em;
}

a {
  color: inherit;
  text-decoration: none;
}

p a {
  /* fallback for text-decoration-thickness */
  box-shadow: inset 0 -1px var(--fg);
}

@supports (text-decoration-thickness: 0.05em) {
  p a {
    box-shadow: none;
    text-decoration: underline;
    text-decoration-thickness: 0.05em;
    text-underline-offset: 0.15em;
  }
}

p {
  max-width: 80ch;
}

code,
pre {
  --mono: "MONO" 1;
  --casl: "CASL" 0.2;

  font-family:
    "Recursive",
    "Fira Code",
    "Fira Mono",
    "IBM Plex Mono",
    "Roboto Mono",
    monospace;
}