:root {
  color-scheme: only light;
  /* palette */
  --c-paper-0: #FAF8F2;
  --c-paper-1: #F4F1E8;
  --c-paper-2: #EBE6D8;
  --c-paper-3: #DDD6C4;
  --c-paper-edge: #EFEBDF;
  --c-paper-glint: #FFFDF5;
  --c-ink-1: #23241F;
  --c-ink-2: #47473F;
  --c-ink-3: #6B695E;
  --c-ink-4: #A5A194;
  --c-ink-top: #303029;
  --c-ink-mid: #21221D;
  --c-ink-foot: #2A2A24;
  --c-green-300: #9CC6AB;
  --c-green-500: #60A37B;
  --c-green-700: #3D7556;
  --c-green-900: #3C5747;
  --c-green-top: #6FB289;
  --c-green-mid: #579872;
  --c-green-foot: #4D8A67;
  --c-green-shade: #163322;
  --c-rubric-500: #B3543C;
  --c-rubric-700: #95402B;

  /* semantic roles and surfaces */
  --c-bg: #F4F1E8;
  --c-bg-edge: #EFEBDF;
  --c-surface: #FAF8F2;
  --c-surface-inset: #EBE6D8;
  --c-line: #DDD6C4;
  --c-rule: #A5A194;
  --c-text: #23241F;
  --c-text-muted: #47473F;
  --c-text-faint: #6B695E;
  --c-action: #3D7556;
  --c-action-pressed: #3C5747;
  --c-action-border: #9CC6AB;
  --c-on-action: #FAF8F2;
  --c-ornament: #9CC6AB;
  --c-mark: #60A37B;
  --c-mark-top: #6FB289;
  --c-mark-mid: #579872;
  --c-mark-foot: #4D8A67;
  --c-mark-shade: #163322;
  --c-mark-glint: #FFFDF5;
  --c-ink-top: #303029;
  --c-ink-mid: #21221D;
  --c-ink-foot: #2A2A24;
  --c-highlight: #95402B;
  --c-highlight-rule: #B3543C;
  --c-code-bg: #EBE6D8;
  --c-code-text: #23241F;
  --c-paper-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .18  0 0 0 0 .15  0 0 0 0 .1  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  --c-paper-mottle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='m' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .22  0 0 0 .22 -.04'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>");
  --c-deboss: 0 1px 0 rgba(255, 253, 245, 0.75), 0 -0.5px 0 rgba(35, 36, 31, 0.12);
  --c-emboss: drop-shadow(0 1px 0 rgba(255, 253, 245, 0.55)) drop-shadow(0 1px 1px rgba(35, 36, 31, 0.07));
  --c-shadow-sheet: 0 1px 1px rgba(35, 36, 31, 0.06), 0 6px 18px -8px rgba(35, 36, 31, 0.18);
  --c-shadow-press: inset 0 1px 2px rgba(35, 36, 31, 0.14), inset 0 -1px 0 rgba(255, 253, 245, 0.6);
  --c-shadow-plate: inset 0 1px 0 rgba(255, 253, 245, 0.18), 0 1px 0 rgba(255, 253, 245, 0.7), 0 1px 2px rgba(22, 51, 34, 0.25);
  --c-plate-sheen: linear-gradient(180deg, rgba(255, 253, 245, 0.1), rgba(35, 36, 31, 0.06));
  --c-wash: rgba(35, 36, 31, 0.05);
  --c-selection: rgba(96, 163, 123, 0.28);

  /* type */
  --c-font-brand: "Fira Sans", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", sans-serif;
  --c-font-display: "EB Garamond", Garamond, "Iowan Old Style", "Palatino Linotype", serif;
  --c-font-body: "EB Garamond", Garamond, "Iowan Old Style", "Palatino Linotype", serif;
  --c-font-ui: "Fira Sans", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", sans-serif;
  --c-font-mono: "Fira Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --c-display-family: var(--c-font-display);
  --c-display-weight: 400;
  --c-display-size: 76px;
  --c-display-min: 44px;
  --c-display-line: 1.0526;
  --c-display-tracking: -0.01em;
  --c-headline-family: var(--c-font-display);
  --c-headline-weight: 400;
  --c-headline-size: 64px;
  --c-headline-min: 40px;
  --c-headline-line: 1.0938;
  --c-headline-tracking: -0.01em;
  --c-title-family: var(--c-font-display);
  --c-title-weight: 500;
  --c-title-size: 36px;
  --c-title-min: 30px;
  --c-title-line: 1.1111;
  --c-title-tracking: 0em;
  --c-subhead-family: var(--c-font-display);
  --c-subhead-weight: 500;
  --c-subhead-size: 21px;
  --c-subhead-line: 1.2381;
  --c-subhead-tracking: 0em;
  --c-lede-family: var(--c-font-body);
  --c-lede-weight: 400;
  --c-lede-size: 23px;
  --c-lede-line: 1.3913;
  --c-lede-tracking: 0em;
  --c-body-family: var(--c-font-body);
  --c-body-weight: 400;
  --c-body-size: 19px;
  --c-body-line: 1.4474;
  --c-body-tracking: 0em;
  --c-small-family: var(--c-font-body);
  --c-small-weight: 400;
  --c-small-size: 17px;
  --c-small-line: 1.4118;
  --c-small-tracking: 0em;
  --c-caption-family: var(--c-font-body);
  --c-caption-weight: 400;
  --c-caption-size: 15px;
  --c-caption-line: 1.4;
  --c-caption-tracking: 0em;
  --c-label-family: var(--c-font-ui);
  --c-label-weight: 500;
  --c-label-size: 16px;
  --c-label-line: 1.25;
  --c-label-tracking: 0.08em;
  --c-ui-family: var(--c-font-ui);
  --c-ui-weight: 400;
  --c-ui-size: 16px;
  --c-ui-line: 1.3125;
  --c-ui-tracking: 0em;
  --c-code-family: var(--c-font-mono);
  --c-code-weight: 400;
  --c-code-size: 15px;
  --c-code-line: 1.4667;
  --c-code-tracking: 0em;

  /* space */
  --c-space-xs: 4px;
  --c-space-sm: 8px;
  --c-space-md: 14px;
  --c-space-lg: 28px;
  --c-space-xl: 42px;
  --c-space-xxl: 56px;
  --c-space-xxxl: 84px;
  --c-space-huge: 112px;

  /* radius */
  --c-radius-control: 2px;

  /* buttons */
  --c-button-sm-font-size: 14px;
  --c-button-sm-padding-vertical: 6px;
  --c-button-sm-padding-horizontal: 12px;
  --c-button-md-font-size: 16px;
  --c-button-md-padding-vertical: 9px;
  --c-button-md-padding-horizontal: 18px;
  --c-button-lg-font-size: 18px;
  --c-button-lg-padding-vertical: 13px;
  --c-button-lg-padding-horizontal: 26px;

  /* motion */
  --c-ease-draw: cubic-bezier(0.45, 0, 0.2, 1);
  --c-ease-settle: cubic-bezier(0.2, 0.7, 0.2, 1);
  --c-dur-quick: 160ms;
  --c-dur-step: 600ms;
  --c-dur-draw: 1200ms;

  /* the page */
  --c-page-text: 33rem;
  --c-page-gutter: 3rem;
  --c-page-margin: 15rem;
  --c-page-width: 51rem;
  --c-page-hang: 133px;
}

/* =============================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg { max-width: 100%; }
/* Never set overflow on one axis alone — see CLAUDE.md. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; }
}

/* =============================================================================
   The sheet: grain, slow mottling, and light from above. Fixed behind the page
   on its own layer, because iOS doesn't honour background-attachment: fixed.
   ========================================================================== */
html { font-size: var(--c-body-size); }
body {
  position: relative;
  isolation: isolate;
  background-color: var(--c-bg);
  color: var(--c-text);
  font: var(--c-body-weight) var(--c-body-size)/var(--c-body-line) var(--c-body-family);
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-feature-settings: "kern", "liga", "onum";
  hanging-punctuation: first last;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    var(--c-paper-grain),
    var(--c-paper-mottle),
    radial-gradient(150% 110% at 50% 0%, var(--c-surface) 0%, var(--c-bg) 60%, var(--c-bg-edge) 100%);
}
.page { flex: 1; display: flow-root; }
p { text-wrap: pretty; }
::selection { background: var(--c-selection); }

a {
  color: var(--c-action);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--c-action-border);
  transition: color var(--c-dur-quick), text-decoration-color var(--c-dur-quick);
}
a:hover { color: var(--c-text); text-decoration-color: currentColor; }

/* =============================================================================
   Type
   ========================================================================== */
.t-display, .t-headline, .t-title, .t-subhead { text-wrap: balance; }
.t-display {
  font: var(--c-display-weight) var(--c-display-size)/var(--c-display-line) var(--c-display-family);
  font-size: clamp(var(--c-display-min), 9vw, var(--c-display-size));
  letter-spacing: var(--c-display-tracking);
}
.t-headline {
  font: var(--c-headline-weight) var(--c-headline-size)/var(--c-headline-line) var(--c-headline-family);
  font-size: clamp(var(--c-headline-min), 7vw, var(--c-headline-size));
  letter-spacing: var(--c-headline-tracking);
}
/* Display ink: a gradient clipped to the letters and a faint emboss. The padding keeps descenders from being cropped. */
.t-ink { color: var(--c-text); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .t-ink {
    background: linear-gradient(180deg, var(--c-ink-top) 0%, var(--c-ink-mid) 60%, var(--c-ink-foot) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: var(--c-emboss);
    padding: 0.06em 0.08em 0.2em 0;
  }
}
.t-title {
  font: var(--c-title-weight) var(--c-title-size)/var(--c-title-line) var(--c-title-family);
  font-size: clamp(var(--c-title-min), 4vw, var(--c-title-size));
  text-shadow: var(--c-deboss);
  max-width: 16em;
}
.t-subhead { font: var(--c-subhead-weight) var(--c-subhead-size)/var(--c-subhead-line) var(--c-subhead-family); text-shadow: var(--c-deboss); margin-bottom: var(--c-space-xs); }
.t-body { font: var(--c-body-weight) var(--c-body-size)/var(--c-body-line) var(--c-body-family); }
.t-small { font: var(--c-small-weight) var(--c-small-size)/var(--c-small-line) var(--c-small-family); }
.t-caption { font: var(--c-caption-weight) var(--c-caption-size)/var(--c-caption-line) var(--c-caption-family); color: var(--c-text-faint); }
.t-label { font: var(--c-label-weight) var(--c-label-size)/var(--c-label-line) var(--c-label-family); font-variant-caps: all-small-caps; letter-spacing: var(--c-label-tracking); color: var(--c-text-faint); }
.t-ui { font: var(--c-ui-weight) var(--c-ui-size)/var(--c-ui-line) var(--c-ui-family); }
.t-code { font: var(--c-code-weight) var(--c-code-size)/var(--c-code-line) var(--c-code-family); }
.t-muted { color: var(--c-text-muted); }

/* Code: Fira Mono. Inline it stands out by colour alone; a block sits on its own ground. */
code, pre { font: var(--c-code-weight) var(--c-code-size)/var(--c-code-line) var(--c-code-family); font-variant-numeric: normal; font-feature-settings: normal; }
:not(pre) > code { color: var(--c-action); font-size: 0.84em; }
.code {
  margin: 0;
  max-width: 44rem;
  background: var(--c-code-bg);
  color: var(--c-code-text);
  box-shadow: var(--c-shadow-press);
  padding: var(--c-space-md) var(--c-space-lg);
  /* Long lines scroll inside the block on both axes, never the page. */
  overflow: auto;
  tab-size: 2;
}
/* A sentence to paste wraps; code keeps its lines. */
.code[data-language="text"] { white-space: pre-wrap; }
.code-caption { margin-top: var(--c-space-md); max-width: var(--c-page-text); }

.lede { max-width: var(--c-page-text); color: var(--c-text-muted); }

/* =============================================================================
   Layout: a text column, a gutter and a margin column, with wide margins.
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: calc(var(--c-page-width) + clamp(20px, 5vw, 72px) + clamp(20px, 6vw, 96px));
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 72px) clamp(20px, 6vw, 96px);
}
@media (min-width: 1280px) {
  .wrap {
    max-width: calc(var(--c-page-width) + clamp(20px, 5vw, 72px) + clamp(20px, 6vw, 96px) + var(--c-page-hang));
    padding-left: calc(clamp(20px, 5vw, 72px) + var(--c-page-hang));
  }
}
/* Rules, not boxes: a section opens with a hairline and a line of space. */
.section { margin-top: clamp(var(--c-space-xxxl), 9vw, var(--c-space-huge)); }
.section__inner { border-top: 0.75px solid var(--c-rule); padding-top: var(--c-space-lg); }
.section__main { min-width: 0; }
.section__head { margin-bottom: var(--c-space-xl); }
.section__head:last-child { margin-bottom: 0; }
.section__head .t-title + .lede { margin-top: var(--c-space-md); }
.section--tight { margin-top: var(--c-space-xl); }
.section--flush { margin-top: 0; padding-top: var(--c-space-lg); }
.section__more { margin-top: var(--c-space-lg); }
.link-more { font: var(--c-ui-weight) var(--c-ui-size)/var(--c-ui-line) var(--c-ui-family); font-weight: 500; text-underline-offset: 0.25em; }
.prose { max-width: var(--c-page-text); }
.prose > * + * { margin-top: var(--c-space-md); }

/* Between sections: a hairline with the mark, small, in a quiet green. */
.ornament { display: flex; align-items: center; gap: var(--c-space-md); margin-top: var(--c-space-xl); color: var(--c-ornament); line-height: 1; }
.ornament .mark { width: 2.25rem; height: auto; flex: none; }
.ornament::before, .ornament::after { content: ""; flex: 1; border-top: 0.75px solid var(--c-line); }

/* =============================================================================
   Header and footer: a masthead and a colophon
   ========================================================================== */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-space-md) var(--c-space-lg);
  padding-block: clamp(16px, 3vh, var(--c-space-lg));
  flex-wrap: wrap;
}
.nav { display: flex; gap: var(--c-space-sm) 22px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.nav a { font: var(--c-ui-weight) var(--c-ui-size)/var(--c-ui-line) var(--c-ui-family); color: var(--c-text-muted); text-decoration: none; }
.nav a:hover { color: var(--c-action); }
.nav a[aria-current="page"]:not(.nav__button) { color: var(--c-text); text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 0.35em; }
.nav a.nav__button {
  font-size: var(--c-button-sm-font-size);
  font-weight: 500;
  line-height: 1.2;
  color: var(--c-on-action);
  background-color: var(--c-action);
  background-image: var(--c-plate-sheen);
  box-shadow: var(--c-shadow-plate);
  padding: var(--c-button-sm-padding-vertical) var(--c-button-sm-padding-horizontal);
  border-radius: var(--c-radius-control);
  transition: background-color var(--c-dur-quick);
}
.nav a.nav__button:hover, .nav a.nav__button:focus-visible { color: var(--c-on-action); background-color: var(--c-action-pressed); }

/* The collapsed menu: three hairlines that open a laid-down sheet over the page. */
.menu { display: none; position: relative; margin-left: auto; }
.menu__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  color: var(--c-text-muted);
  cursor: pointer;
  list-style: none;
}
.menu__toggle::-webkit-details-marker { display: none; }
.menu__toggle:hover { color: var(--c-action); }
.menu__toggle svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.menu__close, .menu[open] .menu__bars { display: none; }
.menu[open] .menu__close { display: inline; }
.nav.nav--menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 10;
  width: min(16rem, calc(100vw - 40px));
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: var(--c-space-sm) 20px 20px;
  background: var(--c-surface);
  box-shadow: var(--c-shadow-sheet);
}
.nav--menu a:not(.nav__button) { padding-block: 12px; border-bottom: 0.75px solid var(--c-line); }
.nav--menu a[aria-current="page"]:not(.nav__button) { text-decoration: none; color: var(--c-action); }
.nav.nav--menu a.nav__button { margin-top: var(--c-space-md); padding: var(--c-button-md-padding-vertical) var(--c-button-md-padding-horizontal); font-size: var(--c-button-md-font-size); text-align: center; }
@media (max-width: 899px) {
  .nav--wide { display: none; }
  .menu { display: block; }
}

.site-footer { margin-top: var(--c-space-huge); padding-bottom: clamp(var(--c-space-xxl), 12vh, 144px); }
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-lg);
  align-items: flex-end;
  justify-content: space-between;
  border-top: 0.75px solid var(--c-rule);
  padding-top: 22px;
}
.site-footer__meta { margin-top: var(--c-space-sm); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 20px; font: var(--c-ui-weight) var(--c-ui-size)/var(--c-ui-line) var(--c-ui-family); font-size: var(--c-caption-size); }

/* =============================================================================
   Buttons: an inked plate, always Fira Sans in sentence case. Press sinks it.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--c-space-sm);
  font-family: var(--c-font-ui);
  font-weight: 500;
  font-size: var(--c-button-md-font-size);
  line-height: 1.2;
  padding: var(--c-button-md-padding-vertical) var(--c-button-md-padding-horizontal);
  border: 0;
  border-radius: var(--c-radius-control);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--c-dur-quick), color var(--c-dur-quick), box-shadow var(--c-dur-quick), transform var(--c-dur-quick);
}
.btn--primary { color: var(--c-on-action); background-color: var(--c-action); background-image: var(--c-plate-sheen); box-shadow: var(--c-shadow-plate); }
.btn--primary:hover, .btn--primary:focus-visible { color: var(--c-on-action); background-color: var(--c-action-pressed); }
.btn--secondary { color: var(--c-text); background-color: transparent; box-shadow: inset 0 0 0 1px var(--c-rule); text-shadow: var(--c-deboss); }
.btn--secondary:hover, .btn--secondary:focus-visible { color: var(--c-text); background-color: var(--c-wash); }
.btn:active { transform: translateY(0.5px); box-shadow: var(--c-shadow-press); }
.btn--lg {
  font-size: var(--c-button-lg-font-size);
  padding: var(--c-button-lg-padding-vertical) var(--c-button-lg-padding-horizontal);
}
:where(a, button, summary):focus-visible {
  outline: 2px solid var(--c-mark);
  outline-offset: 3px;
  border-radius: var(--c-radius-control);
}
.actions { display: flex; flex-wrap: wrap; gap: var(--c-space-md); margin-top: var(--c-space-lg); }

/* =============================================================================
   Cards: no boxes, just a heading and its passage in a grid
   ========================================================================== */
.grid { display: grid; gap: var(--c-space-lg) var(--c-space-xl); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .grid--2 { grid-template-columns: minmax(0, 1fr); } }
.card .t-small { color: var(--c-text-muted); }
a.card--link { display: block; color: inherit; text-decoration: none; }
a.card--link .t-subhead { color: var(--c-action); }
a.card--link:hover .t-subhead { color: var(--c-text); }
a.card--link .t-subhead::after { content: " \2192"; }

/* A numbered argument: the claim, then its detail, run together. */
.statements { counter-reset: statement; display: grid; gap: 18px; max-width: var(--c-page-text); }
.statement { counter-increment: statement; display: grid; grid-template-columns: 2em minmax(0, 1fr); }
.statement::before { content: counter(statement) "."; color: var(--c-highlight); }
.statement__title, .statement__body { display: inline; }
.statement__title { font-weight: 500; }
.statement__body { color: var(--c-text-muted); }

/* Figures that can be defended: the number, what it counts, and its limit beside it. */
.stats { display: grid; grid-template-columns: minmax(7em, max-content) minmax(0, 1fr); gap: 22px 32px; max-width: 44rem; }
.stat__value {
  font: 400 34px/1.05 var(--c-font-display);
  font-variant-numeric: lining-nums;
  text-align: right;
}
.stat__label { display: block; font-weight: 500; }
.stat__limit { display: block; font: var(--c-small-weight) var(--c-small-size)/var(--c-small-line) var(--c-small-family); color: var(--c-text-muted); }
@media (max-width: 719px) {
  .stats { grid-template-columns: minmax(0, 1fr); gap: var(--c-space-xs); }
  .stat__value { text-align: left; }
  .stats dd + dt { margin-top: var(--c-space-md); }
}

/* The founders and the routes in */
.people { display: grid; gap: var(--c-space-lg) var(--c-space-xl); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.person__role { font: var(--c-label-weight) var(--c-label-size)/var(--c-label-line) var(--c-label-family); font-size: var(--c-caption-size); font-variant-caps: all-small-caps; letter-spacing: var(--c-label-tracking); color: var(--c-text-faint); margin-bottom: var(--c-space-sm); }
.person__bio { font: var(--c-small-weight) var(--c-small-size)/var(--c-small-line) var(--c-small-family); color: var(--c-text-muted); }
.person__mail { display: inline-block; margin-top: var(--c-space-sm); }

/* A short route is a sheet laid on the page, with a link; a long one is a passage between hairlines, with a button. */
.routes--sheets { display: grid; gap: var(--c-space-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.routes--sheets .route { display: flex; flex-direction: column; gap: var(--c-space-sm); background: var(--c-surface); box-shadow: var(--c-shadow-sheet); padding: 22px 24px; }
.routes--sheets .route p { font: var(--c-small-weight) var(--c-small-size)/var(--c-small-line) var(--c-small-family); color: var(--c-text-muted); flex: 1; }
.routes--rows .route { display: grid; gap: var(--c-space-md) var(--c-space-xl); padding-block: var(--c-space-lg); border-top: 0.75px solid var(--c-line); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.routes--rows .route:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 720px) { .routes--rows .route { grid-template-columns: minmax(0, 1fr); } }
.route__list { margin-top: var(--c-space-xs); padding-left: 1.1em; color: var(--c-text-muted); }

/* Detail closed behind its title, so a long page reads short. */
.fold__summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--c-space-lg); cursor: pointer; list-style: none; }
.fold__summary::-webkit-details-marker { display: none; }
.fold__summary .t-subhead { margin: 0; }
.fold__summary::after { content: "Show"; flex: none; font: var(--c-ui-weight) var(--c-ui-size)/var(--c-ui-line) var(--c-ui-family); font-weight: 500; color: var(--c-action); }
.fold__summary:hover::after { color: var(--c-text); }
.fold[open] .fold__summary { margin-bottom: var(--c-space-lg); }
.fold[open] .fold__summary::after { content: "Hide"; }
.fold__lede { margin-bottom: var(--c-space-lg); }

/* A highlighted aside: a sheet with a rubric label. */
.callout { max-width: 44rem; background: var(--c-surface); box-shadow: var(--c-shadow-sheet); padding: 22px 24px; }
.callout__label { display: block; font: var(--c-label-weight) var(--c-label-size)/var(--c-label-line) var(--c-label-family); font-variant-caps: all-small-caps; letter-spacing: var(--c-label-tracking); color: var(--c-highlight); margin-bottom: 10px; }

/* Tables: hairlines only */
.table-wrap { overflow: auto; max-width: 44rem; }
.table { width: 100%; border-collapse: collapse; font: var(--c-small-weight) var(--c-small-size)/var(--c-small-line) var(--c-small-family); }
.table th { text-align: left; font: var(--c-label-weight) var(--c-label-size)/var(--c-label-line) var(--c-label-family); font-size: var(--c-caption-size); font-variant-caps: all-small-caps; letter-spacing: var(--c-label-tracking); color: var(--c-text-faint); border-bottom: 0.75px solid var(--c-rule); }
.table th, .table td { padding: var(--c-space-sm) var(--c-space-md) var(--c-space-sm) 0; vertical-align: top; }
.table td { border-bottom: 0.75px solid var(--c-line); }
.table tr:last-child td { border-bottom: 0; }
.table code { white-space: nowrap; }

/* =============================================================================
   Hero
   ========================================================================== */
.hero { padding-top: var(--c-space-xxl); }
.hero--home { padding-top: 0; }
.hero__logo { margin-block: clamp(var(--c-space-xl), 8vh, var(--c-space-huge)) var(--c-space-xl); }
.hero__title { max-width: 13em; margin-bottom: var(--c-space-lg); }
/* Greedy, not balanced, so the emphasised phrase stays on one line. */
.hero--home .hero__title { max-width: 10em; text-wrap: wrap; }
/* Text with a figure beside it, in the margin column on a wide page. */
.margined { display: grid; gap: var(--c-space-xl); }
.margined__text { max-width: var(--c-page-text); min-width: 0; }
.hero .lede { font: var(--c-lede-weight) var(--c-lede-size)/var(--c-lede-line) var(--c-lede-family); color: var(--c-text); }
.hero__note { margin-top: var(--c-space-xl); color: var(--c-text-muted); }
.hero__more { margin-top: var(--c-space-md); }
.hero__fine { margin-top: var(--c-space-sm); font: var(--c-caption-weight) var(--c-caption-size)/var(--c-caption-line) var(--c-caption-family); color: var(--c-text-faint); }
.margined__figure { max-width: 22rem; }
@media (min-width: 1280px) {
  .margined { grid-template-columns: var(--c-page-text) var(--c-page-margin); column-gap: var(--c-page-gutter); align-items: start; }
  .margined__figure { max-width: none; }
}
.evidence__lede { margin-top: var(--c-space-md); }
.contents { display: flex; flex-wrap: wrap; gap: var(--c-space-sm) 22px; margin-top: var(--c-space-lg); font: var(--c-ui-weight) var(--c-ui-size)/var(--c-ui-line) var(--c-ui-family); }

/* =============================================================================
   Docs: a section menu beside the content, with narrower margins than the book's
   ========================================================================== */
.page--docs .wrap { max-width: 1200px; padding-inline: clamp(20px, 4vw, 48px); }
.docs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--c-space-lg); padding-top: var(--c-space-md); }
.docs__nav { display: none; }
.docs__menu { background: var(--c-surface); box-shadow: var(--c-shadow-sheet); padding: var(--c-space-sm) var(--c-space-md); }
.docs__toggle { font: var(--c-ui-weight) var(--c-ui-size)/var(--c-ui-line) var(--c-ui-family); font-weight: 500; color: var(--c-action); cursor: pointer; padding-block: 4px; }
.docs__menu[open] .docs__toggle { margin-bottom: var(--c-space-md); }
.docs__group + .docs__group { margin-top: var(--c-space-lg); }
.docs__label { margin-bottom: var(--c-space-xs); font-size: var(--c-caption-size); }
.docs__links { display: grid; gap: 2px; }
.docs__links a { display: block; padding-block: 3px; font: var(--c-ui-weight) var(--c-ui-size)/var(--c-ui-line) var(--c-ui-family); font-size: var(--c-small-size); color: var(--c-text-muted); text-decoration: none; }
.docs__links a:hover { color: var(--c-action); }
.docs__links a[aria-current="page"] { color: var(--c-action); font-weight: 500; }
.docs__main { min-width: 0; }
.docs__main .wrap { max-width: none; margin: 0; padding: 0; }
.docs__main .hero { padding-top: 0; }
.docs__main .hero__title { font: var(--c-title-weight) var(--c-title-size)/var(--c-title-line) var(--c-title-family); font-size: var(--c-headline-min); line-height: 1.15; margin-bottom: var(--c-space-md); max-width: none; }
.docs__main .section { margin-top: var(--c-space-xxl); }
.docs__main .section__inner { padding-top: var(--c-space-md); }
.docs__main .section__head { margin-bottom: var(--c-space-lg); }
.docs__main .t-title { font-size: var(--c-title-min); max-width: none; }
@media (min-width: 900px) {
  .docs { grid-template-columns: 13rem minmax(0, 1fr); column-gap: var(--c-space-xxl); }
  .docs__menu { display: none; }
  .docs__nav { display: block; }
}
/* The menu never scrolls on its own (Micah, 2026-11-05). It stays in view only where the
   whole of it fits; in a shorter window it scrolls with the page, so no link is cut off. */
@media (min-width: 900px) and (min-height: 860px) {
  .docs__nav { position: sticky; top: var(--c-space-lg); }
}

/* =============================================================================
   Call to action
   ========================================================================== */
.cta { border-top: 0.75px solid var(--c-rule); padding-top: var(--c-space-lg); }
.cta .lede { margin-top: var(--c-space-md); }

/* =============================================================================
   Design page specimens
   ========================================================================== */
.swatches { display: grid; gap: var(--c-space-md); grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr)); }
.swatch { background: var(--c-surface); box-shadow: var(--c-shadow-sheet); }
.swatch__chip { height: 3.5rem; border-bottom: 0.75px solid var(--c-line); }
.swatch__meta { padding: var(--c-space-sm) var(--c-space-md); display: grid; gap: 2px; }
.swatch__meta code { font-size: var(--c-caption-size); color: var(--c-text-muted); }
.specimen { display: grid; gap: var(--c-space-lg); }
.specimen__row { display: grid; gap: var(--c-space-xs); }
.marks { display: flex; flex-wrap: wrap; gap: var(--c-space-lg); align-items: center; }
.marks__tile { width: 5rem; height: 5rem; }
.marks__tile--sm { width: 2rem; height: 2rem; }
.marks__ground { max-width: 100%; padding: var(--c-space-lg); background: var(--c-surface); box-shadow: var(--c-shadow-sheet); }
@media (min-width: 1280px) { .marks__ground { padding-left: calc(var(--c-page-hang) + var(--c-space-lg)); } }

/* Skip link */
.skip {
  position: absolute;
  left: var(--c-space-md);
  top: calc(var(--c-space-md) * -10);
  z-index: 20;
  background: var(--c-surface);
  box-shadow: var(--c-shadow-sheet);
  border-radius: var(--c-radius-control);
  padding: var(--c-space-sm) var(--c-space-md);
}
.skip:focus { top: var(--c-space-md); }

@media (max-width: 719px) {
  .actions .btn { width: 100%; }
}

/* --- the lockup ---------------------------------------------------------- */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 22px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--c-mark);
}
.wordmark:hover { color: var(--c-mark); }
.wordmark .mark {
  width: 1.75em;
  height: auto;
  flex: none;
  overflow: visible;
}
.wordmark__word {
  font-family: var(--c-font-brand);
  font-weight: 600;
  letter-spacing: -0.05em;
  /* Fira's x-height sits a touch high next to the mark; nudge to optical centre. */
  margin-top: -0.08em;
  padding: 0 0.08em 0.12em 0;
  background: linear-gradient(180deg, var(--c-mark-top) 0%, var(--c-mark-mid) 55%, var(--c-mark-foot) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: var(--c-emboss);
}
.wordmark__text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}
.wordmark__tagline {
  font-family: var(--c-font-display);
  font-weight: 400;
  font-size: 0.48em;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--c-text-muted);
  margin-top: -0.3em;
}
/* The home page's large logo. On a wide page the mark hangs in the margin, so the word lines up with the text. */
.wordmark--hero { position: relative; font-size: clamp(32px, 4vw, 47px); }
.wordmark--hero .mark { width: 2.35em; }
@media (min-width: 1280px) {
  .wordmark--hero .mark { position: absolute; right: calc(100% + 8px); top: 50%; width: 125px; transform: translateY(-46%); }
}

.lookup__row { display: flex; flex-wrap: wrap; gap: var(--c-space-md); align-items: flex-end; max-width: 44rem; }
.lookup__field { flex: 1 1 16rem; display: flex; flex-direction: column; gap: var(--c-space-xs); min-width: 0; }
.lookup__field input { font: inherit; font-size: 1.1rem; padding: 11px var(--c-space-md); border: 0; border-radius: var(--c-radius-control); background: var(--c-surface); color: var(--c-text); box-shadow: var(--c-shadow-press); }
.lookup__field input:focus-visible { outline: 2px solid var(--c-mark); outline-offset: 2px; }
.lookup__examples { display: flex; flex-direction: column; gap: var(--c-space-sm); margin-top: var(--c-space-lg); }
.lookup__choices { display: flex; flex-wrap: wrap; gap: var(--c-space-sm); }
.lookup__out { margin-top: var(--c-space-xl); display: grid; gap: var(--c-space-md); }
.lookup__out:empty { margin-top: 0; }
.lookup__thing { font-family: var(--c-title-family); font-size: 1.5rem; line-height: 1.2; }
.lookup__chip { font: var(--c-ui-weight) var(--c-small-size)/1.3 var(--c-ui-family); background: none; border: 0; box-shadow: inset 0 0 0 0.75px var(--c-rule); border-radius: var(--c-radius-control); padding: 6px var(--c-space-md); color: var(--c-action); cursor: pointer; text-align: left; transition: background-color var(--c-dur-quick); }
.lookup__chip:hover { background-color: var(--c-wash); }
.lookup__chip[aria-pressed="true"] { color: var(--c-on-action); background-color: var(--c-action); box-shadow: none; }
/* The sheet: a row per property, its values beside it, like a folder of files. */
.lk { --lk-name: minmax(9rem, 12rem); background: var(--c-surface); box-shadow: var(--c-shadow-sheet); padding: var(--c-space-sm) var(--c-space-lg) var(--c-space-md); font-variant-numeric: lining-nums; }
.lk__head, .lk-row { display: grid; grid-template-columns: var(--lk-name) minmax(0, 1fr); column-gap: var(--c-space-lg); }
.lk__head { padding: var(--c-space-xs) 0 var(--c-space-sm); border-bottom: 0.75px solid var(--c-rule); }
.lk-row { padding: var(--c-space-sm) 0; border-top: 0.75px solid var(--c-line); align-items: baseline; }
.lk-row:first-of-type { border-top: 0; }
.lk-row__name { display: flex; align-items: baseline; gap: var(--c-space-xs); min-width: 0; color: var(--c-text-muted); font-size: var(--c-small-size); overflow-wrap: anywhere; }
.lk-fold { flex: none; width: 1rem; height: 1rem; margin-left: -1rem; padding: 0; border: 0; background: none; color: var(--c-text-faint); cursor: pointer; position: relative; top: 1px; }
.lk-fold::before { content: ""; display: block; margin: 3px auto 0; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform var(--c-dur-quick); }
.lk-fold[aria-expanded="true"]::before { transform: rotate(90deg); }
.lk-fold:hover { color: var(--c-action); }
.lk-count { color: var(--c-text-faint); font-size: var(--c-caption-size); white-space: nowrap; }
.lk-row--folded .lk-row__values { display: none; }
.lk-row__values { display: grid; gap: var(--c-space-xs); min-width: 0; }
.lk-val { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--c-space-md); align-items: baseline; }
.lk-val__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--c-space-xs) var(--c-space-sm); min-width: 0; overflow-wrap: anywhere; }
.lk-val__text { font-size: 1.05rem; }
.lk-val__tag { color: var(--c-text-faint); font-size: var(--c-caption-size); }
.lk-val__meta { color: var(--c-text-faint); font-size: var(--c-caption-size); text-align: right; max-width: 16rem; }
/* The service's status words (#150), as small text: agreed in green, the three to check in the rubric, record plain. */
.lk-status { white-space: nowrap; }
.lk-status--agreed { color: var(--c-action); }
.lk-status--contested, .lk-status--stale, .lk-status--single-source { color: var(--c-highlight); }
.lk-val__why { grid-column: 1 / -1; margin: 2px 0 var(--c-space-xs); font-size: var(--c-caption-size); color: var(--c-text-muted); }
.lk-why { display: grid; grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr); gap: 2px var(--c-space-md); margin: 0; padding-left: 1.1rem; }
.lk-why dt { color: var(--c-text-faint); }
.lk-why dd { margin: 0; overflow-wrap: anywhere; }
.lk-src { font: inherit; padding: 0; border: 0; background: none; color: var(--c-action); cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.lk-src[aria-expanded="true"] { text-decoration-style: solid; }
.lk-val__sources { grid-column: 1 / -1; margin: 2px 0 var(--c-space-xs); padding-left: 1.1rem; font-size: var(--c-caption-size); color: var(--c-text-muted); }
.lk-val__sources li { overflow-wrap: anywhere; }
.lk-more, .lk-note { margin: var(--c-space-xs) 0 0; color: var(--c-text-faint); font-size: var(--c-caption-size); }
.lk-note { margin-top: var(--c-space-md); max-width: 44rem; }
@media (max-width: 719px) {
  .lk { padding-inline: var(--c-space-md); }
  .lk__head, .lk-row { grid-template-columns: 1fr; row-gap: var(--c-space-xs); }
  .lk__head .t-label:last-child { display: none; }
  .lk-fold { margin-left: 0; }
  .lk-val { grid-template-columns: 1fr; }
  .lk-val__meta { text-align: left; max-width: none; }
  .lk-why { grid-template-columns: 1fr; gap: 0; padding-left: 0; }
  .lk-why dd { margin-bottom: var(--c-space-xs); }
}


/* --- figures (src/figures.mjs) -------------------------------------------- */
body { counter-reset: fig; }
.fig figcaption { margin-top: 10px; max-width: var(--c-page-text); font: var(--c-caption-weight) var(--c-caption-size)/var(--c-caption-line) var(--c-caption-family); color: var(--c-text-muted); text-wrap: pretty; }
.fig figcaption::before {
  counter-increment: fig;
  content: "Fig. " counter(fig);
  margin-right: var(--c-space-sm);
  font: var(--c-label-weight) var(--c-label-size)/var(--c-label-line) var(--c-label-family);
  font-size: var(--c-caption-size);
  font-variant-caps: all-small-caps; letter-spacing: var(--c-label-tracking);
  color: var(--c-highlight);
}
.fig--plate { max-width: 852px; }
/* The deck's illustrations carry their own rounded sheet, so the shadow follows its corners. */
.fig--plate img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: var(--c-shadow-sheet); }

/*
 * The hub: the one figure that loops (Micah, 2026-11-04). With a dash and a gap each
 * as long as the path, an offset of 3 hides the line, 2 shows all of it and 1 hides it
 * again, so the same line draws and then erases in one direction. Offsets stay positive
 * because Safari mishandles negative ones. The plain styles are the last moment of the
 * story, so reduced motion shows the agents and sources meeting at Conscius.
 */
.hub svg { display: block; width: 100%; height: auto; overflow: visible; }
.hub__web, .hub__spoke { fill: none; stroke-dasharray: 1; }
.hub__web { stroke: var(--c-text-faint); stroke-width: 0.75; stroke-dashoffset: 1; }
.hub__spoke { stroke: var(--c-mark); stroke-width: 1.5; stroke-dashoffset: 2; }
.hub__dot { fill: var(--c-text); }
.hub__node { fill: var(--c-mark); }
.hub__text { font: 400 15px var(--c-font-display); fill: var(--c-text-muted); }
.hub__name { fill: var(--c-action); }
@keyframes hub-web { 0% { stroke-dashoffset: 3; } 14%, 24% { stroke-dashoffset: 2; } 38%, 100% { stroke-dashoffset: 1; } }
@keyframes hub-center { 0%, 40% { opacity: 0; } 45%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes hub-spoke { 0%, 44% { stroke-dashoffset: 3; } 58%, 86% { stroke-dashoffset: 2; } 96%, 100% { stroke-dashoffset: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .hub__web { animation: hub-web 12000ms var(--c-ease-draw) var(--d) infinite backwards; }
  .hub__spoke { animation: hub-spoke 12000ms var(--c-ease-draw) var(--d) infinite backwards; }
  .hub__center { animation: hub-center 12000ms linear infinite backwards; }
}

/* The evidence figure: ink lines and dots, one green stroke for the relation being explained. */
.ev svg { display: block; width: 100%; height: auto; overflow: visible; }
.ev__line { fill: none; stroke: var(--c-text-faint); stroke-width: 1; stroke-dasharray: 1; }
.ev__line--copy { stroke: var(--c-rule); stroke-width: 0.75; }
.ev__line--join { stroke: var(--c-mark); stroke-width: 1.5; }
.ev__dot { fill: var(--c-text); }
.ev__dot--open { fill: var(--c-bg); stroke: var(--c-text-faint); stroke-width: 1; }
.ev__text { font: 400 15px var(--c-font-display); fill: var(--c-text-muted); }
.ev__status { font-style: italic; }
.ev__status--before { opacity: 0; }
.ev__status--after { fill: var(--c-action); }
@keyframes ev-draw { from { stroke-dashoffset: 1; } }
@keyframes ev-settle { from { opacity: 0; } }
@keyframes ev-before { 0%, 28% { opacity: 0; } 34%, 82% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes ev-after { 0%, 84% { opacity: 0; } 92%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ev { view-timeline: --ev block; }
    .ev__line, .ev__settle, .ev__status--before, .ev__status--after { animation-timeline: --ev; animation-fill-mode: both; animation-duration: auto; animation-range: var(--from) var(--to); }
    .ev__line { animation-name: ev-draw; animation-timing-function: var(--c-ease-draw); }
    .ev__settle { animation-name: ev-settle; animation-timing-function: var(--c-ease-settle); }
    .ev__status--before, .ev__status--after { --from: cover 10%; --to: cover 45%; animation-timing-function: linear; }
    .ev__status--before { animation-name: ev-before; }
    .ev__status--after { animation-name: ev-after; }
  }
}

/* The chart: the same three agents, with and without a shared record. */
.net__groups { display: grid; gap: var(--c-space-lg) var(--c-space-xl); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); margin-bottom: var(--c-space-md); }
.net__label { display: block; margin-bottom: var(--c-space-sm); }
.net__rows { display: grid; gap: var(--c-space-sm); }
.net__row { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); align-items: center; font: var(--c-caption-weight) var(--c-caption-size)/var(--c-caption-line) var(--c-caption-family); }
.net__who { color: var(--c-text-faint); }
.net__amount { display: flex; align-items: center; gap: var(--c-space-sm); min-width: 0; }
.net__bar { flex: none; display: block; height: 10px; width: calc((100% - 5rem) * var(--w)); min-width: 9px; background: var(--c-rule); transform-origin: left; }
.net__value { white-space: nowrap; color: var(--c-text-muted); }
.net__group--with .net__label, .net__group--with .net__value { color: var(--c-action); }
.net__group--with .net__bar { background: var(--c-mark); }
@keyframes net-bar-00 { 0%, 0% { transform: scaleX(0); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); } 26.5%, 100% { transform: none; } }
@keyframes net-value-00 { 0%, 23.5% { opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); } 35.3%, 100% { opacity: 1; } }
@keyframes net-bar-01 { 0%, 5.9% { transform: scaleX(0); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); } 32.4%, 100% { transform: none; } }
@keyframes net-value-01 { 0%, 29.4% { opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); } 41.2%, 100% { opacity: 1; } }
@keyframes net-bar-02 { 0%, 11.8% { transform: scaleX(0); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); } 38.2%, 100% { transform: none; } }
@keyframes net-value-02 { 0%, 35.3% { opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); } 47.1%, 100% { opacity: 1; } }
@keyframes net-bar-10 { 0%, 41.2% { transform: scaleX(0); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); } 67.6%, 100% { transform: none; } }
@keyframes net-value-10 { 0%, 64.7% { opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); } 76.5%, 100% { opacity: 1; } }
@keyframes net-bar-11 { 0%, 79.4% { transform: scaleX(0); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); } 85.3%, 100% { transform: none; } }
@keyframes net-value-11 { 0%, 82.4% { opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); } 94.1%, 100% { opacity: 1; } }
@keyframes net-bar-12 { 0%, 85.3% { transform: scaleX(0); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); } 91.2%, 100% { transform: none; } }
@keyframes net-value-12 { 0%, 88.2% { opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); } 100%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .net { view-timeline: --net block; }
    .net__bar, .net__value { animation-timeline: --net; animation-range: entry 30% cover 40%; animation-fill-mode: both; animation-duration: auto; }
    .net__group:nth-child(1) .net__row:nth-child(1) .net__bar { animation-name: net-bar-00; }
    .net__group:nth-child(1) .net__row:nth-child(1) .net__value { animation-name: net-value-00; }
    .net__group:nth-child(1) .net__row:nth-child(2) .net__bar { animation-name: net-bar-01; }
    .net__group:nth-child(1) .net__row:nth-child(2) .net__value { animation-name: net-value-01; }
    .net__group:nth-child(1) .net__row:nth-child(3) .net__bar { animation-name: net-bar-02; }
    .net__group:nth-child(1) .net__row:nth-child(3) .net__value { animation-name: net-value-02; }
    .net__group:nth-child(2) .net__row:nth-child(1) .net__bar { animation-name: net-bar-10; }
    .net__group:nth-child(2) .net__row:nth-child(1) .net__value { animation-name: net-value-10; }
    .net__group:nth-child(2) .net__row:nth-child(2) .net__bar { animation-name: net-bar-11; }
    .net__group:nth-child(2) .net__row:nth-child(2) .net__value { animation-name: net-value-11; }
    .net__group:nth-child(2) .net__row:nth-child(3) .net__bar { animation-name: net-bar-12; }
    .net__group:nth-child(2) .net__row:nth-child(3) .net__value { animation-name: net-value-12; }
  }
}


/* --- the record demo (src/record-demo.mjs) -------------------------------- */
.rec__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rec__asks { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--c-space-lg); }
.rec__ask { cursor: pointer; padding: var(--c-space-sm) var(--c-space-md); border-radius: var(--c-radius-control); box-shadow: inset 0 0 0 0.75px var(--c-line); font: var(--c-ui-weight) var(--c-ui-size)/var(--c-ui-line) var(--c-ui-family); color: var(--c-text-muted); transition: color var(--c-dur-quick), background-color var(--c-dur-quick); }
.rec__ask:hover { color: var(--c-action); }

#rec-0:checked ~ .rec__panels .rec__panel--0 { display: block; }
#rec-0:checked ~ .rec__asks .rec__ask--0 { color: var(--c-text); background: var(--c-surface); box-shadow: var(--c-shadow-sheet), inset 0 0 0 0.75px var(--c-line); }
#rec-0:focus-visible ~ .rec__asks .rec__ask--0 { outline: 2px solid var(--c-mark); outline-offset: 2px; }
#rec-1:checked ~ .rec__panels .rec__panel--1 { display: block; }
#rec-1:checked ~ .rec__asks .rec__ask--1 { color: var(--c-text); background: var(--c-surface); box-shadow: var(--c-shadow-sheet), inset 0 0 0 0.75px var(--c-line); }
#rec-1:focus-visible ~ .rec__asks .rec__ask--1 { outline: 2px solid var(--c-mark); outline-offset: 2px; }
#rec-2:checked ~ .rec__panels .rec__panel--2 { display: block; }
#rec-2:checked ~ .rec__asks .rec__ask--2 { color: var(--c-text); background: var(--c-surface); box-shadow: var(--c-shadow-sheet), inset 0 0 0 0.75px var(--c-line); }
#rec-2:focus-visible ~ .rec__asks .rec__ask--2 { outline: 2px solid var(--c-mark); outline-offset: 2px; }
.rec__panels { max-width: 44rem; background: var(--c-surface); box-shadow: var(--c-shadow-sheet); }
.rec__panel { display: none; padding: var(--c-space-lg) 32px 32px; }
@media (max-width: 719px) { .rec__panel { padding: 22px 20px; } }
.rec__head { display: flex; flex-wrap: wrap; gap: var(--c-space-sm) var(--c-space-md); justify-content: space-between; align-items: baseline; }
.rec__key { font: var(--c-ui-weight) var(--c-ui-size)/var(--c-ui-line) var(--c-ui-family); font-size: var(--c-small-size); color: var(--c-text-muted); }
.rec__sep { color: var(--c-text-faint); }
/* A status: small caps in a fine outline. Green for agreed, rubric where a second look is wanted. */
.rec__status {
  --tone: var(--c-text-muted);
  display: inline-flex;
  padding: 1px var(--c-space-sm) 3px;
  border-radius: var(--c-radius-control);
  font: var(--c-label-weight) var(--c-label-size)/var(--c-label-line) var(--c-label-family);
  font-size: var(--c-caption-size);
  font-variant-caps: all-small-caps; letter-spacing: var(--c-label-tracking);
  color: var(--tone);
  box-shadow: inset 0 0 0 0.75px var(--tone);
  white-space: nowrap;
}
.rec__panel--agreed { --status: var(--c-action); }
.rec__panel--single-source, .rec__panel--contested { --status: var(--c-highlight); }
.rec__panel--record, .rec__panel--stale { --status: var(--c-text-muted); }
.rec__panel .rec__status { --tone: var(--status); }
.rec__claim { display: flex; flex-wrap: wrap; gap: var(--c-space-sm) var(--c-space-lg); align-items: center; justify-content: space-between; margin-top: var(--c-space-md); }
.rec__values { flex: 1 1 18rem; min-width: 0; }
.rec__value { font: 400 var(--c-headline-min)/1.15 var(--c-font-display); font-size: clamp(var(--c-title-min), 6vw, var(--c-display-min)); font-variant-numeric: lining-nums; }
.rec__value .t-ink { display: inline-block; }
.rec__values--many .rec__value { font-size: var(--c-title-min); }
.rec__scope { font: var(--c-small-weight) var(--c-small-size)/var(--c-small-line) var(--c-small-family); font-style: italic; font-variant-numeric: oldstyle-nums; color: var(--c-text-muted); white-space: nowrap; }
.rec__reason { font: var(--c-small-weight) var(--c-small-size)/var(--c-small-line) var(--c-small-family); font-style: italic; color: var(--status); }
.rec__lines { flex: none; display: block; width: 7rem; height: auto; overflow: visible; }
.rec__line { fill: none; stroke: var(--c-text-faint); stroke-width: 1; stroke-dasharray: 1; }
.rec__line--join { stroke: var(--c-mark); stroke-width: 1.5; }
.rec__node { fill: var(--status); }
.rec__facets { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--c-space-sm) var(--c-space-lg); margin-top: 24px; padding-top: 18px; border-top: 0.75px solid var(--c-line); font: var(--c-small-weight) var(--c-small-size)/var(--c-small-line) var(--c-small-family); }
.rec__facet { display: contents; }
.rec__facet dt { font: var(--c-label-weight) var(--c-label-size)/var(--c-label-line) var(--c-label-family); font-size: var(--c-caption-size); line-height: 1.6; font-variant-caps: all-small-caps; letter-spacing: var(--c-label-tracking); color: var(--c-text-faint); }
.rec__facet ul { list-style: none; padding: 0; margin: 0; }
.rec__facet a { overflow-wrap: anywhere; }
.rec__seen { color: var(--c-text-faint); white-space: nowrap; }
@media (max-width: 719px) {
  .rec__facets { display: block; }
  .rec__facet { display: block; margin-top: var(--c-space-sm); }
  .rec__facet:first-child { margin-top: 0; }
}
.rec__next { display: flex; flex-wrap: wrap; gap: var(--c-space-xs) var(--c-space-md); align-items: baseline; margin-top: 20px; padding-top: var(--c-space-md); border-top: 0.75px solid var(--c-line); }
.rec__next-label { font: var(--c-label-weight) var(--c-label-size)/var(--c-label-line) var(--c-label-family); font-size: var(--c-caption-size); font-variant-caps: all-small-caps; letter-spacing: var(--c-label-tracking); color: var(--c-highlight); white-space: nowrap; }
.rec__next-text { flex: 1 1 20em; min-width: 0; }
.rec__flows { display: grid; gap: var(--c-space-lg) var(--c-space-xl); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); margin-top: var(--c-space-xxl); max-width: 44rem; }
.rec__flow:last-child .t-label { color: var(--c-action); }
.rec__steps { counter-reset: flow; display: flex; flex-wrap: wrap; gap: var(--c-space-xs) 0; margin-block: var(--c-space-xs) var(--c-space-sm); }
.rec__steps li { counter-increment: flow; }
.rec__steps li::before { content: counter(flow); margin-right: 6px; color: var(--c-text-faint); }
.rec__flow:last-child .rec__steps li::before { color: var(--c-action); }
.rec__steps li:not(:last-child)::after { content: "\2192"; margin-inline: 10px; color: var(--c-rule); }
@keyframes rec-draw { from { stroke-dashoffset: 1; } }
@keyframes rec-settle { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .rec__line { animation: rec-draw var(--c-dur-draw) var(--c-ease-draw) var(--d) backwards; }
  .rec__node { animation: rec-settle var(--c-dur-step) var(--c-ease-settle) var(--d) backwards; }
}


/* --- the tool selector (src/clients.mjs) ----------------------------------- */
.clients__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.clients__pills { display: flex; flex-wrap: wrap; gap: var(--c-space-sm); margin-bottom: var(--c-space-lg); }
.clients__pill { cursor: pointer; padding: var(--c-space-sm) var(--c-space-md); border-radius: var(--c-radius-control); box-shadow: inset 0 0 0 0.75px var(--c-rule); font: var(--c-ui-weight) var(--c-ui-size)/var(--c-ui-line) var(--c-ui-family); color: var(--c-action); transition: background-color var(--c-dur-quick), color var(--c-dur-quick); }
.clients__pill:hover { background-color: var(--c-wash); }
.clients__pills--links { margin-bottom: 0; }
.clients__pills--links .clients__pill { text-decoration: none; }

#client-0:checked ~ .clients__panels .clients__panel--0 { display: block; }
#client-0:checked ~ .clients__pills .clients__pill--0 { color: var(--c-on-action); background-color: var(--c-action); box-shadow: var(--c-shadow-plate); }
#client-0:focus-visible ~ .clients__pills .clients__pill--0 { outline: 2px solid var(--c-mark); outline-offset: 2px; }
#client-1:checked ~ .clients__panels .clients__panel--1 { display: block; }
#client-1:checked ~ .clients__pills .clients__pill--1 { color: var(--c-on-action); background-color: var(--c-action); box-shadow: var(--c-shadow-plate); }
#client-1:focus-visible ~ .clients__pills .clients__pill--1 { outline: 2px solid var(--c-mark); outline-offset: 2px; }
#client-2:checked ~ .clients__panels .clients__panel--2 { display: block; }
#client-2:checked ~ .clients__pills .clients__pill--2 { color: var(--c-on-action); background-color: var(--c-action); box-shadow: var(--c-shadow-plate); }
#client-2:focus-visible ~ .clients__pills .clients__pill--2 { outline: 2px solid var(--c-mark); outline-offset: 2px; }
#client-3:checked ~ .clients__panels .clients__panel--3 { display: block; }
#client-3:checked ~ .clients__pills .clients__pill--3 { color: var(--c-on-action); background-color: var(--c-action); box-shadow: var(--c-shadow-plate); }
#client-3:focus-visible ~ .clients__pills .clients__pill--3 { outline: 2px solid var(--c-mark); outline-offset: 2px; }
#client-4:checked ~ .clients__panels .clients__panel--4 { display: block; }
#client-4:checked ~ .clients__pills .clients__pill--4 { color: var(--c-on-action); background-color: var(--c-action); box-shadow: var(--c-shadow-plate); }
#client-4:focus-visible ~ .clients__pills .clients__pill--4 { outline: 2px solid var(--c-mark); outline-offset: 2px; }
#client-5:checked ~ .clients__panels .clients__panel--5 { display: block; }
#client-5:checked ~ .clients__pills .clients__pill--5 { color: var(--c-on-action); background-color: var(--c-action); box-shadow: var(--c-shadow-plate); }
#client-5:focus-visible ~ .clients__pills .clients__pill--5 { outline: 2px solid var(--c-mark); outline-offset: 2px; }
#client-6:checked ~ .clients__panels .clients__panel--6 { display: block; }
#client-6:checked ~ .clients__pills .clients__pill--6 { color: var(--c-on-action); background-color: var(--c-action); box-shadow: var(--c-shadow-plate); }
#client-6:focus-visible ~ .clients__pills .clients__pill--6 { outline: 2px solid var(--c-mark); outline-offset: 2px; }
#client-7:checked ~ .clients__panels .clients__panel--7 { display: block; }
#client-7:checked ~ .clients__pills .clients__pill--7 { color: var(--c-on-action); background-color: var(--c-action); box-shadow: var(--c-shadow-plate); }
#client-7:focus-visible ~ .clients__pills .clients__pill--7 { outline: 2px solid var(--c-mark); outline-offset: 2px; }
.clients__panels { max-width: 44rem; }
.clients__panel { display: none; }
.clients__steps { counter-reset: client-step; display: grid; gap: var(--c-space-lg); }
.clients__step { counter-increment: client-step; display: grid; grid-template-columns: 2em minmax(0, 1fr); row-gap: var(--c-space-sm); }
.clients__step::before { content: counter(client-step) "."; color: var(--c-highlight); }
.clients__step > * { grid-column: 2; }
.clients__step > p { grid-row: 1; overflow-wrap: anywhere; }
.clients__step > .code { min-width: 0; }
.clients__docs { margin-top: var(--c-space-lg); padding-left: 2rem; }
.clients__note { margin-top: var(--c-space-lg); padding-left: 2rem; text-wrap: pretty; }


/* --- the analytics choice (src/analytics.mjs) ------------------------------- */
.consent { position: fixed; left: var(--c-space-md); right: var(--c-space-md); bottom: var(--c-space-md); z-index: 30; max-width: 44rem; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--c-space-md); padding: var(--c-space-md) var(--c-space-lg); background: var(--c-surface); box-shadow: var(--c-shadow-sheet); border-radius: var(--c-radius-control); }
.consent[hidden] { display: none; }
.consent p { flex: 1 1 18rem; margin: 0; font-size: var(--c-small-size); }
.consent__actions { display: flex; gap: var(--c-space-sm); }