/* JFSN rooms — the homepage's design language as a shared grammar (2026-09-15). The site-wide theme (theme-unbuilt-archive.css) swaps colours; every page under it still wore the old light site's composition: italic grey titles with a red ink-stamp box, drones, archery targets, dimmed random hero photographs. This file carries what actually makes the homepage work — mono eyebrows, upright serif headlines with one italic phrase in the accent, hairline rules, tiered near-black surfaces, the matted vitrine, dashed frames for what is missing — and retires the old ornament. Opt-in per page: . A page joins only once it has been redesigned as a room and verified, so nothing changes on pages that haven't been (CLAUDE.md: prototype on one or two routes before rolling out). Grammar is shared; composition is not — each room gets one signature drawn from its own content, below its own section. Colour values are the homepage's own compiled roles (_shared/homepage-tailwind.css), not new ones. */ html[data-room]{ --ua-s0:#0e0e10; /* surface-container-lowest — mats, vitrines */ --ua-s1:#131315; /* surface — page */ --ua-s2:#1b1b1d; /* surface-container-low — quiet panels */ --ua-text:#e5e1e4; /* on-surface */ --ua-text-2:#d0c5af; /* on-surface-variant */ --ua-muted:#99907c; /* outline — labels, 5.9:1 on --ua-s1 */ --ua-line:#4d4635; /* outline-variant — every hairline */ --ua-gold:#f2ca50; /* primary */ --ua-loss:#ff8040; /* the homepage's Register of Loss badge */ /* One accent per room, drawn from what the room holds. */ --room-accent:var(--ua-gold); } html[data-room="loss"]{--room-accent:var(--ua-loss)} html[data-room="last"]{--room-accent:var(--ua-loss)} /* ── retired ornament ── Drones, the archery target, the dimmed random header photograph and the corner closeup were the light site's PRESS layer. On the dark ground they read as murk competing with the text, and the random header image put an unrelated work above every page's title. NOT retired: .brand-mark-anchor. Parking the mark on the back-to-top button (About, Stories) and its scroll exit (Register) are Jeff's call, 2026-09-09, asserted by smoke check 36. */ html[data-room] .roamer, html[data-room] .mast-bay, html[data-room] .target-clip, html[data-room] .page-visual, html[data-room] .corner-closeup, html[data-room] .drone-container-loss, html[data-room] .drone-berth{display:none} /* ── the bar: one row, like the homepage's dock ── .section-label and the imprint duplicated what aria-current already shows and forced a second row at 1440px (measured 115px tall). */ html[data-room] .runhead .section-label, html[data-room] .runhead .who .imprint{display:none} html[data-room] .runhead .who{font-style:normal;color:var(--ua-text);white-space:nowrap} html[data-room] .runhead .who img{width:28px !important;height:28px !important} html[data-room] .runhead .nav{font-size:11px;letter-spacing:.06em;color:var(--ua-muted)} html[data-room] .runhead .nav a, html[data-room] .runhead .nav a:visited{color:var(--ua-muted)} html[data-room] .runhead .nav a:hover{color:var(--ua-text)} html[data-room] .runhead .nav a[aria-current="page"]{color:var(--room-accent)} html[data-room] .runhead::after{background:var(--room-accent);box-shadow:none} html[data-room] .runhead .nav a{white-space:nowrap} @media(min-width:1100px){ html[data-room] .runhead{flex-wrap:nowrap} } /* 11px labels wrapped inside themselves at 1100 ("Register of / Loss"); nav.js already steps its gap down across this same band. */ @media(min-width:1100px) and (max-width:1279px){ html[data-room] .runhead .nav{font-size:10px;letter-spacing:.02em} } /* base.css parks the skip link at top:-40px, but it renders 44px tall, so a 14px gold sliver showed at the top-left of every themed page (measured top:-30px on About). Unfocused it now sits fully out of view; base.css's own :focus{top:0} still brings it in, untouched. */ html[data-room] .skip-link:not(:focus){top:-80px} /* ── eyebrow ── */ html[data-room] .breadcrumb{ font-family:var(--mono);font-size:11px;letter-spacing:.12em; color:var(--ua-muted);margin-top:clamp(20px,3vw,36px) } html[data-room] .breadcrumb a, html[data-room] .breadcrumb a:visited{color:var(--ua-muted)} html[data-room] .breadcrumb a:hover{color:var(--ua-text)} html[data-room] .breadcrumb [aria-current="page"]{color:var(--room-accent)} /* header-enhancements.js injects a second trail (.breadcrumb-nav) into
on every page that already has this static one — two identical "Home / Stories" lines, measured on both rooms. The static trail is the one in the eyebrow position above the title, so the injected copy goes. */ html[data-room] .breadcrumb-nav{display:none} /* ── headline: upright, one italic phrase in the accent ── */ html[data-room] .mast h1, html[data-room] .ledger h1{ font-style:normal;font-weight:400;letter-spacing:-.022em;line-height:1.02; color:var(--ua-text);padding:0;text-wrap:balance } html[data-room] .mast h1 em, html[data-room] .ledger h1 em{font-style:italic;font-weight:400;color:var(--room-accent)} /* Titles do not slide in. Each page's own titleSlideIn (100px from the right) is the generic entrance the homepage never uses. Scoped to above 700px on .mast h1 because below it motion.css replaces it with the approved "opening" exit (title and meta leave at different speeds; smoke-asserted). The Register's .ledger h1 has no primitive at any width. */ @media(min-width:701px){ html[data-room] .mast h1{animation:none;will-change:auto} } html[data-room] .ledger h1{animation:none;will-change:auto} html[data-room] .ink-stamp{ display:inline;background:none;color:inherit;padding:0;box-shadow:none;animation:none } /* ── hairlines ── */ html[data-room] section h2{ font-style:normal;font-weight:400;letter-spacing:-.015em;line-height:1.1; color:var(--ua-text);border-bottom:0;border-top:1px solid var(--ua-line) } /* ── page opening: title holds the left edge, the facts ledger sits right ── */ html[data-room] header.mast{ border-bottom:1px solid var(--ua-line); padding:clamp(40px,7vw,104px) 0 clamp(28px,3vw,44px) } html[data-room] header.mast::after{display:none} /* About's 3px drifting rule */ html[data-room] .mast h1{font-size:clamp(44px,6.4vw,96px)} html[data-room] .mast .meta{ font-size:11px;letter-spacing:.12em;color:var(--ua-muted);margin-top:22px } @media(min-width:940px){ html[data-room] header.mast{ display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:48px } html[data-room] .mast .meta{margin:0;text-align:right} } /* .standfirst is itself a
, so a room's section rhythm would open a hole between the title and the first paragraph (~220px measured on Stories). */ html[data-room] section.standfirst{margin:0;border-bottom:1px solid var(--ua-line);padding:40px 0 44px} html[data-room] .standfirst::after{display:none} /* About's drifting 1px rule */ html[data-room] .standfirst p{color:var(--ua-text-2)} html[data-room] .standfirst p .drop{color:var(--room-accent);font-weight:400} /* One progress indicator: the runhead's own underline already tracks the scroll, and a second 2px bar at the very top duplicated it. */ html[data-room] .read-progress{display:none} /* ═══ READING ROOM — stories.html ═══ Signature: Jeff's own words are the architecture. The page already separates his verbatim quotes (large) from software-written connective prose (small, grey); the room makes that the whole composition — title flush left, testimony in an inset column, a numbered chapter ledger in the margin that tracks where you are. Absent: any image above the title, any motion beyond the section reveal already on the page. */ html[data-room="reading"] .note{border-top:1px solid var(--room-accent);color:var(--ua-muted);font-size:11px} html[data-room="reading"] section{margin:clamp(88px,10vw,150px) 0} html[data-room="reading"] section h2{ font-size:clamp(28px,3.4vw,46px);padding-top:28px;margin-bottom:24px } html[data-room="reading"] section h2::before{ font-family:var(--mono);font-size:11px;letter-spacing:.14em; color:var(--room-accent);margin-bottom:16px } html[data-room="reading"] .dateline{color:var(--ua-muted);margin:-8px 0 34px} /* His words: the loudest thing in the building. */ html[data-room="reading"] .quote{ font-size:clamp(26px,3.4vw,46px);line-height:1.2;letter-spacing:-.016em; max-width:24ch;color:var(--ua-text); border-left:1px solid var(--room-accent); padding-left:clamp(20px,2.4vw,36px);margin:clamp(44px,5vw,76px) 0 } html[data-room="reading"] .attrib{font-size:11px;letter-spacing:.1em;color:var(--ua-muted);margin-top:18px} /* Everything that is not his: quieter, narrower, never competing. */ html[data-room="reading"] .prose{font-size:15.5px;color:var(--grey);max-width:54ch} html[data-room="reading"] .dialogue{ background:var(--ua-s2);border-left:1px solid var(--ua-line); padding:clamp(20px,2.4vw,32px) clamp(20px,2.6vw,36px) } html[data-room="reading"] .dialogue .q{color:var(--ua-muted)} html[data-room="reading"] .dialogue .a{color:var(--ua-text);font-size:clamp(19px,2.2vw,26px)} /* Plates named in the testimony sit in the homepage's tactile mat, not on white card stock. */ html[data-room="reading"] .pb-frame{ background:var(--ua-s0);border:1px solid var(--ua-line); box-shadow:inset 0 2px 12px rgba(0,0,0,.95) } html[data-room="reading"] .pb-plate:hover .pb-frame{border-color:var(--ua-muted);box-shadow:inset 0 2px 12px rgba(0,0,0,.95)} html[data-room="reading"] .pb-note{border-top-color:var(--ua-line)} /* Inset testimony column: the title holds the left edge, his words step in. */ @media(min-width:1100px){ html[data-room="reading"] main > section:not(.standfirst){ max-width:860px;margin-left:clamp(0px,7vw,120px) } } /* Chapter ledger. It is position:fixed at the right edge from 1400px, and the mast's right-aligned meta ran straight under it at 1440 (measured). Reserve its gutter only as far as the viewport actually lacks room: 260px at 1440, ~20px at 1920 where the centred column already clears it. */ @media(min-width:1400px){ html[data-room="reading"] main{padding-right:max(0px,calc(300px - (100vw - 1360px) / 2))} } html[data-room="reading"] nav.toc{ counter-reset:ch;top:112px;max-width:232px; font-family:var(--mono);font-size:11px;letter-spacing:.02em; border-left:1px solid var(--ua-line);padding-left:16px } html[data-room="reading"] nav.toc a{ counter-increment:ch;position:relative;display:grid;grid-template-columns:2.6em 1fr; margin:0;padding:6px 0;max-width:none;color:var(--ua-muted) } html[data-room="reading"] nav.toc a::before{content:counter(ch,decimal-leading-zero);color:var(--ua-line)} html[data-room="reading"] nav.toc a:hover{color:var(--ua-text)} html[data-room="reading"] nav.toc a.active{color:var(--room-accent);font-weight:400} html[data-room="reading"] nav.toc a.active::before{color:var(--room-accent)} html[data-room="reading"] nav.toc a.active::after{ content:"";position:absolute;left:-17px;top:6px;bottom:6px;width:1px;background:var(--room-accent) } /* ═══ THE EMPTY VITRINE — register-of-loss.html ═══ Signature: the homepage's vitrine with nothing in it. A solid outer frame (the record exists) around a dashed inner frame (the object does not), held in view beside the ledger while its rows of "Not recorded" pass. On the dark ground the old faint-bordered void measured ~1000px of near-black at 1440px and read as a page that failed to load; absence has to be visibly built to be read as absence. Absent: drones, the random header photograph. */ html[data-room="loss"] .plate .void-mount{ background:var(--ua-s0); border:1px dashed rgba(255,128,64,.45); outline:1px solid var(--ua-line);outline-offset:clamp(10px,1.3vw,16px); box-shadow:inset 0 2px 12px rgba(0,0,0,.95) } html[data-room="loss"] .plate{padding:clamp(10px,1.3vw,16px)} html[data-room="loss"] .plate .plate-no{ color:var(--room-accent);background:var(--ua-s1); top:calc(clamp(10px,1.3vw,16px) - 8px);left:calc(clamp(10px,1.3vw,16px) + 24px) } html[data-room="loss"] .plate .void-mount .vtext{color:var(--ua-text-2);font-size:clamp(16px,1.5vw,20px)} html[data-room="loss"] .plate .void-mount .vtext small{color:var(--ua-muted)} html[data-room="loss"] .plate .sig{color:var(--ua-muted);margin-top:22px} @media(min-width:940px){ html[data-room="loss"] .plate{position:sticky;top:88px;align-self:start} html[data-room="loss"] .plate .void-mount{ width:min(100%,calc((100vh - 190px) * .8));margin-inline:auto } } html[data-room="loss"] .ledger h1{font-size:clamp(36px,3.8vw,58px);margin-bottom:10px} html[data-room="loss"] .ledger .yr{color:var(--ua-muted)} html[data-room="loss"] dl.rows{border-top:1px solid var(--ua-line)} html[data-room="loss"] dl.rows div{border-bottom:1px solid var(--ua-line);padding:12px 0} html[data-room="loss"] dl.rows div.absent{border-bottom-style:dashed} html[data-room="loss"] dl.rows dt{color:var(--ua-muted);letter-spacing:.14em} /* Counts as display type, as on the homepage's ledger row. */ html[data-room="loss"] .tally{background:var(--ua-s0);border:1px solid var(--ua-line);padding:18px 20px} html[data-room="loss"] .tally .tally-label{color:var(--ua-muted)} html[data-room="loss"] .tally .n{border-bottom-color:var(--ua-line);padding:10px 0} html[data-room="loss"] .tally .n b{font-size:clamp(24px,2.2vw,32px);color:var(--ua-text);letter-spacing:-.01em} html[data-room="loss"] .tally .n .r{color:var(--ua-loss)} /* The lost population in the drawn ratio takes the room's accent. */ html[data-room="loss"] #ratio-field{--accent:var(--ua-loss)} /* A ~70-word explanation set in uppercase mono read as a wall of caps on a phone (measured at 375px); keep the mono, drop the capitals. */ html[data-room="loss"] .ratio-caption{color:var(--ua-muted);text-transform:none;letter-spacing:.02em;line-height:1.7} html[data-room="loss"] .story-link{border-left:1px solid var(--room-accent)} html[data-room="loss"] .story-link .lbl{color:var(--room-accent)} html[data-room="loss"] .named-losses h2{ font-size:clamp(28px,3.2vw,44px);border-top:1px solid var(--ua-line);padding-top:28px } html[data-room="loss"] .named-entry{ border:1px dashed var(--ua-line);border-color:rgba(255,128,64,.32); background:var(--ua-s0);padding:22px 22px 24px } html[data-room="loss"] .named-entry h3{font-size:clamp(18px,1.6vw,21px);color:var(--ua-text)} html[data-room="loss"] .named-entry dl, html[data-room="loss"] .named-entry dl div{border-color:var(--ua-line)} html[data-room="loss"] .named-entry dt{color:var(--ua-muted)} html[data-room="loss"] .named-entry dd{color:var(--ua-text-2)} html[data-room="loss"] .named-entry .quote{border-left:1px solid var(--room-accent)} html[data-room="loss"] .named-entry .confirm-note{color:var(--ua-muted)} html[data-room="loss"] .desc{border-top:1px solid var(--ua-line);padding-top:24px} html[data-room="loss"] .desc h3{color:var(--room-accent)} html[data-room="loss"] .desc p{color:var(--ua-text-2)} html[data-room="loss"] .desc .quote{border-left:1px solid var(--room-accent);font-size:18px;color:var(--ua-text)} html[data-room="loss"] .prov{border-top:1px solid var(--ua-line)} html[data-room="loss"] nav.plates a{border-top-color:var(--ua-line)} html[data-room="loss"] nav.plates a:hover{border-top-color:var(--room-accent)} /* ═══ THE LETTER — about.html ═══ Signature: his voice, then his words. The recording is the one object in the room — a matted vitrine — and directly beneath it the transcript Jeff verified against it on 2026-09-15, set as his words are set everywhere (large, italic), lighting the sentence being spoken during playback. It was also the missing text alternative for the site's only audio of him. Around it, a single reading column and the "Five parts" note as a location ledger. Absent: drones, the archery target, the header photo, the drifting rules, gold on every . The native