/*
 * Journal theme.
 *
 * The brief was "funky", and the constraint is that a machine writes most of the
 * words. So: a log file that got ideas. Oversized grotesk headlines, monospace
 * for every machine-emitted thing (timestamps, tickers, labels, numbers), a loud
 * accent used structurally rather than decoratively, and hard offset shadows
 * instead of soft ones — nothing here pretends to be a physical object.
 *
 * Two rules it does not break:
 *   1. The body is still readable at length. Most pages are 800+ words of
 *      argument, and a theme that fights that is a bad theme however fun it is.
 *   2. No webfonts. The colophon promises nothing phones home, so the character
 *      has to come from scale, colour and layout. System stacks only.
 *
 * Colour is tokenised on bare :root, redefined under prefers-color-scheme and
 * again under [data-theme] so an explicit toggle wins in both directions. No
 * colour is ever defined only inside a media query.
 */

:root {
  --bg: #fdfbf4;
  --bg-raised: #ffffff;
  --bg-sunken: #f0ece0;
  --ink: #12110f;
  --ink-soft: #4a463d;
  --ink-faint: #85806f;
  --rule: #ded8c8;
  --rule-strong: #12110f;

  --accent: #e03616;        /* vermilion — structure, links, live things */
  --accent-ink: #ffffff;
  --accent-soft: #ffe9e3;
  --volt: #1f6f3f;          /* second voice — data, positive, "it worked" */
  --volt-soft: #dff5e6;

  --up: #1f6f3f;
  --down: #c22412;

  --measure: 35rem;
  --wide: 56rem;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --shadow: 4px 4px 0 var(--rule-strong);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0c0b;
    --bg-raised: #161614;
    --bg-sunken: #060605;
    --ink: #f2ede0;
    --ink-soft: #a8a294;
    --ink-faint: #6e6a5f;
    --rule: #2b2a26;
    --rule-strong: #f2ede0;

    --accent: #ff6b3d;
    --accent-ink: #0c0c0b;
    --accent-soft: #2e1710;
    --volt: #b8f03c;
    --volt-soft: #1f2a0c;

    --up: #7bd93f;
    --down: #ff6b5e;
    --shadow: 4px 4px 0 var(--rule-strong);
  }
}

:root[data-theme="dark"] {
  --bg: #0c0c0b;
  --bg-raised: #161614;
  --bg-sunken: #060605;
  --ink: #f2ede0;
  --ink-soft: #a8a294;
  --ink-faint: #6e6a5f;
  --rule: #2b2a26;
  --rule-strong: #f2ede0;

  --accent: #ff6b3d;
  --accent-ink: #0c0c0b;
  --accent-soft: #2e1710;
  --volt: #b8f03c;
  --volt-soft: #1f2a0c;

  --up: #7bd93f;
  --down: #ff6b5e;
  --shadow: 4px 4px 0 var(--rule-strong);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.68 var(--sans);
  text-rendering: optimizeLegibility;
}

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 1.5rem; }

/* ---------- masthead: loud, machine-ish, unmistakable ---------- */

.masthead {
  background: var(--ink);
  color: var(--bg);
  border-bottom: 3px solid var(--accent);
}

.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  /* Row gap clears the blinking cursor on the wordmark, which overflows its own
     line box at this line-height and would otherwise sit on a wrapped nav. */
  gap: 1rem 2rem;
  padding-top: 2.1rem;
  padding-bottom: 1.1rem;
}

.masthead h1 {
  font: 800 clamp(2rem, 7vw, 3.4rem)/0.86 var(--sans);
  letter-spacing: -0.055em;
  margin: 0;
  text-transform: lowercase;
}

.masthead h1 a { color: inherit; text-decoration: none; }
.masthead h1 a:hover { color: var(--accent); }

/* A cursor, because a machine is typing. */
.masthead h1 a::after {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.78em;
  margin-left: 0.12em;
  background: var(--accent);
  vertical-align: baseline;
  animation: blink 1.25s steps(1) infinite;
}

@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

.masthead .tagline {
  font: 500 0.78rem/1.45 var(--mono);
  color: var(--ink-faint);
  margin: 0 0 0.4rem;
  flex: 1 1 14rem;
  letter-spacing: -0.01em;
}

.masthead nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.15rem;
  font: 600 0.72rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  padding-bottom: 0.55rem;
}

.masthead nav a {
  color: var(--bg);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}

.masthead nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- prose ---------- */

main { padding-top: 4.5rem; padding-bottom: 5rem; }
.prose { max-width: var(--measure); }
.prose > :first-child { margin-top: 0; }

.prose h1 {
  font: 800 clamp(1.9rem, 5.2vw, 2.9rem)/1.02 var(--sans);
  letter-spacing: -0.042em;
  margin: 0 0 0.5rem;
  max-width: 15ch;
}

.prose h2 {
  font: 750 1.35rem/1.2 var(--sans);
  letter-spacing: -0.028em;
  margin: 2.8rem 0 0.7rem;
}

/* A structural tick, not decoration — it marks where an argument turns. */
.prose h2::before {
  content: "";
  display: block;
  width: 2.2rem;
  height: 4px;
  background: var(--accent);
  margin-bottom: 0.75rem;
}

.prose h3 {
  font: 700 1.02rem/1.3 var(--sans);
  letter-spacing: -0.015em;
  margin: 2.1rem 0 0.5rem;
}

.prose h4 {
  font: 700 0.72rem/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--accent);
  margin: 2rem 0 0.5rem;
}

.prose p { margin: 0 0 1.2em; }

.prose a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition: background-size 0.15s ease;
}

.prose a:hover { background-size: 100% 100%; color: var(--accent-ink); }

.prose strong { font-weight: 700; }

.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.25em; }
.prose li { margin-bottom: 0.42em; }
.prose li::marker { color: var(--accent); font-weight: 700; }

.prose blockquote {
  margin: 1.8em 0;
  padding: 1rem 1.2rem;
  background: var(--bg-sunken);
  border-left: 4px solid var(--accent);
  color: var(--ink-soft);
  font: 400 0.95rem/1.6 var(--mono);
}

.prose blockquote p:last-child { margin-bottom: 0; }

.prose hr {
  border: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 18px);
  margin: 3rem 0;
  opacity: 0.35;
}

.prose code {
  font: 0.85em/1.4 var(--mono);
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 2px;
  padding: 0.1em 0.34em;
  font-weight: 600;
}

.prose pre {
  background: var(--ink);
  color: var(--bg);
  border-radius: 0;
  box-shadow: var(--shadow);
  padding: 1rem 1.1rem;
  overflow-x: auto;
  font: 0.82rem/1.6 var(--mono);
  max-width: var(--wide);
  margin: 1.8em 0;
}

.prose pre code { background: none; color: inherit; padding: 0; font-weight: 400; }

/* ---------- tables: machine output, so mono and tabular ---------- */

.scroll-x { overflow-x: auto; margin: 1.8em 0; max-width: var(--wide); }

table {
  border-collapse: collapse;
  width: 100%;
  font: 500 0.85rem/1.45 var(--mono);
  font-variant-numeric: tabular-nums;
}

th, td { padding: 0.55em 0.85em; text-align: left; white-space: nowrap; }

th {
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-ink);
  background: var(--accent);
}

tbody tr { border-bottom: 1px solid var(--rule); }
tbody tr:nth-child(odd) { background: var(--bg-sunken); }
tbody tr:last-child { border-bottom: 0; }

.num { font-variant-numeric: tabular-nums; }
.up { color: var(--up); font-weight: 700; }
.down { color: var(--down); font-weight: 700; }

/* ---------- home ---------- */

.lede {
  max-width: 30ch;
  font: 600 clamp(1.35rem, 3.6vw, 1.9rem)/1.28 var(--sans);
  letter-spacing: -0.032em;
  color: var(--ink);
  margin: 0 0 3.5rem;
}

.lede em { font-style: normal; color: var(--accent); }

.entry-list { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }

.entry {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.3rem 2rem;
  align-items: baseline;
}

.entry:hover { background: var(--bg-sunken); }

.entry time {
  font: 700 0.72rem/1.8 var(--mono);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.entry h2 { font: 700 1.15rem/1.28 var(--sans); margin: 0; letter-spacing: -0.028em; }
.entry h2 a { color: inherit; text-decoration: none; }
.entry:hover h2 a { color: var(--accent); }
.entry p { margin: 0.35rem 0 0; font-size: 0.94rem; color: var(--ink-soft); grid-column: 2; max-width: 52ch; }
.entry p.tags { margin-top: 0.7rem; }

@media (max-width: 36rem) {
  .entry { grid-template-columns: 1fr; }
  .entry p { grid-column: 1; }
}

/* ---------- dispatches: log entries that got ideas ---------- */

.dispatch {
  border-left: 3px solid var(--rule);
  padding: 0 0 0 1.4rem;
  margin: 0 0 3rem;
  position: relative;
}

.dispatch::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 0.3rem;
  width: 13px;
  height: 13px;
  background: var(--accent);
  border: 3px solid var(--bg);
}

.dispatch > time {
  display: inline-block;
  font: 700 0.68rem/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 0.35em 0.55em;
  margin-bottom: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.dispatch h3 { margin-top: 0; font-size: 1.22rem; letter-spacing: -0.028em; }

/* ---------- meta / tags ---------- */

.post-meta {
  font: 600 0.7rem/1.8 var(--mono);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  margin: 0 0 2.5rem;
  padding-bottom: 1.2rem;
  border-bottom: 3px solid var(--ink);
  max-width: var(--measure);
}

.tag {
  display: inline-block;
  font: 700 0.62rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--volt-soft);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  padding: 0.32em 0.5em;
  margin: 0 0.5rem 0.3rem 0;
}

/* ---------- footer ---------- */

.foot {
  border-top: 3px solid var(--ink);
  margin-top: 5rem;
  padding: 1.6rem 0 4rem;
  font: 500 0.78rem/1.65 var(--mono);
  color: var(--ink-faint);
}

.foot p { max-width: 58ch; margin: 0; }
.foot a { color: var(--accent); }

/* ---------- charts ---------- */

figure {
  margin: 2.5rem 0;
  max-width: var(--wide);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
  background: var(--bg-raised);
  padding: 1.2rem;
}

figure svg { display: block; width: 100%; height: auto; }

figcaption {
  font: 500 0.74rem/1.55 var(--mono);
  color: var(--ink-faint);
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
}

/* ---------- chart internals ----------
 * Series colours are tokens, so dark mode gets its own separately-validated
 * steps rather than an automatic flip. Both pairs were checked with the
 * dataviz validator; provenance is recorded in charts.ts.
 * Deliberately NOT the theme's red and green: red/green is the canonical
 * colourblind failure, and on a trading site they are the first two colours
 * anyone reaches for.
 */

:root {
  --c1: #e03616;   /* the desk */
  --c2: #1266a8;   /* the benchmark */
  --chart-grid: #e6e1d4;
  --chart-ax: #85806f;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --c1: #ea5c2b; --c2: #4a90d9; --chart-grid: #26251f; --chart-ax: #85806f; }
}

:root[data-theme="dark"] { --c1: #ea5c2b; --c2: #4a90d9; --chart-grid: #26251f; --chart-ax: #85806f; }

svg .grid { stroke: var(--chart-grid); stroke-width: 1; }
svg .baseline { stroke: var(--chart-ax); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.7; }
svg .budget { stroke: var(--c2); stroke-width: 2; stroke-dasharray: 5 4; }

svg .ax { fill: var(--chart-ax); font: 500 11px var(--mono); }
svg .val { fill: var(--ink-soft); font: 600 11px var(--mono); dominant-baseline: middle; }
svg .mono { font-family: var(--mono); }

svg .s1 { stroke: var(--c1); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
svg .s2 { stroke: var(--c2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg .d1 { fill: var(--c1); stroke: var(--bg-raised); stroke-width: 2; }
svg .d2 { fill: var(--c2); stroke: var(--bg-raised); stroke-width: 2; }
svg .lbl1 { fill: var(--c1); font: 700 11px var(--mono); }
svg .lbl2 { fill: var(--c2); font: 700 11px var(--mono); }
svg .bar { fill: var(--c1); }

.chart-table { margin-top: 0.9rem; }
.chart-table summary {
  cursor: pointer;
  font: 700 0.68rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.chart-table[open] summary { margin-bottom: 0.6rem; }
.chart-table table { font-size: 0.78rem; }

/* ---------- stat tiles ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 3px;
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
  margin: 2.5rem 0;
  max-width: var(--wide);
  /* The container shows through the gaps AND through any empty cell left by an
   * odd tile count, so it must be the surface colour, not the rule colour. The
   * separators come from each tile's own ring instead. */
  background: var(--bg-raised);
}

.stat {
  background: var(--bg-raised);
  box-shadow: 0 0 0 1.5px var(--ink);
  padding: 1.1rem 1.1rem 1.2rem;
}

.stat-v {
  font: 800 clamp(1.5rem, 4vw, 2.1rem)/1 var(--sans);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.stat-l {
  font: 700 0.66rem/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ink-soft);
  margin-top: 0.5rem;
}

.stat-n { font: 500 0.72rem/1.4 var(--mono); color: var(--ink-faint); margin-top: 0.3rem; }

/* A caveat the reader needs before they read the chart under it. Quieter than
   .stale — that one says the page is broken; this one says the page is honest. */
.prose-note {
  border-left: 4px solid var(--rule);
  padding: 0.1rem 0 0.1rem 1.1rem;
  font: 400 0.86rem/1.65 var(--sans);
  color: var(--ink-soft);
  margin: 0 0 2.6rem;
  max-width: var(--measure);
}

.stale {
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  padding: 0.9rem 1.1rem;
  font: 500 0.82rem/1.55 var(--mono);
  color: var(--ink-soft);
  margin: 0 0 2.5rem;
  max-width: var(--wide);
}

/* ---------------------------------------------------------------------------
   The pipeline diagram (site/lib/diagram.ts).

   Same slab-and-rule vocabulary as the charts, so the picture reads as part of
   the site rather than an illustration dropped into it. Every colour is a token,
   so the diagram follows the reader's theme like everything else.
--------------------------------------------------------------------------- */

/* The diagram breaks out of the reading measure: it is a picture, not a
   paragraph, and at 35rem the labels stop being readable. */
.diagram {
  margin: 2.6rem 0;
  width: 100%;
  max-width: var(--wide);
}
.diagram svg { display: block; width: 100%; height: auto; }
.diagram figcaption {
  font: 500 0.74rem/1.55 var(--mono);
  color: var(--ink-faint);
  max-width: var(--measure);
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
}

.dg-slab { fill: var(--accent); opacity: 0.9; }
.dg-box { fill: var(--bg-raised); stroke: var(--ink); stroke-width: 2; }
.dg-fenced { stroke-dasharray: 6 4; stroke: var(--chart-ax); }
.dg-group { fill: none; stroke: var(--rule); stroke-width: 2; stroke-dasharray: 2 5; }

.dg-name { fill: var(--ink); font: 800 12.5px var(--mono); letter-spacing: 0.06em; }
.dg-sub { fill: var(--ink-soft); font: 400 10.5px/1.4 var(--mono); }
.dg-tag {
  fill: var(--ink-faint);
  font: 700 9.5px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.dg-line { stroke: var(--ink); stroke-width: 2; }
.dg-soft { stroke: var(--chart-ax); stroke-width: 1.5; stroke-dasharray: 4 4; }
.dg-blocked { stroke: var(--chart-ax); stroke-width: 1.5; stroke-dasharray: 3 4; }
.dg-headfill { fill: var(--ink); }

.dg-stop circle { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }
.dg-stop path { stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; }

/* A page carrying something the measure would crop (a diagram, a wide table)
   widens its container and keeps the text narrow, rather than the other way
   round. Tables are the exception to the exception: they are the reason. */
.prose.wide { max-width: var(--wide); }
.prose.wide > p,
.prose.wide > ul,
.prose.wide > ol,
.prose.wide > blockquote { max-width: var(--measure); }

/* Cells default to nowrap because most tables here are numbers, and a wrapped
   number column is unreadable. A wide page's table is the other kind: sentences,
   which have to wrap or they push the punchline off the right edge. */
.prose.wide table th,
.prose.wide table td { white-space: normal; }
.prose.wide table td:nth-child(2) { white-space: nowrap; }

/* An entry written after the day it describes says so, at the top, before the
   reader has invested anything in believing it was filed live. */
.retro {
  border-left: 4px solid var(--chart-ax);
  padding: 0.1rem 0 0.1rem 1.1rem;
  font: 400 0.83rem/1.6 var(--sans);
  color: var(--ink-soft);
  margin: 0 0 2.2rem;
  max-width: var(--measure);
}

.retro-flag {
  display: block;
  margin-top: 0.35rem;
  font: 700 0.6rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}

/* The benchmark's bar in a grouped chart. Same blue as its line, so the two
   performance charts read as one pair rather than two unrelated pictures. */
svg .bar2 { fill: var(--c2); }

/* ---------------------------------------------------------------------------
   Home page: state of the book, then the current thinking, then the newest
   entry. Ordered so one glance answers "where are we" before any reading.
--------------------------------------------------------------------------- */

.desk-strip {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  align-items: center;
  gap: 0.4rem 0.9rem;
  max-width: var(--wide);
  margin: 0 0 2.4rem;
  padding: 1rem 1.2rem;
  border: 2px solid var(--ink);
  box-shadow: var(--shadow);
  background: var(--bg-raised);
  color: inherit;
  text-decoration: none;
}

.desk-strip:hover { border-color: var(--accent); }

.ds-fig {
  font: 800 1.9rem/1 var(--sans);
  letter-spacing: -0.03em;
  color: var(--accent);
}

.ds-up { color: var(--accent); }
.ds-down { color: var(--ink-soft); }

.ds-lab {
  font: 500 0.68rem/1.35 var(--mono);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.desk-strip .spark { grid-column: 1 / -1; width: 100%; height: auto; margin-top: 0.4rem; }

@media (min-width: 46rem) {
  .desk-strip { grid-template-columns: auto 1fr auto 1fr auto; }
  .desk-strip .spark { grid-column: auto; width: 168px; margin-top: 0; }
}

.now {
  border-left: 4px solid var(--accent);
  padding: 0.2rem 0 0.2rem 1.2rem;
  margin: 0 0 2.6rem;
  max-width: var(--measure);
}

.now-head {
  font: 700 0.66rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin: 0 0 0.8rem;
}

.now p { margin: 0 0 0.9em; }
.now-more { font: 600 0.76rem/1.4 var(--mono); margin: 0; }

.lead-entry {
  border-top: 3px solid var(--ink);
  padding-top: 1.3rem;
  margin: 0 0 2.8rem;
  max-width: var(--measure);
}

.lead-kicker {
  font: 700 0.66rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin: 0 0 0.6rem;
}

.lead-entry h2 { font: 750 1.5rem/1.18 var(--sans); letter-spacing: -0.028em; margin: 0 0 0.5rem; }
.lead-entry h2 a { color: inherit; text-decoration: none; }
.lead-entry h2 a:hover { color: var(--accent); }
.lead-summary { margin: 0 0 0.7rem; }

.list-head {
  font: 700 0.68rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin: 0 0 1rem;
}