body { 
  margin: 0 auto;
  max-width: 1400px;
  line-height: 1.5;
  font-family: sans-serif;
  display: grid;
  grid-template-columns: [full-start left] 1fr [main] minmax(auto, 1000px) [right] 1fr [full-end];
  column-gap: 1em;
  padding: 0 1em;
}

main {
  grid-column: full;
  display: grid;
  grid-template-columns: subgrid;
  /* gap: 1em; */
}

main > * {
  grid-column: main;
}

main > h1 {
  margin-top: -1em;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code {
  font-size: 1.15em;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  text-align: left;
}

tbody tr:nth-of-type(odd) {
  background-color: #f4f4f4;
}

/* experimental: use grid to line up different tables */

article {
  display: grid;
  grid-template-columns: [full-start] auto 1fr repeat(12, auto) [full-end];
  gap: 1em 0;
}

article > * {
  grid-column: full;
  margin: 0; /* for p, h1, etc, since margin collapsing doesn't occur in grid containers */
}

table, thead, tbody, tr {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: full;
}

th + th, td + td {
  padding-inline-start: 1ch;
}

th, td {
  max-width: 40ch; /* prevent any column from growing too wide, crunching other columns */
}

/* end experiment */

header, footer {
  padding: 1em 0;
}

footer {
  grid-column: main;
}

:not(a)[title] {
  text-decoration: underline dotted gray;
}

.logo {
  color: black;
  font-weight: bold;
}

nav.toc {
  position: sticky;
  top: 2em;
  height: 0;

  grid-column: left;
  font-size: small;
  line-height: 1.4;
}

nav.toc ul {
  padding-left: 1em;
}

nav.toc > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}


nav.toc .visible {
  font-weight: bold;
}