/* ============================================================================= pages.css — shared chrome for the standalone documents (Terms, Privacy). The home page does NOT load this, and these pages do NOT load app.js: they are a few paragraphs of text and a back link, so they carry only a tiny inline script for the theme toggle and the year. Everything visual is built from the same tokens as the console, so a document reads as the same site with the instrument switched off. ============================================================================= */ /* --- subpage top bar: brand · spacer · back · theme ----------------------- */ .top { position: sticky; top: 0; z-index: var(--z-nav); display: flex; align-items: center; gap: var(--s-4); /* --gut-frame so the bar keeps tracking the capped content column on a very wide viewport (or at 50% zoom) instead of hugging the glass — same fix as the home page's nav. */ height: var(--nav-h); padding-inline: var(--gut-frame); background: color-mix(in srgb, var(--c-bg) 82%, transparent); backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); border-bottom: 1px solid var(--c-line); } .top__brand { font-family: var(--f-display); font-weight: 700; letter-spacing: var(--tr-head); transition: color var(--d-1); flex: none; } .top__brand:hover { color: var(--c-accent-txt); } .top__spacer { flex: 1; } /* THE SURNAME IS THE THING THAT GIVES. Brand + four links + the theme button is about 380px of content in a 354px bar on a 390px phone, and something has to go — so it is the half of the wordmark that is still obvious from the other half, rather than a link the reader might want. `flex: none` on both sides keeps the spacer as the only elastic thing in the row. */ @media (max-width: 620px) { .top__brand-l { display: none; } } /* AND AT 320 EVEN THAT IS NOT ENOUGH. Brand + four links + the theme button held the bar to a 349px minimum, which on a 320px phone is not a cramped bar — it is a horizontally scrolling PAGE, because a flex row of `flex: none` children cannot shrink and pushes the whole document out with it. Small phones are real (SE, older Androids), so the label size and the two gaps give here rather than a link disappearing. */ @media (max-width: 400px) { .top { gap: 8px; padding-inline: 12px; } .top__nav { gap: 8px; font-size: var(--t-xs); } } /* `.top__back` LIVED HERE. It said "Back to site" next to a brand that already went home, and now next to a Home link that also does — three ways to leave in one bar. The nav below replaces it. */ .top__nav { display: flex; align-items: center; flex: none; gap: clamp(12px, 2vw, 26px); font-size: var(--t-sm); } .top__nav a { position: relative; color: var(--c-muted); /* 10px, not 6: it makes the tap target ~40px tall inside a 58px bar. The underline is drawn on the box bottom, so the padding sets where it sits. */ padding-block: 10px; transition: color var(--d-1); } .top__nav a:hover { color: var(--c-fg); } /* Rule 4: the accent marks state, and "the page you are on" is state. Rule 6: it underlines, it does not move — the bar is 1px and reserved whether or not it is drawn, so nothing reflows on hover. */ .top__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--d-2) var(--e-out); } .top__nav a:hover::after { transform: scaleX(.4); } .top__nav a[aria-current='page'] { color: var(--c-fg); } .top__nav a[aria-current='page']::after { transform: scaleX(1); } /* --- the document --------------------------------------------------------- THESE ARE ARTICLES, NOT SMALL PRINT. Legal pages get made unreadable twice over: once by the language and once by the typesetting — a single grey column of undifferentiated paragraphs that signals "nobody is expected to read this". Both halves are fixed here. The words are plain English, and the page is set like a piece of writing: a masthead, a summary you can act on without reading further, a contents rail that stays with you, and numbered sections on their own rules. It is built from the same tokens as the console, so a document reads as the same site with the instrument switched off. --------------------------------------------------------------------------- */ .doc__wrap { padding-block: clamp(36px, 6vh, 72px) clamp(48px, 9vh, 128px); } /* --- the masthead --------------------------------------------------------- ONE MASTHEAD, NOT A HEAD AND THEN A MASTHEAD. `.doc__head` used to run the channel grammar above this — `DOC · PRIVACY ————— UPDATED 27 JUL 2026` — and then the headline said "Privacy" again 40px below it. The page introduced itself twice before it said anything, and the date ended up as far from the title as the layout could put it. It is one block now: the label names the KIND of document (both pages say `DOC · LEGAL`, because the headline is what tells them apart), the headline names which one, a single-line standfirst says what it covers, and the meta row carries date, length and reading time the way an article does. The summary sits beside all of it, so the page's actual argument is visible without scrolling and the sections below are there for anyone who wants the detail. ONE SPINE, TWO STACKS. The masthead and the spread below it are the SAME GRID — same tracks, same gap, same cap — declared once in `--doc-cols` and used by both. Before this they were two unrelated layouts (a .84/1.16 split over a 230px-rail / 1fr split), so the page had four different vertical edges in it and nothing below the rule lined up with anything above it. Now the title, standfirst and date sit directly over the contents rail, and the summary sits directly over the article, both stacks flush left and flush right. `.doc section:first-child` keeps its border off so the first heading arrives under the masthead's rule rather than under two hairlines 60px apart. --------------------------------------------------------------------------- */ :root { /* THE SPLIT IS SET BY THE TWO COLUMNS' HEIGHTS, NOT BY TASTE. In the masthead the plate is always the taller cell and every pixel of the difference is a hole under the meta line; narrowing the lead and widening the plate closes it from both ends at once — the deck takes another line, the bullets give one back. .62 AND NOT NEARER EVEN, because column one also carries the contents rail, and that is the element with the least in it — short link labels on rules running the full track width. At .84 the rules were 480px under 100px of text and the whole column read as empty. Narrowing it also makes the lead taller (the deck takes more lines) and the plate wider (the bullets take fewer), so the two masthead cells finish closer together as a side effect. The cap below moves with it: these are one setting in two numbers. */ --doc-cols: minmax(0, .62fr) minmax(0, 1.38fr); --doc-gap: clamp(34px, 4vw, 68px); /* AND WHY THE SPREAD IS CAPPED. The right track is the article's measure now that the two grids share tracks, so an uncapped spread would set the prose at 80ch+ on a wide screen. At 1200 the column lands near 74ch, which is what `.doc`'s own max-width was asking for — so `.doc` can stop asking, and the article fills its track exactly instead of stopping 19px short of the plate's edge above it. A hairline that ALMOST lines up is worse than one that obviously does not. 1120 rather than 1200 because the tracks were re-split: a narrower left column hands its width straight to the prose, and left alone the article would have gone from a comfortable 63 characters to about 76. Narrowing the whole block keeps the measure near 70. **Change one of these two numbers and you have changed the measure** — they only make sense together. */ --doc-maxw: 1120px; } /* THE MASTHEAD RULE KEEPS THE SECTIONS' RHYTHM. Every rule in the article has `clamp(30,3.4vw,48)` of air above it and `clamp(26,3vw,40)` below, so this one takes the same numbers and the contents rail starts the same distance under its separator as a section's first line does under its own. It had 48 above and 62 below, which is why the head read as a block floating between two different gaps. */ .doc__mast { padding-bottom: clamp(26px, 3vw, 40px); border-bottom: 1px solid var(--c-line); } /* Both grids break at the SAME width. The masthead used to go two-column at 900 and the spread at 1000, which meant a 100px band where the page was half aligned to itself. */ @media (min-width: 1000px) { .doc__mast, .doc__grid { display: grid; grid-template-columns: var(--doc-cols); gap: var(--doc-gap); align-items: start; max-width: var(--doc-maxw); } /* The plate brings its own top margin for the stacked case, which a grid cell does not want. */ .doc__mast .doc__key { margin-top: 0; } } .doc__kick { display: flex; align-items: center; gap: var(--s-3); } .doc__title { font-size: var(--t-xxl); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--tr-mega); max-width: 14ch; margin-top: clamp(12px, 1.5vw, 18px); } .doc__deck { color: var(--c-muted); font-size: var(--t-md); line-height: 1.62; /* Short measure on purpose. A standfirst set to the column's full width runs two long lines and leaves the lead shorter than the plate beside it; at 38 characters it takes three shortish ones, reads faster, and the two columns end within a line or two of each other. */ max-width: 38ch; margin-top: var(--s-4); text-wrap: pretty; } /* Date · length · reading time. The separators are DRAWN DOTS, not typed middots: a middot inherits the mono letter-spacing either side of it and can end a wrapped line looking like a typo. */ .doc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin-top: clamp(14px, 1.6vw, 22px); color: var(--c-faint); } .doc__meta span { display: inline-flex; align-items: center; } .doc__meta span + span::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--c-line-2); margin-inline: var(--s-4); } /* Below 400px even two items do not fit on one line — mono at .15em tracking is wide — so they stack, and the dot goes rather than dangling at a line end. A viewport query is honest HERE, unlike the one below: under 1000px the lead IS the full content column, so the viewport does determine its width. */ @media (max-width: 400px) { .doc__meta { display: grid; justify-items: start; gap: 4px; } .doc__meta span + span::before { display: none; } } /* THE SECTION COUNT IS GONE, AND THAT IS THE FIX, NOT A COMPROMISE. Three items need ~410px and the lead column is 392 at 1100 and 475 at 1920 with a bigger mono — so it wrapped, and **the item that wraps takes its separator dot with it**, starting a line on a bullet. A viewport media query cannot see a column width, so it kept reappearing at a different breakpoint. Two items fit everywhere from 390px up, and the count was the redundant one: the numbered contents list is directly below it and ends in 06. */ /* --- the summary ---------------------------------------------------------- THE WHOLE POINT OF THE PAGE, IN THREE LINES. Almost nobody reads a terms page end to end, and pretending otherwise is how these documents end up hiding the parts that matter. So the parts that matter are at the top, in the reader's own language, and the sections below are there for anyone who wants the detail. It carries the site's 2px amber cue mark — the same device that holds the Statement and CH 01's pull quote — because this is the sentence the page is actually making. */ .doc__key { position: relative; /* Not cosmetic: it sets what `ch` means on this element, so the stacked layout's `max-width: 72ch` puts the plate's edge exactly where the article's is. A max-width in `ch` on an element that sets no font-size is measured in whatever it inherited. */ font-size: var(--t-md); margin-top: clamp(30px, 4vw, 52px); padding: clamp(20px, 2.4vw, 30px) clamp(22px, 2.6vw, 34px); padding-left: clamp(26px, 3vw, 40px); border: 1px solid var(--c-line); border-radius: var(--r); background: var(--c-panel-2); } .doc__key::before { content: ''; position: absolute; left: 0; top: clamp(20px, 2.4vw, 30px); bottom: clamp(20px, 2.4vw, 30px); width: 2px; border-radius: 2px; background: var(--c-accent); } .doc__key > .mono { color: var(--c-faint); } .doc__key ul { display: grid; gap: 10px; margin-top: var(--s-4); } .doc__key li { position: relative; padding-left: 1.5em; color: var(--c-fg); font-size: var(--t-md); line-height: 1.55; max-width: 68ch; } .doc__key li::before { content: ''; position: absolute; left: 0; top: .72em; width: 9px; height: 1px; background: var(--c-line-2); } /* --- the spread ----------------------------------------------------------- */ /* The same number as a section's `padding-top`, so the contents rail sits under the masthead rule exactly as a heading sits under its own. */ .doc__grid { margin-top: clamp(26px, 3vw, 40px); } @media (min-width: 1000px) { /* Tracks, gap and cap all come from the masthead's rule above — the whole point is that these two grids cannot drift apart. Only the second row is local to this one: `auto auto`, because the sign-off is a second row in the article's column and the contents rail must not be stretched by it. */ .doc__grid { grid-template-rows: auto auto; } /* THE SIGN-OFF BELONGS TO THE ARTICLE, NOT THE PAGE. It sat outside the grid, so it started at the document's left edge while every heading, rule and paragraph above it started 287px further in — the last thing on the page was the one thing not lining up with anything. Placed in column two it inherits the article's edges for free, with no duplicated track widths to keep in step. */ .doc__toc { grid-row: 1 / 3; } .doc__end { grid-column: 2; margin-top: clamp(30px, 3.4vw, 46px); } } /* THE CONTENTS RAIL STAYS WITH YOU, and it needs no script to do it — it is `position: sticky` and plain anchors, which is the whole reason these pages can go on not loading app.js. Below 1000px there is no margin to stick to, so it becomes an ordinary list above the piece. */ .doc__toc { font-size: var(--t-sm); } @media (min-width: 1000px) { .doc__toc { position: sticky; top: calc(var(--nav-h) + 28px); } } .doc__toc > .mono { color: var(--c-faint); } .doc__toc ol { list-style: none; display: grid; margin-top: var(--s-4); border-top: 1px solid var(--c-line); } .doc__toc a { display: grid; grid-template-columns: 2.6ch minmax(0, 1fr); gap: var(--s-3); padding-block: 10px; border-bottom: 1px solid var(--c-line); color: var(--c-muted); line-height: 1.3; transition: color var(--d-2); } .doc__toc a i { font-style: normal; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--c-faint); transition: color var(--d-2); } /* Rule 6: the row lights, it does not move. */ .doc__toc a:hover { color: var(--c-fg); } .doc__toc a:hover i { color: var(--c-accent-txt); } /* --- the piece ------------------------------------------------------------ */ .doc section { padding-top: clamp(26px, 3vw, 40px); border-top: 1px solid var(--c-line); /* The sticky top bar is 58px; without this an anchor lands with its heading tucked underneath it. */ scroll-margin-top: calc(var(--nav-h) + 24px); } .doc section:first-child { padding-top: 0; border-top: 0; } .doc section + section { margin-top: clamp(30px, 3.4vw, 48px); } /* Its own clamp rather than `--t-lg`, whose floor is 1.2rem — at 390px that put a heading at 19.2px over body copy at 16.3, which is not a step, it is a wobble. This starts at 1.34rem so the hierarchy survives on a phone. */ .doc h2 { display: grid; grid-template-columns: 3.4ch minmax(0, 1fr); gap: var(--s-3); align-items: baseline; font-size: clamp(1.34rem, 1.9vw, 1.66rem); font-weight: 600; line-height: 1.2; letter-spacing: var(--tr-head); margin-bottom: var(--s-4); } /* FAINT, NOT AMBER. It was `--c-accent-txt`, and rule 4 is explicit: the accent marks state and the one primary action. A section number is a label — the same call that demoted the service-card indices. */ .doc h2 .doc__n { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--tr-label); color: var(--c-faint); } /* THE MEASURE GOES ON THE COLUMN, NOT ON EACH PARAGRAPH — and the column is given the prose's own font-size so that `ch` counts the right characters. (`ch` resolves against the element's OWN font: a max-width on a container that sets no font-size is measured in whatever it inherited, which is the bug that left CH 01's column 200px short of the card beside it.) On the paragraphs alone the RULES did not obey it. Each section opens with a full-width hairline, so at 1440 every rule ran 295px past the end of the text under it — the page looked like a column that had stopped early rather than one that had been set. Now the heading, the rule and the prose all end together. Type went `--t-bd` → `--t-md`. These are pages someone actually has to read, and 15.5px over a 27px line was set like a caption. */ .doc { font-size: var(--t-md); } /* ABOVE 1000px THE COLUMN IS THE MEASURE. The article and the summary plate share a grid track now, so a `ch` cap here would stop the prose ~19px short of the plate's right edge directly above it — and a hairline that ALMOST lines up is worse than one that obviously does not. `--doc-maxw` is chosen so the track lands near 74ch, which is what this cap was asking for anyway. Below the breakpoint there is no column to inherit, so the cap does the job. */ @media (max-width: 999px) { /* ONE CAP ON THE TWO BLOCKS, NOT SIX CAPS ON THEIR CONTENTS. Stacked, the masthead rule, the contents rail, the plate and the prose are all just children of these two — cap them and everything inside inherits the same right edge, including the rail, which has no measure of its own and used to overhang the article by 100px. The `font-size` is what makes `ch` mean the prose's characters here; `.doc`, `.doc__toc` and `.doc__key` all set their own size, so nothing actually renders at this one. */ .doc__mast, .doc__grid { font-size: var(--t-md); max-width: 72ch; } } .doc p, .doc li { color: var(--c-muted); font-size: inherit; line-height: 1.72; } /* A paragraph after ANY block, not only after another paragraph. `p + p` alone left the prose that follows a list or a definition table butted straight up against it with no gap at all. */ .doc :is(p, ul, dl, .doc__defs) + p { margin-top: var(--s-4); } .doc ul { margin-top: var(--s-4); display: grid; gap: var(--s-3); } .doc li { position: relative; padding-left: 1.5em; } .doc li::before { content: ''; position: absolute; left: 0; top: .82em; width: 9px; height: 1px; background: var(--c-faint); } .doc a { color: var(--c-fg); background-image: linear-gradient(var(--c-accent), var(--c-accent)); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--d-2) var(--e-out); padding-bottom: 1px; } .doc a:hover { background-size: 100% 1px; } .doc strong { color: var(--c-fg); font-weight: 600; } /* An actual key name, so it is set as one — mono, at the size the surrounding prose is, in a chip that makes clear it is a literal and not emphasis. */ .doc code { font-family: var(--f-mono); font-size: .88em; padding: 2px 6px; border-radius: 4px; background: var(--c-glass-2); color: var(--c-fg); } /* A definition-style list for the third-party table on the privacy page: what it is on the left, what it means for you on the right. Two columns rather than bullets, because every row answers the same question and a reader should be able to scan down one side of it. */ .doc__defs { display: grid; margin-top: var(--s-5); border-top: 1px solid var(--c-line); } .doc__defs > div { display: grid; gap: 4px var(--s-5); padding-block: clamp(12px, 1.4vw, 16px); border-bottom: 1px solid var(--c-line); } @media (min-width: 640px) { .doc__defs > div { grid-template-columns: clamp(130px, 16vw, 190px) minmax(0, 1fr); align-items: baseline; } } .doc__defs dt { color: var(--c-fg); font-size: var(--t-bd); font-weight: 500; line-height: 1.4; } .doc__defs dd { margin: 0; color: var(--c-muted); font-size: var(--t-bd); line-height: 1.62; max-width: 60ch; } /* The sign-off: one line, the same weight as the deck, closing the document the way a letter closes rather than trailing off after the last clause. */ .doc__end { margin-top: clamp(34px, 4vw, 56px); padding-top: clamp(20px, 2.4vw, 30px); border-top: 1px solid var(--c-line); color: var(--c-muted); font-size: var(--t-md); /* THE SAME MEASURE AS `.doc`, whatever that currently is. Above 1000px both are simply the width of the track they sit in; below it, the shared `max-width: 72ch` rule up there catches them both. At 62ch this rule stopped 113px short of every section rule above it, and with no measure at all it overshot them by 238. */ text-wrap: pretty; } .doc__end a { color: var(--c-fg); } /* `.doc__stamp` LIVED HERE — "Last updated 27 July 2026", which was the third time the page gave you that date. The masthead's meta row is the one. */ /* --- slim footer ---------------------------------------------------------- ONE LINE, CENTRED. It was a `space-between` row holding the copyright against Home · Terms · Contact, and those links are in the top bar now. Left-aligning what remains would leave it pressed against the empty half of a row it no longer shares. */ .subfoot { border-top: 1px solid var(--c-line); background: var(--c-panel); } .subfoot__in { display: flex; justify-content: center; text-align: center; padding-block: var(--s-5); color: var(--c-faint); } /* ============================================================================= =========================== THE PHONE BUILD =============================== Everything below this line is inside a `max-width` / `pointer: coarse` query, so the subpages' desktop layout is structurally out of reach — the same guarantee `mobile.css` gives the home page, and for the same reason: this file is the LAST stylesheet these pages load, so it wins a tie by order without any specificity escalation. `pages.css` is loaded ONLY by terms.html, privacy.html and 404.html. Nothing in here can reach index.html at all. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. TAP TARGETS — THE SUBPAGES NEVER HAD ANY, AND THAT IS A WIRING BUG. The site's whole `@media (pointer: coarse)` block lives at the END of sections.css, and these three pages do not load sections.css. So every fix that pass made — row links given height, icon buttons given a floor — has simply never applied here: the brand measured 37x25 and the inline prose links 22px tall. INLINE LINKS GET `padding-block`, NOT `min-height`. A link inside a paragraph cannot be given a height without `display` making it a block and breaking the line it sits in. Block padding on an inline box expands the HIT AREA without contributing to line height, so the text does not move by a pixel and the target grows to ~40px. This is the one place the two are not interchangeable. ----------------------------------------------------------------------------- */ @media (pointer: coarse) { .top__brand { display: inline-flex; align-items: center; min-height: 44px; /* "Jesvi" alone is 37px of word. The box extends to the right of it rather than padding around it, so the wordmark stays hard against the bar's left inset and only the target grows. */ min-width: 44px; } .top__nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 38px; } /* The underline is drawn on the box bottom, so the extra height would push it off the text it belongs to. Pin it back to where the 10px padding put it. */ .top__nav a::after { bottom: 9px; } /* `.doc__end` is the sign-off paragraph AFTER the last numbered section, so it is a sibling of `.doc` rather than inside it — the first version of this selector listed containers and missed it, and the one link it holds is the email address, which is the most important link on the page. Listing the containers is still right (it must not catch `.btn`s or the top nav), but the list has to be complete. */ .doc p a, .doc li a, .doc__end a, .doc__key a, .subfoot a { padding-block: 9px; } } /* ----------------------------------------------------------------------------- 2. …AND GIVING THE THEME BUTTON ITS 44px BROKE THE BAR AT 320. `base.css` sizes `.nav__icon` to 44px on a coarse pointer, and these pages do load base.css. The existing 400px rule that tightens this bar was measured against the 36px MOUSE size, so on a touch device the row came to 327px of `flex: none` children inside a 320px screen — and a flex row that cannot shrink pushes the whole DOCUMENT out with it rather than just looking tight. Six pixels off each of the two gaps buys 12 against the 7 needed. The button keeps its 44: it is the tap target the overflow came from, and shrinking a control back below the minimum to make room for itself is circular. 340px, NOT the 400px the rule above it uses, and the difference matters. The bar only runs out below ~327; at 360 and 390 it has 55px to spare, and tightening the gaps there just pushed four labels into each other for no reason. Fix the width that is broken, not every width below it. ----------------------------------------------------------------------------- */ @media (pointer: coarse) and (max-width: 340px) { .top { gap: 6px; } .top__nav { gap: 6px; } } /* ----------------------------------------------------------------------------- 3. THE MASTHEAD META STACKED WHERE IT DID NOT NEED TO. `Updated 27 July 2026 · 4 min read` was dropped to two lines below 400px on the reasoning that mono at .15em tracking is too wide to hold one line. It is not: measured, the pair plus its dot needs **256px**, and the column is 268 at 320 — it fits at every width down to the narrowest phone in circulation, with 12px to spare there and 82px at 390. Stacked, the two facts read as two orphaned lines with no separator between them. The rule is kept for anything narrower than a real phone, where the measurement finally does run out. ----------------------------------------------------------------------------- */ @media (max-width: 400px) and (min-width: 316px) { .doc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; } .doc__meta span + span::before { display: block; } } /* ----------------------------------------------------------------------------- 4. THE SECTION NUMBER SITS ABOVE THE HEADING, NOT BESIDE IT (rule M1). `.doc h2` is a two-column grid — a 3.4ch number, then the heading — which on a wide screen hangs the number in the margin and is exactly right. On a phone there is no margin for it to hang in, so the column came out of the content width: the heading's words started at 85px while every paragraph under them started at 26. A reader scrolling a long legal page sees that as the headings being indented for no reason, and it is the most visible misalignment on the page. One column puts the number on its own line — the same mono kicker grammar the editorial channel and the channel heads already use — and hands the heading and the body one shared left edge and the full measure. ----------------------------------------------------------------------------- */ @media (max-width: 899px) { .doc h2 { grid-template-columns: minmax(0, 1fr); gap: 5px; } /* --------------------------------------------------------------------------- 6. THE CONTENTS RAIL COMES OFF THE PHONE. Above 1000px it is a `position: sticky` column in the margin — it costs the article nothing, it stays with you the whole way down, and it is the best thing on the page. Stacked it is none of those: seven rows and ~300px of link list sitting between the summary plate and the first sentence, on a document that is only seven short sections long and that a thumb scrolls through in a couple of flicks. A table of contents earns its space by letting you skip; a phone reader has already scrolled past it to find out what it offers. `display: none` rather than removed from the markup — the desktop rail is the same element, and the breakpoint decides. The headings it points at are still real `

`s, so heading-based navigation (which is how a screen reader actually moves through a document) is unaffected. 899px, the site's own phone boundary, NOT the 1000px where the sticky layout ends. Between the two the rail is stacked and slightly redundant, but that band is a narrow desktop window rather than a phone, and desktop is not what this pass is allowed to change. --------------------------------------------------------------------------- */ .doc__toc { display: none; } } /* ----------------------------------------------------------------------------- 5. THE 404's EXIT ROW WAS A RAGGED WRAP (rule M5). Four buttons of four different widths in a `flex-wrap` row landed as `[Back to the site] [Work]` over `[Music] [Contact]` — two rows, neither of them aligned to anything, in the one block on the page whose whole job is to offer a way out. A grid instead: the primary action spans the row (rule M3 — it is the answer to "where do I go now"), and the three section links share three equal cells underneath. The inline padding comes down because at 320 those cells are 82px and "Contact" has to sit inside one. SCOPED `.lost .lost__go`, AND THE EXTRA CLASS IS LOAD-BEARING. 404.html declares `.lost__go` in an inline `