/* Laid out like man(1): 80 columns, a heading gutter, an indented body. */
:root {
  --bg: #fdfdfc;
  --fg: #1d1d1b;
  --dim: #6b6b66;
  --rule: #e2e2dd;
  --link: #1f4fbf;
  --visited: #6a3fb0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1c1a;
    --fg: #dcdcd6;
    --dim: #93938c;
    --rule: #34342f;
    --link: #8fb0ff;
    --visited: #c3a6f2;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 15px/1.6 "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.page { max-width: 80ch; margin: 0 auto; padding: 2rem 1rem 3rem; }

/* Running header and footer, like the first and last line of a man page */
.runhead {
  display: flex; justify-content: space-between; gap: 1rem;
  color: var(--dim);
}
.runhead .mid { text-align: center; }
header.runhead { margin-bottom: 2.5rem; }
footer.runhead { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule); }

section { margin-bottom: 1.6rem; }
h2 { font-size: 1em; font-weight: 600; margin: 0 0 .25rem; letter-spacing: 0; }
.body { padding-left: 7ch; }

p { margin: 0 0 .8rem; }
b { font-weight: 600; }
.meta { color: var(--dim); }

a { color: var(--link); text-underline-offset: 2px; }
a:visited { color: var(--visited); }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

kbd { font: inherit; border: 1px solid var(--rule); border-radius: 3px; padding: 0 .3ch; }

dl { margin: 0; }
dt { margin: 0; }
dd { margin: 0 0 1.2rem 7ch; }

table { border-collapse: collapse; }
th { text-align: left; font-weight: 400; color: var(--dim); padding: 0 3ch .2rem 0; vertical-align: top; white-space: nowrap; }
td { padding: 0 0 .2rem; }

::selection { background: var(--fg); color: var(--bg); }

@media (max-width: 600px) {
  body { font-size: 14px; }
  .body { padding-left: 3ch; }
  dd { margin-left: 3ch; }
  .runhead .mid { display: none; }
  table, tbody, tr, th, td { display: block; }
  th { padding: 0; }
  td { padding: 0 0 .5rem 3ch; }
}

@media print {
  body { background: #fff; color: #000; }
  a { color: #000; }
}
.body a[href^="#"] { white-space: nowrap; }