@charset "utf-8";
/* ==========================================================================
   Ben Brown — portfolio
   "The Record": a hand-set engineering document. Hairlines, never boxes.
   No radius, no shadow, no gradient, no third colour, no keyframes.

   ACCENT ALLOWLIST — var(--accent) is permitted in these declarations only:
     1  a:hover / a:focus-visible          text-decoration-color
     2  :focus-visible                     outline
     3  .rec__id                           record kicker on each plate
     4  .step__n                           method numerals 01–08
     5  .arc__year                         the one vertical accent rule
     6  .fig-critical                      the single marked path in each figure
     7  .depth--shipped                    the word "Shipped" in the matrix
     8  .pull::before                      the rule above the About pull-quote
     9  ::selection                        (via --accent-wash)
    10  .index__link[aria-current]         active section in the masthead
    11  .register tr:hover .register__id   record ID on the hovered index row
   No accent fill exceeds 2px in its short dimension, except ::selection.
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */

:root {
  color-scheme: light dark;

  /* Ink & paper — ratios measured against --paper unless noted */
  --paper:       #f4f2ec; /* warm rag ground                                   */
  --paper-2:     #e9e5dc; /* banded sections                                   */
  --wash:        #dfdace; /* row hover, the one filled cell in a figure        */
  --ink:         #191816; /* 15.8:1                                            */
  --ink-2:       #45423c; /* 8.9:1                                             */
  --ink-3:       #635f58; /* 5.6:1 on paper, 5.0:1 on paper-2, 4.5:1 on wash   */
  --rule:        #d2ccc1; /* 1.4:1 — decorative separation only                */
  --rule-strong: #888175; /* 3.45:1 on paper, 3.07:1 on paper-2 — structural   */
  --accent:      #8c2e22; /* oxblood, 7.4:1 — annotation ink                   */
  --accent-wash: #efe0dc; /* ::selection ground only                           */

  /* Type */
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --t-display: clamp(2.25rem, 1.79rem + 2.04vw, 3.625rem);   /* 36 → 58 */
  --t-figure:  clamp(2rem, 1.72rem + 1.24vw, 2.875rem);      /* 32 → 46 */
  --t-h2:      clamp(1.5rem, 1.28rem + 0.97vw, 2.15rem);     /* 24 → 34 */
  --t-h3:      1.3125rem;                                    /* 21 fixed */
  --t-lead:    clamp(1.125rem, 1.07rem + 0.23vw, 1.28rem);   /* 18 → 20.5 */
  --t-body:    clamp(1.0625rem, 1.03rem + 0.14vw, 1.15rem);  /* 17 → 18.4 */
  --t-small:   clamp(0.9375rem, 0.92rem + 0.09vw, 1rem);     /* 15 → 16 */
  --t-mono:    clamp(0.75rem, 0.735rem + 0.07vw, 0.8125rem); /* 12 → 13 */
  --t-micro:   0.6875rem;                                    /* 11 fixed */

  /* Space */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 176px;

  /* Grid tracks — five values swapped per breakpoint, nothing else changes */
  --margin: 20px;
  --gutter: 0px;
  --rail: 0px;
  --note: 0px;
  --measure: 1fr;
  --edge-track: var(--margin);

  --masthead-h: 52px;
}

@media (min-width: 390px) { :root { --margin: 24px; } }

@media (min-width: 768px) {
  :root {
    --margin: 40px; --gutter: 28px; --rail: 112px; --note: 0px;
    --measure: 548px; --edge-track: minmax(var(--margin), 1fr);
    /* the note track is removed in this band, so the shell has three gutters */
    --shell-w: calc(var(--rail) + var(--measure) + var(--gutter) * 3);
    --t-h3: 1.375rem;
    --masthead-h: 56px;
  }
}

@media (min-width: 1024px) {
  :root {
    --margin: 48px; --gutter: 32px; --rail: 144px; --note: 160px;
    --measure: 560px;
    --shell-w: calc(var(--rail) + var(--measure) + var(--note) + var(--gutter) * 4);
    --t-h3: 1.5rem;
  }
}

@media (min-width: 1440px) {
  :root {
    --margin: 64px; --gutter: 40px; --rail: 176px; --note: 224px;
    --measure: 660px;
    --t-h3: 1.625rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:       #131312;
    --paper-2:     #1b1a18;
    --wash:        #232220;
    --ink:         #e9e6de;
    --ink-2:       #aba69c;
    --ink-3:       #918c83;
    --rule:        #2f2e2a;
    --rule-strong: #736c63; /* 3.59 / 3.36 / 3.07 */
    --accent:      #de7b66;
    --accent-wash: #2e211e;
  }
}

/* ---------------------------------------------------------- 2. FOUNDATION */

*, *::before, *::after { box-sizing: border-box; }

/* The design system, stated as a reset. These two strings appear once each. */
* { border-radius: 0; box-shadow: none; }

html {
  font-family: var(--sans);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, p, ol, ul, dl, dd, figure, table, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { max-width: 100%; }

::selection { background: var(--accent-wash); color: var(--ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Anything the browser may scroll to — anchor targets and anything focusable —
   must clear the sticky masthead, or reverse-tabbing hides the focused element. */
[id], a, button, summary, [tabindex] {
  scroll-margin-top: calc(var(--masthead-h) + var(--s5));
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink); padding: var(--s3) var(--s4);
  font-family: var(--mono); font-size: var(--t-mono);
  text-decoration: none;
}
.skip:focus { top: var(--s3); }

/* ------------------------------------------------------------- 3. TYPE */

h1, h2, h3, h4 { font-weight: 600; }

.display {
  font-size: var(--t-display);
  line-height: 1.06;
  letter-spacing: -0.021em;
  max-width: 22ch;
  margin-inline-start: -0.03em;
  text-wrap: pretty;
}

h2 {
  font-size: var(--t-h2);
  line-height: 1.14;
  letter-spacing: -0.015em;
  max-width: 24ch;
  text-wrap: balance;
}

h3 {
  font-size: var(--t-h3);
  line-height: 1.24;
  letter-spacing: -0.008em;
  max-width: 34ch;
  text-wrap: balance;
}

p { text-wrap: pretty; }
p + p { margin-block-start: var(--s5); }

em { font-style: italic; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 54ch;
}

/* Mono register — labels, values, captions, IDs. Never a paragraph. */
.label, .cap, .prov, .rec__id, .artifact, .colophon__set,
th, .register td, .matrix td, .results td, .depth,
.toc, .index, .foot__line, .colophon__index, .arc__year, .step__n {
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 500;
  line-height: 1.4;
  font-variant-numeric: tabular-nums lining-nums slashed-zero;
}

.label {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-inline-start: -0.05em;
  display: block;
}

.num {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-figure);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.num__suf { font-size: 0.6em; letter-spacing: 0; }

/* Links — the underline does the work; the text colour never changes. */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--rule-strong);
  transition: text-decoration-color 120ms linear;
}
a:hover, a:focus-visible {
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
}

.sep { color: var(--ink-3); padding-inline: 0.6em; }

/* ------------------------------------------------------------ 4. THE GRID */

.spread {
  display: grid;
  column-gap: var(--gutter);
  grid-template-columns:
    [full-start] var(--edge-track)
    [rail-start] var(--rail)
    [rail-end main-start] minmax(0, var(--measure))
    [main-end note-start] var(--note)
    [note-end] var(--edge-track)
    [full-end];
}

.spread > * { grid-column: main; min-width: 0; }
.rail  { grid-column: rail; }
.note  { grid-column: note; }
.full  { grid-column: full; }

/* Two widths beyond the measure:
   .wide  — tables, figures and lists. At 1024+ it starts at the text edge so the
            spine (drawn between rail and main) is never crossed by content.
   .wider — the three full-bleed bands, which sit outside .doc and have no spine. */
.wide  { grid-column: rail-start / note-end; }
.wider { grid-column: rail-start / note-end; }
@media (min-width: 1024px) { .wide { grid-column: main-start / note-end; } }

/* Between 768 and 1023 there is no note column, so the track is removed outright
   rather than left at 0px — a zero-width track still consumes two gutters. */
@media (min-width: 768px) and (max-width: 1023px) {
  .spread {
    grid-template-columns:
      [full-start] var(--edge-track)
      [rail-start] var(--rail)
      [rail-end main-start] minmax(0, var(--measure))
      [main-end note-start note-end] var(--edge-track)
      [full-end];
  }
}

/* Below the two-track breakpoint the rail folds into the flow. */
@media (max-width: 767px) {
  .rail { grid-column: main; }
}

/* The note column only exists at 1024+. Below that, notes become asides. */
@media (max-width: 1023px) {
  .note {
    grid-column: main;
    margin-block-start: var(--s5);
    padding-inline-start: var(--s4);
    border-inline-start: 2px solid var(--rule-strong);
  }
}

.note {
  max-width: 34ch;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-3);
}
.note p + p { margin-block-start: var(--s3); }
.note .label { margin-block-end: var(--s2); }

section { padding-block: var(--s8); }
@media (min-width: 768px)  { section { padding-block: var(--s9); } }
@media (min-width: 1024px) { section { padding-block: var(--s10); } }
@media (min-width: 1440px) { section { padding-block: var(--s11); } }

/* Rules — three weights. <hr> is never used. */
.rule-t {
  margin-block-start: var(--s5);
  border-block-start: 1px solid var(--rule);
  padding-block-start: var(--s5);
}
.rule-t--strong { border-block-start-color: var(--rule-strong); }

/* The spine: one background stripe, drawn once, never a per-section border.
   It only exists at 1024+, where the three-track spread exists and .wide content
   starts at the text edge — so the stripe always runs through empty margin. */
@media (min-width: 1024px) {
  .doc, .method, .workshop {
    --edge-w: max(var(--margin), (100% - var(--shell-w)) / 2);
    background-image: linear-gradient(var(--rule), var(--rule));
    background-size: 1px 100%;
    background-position: calc(var(--edge-w) + var(--rail) + var(--gutter) * 1.5 - 0.5px) 0;
    background-repeat: no-repeat;
  }
}

/* --------------------------------------------------------- 5. MASTHEAD */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-block-end: 1px solid var(--rule-strong);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: var(--masthead-h);
  padding-block: var(--s2);
  padding-inline: var(--margin);
}
.masthead__inner > * { min-width: 0; }

/* The masthead is a running head over the sheet, so its left and right edges must
   land on rail-start and note-end rather than on the viewport. Without this the
   name drifts hundreds of pixels away from the document on a wide monitor. */
@media (min-width: 768px) {
  .masthead__inner {
    padding-inline: calc(max(var(--margin), (100% - var(--shell-w)) / 2) + var(--gutter));
  }
}

.masthead__name {
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-transform: uppercase;
}
.masthead__name a { text-decoration: none; }
.masthead__name a:hover, .masthead__name a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
}
.masthead__role { font-weight: 500; }

.index__list { display: none; }

.index__link { text-decoration: none; white-space: nowrap; }
.index__n { color: var(--ink-3); margin-inline-end: 0.4em; }
.index__link:hover, .index__link:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  text-decoration-color: var(--rule-strong);
}
.index__link[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
  text-decoration-color: var(--accent);
}

/* Mobile index — native disclosure, no script, no overlay. */
.toc { position: relative; }
.toc__summary {
  list-style: none;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  padding: var(--s2) 0 var(--s2) var(--s2);
}
.toc__summary::-webkit-details-marker { display: none; }
.toc__summary::after { content: " +"; }
.toc[open] .toc__summary::after { content: " −"; }
.toc[open] .toc__summary { color: var(--ink); }

.toc__list {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--s2));
  z-index: 30;
  min-width: min(74vw, 300px);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  padding: var(--s3) var(--s4);
}
.toc__list a {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  justify-content: space-between;
  padding-block: var(--s2);
  text-decoration: none;
  border-block-end: 1px dotted var(--rule);
}
.toc__list li:last-child a { border-block-end: 0; }
.toc__list a:hover, .toc__list a:focus-visible { background: var(--wash); }
.toc__n { color: var(--ink-3); }

/* The inline index needs ~640px of its own before it stops fitting beside the
   name, so it does not appear until 1024. The numerals are the last thing to
   arrive, at 1280, where there is room for them without crowding the rules. */
@media (min-width: 1024px) {
  .toc { display: none; }
  .index__list { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; row-gap: var(--s1); }
  .index__list li + li {
    border-inline-start: 1px solid var(--rule-strong);
    margin-inline-start: var(--s3);
    padding-inline-start: var(--s3);
  }
  .index__n { display: none; }
}

@media (min-width: 1280px) {
  .index__n { display: inline; }
  .index__list li + li { margin-inline-start: var(--s4); padding-inline-start: var(--s4); }
}

/* ------------------------------------------------------------- 6. HERO */

.hero { padding-block: var(--s8) var(--s9); }
@media (min-width: 1024px) { .hero { padding-block: var(--s10) var(--s11); } }

.hero__meta > div { padding-block: var(--s3); border-block-start: 1px solid var(--rule); }
.hero__meta > div:first-child { border-block-start: 0; padding-block-start: 0; }
.hero__meta dd { font-size: var(--t-small); color: var(--ink-2); line-height: 1.4; }
.hero__meta .label { margin-block-end: var(--s1); }

@media (max-width: 767px) {
  .hero__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s5);
    margin-block-end: var(--s7);
  }
  .hero__meta > div:nth-child(2) { border-block-start: 0; padding-block-start: 0; }
}

.hero__links { margin-block-start: var(--s5); }
.hero__note p + p { margin-block-start: var(--s3); }

@media (min-width: 1024px) {
  .hero__note { align-self: end; }
}

/* ----------------------------------------------------------- 7. LEDGER */

.ledger {
  background: var(--paper-2);
  border-block: 1px solid var(--rule-strong);
  padding-block: var(--s7) var(--s6);
}
@media (min-width: 768px) { .ledger { padding-block: var(--s8) var(--s7); } }

.ledger__grid { display: grid; }

.ledger__cell .label { margin-block-end: var(--s3); }
.ledger__cell .num { display: block; margin-block-end: var(--s3); }
.ledger__q {
  font-size: var(--t-small);
  color: var(--ink-2);
  line-height: 1.45;
  margin-block-end: var(--s3);
}
.prov {
  color: var(--ink-3);
  max-width: 40ch;
  display: block;
}

@media (max-width: 767px) {
  .ledger__cell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--s4);
    align-items: baseline;
    padding-block: var(--s4);
    border-block-start: 1px solid var(--rule-strong);
  }
  .ledger__cell:first-child { border-block-start: 0; padding-block-start: 0; }
  .ledger__cell .label { grid-column: 1; grid-row: 1; margin-block-end: 0; }
  .ledger__cell .num { grid-column: 2; grid-row: 1; font-size: 1.75rem; margin-block-end: 0; }
  .ledger__cell .ledger__q { grid-column: 1 / -1; margin-block-start: var(--s2); }
  .ledger__cell .prov { grid-column: 1 / -1; }
}

@media (min-width: 768px) {
  .ledger__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger__cell {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    padding: var(--s5) var(--s5) var(--s5) 0;
  }
  .ledger__cell:nth-child(odd)  { border-inline-end: 1px solid var(--ink-3); padding-inline-end: var(--s6); }
  .ledger__cell:nth-child(even) { padding-inline-start: var(--s6); }
  .ledger__cell:nth-child(n + 3) { border-block-start: 1px solid var(--ink-3); }
}

@media (min-width: 1024px) {
  .ledger__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ledger__cell { padding-block: 0; }
  .ledger__cell:nth-child(n) {
    border-block-start: 0;
    border-inline-end: 0;
    border-inline-start: 1px solid var(--ink-3);
    padding-inline: var(--s5);
  }
  .ledger__cell:first-child { border-inline-start: 0; padding-inline-start: 0; }
  .ledger__cell:last-child { padding-inline-end: 0; }
}

/* ------------------------------------------------------ 8. SECTION HEADS */

.sec__head { margin-block-end: var(--s8); }
.sec__head .rail { margin-block-end: var(--s4); }
.sec__head .lead { margin-block-start: var(--s5); }

@media (min-width: 768px) {
  .sec__head .rail { margin-block-end: 0; padding-block-start: 0.5em; }
}

/* ------------------------------------------------- 9. THE INDEX REGISTER */

.register { width: 100%; border-collapse: collapse; text-align: left; }

.register th {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--ink-3);
  padding-block: var(--s2);
  border-block-end: 2px solid var(--ink);
  vertical-align: bottom;
}
.register td {
  padding-block: var(--s5);
  border-block-end: 1px solid var(--rule);
  vertical-align: baseline;
  color: var(--ink-2);
}
.register td a { color: var(--ink); font-family: var(--sans); font-size: var(--t-small); font-weight: 600; }
.register__id { color: var(--ink-3); }
.register tbody tr { transition: background-color 120ms linear; }
.register tbody tr:hover { background: var(--wash); }
.register tbody tr:hover .register__id { color: var(--accent); }

@media (min-width: 768px) {
  .register th, .register td { padding-inline-end: var(--s5); }
  .register th:last-child, .register td:last-child { padding-inline-end: 0; }
  .register th:first-child, .register td:first-child { width: 5.5rem; }
  .register tbody tr:hover td:first-child { padding-inline-start: var(--s2); }
}
/* Six columns will not fit at tablet width, so the stack column is dropped there.
   Below 768 the register is no longer a table, so it comes back. */
@media (min-width: 768px) and (max-width: 1023px) {
  .register .col-stack { display: none; }
}

/* ---------------------------------------------- 10. RESPONSIVE TABLE FOLD */

@media (max-width: 767px) {
  .register, .register tbody, .register tr, .register td,
  .results, .results tbody, .results tr, .results td,
  .matrix, .matrix tbody, .matrix tr, .matrix td { display: block; }

  .register thead, .results thead, .matrix thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }

  .register tr, .results tr, .matrix tr {
    border-block-start: 1px solid var(--rule-strong);
    padding-block: var(--s4);
  }
  .register tbody tr:first-child, .results tbody tr:first-child { border-block-start: 0; }

  .register td, .results td, .matrix td {
    display: block;
    position: relative;
    padding: var(--s1) 0 var(--s1) 6.5rem;
    border: 0;
    min-height: 1.5em;
  }
  /* Absolutely positioned rather than a grid item on purpose: a grid label turns
     every child of the cell into a separate track, so a cell holding two links
     and a comma scatters across two rows. Inline flow keeps the cell one run. */
  .register td::before, .results td::before, .matrix td::before {
    content: attr(data-label);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.3em;
    width: 6rem;
    font-size: var(--t-micro);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
  }
  /* Group rows already carry their own rule and padding on the <th>. */
  .matrix tbody tr.matrix__group { border-block-start: 0; padding-block: 0; }
  .register td:first-child, .results td:first-child { padding-block-start: 0; }
}

/* ------------------------------------------------------------ 11. PLATES */

.plate { padding-block-start: var(--s9); }
@media (min-width: 1024px) { .plate { padding-block-start: var(--s10); } }

.plate__head { margin-block-end: var(--s7); }
.plate__head > .rail { border-block-start: 2px solid var(--ink); padding-block-start: var(--s4); }
.plate__title { border-block-start: 2px solid var(--ink); padding-block-start: var(--s4); }

@media (max-width: 767px) {
  .plate__head > .rail { border-block-start: 0; padding-block-start: 0; }
  .plate__title { border-block-start: 0; padding-block-start: 0; }
  .plate__head { border-block-start: 2px solid var(--ink); padding-block-start: var(--s4); }
}

.rec__num {
  font-family: var(--sans);
  font-size: var(--t-figure);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--rule-strong);
  font-variant-numeric: tabular-nums lining-nums;
}

.rec__id {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-block-end: var(--s3);
}

.plate__title h3 { margin-block-end: var(--s5); max-width: 30ch; }

.plate__row { margin-block-end: var(--s7); }

/* Spec block: hung metadata in the rail. */
.spec > div { padding-block: var(--s3); border-block-start: 1px solid var(--rule); }
.spec > div:first-child { border-block-start: 0; padding-block-start: 0; }
.spec dd { font-family: var(--mono); font-size: var(--t-mono); color: var(--ink-2); line-height: 1.45; }
.spec .label { margin-block-end: var(--s1); }

@media (max-width: 767px) {
  .spec {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s5);
    margin-block-end: var(--s6);
    border-block: 1px solid var(--rule-strong);
    padding-block: var(--s4);
  }
  .spec > div { border-block-start: 0; padding-block: var(--s2); }
}

/* Sub-heads hang in the rail at 1024+, sit inline below it. */
.plate__sub { margin-block-end: var(--s4); }
@media (min-width: 768px) {
  h4.plate__sub.rail { padding-block-start: 0.45em; margin-block-end: 0; }
}

.plate__body > p:first-child { margin-block-start: 0; }
@media (min-width: 1024px) {
  .plate__body > p + p { text-indent: 1.25em; margin-block-start: var(--s3); }
}

.plate--tight .plate__row { margin-block-end: var(--s6); }

/* --------------------------------------------------------- 12. FIGURES */

.fig {
  margin-block: var(--s6) var(--s7);
  border-block-start: 1px solid var(--rule);
  padding-block-start: var(--s5);
  color: var(--ink-3);
}
.fig svg { display: block; width: 100%; height: auto; }

.fig-g { fill: none; stroke: currentColor; stroke-width: 1; }
.fig-g rect, .fig-g line, .fig-g polyline { vector-effect: non-scaling-stroke; }
.fig-fill { fill: var(--wash); }
.fig-critical { stroke: var(--accent); stroke-width: 2; }

.fig-t {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  fill: var(--ink);
  stroke: none;
}
.fig-t--edge { fill: var(--ink-3); letter-spacing: 0.02em; text-transform: none; }

.cap {
  display: block;
  color: var(--ink-3);
  margin-block-start: var(--s4);
  max-width: 62ch;
  text-align: left;
}

/* An 11px label in a 760-unit viewBox falls under 10px once the frame is narrower
   than ~700px, which happens on every single-column layout and at tablet width too.
   Rather than pick a breakpoint, the figure scrolls whenever it would shrink past
   that floor. The wrapper is focusable so the scroll is reachable without a mouse. */
.fig__scroll { overflow-x: auto; }
.fig__scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fig svg { min-width: 700px; }

/* --------------------------------------------------------- 13. RESULTS */

.results { width: 100%; border-collapse: collapse; text-align: left; margin-block-start: var(--s5); }
.results caption { text-align: left; color: var(--ink-3); margin-block-end: var(--s4); }
.results th {
  text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--t-micro);
  font-weight: 500; color: var(--ink-3);
  padding-block: var(--s2); border-block-end: 2px solid var(--ink); vertical-align: bottom;
}
.results td {
  padding-block: var(--s3); border-block-end: 1px solid var(--rule);
  color: var(--ink-2); vertical-align: baseline;
}
.results .fig-val { color: var(--ink); white-space: nowrap; }

@media (min-width: 768px) {
  .results th, .results td { padding-inline-end: var(--s5); }
  .results th:last-child, .results td:last-child { padding-inline-end: 0; }
  .results th:nth-child(2), .results td:nth-child(2) { width: 30%; }
}
@media (max-width: 767px) {
  .results .fig-val { white-space: normal; color: var(--ink); }
}

/* ------------------------------------------------------------ 14. METHOD */

.method { background-color: var(--paper-2); border-block: 1px solid var(--rule-strong); }


.steps__group {
  border-block-start: 1px solid var(--ink-3);
  padding-block-start: var(--s4);
  margin-block-start: var(--s7);
}
.steps__group:first-child { margin-block-start: 0; }

.step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3);
  padding-block: var(--s6);
  border-block-start: 1px solid var(--rule);
}
.steps__group + .step { border-block-start: 0; padding-block-start: var(--s5); }

.step__n { color: var(--accent); letter-spacing: 0.08em; }
.step__body h3 { margin-block-end: var(--s3); }
.step__body p { max-width: 60ch; }

.artifact {
  color: var(--ink-3);
  margin-block-start: var(--s4);
  border-block-start: 1px dotted var(--rule-strong);
  padding-block-start: var(--s3);
  max-width: 60ch;
}

/* The verso/recto turn: the numerals and group labels move to the right margin,
   right-aligned so they land flush with the end of every rule in the section. */
@media (min-width: 1024px) {
  .step, .steps__group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--note);
    column-gap: var(--gutter);
  }
  .step__body { grid-column: 1; grid-row: 1; }
  .step__n { grid-column: 2; grid-row: 1; text-align: right; padding-block-start: 0.4em; }
  .steps__group .label { grid-column: 2; text-align: right; margin-inline-start: 0; }
}

/* Governance block */
.gov { margin-block-start: var(--s8); }
.gov .rail { margin-block-end: var(--s4); }
@media (min-width: 768px) { .gov .rail { margin-block-end: 0; padding-block-start: 0.5em; } }

.gov__body { border-block-start: 1px solid var(--ink-3); padding-block-start: var(--s5); }
.gov__line {
  font-size: var(--t-lead);
  line-height: 1.45;
  max-width: 46ch;
  margin-block-end: var(--s5);
}
.gov__list {
  margin-block-start: var(--s5);
  display: grid;
  gap: 0;
  font-size: var(--t-small);
  color: var(--ink-2);
}
.gov__list li { padding-block: var(--s3); border-block-start: 1px solid var(--rule); }
.gov__list li:first-child { border-block-start: 0; }
.gov__foot { margin-block-start: var(--s5); font-size: var(--t-small); color: var(--ink-3); }

@media (min-width: 768px) {
  .gov__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); }
  .gov__list li:nth-child(2) { border-block-start: 0; }
}

/* ------------------------------------------------------------- 15. STACK */

.legend { margin-block-end: var(--s5); }
.legend .label { margin-block-end: var(--s3); }
.legend dl > div { padding-block: var(--s2); border-block-start: 1px solid var(--rule); }
.legend dl > div:first-child { border-block-start: 0; }
.legend dt { font-family: var(--mono); font-size: var(--t-mono); font-weight: 500; }
.legend dd { font-size: var(--t-small); color: var(--ink-3); line-height: 1.4; }

.matrix { width: 100%; border-collapse: collapse; text-align: left; }
.matrix th {
  text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--t-micro);
  font-weight: 500; color: var(--ink-3); padding-block: var(--s2);
  border-block-end: 2px solid var(--ink); vertical-align: bottom;
}
.matrix__group th {
  border-block-end: 1px solid var(--rule-strong);
  border-block-start: 1px solid var(--rule-strong);
  color: var(--ink);
  padding-block: var(--s5) var(--s2);
  font-size: var(--t-mono);
  letter-spacing: 0.06em;
}
.matrix td {
  padding-block: var(--s3);
  border-block-end: 1px solid var(--rule);
  color: var(--ink-2);
  vertical-align: baseline;
  font-size: var(--t-small);
  font-family: var(--sans);
}
.matrix tbody tr { transition: background-color 120ms linear; }
.matrix tbody tr:not(.matrix__group):hover { background: var(--wash); }

.depth { text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--t-micro); white-space: nowrap; }
.depth--shipped  { color: var(--accent); }
.depth--proto    { color: var(--ink-2); }
.depth--designed { color: var(--ink-3); }

@media (min-width: 768px) {
  .matrix th, .matrix td { padding-inline-end: var(--s5); }
  .matrix th:last-child, .matrix td:last-child { padding-inline-end: 0; }
  .matrix td:nth-child(2), .matrix th:nth-child(2) { width: 7.5rem; }
  .matrix td:nth-child(3), .matrix th:nth-child(3) { width: 8rem; font-family: var(--mono); font-size: var(--t-mono); }
}
@media (max-width: 767px) {
  .matrix__group th { display: block; padding-block: var(--s6) var(--s2); }
  .matrix td:nth-child(3) { font-family: var(--mono); font-size: var(--t-mono); }
}

/* --------------------------------------------------------------- 16. ARC */

/* Padding sits on the cells, not the row, so the accent rule on the year column
   runs unbroken from one entry to the next instead of dashing across the gaps. */
.arc__year, .arc__body { padding-block: var(--s6); }
.arc__item:first-child > .arc__year,
.arc__item:first-child > .arc__body { padding-block-start: 0; }

.arc__year { color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.arc__body h3 { margin-block-end: var(--s3); }
.arc__title-sub { font-family: var(--mono); font-size: var(--t-mono); color: var(--ink-3); margin-block-end: var(--s5); }

.arc__item--now .arc__body p:not(.arc__title-sub) { color: var(--ink); }
.arc__item--prior .arc__body h3 { font-size: var(--t-lead); }
.arc__item--prior .arc__body p { color: var(--ink-2); font-size: var(--t-small); }
.arc__item--early .arc__body h3 { font-size: var(--t-small); font-weight: 500; color: var(--ink-3); }

@media (max-width: 767px) {
  .arc__year, .arc__body {
    border-inline-start: 1px solid var(--accent);
    padding-inline-start: var(--s5);
  }
  .arc__year { padding-block-end: var(--s2); }
  .arc__body { padding-block-start: 0; }
}

@media (min-width: 768px) {
  /* The one vertical accent on the page. It lands exactly on the spine line, so
     the document's margin rule appears to turn oxblood for this section only. */
  .arc__year {
    text-align: right;
    padding-inline-end: calc(var(--gutter) / 2);
    border-inline-end: 1px solid var(--accent);
    margin-inline-end: calc(var(--gutter) / -2 - 0.5px);
  }
  .arc__body { position: relative; }
  .arc__body::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--gutter) / -2);
    inset-block-start: calc(var(--s6) + 0.7em);
    width: 7px;
    height: 1px;
    background: var(--rule-strong);
  }
  .arc__item:first-child > .arc__body::before { inset-block-start: 0.7em; }
}

/* ---------------------------------------------------------- 17. WORKSHOP */

.workshop { background-color: var(--paper-2); border-block: 1px solid var(--rule-strong); }
.workshop .plate { padding-block-start: 0; }
.workshop .fig, .workshop .spec > div { border-color: var(--ink-3); }

/* ------------------------------------------------------------- 18. ABOUT */

.about__leaf { position: relative; }

.about__prose {
  max-width: 58ch;
  line-height: 1.75;
}
.about__prose p + p { margin-block-start: var(--s5); }

.lead-in {
  font-family: var(--mono);
  font-size: 0.86em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-3);
}

.pull {
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--ink);
  max-width: 34ch;
  padding-block-start: var(--s4);
}
.pull::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--accent);
  margin-block-end: var(--s4);
}

@media (min-width: 1024px) {
  /* The pull-quote is the only text on the page that hangs left past the measure. */
  .pull { margin-inline-start: calc((var(--rail) + var(--gutter)) * -1); max-width: 40ch; }
}

.about__principles ol { margin-block-start: var(--s3); }
.about__principles li {
  padding-block: var(--s3);
  border-block-start: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t-mono);
  line-height: 1.5;
  color: var(--ink-2);
}
.pr__n { color: var(--ink-3); margin-inline-end: 0.6em; }

/* ---------------------------------------------------------- 19. COLOPHON */

.colophon {
  background: var(--paper-2);
  border-block-start: 2px solid var(--ink);
  padding-block: var(--s8);
}
@media (min-width: 1024px) { .colophon { padding-block: var(--s9); } }

.colophon__grid { display: grid; gap: var(--s7); }
@media (min-width: 768px) {
  .colophon__grid { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--s6); }
}

.colophon__col .label { margin-block-end: var(--s4); }
.colophon__email { font-size: var(--t-lead); line-height: 1.4; margin-block-end: var(--s4); }
.colophon__email a { overflow-wrap: anywhere; }
.colophon__links { font-size: var(--t-small); }
.colophon__say { font-size: var(--t-lead); line-height: 1.45; max-width: 32ch; color: var(--ink-2); }
.colophon__set { color: var(--ink-3); font-size: var(--t-micro); line-height: 1.6; max-width: 34ch; }

.colophon__pending {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 30ch;
}

/* .copy / .copy__status style the clipboard button, which currently ships
   commented out in index.html alongside the contact details. Both are kept so
   that restoring the block is a markup-only edit. */
.copy {
  font-family: var(--mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid var(--ink-3); /* a real control, so 3:1 is not enough: 5.05 / 5.20 */
  padding: var(--s1) var(--s2);
  margin-inline-start: var(--s3);
  cursor: pointer;
  vertical-align: middle;
  transition: color 120ms linear;
}
.copy:hover, .copy:focus-visible { color: var(--ink); }
.copy__status {
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink-3);
  margin-inline-start: var(--s2);
}

.colophon__index {
  margin-block-start: var(--s8);
  border-block-start: 1px solid var(--ink-3);
  padding-block-start: var(--s4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  color: var(--ink-3);
}
.colophon__index a { text-decoration-color: var(--rule-strong); }

/* ------------------------------------------------------------ 20. FOOTER */

.foot { border-block-start: 1px solid var(--rule); padding-block: var(--s6) var(--s7); }
.foot__line {
  display: flex;
  justify-content: space-between;
  gap: var(--s5);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------- 21. PREFERENCES */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

@media (forced-colors: active) {
  .fig-g { stroke: CanvasText; }
  .fig-critical { stroke: LinkText; }
  .register tbody tr:hover, .matrix tbody tr:hover { background: Highlight; color: HighlightText; }
  .copy { border-color: ButtonBorder; }
}

/* ----------------------------------------------------------- 22. PRINT */

@media print {
  @page { margin: 18mm 16mm; }

  :root {
    --paper: #fff; --paper-2: #fff; --wash: #fff;
    --ink: #000; --ink-2: #222; --ink-3: #444;
    --rule: #bbb; --rule-strong: #666; --accent: #000;
    --margin: 0px; --gutter: 16px; --rail: 100px; --note: 0px; --measure: 1fr;
    --edge-track: 0px;
  }

  body { font-size: 10.5pt; line-height: 1.45; background: #fff; }
  .masthead { position: static; border-block-end: 1px solid #000; }
  .toc, .index__list, .skip, .copy, .copy__status, .colophon__index, .hero__note { display: none; }
  .doc, .method, .workshop { background-image: none; }
  .method, .workshop, .ledger, .colophon { border-color: #666; }

  section { padding-block: 18pt; }
  .plate { padding-block-start: 24pt; break-before: page; }
  .plate__head, .fig, .results, .matrix, .step, .arc__item { break-inside: avoid; }
  .fig__scroll { overflow: visible; }
  .fig svg { min-width: 0; }
  h2, h3 { break-after: avoid; }

  a { text-decoration: none; }
  .plate__body a[href^="http"]::after,
  .colophon a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #444; }
  .rec__id { color: #000; }
}