/* James Croll Society. One stylesheet for every page: black, red, the browser's own serif. */

:root {
  color-scheme: dark;
  --red: #ff0000;
  --line: #5a0000;
  --bg: #000;
}

html { background: var(--bg); }

body {
  margin: 0 auto;
  padding: 0 16px 96px;
  max-width: 38em;
  background: var(--bg);
  color: var(--red);
  font-family: serif;
  font-size: 20px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

a, a:visited, a:active { color: var(--red); }

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

/* where you are on the site: home / section / page, small and centered at the top of every page */
.crumbs { display: block; text-align: center; line-height: 1.4; padding-top: 12px; margin: 0 0 1em; }
.crumbs, .crumbs font { font-size: 15px; }
.crumbs a { padding: 12px 4px; margin: 0 -4px; } /* bigger tap area, same look */

h1 { font-size: 32px; text-align: center; margin: 0.67em 0 0.4em; line-height: 1.2; }
h2 { font-size: 1.3em; text-align: center; margin: 2.4em 0 0.8em; line-height: 1.3; }
h3 { font-size: 1em; margin: 1.8em 0 0.4em; }
h4 { font-size: 1em; font-weight: normal; font-style: italic; margin: 1.2em 0 0.3em; }

.subtitle { text-align: center; margin: 0 0 2.5em; }

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
li { margin: 0.2em 0; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }
sub, sup { line-height: 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }

/* table of contents */
.toc { margin: 0 0 2.5em; }
.toc ol { padding-left: 1.6em; }

/* asides: notes, warnings */
.note, .warn {
  margin: 1em 0 1.2em;
  padding-left: 1em;
  border-left: 1px solid var(--red);
}

/* formulas, code */
code, kbd, pre, .formula, .mono { font-family: monospace; font-size: 0.85em; }
pre, .formula {
  margin: 1em 0 1.2em;
  padding-left: 1em;
  border-left: 1px solid var(--line);
  white-space: pre-wrap;
  overflow-x: auto;
  line-height: 1.7;
}

/* tables: horizontal hairlines only */
.table-wrap { width: 100%; overflow-x: auto; margin: 1em 0 1.6em; }
table { border-collapse: collapse; font-size: 0.8em; width: 100%; }
th, td { padding: 0.35em 0.6em 0.35em 0; text-align: left; vertical-align: top; }
th { font-weight: bold; border-bottom: 1px solid var(--red); }
td { border-bottom: 1px solid var(--line); }
td:last-child, th:last-child { padding-right: 0; }

.small { font-size: 0.85em; }

footer, .footer { margin-top: 4em; padding-top: 1em; border-top: 1px solid var(--line); font-size: 0.85em; text-align: center; }

/* controls for the tool pages */
button, input, select, textarea { font: inherit; color: var(--red); }
button {
  background: var(--bg);
  border: 1px solid var(--red);
  border-radius: 0;
  padding: 0.15em 0.7em;
  cursor: pointer;
}
button:hover, button:focus-visible { background: var(--red); color: var(--bg); outline: none; }
input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: var(--red); }
:focus-visible { outline: 1px solid var(--red); outline-offset: 2px; }

/* list pages (generated by _build/build.py): same markup and look as the homepage */
.list-page { line-height: normal; }
.list-page h1 { margin: 0.67em 0; }
.list a { line-height: 1.15; }
.note-line { margin-top: 2em; }
.note-line font { font-size: 15px; }

/* blog: table of topic cards, 3 per row, every cell the same size (_build/build.py fills each to fit) */
.wide { max-width: 960px; }
.cards { table-layout: fixed; width: 100%; max-width: 900px; margin: 1em auto 2em; font-size: 20px; line-height: 30px; border: 0; }
.cards td {
  width: 33.333%;
  height: 300px;
  padding: 12px 12px;
  border: 1px solid var(--red);
  text-align: center;
  vertical-align: top;
}
.cards td:last-child { padding-right: 12px; }
.cards td.card-empty { border: 0; }
.cards br { display: none; }
.cards a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cards a.card-title { margin-bottom: 30px; }
.cards a.card-title font { font-size: 23px; line-height: 30px; }
.cards a.card-more { margin-top: 30px; font-style: italic; }

/* tablets: two cards per row; phones: one, only as tall as its content */
@media (max-width: 860px) {
  .cards { display: block; max-width: 640px; }
  .cards tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards tr { display: contents; }
  .cards td { display: block; width: auto; margin: 0 -1px -1px 0; }
  .cards td.card-empty { display: none; }
}
@media (max-width: 600px) {
  .cards tbody { grid-template-columns: minmax(0, 1fr); }
  .cards td { height: auto; }
  .cards a { white-space: normal; }
}

@media (max-width: 600px) {
  body { font-size: 18px; }
  table { font-size: 0.75em; }
  .list br { display: none; }
  .list a { display: block; margin-bottom: 0.5em; }
}