/* Palette and type scale lifted from ai.rud.is and rud.is/b (AstroPaper).
   Fonts are the same stacks minus the 650 KB Archivo TTFs: the system sans
   fallback is what those sites use when the webfont fails to load, and this
   page has no business downloading half a megabyte to say one word. */
:root {
  --background: #eceff4;
  --foreground: #1e2430;
  --accent: #5e81ac;
  --muted: #e5e9f0;
  --border: #d8dee9;
  --no: #bf616a;
  --font-sans: ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Syne Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #1c1917;
    --foreground: #f5f5f4;
    --accent: #f97316;
    --muted: #44403c;
    --border: #57534e;
    --no: #e08a80;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1.25rem;
  line-height: 1.6;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}

::selection {
  background: color-mix(in oklab, var(--accent) 75%, transparent);
  color: var(--background);
}

a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { color: var(--accent); }

.bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.brand {
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -.01em;
}

.nav {
  display: flex;
  gap: 1rem;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .8;
}

.page {
  flex: 1;
  width: 100%;
  /* body is a column flex container: without min-width:0 a flex item refuses to
     shrink below its min-content width, and a wide table drags the page wider
     than the phone viewport. */
  min-width: 0;
  max-width: 46rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 2.5rem;
}

.kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  opacity: .65;
}

.answer {
  margin: .25rem 0 .5rem;
  font-size: clamp(4.5rem, 22vw, 11rem);
  line-height: .95;
  letter-spacing: -.03em;
  font-weight: 700;
}

.answer--yes { color: var(--accent); }
.answer--no { color: var(--no); }
.answer--unknown { color: var(--muted); }

.blurb {
  margin: 0 0 2.5rem;
  max-width: 38rem;
}

.facts {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--border);
}

.facts > div {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--border);
}

.facts dt {
  font-family: var(--font-mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .65;
  padding-top: .25rem;
}

.facts dd {
  margin: 0;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.facts dd a { text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; }

.pointer {
  margin: 2rem 0 0;
  font-size: 1rem;
  padding-left: .9rem;
  border-left: 3px solid var(--accent);
}

.foot {
  border-top: 1px solid var(--border);
  padding: 1.25rem 1.5rem;
  font-size: .8125rem;
  opacity: .7;
}

.foot p { margin: 0; max-width: 46rem; margin-inline: auto; }

@media (max-width: 34rem) {
  .facts > div { grid-template-columns: 1fr; gap: .15rem; }
  .page { padding-top: 2.5rem; }
}

/* Long-form pages (about.html) reuse the same shell. */
.prose { width: 100%; min-width: 0; max-width: 40rem; margin: 0 auto; padding: 3rem 1.5rem 2rem; }
.prose h1 { font-size: 2.25rem; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 1.5rem; }
.prose h2 { font-size: 1.25rem; margin: 2.5rem 0 .75rem; letter-spacing: -.01em; }
.prose p, .prose li { margin: 0 0 1.1rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: .6rem; }
.prose time, .prose code { font-family: var(--font-mono); font-size: .875em; }
.prose a { text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; }
.prose blockquote {
  margin: 1.5rem 0;
  padding: .25rem 0 .25rem 1rem;
  border-left: 3px solid var(--accent);
  opacity: .9;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }
.prose .small { font-size: .875rem; opacity: .75; }
/* The timeline is the one element that cannot compress: five-column prose in a
   phone-width column turns into a word per line. Scroll it instead of the page. */
.timeline-wrap { overflow-x: auto; margin: 1.25rem 0 1.75rem; }
table.timeline { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: .9375rem; margin: 0; }
table.timeline th, table.timeline td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
table.timeline th { font-family: var(--font-mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em; opacity: .65; }
table.timeline td:first-child { white-space: nowrap; font-family: var(--font-mono); font-size: .8125rem; }
@media (max-width: 34rem) {
  .timeline-wrap { margin-inline: -1.5rem; padding-inline: 1.5rem; }
}