/* forkmeharder — fork around and find out
 *
 * A static timeline. No build framework, no wasm, no fonts fetched from
 * anywhere: the whole point of the rebuild is that this page is a document,
 * and a document should cost one request and render before you finish reading
 * the title. The palette is carried over from the live dashboard this replaced.
 */
:root {
  --bg: #0a0a0b;
  --bg2: #101012;
  --panel: #141416;
  --line: #26262b;
  --line2: #333339;
  --fg: #f2ede7;
  --muted: #8b8b95;
  --dim: #5f5f68;
  --accent: #ff8c1a;
  --ok: #2ec4a6;
  --warn: #e8b93a;
  --bad: #ff4d3d;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 var(--sans);
  -webkit-text-size-adjust: 100%;
}
a { color: var(--accent); }
a:hover { color: var(--fg); }

.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.25rem; }

/* ---- masthead ---------------------------------------------------------- */
header.top {
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(60rem 20rem at 15% -8rem, rgba(255,140,26,0.16), transparent 70%),
    var(--bg);
  padding: 3.5rem 0 2.25rem;
}
h1 {
  font: 700 clamp(2.2rem, 8vw, 4.5rem)/0.95 var(--mono);
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--accent);
  text-shadow: 0 0 2.5rem rgba(255,140,26,0.35);
}
.tagline {
  font: 500 clamp(1rem, 2.5vw, 1.35rem)/1.4 var(--mono);
  color: var(--fg);
  margin: 0.9rem 0 0;
}
.tagline::before { content: "> "; color: var(--accent); }
.standfirst {
  color: var(--muted);
  max-width: 46rem;
  margin: 1.1rem 0 0;
}
.standfirst strong { color: var(--fg); font-weight: 600; }

/* ---- section furniture ------------------------------------------------- */
section { padding: 2.75rem 0; }
h2 {
  font: 600 0.78rem/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.4rem;
}
h2::before { content: "// "; color: var(--dim); }

/* ---- the spine --------------------------------------------------------- */
.timeline { position: relative; padding-left: 1.75rem; }
.timeline::before {
  content: "";
  position: absolute;
  left: 0.42rem; top: 0.4rem; bottom: 0.4rem;
  width: 1px;
  background: linear-gradient(var(--line2), var(--line), var(--line2));
}
.entry { position: relative; padding: 0 0 2.4rem; }
.entry::before {
  content: "";
  position: absolute;
  left: -1.53rem; top: 0.55rem;
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: var(--dim);
  box-shadow: 0 0 0 3px var(--bg);
}
.entry.is-split::before { background: var(--bad); }
.entry.is-soft::before  { background: var(--ok); }
.entry.is-hard::before  { background: var(--accent); }

.entry h3 {
  font: 600 1.15rem/1.3 var(--sans);
  margin: 0;
}
.meta {
  font: 0.74rem/1.5 var(--mono);
  color: var(--muted);
  margin: 0.3rem 0 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
  align-items: baseline;
}
.height { color: var(--fg); }
.tag {
  font: 0.64rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--line2);
  color: var(--muted);
  padding: 0.24rem 0.45rem;
  white-space: nowrap;
}
.tag.soft { border-color: var(--ok); color: var(--ok); }
.tag.hard { border-color: var(--accent); color: var(--accent); }
.tag.accident { border-color: var(--bad); color: var(--bad); }
.tag.contentious { border-color: var(--warn); color: var(--warn); }
/* Provenance, carried over from the dashboard: a date nobody checked should
   not look like one that was. */
.tag.reported, .tag.uncertain { border-style: dashed; }

.entry p { margin: 0.55rem 0; }
.what { color: var(--fg); }
.why { color: var(--muted); }
.outcome {
  color: var(--muted);
  border-left: 2px solid var(--line2);
  padding: 0.15rem 0 0.15rem 0.7rem;
  margin-top: 0.7rem;
}
.outcome b { color: var(--fg); font-weight: 600; }

/* ---- notes and caveats ------------------------------------------------- */
.note {
  border-left: 2px solid var(--dim);
  background: var(--bg2);
  color: var(--muted);
  font-size: 0.86rem;
  padding: 0.75rem 0.9rem;
  margin: 1rem 0;
}
.sources { font-size: 0.78rem; color: var(--dim); margin-top: 0.5rem; }
.sources a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line2); }
.sources a:hover { color: var(--accent); }

footer {
  border-top: 1px solid var(--line);
  padding: 2rem 0 3rem;
  color: var(--dim);
  font-size: 0.82rem;
}
footer code { color: var(--muted); font-family: var(--mono); }

@media (max-width: 640px) {
  section { padding: 2rem 0; }
  .timeline { padding-left: 1.4rem; }
  .entry::before { left: -1.2rem; }
}

/* ---- explainers --------------------------------------------------------- */
/* The teaching half of the page. Wider measure than the timeline entries
   because these are read as prose rather than scanned as records. */
.toc {
  position: sticky; top: 0; z-index: 10;
  background: rgba(10,10,11,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  font: 0.72rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.toc .wrap { display: flex; gap: 1.2rem; overflow-x: auto; padding-top: 0.8rem; padding-bottom: 0.8rem; }
.toc a { color: var(--muted); text-decoration: none; white-space: nowrap; }
.toc a:hover { color: var(--accent); }

section p { max-width: 46rem; }
.lead {
  font-size: 1.08rem;
  color: var(--fg);
  border-left: 2px solid var(--accent);
  padding-left: 0.9rem;
}
.deflist { max-width: 46rem; padding-left: 1.1rem; margin: 1rem 0; }
.deflist li { margin: 0.75rem 0; color: var(--muted); }
.deflist li b { color: var(--fg); }
.callout {
  max-width: 46rem;
  border: 1px solid var(--line2);
  border-left: 2px solid var(--warn);
  background: var(--bg2);
  padding: 0.85rem 1rem;
  margin: 1.25rem 0;
  color: var(--muted);
}
.callout b { color: var(--warn); }

/* Two rule-change shapes, side by side, because the whole point is that they
   are opposites — reading them in sequence loses the comparison. */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 1.25rem 0; }
.compare .col { border: 1px solid var(--line); background: var(--panel); padding: 1rem 1.1rem; }
.compare h4 {
  font: 600 0.75rem/1 var(--mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin: 0 0 0.7rem; color: var(--accent);
}
.compare p { color: var(--muted); font-size: 0.94rem; margin: 0.6rem 0; max-width: none; }
.compare p b { color: var(--fg); }

.diagram { margin: 1.5rem 0; padding: 0; }
.diagram svg { width: 100%; height: auto; max-width: 42rem; display: block; }
.diagram figcaption { color: var(--dim); font-size: 0.78rem; margin-top: 0.5rem; max-width: 42rem; }

@media (max-width: 720px) {
  .compare { grid-template-columns: 1fr; }
}
.entry.is-software::before { background: var(--muted); }
.tag.software { border-color: var(--muted); color: var(--muted); }

/* The address. Deliberately the quietest thing on the page: dim, monospaced,
   no button, no QR, no ask. Someone looking for it will find it; nobody else
   has to read a pitch. `select-all` means one tap takes the whole string,
   which is the only affordance available without JavaScript — and the CSP
   forbids JavaScript outright. */
.tip { color: var(--dim); font-size: 0.76rem; margin-top: 0.6rem; }
.tip a {
  font-family: var(--mono);
  color: var(--dim);
  text-decoration: none;
  border-bottom: 1px dotted var(--line2);
  -webkit-user-select: all;
  user-select: all;
  word-break: break-all;
}
.tip a:hover { color: var(--accent); border-bottom-color: var(--accent); }