/* Dark, quiet, text-first. No frameworks, no JavaScript, no web fonts.
   Fonts come from whatever device you are reading on, which means the page
   loads instantly and works offline. Everything is sized in rem so it
   respects the reader's own font-size setting. */

:root {
  --bg: #14161a;          /* near-black, slightly warm - easier than pure #000 */
  --fg: #d8d6d1;          /* off-white; pure white on black causes glare */
  --dim: #8b8a86;         /* dates, captions, small print */
  --line: #2a2d33;        /* hairline borders */
  --link: #9dc4ff;        /* the only colour on the page */
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;   /* ~17px, comfortably above the 16px minimum */
  line-height: 1.65;
  margin: 0 auto;
  max-width: 38rem;       /* ~70 characters per line: the readable range */
  padding: 3rem 1.25rem 5rem;
  text-wrap: pretty;
}

h1, h2, h3 { line-height: 1.25; font-weight: 600; }
h1 { font-size: 1.6rem; margin: 0 0 .4rem; letter-spacing: -0.01em; }
h2 { font-size: 1.2rem; margin: 2.5rem 0 .5rem; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

p { margin: 0 0 1.1rem; }

.tagline { color: var(--fg); margin-bottom: .8rem; }
.meta, .disclosure { color: var(--dim); font-size: .875rem; }
.disclosure { border-left: 2px solid var(--line); padding-left: .8rem; }

/* Scoreboard: six small tiles. Three columns on anything wider than a phone,
   two on a phone. Six divides evenly by both, so no tile is ever left
   stranded on a half-empty last row. Three columns also leaves each tile wide
   enough for the longest label ("predictions correct") to sit on one line. */
.scoreboard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  margin: 2rem 0 .5rem;
}
@media (min-width: 34rem) {
  .scoreboard { grid-template-columns: repeat(3, 1fr); }
}
.tile {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .7rem .6rem;
  text-align: center;
}
.tile .num { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.tile .label { display: block; color: var(--dim); font-size: .75rem; }
.score-note { margin-bottom: 2.5rem; }

/* Post list on the front page. */
.posts { list-style: none; margin: 0; padding: 0; }
.posts li { border-top: 1px solid var(--line); padding: 1.4rem 0; }
.post-title { font-size: 1.15rem; font-weight: 600; display: inline-block; }
.posts .meta { margin: .2rem 0 .4rem; }
.summary { color: var(--fg); margin: 0; }

/* Inside a single post. */
blockquote {
  border-left: 2px solid var(--line);
  color: var(--dim);
  margin: 1.2rem 0;
  padding: .2rem 0 .2rem 1rem;
}
code, pre {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .9em;
}
pre {
  background: #0f1114;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow-x: auto;       /* long lines scroll instead of breaking the page */
  padding: .9rem;
}
code { background: #0f1114; border-radius: 3px; padding: .1em .3em; }
pre code { background: none; padding: 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
img { max-width: 100%; height: auto; }

footer {
  border-top: 1px solid var(--line);
  margin-top: 3.5rem;
  padding-top: 1.2rem;
}