:root {
  --bg: #fdfdfc;
  --card: #ffffff;
  --surface: #f7f6f3;
  --chip: #f2f0ec;
  --text: #1c1b19;
  --text-2: #413e3a;
  --text-3: #6b6864;
  --muted: #8a8681;
  --faint: #b0aca5;
  --rule: #e6e4e0;
  --rule-soft: #ececea;
  --line: #dedbd6;
  --line-strong: #c9c5bd;
  --arrow: #9c9891;
  --accent: #4f5fe0;
  --accent-wash: #eef0fd;
  --ok: #1a7f4b;
  --ok-wash: #e8f5ee;
  /* Used only to mark the broken step in the Postman diagram. Every other
     colour here shifts between themes; a one-off hex would not. */
  --warn: #b45309;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #131316;
  --card: #1a1a1e;
  --surface: #1e1e23;
  --chip: #26262c;
  --text: #f0efed;
  --text-2: #cdcbc7;
  --text-3: #a3a09b;
  --muted: #8b8884;
  --faint: #6a6763;
  --rule: #2c2c32;
  --rule-soft: #26262b;
  --line: #34343b;
  --line-strong: #43434b;
  --arrow: #6f6c68;
  --accent: #97a3ff;
  --accent-wash: #23253a;
  --ok: #58c98c;
  --ok-wash: #16301f;
  --warn: #e0954a;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }

/* The shared top bar and footer. The site is named for the work, not the
   person: the wordmark says what the site is, and the ways to reach its author
   are icons that stay out of the reading line. */
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 56px; border-bottom: 1px solid var(--rule); }
.wordmark { font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; font-weight: 600; line-height: 1; color: var(--text); }
.wordmark:hover { text-decoration: none; }
.topbar-links { display: flex; align-items: center; gap: 6px; }
.icon-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: var(--text-3); }
.icon-link:hover { color: var(--text); background: var(--surface); }
.icon-link svg { width: 17px; height: 17px; display: block; }
.icon-link:focus-visible, .theme-toggle:focus-visible, .wordmark:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.topbar-links .theme-toggle { margin-left: 8px; }
.site-foot { margin-top: 72px; padding: 22px 56px 44px; border-top: 1px solid var(--rule); }
.site-foot .wordmark { font-size: 15px; color: var(--text-3); }

/* The repo that owns a flow, directly under that flow. The list at the foot
   of the page is the index; this answers "where is the code for what I am
   looking at" without asking the reader to hold a name in their head and go
   find it. */
.fig-repos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
}
.fig-repo { display: flex; align-items: baseline; gap: 9px; font-size: 13px; }
.fig-repo-n { font-size: 13px; color: var(--muted); white-space: nowrap; }
.fig-repo > a { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; }
.fig-repo-note { font-size: 12.5px; color: var(--muted); }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

.page {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--bg);
  color: var(--text);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--text-3);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--text); border-color: var(--line-strong); }
.theme-toggle svg { width: 13px; height: 13px; display: block; }

figure svg { max-width: 100%; height: auto; }
.fig-caption { padding: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--text-3); max-width: 70ch; }
.diagram-hint { display: none; margin: 8px 0 0; font-size: 13px; color: var(--text-3); }

@media (max-width: 760px) {
  figure { padding-left: 16px !important; padding-right: 16px !important; }

  /*
   * The diagrams scroll sideways instead of shrinking to fit.
   *
   * `max-width: 100%` is the usual advice and it was quietly destroying them:
   * an 800-unit drawing squeezed into a 343px phone scales its 10px labels to
   * 4.3px, so the figure stayed on the page while becoming impossible to
   * read — the worst of both, because it still costs a screen of height.
   *
   * A minimum width keeps the labels near their intended size and lets the
   * reader pan. The scroll is confined to the figure; the page itself never
   * scrolls sideways.
   */
  .diagram-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Room for the scrollbar, so it never sits on top of the drawing. */
    padding-bottom: 10px;
  }
  .diagram-scroll svg {
    min-width: 620px;
  }
  .diagram-hint { display: block !important; }
}

/* The index.
   Colour carries one fact each: green is live and usable now, indigo is how
   it works. Everything else is ink or one quiet grey. Five type sizes, no
   eyebrow labels, no numbering, no arrows in link text. Headings are Source
   Serif, as on the system pages; everything a reader acts on is Plex Sans. */
.hero { padding: 72px 56px 8px; max-width: 760px; }
.hero-title { margin: 0; text-wrap: balance; font-family: 'Source Serif 4', Georgia, serif; font-size: 44px; line-height: 1.15; font-weight: 600; letter-spacing: -0.015em; color: var(--text); }
.hero-lede { margin: 18px 0 0; font-size: 16px; line-height: 1.65; color: var(--text-3); max-width: 60ch; }

.group { padding: 64px 56px 0; }
.group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 8px; }
.group-title { margin: 0; font-family: 'Source Serif 4', Georgia, serif; font-size: 28px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.group-note { margin: 6px 0 0; font-size: 16px; line-height: 1.6; color: var(--text-3); max-width: 58ch; }

.group-more { display: inline-flex; flex-direction: column; gap: 3px; padding: 10px 16px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent-wash); text-decoration: none; white-space: nowrap; }
.group-more:hover { background: var(--card); }
.group-more:focus-visible, .work a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.group-more-title { font-size: 16px; font-weight: 600; color: var(--accent); }
.group-more-hint { font-size: 13px; color: var(--text-3); }

/* One piece of work: a status gutter, then the entry. The gutter reads like a
   test reporter's result column — a tick for what is live, a dash for what
   cannot be opened — so the eye finds the running things first. */
.work { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 20px; padding: 26px 0; border-top: 1px solid var(--rule); }
.work > *:not(.work-status) { grid-column: 2; }
.work-status { grid-column: 1; grid-row: 1 / span 5; margin: 5px 0 0; font-size: 13px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.work-status.is-live { color: var(--ok); }
.work-name { margin: 0; font-family: 'Source Serif 4', Georgia, serif; font-size: 21px; font-weight: 600; color: var(--text); }
.work-version { margin-left: 8px; font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; font-weight: 400; color: var(--text-3); }
.work-what { margin: 6px 0 0; font-size: 16px; line-height: 1.6; color: var(--text-2); max-width: 62ch; }
.work-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 14px; }
.work-links a { font-size: 16px; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.work-links a:hover { text-decoration-color: currentColor; }
.work-links a.work-open { padding: 9px 16px; border-radius: 8px; background: var(--ok); color: var(--bg); font-weight: 600; text-decoration: none; }
.work-links a.work-open:hover { filter: brightness(1.08); }
.work-finding { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: var(--text-3); max-width: 62ch; }
.work-stack { margin: 12px 0 0; font-size: 13px; color: var(--text-3); }


.back-row { padding: 28px 56px 0; }
.back-row.back-bottom { padding-top: 56px; }
.back-link { font-size: 13px; color: var(--text-3); }

/* The system pages, in the same system as the index: serif headings in three
   steps (36, 28, 21), body text at 16px, and no labels above headings. */
.page-head { padding: 44px 56px 0; max-width: 760px; }
.page-title { margin: 0; text-wrap: balance; font-family: 'Source Serif 4', Georgia, serif; font-size: 36px; line-height: 1.15; font-weight: 600; letter-spacing: -0.015em; color: var(--text); }
.page-lede { margin: 14px 0 0; font-size: 16px; line-height: 1.65; color: var(--text-2); max-width: 64ch; }
.page-aside { margin: 18px 0 0; padding-left: 16px; border-left: 2px solid var(--rule); font-size: 16px; line-height: 1.65; color: var(--text-3); max-width: 64ch; }
.page-aside strong { color: var(--text-2); }

.section { padding: 64px 56px 0; }
.section-title { margin: 0; text-wrap: balance; font-family: 'Source Serif 4', Georgia, serif; font-size: 28px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.section-title + .work { margin-top: 16px; }
.section-lede { margin: 8px 0 0; font-size: 16px; line-height: 1.65; color: var(--text-2); max-width: 64ch; }
.subsection { padding: 44px 56px 0; }
.subsection-title { margin: 0 0 12px; font-family: 'Source Serif 4', Georgia, serif; font-size: 21px; font-weight: 600; color: var(--text); }
.prose { margin: 0 0 12px; font-size: 16px; line-height: 1.65; color: var(--text-2); max-width: 64ch; }
.section-title + .points { margin-top: 18px; }
.points { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px 32px; }
.point-title { margin: 0 0 6px; font-family: 'Source Serif 4', Georgia, serif; font-size: 16px; font-weight: 600; color: var(--text); }
.point-text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-3); }
.page code, .point-text code, .work code { font-family: 'IBM Plex Mono', monospace; font-size: 14px; }

.timings { margin: 4px 0 18px; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--text-2); }
.timings th { padding: 0 28px 6px 0; white-space: nowrap; font-size: 13px; font-weight: 600; text-align: left; color: var(--text-3); border-bottom: 1px solid var(--rule); }
.timings td { padding: 6px 28px 6px 0; }
.timings td:last-child { color: var(--text-3); }
.timings tr.is-chosen td:nth-child(2) { color: var(--ok); font-weight: 600; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.facts { margin: 16px 0 0; max-width: 760px; }
.facts > div { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 4px 24px; padding: 14px 0; border-top: 1px solid var(--rule); }
.facts dt { font-size: 16px; font-weight: 600; color: var(--text); }
.facts dd { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-2); }
@media (max-width: 760px) {
  .hero, .group { padding-left: 24px; padding-right: 24px; }
  .hero { padding-top: 48px; }
  .hero-title { font-size: 30px; }
  .group { padding-top: 48px; }
  .group-title { font-size: 24px; }
  .work { grid-template-columns: minmax(0, 1fr); }
  .work > * { grid-column: 1 !important; }
  .work-status { grid-row: auto; margin: 0 0 6px; }
  .back-row { padding-left: 24px; padding-right: 24px; }
  .topbar, .site-foot { padding-left: 24px; padding-right: 24px; }
  .page-head, .section, .subsection { padding-left: 24px; padding-right: 24px; }
  .page-head { padding-top: 32px; }
  .page-title { font-size: 28px; }
  .section { padding-top: 48px; }
  .section-title { font-size: 24px; }
  .facts > div { grid-template-columns: minmax(0, 1fr); }
}