`, * which held while the deck was a 36px bar somebody chose to open. **Item 49 is what breaks it**: * the deck now opens ITSELF the moment anything stages, and the thing it opens over is whatever the * person was just working on. An overlay that appears over your work without being asked is worse * than one you opened, and no fixed reservation can be right — the panel's height depends on how * many rows are in it. * * So `` is the column. The spine and the deck are its two fixed ends and `

` is the * elastic middle with its own scrollbar: the deck opening SHORTENS the document rather than covering * it, and everything the person had on screen is still reachable by scrolling the same container * they were already scrolling. * * **`min-height` RATHER THAN `height`, AND `min-height: 0` ON THE MIDDLE.** A flex item's default * `min-height: auto` refuses to shrink below its content, so `overflow-y: auto` on `

` would * never engage and the deck would be pushed off the bottom of the screen by a long page — the exact * failure this replaces, wearing a different mechanism. * * **`_deck`'s "outside `

`" ARGUMENT IS UNCHANGED BY THIS.** That argument is about the reading * measure: `.aid` is a two-column grid and * `test_EVERY_GRID_ITEM_OF_EVERY_REAL_PAGE_LANDS_IN_A_COLUMN` measures everything that falls out of * it, so a bar inside would be a new grid item on all nine pages. It still sits beside `

`. * What changed is only that it is in FLOW there instead of floating over it. */ body { margin: 0; /* **`height`, NOT `min-height`, AND THE DIFFERENCE IS THE WHOLE MECHANISM.** With `min-height` the * body's used height is still AUTO, so nothing ever forces `

` to shrink: it grew to its * content, the body grew with it, and the deck was pushed 76px below the fold — measured on the * live workstation at 1920×1080, deck top at y=1156. A definite height is what gives the flex * line something to distribute, which is what makes the middle the scroller and the deck an end. */ height: 100vh; display: flex; flex-direction: column; background: var(--board); /* explicit: the host paints its own ground behind this */ color: var(--ink); font: 400 var(--t-body)/var(--lh-body) var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* **`width: 100%` IS LOAD-BEARING AND LOOKED REDUNDANT.** `.aid` carries `margin: 0 auto` to centre * itself, which as a BLOCK meant "full width, then centre within the max-width". As a FLEX ITEM an * auto cross-axis margin cancels `stretch`, so the same two declarations shrink-wrapped it to its * content: measured on the live workstation at 1920, `main` came back 1353px wide at x=284 — a * surface that had just been given the screen and did not take it. The width restores the block * behaviour and `max-width` still caps the eight pages that want a measure. */ body > main.aid { flex: 1 1 auto; min-height: 0; width: 100%; overflow-y: auto; } /* `hidden` must always win. The flex and grid display rules below would otherwise out-cascade the * UA's [hidden]{display:none} — equal specificity, later source order — and a `hidden` marker the * script has not yet placed would render as a visible blank where a real value belongs. */ [hidden] { display: none !important; } /* ---- focus: visible everywhere, drawn in the key ------------------------------------------------ * One rule for every focusable thing, so a control added later cannot arrive without one. On the * spine it switches to `--signal-true`, because magenta on that navy is not enough. */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--key); outline-offset: 2px; } ::selection { background: var(--select); color: var(--ink); } /* A LINK IS UNDERLINED. The open call emphasises with magenta — dates, names, key terms — so this * interface does too, and on a cream ground colour alone is not a signal a reader can rely on. The * exceptions below are the links that are not words in a sentence but whole ROWS and controls; an * underline drawn the width of a table row reads as a rule, not as a link. */ a { color: var(--key); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } a:hover { color: var(--key-hover); } .shelf__row a:hover, .month__step:hover { text-decoration: underline; } /* ---- the spine: a strip of the open call, left in place --------------------------------------- * The one dark ground in the interface, and it is the poster's own — `--spine` IS `--ink`, the navy * every page of the open call is printed on. It never leaves the screen: "where are we" should cost * no navigation on a residency where nobody shares a room. Acid green and hot pink appear ONLY here, * because only here is the ground dark enough for them. */ .strip { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s4); min-height: var(--titlebar-h); padding: var(--s2) var(--s4); background: var(--spine); color: var(--on-spine); box-shadow: inset 0 -1px 0 var(--line-spine); position: sticky; top: 0; z-index: 10; font: 400 var(--t-small)/var(--lh-mono) var(--mono); } .strip :focus-visible { outline-color: var(--signal-true); } .strip__mark { display: inline-flex; align-items: baseline; gap: var(--s2); color: var(--on-spine); text-decoration: none; } .strip__mark:hover { text-decoration: none; } .strip__brand { font: 500 var(--t-body)/1 var(--display); letter-spacing: .02em; } .strip__edition { font-size: var(--t-gutter); letter-spacing: .06em; text-transform: uppercase; color: var(--on-spine-muted); } /* **THE NINE LINKS ARE A DISCLOSURE, AND CSS IS WHAT OPENS IT.** * * This bar carried nine links in a flat row. Eight already did not fit a phone — the layout guard * measured the document at 624px in a 320px viewport — and the answer then was to let the bar scroll * inside itself, which keeps the body honest and leaves a person on a phone swiping a 2mm-tall strip * to find a page whose name they cannot see. Operator direction: a hamburger. * * **IT MUST WORK WITH NO JAVASCRIPT**, and that is why the state is a CHECKBOX rather than a button. * The pages are server-rendered and the CSP admits no inline script, so a JS-only menu has two ways * to fail closed — a blocked script, a script that did not load — and either one strands somebody on * a phone with no way to reach any page at all. The checkbox is a REAL control: it is in the tab * order, Space toggles it, its accessible name comes from the label, and its checked state IS the * expanded state, announced by the browser rather than asserted by an attribute nothing updates. * (An `aria-expanded` written into the server's markup would be a static claim about a state CSS * changes underneath it, which is worse than none — see `render.strip`.) * * It is visually hidden rather than `display: none`, because a control that is not rendered is not * focusable, and the focus ring is drawn on the label it belongs to. */ .strip__toggle { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .strip__burger { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--touch); padding: 0 var(--s3); margin-left: auto; border: 1px solid var(--line-spine); color: var(--on-spine); font: 500 var(--t-small)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; } /* THE BARS ARE DRAWN, not set in a glyph and not fetched as an icon: three 2px rules in the * current colour, which is the same way every other edge in this interface is made. */ .strip__bars { display: block; width: 16px; height: 2px; background: currentColor; position: relative; } .strip__bars::before, .strip__bars::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; } .strip__bars::before { top: -5px; } .strip__bars::after { top: 5px; } /* OPEN IS SHOWN, not only announced. The control inverts — cream ground, navy type — so the state is * legible to somebody who is looking at the screen as well as to somebody who is listening to it. */ .strip__toggle:checked + .strip__burger { background: var(--on-spine); color: var(--spine); border-color: var(--on-spine); } .strip__toggle:focus-visible + .strip__burger { outline: 2px solid var(--signal-true); outline-offset: 2px; } /* CLOSED IS THE DEFAULT, because mobile is. The menu opens as a full-width column under the bar, * each row a 44px target with its own rule — a list of places, set the way this interface sets every * other list of things. */ .strip__nav { display: none; } .strip__toggle:checked ~ .strip__nav { display: flex; flex-direction: column; flex: 1 0 100%; margin: var(--s2) calc(var(--s4) * -1) calc(var(--s2) * -1); border-top: 1px solid var(--line-spine); } /* **A NAV ITEM IS NOT A LINK IN A SENTENCE, SO IT IS NOT UNDERLINED.** The global rule underlines * every `a` — right for prose on a cream ground, where colour alone is not a signal — and it reached * into the spine, so all nine items carried a rule and the one you were ON looked like the other * eight. An underline that is always on cannot mark anything. Here the LIST is the affordance: nine * words in a bar are obviously navigation, and what the reader needs told is which one is current. */ .strip__nav a { display: flex; align-items: center; min-height: var(--touch); padding: var(--s2) var(--s4); color: var(--on-spine-muted); text-decoration: none; border-bottom: 1px solid var(--line-spine); } .strip__nav a:hover { color: var(--on-spine); text-decoration: underline; text-underline-offset: 4px; } /* WHICH PAGE YOU ARE ON, in the cyan the open call prints its own structure in — and marked by a * RULE as well as by colour, so it survives a reader who cannot tell the two apart. */ .strip__nav a[aria-current="page"] { color: var(--on-spine); box-shadow: inset 2px 0 0 var(--signal-true); /* a rule down the side, in the menu's column form */ } /* THE BAR AT A DESK. Above this width the nine links fit in a row, so the disclosure is put away * and the nav becomes the row it always was. Both selectors are restated, because * `.strip__toggle:checked ~ .strip__nav` outranks `.strip__nav` and would otherwise hold a menu * opened on a phone in its column form after the window was widened. */ @media (min-width: 64rem) { .strip { gap: var(--s3) var(--s6); padding: var(--s2) var(--s6); } .strip__toggle, .strip__burger { display: none; } .strip__nav, .strip__toggle:checked ~ .strip__nav { display: inline-flex; flex-direction: row; flex: 0 1 auto; gap: var(--s4); margin: 0; border-top: 0; } .strip__nav a { display: inline; min-height: 0; padding: var(--s1) 0; white-space: nowrap; border-bottom: 0; } /* **THE ONE UNDERLINE IN THE BAR IS THE PAGE YOU ARE ON.** Drawn as a 2px rule rather than * `text-decoration`, so it sits clear of the descenders and reads as a marker rather than as a * link that happens to be styled differently from its eight neighbours. */ .strip__nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--signal-true); } } /* ---- the page: a gutter and a column ---------------------------------------------------------- */ .aid { display: grid; grid-template-columns: var(--gutter-w) minmax(0, 1fr); gap: 0; max-width: var(--aid-w); margin: 0 auto; padding-bottom: var(--s16); } /* **ONE SURFACE WANTS THE SCREEN, AND IT SAYS SO BY WHAT IT CONTAINS.** * * Checklist item 47, operator 2026-09-20: *"it will be nice if it is properly responsive — from * extended monitor to a mobile screen."* On their ~2000px monitor the workstation sat in a column * 1248px wide with 336px of empty ground either side — measured, not estimated — while its FLOATING * WINDOWS, which are `position: fixed` and therefore placed against the VIEWPORT, landed outside * that column: `#win-messages` at x=220 stranded in the left gutter, `#win-session` flush against * the right edge at x=1526. The windows were not misplaced. The surface they belong to was. * * `--aid-w` is a READING measure and it is right for the eight pages that are documents — a person * should not track a line of prose across two feet of glass. The folder view is not a document: it * is a desktop with a sidebar, a canvas of tiles and panels floating over it, and every pixel it is * denied is a pixel of the archive somebody cannot see at once. * * **IT IS `:has(.ws)` RATHER THAN A CLASS THE PAGE PASSES, and that is the smaller of the two.** A * `wide=True` argument through `render.page` would be a second place the decision lives — one that * a new workstation-bearing page can forget, silently, and render in a column again. The surface * that wants the screen is exactly the surface that contains a workstation; asking that question * directly cannot go stale. `body:has(.deck) main.aid` above already relies on the same selector. * * **SPECIFICITY, STATED RATHER THAN HOPED FOR** — the house rule, after four rounds lost to a rule * that simply did not win: `main.aid:has(.ws)` is (0,2,1) and beats `.aid`'s (0,1,0). Checked on the * live element with `getComputedStyle`, not read off this sheet. */ main.aid:has(.ws) { max-width: none; } .entry { display: contents; } /* THE SIGNATURE. A fixed left margin carrying each item's reference and provenance in mono, always * visible — never a tooltip, never behind a hover, never a detail pane. * * THIS IS THE DELIBERATE RISK and the one element to keep if everything else goes. Every instinct * says cut it to a hover: it costs a margin, it repeats down the page, it is "metadata". Cutting it * would make this look like every other dashboard and would quietly contradict the thing it exists * to argue — a residency about the origin of sources that hides the origin of its own. * * Survivable because it is QUIET: `--ink-muted`, 11px, aligned, and SUNKEN — the track is the * register's inset surface, so the margin reads as the system's plate beside a person's prose. You * read past it until the moment you need it, which is what a margin is for. */ .gutter { grid-column: 1; display: flex; flex-direction: column; gap: 2px; padding: var(--s4) var(--s6); background: var(--board-sunken); border-right: 1px solid var(--line); border-top: 1px solid var(--line); font: 400 var(--t-gutter)/var(--lh-mono) var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-muted); overflow-wrap: anywhere; /* an ss58 address must not widen the column */ } .gutter__line { display: block; } .gutter__ref { color: var(--ink); font-weight: 500; } .gutter__line--time { color: var(--foxing); } /* TIME ONLY — see tokens.css */ /* A kuri or an address the script has turned into a kuriscan link keeps wrapping: the register's own * `a.hash` is `nowrap`, which in a 15.5rem margin would push a 64-character hash through the prose. */ .gutter .hash { white-space: normal; overflow-wrap: anywhere; font-family: inherit; } .gutter .hash .ext { width: 9px; height: 9px; margin-left: 2px; vertical-align: -1px; display: inline-block; } .content { grid-column: 2; padding: var(--s4) var(--s8); border-top: 1px solid var(--line); max-width: var(--measure); } .content > :first-child { margin-top: 0; } .content > :last-child { margin-bottom: 0; } /* IN A FINDING AID A HEADING IS STRUCTURE, so headings are set in the mono — the face the open call * sets nearly everything in — and the prose beneath them is the only thing in the sans. The scale * runs 28 / 22 / 18 off the tokens, the tracking tightens as the size grows, and the weight comes * DOWN as it grows: DM Mono ships 300-500, and a big heading at 500 in a monospace is a wall. */ h1, h2, h3 { font-family: var(--display); line-height: var(--lh-tight); letter-spacing: -.01em; text-wrap: balance; margin: 0 0 var(--s3); } h1 { font-size: var(--t-title); font-weight: 400; } h2 { font-size: var(--t-head); font-weight: 400; } h3 { font-size: var(--t-lead); font-weight: 500; } p { margin: 0 0 var(--s4); } /* Prose keeps its MEASURE and its INK. Muting the thing a person came to read is how a cream-and- * black surface throws away the contrast it was chosen for. */ .content p { max-width: var(--measure); color: var(--ink); } /* ---- facts the system states, rather than prose a person wrote -------------------------------- */ .fact { font-family: var(--mono); font-size: var(--t-small); color: var(--ink-muted); font-variant-numeric: tabular-nums; } .fact--time { color: var(--foxing); } /* TIME ONLY */ .eyebrow { margin: 0; font-family: var(--mono); font-size: var(--t-gutter); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); } /* UNKNOWN RENDERS AS UNKNOWN. A count the system could not obtain shows the em dash, never 0 (data * model §1.1) — and it must not look like an error either, because "we could not count" is a resting * state here rather than a fault. */ .count--unknown { color: var(--ink-muted); font-family: var(--mono); } /* Two zones on every time. Not a preference — the residency is distributed, so a single-zone time is * an incomplete fact, and Singapore is always one of the two because that is Padimai's working day. */ .when { font-family: var(--mono); font-size: var(--t-small); font-variant-numeric: tabular-nums; } .when__local { color: var(--ink-muted); } /* ---- the three things a gutter can say about permanence ---------------------------------------- * Anchored, anchoring, and not looked up. Told apart by FORM before colour — a glyph each — so a * reader who cannot see the colours, or a greyscale print, still reads three different marks: * * ■ anchored a filled square in `--ok` — the record is on the chain, this is its address * □ anchoring a solid outline in `--signal` — it exists, and its permanence is in flight * ⬚ unfetched a dashed outline, faint — this page did not look, and says so * * The glyph rules come FIRST and the text rules LAST, deliberately: the guards read the LAST rule * whose selector names a state, and that rule has to be the one carrying the line's colour. */ .gutter__kuri::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--s2); vertical-align: 0; } .gutter__kuri[data-state="anchored"]::before { background: var(--ok); } .gutter__kuri[data-state="anchoring"]::before { border: 1px solid var(--signal); } .gutter__kuri[data-state="unfetched"]::before { border: 1px dashed var(--ink-faint); } /* ---- motion: one place, deliberately ---------------------------------------------------------- * When a record's anchor lands, the gutter's address resolves from `anchoring…` to its kuri. That is * the moment the record becomes permanent — the one state change in this system worth marking. */ .gutter__kuri { transition: color 420ms var(--ease); } /* NO OPACITY ON THE ANCHORING LINE. It once read `opacity: .6`, which took the margin's colour from * 5.16:1 down to 2.40:1 at 11px — below any threshold, on the single element this design argues * hardest for. `--signal` at full strength is 5.22 on the cream; italic plus the word says the * state; and a state a reader cannot READ is not a state. */ .gutter__kuri[data-state="anchoring"] { color: var(--signal); font-style: italic; } .gutter__kuri[data-state="anchored"] { color: var(--ink); } /* THE THIRD STATE, beside the two it must not be mistaken for — and NOT in the same voice. * `anchoring…` is TRANSIENT and rare, worth catching the eye for a few seconds, so it keeps the * italic and the signal. "Permanence not fetched" is on EVERY row of a resolved calendar — italicising * all of them would put a page of emphasis on the one fact that is the same everywhere, and emphasis * that never varies is noise. So the third state is plain: the margin's own colour, the margin's own * face, a dashed square. It recedes, which is what a constant should do. */ .gutter__kuri[data-state="unfetched"] { color: var(--ink-muted); } /* == the pages ================================================================================= * * * Everything below composes the shell above into whole pages. No new colours, no new type sizes — * `tokens.css` is the only place either is named, and a component file that invents one is the * thing that erodes a palette. */ /* -- where the residency is: home's one memorable element ------------------------------------- * * Home's whole job is "where am I", so the answer is set large in the display face, over the facts * a date can support on its own. THE FAILURE SENTENCE IS THE SAME SIZE as the success * one: a failure that shrinks is a failure that gets missed, and the read layer went to some trouble * to produce that sentence rather than a blank. */ /* THE ONE MOTIF THE LOGGED-IN VIEW CARRIES, and it is at WATERMARK strength: the wash is baked into * the asset at 13-22% and cannot be drawn stronger by a rule here, which is the point of baking it. * The object — the open call's hero, and the residency's own word for what it is about — sits in the * corner the measure does not use, anchored to an edge rather than centred, and never repeated. Full * strength belongs to the public page; this is the shared view, and it is quieter on purpose. */ .where { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--s6); padding: var(--s12) var(--s6) var(--s8); border-bottom: 1px solid var(--line-strong); } /* SCOPED TO THE PAGE THAT DECLARED THE MOTIF, not to `.where` itself. `.where` is the opening block * of home, of the feed, AND of every not-built-yet page — drawing the object on the class would have * put the residency's hero behind five stub pages saying "not built yet", which is one motif per * page in the letter and four wrong pages in the spirit. `render.page(motif=...)` names it once, per * page, and this rule draws it. */ .aid--object .where { background-image: url("/static/motif-object.webp"); background-repeat: no-repeat; background-position: right -2rem top -3rem; background-size: 16rem auto; } /* The other three, each anchored to the edge its own crop was cut for: the bloom is a tall column * from the left of page 5, the scan sits low and right, the lattice is line art from the top of * page 3. Anchored rather than centred, because a centred motif sits under the measure and an * edge-anchored one sits in the space the column does not use. */ .aid--bloom, .aid--scan, .aid--lattice { background-repeat: no-repeat; } /* **THE BLOOM IS ANCHORED RIGHT, AND ITS OWN CROP IS LEFT-HANDED.** Left is where it sits on page 5 * of the open call and where it was first put here — and on the notice board the left 15.5rem is * the gutter, so the wash ran under every notice's date, author and Edit link. The rule is that a * motif sits in the space the COLUMN DOES NOT USE, and on this page that space is to the right of * the measure. The rule outranks the provenance. */ /* **SIZED SO THE PLATE STAYS A MARGIN NOTE.** Measured at 1280: the scan at `22rem auto` scaled a * tall crop to the full height of the page and covered a third of the folder listing, including the * one control on it — a motif that is the page rather than beside it. Each is now bounded on its * SMALLER dimension and overhangs the edge it is anchored to, so it reads as a plate cropped by the * page rather than as a picture that did not fit. They start past x≈1080 at 1280, which is clear of * the 66ch measure. */ /* **BOUNDED ON THE HEIGHT, BECAUSE ALL THREE CROPS ARE TALL.** Measured at 1280: `16rem auto` * bounds the WIDTH of a 380x1179 crop and lets it run 700px down the page — the scan covered a * third of the folder listing and the one control on it, which is a motif that IS the page rather * than one beside it. Each is sized by its height and set INSIDE the margin rather than overhanging * it, so what you see is the whole plate rather than a picture that did not fit: a strip of the open * call standing in the right margin, opposite the finding aid's own gutter on the left. */ .aid--bloom { background-image: url("/static/motif-bloom.webp"); background-position: right 2rem top 4rem; background-size: auto 28rem; } .aid--scan { background-image: url("/static/motif-scan.webp"); background-position: right 2rem bottom 2rem; background-size: auto 26rem; } .aid--lattice { background-image: url("/static/motif-lattice.webp"); background-position: right 2rem top 3rem; background-size: auto 22rem; } /* AND NOT ON A PHONE. Below the width at which the measure stops leaving a margin, there is no * space the column does not use — so the plate would sit under the prose rather than beside it. */ @media (max-width: 52rem) { .aid--bloom, .aid--scan, .aid--lattice, .aid--object .where { background-image: none; } } .lede { margin: 0; max-width: 30ch; font-family: var(--display); font-weight: 300; font-size: var(--t-hero); line-height: var(--lh-tight); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; } /* NOT smaller, NOT greyer, and NOT alarming — each of those a decision this rule had to get right. * `--foxing` means what TIME is doing, and "the residency cannot say where it is" is a statement * about the ARCHIVE. `--danger` is worse: the commonest reason this sentence appears is a residency * with no manifest yet, which is day one, entirely normal, and not an error anybody should see in * red. So it keeps `--ink` at full size and is marked STRUCTURALLY — a rule in the margin's grammar. */ .lede--unknown { border-left: 3px solid var(--line-strong); padding-left: var(--s4); } .facts { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); } /* -- sections ---------------------------------------------------------------------------------- * * `display: contents`, and this is the one rule in the file that MUST NOT be simplified away. * * `.entry` is itself `display: contents` (above) so that `.gutter` and `.content` become items of * `.aid`'s two-column grid — that is the whole mechanism behind the fixed left margin, which this * file calls "THE SIGNATURE ... the one element to keep if everything else goes". * * Wrapping entries in `

` broke it, silently and completely. A `.section` with its own box * makes the gutter and the content items of the SECTION rather than of `.aid`; `grid-column` on * them is then inert, and every gutter renders full-width above its own content, on every screen * size, with `--gutter-w` unused. Nothing raised, nothing failed, and the page's entire argument — * that a residency about the origin of sources does not hide the origin of its own — was switched * off by a wrapper added for a heading. * * So the section contributes no box: its heading and its prose are grid items in their own right, * spanning both columns, and the entries below them land in `.aid` exactly as they did before. */ .section { display: contents; } /* EVERY direct child a `display: contents` section leaves behind must span the grid itself. A list * missing from here auto-places into column 1 — `--gutter-w`, 15.5rem — with column 2 empty, and * nothing raises. The list this rule was written for (`.phases`, the timeline's own) was missing on * its first pass and rendered the whole page inside the gutter's width. That list is gone with the * phases; the rule it taught is why every other name here is listed. * * CSS has no `#` line comment and no `//`. A `#:` written above this selector out of Python habit * was read as the start of a prelude, ran on to the `{` below, and swallowed this rule whole — every * section heading and the outage sentence on four pages rendered inside the gutter's 15.5rem, and * the suite stayed green because nothing PARSED the stylesheet. `test_EVERY_RULE_IN_THE_STYLESHEET_ * IS_A_RULE` now does. */ .section__title, .section__note, .section .empty, /* `.feed__row` joins these: once `.feed` and `.feed__list` are transparent the ROWS are items of * `.aid`, so each must claim the full measure or it lands in the gutter column — which is what the * layout guard means by an item that does not land in a column. */ .register, .fields, .signin, .feed__row, /* `.notices` and `.compose` join them for the same reason, and `.section__action` with them: each is * a direct child of a transparent section, so any one of them left out auto-places into the gutter's * 15.5rem and renders a whole page of announcements inside the margin. */ .notices, .compose, .section__action, /* The library's two: the trail across the top of the folder, and the folder's own * listing. Both are direct children of a transparent section, so both must claim the * grid or they auto-place into the 15.5rem margin — which the layout guard refuses * and which would otherwise render a whole folder inside the gutter. */ .crumbs, .shelf, /* `.more` joins them: the feed's way forward is a direct child of `.aid`, after the transparent * `.feed`, so left out it auto-places into the 15.5rem gutter and the one control that reaches the * rest of the archive renders inside the margin. */ .more, /* And the calendar's, for the same reason as every other name on this list. */ /* `.grid` and `.month__views` join them: both are direct children of a transparent section, * and the calendar grid auto-placed into the 15.5rem gutter is seven columns inside a margin. */ /* And the chain panel: it is a direct child of a transparent section, so left off this list it * auto-places into the 15.5rem gutter and the whole of what the chain says renders inside a margin. * It is a REAL BOX rather than `display: contents` on purpose — the note, the rows and the control * belong to one another, and `chain.js` redraws its middle from a payload, which wants a container * that stays put rather than three items of the page's own grid. */ .chain, /* And the issue page's two: the remedy block and the list of the four checks. Both are direct * children of a transparent section, so either one left off this list auto-places into the 15.5rem * gutter — and on that page the block rendered unreadable would be the one explaining why nothing * else works. */ .preflight, .preflight__list, /* And the relationships page's list, both times it is rendered — what a record says, and what says * something about it. Each is a direct child of a transparent section, so left off this list it * auto-places into the 15.5rem gutter and a page of lookup paths renders inside the margin. That is * the fourth defect of exactly this shape in this file, which is why the name joins the list in the * same edit that introduces the class rather than after somebody notices. */ .edges, .month, .month__nav, .month__views, .grid, .withdraw { grid-column: 1 / -1; } .section__title { margin: var(--s8) 0 0; padding: 0 var(--s6) var(--s2); font-family: var(--mono); font-size: var(--t-gutter); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); border-bottom: 1px solid var(--line-strong); } .section__note { margin: var(--s3) 0 var(--s2); padding: 0 var(--s6); font-family: var(--mono); font-size: var(--t-gutter); line-height: 1.6; color: var(--ink-muted); } /* the measure is on the TEXT, so the paragraph still spans the grid (the layout guard's rule) */ .section__note-text { display: block; max-width: var(--measure); } .entry__title { margin: 0 0 var(--s2); font-family: var(--display); font-size: var(--t-lead); font-weight: 500; line-height: var(--lh-tight); letter-spacing: -.005em; color: var(--ink); text-wrap: balance; } .entry__body { margin: 0; max-width: var(--measure); font-size: var(--t-body); line-height: var(--lh-body); } .entry__body--bare { color: var(--ink-muted); font-style: italic; } /* -- the two silences, which must not look alike ----------------------------------------------- * * "Nothing yet" is the residency being quiet. "Could not be read" is the archive being unreachable. * They occupy the same space, so they are told apart by weight and by a rule the eye catches — * NOT by colour alone, which would leave them identical to a reader who cannot distinguish it. * `.section .empty` would be (0,2,0) and beat `.empty--blind`'s (0,1,0) padding at any order, so * both indents are set at the same specificity. */ .empty { margin: var(--s4) 0 0; padding-left: var(--s6); font-size: var(--t-body); color: var(--ink-muted); font-style: italic; } .empty--blind { font-style: normal; /* quiet is italic; unreachable is not */ color: var(--ink); /* quiet is muted; this is a statement, not an aside */ margin-left: var(--s6); border-left: 3px solid var(--line-strong); padding-left: var(--s4); } /* -- the directory ------------------------------------------------------------------------------ * * **IT WAS A RULED LIST AND IS NOW A CARD PER PERSON** (operator direction, 2026-09-19: *"I want it * look like a directory page with rendering each actant with their profile pic"*). The list said id, * title and email, which is a finding aid for nine rows and tells you nothing about anybody; a * residency page about the people in it should show the people in it. * * The cards flow into as many columns as the measure allows rather than a fixed number, so nine * people read as a directory on a laptop and as one column on a phone with nothing to switch. */ .register { list-style: none; margin: 0; padding: var(--s4) var(--s6); display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); } /* The person's own card. `align-items: start` so the picture sits at the top of a tall card rather * than floating in the middle of a bio. */ .card--person { padding: var(--s4); } .card__id { margin: var(--s1) 0 0; font-family: var(--mono); font-size: var(--t-gutter); line-height: var(--lh-mono); color: var(--ink-faint); } .card__role { margin: var(--s1) 0 0; font-size: var(--t-small); color: var(--ink-muted); } .card__mail { margin: var(--s2) 0 0; font-family: var(--mono); font-size: var(--t-gutter); line-height: var(--lh-mono); color: var(--ink-muted); overflow-wrap: anywhere; } /* A minted address with no way to sign in yet — a real state, and one a coordinator has to be able * to see at a glance rather than deduce from an absence. It is carried by the WORDS ("no email yet — * cannot sign in"), not by a colour: it is neither an error nor a deadline, and the two palette * entries that would have made it shout are spoken for. */ .card__mail--awaiting { color: var(--ink-muted); font-style: italic; } .card__prose { margin: var(--s3) 0 0; font-size: var(--t-small); line-height: var(--lh-body); } .card__prose p { margin: 0 0 var(--s2); } .card__links { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-family: var(--mono); font-size: var(--t-gutter); line-height: var(--lh-mono); } .card__link { min-width: 0; overflow-wrap: anywhere; } /* THE PICTURE, AND THE FIGURE THAT STANDS IN FOR ONE. Square-cropped so a dozen aspect ratios line * up down a column; the placeholder is an inline `

`. That was invisible for as long as * the `

` was content-sized — and it is a GRID ITEM of `.aid`, which stretches it to its row. On a * page with little in it (a board holding one notice) the row absorbs the leftover height, the `