:root {
  /* Colour: the same values as the critique-partner and workshop_synthesizer pages. */
  --bg: #FAF7F2;
  --surface: #FFFFFF;
  --ink: #1C1A17;
  --muted: #5E5850;
  --line: #E7E1D8;
  --accent: #B83A3A;
  --fill: #E54D4D;
  --on-fill: #FFFFFF;
  --code: #F2EDE5;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type. This site has no 80% root, so a rem here is a full 16px. */
  --text-hero: clamp(2.5rem, 6vw, 4.5rem);
  --text-page: clamp(2.4rem, 5.5vw, 4rem);
  --text-stat: clamp(2.4rem, 5vw, 3.4rem);
  --text-h2: clamp(1.7rem, 3.2vw, 2.4rem);
  --text-next: clamp(1.3rem, 3vw, 1.8rem);
  --text-lede: clamp(1.1rem, 2vw, 1.3rem);
  --text-h3: 1.35rem;
  --text-entry: 1.45rem;
  --text-name: 1.22rem;
  --text-button: 1.2rem;
  --text-step: 1.6rem;
  --text-why: 1.1rem;
  --text-body: 1.0625rem;
  --text-label: 1.05rem;
  --text-ui: 0.9375rem;
  --text-mono: 0.875rem;
  --text-meta: 0.8125rem;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-body: 1.6;
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;

  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-4-5: 18px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;
  --rule: 1px;

  --wrap: 65rem;
  --measure: 42rem;
  --measure-short: 36rem;
  --col-name: 17rem;
  --col-dots: 7.5rem;
  --col-go: 1.5rem;
  --col-stat: 18rem;
  --col-state: 11rem;
  --col-number: 3.5rem;
  --row-min: 3.75rem;
  --dot: 0.6875rem;
  --dash: 0.1875rem;

  --duration-fast: 150ms;
  --duration-enter: 240ms;
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --stagger: 28ms;
  --boot-delay: 120ms;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151311;
    --surface: #1C1A17;
    --ink: #EEE8DF;
    --muted: #A9A195;
    --line: #2E2A25;
    --accent: #F0918B;
    --code: #211E1A;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--text-body)/var(--leading-body) var(--sans); }
a { color: var(--accent); text-underline-offset: var(--space-1); }
a:focus-visible { outline: var(--space-0-5) solid var(--accent); outline-offset: var(--space-1); border-radius: var(--radius-sm); }
code { font: 500 0.9em var(--mono); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--space-6); }

header.top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); padding: var(--space-6) 0; }
.mark { font: 600 var(--text-body) var(--sans); color: var(--ink); text-decoration: none; }
.top nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1) var(--space-6); }
.top nav a { color: var(--muted); text-decoration: none; font-size: var(--text-ui); }
.top nav a:hover { color: var(--ink); }

.hero { padding: var(--space-10) 0 var(--space-12); }
.hero h1 { font: 600 var(--text-hero)/1.05 var(--serif); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-6); max-width: 19ch; }
.lede { font-size: var(--text-lede); color: var(--muted); max-width: 40rem; margin: 0 0 var(--space-8); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-7); align-items: center; }
/* 19px bold counts as large text, so white on the brand red passes AA at 3:1. */
.button { display: inline-block; background: var(--fill); color: var(--on-fill); text-decoration: none; font: 700 var(--text-button) var(--sans); padding: var(--space-3) var(--space-7); border-radius: var(--radius-full); }
.button:hover { filter: brightness(0.94); }

/* The monitor: one row per set, and the rows are the navigation. */
#sets { scroll-margin-top: var(--space-4); }
.status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1-5) var(--space-8); font: 500 var(--text-mono)/var(--leading-normal) var(--mono); padding: 0 0 var(--space-3); border-bottom: var(--rule) solid var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4-5); color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: var(--space-1-5); }

.monitor { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: minmax(0, var(--col-name)) minmax(0, 1fr) var(--col-dots) var(--col-go); gap: var(--space-6); align-items: center; min-height: var(--row-min); padding: var(--space-3) var(--space-2); color: inherit; text-decoration: none; border-bottom: var(--rule) solid var(--line); transition: background-color var(--duration-fast) var(--ease-spring); }
.row:hover { background: var(--surface); }
.row-name { font: 600 var(--text-name)/1.2 var(--serif); }
.row:hover .row-name { color: var(--accent); }
.row-covers { color: var(--muted); font-size: var(--text-ui); line-height: 1.4; }
.row-go { color: var(--accent); text-align: right; transition: transform var(--duration-fast) var(--ease-spring); }
.row:hover .row-go { transform: translateX(var(--space-1)); }
.group { margin: var(--space-6) 0 0; padding: 0 0 var(--space-2-5); border-bottom: var(--rule) solid var(--ink); font: 500 var(--text-mono)/var(--leading-normal) var(--mono); color: var(--muted); }
.caption { margin: var(--space-4) 0 0; color: var(--muted); font-size: var(--text-ui); max-width: var(--measure); }

.dots { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5); }
.dot { display: inline-block; flex: none; width: var(--dot); height: var(--dot); border-radius: var(--radius-full); }
.dot.on { background: var(--fill); }
.dot.name { border: var(--space-0-5) solid var(--accent); }
.dot.off { height: var(--dash); background: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .boot .row .dot { animation: boot var(--duration-enter) var(--ease-spring) backwards; animation-delay: calc(var(--i) * var(--stagger) + var(--boot-delay)); }
}
/* Scale only: a renderer stuck on the first frame still shows every dot. */
@keyframes boot { from { transform: scale(0.45); } }

section { padding: var(--space-16) 0; border-top: var(--rule) solid var(--line); }
#why { margin-top: var(--space-16); }
h2 { font: 600 var(--text-h2)/var(--leading-tight) var(--serif); letter-spacing: var(--tracking-snug); margin: 0 0 var(--space-4); }
.intro { color: var(--muted); max-width: var(--measure); margin: 0 0 var(--space-4); }
.intro:last-of-type { margin-bottom: var(--space-10); }

/* The four jobs: the number leads, because the number is the argument. */
.jobs { list-style: none; margin: 0; padding: 0; }
.job { display: grid; grid-template-columns: var(--col-stat) minmax(0, 1fr); gap: var(--space-4) var(--space-12); padding: var(--space-8) 0; border-top: var(--rule) solid var(--line); }
.stat { font: 600 var(--text-stat)/1 var(--serif); letter-spacing: var(--tracking-tight); color: var(--accent); margin: 0 0 var(--space-2); }
.stat-label { color: var(--muted); font-size: var(--text-ui); line-height: 1.4; margin: 0; }
.job h3 { font: 600 var(--text-h3)/var(--leading-snug) var(--serif); margin: 0 0 var(--space-2); }
.job p.body { margin: 0; max-width: var(--measure-short); }
.proof { padding: var(--space-6) var(--space-7); background: var(--surface); border: var(--rule) solid var(--line); border-radius: var(--radius-lg); max-width: 46rem; }
.proof p { margin: 0 0 var(--space-3); }
.proof p:last-child { margin: 0; }
.jobs + .proof { margin-top: var(--space-4); }

ul.people { list-style: none; padding: 0; margin: 0 0 var(--space-10); columns: 2; column-gap: var(--space-12); }
ul.people li { break-inside: avoid; padding: 0 0 var(--space-4); }
ul.people span { display: block; color: var(--muted); font-size: var(--text-ui); }
.start { margin: 0 0 var(--space-2); font-weight: 600; }
pre { margin: 0 0 var(--space-4); background: var(--code); border: var(--rule) solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3-5) var(--space-4-5); overflow-x: auto; font: 500 var(--text-mono)/var(--leading-body) var(--mono); }
pre code { font: inherit; }

ol.steps { list-style: none; padding: 0; margin: 0 0 var(--space-8); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); counter-reset: step; }
ol.steps li { counter-increment: step; }
ol.steps li::before { content: counter(step); display: block; font: 600 var(--text-step) var(--serif); color: var(--accent); margin-bottom: var(--space-1-5); }
ol.steps h3 { font: 600 var(--text-label)/var(--leading-snug) var(--sans); margin: 0 0 var(--space-1-5); }
ol.steps p { margin: 0; color: var(--muted); font-size: var(--text-ui); }

.close h2 { max-width: 20ch; }
.close .intro { margin-bottom: var(--space-8); }

/* Set pages */
.crumb { font: 500 var(--text-mono)/var(--leading-normal) var(--mono); color: var(--muted); margin: var(--space-8) 0 var(--space-4); }
.crumb a { color: inherit; }
.page-head { padding: 0 0 var(--space-12); }
.page-head h1 { font: 600 var(--text-page)/1.05 var(--serif); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-5); max-width: 20ch; }
.tag { display: inline-block; font: 500 var(--text-meta)/var(--leading-normal) var(--mono); color: var(--muted); border: var(--rule) solid var(--line); border-radius: var(--radius-full); padding: var(--space-0-5) var(--space-3); margin: 0 0 var(--space-4); }
.why { font-size: var(--text-why); max-width: 40rem; margin: 0 0 var(--space-4); }
.gap { color: var(--muted); max-width: 40rem; margin: 0; }
.gap b { color: var(--ink); font-weight: 600; }
.entries { border-top: var(--rule) solid var(--ink); }
.first-step { padding: var(--space-5) 0; border-bottom: var(--rule) solid var(--line); }
.first-step p { margin: 0 0 var(--space-2-5); color: var(--muted); font-size: var(--text-ui); }
.first-step pre { margin: 0; }
.entry { display: grid; grid-template-columns: minmax(0, 1fr) var(--col-state); gap: var(--space-2) var(--space-8); padding: var(--space-8) 0; border-bottom: var(--rule) solid var(--line); }
.entry h2 { font: 600 var(--text-entry)/var(--leading-snug) var(--serif); letter-spacing: 0; margin: 0 0 var(--space-1); }
.byline { margin: 0 0 var(--space-3); color: var(--muted); font-size: var(--text-ui); }
.summary { margin: 0 0 var(--space-3); max-width: var(--measure); }
.tested { margin: 0 0 var(--space-3); max-width: var(--measure); font-size: var(--text-ui); }
.tested b { font-weight: 600; }
.note { margin: 0; color: var(--muted); font-size: var(--text-ui); max-width: var(--measure); }
.entry pre { margin: var(--space-3) 0 0; }
.state { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 var(--text-mono)/var(--leading-normal) var(--mono); justify-self: end; align-self: start; padding-top: var(--space-1-5); white-space: nowrap; }
.turn { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-6); padding: var(--space-10) 0 var(--space-16); }
.turn .next { font: 600 var(--text-next)/1.2 var(--serif); text-decoration: none; text-align: right; }
.turn .next:hover { text-decoration: underline; }
.turn small { display: block; font: 500 var(--text-mono)/var(--leading-normal) var(--mono); color: var(--muted); }
.turn .prev { color: var(--muted); font-size: var(--text-ui); }

/* Method page */
.method { list-style: none; margin: 0; padding: 0; border-top: var(--rule) solid var(--ink); counter-reset: step; }
.method li { counter-increment: step; display: grid; grid-template-columns: var(--col-number) minmax(0, 1fr); padding: var(--space-6) 0; border-bottom: var(--rule) solid var(--line); }
.method li::before { content: counter(step); font: 600 var(--text-step)/1.2 var(--serif); color: var(--accent); }
.method h2 { font: 600 var(--text-name)/var(--leading-snug) var(--serif); letter-spacing: 0; margin: 0 0 var(--space-1-5); }
.method p { margin: 0; max-width: var(--measure); color: var(--muted); }
.prose { padding: var(--space-12) 0 var(--space-16); }
.prose h2 { margin-top: 0; }
.prose p { max-width: var(--measure); margin: 0 0 var(--space-4); }
.prose h2:not(:first-child) { margin-top: var(--space-12); }

footer { border-top: var(--rule) solid var(--line); padding: var(--space-8) 0 var(--space-12); color: var(--muted); font-size: var(--text-ui); }

@media (max-width: 860px) {
  .row { grid-template-columns: minmax(0, 1fr) var(--col-dots); gap: var(--space-1) var(--space-4); padding: var(--space-3-5) var(--space-1); }
  .row-name { grid-column: 1; grid-row: 1; }
  .row-dots { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  .row-covers { grid-column: 1 / -1; grid-row: 2; }
  .row-go { display: none; }
  .job { grid-template-columns: 1fr; }
  ol.steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-7); }
  ul.people { columns: 1; }
  section { padding: var(--space-12) 0; }
  #why { margin-top: var(--space-12); }
  .entry { grid-template-columns: minmax(0, 1fr); }
  .state { justify-self: start; padding-top: 0; grid-row: 1; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 var(--space-4); }
  .hero { padding: var(--space-4) 0 var(--space-8); }
  .row-covers { display: none; }
  .top nav a.optional { display: none; }
  ol.steps { grid-template-columns: 1fr; }
  .proof { padding: var(--space-5); }
  pre { font-size: var(--text-meta); white-space: pre-wrap; overflow-wrap: anywhere; }
}