/* lepermismoto.be — annotated statute.
   Implements recon/design-direction.md. Pure white ground, near-black ink,
   hairline rules, one oxblood accent reserved for findings, a genuine margin
   column, no cards, no radius, no shadow, no motion, no JavaScript.

   Pack tp_0e1bf531d8 with deliberate token overrides recorded in dna.json.
   Class scheme is `single_word`: one word per class, no prefix, no BEM. */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/space-grotesk.woff2") format("woff2");
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/work-sans.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono.woff2") format("woff2");
}

:root {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --fg: #111111;
  --muted: #565656;
  --rule: #D8D8D8;
  --rule-strong: #111111;
  --accent: #9A1E1E;

  --display: "Space Grotesk", system-ui, sans-serif;
  --text: "Work Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --h1: 2rem;
  --h2: 1.35rem;
  --h3: 1.0625rem;
  --body: 1.0625rem;
  --sm: 0.8125rem;
  --xs: 0.6875rem;
  --lh: 1.65;

  --measure: 52ch;
  --gutter: 3.5rem;
  --wide: 66rem;
  --margin: 13.5rem;
}

* { box-sizing: border-box; }

html {
  font-family: var(--text);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--text);
  font-size: var(--body);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(var(--wide), calc(100% - 2.5rem)); margin-inline: auto; }
.narrow { max-width: var(--measure); }

.skip {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--fg); color: var(--bg);
  padding: .55rem .85rem; font-family: var(--mono); font-size: var(--sm);
  text-decoration: none; z-index: 20;
  min-height: 2.75rem; display: inline-flex; align-items: center;
}
.skip:focus { top: .6rem; }

a { color: var(--fg); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---- header: a bar with weight, rule under it, mono nav ---- */
.bar { background: var(--bg); border-bottom: 1px solid var(--rule-strong); }
.barin {
  min-height: 3.5rem;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem 2rem; padding-block: .55rem;
}
.mark { display: flex; align-items: baseline; gap: .6rem; text-decoration: none;
  flex: none; min-height: 2.75rem; padding-block: .35rem; }
.wordmark {
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  letter-spacing: -.015em;
}
.marknote {
  font-family: var(--mono); font-size: var(--xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.navlink {
  font-family: var(--mono); font-size: var(--sm); text-decoration: none;
  color: var(--muted); display: inline-flex; align-items: center;
  min-height: 2.75rem; border-bottom: 2px solid transparent;
}
.navlink:hover { color: var(--fg); border-bottom-color: var(--rule); }
.navlink[aria-current] { color: var(--fg); border-bottom-color: var(--accent); }
.mail {
  font-family: var(--mono); font-size: var(--sm); color: var(--muted);
  text-decoration: none; margin-left: auto;
  display: inline-flex; align-items: center; min-height: 2.75rem;
}
.mail:hover { color: var(--fg); }
.strip { padding-bottom: .4rem; }
.crumbs {
  font-family: var(--mono); font-size: var(--xs);
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  color: var(--muted);
}
.up { color: var(--muted); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 2.75rem; }
.up:hover { color: var(--fg); text-decoration: underline; }
.sep { color: var(--rule); }
.here { color: var(--fg); }

/* ---- type: small jump, sentence case, one family for reading ---- */
.h1 {
  font-family: var(--display); font-weight: 700;
  font-size: var(--h1); line-height: 1.1; letter-spacing: -.025em;
  margin: .35rem 0 .7rem; max-width: 24ch;
}
.h2 {
  font-family: var(--display); font-weight: 700;
  font-size: var(--h2); line-height: 1.2; letter-spacing: -.015em;
  margin: 0 0 .5rem;
}
.h3 {
  font-family: var(--display); font-weight: 700;
  font-size: var(--h3); line-height: 1.35; margin: 1.6rem 0 .35rem;
}
.deck {
  font-size: 1.0625rem; color: var(--muted); line-height: 1.55;
  max-width: 56ch; margin: 0;
}
.scope, .schedkey, .schedcap {
  font-family: var(--mono); font-size: var(--xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 .5rem;
}
.p { margin: 0 0 1rem; max-width: var(--measure); }
.meta {
  font-family: var(--mono); font-size: var(--sm); color: var(--muted);
  margin: 0 0 1.1rem; padding-bottom: .6rem;
  border-bottom: 1px solid var(--rule);
}

/* ---- title block: the document opening, not a hero ---- */
.titleblock {
  padding-block: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--rule);
}
/* Running head: scope left, folio right, closed by a rule. This is the device
   that makes the page read as a printed document rather than a web header with
   air above a big title. */
.runhead {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding-bottom: .5rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule-strong);
}
.folio {
  font-family: var(--mono); font-size: var(--xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
/* Title block: type left, figure right. Stacks below 940, where the plate would
   squeeze the headline to nothing. */
.tbgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
.tbtext { min-width: 0; display: flex; flex-direction: column;
  justify-content: flex-start; }
/* The title block's left column used to end well above the plate, leaving a hole
   under the deck. It now carries a small key beneath the text so the column has
   its own content to the bottom of the figure. */
.tbkey {
  margin: 1.1rem 0 0; padding-top: .6rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: var(--xs); color: var(--muted);
  line-height: 1.5; max-width: 38ch;
}
.tbkey b { color: var(--fg); font-weight: 600; }
.platefig { margin: 0; min-width: 0; display: flex; flex-direction: column;
  height: 100%; }
/* The plate's caption is pinned to the foot of the figure column so the image and
   the text column finish on the same line. Measured, the plate ended 47px above
   the title block's last line, which read as a ragged edge under the rule. */
.platefig .platecaptop { margin-top: auto; padding-top: .45rem; }
/* The plate is evidence, not a poster. No forced aspect-ratio and no max-height:
   cropping a technical drawing cuts the dimension lines off, and an aspect-ratio
   override made the rendered box 3.25:1 against a 1.78:1 file, which the audit
   correctly read as distortion. Width-led, native ratio, always. */
.plateimgtop {
  display: block; width: 100%; max-width: 100%; height: auto;
}
.platecaptop {
  margin: .45rem 0 0; font-family: var(--mono); font-size: var(--xs);
  color: var(--muted); line-height: 1.4;
}
/* The key under the homepage plate. It closes the figure column so the plate
   does not float with 239px of void beneath it beside a 496px schedule. */
.tbfigkey {
  margin: 1rem 0 0; padding-top: .7rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: var(--xs); color: var(--muted);
  line-height: 1.55; max-width: 42ch;
}
.tbfigkey b { color: var(--fg); font-weight: 600; }

/* ---- contents list: removed ---- */
/* A "Sommaire" column listing all seven guides sat directly above an index that
   listed the same seven, which is what made the homepage look like it repeated
   itself. The title block's right column carries the plate instead, and the method
   note now fills the space beside the answer schedule. */

/* ---- the five answers: ruled rows, figure in the margin ---- */
.answers { border-bottom: 1px solid var(--rule-strong); }
/* The schedule is capped at a scannable width. Full-bleed it spanned 1120px and
   left 641px of void between the question and its answer. A comparison column only
   works if the eye can travel down it. */
.answers .wrap { padding-block: 1.5rem; }
/* The schedule column and the plate share one row on the homepage. The plate used
   to sit above the schedule, which pushed the first answer to y=599 on a 900px
   viewport and left 500px of empty white to the right of the figures. Beside it,
   the schedule starts higher and the row is balanced. */
.ansgrid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1.4rem; align-items: start;
}
.ansmain { min-width: 0; max-width: 38rem; }
.ansfig { min-width: 0; display: flex; flex-direction: column; height: 100%; }
/* Key pinned to the foot of the figure column so the plate + key bracket the same
   vertical span as the schedule, instead of leaving a hole under the plate. */
.ansfig .tbfigkey { margin-top: auto; }
/* 38rem: the five rows form a comparison table, and a comparison only works if the
   answer column is close enough to travel down. Capped at 46rem the void was still
   268px between the end of a question and its figure. */
.answers .qgrid, .answers .schedtop { max-width: 100%; }
.schedtop {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .2rem 1.5rem; margin-bottom: .6rem;
}
.schednote {
  font-family: var(--mono); font-size: var(--xs); color: var(--muted);
  margin: 0; letter-spacing: .02em;
}
.qgrid { border-top: 1px solid var(--rule-strong); }
/* Row tracks. Reading order is question then answer, adjacent: the previous
   version put the citation between them and the answer sat 489px away, which
   cannot be scanned. Base is a stacked row; two tracks from 560 up. */
.qrow {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  grid-template-areas:
    "num text"
    "num right";
  gap: .3rem .8rem; align-items: baseline;
  padding: .75rem 0; border-bottom: 1px solid var(--rule);
}
.qrow:last-child { border-bottom: 0; }
.qnum { grid-area: num; }
.qtext { grid-area: text; }
.qright { grid-area: right; display: flex; flex-direction: column;
  gap: .15rem; }
.qfig { grid-area: fig; }
.qnum {
  font-family: var(--mono); font-size: var(--xs); color: var(--muted);
}
.qtext { display: flex; flex-direction: column; gap: .1rem; }
.qlink {
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  text-decoration: none; line-height: 1.35;
  border-bottom: 1px solid var(--rule);
}
.qlink:hover { border-bottom-color: var(--accent); }
.qnote { font-size: var(--sm); color: var(--muted); }
/* The citation supports the figure underneath it, at a size that is still
   readable. It was 11px in the first pass, which is too small for the one element
   that carries the site's credibility. */
.qsrc {
  font-family: var(--mono); font-size: .75rem; color: var(--muted);
  line-height: 1.4; min-width: 0; overflow-wrap: anywhere;
}
.qfig {
  font-family: var(--mono); font-weight: 600; font-size: 1.0625rem;
  color: var(--accent); line-height: 1.25;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .3rem;
}
.unit { font-size: var(--sm); font-weight: 400; color: var(--muted);
  white-space: nowrap; }

/* ---- methodology: what the site refuses to publish ---- */
.method { background: var(--bg); border-bottom: 1px solid var(--rule); }
.method .wrap { padding-block: 1.5rem 1.7rem; }
.method .schedkey { max-width: 52rem; }
.mgrid { border-top: 1px solid var(--rule); }
/* Mobile-first: the label and the explanation stack, because two columns cannot
   hold inside 350px. The two-column form starts at the 560 breakpoint.
   `minmax(0, 20rem)` as a base track forced 320px plus a second column and pushed
   the document 60px past the viewport. */
.mrow {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: .15rem; padding: .6rem 0; border-bottom: 1px solid var(--rule);
}
.mrow:last-child { border-bottom: 0; }
.mkey {
  font-family: var(--mono); font-size: var(--sm); color: var(--accent);
  margin: 0; line-height: 1.4;
}
.mbody { font-size: .9375rem; color: var(--muted); margin: 0;
  line-height: 1.5; max-width: 54ch; }
/* The method table's rules span the container; its text should reach them too.
   Left at 54ch the section's ink stopped 256px short on a 1280 container and
   read as another left-hugging block. 72ch is still a comfortable measure. */
.mgrid .mbody { max-width: 72ch; }
/* The method note as the right column beside the answer schedule. Stacked, its
   two-column rows cannot hold inside 26rem, so the key sits above the body. */
.methodaside { min-width: 0; border-bottom: 0; background: none; }
.methodaside .schedkey { max-width: none; margin-bottom: .35rem; }
.methodaside .mrow { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
.methodaside .mbody { max-width: none; font-size: .875rem; }
.methodaside .mkey { font-size: .8125rem; }
/* The aside and the schedule must finish on the same rule. The aside is shorter,
   so its closing note is pushed to the foot of the column; without it the right
   third of the section was blank below the last row. */
.methodaside { display: flex; flex-direction: column; align-self: stretch; }
.masidefoot {
  margin: auto 0 0; padding-top: .7rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: var(--xs); color: var(--muted);
}

/* ---- lead document: one block, framed by rules only ---- */
.leadblock { border-bottom: 1px solid var(--rule-strong); }
.leadblock .wrap { padding-block: 1.5rem 1.7rem; }
.leadlink { display: block; text-decoration: none; max-width: 48rem; }
/* The lead teaser and its plate share a row. Capped at 48rem alone, the teaser
   left 352px of void against a full-width rule above and below it, which is the
   ragged right edge that reads as a left-shifted page. */
.leadgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem;
  align-items: start; }
.leadfig { margin: 0; min-width: 0; }
.leadimg { display: block; width: 100%; height: auto; }
.leadcap {
  margin: .45rem 0 0; font-family: var(--mono); font-size: var(--xs);
  color: var(--muted); line-height: 1.4;
}
.leadtitle {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 1.5rem; line-height: 1.2; letter-spacing: -.02em;
  margin-bottom: .5rem;
}
.leadlink:hover .leadtitle { text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: .18em; }
.leaddeck { display: block; color: var(--muted); margin-bottom: .6rem; }
.leadmeta {
  display: block; font-family: var(--mono); font-size: var(--xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

/* ---- index: ruled rows, no boxes ---- */
.index { border-bottom: 1px solid var(--rule); }
.index .wrap { padding-block: 1.4rem 1.2rem; }
/* The rules span the full container; only the text inside keeps a reading
   measure. Previously this cap sat on `.entries`/`.idxhead`/`.mgrid`, so every
   horizontal rule stopped 288px short of the right gutter and the whole lower
   half of the page read as shoved left. Structure goes full width, prose does
   not — that is the difference between an indented block and an off-centre page. */
.egloss { max-width: 72ch; }
.mbody { max-width: 54ch; }
.idxhead {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .4rem 1rem;
  border-bottom: 1px solid var(--rule-strong); padding-bottom: .4rem;
}
.idxmore {
  font-family: var(--mono); font-size: var(--xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  text-decoration: none; display: inline-flex; align-items: center;
  min-height: 2.5rem;
}
.idxmore:hover { text-decoration: underline; }
/* The count replaces the "Ouvrir la section" link that pointed at a row directly
   beneath it (the section root is already the first entry in its own list). */
.idxcount {
  font-family: var(--mono); font-size: var(--xs); color: var(--accent);
  letter-spacing: .08em;
}
.entries { border-top: 1px solid var(--rule-strong); margin-top: .1rem; }
.entry {
  display: grid; grid-template-columns: 1.6rem 6.5rem minmax(0, 1fr) 5rem;
  gap: .2rem .9rem; align-items: baseline;
  padding: .8rem 0; border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
/* The category label must wrap, not spill. "l'immatriculation" measured 131px of
   text in a 112px track, so it ran into the title beside it. */
.ekey { overflow-wrap: break-word; }
.entry:last-child { border-bottom: 0; }
.enum {
  font-family: var(--mono); font-size: var(--xs); color: var(--muted);
}
.ekey {
  font-family: var(--mono); font-size: var(--xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.etext { display: flex; flex-direction: column; gap: .12rem; }
.etitle {
  font-family: var(--display); font-weight: 700; font-size: 1.0625rem;
  line-height: 1.3; letter-spacing: -.01em;
  overflow-wrap: break-word; hyphens: auto;
}
.entry:hover .etitle { text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: .16em; }
.egloss { font-size: .9375rem; color: var(--muted); line-height: 1.5;
  max-width: none; }
.edate {
  font-family: var(--mono); font-size: var(--xs); color: var(--muted);
  text-align: right; white-space: nowrap;
}

/* ---- closing: one line, one link, no panel ---- */
.closing { border-bottom: 1px solid var(--rule-strong); }
.closing .wrap { padding-block: 2rem; }
.closetext { max-width: 46ch; margin: 0 auto .8rem; text-align: center;
  color: var(--muted); }
.closeact { margin: 0; text-align: center; }
.go {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: .55rem 1.1rem; background: var(--fg); color: var(--bg);
  font-family: var(--mono); font-size: var(--sm); font-weight: 600;
  letter-spacing: .04em; text-decoration: none; border: 0;
}
.go:hover { background: var(--accent); }

/* ---- article: margin column beside the body ---- */
/* The article plate spans the body measure, not a 40rem box. Capped at 40rem it
   ended at x=800 in a 1120px container, leaving 480px of white to its right under
   a full-width title block — the single largest void on an article page. */
.plate { margin: 1.6rem 0 0; max-width: 62ch; }
/* In the title block the plate sits in the right column at its own native ratio,
   and the key above it is the only label. */
.tbplate { margin: 0; max-width: none; display: flex; flex-direction: column; }
.tbplate .platecap { margin-top: auto; padding-top: .5rem; max-width: none; }
.platekey {
  font-family: var(--mono); font-size: var(--xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .4rem;
}
/* Native ratio: cropping a technical drawing cuts the dimension lines off. */
.plateimg {
  display: block; width: 100%; height: auto;
}
.platecap {
  margin: .5rem 0 0; font-size: var(--sm); color: var(--muted);
  line-height: 1.45; max-width: 46ch;
}

/* The article's two-column field: body left, annotation right. Named
   `.articlefolio` because `.folio` is already the running-head page number, and the
   shared name made that span a grid container. Measured, it put a 374px void
   between the end of the body (x=690) and the margin (x=1064). */
.articlefolio {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem; padding-block: 1.6rem 1rem;
}
.body { font-size: var(--body); }
.body .p { max-width: var(--measure); }
.body > .p:first-of-type { font-size: 1.0625rem; }

.margin {
  border-top: 1px solid var(--rule-strong);
  padding-top: .6rem;
  order: -1;
  background: var(--bg);
}
/* The margin is a document annotation, so it carries its own rules and its own
   numbering. Without these it reads as an empty sidebar. */
.marginhead {
  font-family: var(--mono); font-size: var(--xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .6rem;
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--rule); padding-bottom: .35rem;
}
.mcount { color: var(--accent); }
.mfig {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0 .55rem; padding: .55rem 0;
  border-bottom: 1px solid var(--rule);
}
.mfig:last-of-type { border-bottom: 0; }
.mnum {
  font-family: var(--mono); font-size: var(--xs); color: var(--muted);
  padding-top: .18rem;
}
.mbody-in { display: flex; flex-direction: column; gap: .08rem; }
.mvalue {
  font-family: var(--mono); font-weight: 600; font-size: 1.0625rem;
  color: var(--accent); margin: 0; line-height: 1.2;
}
.mlabel { font-size: var(--sm); color: var(--muted); margin: 0; line-height: 1.4; }
.marginnote {
  font-family: var(--mono); font-size: var(--xs); color: var(--muted);
  margin: .7rem 0 0; padding-top: .5rem;
  border-top: 1px solid var(--rule); line-height: 1.4;
}

.toc { border-top: 1px solid var(--rule); padding-top: .6rem;
  margin-bottom: 1.4rem; }
.tochead {
  font-family: var(--mono); font-size: var(--xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .4rem;
}
.toclink {
  display: block; font-family: var(--mono); font-size: var(--sm);
  color: var(--muted); text-decoration: none; padding: .3rem 0;
  border-bottom: 1px solid var(--rule); line-height: 1.4;
  min-height: 2.5rem;
}
.toclink:hover { color: var(--fg); }
.toclink:last-child { border-bottom: 0; }

.body h2 { margin-top: 2.2rem; }
.body h3 { margin-top: 1.6rem; }
.body .h2 { max-width: 30ch; }

/* tables inside the body: same ruled language, no card.
   A table is allowed to be wider than the reading measure: capping it at 58ch
   clipped the tariff columns. It scrolls inside its own box, and the prose above
   and below stays on the measure. No min-width — that forced a fixed floor and
   clipped harder than the content did. */
.tablescroll { overflow-x: auto; margin: 0 0 1.35rem; max-width: 100%; }
.grid { border-collapse: collapse; width: 100%; font-size: .875rem; }
.grid th, .grid td { overflow-wrap: break-word; hyphens: auto; }
.grid th, .grid td {
  border-bottom: 1px solid var(--rule); padding: .5rem .6rem;
  text-align: left; vertical-align: top;
}
.grid th {
  font-family: var(--mono); font-size: var(--xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--rule-strong);
}
.grid tbody tr:last-child td { border-bottom: 0; }

.points, .steps { max-width: var(--measure); margin: 0 0 1.2rem;
  padding-left: 1.2rem; }
.points li, .steps li { margin-bottom: .45rem; }
.points li::marker { color: var(--accent); }
.steps { counter-reset: st; list-style: none; padding-left: 0; }
.steps li { counter-increment: st; position: relative; padding-left: 2rem;
  margin-bottom: .65rem; }
.steps li::before {
  content: counter(st); position: absolute; left: 0; top: .1rem;
  font-family: var(--mono); font-size: var(--sm); color: var(--accent);
  width: 1.4rem; text-align: right;
}

.ref {
  color: var(--fg); text-decoration: underline;
  text-decoration-color: var(--accent); text-decoration-thickness: 1px;
  text-underline-offset: .18em; padding: .05em .1em;
}
.ref:hover { text-decoration-thickness: 2px; }

/* Standalone mono links get a real target. Inline links inside a paragraph cannot
   be 44px tall without wrecking the line box, so they keep the padded hit area. */
.qlink, .idxmore, .slink, .up, .toclink {
  min-height: 2.75rem;
}
.qlink, .idxmore { display: inline-flex; align-items: center; }

/* ---- sources: ruled rows, never a bordered panel ---- */
.sources { border-top: 1px solid var(--rule-strong); }
.sources .wrap { padding-block: 1.4rem 1.6rem; }
/* The sources block shares the article body's measure and alignment, so its rules
   end where the body's do instead of sitting in a narrower centred band. Measured
   with `wrap narrow` its rule ended at x=958 while every other rule ended at 1280,
   the one asymmetric edge left on the page. */
.srccol { max-width: 62ch; }
.srcnote { font-size: var(--sm); color: var(--muted); margin: 0 0 .7rem;
  max-width: 52ch; }
.slist { border-top: 1px solid var(--rule); }
.srow {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: .2rem .7rem; align-items: baseline;
  padding: .55rem 0; border-bottom: 1px solid var(--rule);
  font-size: var(--sm);
}
.srow:last-child { border-bottom: 0; }
.snum { font-family: var(--mono); color: var(--accent); }
.sbody { display: flex; flex-direction: column; gap: .08rem; }
.spub { font-weight: 600; }
.stitle { color: var(--muted); }
.slink {
  font-family: var(--mono); font-size: var(--xs);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 2.75rem;
}
.slink:hover { text-decoration: underline; }

/* ---- form ---- */
.formwrap { margin-top: 2rem; padding-top: 1.2rem;
  border-top: 1px solid var(--rule-strong); }
.form { display: grid; gap: 1.1rem; max-width: 34rem; margin-top: 1.2rem; }
.field { display: grid; gap: .3rem; }
.label { font-family: var(--mono); font-size: var(--sm); font-weight: 600; }
.input {
  font: inherit; font-size: .9375rem; width: 100%; padding: .55rem .6rem;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--muted); border-bottom: 2px solid var(--fg);
  border-radius: 0; min-height: 2.75rem;
}
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea.input { min-height: 9rem; resize: vertical; }
select.input { appearance: none; cursor: pointer; }
.help { font-size: var(--sm); color: var(--muted); margin: 0; line-height: 1.4; }
.formnote {
  font-size: var(--sm); color: var(--fg); margin: 0;
  border-left: 2px solid var(--accent); padding-left: .7rem;
  max-width: none;
}

/* ---- footer ---- */
.foot { border-top: 1px solid var(--rule-strong); }
.footgrid {
  display: grid; gap: 1.4rem; padding-block: 1.5rem 1rem;
}
.footcol { display: flex; flex-direction: column; align-items: flex-start; }
.foothead {
  font-family: var(--mono); font-size: var(--xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .35rem;
}
.footlink {
  font-size: var(--sm); color: var(--fg); text-decoration: none;
  padding: .1rem 0; display: inline-flex; align-items: center;
  min-height: 2.75rem;
}
.footlink.strong { font-weight: 600; }
.footlink:hover { color: var(--accent); text-decoration: underline; }
.footbase {
  display: flex; flex-wrap: wrap; gap: .3rem 1rem;
  justify-content: space-between;
  border-top: 1px solid var(--rule); padding-block: .6rem 1rem;
}
.fine { font-size: var(--xs); color: var(--muted); margin: 0; }

/* ---- breakpoints: 560, 940, 1320. Exactly those three. ---- */
@media (min-width: 560px) {
  .qrow {
    grid-template-columns: 1.75rem minmax(0, 1fr) 11rem;
    grid-template-areas: "num text right";
    gap: .25rem 1.75rem;
    align-items: start;
  }
  /* The question column shrinks to its content instead of absorbing the free
     space, so the answer sits beside the question rather than across a void. */
  .qtext { max-width: 30ch; }
  .qright { align-items: flex-end; text-align: right; }
  .qfig { justify-content: flex-end; }
  /* Methodology rows go two-column once there is room for both. */
  .mrow {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: .2rem 2.5rem;
  }
  /* The aside form always stacks: it lives in a 26rem column. */
  .methodaside .mrow { grid-template-columns: minmax(0, 1fr); }
  .footgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entry { grid-template-columns: 1.6rem 7rem minmax(0, 1fr) 5rem; }
}

@media (min-width: 940px) {
  :root { --h1: 2.35rem; --h2: 1.5rem; }
  .barin { flex-wrap: nowrap; }
  .footgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Title block goes two-column: the plate fills what was empty white space. */
  /* Title block: type left, plate right, and the plate capped so it cannot push
     the answer schedule below the fold. Unconstrained it was 305px tall and put
     the first answer at y=578 on a 900px viewport. */
  .tbgrid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2.5rem;
    align-items: start; }
  /* Homepage title block: type left, contents right. The contents column must be
     wide enough for a full guide title, so the split is 1fr / 1fr rather than
     1.15/.85, and the text column keeps a measure. */
  .titleblock .tbgrid > .tbtext { max-width: 34rem; }
  .tbgrid:has(.toc) { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
  /* The title block carries the plate on the homepage, so its text column keeps a
     measure instead of stretching to fill. */
  .titleblock .tbgrid > .tbtext { max-width: 34rem; }
  .plateimgtop { object-position: center; }
  /* Homepage: schedule left, plate right in the space the capped table left empty.
     26rem, not 20: with the schedule at 38rem and a 2.5rem gutter, 20rem left a
     further 150px of void. 26rem closes the row. */
  .ansgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 2.5rem;
    align-items: start; }
  .ansgrid:has(.methodaside) { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    align-items: stretch; }
  .leadgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 2.5rem; }
  /* The margin becomes a real column: body left-heavy, annotation narrow.
     `minmax(0, var(--measure))` is wrong here — with a 0 min the track can be
     squeezed to nothing and the margin wins the free space, inverting the
     asymmetry. The body takes a fixed measure and the margin takes the rest. */
  .articlefolio {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    grid-template-areas: "body margin";
    gap: 0 var(--gutter);
    align-items: start;
  }
  /* The article body takes the first track and keeps its own reading measure;
     62ch measures 50-58 real characters per line, inside the 45-75 band. The
     margin is fixed so the two columns together fill the container instead of
     leaving a hole between them. */
  .body { grid-area: body; max-width: 62ch; }
  .margin { grid-area: margin; order: 0; position: sticky; top: 1rem;
    width: 100%; }
  .mrrow { grid-template-columns: 14rem minmax(0, 1fr); }
}

@media (min-width: 1320px) {
  :root { --h1: 2.6rem; --h2: 1.6rem;
    /* The container grows past 1800px without a fourth breakpoint. Below that
       62vw is under 70rem so the clamp returns 70rem and nothing changes; above
       it the container widens toward 88rem. At 2560 the container was 1120px,
       only 44% of the screen: correctly centred, but a narrow strip stranded in
       white. A clamp keeps the DNA's three breakpoints intact. */
    --wide: clamp(70rem, 62vw, 88rem); }
  .wrap { width: min(var(--wide), calc(100% - 5rem)); }
}