/* ๐ŸŽจ sanctuary.css โ€” the shared design system (design-review D1). ONE palette, ONE type ramp, ONE 8px space scale, ONE button. Extracted from the dominant theme (season/wiki/the games). Pages opt in by linking this; adopt the drifting legacy pages incrementally. (welcome.html's warm-paper hero is a deliberate exception โ€” the front door.) โœจ THE PRESTIGE PASS: an obsidian-and-champagne, editorial-luxury treatment (the Robb Report register) laid over the Sanctuary's violet identity โ€” gold is now the star, headlines are cream serif with a magazine eyebrow, geometry is crisper, whitespace more generous, borders hairline. Same tokens, richer feel; nothing structural changed, so every page inherits the lift for free. ๐Ÿ”ค CN6 โ€” THE FONT FOLD (the connector line). Type is now SELF-HOSTED, and the privacy line moved from "zero @font-face" to "zero EXTERNAL font origins" โ€” consciously, in the same change that amended docs/audits/offline-privacy-audit.md. Every src below is a same-origin absolute path under /fonts/; there is no CDN, no Google Fonts, no `url(httpโ€ฆ)`, no @import, anywhere in this file or its twins. The editorial serif is Anthropic Serif โ€” keeper-cleared to serve 2026-08-06 and re-affirmed by Nick 2026-08-18, so the Source Serif 4 stand-in is gone. Only the three subsetted woff2 faces below are served (400, 400-italic, 600 โ€” subset from the Text family). The 24 OTF masters stay OUTSIDE this tree at art/fonts/anthropic-serif/ and are never copied in or served raw: web faces ship as woff2 only. IBM Plex Mono stays the OFL terminal mono. DEGRADES GRACEFULLY: if a .woff2 is absent the browser 404s the face and falls straight through to the next family in the stack (the pre-CN6 stack, unchanged), so a missing binary costs looks, never function. See fonts/README.md for the exact five files this expects. font-display:swap so text is never invisible. */ @font-face{ font-family:'Anthropic Serif'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/anthropic-serif-400.woff2') format('woff2'); } @font-face{ font-family:'Anthropic Serif'; font-style:italic; font-weight:400; font-display:swap; src:url('/fonts/anthropic-serif-400-italic.woff2') format('woff2'); } @font-face{ font-family:'Anthropic Serif'; font-style:normal; font-weight:600 700; font-display:swap; src:url('/fonts/anthropic-serif-600.woff2') format('woff2'); } @font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/ibm-plex-mono-400.woff2') format('woff2'); } @font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:600 700; font-display:swap; src:url('/fonts/ibm-plex-mono-600.woff2') format('woff2'); } :root{ /* obsidian ground, a warm champagne vignette instead of a cold one */ --bg:#08060e; --bg2:#140f22; --panel:rgba(22,15,40,.5); --panel2:rgba(16,10,30,.62); --violet:#b9a0ff; --violet-2:#cdbcf0; --gold:#f3d9a4; --gold-2:#caa96a; --champagne:#e8cfa0; --rose:#e9c2d8; --teal:#7fe3d3; --ink:#f4eede; --ink-dim:#cbbfe6; --ink-soft:#a99ac9; --faint:#8a7ab0; --edge:rgba(232,207,160,.14); --edge-2:rgba(232,207,160,.34); /* hairline, gold-tinted */ --hair:rgba(232,207,160,.16); /* a taller, more editorial ramp */ /* CN6: the token NAME is fenced by four suites โ€” never rename --serif. Only its VALUE changed: the self-hosted face leads, the historical stack stays as the fallback so a missing binary is invisible in behaviour. */ --serif:'Anthropic Serif','Iowan Old Style','Palatino Linotype','Book Antiqua',Georgia,'Times New Roman',serif; /* CN6: the NEW token โ€” one mono for both terminal skins and every code surface. */ --mono:'IBM Plex Mono',ui-monospace,Consolas,Menlo,monospace; --t-display:clamp(30px,5.4vw,42px); --t-h:19px; --t-lead:16px; --t-body:14px; --t-cap:12px; --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --radius:12px; --radius-pill:24px; --maxw:820px; } .sanctuary{ font-family:var(--serif); background:radial-gradient(ellipse at 50% -8%, rgba(243,217,164,.10), transparent 42%), radial-gradient(ellipse at 50% 0%, var(--bg2), var(--bg) 72%); color:var(--ink); -webkit-font-smoothing:antialiased; } .sanctuary a{ color:var(--gold); text-underline-offset:3px; text-decoration-color:var(--edge-2); } .sanctuary a:hover{ color:var(--champagne); } .sanctuary .wrap{ max-width:var(--maxw); margin:0 auto; padding:var(--s4) var(--s2) var(--s5); } .sanctuary .seo-intro{ max-width:760px; margin:0 auto var(--s3); padding:var(--s2) var(--s3); border:1px solid var(--edge); border-radius:var(--radius); background:rgba(177,140,255,.05); } .sanctuary .seo-intro h1{ margin:0 0 var(--s1); font-size:clamp(24px,4vw,34px); } .sanctuary .seo-intro p{ margin:0; color:var(--ink-soft); line-height:1.6; } /* headlines: cream serif, tight tracking โ€” the magazine cover, not a UI label */ .sanctuary h1{ font-size:var(--t-display); font-weight:normal; color:var(--ink); margin:0 0 var(--s2); letter-spacing:-.01em; line-height:1.14; } .sanctuary h2{ font-size:var(--t-h); font-weight:normal; color:var(--champagne); letter-spacing:.02em; margin:var(--s3) 0 var(--s2); padding-bottom:6px; border-bottom:1px solid var(--hair); } /* the eyebrow โ€” gold, spaced, uppercase: the Robb-Report kicker */ .sanctuary .kick{ color:var(--gold); font-size:var(--t-cap); letter-spacing:.24em; text-transform:uppercase; font-family:var(--serif); } .sanctuary .lead{ color:var(--ink-dim); font-size:var(--t-lead); line-height:1.7; max-width:62ch; } .sanctuary .dim{ color:var(--faint); } .sanctuary .card{ background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--edge); border-radius:var(--radius); padding:var(--s3) var(--s3); box-shadow:0 1px 0 rgba(243,217,164,.05) inset, 0 18px 40px -28px rgba(0,0,0,.8); } /* the primary action โ€” champagne on obsidian, a spaced serif label */ .sanctuary .btn{ display:inline-block; font-family:var(--serif); font-size:var(--t-body); letter-spacing:.04em; border:1px solid var(--gold-2); border-radius:var(--radius-pill); padding:11px 22px; background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#1a1206; font-weight:bold; cursor:pointer; text-decoration:none; } .sanctuary .btn:hover{ filter:brightness(1.05); } .sanctuary .btn.ghost{ background:none; color:var(--gold); border:1px solid var(--edge-2); font-weight:normal; } .sanctuary .btn:disabled{ opacity:.5; cursor:default; } .sanctuary .pill{ display:inline-block; font-size:var(--t-cap); letter-spacing:.02em; padding:4px 12px; border-radius:var(--radius-pill); background:var(--panel2); border:1px solid var(--edge); color:var(--ink-soft); text-decoration:none; } .sanctuary .pill.on{ border-color:var(--gold); color:var(--gold); } .sanctuary .row{ display:flex; gap:var(--s1); flex-wrap:wrap; align-items:center; } .sanctuary input, .sanctuary textarea{ font-family:var(--serif); font-size:var(--t-body); color:var(--ink); background:rgba(0,0,0,.3); border:1px solid var(--edge); border-radius:10px; padding:10px 13px; width:100%; } .sanctuary input:focus, .sanctuary textarea:focus{ outline:none; border-color:var(--gold-2); box-shadow:0 0 0 3px rgba(243,217,164,.12); } .sanctuary textarea{ min-height:90px; resize:vertical; } .sanctuary .muted-note{ font-size:var(--t-cap); color:var(--faint); } @media (prefers-reduced-motion: reduce){ .sanctuary *{ animation:none !important; transition:none !important; } } /* The menu's opt-in fast display mode is reversible and intentionally honest: it removes motion and procedural atmosphere cost; it does not claim to change the network size of page assets. */ html[data-bh-fast-load="1"] * , html[data-bh-fast-load="1"] *::before, html[data-bh-fast-load="1"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html[data-bh-fast-load="1"] .atmo-grain, html[data-bh-fast-load="1"] .atmo-vig { display:none !important; } .menu-preferences { display:flex; flex-wrap:wrap; gap:6px; padding:8px 10px 10px; border-top:1px solid var(--edge); } .menu-preferences button { border:1px solid var(--edge); border-radius:999px; padding:5px 9px; background:transparent; color:var(--ink-dim); cursor:pointer; font:inherit; font-size:12px; } .menu-preferences button:hover, .menu-preferences button:focus-visible { color:var(--ink); border-color:var(--edge-2); } /* ๐Ÿ–จ ARK3 โ€” THE PRESS. The tier below "no internet" is "no electricity": every token page prints as clean black-on-white paper. Chrome (nav bars, buttons, inputs, the radio) drops away; links reveal their destinations so a paper copy still points somewhere. A printed page must serve a stranger with no one left to explain it. */ @media print{ .sanctuary{ background:#fff !important; color:#000 !important; font-size:12pt; } .sanctuary *{ background:transparent !important; color:#000 !important; box-shadow:none !important; text-shadow:none !important; } .sanctuary h1, .sanctuary h2{ color:#000 !important; border-color:#000 !important; page-break-after:avoid; } .sanctuary .card{ border:1px solid #000 !important; page-break-inside:avoid; } .sanctuary a{ text-decoration:underline; } .sanctuary a[href^="http"]::after, .sanctuary a[href^="/"]::after{ content:" (" attr(href) ")"; font-size:9pt; } .sanctuary .tbar, .sanctuary nav, .sanctuary .btn, .sanctuary .pill, .sanctuary button, .sanctuary input, .sanctuary textarea, .sanctuary video, .sanctuary canvas, .sanctuary audio, #moreMenu, #toast, #radio, .no-print{ display:none !important; } /* shell-layer chrome (see THE SHELL LAYER below) โ€” transient UI never prints */ .sanctuary .scrim, .sanctuary .dialog, .sanctuary .toast, .sanctuary .skel, .sanctuary .skip-link{ display:none !important; } /* โ€ฆbut .sheet and kbd are CONTENT: keep them, just give them ink-on-paper edges */ .sanctuary .sheet{ border:1px solid #000 !important; page-break-inside:avoid; } .sanctuary kbd{ border:1px solid #000 !important; } .print-only{ display:block !important; } } .print-only{ display:none; } /* ============================================================================ ๐Ÿ— THE SHELL LAYER (slice S1-DESIGN-SHELL) โ€” ADDITIVE ONLY. Everything above this line is byte-for-byte unchanged except SIX new lines (two comments + three rules) inside @media print, because the 33 pages that link this file already depend on it. HOW TO RE-VERIFY THAT WITHOUT TRUSTING ME, and how it was re-verified for this pass: the pre-slice stylesheet is baked into the storefront image, so docker run --rm blackhorn-storefront cat //app/sanctuary.css yields the 75-line baseline, and `diff` against `head -81` of this file reports exactly one hunk โ€” those six lines, at 73-78. RE-RUN AND CONFIRMED VERBATIM ON THIS PASS: 75 lines in, one hunk `72a73,78`, two comments and three rules. (Do not reach for the RUNNING container as an earlier phrasing here did โ€” it is stopped, so a recipe that depends on it silently yields nothing. And note the DOUBLE slash: under Git Bash on Windows a bare `/app/sanctuary.css` is path-mangled to `C:/Program Files/Git/app/โ€ฆ` and the command fails with "can't open" โ€” which reads like a missing file rather than a shell artefact. That mangling ate this recipe once on this pass.) WHY: the system shipped a palette, a type ramp and ONE button, and pages then hand-rolled everything the system did not name. โ”€โ”€ RECON, RE-MEASURED ON DISK 2026-08-03 (TWO AUDIT PASSES) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ The first cut of this block shipped five wrong counts. A second adversarial pass over the CORRECTED version then found eighteen more false or imprecise statements โ€” in this recon block and in sections A, C, D, E, F, G and H โ€” every one of them flagged in place below with what the earlier draft said. None of them changed what the stylesheet DOES (the one code change in the whole second pass is the kbd stack in section G, which had contradicted its own comment); all of them were doctrine other agents would have inherited. The blast-radius reasoning here is only as good as these numbers, so each is restated with the source you can re-run it against. RE-COUNT BEFORE YOU TRUST THEM: twenty-three wrong statements across two passes, in a block written carefully both times, is the honest base rate for prose of this kind. A THIRD adversarial pass then found eight more โ€” six of them stale rather than originally false, because concurrent slices kept editing pages underneath this prose. That is the real lesson of this block: prose about a moving repo ROTS, and rot reads exactly like a lie to the next agent. Basis, re-counted on the third pass: the 122 .html files in apps/storefront, 36 of which link this file and 33 of which mount it. Where a sentence below still says "120" or "31" it is a stale denominator I missed โ€” treat any bare count here as suspect and re-run the command beside it. โ€ข ADOPTION, AND THE ONLY VOLATILE NUMBERS IN THIS BLOCK. At 17:55 local on 2026-08-03: 122 .html files, 36 link this file, 33 mount ``, and the THREE that link without mounting are ceremony, mainframe and write โ€” nothing here can reach those, because every selector below is .sanctuary-scoped. Reproduce all four with ls *.html | wc -l grep -l 'sanctuary\.css' *.html | wc -l grep -l 'class="sanctuary' *.html | wc -l comm -23 <(grep -l 'sanctuary\.css' *.html|sort) \ <(grep -l 'class="sanctuary' *.html|sort) DO NOT TRUST THE FOUR NUMBERS ABOVE. They moved three times DURING this one audit โ€” 120/33/29, then 122/34/31, then 122/36/33 โ€” because concurrent slices kept converting pages onto the frozen palette while it ran (404.html and watch.html both flipped from not-mounting to mounting inside the hour; neither declares any name this file defines, so nothing collided). Every OTHER claim below is deliberately phrased against a named file and line, or as "no mounted page does X", precisely so that it cannot rot the way these can. When a fact here needs a denominator that changes hourly, that is a smell: assert the property, not the count. โ€ข 18 files re-invent the auto-fit card grid, at 12 different minmax minimums (140/150/170/200/220/230/238/240/250/260/320px and 4.5rem). โ€ข 13 files define a `.sheet`, and they are NOT byte-identical. Twelve of them mount .sanctuary; eleven of those twelve share one var()-based declaration, and clockwork.html:25 is the odd one out (padding:14px 16px; margin:12px 0; background:rgba(0,0,0,.2)). The thirteenth is write.html:29, which does not mount .sanctuary and means something else entirely by the name โ€” a 760px page container. That is how load-bearing this name is. โ€ข 5 files carry a rule matching `.empty`: clockwork.html:43, grimoire.html:23 and impact-panel.html:22 declare a bare `.empty`, arcana.html:53 scopes it `.book .empty`, and ninebells.html:28 writes `#play.empty`. Only clockwork mounts .sanctuary โ€” which is why the blast radius really was one page even though the count was wrong. โ€ข WAS "zero `.sr-only`, zero `scroll-margin`/`scroll-padding`, zero `.skel` in all 120, and no ``/`role="dialog"` anywhere". Only part of that is still true, and the part that changed is the part that matters most โ€” TWO OF THESE PRIMITIVES ARE NOW LOAD-BEARING: โ€“ `.sr-only` is USED, and by nothing but this file. news.html:45, :105 and :111 emit ` (opens in a new tab)`, news.html MOUNTS, and a repo-wide grep for a `.sr-only` RULE finds exactly one โ€” the one in section B below. Delete section B's rule and that parenthetical becomes visible body text on a live page. โ€“ `.skip-link` is SEATED. watch.html:46 is a real `` with a real target at watch.html:48 (`
`), and watch.html declares no skip-link CSS of its own. Delete section B's rule and that link renders as visible chrome at the top of the page instead of being parked at top:-100px. Still true, re-counted on the third pass over the 122: zero `.skel`, zero `scroll-margin`/`scroll-padding` outside this file, no `` element and no `role="dialog"` anywhere. The rest of that sentence's first cut was stated far too broadly, so it is restated here at the scope where it is actually true: โ€“ `aria-live` was "in exactly one of the 120 pages (reflection.html:58)". Now FOUR of the 122 carry it โ€” today.html:48/:52/:73, reflection.html:58, guild.html:59/:68/:248, guilds.html:71/:74 โ€” plus wheel.js:599 at runtime. Of those, today and wheel MOUNT and reflection does NOT (it links nothing here), which inverts the earlier reading of this bullet entirely. Worth knowing for section F: guild.html:68 and guilds.html:74 are already `
`, so the mount attributes .toast needs are not hypothetical โ€” two pages wrote them, and neither page mounts .sanctuary. Copy those two lines. โ€“ `.dialog` and `.toast` are NOT free names repo-wide: lightforge.html declares both (:86 and :93). TEN files declare a toast style rule (course, credit, guild, guilds, highstreet, lightforge, market, outflow, pay-crypto, site); only outflow mounts .sanctuary, and it spells it `#toast` (an id), so nothing collides today. See "WHAT I DID NOT NAME" below, which had this right while this bullet did not. โ€“ focus: across the 33 MOUNTED pages there are ZERO `:focus` rules of any kind โ€” that is the number that matters here, and it is stronger than what the first cut claimed. (Said "31" until the third pass; re-run `grep -c ':focus' $(grep -l 'class="sanctuary' *.html)` and every line still ends in `:0`.) Across all 122 there are plenty, and they are not only on text fields (charselect.html:24, foolee.html:21 /:51/:58, hearthpond.html:31, orrery.html:21/:28, repair.html:32/:51 style focus on buttons, links and tiles). None of those pages mount. This block names those primitives once, using only the frozen tokens, so the next page can stop guessing. โ”€โ”€ WHAT THE SUITE ACTUALLY COVERS HERE (:root YES, THE SHELL LAYER NO) โ”€โ”€โ”€โ”€โ”€ The first two passes said "two test files mention this stylesheet and neither tests anything below this line", and drew from it that a CSS edit cannot redden the suite. The second half of that is right; the first half is not, and the difference matters, because :root IS fenced and the shell layer is not. Re-counted on the third pass โ€” FIVE test files reference this file, and FOUR of them read it off disk (`grep -rn "readFileSync[^)]*sanctuary" test/`): โ€ข test/events.test.js:521 parses the `:root` BLOCK ONLY into DECLARED_TOKENS, asserts `size > 25` and that --bg/--gold/--ink/--serif/--s1/--radius/--maxw are all present (:530-534), then checks every var() on events.html and its JS against it. Rename or drop a token from :root and this goes RED. โ€ข test/velvet-roulette.test.js:657 and test/wheel.test.js:882 do the same shape, but scan the WHOLE file for `--x:` rather than just :root, and assert `size > 20`. Same effect for a deletion; note that a custom property declared anywhere below would silently widen their allow-list. โ€ข test/topbar-shell.test.js:144 reads this file to recover the specificity of ONE rule โ€” `.sanctuary .row` on line 50 โ€” and falls back to a hardcoded (0,2,0) when it cannot find it (:152), so it degrades quietly instead of reddening. Its own token allow-list (:180-185) is a HAND TRANSCRIPTION of :root, not a read, and it audits topbar.js and index.html against it, never this file โ€” so :root and that list can drift apart silently. โ€ข test/video-rank.test.js:429 asserts the LINK TAG `` against watch.html, as does events.test.js:556 and velvet-roulette.test.js:664. A link tag is not a stylesheet. (A plain `grep -rl 'sanctuary\.css' test/` MISSES this file, because it writes the path regex-escaped as `sanctuary\.css`. That is how the "two files" count was reached and why it was wrong.) NET: the TOKEN CONTRACT has real teeth โ€” break :root and four suites go red. EVERYTHING BELOW THIS LINE HAS NONE. Delete this whole block, inop it, invert a rule, or point a selector at nothing, and the suite stays green, because not one test reads a selector or a declaration from the shell layer. A green suite is evidence the tokens survived. It is NOT evidence a change here is safe โ€” a browser is. PROVENANCE, because "measured" was used loosely here and that matters: claims about COMPUTED VALUES (what a page renders, which rule wins in the box model) came from getComputedStyle in headless Chromium against the real pages during the first two passes. Claims about COUNTS, LINE NUMBERS and SPECIFICITY in the second and third audit passes did not โ€” they came from greps over the 122 files on disk and from a selector-weight calculation done by hand, and the contrast ratios from the WCAG relative-luminance formula, not from a rendering engine. Both kinds are re-runnable; neither is "I read it and it looked right", which is what produced every wrong statement corrected below. ONE TRAP IF YOU REACH FOR THAT HELPER: topbar-shell.test.js's `specificity()` counts `:where` and `:is` as ordinary classes, does not zero what is inside a `:where()`, and counts every type selector inside an `:is()` list. Point it at the .sheet heading reset below and it returns (0,5,6); the real weight is (0,1,1). It is correct for the plain selectors it was written for. Do not point it at this block. โ”€โ”€ THE SPECIFICITY POLICY (read this before adding a rule here) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ Every page links this file in and opens its own