/* =========================================================================
   SEO RUN BOOK — design system
   Written for this site alone. Shares no palette, no type pairing, no scale and
   no class name with any other project in this estate.

   THE SUBJECT DECIDES THE FORM. This is a free SEO training that consists of
   410 things to do, read by a practitioner with the site on one screen and
   their CMS on the other. So the page is drawn as a WORKING DOCUMENT:

     · a sheet with a real edge, laid on a tinted desk;
     · separation by HAIRLINE RULE, full width, rather than by boxes;
     · one recurring device, the SPINE — a fixed left gutter carrying the action
       number, the module letter or the field label, so every row on every page
       lands on one grid.

   RHYTHM. A document that is all one tone reads flat however well it is set, so
   the page alternates PAPER and MIDNIGHT: the argument is made on paper, the
   claims and the offers land on dark full-bleed bands. That alternation is the
   thing that stops a ruled document reading as a spreadsheet.

   COLOUR. Warm near-black ink on bone paper, a warm black for the dark bands,
   and one signal — RED LEAD, the colour of the pencil a proof is marked with.
   It is used for the numerals, the rules that matter and the links, and it has
   a light counterpart for use on the dark bands. No blue anywhere.

   TYPE. Three faces, none used elsewhere in this estate.
     Archivo, held narrow — a condensed grotesque, the voice of a form header —
       sets every heading and every button.
     Newsreader sets the reading text. The 410 explanations are long, and a
       serif drawn for screen reading carries them better than a UI sans.
     JetBrains Mono sets every numeral, letter-tab and label. The numbers are
       the substance here, so they get a face where 0 and O differ and every
       digit is the same width.

   SCALE. An 8 px baseline, stepped 8·16·24·40·64·96·144. Type on a 1.25 major
   third, opened at the top end so a headline can actually carry a page.

   ONE LIGHT WORLD, committed to: every colour is painted explicitly, there is
   no prefers-color-scheme block and no [data-theme] stamp.
   ========================================================================= */

:root {
  --desk:    #EAE7E1;   /* the surface the sheet lies on */
  --sheet:   #FDFCFA;   /* the paper */
  --tint:    #F4F2ED;   /* a lightly tinted sheet, for set-apart blocks */
  --ink:     #1A1817;   /* 17.3:1 on --sheet */
  --ink-2:   #4A4644;   /*  9.1:1 */
  --faint:   #6E6763;   /*  5.4:1 — the palest text allowed on paper */
  --mark:    #B3300F;   /*  6.1:1 — red lead. Numerals, rules that matter, links. */
  --mark-2:  #8F2610;   /*  8.4:1 — pressed / hovered */
  --wash:    #FAEDE8;   /* the row you are on */
  --rule:    #E3DFD8;   /* hairline */
  --rule-2:  #BFB8AE;   /* emphatic hairline */
  --rule-3:  #1A1817;   /* the heavy rule that opens a document */

  /* The dark band. A second, self-contained set — anything printed on midnight
     reads from these, never from the paper tokens. */
  --deep:      #1B1917;
  --deep-2:    #262220;   /* a panel inside the dark band */
  --deep-ink:  #F7F4F0;   /* 16.0:1 on --deep */
  --deep-ink-2:#C4BCB4;   /*  9.3:1 */
  --deep-faint:#968D86;   /*  5.4:1 */
  --deep-mark: #FF9E7A;   /*  8.7:1 — red lead, lifted for a dark ground */
  --deep-rule: rgba(255, 255, 255, .14);

  /* 8 px baseline, whole units only. */
  --u1: 8px;  --u2: 16px; --u3: 24px; --u4: 40px;
  --u5: 64px; --u6: 96px; --u7: 144px;

  /* 1.25 major third, 1rem = the reading size. */
  --ws: .12em;       /* Archivo held narrow narrows its space glyph too: "Garderdes", "COMMENTÇAAÉTÉ" */
  --t-xs:  0.7rem;   /* was .64rem = 10.2 px: the footer links and every label sat under 11 px */
  --t-sm:  0.8rem;
  --t-md:  1rem;
  --t-lg:  1.25rem;
  --t-xl:  clamp(1.45rem, 2.4vw, 1.5625rem);
  --t-2xl: clamp(1.75rem, 3.4vw, 1.953rem);
  --t-3xl: clamp(2.1rem, 4.6vw, 2.441rem);
  --t-4xl: clamp(2.6rem, 6.2vw, 3.4rem);
  --t-5xl: clamp(2.7rem, 6.4vw, 4.05rem);

  --sheet-w: 1160px;     /* the sheet */
  --col-w:   640px;      /* one column of reading text */
  --gutter:  clamp(20px, 4vw, 56px);
  --spine:   clamp(3.25rem, 6vw, 5rem);   /* the left gutter every row shares */

  --display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --text:    "Newsreader", Georgia, "Times New Roman", serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step: 140ms cubic-bezier(0.2, 0, 0, 1);
}

/* ------------------------------------------------------------------ base -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--desk); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--text);
  font-size: clamp(16.5px, .55vw + .78rem, 18.5px);
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 .9em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; color: var(--ink); }
:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }

/* Headings are Archivo held narrow — the width axis is the signature, so it is
   set once here and never varied per element. */
h1, h2, h3 {
  font-family: var(--display); word-spacing: var(--ws);
  font-variation-settings: "wdth" 88;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.005em;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: var(--t-4xl); font-weight: 700; line-height: 1.02; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); font-weight: 600; line-height: 1.22; }

/* The one label style. Mono, small, letter-spaced, sitting on its own line. */
.tag {
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--faint);
  margin: 0 0 var(--u1); display: block;
}
.tag a { color: var(--faint); border-bottom: 1px solid var(--rule); }
.tag a:hover { color: var(--mark); border-bottom-color: var(--mark); }
.tag i { font-style: normal; color: var(--mark); padding: 0 .35em; }
.tag [aria-current] { color: var(--ink); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ink); color: var(--sheet); padding: var(--u2) var(--u3); font-family: var(--display); word-spacing: var(--ws); }
.skip:focus { left: 0; }

/* ----------------------------------------------------------- the sheet -- */
/* The whole document is one sheet of paper on a desk. On a wide screen the desk
   shows either side; below the sheet width the paper simply fills the viewport
   and its side edges go away. */
.sheet {
  max-width: var(--sheet-w);
  margin-inline: auto;
  background: var(--sheet);
  border-inline: 1px solid var(--rule-2);
  min-height: 100vh;
}
@media (max-width: 1160px) { .sheet { border-inline: 0; } }

.wrap { padding-inline: var(--gutter); }
.wrap--col { max-width: calc(var(--col-w) + 2 * var(--gutter)); }

/* Bands are separated by a rule across the sheet, never by a change of colour —
   except the tinted band, which is used sparingly and keeps its rules. */
.band { padding-block: clamp(var(--u4), 5.5vw, var(--u5)); border-top: 1px solid var(--rule); }
.band:first-child { border-top: 0; }
.band--tint { background: var(--tint); }
.band--tight { padding-block: var(--u3); }
.band--open { padding-bottom: var(--u3); }

.band__hd { margin-bottom: var(--u4); max-width: 34ch; }
.band__hd--wide { max-width: none; }

/* A band that carries an argument on the left and the thing itself on the
   right. Without it a dark band is a paragraph floating in half a screen of
   black, which is the emptiness the client called blunt. */
.band__split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: var(--u5) var(--u6); align-items: start;
}
@media (max-width: 980px) { .band__split { grid-template-columns: 1fr; gap: var(--u4); } }

/* The two files, listed the way a manifest lists them: name, weight, purpose. */
.manifest { border-top: 1px solid var(--deep-rule); }
.manifest > a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--u2);
  padding: var(--u3) 0; border-bottom: 1px solid var(--deep-rule);
  transition: padding-left var(--step);
}
.manifest > a:hover { padding-left: var(--u2); }
.manifest > a:hover b { color: var(--deep-mark); }
.manifest b {
  font-family: var(--mono); font-weight: 500; font-size: calc(var(--t-md) * .92);
  color: var(--deep-ink); overflow-wrap: anywhere; transition: color var(--step);
}
.manifest s {
  text-decoration: none; font-family: var(--mono); font-size: var(--t-xs);
  color: var(--deep-faint); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.manifest span {
  grid-column: 1 / -1; font-size: calc(var(--t-md) * .88); color: var(--deep-ink-2);
}

/* The same manifest on paper. Same structure, paper tokens. */
.manifest--light { border-top-color: var(--rule-3); border-top-width: 2px; }
.manifest--light > a { border-bottom-color: var(--rule); }
.manifest--light b { color: var(--ink); }
.manifest--light > a:hover b { color: var(--mark); }
.manifest--light s { color: var(--faint); }
.manifest--light span { color: var(--ink-2); }
.manifest__ft {
  margin: var(--u3) 0 0; font-size: calc(var(--t-md) * .86); color: var(--faint);
}
.manifest__ft a { color: var(--mark); border-bottom: 1px solid rgba(179, 48, 15, .35); }
.band__hd p:not(.tag) { color: var(--ink-2); font-size: var(--t-md); margin: var(--u3) 0 0; max-width: 56ch; }
.band__hd p:not(.tag) + p:not(.tag) { margin-top: var(--u2); }

.lead { font-size: var(--t-lg); line-height: 1.5; color: var(--ink-2); max-width: 52ch; margin: var(--u3) 0 0; }

/* ------------------------------------------------------- the dark bands -- */
/* A ruled document that never changes tone reads flat, whatever the type is
   doing. These bands are where the page raises its voice: the numbers, the
   offer, the close. They are full-bleed to the sheet's edge, they carry their
   own colour set, and everything inside them reads from --deep-* — never from
   the paper tokens, which would be invisible here. */
.band--deep {
  background: var(--deep); color: var(--deep-ink-2);
  border-top: 0; padding-block: clamp(var(--u5), 6.5vw, var(--u6));
}
/* The hero is a dark ground too, so it reads from the same set. */
.band--deep h1, .band--deep h2, .band--deep h3,
.hero h1, .hero h2, .hero h3 { color: var(--deep-ink); }
.band--deep .tag { color: var(--deep-faint); }
.band--deep .tag i { color: var(--deep-mark); }
.band--deep .band__hd p:not(.tag) { color: var(--deep-ink-2); }
.band--deep .lead { color: var(--deep-ink-2); }
.band--deep a:not(.act-btn), .hero a:not(.act-btn) { color: var(--deep-mark); }
.band--deep .act-btn, .hero .act-btn { background: var(--mark); border-color: var(--mark); color: #FFF; }
.band--deep .act-btn:hover, .hero .act-btn:hover { background: var(--deep-mark); border-color: var(--deep-mark); color: var(--deep); }
.band--deep .act-btn--line, .hero .act-btn--line { background: none; color: var(--deep-ink); border-color: rgba(255, 255, 255, .3); }
.band--deep .act-btn--line:hover, .hero .act-btn--line:hover { background: none; color: var(--deep-mark); border-color: var(--deep-mark); }
.band--deep .note { border-color: var(--deep-rule); color: var(--deep-ink-2); }
.band--deep .note strong { color: var(--deep-ink); }
.band--deep .onward { color: var(--deep-mark); border-bottom-color: var(--deep-rule); }
.band--deep .onward:hover { color: var(--deep-ink); border-bottom-color: var(--deep-mark); }

/* ------------------------------------------------------------- the count -- */
/* What the training actually is, said in figures rather than in a sentence
   nobody finishes. Each figure is a fact from the data, not a marketing round
   number, and the label under it says what it counts. */
.figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--u4) var(--u3); margin-top: var(--u5);
  border-top: 1px solid var(--deep-rule); padding-top: var(--u4);
}
.figures div { min-width: 0; display: flex; flex-direction: column; }
.figures b {
  display: block; font-family: var(--display); word-spacing: var(--ws); font-variation-settings: "wdth" 84;
  font-weight: 700; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: .9;
  color: var(--deep-ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.figures b em { font-style: normal; color: var(--deep-mark); }
.figures span {
  display: block; margin-top: var(--u2); font-family: var(--mono);
  font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--deep-faint);
}
.figures p { margin: 6px 0 0; font-size: calc(var(--t-md) * .92); color: var(--deep-ink-2); max-width: 30ch; flex: 1; }

/* ---------------------------------------------------------- the masthead -- */
/* A printed manual's head: a heavy rule, the title on the left, the index on
   the right, and a second hairline under it. It does not float, it does not
   blur, it does not change on scroll — a sheet of paper has one head. */
.masthead { background: var(--sheet); border-bottom: 1px solid var(--rule-2); border-top: 4px solid var(--rule-3); }
.masthead__in { display: flex; align-items: stretch; gap: var(--u3); min-height: 66px; }

.wordmark {
  display: flex; align-items: center; gap: .55em; white-space: nowrap;
  font-family: var(--display); word-spacing: var(--ws); font-variation-settings: "wdth" 82;
  font-weight: 700; font-size: var(--t-md); letter-spacing: .01em;
  text-transform: uppercase; color: var(--ink); padding-block: var(--u2);
}
.wordmark::before {
  content: ""; width: 3px; height: 1.15em; background: var(--mark); flex: none;
}
.wordmark span { font-family: var(--mono); font-weight: 400; font-size: var(--t-xs); letter-spacing: .1em; color: var(--faint); text-transform: none; }

.menu { margin-left: auto; display: flex; align-items: stretch; }
.menu a, .menu button {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--display); word-spacing: var(--ws); font-variation-settings: "wdth" 90;
  font-size: var(--t-sm); font-weight: 500; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink-2);
  padding: 0 var(--u2); border: 0; border-bottom: 2px solid transparent;
  background: none; cursor: pointer; transition: color var(--step), border-color var(--step);
}
.menu a:hover, .menu button:hover { color: var(--mark); }
.menu a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--mark); }
.menu a:last-child { color: var(--sheet); background: var(--ink); margin: var(--u2) 0 var(--u2) var(--u2); padding-inline: var(--u3); }
.menu a:last-child:hover { background: var(--mark); color: var(--sheet); }

/* The sections live behind one control, because there are 23 of them. */
.drop { position: relative; display: flex; }
.drop__list {
  position: absolute; top: 100%; right: 0; z-index: 60; min-width: 380px;
  background: var(--sheet); border: 1px solid var(--rule-2); border-top: 2px solid var(--mark);
  padding: var(--u1) 0; display: none;
  /* 23 sections is taller than most viewports — the list scrolls inside itself
     rather than running off the bottom of the screen with no way to reach W. */
  max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain;
}
.drop.is-open .drop__list { display: block; }
.drop.is-open > button { color: var(--mark); border-bottom-color: var(--mark); }
.drop__list a {
  display: grid; grid-template-columns: 2ch minmax(0, 1fr) auto; gap: 0 var(--u2);
  align-items: baseline;
  padding: 7px var(--u3); border: 0; text-transform: none; letter-spacing: 0;
  font-family: var(--text); font-size: var(--t-sm); color: var(--ink-2);
}
.drop__list a:hover { background: var(--wash); color: var(--ink); }
.drop__list a b { font-family: var(--mono); font-weight: 500; color: var(--mark); }
.drop__list a span { min-width: 0; }
.drop__list a em { font-style: normal; font-family: var(--mono); font-size: var(--t-xs); color: var(--faint); white-space: nowrap; }

/* The mobile control is a labelled rule pair, not a hamburger. */
/* Two stacked rules, not a hamburger: it is the same hairline the whole page is
   made of. The flex container must stack them — laid out in a row (the default)
   they read as two dashes side by side. */
.opener {
  display: none; flex-direction: column; justify-content: center; align-items: flex-end;
  gap: 5px; margin-left: auto; padding: var(--u2) 0 var(--u2) var(--u2);
  background: none; border: 0; cursor: pointer;
}
.opener i { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform var(--step); }
body.is-open .opener i:first-child { transform: translateY(3.5px) rotate(12deg); }
body.is-open .opener i:last-child  { transform: translateY(-3.5px) rotate(-12deg); }

@media (max-width: 940px) {
  .opener { display: flex; }
  .menu {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 70;
    flex-direction: column; align-items: stretch; margin: 0;
    background: var(--sheet); border-bottom: 1px solid var(--rule-2);
    padding: var(--u2) var(--gutter) var(--u4); display: none;
  }
  body.is-open .menu { display: flex; }
  .masthead__in { position: relative; }
  .menu a, .menu button { justify-content: flex-start; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .menu a:last-child { margin: var(--u2) 0 0; padding: 14px var(--u3); justify-content: center; }
  .drop { display: block; }
  /* The 23 modules scroll inside the menu. Cut flat at the fold the last row
     looks broken rather than continued, so the list fades out at its own edge
     and says there is more. */
  .drop__list {
    position: static; min-width: 0; max-height: 58vh; border: 0;
    border-left: 2px solid var(--mark); padding: 0 0 var(--u2) var(--u2);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  }
  /* On a phone the three-column row squeezed a long module title against a
     right-aligned range that then had nowhere to go. Stack instead: letter and
     title on the first line, the count and the range under them, left-aligned
     with the title so both are actually readable. */
  .drop__list a {
    grid-template-columns: 2.2ch minmax(0, 1fr); gap: 2px var(--u2);
    padding: 10px 0; font-size: var(--t-md);
  }
  .drop__list a em {
    grid-column: 2; font-size: var(--t-xs); letter-spacing: .06em; color: var(--faint);
  }
  .drop__list a:hover, .drop__list a:focus-visible { background: none; }
  .drop__list a b { font-size: var(--t-md); }
}

/* --------------------------------------------------- the interior opener -- */
/* Every page but the home opens on paper: the running head, the title, and one
   paragraph. Interior pages may set a companion column beside it; the home does
   not, and its opener is .hero below. */
.titlepage { padding-block: clamp(var(--u4), 5vw, var(--u5)) var(--u5); }
.titlepage h1 { max-width: 20ch; font-size: var(--t-4xl); letter-spacing: -.015em; }
.titlepage h1 em { font-style: normal; color: var(--mark); }
.titlepage .lead { max-width: 54ch; font-size: var(--t-lg); }

/* A single line of proof under the headline — what it is, in the fewest words
   that are still true. Set in mono so it reads as a stamp, not as more prose. */
.stamp {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--u1) var(--u3);
  margin-top: var(--u4); padding-top: var(--u3); border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}
.stamp b { color: var(--ink); font-weight: 500; }
.stamp i { font-style: normal; color: var(--mark); }

.titlepage__in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  gap: var(--u5) var(--u6); align-items: start;
}
.titlepage__in > :only-child { grid-column: 1 / -1; max-width: none; }
@media (max-width: 980px) {
  .titlepage__in { grid-template-columns: 1fr; gap: var(--u4); }
}

/* The brief: one heading across the sheet, the argument set in three columns
   under it. A single narrow paragraph left the band two-thirds empty, which is
   the exact emptiness the client called blunt the first time. */
.brief__h { max-width: 22ch; font-size: var(--t-3xl); margin-bottom: var(--u4); }
.brief {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--u3) var(--u5);
  padding-top: var(--u4); border-top: 1px solid var(--rule);
}
.brief p { margin: 0; color: var(--ink-2); font-size: calc(var(--t-md) * .96); }
.brief i { font-style: italic; color: var(--mark); }

/* Three fields, laid flat under the opener of /playbook/. This is what the
   framed panel on the right used to say; saying it in a row of three costs no
   frame and reads at a glance. */
.fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--u3) var(--u5);
  margin-top: var(--u5); padding-top: var(--u4); border-top: 1px solid var(--rule);
}
.fields span {
  display: block; font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .11em; text-transform: uppercase; color: var(--mark);
}
.fields p { margin: var(--u2) 0 0; color: var(--ink-2); font-size: calc(var(--t-md) * .92); }

/* The opening spread of a module page: what the module covers on the left,
   why it exists on the right. Two columns of plain text under one heading —
   the framed panel that used to hold the second column is gone, and with it
   the half-empty sheet it left behind. */
.spread {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--u3) var(--u6); align-items: start; margin-top: var(--u3);
}
@media (max-width: 860px) { .spread { grid-template-columns: 1fr; gap: var(--u4); } }
.spread .lead { margin-top: 0; max-width: 42ch; }
.why { padding-top: var(--u1); }
.why .tag { color: var(--mark); margin-bottom: var(--u2); }
.why p:not(.tag) { margin: 0; color: var(--ink-2); font-size: calc(var(--t-md) * .94); max-width: 40ch; }

/* --------------------------------------------------------------- the hero -- */
/* REDRAWN 2026-09-06. The first version split the opening in two: the claim on
   the left, a laboratory record on the right. The client's verdict on the right
   half was final — it went, and the opening was redrawn whole rather than left
   with a hole in it.

   What it is now: the sheet's one full-bleed opening. Dark ground, so the page
   starts on a voice rather than on paper; a single red rule across the top,
   which is the only ornament in the design; the claim set as large as the sheet
   will carry it; and the four numbers that ARE the offer, on the same ground,
   under one hairline. Nothing sits beside the headline, because nothing should.

   SPACE IS THE DEVICE. The hero is the only place in the document that spends
   --u7, and it spends it above and below the text rather than between lines. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--deep); color: var(--deep-ink-2);
  padding-block: clamp(var(--u5), 8.5vw, var(--u7));
}
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: var(--mark);
}
/* The count, drawn once at a size no headline can reach, cropped by the band's
   own edge. Outline only: it is a watermark on the paper, not a graphic. */
.hero__ghost {
  position: absolute; z-index: -1; right: -.12em; top: 50%;
  transform: translateY(-58%);
  margin: 0; font-family: var(--display); word-spacing: var(--ws); font-variation-settings: "wdth" 76;
  font-weight: 700; font-size: min(30vw, 22rem); line-height: .72;
  letter-spacing: -.04em; color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 158, 122, .16);
  user-select: none; pointer-events: none;
}
@media (max-width: 1080px) { .hero__ghost { display: none; } }

.hero__in { position: relative; }
.hero .tag { color: var(--deep-faint); margin-bottom: var(--u3); }
.hero .tag i { color: var(--deep-mark); }
.hero h1 {
  color: var(--deep-ink); max-width: 17ch;
  font-size: var(--t-5xl); letter-spacing: -.018em; line-height: .98;
  font-variation-settings: "wdth" 84;
}
.hero h1 em { font-style: normal; color: var(--deep-mark); }
.hero .lead {
  color: var(--deep-ink-2); max-width: 56ch;
  margin-top: var(--u3); font-size: var(--t-lg);
}
.hero .act-row { margin-top: var(--u4); }

/* The four figures. Same ground as the claim, one hairline between them and it,
   and a full step of space above that rule — the numbers are the second half of
   the opening sentence, not a strip bolted underneath it. */
.hero__count {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--u4) var(--u4);
  margin-top: clamp(var(--u5), 6vw, var(--u6));
  padding-top: var(--u4); border-top: 1px solid var(--deep-rule);
}
.hero__count div { min-width: 0; }
.hero__count b {
  display: block; font-family: var(--display); word-spacing: var(--ws); font-variation-settings: "wdth" 82;
  font-weight: 700; font-size: clamp(2.4rem, 4.4vw, 3.25rem); line-height: .88;
  color: var(--deep-mark); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.hero__count span {
  display: block; margin-top: var(--u2); font-family: var(--mono);
  font-size: var(--t-xs); letter-spacing: .11em; text-transform: uppercase;
  color: var(--deep-ink);
}
.hero__count p {
  margin: 10px 0 0; font-size: calc(var(--t-md) * .88);
  line-height: 1.5; color: var(--deep-faint); max-width: 26ch;
}


.specimen, .plate { margin: 0; border: 1px solid var(--rule-2); border-top: 3px solid var(--ink); background: var(--sheet); }
.specimen__hd, .plate__hd {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--u2);
  padding: var(--u2) var(--u3); border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
}
.specimen__hd b, .plate__hd b { color: var(--mark); font-weight: 500; white-space: nowrap; }

/* The status line. The dot is the only decorative mark on the site, and it is
   here because a record without a verdict is not a record. */
.specimen__state {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5em;
  margin: 0; padding: 10px var(--u3); background: var(--wash);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .06em;
  text-transform: uppercase; color: var(--mark-2);
}
.specimen__state i { width: 7px; height: 7px; background: var(--mark); border-radius: 50%; flex: none; }
.specimen__state em { font-style: normal; opacity: .5; }

.specimen__b, .plate__b { padding: var(--u3); }
.specimen dl { margin: 0; display: grid; grid-template-columns: 8.5ch minmax(0, 1fr); gap: var(--u2) var(--u2); }
.specimen dt {
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); padding: var(--u2) 0 0;
  border-top: 1px solid var(--rule);
}
.specimen dt:first-of-type, .specimen dt:first-of-type + dd { border-top: 0; padding-top: 0; }
.specimen dd {
  margin: 0; padding: var(--u2) 0 0; border-top: 1px solid var(--rule);
  color: var(--ink-2); font-size: calc(var(--t-md) * .88); line-height: 1.55;
  overflow-wrap: anywhere;
  /* Only the opening of each field: this is one record, and a record that runs
     to four hundred words is the page, not a sample of it. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.specimen dd.specimen__title {
  -webkit-line-clamp: 4; color: var(--ink);
  font-family: var(--display); word-spacing: var(--ws); font-variation-settings: "wdth" 92; font-weight: 600;
  font-size: var(--t-md); line-height: 1.3;
}
.specimen__p { margin: 0; color: var(--ink-2); font-size: calc(var(--t-md) * .94); }
.specimen__b--open dd { -webkit-line-clamp: none; display: block; }
.specimen__ft, .plate__ft {
  margin: 0; padding: var(--u2) var(--u3); border-top: 1px solid var(--rule);
  background: var(--tint); font-size: calc(var(--t-md) * .86); color: var(--faint);
}
.specimen__ft a, .plate__ft a { color: var(--mark); border-bottom: 1px solid rgba(179, 48, 15, .35); }

/* --------------------------------------------------------------- actions -- */
/* Buttons are set as blocks with a hard edge — a stamp, not a pill. */
.act-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--display); word-spacing: var(--ws); font-variation-settings: "wdth" 90;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  padding: 14px var(--u3); border: 1px solid var(--ink); background: var(--ink); color: var(--sheet);
  cursor: pointer; white-space: nowrap; text-align: center;
  transition: background var(--step), color var(--step), border-color var(--step);
}
.act-btn:hover { background: var(--mark); border-color: var(--mark); color: var(--sheet); }
.act-btn--line { background: none; color: var(--ink); border-color: var(--rule-2); }
.act-btn--line:hover { background: none; color: var(--mark); border-color: var(--mark); }
.act-btn--wide { width: 100%; }
.act-btn--sm { padding: 9px var(--u2); font-size: var(--t-xs); }
.act-row { display: flex; flex-wrap: wrap; gap: var(--u2); margin-top: var(--u4); }
@media (max-width: 520px) { .act-row { flex-direction: column; } .act-row .act-btn { width: 100%; } }

/* A text link that carries a rule under it, and a trailing mark. */
.onward {
  display: inline-flex; align-items: baseline; gap: .5em;
  font-family: var(--display); word-spacing: var(--ws); font-variation-settings: "wdth" 90;
  font-size: var(--t-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--mark); border-bottom: 1px solid var(--rule-2); padding-bottom: 4px;
  transition: border-color var(--step), color var(--step);
}
.onward::after { content: "\2192"; font-family: var(--mono); transition: transform var(--step); }
.onward:hover { color: var(--mark-2); border-bottom-color: var(--mark); }
.onward:hover::after { transform: translateX(3px); }

/* ----------------------------------------------------------------- index -- */
/* The 23 modules. Each row carries what a reader needs to choose one: the
   letter, the title, the sentence that says what it covers, and the span of
   action numbers it holds. A bare letter-and-title list looked like a table of
   contents for something else. */
.index { border-top: 2px solid var(--rule-3); }
.index__i {
  display: grid; grid-template-columns: var(--spine) minmax(0, 1fr) auto;
  gap: var(--u1) var(--u3); align-items: baseline;
  padding: var(--u3) 0; border-bottom: 1px solid var(--rule);
  transition: background var(--step);
}
.index__i:hover { background: var(--wash); }
.index__i:hover .index__t { color: var(--mark); }
.index__l {
  font-family: var(--mono); font-weight: 600; font-size: var(--t-xl);
  color: var(--mark); line-height: 1; grid-row: span 2;
}
.index__t {
  font-family: var(--display); word-spacing: var(--ws); font-variation-settings: "wdth" 92;
  font-weight: 600; font-size: var(--t-lg); color: var(--ink);
  overflow-wrap: anywhere; transition: color var(--step);
}
.index__c {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--faint);
  font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right;
}
.index__d {
  grid-column: 2 / -1; margin: 0; color: var(--ink-2);
  font-size: calc(var(--t-md) * .94); max-width: 72ch;
}
@media (max-width: 620px) {
  .index__i { grid-template-columns: 2.5ch minmax(0, 1fr); gap: var(--u1) var(--u2); }
  .index__l { grid-row: auto; font-size: var(--t-md); }
  .index__c { grid-column: 2; text-align: left; }
  .index__d { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------- entries -- */
/* One action. The number sits in the spine, the rule runs the full width under
   it, and the explanation is a definition list — the term is the question the
   practitioner is asking (how / avoid / verify), not a bolded word in a
   paragraph. */
.entries { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--rule-3); }
.entry {
  display: grid; grid-template-columns: var(--spine) minmax(0, 1fr); gap: 0 var(--u2);
  padding: var(--u3) 0; border-bottom: 1px solid var(--rule);
  scroll-margin-top: var(--u4);
}
.entry:target { background: var(--wash); }
.entry__n {
  font-family: var(--mono); font-size: var(--t-sm); font-weight: 500;
  color: var(--mark); font-variant-numeric: tabular-nums; line-height: 1.6;
}
.entry__t { font-family: var(--display); word-spacing: var(--ws); font-variation-settings: "wdth" 92; font-weight: 600; font-size: var(--t-md); line-height: 1.35; overflow-wrap: anywhere; }
.entry__d { margin: var(--u2) 0 0; display: grid; grid-template-columns: 7ch minmax(0, 1fr); gap: 6px var(--u2); max-width: 74ch; }
.entry__d dt {
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mark);
  padding-top: .35em;
}
.entry__d dd { margin: 0; color: var(--ink-2); font-size: calc(var(--t-md) * .96); overflow-wrap: anywhere; }
/* A continuation of the same list after a shared explanation: it keeps the
   hairlines but must not repeat the heavy rule that opens the list. */
.entries--run { border-top: 0; }
.entries--tight .entry { padding-block: 10px; }
.entries--tight .entry__t { font-size: calc(var(--t-md) * .97); font-weight: 500; }
@media (max-width: 560px) {
  .entry__d { grid-template-columns: 1fr; gap: 2px var(--u2); }
  .entry__d dt { padding-top: var(--u1); }
}

/* The explanation several consecutive actions share, printed once for the run
   rather than repeated under each of them. */
.shared {
  margin: 0 0 var(--u5); padding: var(--u3) var(--u3) var(--u3) var(--u4);
  border-left: 3px solid var(--mark); background: var(--tint);
}
.shared > .tag { color: var(--mark); }
.shared dl { margin: 0; display: grid; grid-template-columns: 7ch minmax(0, 1fr); gap: 6px var(--u2); max-width: 74ch; }
.shared dt { font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mark); padding-top: .35em; }
.shared dd { margin: 0; color: var(--ink-2); font-size: calc(var(--t-md) * .96); overflow-wrap: anywhere; }
@media (max-width: 560px) { .shared dl { grid-template-columns: 1fr; } .shared { padding-left: var(--u3); } }

/* ------------------------------------------------------------- statement -- */
/* Three claims, each one a spread: an oversized numeral in the spine, the claim
   as a heading, the evidence beside it. Ruled apart horizontally, never boxed
   into columns with vertical hairlines running down the text — that version put
   the words hard against a line and read as a table of contents.  */
.statements { display: grid; }
.statement {
  display: grid; grid-template-columns: var(--spine) minmax(0, 1fr);
  gap: var(--u2) var(--u3); align-items: start;
  padding: var(--u4) 0; border-top: 1px solid var(--rule);
}
.statement:first-child { border-top: 2px solid var(--rule-3); }
.statement__n {
  font-family: var(--mono); font-weight: 500; font-size: var(--t-2xl);
  color: var(--mark); line-height: .9; font-variant-numeric: tabular-nums;
}
.statement__b { max-width: 62ch; }
.statement h3 { font-size: var(--t-xl); margin-bottom: var(--u2); }
.statement p:not(.tag) { color: var(--ink-2); margin: 0; }
@media (max-width: 620px) {
  .statement { grid-template-columns: 1fr; gap: var(--u1); padding-block: var(--u3); }
  .statement__n { font-size: var(--t-lg); }
}

/* ------------------------------------------------------------------ note -- */
.note {
  border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2);
  padding: var(--u3) 0; margin: var(--u4) 0 0; color: var(--ink-2);
  font-size: calc(var(--t-md) * .96); max-width: 74ch;
}
.note strong { color: var(--ink); }

.note a { color: var(--mark); border-bottom: 1px solid rgba(179, 48, 15, .35); }
.note a:hover { border-bottom-color: var(--mark); }

/* ----------------------------------------------------------------- prose -- */
.prose { max-width: var(--col-w); }
.prose p:not(.tag) { color: var(--ink-2); }
.prose a { color: var(--mark); border-bottom: 1px solid rgba(179, 48, 15, .35); transition: border-color var(--step); }
.prose a:hover { border-bottom-color: var(--mark); }
.prose h2 { margin: 1.9em 0 .5em; padding-top: .6em; border-top: 1px solid var(--rule); }
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin: 1.5em 0 .35em; }
.prose ul, .prose ol { padding-left: 1.15em; margin: 0 0 1.1em; color: var(--ink-2); }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--mark); }

/* ---------------------------------------------------------------- ticked -- */
.ticked { list-style: none; margin: var(--u3) 0 0; padding: 0; }
.ticked li {
  display: grid; grid-template-columns: 2.2ch 1fr; gap: var(--u2);
  padding: var(--u2) 0; border-bottom: 1px solid var(--rule);
  color: var(--ink-2); font-size: calc(var(--t-md) * .96);
}
.ticked li::before { content: "\2713"; font-family: var(--mono); color: var(--mark); font-size: var(--t-sm); }

/* ------------------------------------------------------------------ q&a -- */
/* Ruled rows, not accordions in boxes. The marker is a plus that becomes a
   minus, drawn in the spine so it lines up with every other number on the site. */
.qa { border-top: 2px solid var(--rule-3); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary {
  display: grid; grid-template-columns: var(--spine) minmax(0, 1fr); gap: var(--u2);
  align-items: baseline; padding: var(--u3) 0; cursor: pointer; list-style: none;
  font-family: var(--display); word-spacing: var(--ws); font-variation-settings: "wdth" 92;
  font-weight: 600; font-size: var(--t-md); color: var(--ink);
  transition: color var(--step);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before { content: "+"; font-family: var(--mono); font-weight: 500; color: var(--mark); font-size: var(--t-lg); line-height: 1; }
.qa details[open] summary::before { content: "\2013"; }
.qa summary:hover { color: var(--mark); }
.qa__a { padding: 0 0 var(--u3) var(--spine); margin-left: var(--u2); color: var(--ink-2); max-width: 74ch; }
.qa__a a { color: var(--mark); border-bottom: 1px solid rgba(179, 48, 15, .35); }

/* ----------------------------------------------------------------- files -- */
.files { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); border-top: 2px solid var(--rule-3); }
.file { padding: var(--u3) var(--u3) var(--u3) 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: block; transition: background var(--step); }
.file:last-child { border-right: 0; }
.file:hover { background: var(--tint); }
.file:hover .onward { color: var(--mark-2); border-bottom-color: var(--mark); }
.file h3 { min-width: 0; font-family: var(--mono); font-weight: 500; font-size: var(--t-md); color: var(--ink); margin-bottom: var(--u1); overflow-wrap: anywhere; }
.file p:not(.tag) { color: var(--ink-2); font-size: calc(var(--t-md) * .94); margin-bottom: var(--u3); }
@media (max-width: 760px) { .file { border-right: 0; padding-right: 0; } }

/* ----------------------------------------------------------------- marks -- */
.marks { display: flex; flex-wrap: wrap; gap: var(--u1); margin-top: var(--u4); }
.marks a {
  font-family: var(--mono); font-size: var(--t-sm); color: var(--ink-2);
  padding: 8px var(--u2); border: 1px solid var(--rule-2);
  transition: border-color var(--step), color var(--step);
}
.marks a:hover { border-color: var(--mark); color: var(--mark); }

/* --------------------------------------------------------------- turning -- */
/* Previous / next section, set as two ruled columns of a running head. */
.turning { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); border-top: 2px solid var(--rule-3); }
.turning a { padding: var(--u3) var(--u3) var(--u3) 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transition: background var(--step); }
.turning a:last-child { border-right: 0; }
.turning a:hover { background: var(--tint); }
.turning a:hover h3 { color: var(--mark); }
.turning h3 { margin: var(--u1) 0 var(--u1); transition: color var(--step); }
.turning p:not(.tag) { color: var(--faint); font-size: calc(var(--t-md) * .92); margin: 0; max-width: 62ch; }
.turning h3 { max-width: 24ch; }

/* ------------------------------------------------------------------ form -- */
/* Fields are ruled lines, not boxes — the same hairline as everything else. */
.split { display: grid; grid-template-columns: 1fr minmax(0, 400px); gap: var(--u5); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--u4); } }
.hold { position: sticky; top: var(--u3); }
@media (max-width: 900px) { .hold { position: static; } }

.stack { display: grid; gap: var(--u3); border-top: 2px solid var(--rule-3); padding-top: var(--u3); }
.fld { display: grid; gap: 6px; }
.fld label { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.fld label span { color: var(--faint); letter-spacing: 0; text-transform: none; }
.fld input, .fld textarea {
  font-family: var(--text); font-size: var(--t-md); color: var(--ink);
  background: none; border: 0; border-bottom: 1px solid var(--rule-2);
  padding: 10px 0; width: 100%;
  transition: border-color var(--step);
}
.fld input::placeholder { color: var(--faint); }
.fld input:focus, .fld textarea:focus { outline: 0; border-bottom-color: var(--mark); border-bottom-width: 2px; padding-bottom: 9px; }
/* Error state. The palette holds one signal colour and it is already the link
   colour, so an error cannot be carried by hue here — it would read as a link
   and, on its own, would fail the "not by colour alone" rule anyway. It is
   carried by a doubled rule, weight, and a mark before the message. */
.fld__err {
  display: none; font-family: var(--mono); font-size: var(--t-xs); font-weight: 500;
  color: var(--ink); letter-spacing: .04em;
}
.fld__err::before { content: "\2715  "; color: var(--mark); font-weight: 600; }
.fld--bad input, .fld--bad textarea { border-bottom-color: var(--ink); border-bottom-width: 2px; padding-bottom: 9px; }
.fld--bad label { color: var(--ink); font-weight: 600; }
.fld--bad .fld__err { display: block; }

/* The consent box is a checkbox: it has no bottom rule to thicken, so the
   invalid state was flagged by the summary message and shown nowhere on the
   control itself. */
.consent.fld--bad { color: var(--ink); }
.consent.fld--bad input { outline: 2px solid var(--ink); outline-offset: 2px; }
.consent.fld--bad::after {
  content: "\2715  This box has to be ticked."; grid-column: 2;
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .04em; color: var(--ink); margin-top: 4px;
}

.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--u1) var(--u2); align-items: start; font-size: var(--t-sm); color: var(--ink-2); cursor: pointer; }
.consent input { width: 24px; height: 24px; margin-top: .1em; accent-color: var(--mark); }
.consent a { color: var(--mark); border-bottom: 1px solid rgba(179, 48, 15, .35); }

.reply { display: none; font-family: var(--mono); font-size: var(--t-sm); padding: var(--u2); border-left: 3px solid var(--mark); background: var(--tint); }
.reply.is-shown { display: block; }
.reply.is-ok { border-left-color: #1F6B3B; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- tables -- */
.tbl { overflow-x: auto; margin: var(--u3) 0; }
table { width: 100%; border-collapse: collapse; font-size: calc(var(--t-md) * .94); }
th, td { text-align: left; padding: var(--u2) var(--u2) var(--u2) 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); border-bottom-color: var(--rule-2); }
tbody th { font-weight: 600; color: var(--ink); }
tbody td { color: var(--ink-2); }

/* -------------------------------------------------------------- colophon -- */
/* The foot of a printed document: a heavy rule, then the contents, then the
   imprint line. Same spine, same hairlines. */
.colophon { border-top: 4px solid var(--rule-3); background: var(--tint); padding-block: var(--u4) var(--u3); }
.colophon__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--u4); }
@media (max-width: 900px) { .colophon__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .colophon__grid { grid-template-columns: 1fr; gap: var(--u3); } }
.colophon__about { color: var(--ink-2); font-size: calc(var(--t-md) * .92); margin: var(--u2) 0 var(--u2); max-width: 40ch; }
.colophon h2 { font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: var(--u2); font-variation-settings: normal; }
.colophon ul { list-style: none; margin: 0; padding: 0; }
.colophon li { margin-bottom: 7px; }
.colophon a { font-size: calc(var(--t-md) * .92); color: var(--ink-2); }
.colophon a:hover { color: var(--mark); }
.colophon__at { display: grid; gap: 5px; font-family: var(--mono); font-size: var(--t-sm); }
.colophon__at a { font-family: var(--mono); font-size: var(--t-sm); }
/* The short disclaimer, on every page. It sits above the imprint line because a
   disclaimer nobody passes is a disclaimer nobody has read. */
.colophon__note {
  margin: var(--u4) 0 0; padding-top: var(--u3); border-top: 1px solid var(--rule-2);
  font-size: calc(var(--t-md) * .84); color: var(--faint); max-width: 92ch;
}
.colophon__note a { color: var(--mark); border-bottom: 1px solid rgba(179, 48, 15, .35); }

.colophon__imprint {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--u2) var(--u3);
  margin-top: var(--u3); padding-top: var(--u3); border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: var(--t-xs); color: var(--faint);
}
.colophon__imprint nav { display: flex; flex-wrap: wrap; gap: var(--u3); }
.colophon__imprint a { font-family: var(--mono); font-size: var(--t-xs); color: var(--faint); }

/* Tap targets. On a phone the footer was 33 links stacked 15 px apart — wide,
   but under the 24 px minimum in WCAG 2.5.8 and easy to mis-hit with a thumb.
   The links keep their size; the hit area grows around them. Inline links
   inside a sentence are exempt and are left alone. */
@media (max-width: 720px) {
  .colophon li { margin-bottom: 0; }
  .colophon li a,
  .colophon__at a,
  .colophon__imprint nav a {
    display: inline-flex; align-items: center; min-height: 32px;
  }
  .tag a { display: inline-flex; align-items: center; min-height: 26px; }
  .marks a { min-height: 44px; }
  .colophon .wordmark { min-height: 32px; }
  /* The plate footer is a single link, not a link inside a sentence, so it
     needs a real target the way any other standalone link does. */
  .plate__ft a, .specimen__ft a { display: inline-flex; align-items: center; min-height: 26px; }
}

/* --------------------------------------------------------------- utility -- */
.mt { margin-top: var(--u3); }
.mt-lg { margin-top: var(--u4); }

/* =========================================================================
   THE LABORATORY LAYER
   The site is a record of two years of testing, so the page is furnished like
   the bench it came from rather than like a brochure. Two devices, used
   everywhere, and nothing else:

     1. GRAPH-PAPER SUBSTRATE — a 16 px measurement grid, barely there, under
        the tinted bands. Lab-notebook paper, not decoration.
     2. THE PLATE — a framed instrument panel with a mono header and a footer.

   REMOVED 2026-09-06, on the client's instruction: the § protocol numbers (a
   symbol that named nothing the reader could use) and the ticked "measuring
   edge" under every opening rule (a comb of 1 px spikes, read as thorns).
   Separation is now carried by the rule itself and by space alone.
   ========================================================================= */

/* 1. Substrate. Only on the tinted bands, so the reading surfaces stay plain. */
.band--tint {
  background-color: var(--tint);
  background-image:
    linear-gradient(to right, rgba(26, 24, 23, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26, 24, 23, .035) 1px, transparent 1px);
  background-size: 16px 16px;
}
.band--deep {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* The band label. One line of small mono type over a hairline — no numeral on
   the right any more, so the label is simply a label. */
.tag--step {
  display: block;
  border-bottom: 1px solid var(--rule); padding-bottom: var(--u2);
  margin-bottom: var(--u3); max-width: 46ch;
}
.tag--step b { display: none; }
.band--deep .tag--step { border-bottom-color: var(--deep-rule); }

.entries, .index, .qa, .statements, .files, .turning, .measure, .stack {
  position: relative;
}

/* 2. The caveat plate. The two halves of the sentence are held apart because
      the sentence itself is a balance — what is real on one side, what is
      missing on the other. The words are untouched. */
.plate--caveat { margin-top: var(--u5); }
.caveat__lead {
  font-family: var(--display); word-spacing: var(--ws); font-variation-settings: "wdth" 90;
  font-weight: 600; font-size: var(--t-lg); color: var(--ink);
  margin: 0 0 var(--u3); max-width: 30ch;
}
.caveat__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--u3) var(--u4); }
.caveat__cols p {
  display: grid; grid-template-columns: 2ch minmax(0, 1fr); gap: var(--u2);
  margin: 0; color: var(--ink-2); font-size: calc(var(--t-md) * .94);
  padding-top: var(--u2); border-top: 1px solid var(--rule);
}
.caveat__cols i {
  font-style: normal; font-family: var(--mono); font-size: var(--t-lg);
  line-height: 1; color: var(--mark);
}
.caveat__cols p + p i { color: var(--faint); }
@media (max-width: 720px) { .caveat__cols { grid-template-columns: 1fr; gap: var(--u2); } }



/* ---------------------------------------------------------------- print -- */
/* A run book gets printed. Give it a printable form rather than leaving it to
   the browser: no desk, no navigation, entries never split across a page. */
@media print {
  html, body { background: #fff; }
  .sheet { border: 0; max-width: none; }
  .masthead, .colophon, .act-row, .drop, .menu, .opener, .skip { display: none !important; }
  .band { padding-block: var(--u3); border-top: 1px solid #999; }
  .entry, .index__i, .qa details { break-inside: avoid; }
  a { color: #000; }
  .qa details { display: block; }
  .qa__a { display: block !important; }
}

/* ------------------------------------------------- pixel review 2026-09-15 */
/* An action title ran to 130 characters on one line at 1440 px while its
   neighbour, balanced onto two, stopped at 840: same list, two measures. */
.entry__t { max-width: 72ch; text-wrap: pretty; }
/* Steps of a body, one per line instead of a run joined by middots. */
.entry__d .steps, .shared .steps { margin: 0; padding-left: 1.1em; }
.entry__d .steps li, .shared .steps li { margin-bottom: .35em; padding-left: .15em; }
.entry__d .steps li::marker, .shared .steps li::marker { color: var(--mark); }
/* On a phone the spine column kept 70 px empty to the left of every body, and
   the text ran down a 280 px strip. */
@media (max-width: 560px) {
  .entry { grid-template-columns: 1fr; }
  .entry__n { margin-bottom: 2px; }
}
/* A module name that wrapped kept the full body leading, so its second line
   read as the next item. */
/* the li kept the body size, so its strut set a 26 px line under 15 px links */
.colophon li { font-size: calc(var(--t-md) * .92); line-height: 1.35; margin-bottom: 12px; }
/* The disclaimer's rule stopped at 92ch while the imprint rule below ran the
   full width: two rules of different lengths stacked. The measure now limits
   the text, not the rule. */
.colophon__note { max-width: none; padding-right: max(0px, calc(100% - 92ch)); }
/* A two-column key/value table on a phone squeezed the value into a strip. */
@media (max-width: 560px) {
  .prose .tbl th, .prose .tbl td { display: block; width: auto !important; }
  .prose .tbl th { border-bottom: 0; padding-bottom: 0; }
}