/* ==========================================================================
   Opportunity FLOPs — /methodology
   Loaded after base.css. Owns everything inside <main> on the methodology
   page and nothing else: the running head, masthead, registration marks,
   folio, sheet grid, footnote apparatus and colophon all come from base.css
   and must stay byte-identical to the calculator page.

   This route is the paper the calculator is the instrument for, so it is set
   as one: a title page, an abstract, numbered sections marked in the margin,
   display equations numbered flush right, notes hung beside the paragraph
   that cites them, and ruled plates with the caption below.

   Nothing here defines a parallel system. Every colour is an ink token, every
   space is on the 8/12/16/24/32/48/72/96/144 scale, every division is a rule
   or a change of type. There are no cards, no fills, no shadows and no radii
   in this document.
   ========================================================================== */

/* --- Measure -------------------------------------------------------------
   The measure is the whole point of the layout. Prose never runs wider than
   --measure even though the sheet's text column is far wider — the extra
   width belongs to plates, tables and equations, not to running text.

   The scoped --measure override that lived here is gone: Worker A retuned the
   token in base.css to the values solved on this page, so there is one
   definition again. The per-surface caps below stay, because the characters-
   per-ch ratio is a property of the face and no single token can serve the
   body sans and the display italic at once.
   ------------------------------------------------------------------------ */

.paper p,
.paper li,
.paper dd {
  max-width: var(--measure);
}

/* The folio is a structural rule that happens to be marked up as a paragraph.
   It carries the section mark, the short title and the ordinal across the
   foot of the text column, so it takes the column's width, not the prose
   measure — a folio rule that stops two thirds of the way across reads as a
   broken underline rather than as the foot of a page. */
.paper .folio {
  max-width: none;
}

/* --- Title page ----------------------------------------------------------
   A working paper opens with its own number, then the title, then who it is
   after and what state it is in. The reader should know it is a draft with
   unvalidated priors before reading a single equation.
   ------------------------------------------------------------------------ */

.frontmatter {
  padding: clamp(var(--s6), 8vw, var(--s8)) 0 var(--s7);
}

.paper-number {
  margin: 0 0 var(--s5);
  color: var(--ink);
  letter-spacing: var(--track-wide);
}

.frontmatter h1 {
  max-width: 15ch;
  margin: 0;
  font-size: var(--t-display);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.028em;
}

.paper .byline {
  /* Newsreader italic at lead size fits ~1.6 characters per ch, so even the
     tight measure runs to 82 here. Solved for the same ~68-character line the
     rest of the page holds; see the measure note at the head of this file. */
  max-width: 42ch;
  margin: var(--s4) 0 0;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-style: italic;
  line-height: 1.45;
}

/* The imprint line is apparatus, not prose: it sets in the body face at label
   size so it reads as a stamp on the title page rather than as a sentence —
   and it is uncapped for the same reason the folio is. Held to the prose
   measure it broke "Priors / unvalidated" across two lines, which reads as an
   accident rather than as a stamp. */
/* Separator on the preceding unit so the three parts wrap as units and a
   middot never lands at the head of a line — the same treatment base.css
   gives the running head. */
.imprint span:not(:last-child)::after {
  content: "·";
  margin: 0 0.55em;
  color: var(--rule-strong);
}

.paper .imprint {
  display: flex;
  flex-wrap: wrap;
  max-width: none;
  margin: var(--s2) 0 0;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--t-small);
}

/* Section headings that name a piece of apparatus rather than an argument —
   Abstract, Contents, where, Monte Carlo protocol. Small caps on a rule, so
   they read as labels on the page's structure and never compete with the
   numbered section headings. */
.apparatus-heading {
  margin: var(--s7) 0 var(--s3);
  padding-top: var(--s3);
  border-top: 2px solid var(--ink);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 600;
  font-variant-caps: all-small-caps;
  letter-spacing: var(--track-caps);
}

.abstract em {
  font-style: italic;
}

.keywords {
  max-width: var(--measure);
  margin: var(--s5) 0 0;
  padding-top: var(--s2);
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: var(--t-small);
}

.keywords .label {
  margin-right: var(--s2);
  color: var(--ink);
}

/* --- Contents ------------------------------------------------------------ */

.contents {
  margin-top: var(--s7);
}

.contents .apparatus-heading {
  margin-top: 0;
  border-top-width: 1px;
}

.contents ol {
  max-width: var(--measure);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contents li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3);
  border-bottom: 1px solid var(--rule);
}

/* The dotted leader is the classic table-of-contents rule, drawn as a
   flexible spacer so it fills whatever gap the title leaves. */
.contents li a {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  padding: var(--s2) 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  text-decoration: none;
}

.contents li a::after {
  content: "";
  flex: 1 1 auto;
  align-self: end;
  height: 1px;
  margin-bottom: 0.3em;
  border-bottom: 1px dotted var(--rule-strong);
}

.contents li a:hover,
.contents li a:focus-visible {
  color: var(--blue);
}

.contents .numeric {
  flex: 0 0 3.8ch;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-variant-numeric: lining-nums;
  letter-spacing: 0.04em;
}

/* --- Status marks --------------------------------------------------------
   Implementation status is never implied by placement or omission — every
   section carries it in words. An outlined small-caps stamp reads as an
   editorial mark rather than a UI chip, which keeps the fill count at zero.

   THE SEMANTIC INK RULE, applied. The status stamp is deliberately set in
   --ink and not in verdigris. Verdigris means SAFETY BENEFIT; "Implemented"
   is a fact about the build, not a quantity in the model, and colouring it
   with a model ink would make the ink mean two things. The one stamp that
   does take an ink is the caveat, which is ochre because ochre means
   UNCERTAINTY and that is exactly what it marks. Status is legible from the
   words either way, so nothing here is carried by colour alone.
   ------------------------------------------------------------------------ */

.status {
  flex: 0 0 auto;
  display: inline-block;
  padding: 2px 7px 1px;
  border: 1px solid currentColor;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 600;
  font-variant-caps: all-small-caps;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.08em;
  line-height: 1.5;
  white-space: nowrap;
}

.status.is-caveat {
  color: var(--ochre-text);
}

/* --- Sections ------------------------------------------------------------ */

.part {
  padding: var(--s7) 0 var(--s6);
  border-top: 1px solid var(--rule);
}

.part h2 {
  margin: 0;
  font-size: var(--t-headline);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.part h3 {
  max-width: var(--measure);
  margin: var(--s6) 0 0;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.01em;
}

.part p {
  margin: var(--s4) 0 0;
  line-height: 1.62;
  text-wrap: pretty;
}

.part h3 + p {
  margin-top: var(--s2);
}

/* --- Equations -----------------------------------------------------------
   Display equations centre on the text measure with the number set flush
   right, balanced by an equal gutter on the left so the body stays on the
   column's true centre. Both gutters collapse on narrow screens, where the
   equation left-aligns and the number follows it.

   The body column is exactly the measure, so a centred equation shares its
   centre with every paragraph around it. Uncapped, equations centre on the
   full sheet column and drift right of the text they belong to.
   ------------------------------------------------------------------------ */

.equation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4rem;
  align-items: baseline;
  gap: var(--s2);
  max-width: calc(var(--measure) + 4rem);
  margin: var(--s5) 0;
}

.eq-body {
  grid-column: 1;
  font-family: var(--font-math);
  font-size: clamp(1.02rem, 1.5vw, 1.24rem);
  font-variant-numeric: lining-nums;
  line-height: 1.85;
  text-align: center;
  text-wrap: balance;
}

.eq-body i,
.eq-body var {
  font-size: 1.06em;
}

/* Stacked super/subscript, as in C_R^B. Set side by side — `<sub>R</sub>
   <sup>B</sup>` — the two marks read as a sequence and the eye has to work
   out that both attach to the same C. Stacked, they read as one compound
   symbol, which is what they are and how the source sets them.

   The pair is boxed and shifted as a unit rather than relying on the default
   sup/sub vertical-align, which would offset each line independently and pull
   the stack apart. `line-height` is what keeps the two marks tight enough to
   read as one mark rather than two. */
.supsub {
  display: inline-block;
  position: relative;
  vertical-align: -0.38em;
  margin-left: 0.06em;
  font-size: 0.66em;
  line-height: 1.02;
  text-align: left;
}

.supsub > sup,
.supsub > sub {
  display: block;
  position: static;
  font-size: 1em;
  line-height: inherit;
  vertical-align: baseline;
}

.eq-no {
  grid-column: 2;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
}

/* --- Where-clauses and the protocol --------------------------------------
   Ruled, never boxed: a rule above, a rule below, hairlines between rows,
   and no vertical rules at all. The symbol sits in its own column and the
   gloss runs on, which is a hanging indent expressed as a table because the
   pairs are data, not a definition list of prose.
   ------------------------------------------------------------------------ */

.where-table,
.protocol-table {
  width: 100%;
  max-width: var(--measure);
  margin: var(--s4) 0 0;
  border-collapse: collapse;
}

/* Margin and padding reset in full, not just on the sides being set: a
   caption is a table-caption box and inherits nothing useful, so leaving one
   side undeclared lets any class on the element supply it. */
.where-table caption,
.protocol-table caption {
  margin: 0;
  padding: 0 0 var(--s2);
  border: 0;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-style: italic;
  font-variant-caps: normal;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}

.where-table th,
.where-table td,
.protocol-table th,
.protocol-table td {
  padding: var(--s2) var(--s3);
  border-top: 1px solid var(--rule);
  text-align: left;
  vertical-align: baseline;
}

.where-table tr:first-child th,
.where-table tr:first-child td,
.protocol-table tr:first-child th,
.protocol-table tr:first-child td {
  border-top: 1px solid var(--rule-strong);
}

.where-table tr:last-child th,
.where-table tr:last-child td,
.protocol-table tr:last-child th,
.protocol-table tr:last-child td {
  border-bottom: 1px solid var(--rule-strong);
}

.where-table th:first-child,
.where-table td:first-child,
.protocol-table th:first-child,
.protocol-table td:first-child {
  padding-left: 0;
}

.where-table th {
  width: 6rem;
  font-family: var(--font-math);
  font-size: 1.02rem;
  font-style: italic;
  font-weight: 400;
  white-space: nowrap;
}

.where-table td,
.protocol-table td {
  color: var(--muted);
  font-size: var(--t-small);
  line-height: 1.55;
}

.protocol-table {
  margin-top: var(--s5);
}

.protocol-table th {
  width: 10rem;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 600;
  font-variant-caps: all-small-caps;
  letter-spacing: var(--track-caps);
}

/* --- Plates --------------------------------------------------------------
   base.css's .plate is the calculator's figure plate: cool-white stock inset
   into the ivory page, because the six frozen traces were chosen against
   near-white and the White Plate Rule protects that.

   A table is not a figure. Boxing a table on its own stock would make it a
   card — and Task 2 is explicit that the parameter table is ruled, never
   boxed. So the paper's plates take the same numbering, the same caption
   grid and the same rule vocabulary, on the ivory page instead of on stock.
   Same system, different substrate.
   ------------------------------------------------------------------------ */

.plate-ruled {
  margin: var(--s5) 0 0;
  padding: 0;
  background: none;
  border: 0;
}

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.plate-ruled figcaption {
  /* +3rem, not +6rem: the caption index hangs in the first grid column, so
     the text column of the caption is what has to stay under 72 characters. */
  max-width: calc(var(--measure) + 3rem);
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: var(--t-small);
  line-height: 1.5;
}

/* THE SEMANTIC INK RULE, applied again. base.css sets .fig-no in oxidized
   orange, on the stated grounds that orange means CAPABILITY COST and the
   calculator's figures are the cost accounting. That reasoning does not carry
   to this page: Table 2 is notation and Table 5 is a parameter contract,
   neither of which is a cost. An ink used because the neighbouring page uses
   it is decoration, so table numbers are set in ink — same size, same weight,
   same tracking as .fig-no, so the two pages still read as one publication. */
.caption-index {
  grid-column: 1;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 700;
  font-variant-caps: all-small-caps;
  font-variant-numeric: lining-nums;
  letter-spacing: var(--track-caps);
  white-space: nowrap;
}

.caption-text {
  grid-column: 2;
}

/* --- Tables --------------------------------------------------------------- */

.summary-table,
.preset-matrix,
.notation-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--ink);
  text-align: left;
}

/* Plates are capped near the measure. A two-row table stretched across the
   full sheet column reads as a layout accident, not as a table. */
.summary-table {
  min-width: 520px;
  max-width: calc(var(--measure) + 4rem);
  font-size: var(--t-small);
}

.notation-table {
  min-width: 640px;
  max-width: calc(var(--measure) + 6rem);
  font-size: var(--t-small);
}

.summary-table th,
.summary-table td,
.notation-table th,
.notation-table td {
  padding: var(--s2) var(--s3);
  border-top: 1px solid var(--rule);
  vertical-align: top;
}

.summary-table thead th,
.notation-table thead th,
.preset-matrix thead th {
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 600;
  font-variant-caps: all-small-caps;
  letter-spacing: var(--track-caps);
  white-space: nowrap;
}

.summary-table tbody th {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  white-space: nowrap;
}

.notation-table tbody td {
  color: var(--muted);
  line-height: 1.45;
}

.summary-table tbody tr:last-child th,
.summary-table tbody tr:last-child td,
.notation-table tbody tr:last-child th,
.notation-table tbody tr:last-child td {
  border-bottom: 1px solid var(--rule);
}

.summary-table th:first-child,
.summary-table td:first-child,
.notation-table th:first-child,
.notation-table td:first-child {
  padding-left: 0;
}

.summary-table th:last-child,
.summary-table td:last-child,
.notation-table th:last-child,
.notation-table td:last-child {
  padding-right: 0;
}

/* Numbers set in the mono face so the columns align optically as well as
   metrically; row stubs stay in the body face so they read as words.

   No `text-transform: uppercase` here, unlike other mono readouts in the
   system. These tables are keyed by symbols, and uppercasing a symbol changes
   what it means: it rendered β, γ and δ as Β, Γ and Δ, and the impact level z
   as Z. Word headers take small caps instead, which changes the glyphs' case
   without changing the characters. */
.preset-matrix {
  min-width: 420px;
  max-width: 620px;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.055em;
  text-align: right;
}

.preset-matrix th,
.preset-matrix td {
  padding: 11px var(--s2);
  border-top: 1px solid var(--rule);
  white-space: nowrap;
}

.preset-matrix th:first-child {
  padding-left: 0;
  text-align: left;
}

.preset-matrix th:last-child,
.preset-matrix td:last-child {
  padding-right: 0;
}

.preset-matrix tbody th {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: normal;
}

.preset-matrix tbody tr:last-child th,
.preset-matrix tbody tr:last-child td {
  border-bottom: 1px solid var(--rule);
}

/* Cells whose content is a symbol rather than a word. Set in the serif italic
   the equations use, at their own case, so β in Table 3 is the same mark as β
   in equation (2.1). */
.sym,
.notation-table .sym,
.preset-matrix .sym {
  font-family: var(--font-math);
  font-size: 1rem;
  font-style: italic;
  font-variant-caps: normal;
  font-weight: 500;
  letter-spacing: normal;
}

.notation-table thead .sym,
.preset-matrix thead .sym {
  color: var(--muted);
}

/* --- The two user inputs -------------------------------------------------- */

.input-list {
  max-width: var(--measure);
  margin: var(--s4) 0 0;
  padding: 0 0 0 var(--s5);
  border-top: 1px solid var(--rule);
}

.input-list li {
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
}

.input-list li::marker {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.input-list strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 500;
}

.input-list span {
  display: block;
  max-width: var(--measure-tight);
  margin-top: var(--s1);
  color: var(--muted);
  font-size: var(--t-small);
  line-height: 1.55;
}

/* --- Divider between the specification and the implementation record ------ */

.part-rule {
  margin-top: var(--s7);
  padding-top: var(--s2);
  border-top: 2px solid var(--ink);
}

.part-rule p {
  margin: 0;
  padding: 0;
  border: 0;
}

/* The divider already rules off the section that follows it; that section's
   own hairline on top of it just reads as a printing fault. */
.part-rule + .part {
  border-top: 0;
}

/* --- Uncertainty ---------------------------------------------------------
   THE SEMANTIC INK RULE, third application, and the one that matters most on
   this page. Ochre means UNCERTAINTY. Every place the paper rests on an
   assumed prior rather than a supplied specification is marked in ochre, and
   marked with a *hatch* rather than a solid rule — a screen, per the Halftone
   Rule, drawn from base.css's --hatch. A band drawn in a solid ink would be
   claiming a precision the model does not have, which is the exact failure
   this section exists to prevent.

   These were oxidized orange before. Orange means capability cost. A caveat
   about a working prior is not a cost, so the orange was decoration.
   ------------------------------------------------------------------------ */

.caveat-notice {
  position: relative;
  max-width: var(--measure);
  margin: var(--s4) 0 0;
  padding-left: var(--s4);
  color: var(--ochre-text);
  font-size: var(--t-small);
  line-height: 1.55;
}

.caveat-notice::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  bottom: 0.25em;
  width: 5px;
  background-color: var(--ochre);
  -webkit-mask-image: var(--hatch);
  mask-image: var(--hatch);
  -webkit-mask-size: 7px 7px;
  mask-size: 7px 7px;
}

/* --- § 9, limitations ----------------------------------------------------
   The credibility section. It is not visually louder than the rest of the
   paper — a caveat set in a warning box is a caveat the reader learns to
   skip. It is marked the same way every other uncertainty on the page is
   marked, which is what makes the marking mean something.
   ------------------------------------------------------------------------ */

.is-limitations .standfirst {
  position: relative;
  /* Newsreader at lead size fits more characters per ch than Fira at body
     size; the tight measure is what lands this back under 72. */
  max-width: var(--measure-tight);
  margin: var(--s4) 0 0;
  padding-left: var(--s4);
  font-family: var(--font-display);
  font-size: var(--t-lead);
  line-height: 1.5;
}

.is-limitations .standfirst::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  bottom: 0.3em;
  width: 5px;
  background-color: var(--ochre);
  -webkit-mask-image: var(--hatch);
  mask-image: var(--hatch);
  -webkit-mask-size: 7px 7px;
  mask-size: 7px 7px;
}

/* --- Parameter contract --------------------------------------------------- */

.parameter-contract {
  margin-top: var(--s5);
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}

.parameter-contract summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.08rem;
  cursor: pointer;
  list-style: none;
}

.parameter-contract summary::-webkit-details-marker {
  display: none;
}

/* Cobalt means COORDINATION, and on the calculator it is the ink of every
   control. This disclosure is a control, so it takes the same ink. */
.parameter-contract summary::after {
  content: "+";
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
}

.parameter-contract[open] summary::after {
  content: "−";
}

.parameter-contract summary:hover {
  color: var(--blue);
}

.parameter-contract .plate-ruled {
  margin-top: 0;
}

.parameter-contract-table {
  max-width: 100%;
  padding-bottom: var(--s3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.parameter-contract table {
  width: 100%;
  min-width: 740px;
  border-collapse: collapse;
  color: var(--ink);
  font-size: 0.76rem;
  line-height: 1.35;
}

.parameter-contract th,
.parameter-contract td {
  padding: 9px var(--s2);
  border-top: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.parameter-contract th:first-child,
.parameter-contract td:first-child {
  padding-left: 0;
}

.parameter-contract th:last-child,
.parameter-contract td:last-child {
  padding-right: 0;
}

.parameter-contract thead th {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 600;
  font-variant-caps: all-small-caps;
  letter-spacing: var(--track-caps);
}

.parameter-contract tbody th {
  white-space: nowrap;
  font-family: var(--font-math);
  font-size: 0.86rem;
  font-weight: 600;
}

.parameter-contract tbody td:nth-child(3),
.parameter-contract tbody td:nth-child(4) {
  color: var(--muted);
}

/* The one row the source does not supply. Ochre, because that is what the
   row is: an assumption. Legible from the words in the cell as well as from
   the ink, so nothing is carried by colour alone. */
.parameter-contract tbody .is-pending-row td:nth-child(3),
.parameter-contract tbody .is-pending-row td:nth-child(4) {
  color: var(--ochre-text);
}

.paper .closing {
  max-width: 42ch;
  margin-top: var(--s6);
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-style: italic;
}

.closing a {
  text-underline-offset: 4px;
}

/* --- Entrance ------------------------------------------------------------
   One orchestrated reveal in reading order: running head, then title, then
   abstract, then the apparatus below it.

   THE CONTAINING BLOCK RULE. Only the title block translates. Everything
   from the abstract down fades without transform, because a transform —
   including an identity matrix — creates a containing block, and a containing
   block on .frontmatter or .part breaks position: fixed for the registration
   marks and would break any sticky element inside the sheet. base.css
   neutralises all of this under prefers-reduced-motion.
   ------------------------------------------------------------------------ */

.running-head {
  animation: fade 420ms var(--ease-out) both;
}

.frontmatter h1,
.paper-number {
  animation: rise 620ms var(--ease-out) 120ms both;
}

.byline,
.imprint {
  animation: rise 620ms var(--ease-out) 200ms both;
}

.frontmatter > .apparatus-heading,
.abstract {
  animation: fade 620ms var(--ease-out) 300ms both;
}

.keywords,
.frontmatter .plate-ruled,
.frontmatter .marginalia,
.contents {
  animation: fade 620ms var(--ease-out) 400ms both;
}

/* --- Responsive ----------------------------------------------------------- */

/* On a wide screen the sheet's text column runs past 1200px, which strands
   the parameter contract's Role column and leaves a standing void down the
   right of every section. Capping the sheet turns that slack into an outer
   margin — the asymmetric one a book uses, narrow at the spine where the
   notes hang and generous at the fore-edge. Left register with the masthead
   and the running head is preserved. */
@media (min-width: 1240px) {
  .paper .sheet,
  .paper .colophon-device {
    max-width: calc(var(--margin-col) + var(--s6) + 56rem);
  }
}

@media (max-width: 1020px) {
  .frontmatter h1 {
    max-width: 18ch;
  }

  /* base.css's collapse rule re-declares `display: flex` on .section-mark but
     never clears the `flex-direction: column` it set at full width, so the
     mark and its status stamp stay stacked and the stamp lands hard against
     the heading with nothing between them. Restated here rather than edited
     into base.css, which is Worker A's — filed as PUNCHLIST A13, because the
     calculator's section marks collapse through the same rule. */
  .section-mark {
    flex-direction: row;
    /* Not baseline: an inline SVG's baseline is its bottom edge, so the
       device floats above the § mark and the stamp instead of sitting with
       them. Centre is what reads as one row. */
    align-items: center;
    gap: var(--s3);
    margin-bottom: var(--s3);
  }

  /* Off the margin column the note is an inline aside. base.css gives it the
     ink rule on the left; the number stays hung so the reciprocal reference
     still reads. */
  .footnote {
    font-size: var(--t-small);
  }
}

@media (max-width: 760px) {
  .frontmatter {
    padding-top: var(--s6);
  }

  .equation {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s3);
    margin: var(--s4) 0;
  }

  .eq-body {
    text-align: left;
  }

  .where-table th {
    width: 4.5rem;
  }

  .protocol-table th {
    width: 8rem;
  }

  .where-table th,
  .where-table td,
  .protocol-table th,
  .protocol-table td {
    padding: var(--s2) var(--s2);
  }

  /* The entry stays on one line: the leader is a flexible spacer, so it
     shrinks to nothing when the title and the status stamp need the room.
     Wrapping the stamp onto its own line doubled the height of every entry
     and buried the numbering. */
  .contents li a {
    gap: 0.5em;
    font-size: 1rem;
  }

  .contents li a::after {
    margin-inline: 0.15em;
  }

  .contents .status {
    padding: 2px 5px 1px;
    letter-spacing: 0.05em;
  }

  .part {
    padding-top: var(--s6);
  }

  .part h3 {
    margin-top: var(--s5);
  }
}

/* 360px is where this class of layout dies: the tables are the widest thing
   in the document and the sheet has no margin column left to give them. Each
   scrolls inside its own container rather than pushing the page sideways. */
@media (max-width: 420px) {
  .frontmatter h1 {
    max-width: none;
    letter-spacing: -0.02em;
  }

  .abstract p {
    font-size: 1.06rem;
  }

  .input-list {
    padding-left: var(--s4);
  }

  .caveat-notice,
  .is-limitations .standfirst {
    padding-left: var(--s3);
  }
}

/* --- Section devices -----------------------------------------------------
   One drawn plate per section, hung in the margin column under the § mark and
   its status stamp. Each carries a link in the causal chain the model
   describes — compute, software progress, capability, risk, safety benefit —
   and each is built from hairline construction plus at most one spot ink.

   They are diagrams, not icons. Every one draws a quantity the section
   actually defines: § 1 is the unit compute bar with the reallocated share
   screened, § 4 is the normalized-constant baseline with the policy path
   decaying away from it, § 7 is the triangular prior read at three marginal
   percentiles. Nothing here is a glyph standing in for an idea.

   THE SEMANTIC INK RULE decides the ink, section by section, and two of the
   ten take none. § 1 and § 5 are verdigris because they draw the alignment
   share and the safety benefit. § 2 and § 3 are orange because they draw the
   capability cost channel. § 4, § 7 and § 9 are ochre and screened through
   --hatch because each rests on an assumed prior. § 6 is cobalt because it
   draws the controls. § 8 and § 10 are ink alone — normalization and the
   parameter contract are structure, not model quantities, and an ink applied
   to them because the neighbouring devices have one would be decoration.
   ------------------------------------------------------------------------ */

.ink-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.device {
  /* Its own row in the margin column, level with the first paragraph — not
     inside .section-mark. Riding with the § mark made the margin item taller
     than the heading, which stretched the grid row and opened a gap between
     every heading and its opening sentence. */
  grid-column: 1;
  justify-self: end;
  width: 120px;
  height: 64px;
  margin-top: 0.5em;
  overflow: visible;
}

/* --- The colophon device -------------------------------------------------
   A printer's mark at the foot of the paper. Orb-and-cross, the oldest device
   in the trade, redrawn on the same grid as everything above it.

   THE LOUD INK RULE. This is the only fluoro in the file — one drawn mark, no
   data, no control, no text. It is deliberately the last thing on the page:
   high-energy ink in the art, sober ink in the figures.

   It sits inside <article class="paper">, not in <footer>. The footer is
   shared chrome that has to stay identical to the calculator; the paper's own
   colophon is the paper's business.
   ------------------------------------------------------------------------ */

.colophon-device {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s7);
  padding-top: var(--s6);
  border-top: 1px solid var(--rule);
}

.colophon-device svg {
  width: 44px;
  height: 52px;
}

.paper .colophon-line {
  max-width: none;
}

/* Separator on the preceding unit, not the following one: as ::before it
   breaks to the head of the next line and reads as a stray mark. */
.colophon-line span:not(:last-child)::after {
  content: "·";
  margin: 0 0.55em;
  color: var(--rule-strong);
}

.colophon-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--t-micro);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--track-wide);
  text-align: center;
}

@media (max-width: 1020px) {
  /* The margin column is gone; the device runs in beside the § mark rather
     than being dropped. It is carrying a link in the causal chain, so losing
     it would lose content, not ornament. */
  .device {
    justify-self: start;
    width: 96px;
    height: 51px;
    margin-top: 0;
    margin-bottom: var(--s3);
  }
}

/* --- The devices draw themselves -----------------------------------------
   Each section device plots in as it scrolls into view, hairline first, the
   way a pen plotter lays a figure down. It is the brief's chart-recorder idea
   applied to the drawn plates rather than to the charts.

   Done on a scroll-driven timeline with no JavaScript at all — this page is
   script-free and a test asserts it stays that way. `animation-timeline:
   view()` ties each device's progress to its own position in the viewport, so
   a device eight sections down draws when the reader reaches it rather than
   having already finished before it was ever on screen.

   Two guards, and both matter:

   `:not([stroke-dasharray])` — § 4 and § 5 draw their normalized baselines as
   real dashed rules. Setting a dash pattern on those to animate them would
   overwrite the pattern that carries the meaning, so they fade instead.

   `@supports` — engines without scroll-driven animation get the finished
   drawing, not a blank box. The declaration only ever removes ink that the
   timeline then puts back, so failing to apply it is the safe direction.

   The whole block sits inside prefers-reduced-motion: no-preference, so a
   reader who asked for no motion is served the completed plates directly
   rather than a neutralised animation.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .device [stroke]:not([stroke-dasharray]) {
      /* Longer than any path in a 120×64 device, so the dash reads as one
         solid stroke once the offset reaches zero. */
      stroke-dasharray: 520;
      animation: device-plot linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 95%;
    }

    /* Screened and hatched areas cannot be drawn, so they arrive with the
       stroke work rather than after it. */
    .device [fill^="url"] {
      animation: device-ink linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 100%;
    }
  }
}

@keyframes device-plot {
  from {
    stroke-dashoffset: 520;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes device-ink {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* --- Screened marks ------------------------------------------------------
   THE HALFTONE RULE says a tint is a dot screen, never an opacity fade and
   never a gradient. base.css ships four screen densities and a hatch that the
   pages had barely touched.

   The first thing I tried here was a 10% ochre screen across the whole of
   § 9. It was wrong twice over: at full ochre saturation a 10% screen reads
   as a solid tan panel rather than as stock, it cost the section real
   legibility, and a tinted rectangle with type on it is a card however it is
   drawn. It also fought the grain layer, which the brief already caps at one.

   What replaced it is the printed convention for exactly this job — a change
   bar. A hatched ochre rule runs the full height of § 9 in the margin, the
   way a revised passage is marked in a specification. It says "this whole
   section is qualified" without tinting a single word, and hatch is already
   the mark uncertainty carries everywhere else on the page.
   ------------------------------------------------------------------------ */

.is-limitations {
  position: relative;
}

.is-limitations::before {
  content: "";
  position: absolute;
  top: var(--s6);
  bottom: var(--s6);
  left: 0;
  width: 6px;
  background-color: var(--ochre);
  -webkit-mask-image: var(--hatch);
  mask-image: var(--hatch);
  -webkit-mask-size: 7px 7px;
  mask-size: 7px 7px;
  pointer-events: none;
}

/* The seam between the specification and the record of what was built. A
   printer would screen it; so does this. */
.part-rule {
  position: relative;
}

.part-rule::after {
  content: "";
  /* A ::after on a grid container is a grid item, and base.css's `.sheet > *`
     put it in the margin column — the band sat beside the divider instead of
     under it. It spans the whole sheet, matching the 2px rule above it. */
  grid-column: 1 / -1;
  display: block;
  height: 8px;
  margin-top: var(--s2);
  background-color: var(--ink);
  -webkit-mask-image: var(--screen-25);
  mask-image: var(--screen-25);
  -webkit-mask-size: 8px 8px;
  mask-size: 8px 8px;
}

@media (max-width: 1020px) {
  /* The margin column is gone; the change bar would land on the text. */
  .is-limitations::before {
    display: none;
  }
}