:root { --fg: #1a1a1a; --muted: #6b6b6b; --rule: #ddd; --bg: #fdfdfb; --hl: #fff6d6; }
@media (prefers-color-scheme: dark) { :root { --fg: #e6e6e3; --muted: #9a9a96; --rule: #333; --bg: #151514; --hl: #2b2714; } }

body { max-width: 640px; margin: 0 auto; padding: 48px 16px 80px; font: 18px/1.6 Charter, "Bitstream Charter", "Iowan Old Style", Georgia, serif; color: var(--fg); background: var(--bg); }
h1 { font-size: 2em; margin: 0 0 .4em; }
h2 { font-size: 1.35em; margin: 2.2em 0 .4em; }
h3 { font-size: 1.05em; margin: 1.6em 0 .3em; }
a { color: inherit; text-decoration-color: var(--muted); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--fg); }
ul, ol { padding-left: 1.2em; margin: .2em 0; }
li { margin: .45em 0; }

nav { font-size: .9em; color: var(--muted); margin-bottom: 2.4em; }
nav a { text-decoration: none; }
nav a:first-child { color: var(--fg); font-weight: bold; }
nav a:hover { text-decoration: underline; }
footer { margin-top: 4em; color: var(--muted); font-size: .85em; }

.new { background: var(--hl); padding: .5em .75em; }
.toc { padding: 0; list-style: none; }
.toc li { display: inline-block; margin: 0 1em .2em 0; white-space: nowrap; }
.meta { color: var(--muted); font-size: .85em; }
.blurb { color: var(--muted); font-size: .9em; line-height: 1.45; margin-top: .1em; }
.more { margin-top: .6em; font-size: .95em; }

/* Episode numbers and dates sit in a fixed-width column so titles line up. */
.episodes, .dated { list-style: none; padding-left: 0; --col: 4.2em; }
.episodes li, .dated li { padding-left: var(--col); text-indent: calc(-1 * var(--col)); }
.episodes .blurb, .dated .blurb { text-indent: 0; }
.ep, .date { display: inline-block; width: calc(var(--col) / .85); text-indent: 0; color: var(--muted); font-size: .85em; font-variant-numeric: tabular-nums; }

/* Key plan elements on the Choices for All page. */
.elements { font-size: .92em; }
.elements li { margin: .25em 0; }

/* Phones: slightly smaller type, less top space, a narrower number column. */
@media (max-width: 480px) {
  body { font-size: 17px; padding-top: 28px; }
  h1 { font-size: 1.75em; }
  h2 { margin-top: 1.8em; }
  .episodes, .dated { --col: 3.4em; }
}
