/* metalign handbook — the second page, and the only one that scrolls. No build step and no dependencies, like everything else here. This sheet is loaded *after* css/site.css and does not replace it. site.css owns the five @font-face rules, the palette, the base type, .reader-only and the wordmark, so the handbook renders in the same ink as the landing page and there is exactly one copy of the brand in this repo. What follows undoes the one-screen poster layout — the svh grid, the centred main, the footer pinned to the bottom edge — and turns it into a document. Everything here is scoped to .handbook on , so nothing in this file can reach index.html even by accident. Where a rule fights one of site.css's, it wins on specificity rather than on order: site.css's height-keyed media queries at the bottom of that file still tighten what they can, and a one-class selector there loses to a two-class selector here whatever the viewport is doing. ── The form ───────────────────────────────────────────────────────────────────────────── A published film datasheet. The discipline the form actually carries — and the reason it was chosen over an editorial page for a document that is looked *up* as much as read — is that **every fact has a coordinate**: a clause number, a table row, a figure number. Nothing floats. Three rules follow from that and are worth stating once here rather than defending at every declaration below: 1. **One rail, one left edge.** Clause numbers hang left; every heading title and every line of body text on the page shares the same left edge, from §1 to the footer. That alignment is the whole composition — it is why there is no sidebar and no card. The margin index further down this file is not a counter-example: it is fixed out in the window's own margin at 90rem and up, and the sheet neither moves nor narrows for it. 2. **Fields, not floating hairlines.** A table head is a filled ground; a notice is a bounded box. Ruled fields are what a datasheet uses to separate things, and they carry structure at page scale rather than whispering it. 3. **Amber is a fault, and nothing else.** It marked two things until 24.08.2026 — what you can act on, and what is wrong — and the first half was the bigger half, drawing every link underline on the page. Then the landing page's monochrome finishes went site-wide, which left the working colour as the ink and links reading by the weight of the rule under them. So the amber narrowed to the half that had nowhere else to go and was renamed for it: `var(--fault)`, twice on this page — §4's major notice, and the rows Fig. 6's ladder raises a warning about. `var(--accent)` still exists and is the ink; anything below still naming it means "what you act on", and none of it is amber any more. The warmth is in the content and the type — XCharter titles, prose set at a real measure, the app's own voice — and the rigour is in the frame. A datasheet that is only rigour reads as a specification for a product nobody loves, which is the one risk this direction was chosen with its eyes open about. */ /* ---------- Tokens this page adds ---------- */ .handbook { /* The prose measure, and the rail the clause numbers hang in. --doc is the *text* column; the page box is --doc + --num, so a heading's number sits outside the measure and its title starts on the same edge as the paragraph below it. 37rem lands Instrument Sans at about 68 characters, inside the 65–75 a long technical read wants. The old sheet used 44rem, which measured nearer 88 — comfortable for a magazine column and too wide for a page somebody scans for one tag name. */ --doc: 37rem; --num: 3.5rem; /* Wider than the prose, for the three things that are not prose: a table, the route blocks, and the pairing ladder. A technical document has always done this — the text column is set for reading and the tables are set for the data — and measuring it showed why it is not optional here. Held to --doc, the three route blocks came out at 190px each and wrapped every bullet after three words, and the §6 matrix put four columns into 592px. The prose keeps --doc; only these break out, and they break out to the right from the same left edge, so the rail still runs unbroken down the page. */ --wide: 50rem; /* The grounds (--band, --field) and the heavier rule (--rule-2) lived here while only this page set ruled fields. The landing page sets them too now, so all three moved to site.css's tokens (23.08.2026) — one copy of the palette, living with the rest of it. */ /* How tall a phone screenshot is allowed to be. A screenshot is the one thing on this page that has to be sized by its *height*: a phone is about 0.46 as wide as it is tall, so a capture given the full measure would stand 80rem high and the reader would scroll four screens to get past one picture. Cap the height, let the width follow. */ --shot: 26rem; /* One row of the pairing ladder (Fig. 6). Fixed, because the figure's whole mechanism is that the left column moves by exactly two rows — see .ladder. */ --rung: 3.5rem; } /* ---------- Undoing the one screen ---------- */ .handbook { /* site.css sizes the body to the viewport and splits it into a 1fr row plus a footer. A document is as tall as it is. */ display: block; min-height: 0; row-gap: 0; /* Every number on this page is either a coordinate (a clause, a figure, a row) or a measurement, and both want to line up in a column rather than set prettily. This is one of the browser surfaces that ships with no design system attached until somebody says so — the same reason site.css themes the selection. */ font-variant-numeric: tabular-nums; } /* The page box: the widest thing on the page plus the rail its clause numbers hang in. Every top-level block gets the same box and therefore the same left edge — that shared edge is the composition, so the blocks are never centred independently of one another. What varies is how much of the box each thing *uses*, and that is set just below. */ .handbook .sheet-head, .handbook .contents, .handbook .sec, .handbook footer { width: 100%; max-width: calc(var(--wide) + var(--num)); margin-inline: auto; } /* Prose holds the measure. Everything here is left-aligned inside the wider box, so capping it pulls the right edge in and never moves the left one. */ .handbook .standfirst, .handbook .sheet-id, .handbook .sec > p, .handbook .sec > ul, .handbook .sec > ol:not(.procedure), .handbook .step > p, .handbook .step > ul, .handbook .step > .gloss, .handbook .notice, .handbook .fig:not(.fig-wide), .handbook footer p { max-width: var(--doc); } /* Headings start one rail to the left of the prose, so their cap includes it — otherwise a title would measure --num narrower than the paragraph under it. */ .handbook h2, .handbook .step > h3, .handbook .contents ol { max-width: calc(var(--doc) + var(--num)); } /* Everything indents by the rail, so the whole sheet has one text edge and one margin — the masthead's title, the contents' entries, all seven sections and the footer. This used to apply to the numbered sections alone, on the reasoning that the document's own title should span the full box. That reasoning was wrong in a way only a wide screen shows: it left the top of the page sitting a whole rail to the left of every word below it, so the masthead and the body had two different left edges. At a 3.5rem rail that read as a masthead spanning wide; at 7rem it read as a mistake, which is what it always was. What hangs in the margin is the apparatus — clause numbers, figure numbers, the edition mark — and nothing else crosses into it. */ .handbook .sheet-head, .handbook .contents, .handbook .sec, .handbook footer { padding-left: var(--num); } /* The edition mark, out in the margin beside the title. Hidden until the rail is wide enough to be a margin — see the wide-screen query near the end of this file. */ .handbook .sheet-head { position: relative; } .handbook .sheet-mark { display: none; position: absolute; left: 0; top: 0.4rem; width: var(--num); margin: 0; padding-right: 0.75rem; font-family: var(--sans); /* 0.78rem, like every other muted-uppercase-letterspaced label on this page — the floor this file states for that combination in two other places and which this one was set below. Small type in a margin invites being made smaller; three things are already working against legibility here before the size does. */ font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.5; color: var(--muted); } .handbook .sheet-mark span { display: block; font-weight: 400; letter-spacing: 0.02em; } .handbook main { /* Not the centred grid of gaps site.css gives it: the sections set their own rhythm. */ display: block; align-self: auto; max-width: none; margin: 0; } /* p { margin: 0 } is right for six blocks laid out on a grid and wrong for prose. */ .handbook p, .handbook ul, .handbook ol { margin: 0 0 1.1em; } .handbook li + li { margin-top: 0.5em; } .handbook ul, .handbook ol { padding-left: 1.15em; } .handbook li::marker { color: var(--muted); } /* Every bulleted list on this page sits inside
  • or inside the procedure's
      , and the UA stylesheet's `ol ul, ul ul { list-style-type: circle }` therefore caught all of them: the steps and the three route blocks were drawn with hollow rings rather than the discs a first-level list gets. Nothing here is a nested list conceptually — they are all first-level lists that happen to live inside a numbered clause — so they are set that way. */ .handbook .step ul, .handbook .route ul, .handbook .sec > ul { list-style-type: disc; } /* ---------- Skip link ---------- The page opens on a masthead and a contents table; a keyboard reader who wants neither should not have to tab through eight links to reach the document. Visible only on focus, and drawn in the same field the notices use so it belongs to the page rather than to the browser. */ .handbook .skip { position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%); z-index: 120; padding: 0.6rem 1.1rem; background: var(--field); color: var(--ink); border: 1px solid var(--rule-2); border-top: none; /* 0.3rem, the one radius the bounded fields on this page use. 0.4 was a value invented for this element alone. */ border-radius: 0 0 0.3rem 0.3rem; font-size: 0.9rem; text-decoration: none; } .handbook .skip:focus-visible { transform: translate(-50%, 0); } /* ---------- The running head ---------- A datasheet prints its section at the head of every page. A scrolling document has no pages, so this band does that job — and with the margin index below it, this page's wayfinding is still the deliberate alternative to the sidebar-plus-anchor-rail that every documentation template ships. A contents table at the top says what is here; the running head says where you are; the margin index says where else there is. None of the three costs a permanent column of the screen, which is the whole test. [hidden] in the markup and un-hidden by the script, so a reader with no JavaScript is never shown an empty bar. */ .handbook .runhead { position: sticky; top: 0; z-index: 50; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; /* Full-bleed out of the padded body, so the band reaches both edges of the window the way a printed running head reaches its margins. */ margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0; padding: 0.7rem var(--pad); background: var(--paper); border-bottom: 1px solid transparent; font-family: var(--sans); font-size: 0.82rem; color: var(--muted); /* Until a section owns it the band is invisible ink on the paper it sits on; it appears with the first section rather than hanging over the masthead saying nothing. */ opacity: 0; transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1); } .handbook .runhead.is-live { opacity: 1; border-bottom-color: var(--rule); } .handbook .runhead-doc { font-style: italic; font-family: var(--serif); } .handbook .runhead-sec { color: var(--ink-2); font-weight: 600; /* The § and the title are separated by two spaces in the script's string; without this the browser collapses them to one. */ white-space: pre; overflow: hidden; text-overflow: ellipsis; } /* ---------- The margin index ---------- The running head's other half, and the answer to a real gap in the one above: the head names the section you are in and takes you nowhere, so a reader who wanted §5 from inside §2 had to scroll back to the top of the document to find the contents table. Wayfinding that only reports is half a device on a page whose whole claim is that it is looked up as much as read. It is a margin index and not a sidebar, and that distinction is the only reason it can exist on this sheet. It is fixed out in the *window's* margin at 90rem and up, where the page box is 63rem and there is 13.5rem of nothing on either side of it. The document does not move, does not narrow, and does not gain a second left edge: the apparatus simply reaches further out than the clause numbers already do, which is where a printed sheet has always kept its index. Below 90rem there is no margin to put one in, so there is none — and nothing down there is any worse than it was. Fixed rather than sticky: it is furniture of the window, not of the sheet. */ .handbook .doc-index { display: none; } /* Only where the numbers actually work. 90rem is the first width at which the index (9rem) and its gap to the sheet (2rem) fit inside the 13.5rem the centred page box leaves, with 2.5rem still between the index and the window edge — measured at 1440, which is the width this is tightest at and the one a reader is most likely to be at. Wider, all of the slack goes to that outer margin and none of it to the gap, because the gap is the relationship that matters: a constant 2rem is what makes this read as the sheet's own margin rather than as a panel floating near it. That is also why the offset is measured from the centre line in the tokens rather than written as a literal. The height floor keeps it off a short landscape window, where seven entries would run into the bottom of the screen. */ @media (min-width: 90rem) and (min-height: 34rem) { .handbook .doc-index { display: block; position: fixed; /* Clear of the running head's band, which stands about 2.6rem tall where it sits. */ top: 4.75rem; /* Measured from the centre line rather than from the window edge, so it tracks the sheet instead of the viewport: half the page box, then the gap. 100vw is deliberately not used — it counts the classic scrollbar on the browsers that draw one, and this column would drift left by its width on exactly those. */ right: calc(50% + (var(--wide) + var(--num)) / 2 + 2rem); width: 9rem; z-index: 40; } } /* Visible with JavaScript off, faded until §1 with it on — and the test for which is the head's own [hidden], with no second flag to keep in step. The band ships hidden and is un-hidden only once the observer is running, so `:not([hidden])` means exactly "the script is doing this page's wayfinding". Under it, the index waits for the first section the way the head does, instead of standing beside the contents table repeating it. Without it, the index is simply there, which is what a printed index does anyway. visibility rides along so the links are not clickable while they are invisible: it flips to visible at once on the way in, and waits out the fade on the way back. */ .handbook .runhead:not([hidden]) ~ .doc-index { opacity: 0; visibility: hidden; transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 240ms; } .handbook .runhead.is-live ~ .doc-index { opacity: 1; visibility: visible; transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; } /* No heading of its own — a margin does not title itself, and "Contents" already names the table at the top of the page. The rule the contents table opens with comes along, because it is what says a list of rows is a bounded thing rather than seven links that happen to be near each other. */ .handbook .doc-index ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-2); } .handbook .doc-index li { margin: 0; } /* The same two-track row as the contents table, at apparatus scale: the number in a column of its own, the title on one edge beside it. Every list of sections on this page is built this way, which is what makes them read as the same list seen twice rather than as two lists. */ .handbook .doc-index a { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); align-items: baseline; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); font-family: var(--sans); font-size: 0.82rem; line-height: 1.35; color: var(--ink-2); text-decoration: none; text-wrap: pretty; } .handbook .doc-index .ix-no { font-weight: 600; color: var(--muted); } /* Where you are, drawn the way this page draws every other boundary: a filled ground, not a coloured mark. Nothing about the metrics changes with it — a bolder face here would rewrap the entry and shuffle the whole column as you scrolled past a section, which is the one thing a fixed margin element must never do. The state is named in the markup as well as in tone: aria-current is on the link, so a reader who cannot see the ground is not guessing. */ .handbook .doc-index [aria-current] { background: var(--band); color: var(--ink); } .handbook .doc-index [aria-current] .ix-no { color: var(--ink); } /* Amber under the pointer rather than at rest. The contents table earns seven underlines at rest — it is the first viewport's only actionable thing, and a hover-only signal is no signal at all on a phone. This list is the opposite case on both counts: it exists only above 90rem, which is a pointer, and seven amber rules stacked in a 9rem column would have the margin shouting across the gap at the sheet. The row takes the same ground the contents row takes, so the two lists answer a cursor identically. */ .handbook .doc-index a:hover { background: var(--band); color: var(--accent); } .handbook .doc-index a:hover .ix-no { color: var(--accent); } /* ---------- The masthead ---------- */ .handbook .sheet-head { padding-bottom: 1.5rem; margin-bottom: 2.5rem; border-bottom: 2px solid var(--ink); } .handbook .home { display: inline-block; text-decoration: none; } /* Well below the landing page's 5rem cap: there the mark carries the whole screen, here it is a way back to it. The -0.4em that drops the pronunciation into the descender of the 'g' has nothing to sit under on this page, so it goes. */ .handbook .wordmark { font-size: clamp(1.6rem, 5.5vw, 2rem); margin: 0; } .handbook h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(2.25rem, 8vw, 3.25rem); line-height: 1.05; letter-spacing: -0.015em; margin: 0.5rem 0 0; } .handbook .standfirst { font-size: 1.1rem; color: var(--ink-2); margin: 0.9rem 0 0; max-width: var(--doc); text-wrap: pretty; } /* ---------- The identity block ---------- What the sheet describes and when it was checked. A datasheet opens with this because a technical document that cannot be dated cannot be trusted, and every row of it was already somewhere in this page's prose — the block gives each one a coordinate instead. Set as a two-column ruled field rather than a paragraph: the label column is the point. Below the phone breakpoint it stacks, because a 7rem label column against a 20rem value column wraps every value to three lines. */ .handbook .sheet-id { margin: 1.75rem 0 0; border: 1px solid var(--rule-2); border-radius: 0.3rem; overflow: hidden; font-size: 0.9rem; } .handbook .sheet-id > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); } .handbook .sheet-id > div + div { border-top: 1px solid var(--rule); } .handbook .sheet-id dt { padding: 0.55rem 0.9rem; background: var(--field); border-right: 1px solid var(--rule); font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; /* --ink-2, not --muted: on --field the muted tone measures 3.60:1 and owes 4.5. */ color: var(--ink-2); } .handbook .sheet-id dd { margin: 0; padding: 0.55rem 0.9rem; color: var(--ink-2); } /* ---------- Contents ---------- The old sheet had none, on seven sections holding a fourteen-row tag map and a three-way comparison, and said so in a comment: the argument was that a link belongs where the question is asked. It does — and those in-context links are all still here — but that is an argument for cross-references, not against ever telling the reader what is on the page. A table rather than a list, because each entry carries a second column saying what the section answers, and because the numbers want a column to line up in. */ .handbook .contents { margin-bottom: 3rem; } .handbook .contents h2 { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.6rem; } /* Pulled left by the rail it then re-establishes as each row's first track — the same move the headings and the figure captions make, so the contents' seven numbers hang in the margin with every other coordinate on the page and the entry titles land on the shared text edge. The negative margin belongs in this declaration and not in an earlier one: `margin: 0` here is a shorthand, and it silently reset a `margin-left` set anywhere above it. */ .handbook .contents ol { margin: 0 0 0 calc(-1 * var(--num)); padding: 0; list-style: none; border-top: 1px solid var(--rule-2); } .handbook .contents li { margin: 0; } .handbook .contents a { display: grid; grid-template-columns: var(--num) minmax(0, 1fr); align-items: baseline; gap: 0 0; padding: 0.6rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); } /* Underlined at rest, not on hover. These seven links are the only thing on the first viewport you can act on — signalling that only on hover meant the opening screen carried none of the page's own signal, and meant nothing at all on a touch screen, where there is no hover to reach it with. It arrives as an underline rather than as coloured text, which is exactly how site.css marks every link on the site: the word in ink, the statement in the rule under it. **The rule used to be amber and is ink now** (24.08.2026) — the finishes went site-wide and took the hue off links with them, so what distinguishes these seven from the surrounding prose is the underline itself rather than its colour, and what a pointer changes is its weight. The reasoning is unchanged and so is the mechanism; only the palette moved under it. */ .handbook .contents .c-title { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } .handbook .contents a:hover { background: var(--band); color: var(--ink); } .handbook .contents a:hover .c-title { color: var(--accent); } .handbook .c-no { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--muted); } .handbook .c-title { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; } .handbook .c-note { grid-column: 2; font-size: 0.85rem; color: var(--muted); text-wrap: pretty; } /* ---------- Sections and their numbers ---------- The rail. Every heading is a two-column grid whose first track is --num and whose second holds the title; the heading is then pulled left by --num out of the section's own padding. The effect is that a clause number hangs in the margin while its title lands on exactly the same left edge as the paragraphs under it — and because §1 and §1.4 share one track width, every title on the page lines up in one column. This is one mechanism at every width, which is why there is no separate mobile treatment for it and no nested rail: a number never ends up stranded on its own line above a heading, which would be an eyebrow rather than a coordinate. */ .handbook .sec + .sec { margin-top: 3.25rem; padding-top: 2.5rem; border-top: 2px solid var(--ink); } /* A link into the middle of a long page shouldn't land its target under the running head. */ .handbook .sec { scroll-margin-top: 3.5rem; } .handbook .step, .handbook .fig { scroll-margin-top: 4rem; } .handbook h2, .handbook .step > h3 { display: grid; grid-template-columns: var(--num) minmax(0, 1fr); align-items: baseline; margin-left: calc(-1 * var(--num)); font-family: var(--serif); font-weight: 700; text-wrap: pretty; } .handbook h2 { font-size: clamp(1.5rem, 5vw, 1.9rem); line-height: 1.15; letter-spacing: -0.012em; margin-top: 0; margin-bottom: 1.1rem; } .handbook .step > h3 { font-size: 1.15rem; line-height: 1.3; margin-top: 0; margin-bottom: 0.7rem; } /* An ordinary subheading, with no number of its own — §3 uses three of them. Indented with the body text rather than hanging, because it is not a numbered clause and pretending otherwise would put an unnumbered thing in the number column. */ .handbook .sec h3:not(.step > h3) { font-family: var(--serif); font-weight: 700; font-size: 1.1rem; line-height: 1.3; margin: 1.9rem 0 0.6rem; } /* The numbers themselves. Set in the sans at a size that reads as a reference rather than as display type — the title is the loud half of the pair, and a clause number that shouts is the "01 / 02 / 03" decoration this form is often mistaken for. Here the sequence is load bearing: it is how §4 is linked to, how the contents addresses it, and how the running head names it. */ .handbook .sec-no, .handbook .step-no { font-family: var(--sans); font-weight: 600; color: var(--muted); letter-spacing: 0; } .handbook .sec-no { font-size: 0.95rem; } .handbook .step-no { font-size: 0.85rem; } /* And the number is the link to its own clause. Every fact on this sheet carries a coordinate, so the coordinate is the handle you copy — which costs no ¶, no ⧉ and no second control appearing beside the title on hover, and puts the link exactly on the thing a reader would quote when they send it to somebody. justify-self, because a grid item fills its track by default and the rail is 7rem wide on a large screen: without it the link would be seven centimetres of clickable margin beside every heading, and a click on empty paper that navigates is a surprise, not an affordance. Muted at rest and amber under the pointer. A clause number's first job is to be read as a coordinate and only its second to be clicked, so the accent arrives when the cursor does — the focus ring, which comes from site.css, is what says the same thing to a keyboard. */ .handbook a.sec-no, .handbook a.step-no { justify-self: start; text-decoration: none; /* A single digit is an 11 × 21 target, and this repo's floor is WCAG 2.5.8's 24 × 24. The padding buys the box and the matching negative margin gives back every pixel of layout it took, so the number does not move: what grows is only what a cursor has to hit. The baseline is unaffected — the heading aligns its two tracks on the first baseline, which padding above the text does not shift. */ padding: 0.25rem 0.45rem; margin: -0.25rem -0.45rem; } .handbook a.sec-no:hover, .handbook a.step-no:hover { color: var(--accent); } .handbook .sec-lede { font-size: 1.05rem; color: var(--ink-2); text-wrap: pretty; } /* ---------- The procedure ---------- Four steps that used to be five slides in a fixed-height carousel. Every argument for the slider was about attention; every cost of it was paid by the reader who wanted to compare two steps, print the page, or find a phrase on a slide that was not showing. Stacked, the steps are all present, all findable, all printable, and the ~100 lines of measuring script the fixed-height box needed are gone with it. */ .handbook .procedure { margin: 0; padding: 0; list-style: none; counter-reset: none; } .handbook .step + .step { margin-top: 2.25rem; padding-top: 2rem; border-top: 1px solid var(--rule); } /* One fact per step, and only one. A step in a procedure has a single thing that goes wrong if you skip it, and that thing is set here — in the serif, ruled off, ahead of the ordinary bullets. Not amber and not boxed: the accent is reserved for what you act on and what is wrong, and a notice box would flatten the difference between "worth knowing" and §4's "this fails silently". */ .handbook .keyfact { font-family: var(--serif); font-size: 1.08rem; line-height: 1.45; color: var(--ink); padding: 0.55rem 0 0.75rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 1rem; text-wrap: pretty; } /* ---------- Step glossaries ---------- The three lists in §1 are one construction twelve times over: a term, then what it is or where it lives. They were