style.css

:focus {
  box-shadow: 0 0 1ch 1ch var(--yffi, currentColor);
  outline: thick dotted var(--iffy, currentColor);
}

:any-link:hover {
  text-decoration-style: double;
}

* {
  box-sizing: border-box;
}

html { 
  font-family: sans-serif;
  font-size: max(3ch, 2vw + 1vh);
  line-height: 1.618;
}

pre {
  font-family: monospace;
  font-size: 0.666rem;
  margin: 0;
  white-space: pre-line;
}

body {
  display: flex;
  flex-flow: column;
  margin: auto;
  overflow-wrap: anywhere;
}

body > * {
  contain: layout;
  padding: 1em;
  padding-block: calc(1em + 1vh);
  padding-inline: calc(1em + 1vw);
}

a:only-child,
nav a {
  padding: .5ch;
}

q {
  font-family: monospace;
  quotes: '"' '"';
}

p {
  max-width: 26em;
  margin-block: 3ch;
  margin-inline: auto;
}

dt {
  font-size: 1.146rem;
  margin-block: 3ch 0;
}

dd { 
  margin-block: 0;
}

@media (orientation: portrait) {
  dd { 
    margin-block: 1ch;
  }
}

h1 {
  font-size: 1.618em;
  font-weight: unset;
  margin-bottom: 1ch;
}

h2 {
  font-size: 1.382em;
}

cite {
  font-style: unset;
  font-weight: bold;
}