:root {
  --bg: #16181c;
  --fg: #d8d5cf;
  --muted: #8d897f;
  --rule: #2e3138;
  --panel: #1f2228;
  --underline: #55514a;
  --selection: #34507a;
  --accent: #7cc4a8;
  --orange: #e08a4f;
  --lab: #d9a95b;
  --good: rgba(60, 200, 110, 0.18);
  --bad: rgba(240, 90, 90, 0.17);
  --serif: Charter, "Bitstream Charter", "Charis SIL", "Iowan Old Style", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* The site's look. Colours and font stacks arrive as CSS variables from
   lib/theme.typ (prepended at build time). Dark only.

   Layout: a page with margin notes sets its text column left and the notes
   in a margin column to its right (Tufte); a page without centres its text.
   Wide figures span the full width either way. Below 64rem everything is
   one centred column, notes inline. */

:root {
  color-scheme: dark;
  --text: 42rem;
  --gap: 3rem;
  --margin: 15rem;
  --full: calc(var(--text) + var(--gap) + var(--margin));
}

* { box-sizing: border-box; }
::selection { background: var(--selection); }

html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0 auto;
  max-width: calc(var(--full) + 48px);
  padding: 2.5rem 24px 4rem;
}

/* The text column: centred, or on the left when the page has notes for
   the margin. Wide figures reach across the full width. */
main { max-width: var(--text); margin: 0 auto; }
body:has(.sidenote) main { margin-left: 0; }
.wide, figure.wide, .frame.wide { width: min(var(--full), calc(100vw - 48px)); }
/* A wide figure starts below any note still in the margin. */
.wide, figure.wide, .frame.wide { clear: both; }
body:not(:has(.sidenote)) :is(.wide, figure.wide, .frame.wide) { margin-left: 50%; transform: translateX(-50%); }

/* -- Header, footer -------------------------------------------------------- */

header.site {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  margin-bottom: 4rem;
}
.site-name { font-weight: bold; text-decoration: none; letter-spacing: 0.01em; }
header.site nav { display: flex; flex-wrap: wrap; gap: 0 1.3rem; }
header.site nav a { color: var(--muted); text-decoration: none; }
header.site nav a:hover, header.site nav a.here { color: var(--fg); }

footer.site {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.2rem;
  margin-top: 5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
}
footer.site a { color: var(--muted); }

.private-banner {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--lab);
  border: 1px dashed var(--lab);
  border-radius: 4px;
  padding: 0.3rem 0.7rem;
  margin: -1.5rem 0 2rem;
}

/* -- Text ---------------------------------------------------------------- */

h1, h2, h3 { line-height: 1.25; font-weight: bold; }
h1 { font-size: 1.75rem; margin: 0 0 0.4rem; }
h2 { font-size: 1.2rem; margin: 2.4rem 0 0.6rem; }
h3 { font-size: 1rem; margin: 1.8rem 0 0.4rem; }
p, ul, ol { margin: 0 0 1.1rem; }
li { margin-bottom: 0.3rem; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--underline);
  text-underline-offset: 0.17em;
}
a:hover { text-decoration-color: var(--accent); }

.lede { font-size: 1.12rem; }
.meta, .section-note { color: var(--muted); font-size: 0.88rem; }

code, pre { font-family: var(--mono); font-size: 0.84em; }
:not(pre) > code { background: var(--panel); padding: 0.08em 0.3em; border-radius: 3px; }
pre { background: var(--panel); padding: 0.9rem 1rem; border-radius: 4px; overflow-x: auto; line-height: 1.5; }

/* -- Sidenotes (footnotes) and margin notes ------------------------------- */

.fn-ref { font-size: 0.7em; line-height: 0; color: var(--accent); }
.sidenote {
  float: right;
  clear: right;
  width: var(--margin);
  margin-right: calc(-1 * (var(--margin) + var(--gap)));
  margin-top: 0.25rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}
.sidenote sup { color: var(--accent); margin-right: 0.15em; }

/* -- Articles ------------------------------------------------------------- */

article > header { margin-bottom: 2.4rem; }
article > header .meta { margin: 0; }

.draft-note {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--muted);
  border-left: 2px solid var(--lab);
  padding-left: 0.8rem;
  margin-top: 1rem;
}

/* The lab: the same article, marked by a thin rule along its left edge,
   a label above the title and one line of provenance below it. */
article.lab { border-left: 2px solid var(--lab); padding-left: 1.4rem; margin-left: calc(-1.4rem - 2px); }
.tier-mark {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lab);
  margin: 0 0 0.5rem;
}
.provenance { font-family: var(--sans); font-size: 0.82rem; line-height: 1.55; color: var(--muted); margin-top: 0.9rem; }
.provenance .status { color: var(--lab); font-weight: 600; }
.warn { color: var(--lab); }

aside.related {
  margin-top: 4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.92rem;
}
aside.related h2 { font-size: 0.95rem; margin-top: 0; }
aside.related ul { list-style: none; padding: 0; }
aside.related .status { color: var(--lab); font-family: var(--sans); font-size: 0.8rem; }
.related-note { color: var(--muted); font-size: 0.82rem; }

/* -- Lists of articles ---------------------------------------------------- */

ul.entries { list-style: none; padding: 0; }
ul.entries li { display: grid; grid-template-columns: 6.2rem 1fr; gap: 0 1rem; margin-bottom: 1.1rem; }
ul.entries .date { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); padding-top: 0.25rem; }
ul.entries a { font-weight: bold; }
ul.entries p { margin: 0.1rem 0 0; color: var(--muted); font-size: 0.92rem; }
ul.entries .status {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lab);
  margin-left: 0.6rem;
}
.lab-section h2::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; background: var(--lab); border-radius: 50%; margin-right: 0.5em; vertical-align: 0.12em; }

/* -- Figures, drawings, tables ------------------------------------------- */

figure { margin: 2rem 0; }
figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
figcaption { color: var(--muted); font-size: 0.85rem; line-height: 1.5; margin-top: 0.6rem; max-width: var(--text); }

/* html.frame output: black in a drawing takes the text colour. */
.frame { overflow-x: auto; color: var(--fg); }
.frame svg { display: block; margin: 0 auto; max-width: 100%; height: auto !important; }
.frame svg [fill="#000000"], .frame svg [fill="#000"] { fill: currentColor; }
.frame svg [stroke="#000000"], .frame svg [stroke="#000"] { stroke: currentColor; }

table { border-collapse: collapse; font-size: 0.92rem; }
th, td { padding: 0.35rem 0.7rem; border-bottom: 1px solid var(--rule); text-align: left; }
th { font-weight: 600; border-bottom-width: 2px; }
.table-scroll { overflow-x: auto; }
table.versus { font-family: var(--sans); font-size: 0.8rem; font-variant-numeric: tabular-nums; width: 100%; min-width: 640px; }
table.versus th, table.versus td { padding: 0.3rem 0.45rem; }
table.versus td { text-align: right; white-space: nowrap; }
table.versus td:first-child { text-align: left; }
table.versus .win-q { background: var(--good); }
table.versus .win-u { background: var(--bad); }
table.versus tr.tally td { font-weight: 600; border-top: 2px solid var(--rule); background: none; }

/* -- Maths (lib/math.typ, assets/eq.js) ---------------------------------- */

.eq { color: var(--fg); }
.eq svg [fill="#000000"] { fill: currentColor; }
.eq svg [stroke="#000000"] { stroke: currentColor; }
.eq-inline svg { display: inline; }
.eq-block { margin: 0.6rem 0 1.1rem; overflow-x: auto; overflow-y: hidden; padding: 0.3rem 0; }
.eq-block svg { margin: 0 auto; }
.eq.selected { background: var(--selection); box-shadow: 0 0.25em 0 var(--selection); border-radius: 2px; }
.eq-block.selected { background: none; box-shadow: none; }
.eq-block.selected svg { background: var(--selection); border-radius: 2px; }
.eq-src { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* -- Live wasm figures (lib/embed.typ, assets/embed.js) ------------------- */

figure.live { margin: 2.2rem 0; }
.live-fig { position: relative; width: 100%; background: #1b1b1b; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.live-fig canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-select: none; }
.live-fig-fallback {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 1.5rem;
  text-align: center; color: var(--muted); font-family: var(--sans); font-size: 0.85rem; pointer-events: none;
}
.live-fig.loading .live-fig-fallback { animation: pulse 1.4s ease-in-out infinite; }
.live-fig.live .live-fig-fallback { display: none; }
.live-fig.failed .live-fig-fallback::after { content: " Failed to load; see the console."; color: var(--bad); }
@keyframes pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .live-fig.loading .live-fig-fallback { animation: none; } }

/* -- Project pages --------------------------------------------------------- */

/* The way into a tool: a quiet outlined link in the accent, not a slab. */
.actions { margin: 1.6rem 0 2.2rem; }
a.button {
  display: inline-block;
  color: var(--accent);
  font-weight: bold;
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 0.4rem 0.9rem;
}
a.button:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
table.models td, table.results td { font-variant-numeric: tabular-nums; }
table.results { font-family: var(--sans); font-size: 0.84rem; }
table.results td:not(:first-child), table.results th:not(:first-child) { text-align: right; }
table.results td.ratio { font-weight: 600; }
table.results td.good { color: var(--accent); }
table.results td.bad { color: var(--orange); }
table.results td.muted, table.results .by { color: var(--muted); }
table.results th, table.results td { padding: 0.3rem 0.5rem; }
table.results td { white-space: nowrap; }
table.results th.group { text-align: center; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--rule); }
table.results th[rowspan] { vertical-align: bottom; }
table.results caption { caption-side: top; text-align: left; font-weight: 600; color: var(--muted); padding: 0 0 0.4rem; }
table.results .by { font-size: 0.8em; }
table.results td:first-child { line-height: 1.3; }
/* The two texts' tables: side by side when there is room, stacked when not. */
.results-pair { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; }
.results-pair > .table-scroll { flex: 1 1 24rem; }
.results-pair table.results { width: 100%; }
table.glance { font-size: 0.9rem; margin: 0.4rem 0 1.4rem; }
table.glance td:not(:first-child), table.glance th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
table.glance td.good { color: var(--accent); }
table.glance td.bad { color: var(--orange); }
.note { border-left: 2px solid var(--lab); padding-left: 0.9rem; color: var(--fg); }
table.results .by { font-size: 0.85em; }

/* -- Narrow screens: one centred column, notes inline ------------------- */

@media (max-width: 64rem) {
  body { max-width: calc(var(--text) + 32px); padding: 1.8rem 16px 3rem; }
  header.site { margin-bottom: 2.5rem; }
  body:has(.sidenote) main { margin-left: auto; }
  /* Wide figures take the window's width, not just the text column's. */
  :is(.wide, figure.wide, .frame.wide) { width: calc(100vw - 32px); margin-left: 50% !important; transform: translateX(-50%) !important; }
  .sidenote {
    float: none;
    display: block;
    width: auto;
    margin: 0.5rem 0 0.7rem 0.8rem;
    padding-left: 0.7rem;
    border-left: 1px solid var(--rule);
  }
  article.lab { padding-left: 0.9rem; margin-left: 0; }
  ul.entries li { grid-template-columns: 1fr; }
  ul.entries .date { padding-top: 0; }
}