:root {
  color-scheme: light dark;
  --fg: #111;
  --bg: #fff;
  --dim: #595959;
  --rule: #ccc;
}
/* System preference, only while the reader has not chosen explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --fg: #e6e6e6; --bg: #111; --dim: #9e9e9e; --rule: #444;
  }
}
/* An explicit choice always wins, in both directions. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --fg: #e6e6e6; --bg: #111; --dim: #9e9e9e; --rule: #444;
}
:root[data-theme="light"] {
  color-scheme: light;
  --fg: #111; --bg: #fff; --dim: #595959; --rule: #ccc;
}
* { box-sizing: border-box; }
body {
  max-width: 1500px;
  margin: 2rem auto;
  padding: 0 1rem;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.5;
}
/* Prose stays at a readable measure even when the columns spread wide. */
header, footer { max-width: 62rem; }
header { margin-bottom: 2rem; }
h1 { font-size: 1.4rem; margin: 0 0 0.25rem 0; letter-spacing: 0.08em; }
.sub { color: var(--dim); font-size: 0.85rem; }
nav { margin-top: 0.75rem; font-size: 0.85rem; }
nav a { color: var(--dim); margin-right: 0.75rem; }
section { margin-bottom: 1.75rem; }
h2 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.25rem;
  margin: 0 0 0.5rem 0;
}
ul { list-style: square; margin: 0; padding-left: 1.15rem; }
li { margin: 0.3rem 0; padding-left: 0.15rem; }
li::marker { color: var(--dim); }
a { color: inherit; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.age { color: var(--dim); font-size: 0.8rem; white-space: nowrap; }
.stale { color: var(--dim); font-size: 0.75rem; text-transform: none; letter-spacing: 0; }
footer { margin-top: 2.5rem; padding-top: 0.75rem; border-top: 1px solid var(--rule);
         color: var(--dim); font-size: 0.8rem; }
footer a { text-decoration: underline; }

/* Columns follow the window. A column-width rather than a column-count lets
   the browser decide how many fit, so there is nothing to configure and
   nothing to get wrong: one column on a phone, four on a wide desktop.
   Sections are kept whole rather than split across a column break. */
#feeds {
  columns: 26rem;
  column-gap: 2.5rem;
}
#feeds section { break-inside: avoid; page-break-inside: avoid; }

/* Controls are useless without scripting, so they stay hidden until the
   preferences script has run and proved it can act on them. */
.controls { display: none; }
.js .controls {
  display: flex;
  flex-wrap: wrap;
  /* Generous column gap: the groups have to read as separate menus, not as
     one run-on line where "dark" sits next to "6h". */
  gap: 0.6rem 3rem;
  align-items: center;
  margin-top: 0.9rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 0.8rem;
  color: var(--dim);
}
.ctl { margin: 0; }
/* Inside a group, ordinary word spacing only: the single spaces already in
   the markup. All the separation lives in the gap between groups, so a group
   reads as one menu rather than as loose words. */
.ctl-label { color: var(--dim); }
.sep { color: var(--rule); }
/* Buttons, for the semantics, wearing plain text. */
.controls button {
  font: inherit;
  font-size: 0.8rem;
  color: var(--fg);
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
}
.controls button:hover { text-decoration: underline; }
.controls button[aria-pressed="true"] {
  font-weight: 700;
  text-decoration: underline;
}
.controls button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
#opt-reset { color: var(--dim); }