/* TT-ARC-091 SQUARE CORNERS: panels and cards 2px, controls 0. These media surfaces live in my
   override layer, so the contract's square rule does not name them — left alone they would have
   stayed 8px-rounded while every surface around them went square. Same law, applied where I own it. */
/* front-page additions over the contract css — empty states, file table, small vote unit */
.tt-empty{border:1px dashed var(--edge2);padding:26px 20px;font:600 12px/1.7 "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--dim);margin:8px 0}
.leadlink,.sitem,.story a,.vth,.wire .hl{color:inherit;text-decoration:none}
.live.off{opacity:.6}
.ex.lay{opacity:.65}
.ftable{width:100%;border-collapse:collapse;margin-top:14px}
.ftable td{padding:10px 10px;border-bottom:1px solid var(--edge);font-size:14px}
.ftable .fd{font:11px "JetBrains Mono",monospace;color:var(--faint);white-space:nowrap}
.ftable .fv{font:800 11px "JetBrains Mono",monospace;letter-spacing:.08em;text-align:right}
.ftable a{color:var(--fg);text-decoration:none}
.ffilter{display:flex;gap:10px;margin-top:6px}
.ffilter select{background:var(--bg2);color:var(--fg);border:1px solid var(--edge);padding:8px 10px;font:600 11px "JetBrains Mono",monospace}
/* FOOTER LINKS (TT-ARC-061 Pile 1 #2): the band OPPOSES the room (background:var(--fg)); text + links
   must be var(--bg) or they vanish into it. Links carry an underline so they read as links, not prose. */
/* W14 (Michael's walk) · THE FOOTER GOES DARK. It carried the inverted-band treatment — ink-on-light,
   a 2px rule — which was the last surface still opposing the room. It sits on the ground like
   everything else now, with one hairline above it. */
.fl{border-top:var(--line);margin-top:60px;padding:22px 0;font:600 var(--t-micro) "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--faint)}
.fl a{color:var(--dim);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.fl a:hover{text-decoration-thickness:2px}
/* COVER-FILL (Michael, TT-ARC-006): the oil must fill its frame edge-to-edge — no grey, no bars.
   height:100% inside an aspect-ratio box resolved to auto and letterboxed; absolute-fill cannot. */
.leadL .img,.story .img{overflow:hidden}
.lead .img img,.story .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rules{max-width:720px}
.rules p{font-size:16.5px;line-height:1.75}
.rules h2{font-family:Barlow,sans-serif;font-weight:700;font-size:20px;margin:28px 0 10px}
.rules li{font-size:16px;line-height:1.7;margin:0 0 10px}

.ftable-wrap{overflow-x:auto}
/* MOBILE LAWFULNESS — the contract is a desktop mock; the 390 law is the site's own.
   (The catnav already scrolls inside itself in the contract. The page-level overflow was the 33px
   wordmark: at full TOKEN/TRAVELER width it runs 409px. It only "fit" before because the .tk class
   collision had shrunk TOKEN to 11px — fixing the logo exposed this, one fix uncovering the next.) */
@media (max-width:640px){
  .logo .wm{font-size:20px}
  .mast .in{gap:10px}
  .mast .slug{letter-spacing:.14em}
  .util .in{flex-wrap:wrap;gap:6px}
}
/* the card's inner anchor joins the contract's column stack — my markup wraps chip/h3/d/m in one link,
   so the link itself carries the flex column; the chip lands first, above the headline, contract spacing */
.story .b > a{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.sitem{display:block}
.sitem .tag{margin-bottom:8px}

/* ── MOTION FOUNDATION (uplift §4/§7) — transform/opacity only ───────────────────────── */
.io{opacity:0;transform:translateY(16px);transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1)}
.io.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.io{opacity:1;transform:none;transition:none}}
/* hover lifts — every card rises; the expanse arrow slides */
@media (hover:hover){
  /* §9 · no lifts, no shadows, no scale — state changes only, one easing. The hover now speaks
     through the BORDER, which is the sealed button standard's rule applied to every surface. */
  .story,.ex,.sitem,.vth{transition:border-color .15s var(--ease)}
  .story:hover,.ex:hover,.sitem:hover,.vth:hover{border-color:rgba(255,255,255,.55)}
  .ex .arrow{transition:transform .15s ease}
  .ex:hover .arrow{transform:translateX(4px)}
  .story:hover h3,.sitem:hover h3{text-decoration:underline;text-underline-offset:3px}
}
/* the live dot */
.live.pulse::before{content:'● ';animation:ttpulse 1.4s ease-in-out infinite}
@keyframes ttpulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion: reduce){.live.pulse::before{animation:none}}

/* ── THE HERO CAROUSEL (uplift §1) ───────────────────────────────────────────────────── */
.heroCar{position:relative}
.heroCar .slides{display:grid}
.heroCar .slide{grid-area:1/1;opacity:0;transition:opacity .5s cubic-bezier(.4,0,.2,1);pointer-events:none}
.heroCar .slide.on{opacity:1;pointer-events:auto}
/* JS-off: only the server-marked first slide shows — the page is whole without motion */
.heroCar .slide h1,.heroCar .slide .deck{opacity:1}
.heroCar .slide .arrive{opacity:0;transform:translateY(12px);transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1)}
.heroCar .slide.on .arrive{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.heroCar .slide{transition:none}.heroCar .slide .arrive{transition:none;opacity:1;transform:none}}


/* AN EMPTY TAB IS DIMMED BUT LIVE (punch #9 / row-15 audit). `pointer-events:none` made these silently
   inert: they looked pressable, swallowed the click, and answered nothing — which is what the audit read
   as "greyed-but-clickable and does nothing". TT-ARC-063 ruled empty types "disabled, never absent"
   because ABSENT was the defect it was fixing; inert turns out to be the same defect wearing grey. The
   feed already writes an honest empty line when a filter matches nothing, so the tab only needed to be
   allowed to reach it. Dim still says "there is nothing here" BEFORE the click; the line says it after. */
.vcat.off{opacity:.35}
.vth .tag{display:inline-flex;width:auto;align-self:flex-start}
.vth a{display:flex;flex-direction:column;gap:8px;color:inherit;text-decoration:none}
.vmain video{width:100%;aspect-ratio:16/9;border:1px solid var(--edge);border-radius:var(--radius);display:block;background:#000}

/* ── THE LIVE RAIL (uplift §2) ─────────────────────────────────────────────────────────── */
/* THE RAIL MAX IS STRUCTURAL NOW (TT-ARC-031 — Michael's second catch on the same defect).
   The first lock was a JS courtesy: rail.js set maxHeight, so reduced-motion and JS-off users —
   whose rail.js exits early — got an UNCLIPPED rail. My gate only drove the default context, so it
   was green while Michael's viewport was red: the instrument tested one world and he lives in
   another. The rail is absolutely pinned to the lead's box in CSS — no script, no context, no
   difference. Scrollable when not drifting so a clipped list is never an unreachable list. */
.lead{position:relative}
/* THE RAIL IS ABSOLUTE INSIDE ITS OWN GRID AREA — inset:0, never a hardcoded width. It used to be
   width:calc(100%/2.65), a fraction chosen when .lead was 1.65fr 1fr; TT-ARC-098 made the grid 2fr 1fr and
   the hardcoded width did not follow, so the rail rendered 480px wide in a 419px column and painted 45px
   ACROSS THE HERO. Putting it in normal flow fixed the width and broke something worse: the marquee sizes
   itself from rail.clientHeight, so in flow the rail grew as clones were appended, the loop's exit
   condition chased its own output, and the PAGE NEVER FINISHED LOADING. Absolute inside the grid area
   gives the exact column width AND a height bounded by the row, which is what the original was really for. */
.lead{position:relative}
.leadR{scrollbar-width:thin;scrollbar-color:rgba(128,128,136,.45) transparent;
  /* the EXPLICIT placement is load-bearing: an out-of-flow grid child resolves inset against the grid
     CONTAINER's padding box, not its cell, unless it is explicitly placed. Without these two lines the
     rail spanned the whole lead (measured 1272px in a 419px column). With them, inset:0 IS the cell. */
  /* TT-ARC-103 made .lead a PADDED panel, so inset:0 resolves to its PADDING box and the rail card
     overhung the panel by exactly --pad on the right and bottom (measured 21px and 22px). Top and
     left were already correct — the grid area starts where the column does — so only those two
     edges are inset. Width then equals the column exactly, with no ratio hardcoded anywhere. */
  grid-column:2;grid-row:1;position:absolute;inset:0 var(--pad) var(--pad) 0;overflow-y:auto;overflow-x:hidden}
.leadR.drifting{overflow:hidden}
.lead .heroCar{grid-column:1}
.railWrap{will-change:transform}
.leadR .sitem{transition:transform .15s ease}
.leadR .sitem:hover{transform:translateY(-2px)}
.leadR .sitem:hover h3{text-decoration:underline;text-underline-offset:3px}

.hdot{position:relative;border:none;cursor:pointer;padding:0;overflow:hidden}
.hdot .fill{position:absolute;inset:0;background:var(--fg);transform:scaleX(0);transform-origin:left;opacity:.9}
.hdot:not(.on) .fill{transform:scaleX(0)!important}
.heroCar .slides{overflow:hidden}
.slide .meta{margin-bottom:14px}
/* grid items STRETCH to the tallest sibling by default — so measuring a slide measured the stretch,
   not the content, and the box locked in the ghost height (53px at 1600w). Items start-aligned:
   a slide is exactly as tall as its content, and sizeToActive measures truth. */
.heroCar .slides{align-items:start}

/* ── THE CUSTOM PLAYER (uplift §10) — monochrome, ours ───────────────────────────────── */
.ttp{position:relative;background:#000;border:1px solid var(--edge);border-radius:var(--radius);overflow:hidden}
.ttp video{width:100%;aspect-ratio:16/9;display:block;background:#000}
.ttp-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:linear-gradient(transparent,rgba(0,0,0,.72));opacity:0;transition:opacity .2s}
.ttp:hover .ttp-bar,.ttp:focus-within .ttp-bar,.ttp:not(.playing) .ttp-bar{opacity:1}
.ttp-play,.ttp-mute,.ttp-cc,.ttp-full{background:none;border:none;color:#EDEDED;font:700 14px "JetBrains Mono",monospace;cursor:pointer;min-width:30px;min-height:30px}
.ttp-track{flex:1;height:4px;background:rgba(237,237,237,.25);border-radius:var(--radius);cursor:pointer;overflow:hidden}
.ttp-fill{height:100%;background:#EDEDED;transform:scaleX(0);transform-origin:left}
.ttp-time{font:600 11px "JetBrains Mono",monospace;color:#EDEDED}
.emb-card{position:relative;aspect-ratio:16/9;background:#000 center/cover no-repeat;border:1px solid var(--edge);border-radius:var(--radius);cursor:pointer;overflow:hidden}
.emb-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* R8 · a flat 25% wash sat over every video poster to make one centred glyph legible — the anti-pattern
   again, and a bottom-weighted scrim cannot help a CENTRED control. Pattern A's principle instead: the
   ink carries its own ground (the ring), the picture is left alone. */
.emb-card .eplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 20px "JetBrains Mono",monospace;color:#EDEDED;background:transparent}
.emb-card .eplay::before{content:'▶';border:2px solid #EDEDED;border-radius:50%;width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55)}
/* hover-to-preview: a slow Ken-Burns on the poster — transform only */
.vth .vimg,.emb-card{transition:transform .2s}
@media (hover:hover){
  .vth:hover .vimg{transform:scale(1.05)}
  .vth .vimg{transition:transform 4s cubic-bezier(.2,.6,.3,1)}
}

/* ── THE OVERLAY READER (TT-ARC-026 FINAL geometry) ──────────────────────────────────── */
.ovl{position:fixed;inset:0;z-index:80}
.ovl-back{position:absolute;inset:0;background:rgba(0,0,0,.44)}
.ovl-panel{position:absolute;left:50%;transform:translateX(-50%);width:min(1320px,calc(100vw - 48px));
  bottom:16px;background:var(--bg);border:1px solid var(--edge);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column;
  opacity:0;translate:0 14px}
.ovl-panel.in{opacity:1;translate:0 0;transition:opacity .24s cubic-bezier(.4,0,.2,1),translate .24s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion: reduce){.ovl-panel.in{transition:none}}
/* TT-ARC-129 §2: the hero is the ONLY full-bleed element, so the scroll container carries NO padding
   of its own — the 8px top padding was holding the hero 9px off the panel edge. Interior insets are
   applied per text zone instead, which v1.2 requires anyway. scrollbar-gutter keeps the right edge
   predictable where the platform draws a classic scrollbar. */
.ovl-body{overflow-y:auto;padding:0;scrollbar-gutter:stable}
.ovl-body .article{max-width:760px;margin:0 auto;padding:26px 20px 60px}
.ovl-body .img img{max-height:420px;object-fit:cover;width:100%}
.ovl-x{position:absolute;top:12px;right:14px;z-index:2;background:var(--bg);border:1px solid var(--edge);
  border-radius:50%;width:38px;height:38px;font:700 15px Barlow;color:var(--fg);cursor:pointer}
.ovl-walk{position:absolute;top:50%;transform:translateY(-50%);z-index:2;background:var(--bg);
  border:1px solid var(--edge);border-radius:50%;width:46px;height:46px;font:700 18px Barlow;color:var(--fg);cursor:pointer}
.ovl-walk.prev{left:14px}.ovl-walk.next{right:14px}
.ovl-lock{overflow:hidden}
@media (max-width:900px){.ovl-panel{width:calc(100vw - 16px)}}
@media (max-width:700px){.ovl-panel{width:100vw;left:0;transform:none;top:0!important;bottom:0;border-radius:0}}

/* THE HOUSE SCROLLBAR (TT-ARC-032) — every internal scroller wears it: thin floating thumb, no track,
   no layout column. Applied by one class; the system scrollbar never carves a column again. */
.hscroll{scrollbar-width:thin;scrollbar-color:rgba(128,128,136,.45) transparent}
.hscroll::-webkit-scrollbar{width:8px;height:8px}
.hscroll::-webkit-scrollbar-track{background:transparent}
.hscroll::-webkit-scrollbar-thumb{background:rgba(128,128,136,.42);border-radius:4px;border:2px solid transparent;background-clip:padding-box}
.hscroll::-webkit-scrollbar-thumb:hover{background:rgba(128,128,136,.7);background-clip:padding-box}

/* ROUNDED-CORNER SCHEMA on the hero (TT-ARC-033): the radius+clip live on the STABLE wrapper so the
   cross-fade never flashes a square corner */
.slide .img{border-radius:var(--radius);overflow:hidden;position:relative}
.widen{background:none;border:1px solid var(--fg);color:var(--fg);padding:8px 14px;font:700 11px "JetBrains Mono",monospace;cursor:pointer;margin-left:6px}
/* FULL-BLEED MEDIA LAW (TT-ARC-035): popup body media spans the panel's full width */
.ovl-body .bimg img,.ovl-body .vid video,.ovl-body .vid iframe,.ovl-body .emb-card,.ovl-body .gcell img{border-radius:0;border-left:none;border-right:none}
.ovl-body .bimg,.ovl-body .vid,.ovl-body .bgallery{margin-left:calc(50% - 50vw + 12px);margin-right:calc(50% - 50vw + 12px)}
@media (min-width:1400px){.ovl-body .bimg,.ovl-body .vid,.ovl-body .bgallery{margin-left:calc((760px - min(1320px,100vw - 48px))/2 + 20px);margin-right:calc((760px - min(1320px,100vw - 48px))/2 + 20px)}}
/* hidden must WIN over the contract's .door display — ten doors rendered as full-width banners
   because display:flex beat the hidden attribute (Michael: "what I do not wanna see") */
.door[hidden]{display:none!important}
[hidden]{display:none!important}
.vstrip{overflow:hidden;display:flex}
.vstrip .vtrack{display:flex;gap:12px;flex:none}
.vitem{cursor:pointer}
@media (prefers-reduced-motion: reduce){.vstrip{overflow-x:auto}}
.vth .vimg{position:relative}
.vth .vdur{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.78);color:#EDEDED;font:700 10px "JetBrains Mono",monospace;padding:2px 5px;border-radius:3px}

/* ============ TT-ARC-061 Pile 1 #4 — micro-defects ============ */
/* Inner scrollers keep their frame (Pile 3 rejected killing it) but stop the abrupt wheel chain/trap. */
.expfeed .grid, .vsin, .leadR, .ovl-body { overscroll-behavior: contain; }
/* Rail deck: CSS owns the ellipsis now — no more mid-word cut ("OUT OF TH"). */
.sitem .m { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* Contrast floor (§4c): small meta + ad copy never sit on --faint (below AA at these sizes). */
.story .m, .adnative .m, .ad, .leadL .meta, .leadL .img .cred, .feedstate { color: var(--dim); }
/* Disabled filter chips read disabled (true-inverse now handles dark-room chip legibility itself). */
.vbtn.off, .vcat:disabled { cursor: not-allowed; opacity: .4; }
.vcat.off { cursor: pointer; opacity: .4; }   /* dim, but it answers */

/* ================= TT-ARC-091: the contract now OWNS the surface system =================
   My Pile-2 polish block used to define --surface-*/--shadow-*/--glow-ink and style .story/.fcard/.leadR
   here. TT-ARC-091 built all of that INTO the contract — panels, the ground->panel->card ladder, square
   corners, hover, and a dark-room shadow that finally reads (rim-light + deeper cast, replacing shadows
   mixed from black ON black, which rendered as nothing).
   front.css loads AFTER the contract, so keeping my copies would have SILENTLY OVERRIDDEN that fix with the
   very bug it corrected. Deleted rather than reconciled: one owner per truth. What stays below is only what
   the contract does not provide — sticky-chrome glass, the entrance/hover motion, focus, and the spotlight. */
:root{ --ring: var(--s1); }   /* §5.7: focus rings are the system's voice */                       /* the contract has no focus token of its own */

/* the cinematic pairing the contract does not carry: slow image under a fast card */
.story .img{ overflow: hidden; }
.story .img img{ transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.story:hover .img img{ transform: scale(1.04); }

/* Grow-in headline underline instead of the browser default (audit §5.2). */
.story h3{ background: linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;
           transition: background-size .25s; width: fit-content; }
.story a:hover h3{ text-decoration: none; background-size: 100% 1px; }

/* Ambient lighting — dark room only, on GROUND zones (065: the ground glows, the cards cast). */
html[data-theme="dark"] .lead, html[data-theme="dark"] .screening{ position: relative; }
/* T8 · THE KILLED LIST: the per-section light clusters retire — the nebula is the ONE light and a
   second glow under two sections is exactly the "decorative light cluster" the ruling names. */

/* 🔴 THE LAST OPPOSING BAND, and it hid from every sweep I ran. This painted the stuck nav with
   `color-mix(in srgb, var(--fg) 82%, transparent)` — a near-WHITE frosted bar with saturate(1.2) — and
   it survived the monochrome purge, the gray-ramp collapse and the band removal because ALL THREE
   searched for hex and rgba(). Modern colour syntax (color-mix / color(srgb …) / oklch) is invisible to
   a hex grep, and a saturate() filter is a hue instruction with no colour in it at all. Found by
   MEASURING the scrolled header rather than reading the file: the band came back light in the proof.
   T5 gives the header ONE materialized state and it lives on .mast; the nav carries no band of its own. */
.catnav.is-stuck{ background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: none; }

/* Focus + motion-safety, sitewide (audit §5.10). */
:focus-visible{ outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }

/* ---- Vote / reveal signature (audit §2 + §5.3): the site's quietest control, made the event ---- */
@keyframes ttwipe{ from{ clip-path: inset(0 100% 0 0); } to{ clip-path: inset(0 0 0 0); } }
/* Crowd-split bar (§5.3): 1px blue/red fraction — renders ONLY with real vote data (never a fabricated %). */

/* ---- Micro-interactions (audit §2/§3/§5) — component-level, never per-instance (TT-ARC-064) ---- */
/* Now-playing in the screening room: a --real left bar + the tag reads PLAYING (theater.js sets .now). */
.vth{ position: relative; transition: transform .2s cubic-bezier(.2,.8,.2,1), background-color .2s; }
.vth:hover{ transform: translateY(-2px); }
.vth.now{ background: var(--bg2); }
.vth.now::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--real); border-radius:var(--radius); }
.vth.now .vm::after{ content:" · ▶ PLAYING"; color: var(--real); font-weight:700; }
/* Rail: a newsroom "current line" marker instead of a background fill (§2). */
.leadR .sitem{ position: relative; }
.leadR .sitem::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px; background:var(--fg);
  transform: scaleY(0); transform-origin: top; transition: transform .15s ease; }
.leadR .sitem:hover::before{ transform: scaleY(1); }
/* THE WIRE: the timestamp gutter becomes a visible timeline; hovering an hour lights its rows (§2). */
.wire{ position: relative; }
.witem{ position: relative; transition: background-color .2s; }
.witem .tm{ position: relative; }
.witem .tm::before{ content:""; position:absolute; left:50%; top:-10px; bottom:-10px; width:1px;
  background: var(--edge); transform: translateX(-50%); }
.witem.hr-on{ background: var(--bg2); }
.wire .live.pulse::before{ animation: ttbreathe 2s ease-in-out infinite; }
@keyframes ttbreathe{ 50%{ opacity:.3; } }
/* T1 · THE NEBULA (TR-ARC-327 · §4): ONE continuous monochrome ground for the entire site — four
   radial ellipses of white light on flat black, FIXED to the viewport so the light never moves and
   all content scrolls over it. Implemented as a fixed LAYER, never body background-attachment,
   because mobile Safari does not honour the latter.
   It inherits the element the scroll-spotlight used (.spot ships in the chrome on every page), so
   the ground arrives site-wide without a template touching it — the old spotlight's one virtue was
   that it was already everywhere. Values are lifted verbatim from the proof artifact.
   NOT motion: the layer is static, so it stands under prefers-reduced-motion. What retired there was
   the spotlight's scroll transition, which was the only thing moving. */
.spot{ display:block; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 90% 60% at 50% 42%, rgba(255,255,255,.075), transparent 68%),
    radial-gradient(ellipse 55% 38% at 42% 36%, rgba(255,255,255,.10), transparent 70%),
    radial-gradient(ellipse 60% 42% at 60% 52%, rgba(255,255,255,.08), transparent 72%),
    radial-gradient(ellipse 30% 20% at 52% 40%, rgba(255,255,255,.055), transparent 75%); }

/* UNIVERSAL POPUP LAW (TT-ARC-062 #4): every popup carries the door to its circuit page.
   Lifted verbatim from circuit-demo.html — the scrim header is dark in BOTH rooms, so this
   button is white-outline on the scrim and inverts on hover, independent of theme. */
.ovl-goto{display:inline-block;margin-left:10px;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;
letter-spacing:.1em;padding:5px 11px;border:1.5px solid rgba(255,255,255,.7);border-radius:3px;color:#EDEDED;vertical-align:middle}
.ovl-goto:hover{background:#fff;color:#0C0C0E}
/* FROM THE DESK cards are whole-card links (the popup is the norm) — the anchor carries the card's column. */
.fcard > a{ display:flex; flex-direction:column; flex:1; color:inherit; text-decoration:none; }

/* ================= RESPONSIVE RESCUE (TT-ARC-061 Pile 1 #3, audit §0.3) =================
   Two audited breakpoints. NOTE: the contract's own
     @media(max-width:1000px){.expfeed .grid{grid-template-columns:repeat(2,1fr);height:auto}}
   is written INSIDE an unclosed .expfeed .grid declaration block, so the parser drops it — verified: the
   rule never appears in document.styleSheets and the expanse stayed 4-up down to 390px (76px cards).
   Reported to Arc for the contract; these rules carry the intent until the lift is fixed. */
@media (max-width: 1020px) {
  /* THE RAIL stops floating over the hero: it was position:absolute in my layer, so it painted
     transparently across the lead image, headline and vote row at every width below ~1000. */
  .leadR { position: static; width: auto; max-height: 520px; margin-top: 20px; }
  .leadR.drifting { overflow-y: auto; }        /* the marquee is a desktop affordance; here it just scrolls */
  .lead { display: block; }
  .leadL { border-right: 0; padding-right: 0; }
}
@media (max-width: 1000px) {
  /* the fixed two-row frame is a DESKTOP composition — below it the grid grows into the page */
  .expfeed .grid { grid-template-columns: repeat(2, 1fr); height: auto; overflow: visible; padding-right: 0; }
  .expfeed .story, .expfeed .adnative { height: auto; }
  .expfeed .story .img { height: 180px; }
}
@media (max-width: 640px) {
  .expfeed .grid { grid-template-columns: 1fr; }
  .fdstrip .fcard { flex: 0 0 min(86vw, 420px); }     /* feature cards fit the phone, still scroll */
  .vbtns { grid-template-columns: repeat(2, 1fr); }   /* the ONE component reflows; it is never restyled */
  .sechead { flex-direction: column; align-items: flex-start; gap: 4px; }  /* kicker stopped overlapping the title */
  .leadR { max-height: 420px; }
}

/* ============ TT-ARC-106 §2 — THE SYSTEM CARRIED TO EVERY PAGE TYPE ============
   Measured before writing this: home and the circuit rooms ran the full ground->panel->card ladder, while
   THE FILE, /rules/, the article pages and /lab/ had NO panel and NO card at all — their content sat
   straight on the ground, one whole level shallower than the rest of the site. Same defect the hero had in
   TT-ARC-103, just on the page types the home contract never covered.
   Tokens only — --panel, --cardface, --pad, --shadow-panel, --shadow-1, 2px corners. Nothing invented. */

/* THE FILE — the archive is a records table, so the table is the panel and its rows are its content. */
.ftable-wrap{background:transparent;border:none;
  border-radius:var(--radius);padding:var(--pad)}
.ffilter{background:transparent;border:none;border-bottom:0;
  border-radius:var(--radius) 2px 0 0;padding:var(--pad) var(--pad) 12px;margin-bottom:0}
.ffilter + .ftable-wrap{border-radius:0 0 2px 2px;border-top:0;margin-top:0}

/* /rules/ — a trust document. It reads as one page, so it takes the CARD face on the ground. */
.rules{background:transparent;border:none;
  border-radius:var(--radius);padding:var(--pad) calc(var(--pad) * 1.4) calc(var(--pad) * 1.6)}

/* ARTICLE + LAB — the reading column is the card. A long read is a printed page: one bright surface on the
   ground, which is also what makes the scrim header read as sitting ON something. */
/* The reading surface is a PANEL, not a card. I built it as a card first — 'a long read is a printed page'
   — and the topology gate caught what that costs: the card face is #FFFFFF and so is the light ground, so
   the rung measured ZERO and the related cards inside it were sitting on something indistinguishable from
   bare ground. PANEL-STANDARD is explicit that cards sit on panels, ~12 luma apart. The article page is one
   section: a panel, with the prose as its body and the §7 related items as cards on it. */
main.article{background:transparent;border:none;
  border-radius:var(--radius);padding:0 0 calc(var(--pad) * 1.6)}
main.article > *:not(.ovl-heroB){padding-left:var(--pad);padding-right:var(--pad)}
main.article .ovl-heroB{border-radius:var(--radius) 2px 0 0}
@media (max-width:640px){ main.article > *:not(.ovl-heroB){padding-left:14px;padding-right:14px} }

/* ============ PANEL-STANDARD.md v1 — THE ROLE CLASSES ============
   Surface styling attaches to ROLES, not to page-specific names. The name-based system failed OPEN:
   every page type invents containers the home contract never had (.vcats.cnav, .circuitfeed), and they
   silently missed the system — filter rows on bare ground, card grids with no panel under them. A
   role-based system fails CLOSED, because a new container has to be given a role to be laid out at all.
   Page classes keep BEHAVIOUR; the surface comes from the role. */
.panel{background:transparent;border:none;
  border-radius:var(--radius);padding:var(--pad)}
/* the stack: head -> ctrl* -> body, drawn as ONE panel. Only the ends carry a rounded/edged boundary. */
.panel-head{background:transparent;border:none;border-bottom:0;
  border-radius:var(--radius) 2px 0 0;padding:var(--pad) var(--pad) 14px;margin:0}
.panel-ctrl{background:var(--panel);border-left:1px solid var(--edge);border-right:1px solid var(--edge);
  padding:0 var(--pad) 12px;margin:0}
.panel-body{background:transparent;border:none;border-top:0;
  border-radius:0 0 2px 2px;padding:0 var(--pad) var(--pad);margin:0}
/* rule 3 — no panel chrome inside panel chrome: a nested row never draws its own fill or edge */
.panel .panel-ctrl,.panel-body .panel-ctrl,.panel .panel-head{background:none;border:0;box-shadow:none;padding-left:0;padding-right:0}
/* rule 4 — the wrapper takes the panel, the scroller stays bare */
.panel-body > .scroller,.panel-body [data-feed]{padding:0}
.card{background:var(--fill);border:var(--line);border-radius:var(--radius)}

/* ============ TT-ARC-116 — browser-style tabs + the tighter title panel ============
   Component lifted from tabs-demo.html. Applied to the PANEL-STANDARD role classes rather than the demo's
   .phead/.pctrl names, so the site keeps ONE surface vocabulary instead of two that mean the same thing. */
/* margin-bottom 0 is load-bearing: the strip also carries .vcats, whose `margin:0 0 14px` held the tab
   14px clear of the panel — so the active tab could never reach the border it is supposed to overlap. */
/* THE ELEMENT RAIL (TR-BUILD §4, Michael MS-0300) — one drawer, every page, every element type. The
   control is a mono ">_ RECORD" pill at a card's foot (a ">_" square on an indicator tile); the drawer is
   the article rail's own markup in a fixed panel under the masthead. Ink only; motion is transform. */
.story{position:relative}
.elrail{position:absolute;right:12px;bottom:11px;z-index:2;font:800 var(--t-micro) "JetBrains Mono",monospace;letter-spacing:.14em;
  padding:5px 8px;border:1px solid var(--edge2);border-radius:3px;background:var(--control);color:var(--dim);cursor:pointer}
.elrail:hover,.elrail:focus-visible{color:var(--fg);border-color:var(--fg);outline:none}
.icard{position:relative}
/* Michael MS-0309: the tile's control sat on the category chip's last letter (top-right) — it takes the
   OPPOSITE corner, top-left, where the tile's grid leaves the ground clear above the number */
.elrail-tile{top:10px;left:10px;right:auto;bottom:auto;padding:3px 6px}
.exhibit{position:relative}
.elrail-ex{top:10px;right:10px;bottom:auto;padding:3px 6px}
.ttar-drawer{position:fixed;top:0;right:0;width:min(440px,100vw);bottom:0;z-index:70;background:var(--panel);
  border-left:1px solid var(--edge);box-shadow:0 0 40px rgba(0,0,0,.35);overflow-y:auto;
  transform:translateX(100%);opacity:0;transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .22s}
.ttar-drawer[data-open]{transform:none;opacity:1}
.ttar-drawer-x{position:sticky;top:8px;float:right;margin:8px;width:32px;height:32px;border:1px solid var(--edge);border-radius:3px;
  background:var(--control);color:var(--fg);font-size:18px;line-height:1;cursor:pointer;z-index:2}
.ttar-drawer .ttar{padding-top:0}
@media (prefers-reduced-motion: reduce){.ttar-drawer{transition:none}}

/* THE POPUP LAW (TR-RESTART §4, R5 — site-wide). Every popup runs the FULL HEIGHT of the viewport but
   only the CONTENT-WRAP WIDTH (the wrap token, never a new number), over a backdrop that keeps the
   origin page visible in the gutters: dimmed to the page's own ground and blurred, so a dark page
   sits behind a dark scrim and a light page behind a light one. Declared last so it governs. */
.ovl-panel{width:min(calc(1120px * var(--scale,1)), 100vw);top:0!important;bottom:0;border-radius:0;translate:0 0;
  border-top:0;border-bottom:0}
.ovl.in .ovl-panel,.ovl-panel{max-height:100vh}
.ovl-back{position:fixed;inset:0;background:var(--bg);opacity:.72;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@media (max-width:900px){.ovl-panel{width:100vw;left:0;transform:none}}

/* R8 THE ORIGIN MARKER — house, wire, fake at card distance, on the meta line. Weight and glyph, never
   hue: HOUSE carries the cursor glyph in the foreground ink, WIRE is the plain meta voice, FAKE is
   boxed and bold so it reads before the headline does. */
.orig{font:800 var(--t-micro) "JetBrains Mono",monospace;letter-spacing:.12em}
.orig-house{color:var(--fg)}
.orig-wire{color:var(--faint)}
.orig-fake{color:var(--fg);border:1px solid var(--fg);padding:1px 5px;border-radius:2px}

/* THE STATUS PAGE (TR-RESTART request one) — the brief by phase, read from STATUS.json. Mono labels,
   one bar, one table per phase; state is a chip in weight, never hue. */
.status .stbar{height:6px;background:var(--fill);border:var(--line);border-radius:3px;overflow:hidden;margin:14px 0 0;max-width:640px}
.status .stbar span{display:block;height:100%;background:var(--fg)}
.stphase{margin:34px 0 0;padding:22px 24px;border:var(--line);border-radius:3px;background:var(--panel)}
.sthead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.sthead h2{font:800 22px/1.1 'Barlow Condensed',Barlow,sans-serif;font-style:italic;text-transform:uppercase;margin:0;color:var(--fg)}
.stid{font-weight:800;letter-spacing:.14em;color:var(--dim)}
.stgoal{font:400 14.5px/1.55 Barlow,sans-serif;color:var(--dim);margin:0 0 14px;max-width:80ch}
.stchip{font:800 9px "JetBrains Mono",monospace;letter-spacing:.14em;padding:3px 7px;border:1px solid var(--edge);border-radius:3px;color:var(--dim);white-space:nowrap}
.stchip.st-working{border-color:var(--fg);color:var(--fg)}
.stchip.st-shipped{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.stchip.st-verified{background:var(--fg);color:var(--bg);border-color:var(--fg);text-decoration:underline}
.sttab td,.sttab th{vertical-align:top}
.sttab tr.st-shipped td,.sttab tr.st-verified td{color:var(--dim)}
.status .dim{color:var(--faint)}
.streview{margin-top:14px;border-left:3px solid var(--fg);padding:6px 0 6px 12px}
.streview ul{margin:6px 0 0;padding-left:18px;font:400 14px/1.5 Barlow,sans-serif}
.status .mono{font:600 10.5px "JetBrains Mono",monospace;letter-spacing:.08em}

/* TR-BUILD §5.6: nine tabs overflowed a 1561px track and pushed INSTRUMENTS past the edge — the strip
   wraps; a tab is never off-screen. */
.tabstrip{display:flex;flex-wrap:wrap;gap:3px;align-items:flex-end;padding:0 var(--pad);margin:56px 0 0}
.tabstrip .vcat{padding:8px 18px 7px;margin-top:5px;position:relative;bottom:-1px;cursor:pointer;
  background:var(--control);border:1px solid var(--edge2);border-bottom:0;color:var(--dim);
  font:600 11px/1 Barlow,sans-serif;letter-spacing:.05em;text-transform:uppercase;border-radius:0}
/* the active tab takes the PANEL fill and overlaps the panel's top border by 1px, so tab and panel fuse
   into one surface — that overlap IS the Chrome effect; without it they read as two stacked objects. */
.tabstrip .vcat.on{background:var(--panel);color:var(--fg);margin-top:0;padding:11px 18px 8px;
  border-color:var(--edge);z-index:2}
/* the browser-tab variant of the same rule — and the one that actually governed, which is why the
   first two edits changed nothing a click could feel. An empty tab is DIM and LIVE. */
.tabstrip .vcat:disabled{opacity:.4;pointer-events:none}
/* TR-BUILD §5.5: an EMPTY tab is legible (≥AA on the panel) and says its count — it will flip state
   repeatedly as instruments land, and a tab that reads as disabled reads as broken. */
.tabstrip .vcat.off{opacity:.72}
.tabstrip .vcat.off::after{content:' · 0';letter-spacing:0}
/* the strip supplies the 56px, so the head it fuses with must not add another */
.tabstrip + .panel-head{margin-top:0;border-radius:0}
/* title TOP-JUSTIFIED, count on the same row, right and top-aligned */
/* The !important that used to live here is GONE (TT-ARC-163): Arc stripped all nine from the contract
   and source order carries the same result, so the escalation war ends on both sides at once. Verified
   by re-measuring, not assumed — dropping an !important is exactly the change that looks free and is not. */
.sechead.panel-head{padding:14px var(--pad) 20px;display:flex;justify-content:space-between;align-items:flex-start}
.panel-head .k{padding-top:6px}
/* THE STACK CONNECTS (108/116 §4): no seam between the controls and the grid, and the grid carries full
   padding so card tops never crowd the panel edge. */
.panel-body{padding:var(--pad)}
.panel-ctrl + .panel-body{border-top:0}

/* ============ TT-ARC-118/119 — the reader's interior ============ */
.ovl-walk{display:none}          /* zone 9 deleted (119); the rule stays so the CSS records the removal */
/* 118 §1: every text zone insets --pad from BOTH pane edges. Michael's markup showed body copy and the
   receipts table touching the reader's edges — the hero is the ONLY full-bleed element in the reader. */
.ovl-body > *:not(.ovl-heroB){padding-left:var(--pad);padding-right:var(--pad)}
.ovl-body .ovl-heroB{border-radius:0}
/* 118 §3: reader heroes take a uniform 35% overlay, with the bottom scrim kept beneath for the credit.
   Reader-specific — the reader sets its whole head ON the image, so it needs more than the card scrim. */
/* R8 · THE FLAT 35% WASH ON THE READER HERO IS DELETED. 118 §3 added it as a "uniform" overlay on top
   of the gradient that was already there — two scrims stacked, the flat one covering the whole picture.
   That is the named anti-pattern in its purest form. The gradient below carries the ink alone now. */
.ovl-body .ovl-heroB > *{position:relative;z-index:1}
.ovl-panel{border-radius:var(--radius)}     /* 118 §4: square corners, reaffirmed */

/* ============ TT-ARC-129 §1 — the two-pane reader ============ */
.ovl-panes{display:block;height:100%}
.ovl-panel.two .ovl-panes{display:grid;grid-template-columns:2fr 1fr;gap:0;height:100%}
.ovl-panel.two .ovl-body{border-right:1px solid var(--edge)}
/* the rail scrolls INDEPENDENTLY of the content — the whole point of the split: read the desk's take
   while the piece stays where you left it. */
.ovl-rail{display:none;overflow-y:auto;background:var(--panel);padding:0}
.ovl-panel.two .ovl-rail{display:block}
/* ════════════════════════════════════════════════════════════════════════════════════════════════
   🔴 ITEM 42 · THE RAIL — the seven-section dossier surface (rail-internal-layout-spec / TR-ARC-393)
   The branding band, the ">/ ANALYSIS & REVIEW" head, the IN THE QUEUE state and the checks list are
   gone with the markup that fed them. What replaces them is ONE FLAT GRAMMAR: no card inside a card
   anywhere in the rail interior, every divider a hairline, and every value token-side so the whole
   surface survives both rooms with no section-specific override.

   THREE RECONCILIATIONS, stated rather than silently resolved:
   · The spec asks for a class chip bordered at FULL --fg. W15/D11 is the later, absolute ruling — one
     1px 10% outline on every painted element — and gate 63 asserts it mechanically on `main *`. So the
     chip keeps full ink for its TEXT, which is what makes it read as ink, and takes the house outline.
     A chip written at full --fg would not have survived its own gate, and a value that loses its gate
     is a value that was never really set.
   · The caret is a GLYPH on a pseudo-element, not the obvious CSS triangle. A border-triangle carries
     a 4px transparent border-top, and gate 63 reads border-top width on every element in main — the
     triangle would have failed the element standard for being a shape, which is the kind of defect
     that is invisible in the file and obvious in a DOM sweep.
   · The hover fill is --fill-hi, the house token, not the spec's literal #181818/#EFEFEF: those
     parenthetical values ARE the token in the dark room, and a literal drifts the day the token moves.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.ttar{padding:0;--rpad:16px;--rhov:var(--fill-hi)}

/* THE RAIL HEAD — the new lockup on the rail's OWN ground. No band and no box: ink is currentColor,
   so the mark flips with the room for free, which is precisely what the painted band could not do and
   why it had to be removed rather than re-coloured. */
.ttar-head{padding:24px var(--rpad) 18px;border-bottom:var(--line)}
.ttar-head .lock{--fs:calc(23px * var(--scale,1));color:var(--fg)}

/* SHARED PRIMITIVES — accordion header, section interior, link button, class chip, timestamps */
.rsec{border-bottom:var(--line)}
/* 450 §4 · ROWS FIRST, TYPE SECOND. 40px rows of 10.5px caps were both hard to read and small
   click targets; the rail has abundant empty vertical space, so height costs nothing. One notch
   across the board — the tight mono-caps ledger identity is the point and is NOT inflated to
   body copy. */
.rsec-h{display:flex;align-items:center;gap:8px;width:100%;height:46px;padding:0 var(--rpad);
  background:none;border:0;cursor:pointer;text-align:left;color:var(--faint);
  font:600 12.5px "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase}
.rsec-t,.rsec-n{font:inherit;letter-spacing:inherit}
.rsec-n{color:var(--faint)}
.rsec-v{margin-left:auto;display:inline-block;transition:transform .12s;line-height:1}
.rsec-v::after{content:"\203A";font:600 13px "JetBrains Mono",monospace}
.rsec[data-open] .rsec-v{transform:rotate(90deg)}
.rsec[data-open] .rsec-h{color:var(--fg);border-bottom:var(--line)}
.rsec-b{display:none;padding:16px var(--rpad) 20px}
.rsec[data-open] .rsec-b{display:block}
.rbtn{display:inline-block;font:600 9.5px "JetBrains Mono",monospace;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg);text-decoration:none;background:transparent;
  border:var(--line);border-radius:3px;padding:3px 8px}
.rbtn:hover{background:var(--rhov)}
.rbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.rchip{flex:none;font:600 9px "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg);border:var(--line);border-radius:3px;padding:2px 6px}
.rmh{font:600 9px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--faint);margin-bottom:6px}
.rrow{display:flex;align-items:baseline;gap:8px}
.rclaim{font:400 14px/1.45 Barlow,sans-serif;color:var(--fg);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}

/* 1 · ANALYSIS — the takeaway IS the opening element, unlabelled, then prose on the rail ground */
.rtake{margin:0 0 12px;padding-bottom:12px;border-bottom:var(--line);color:var(--fg);
  font:600 16px/1.35 Barlow,sans-serif;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.rprose p{margin:0 0 11px;font:400 14.5px/1.65 Barlow,sans-serif;color:var(--dim)}
.rbul{list-style:none;margin:10px 0 0;padding:0}
.rbul li{position:relative;padding-left:14px;margin-bottom:8px;
  font:400 13.5px/1.65 Barlow,sans-serif;color:var(--dim)}
.rbul li::before{content:"\2013";position:absolute;left:0;color:var(--faint);
  font-family:"JetBrains Mono",monospace}

/* 2 · RECEIPTS — three rows per block, hairline between blocks, never a box */
.rrec{padding:10px 0}
.rrec + .rrec{border-top:var(--line)}
.rmeta{margin-top:7px;font:400 10.5px "JetBrains Mono",monospace;color:var(--faint)}
.rsrc{font:400 11px "JetBrains Mono",monospace;color:var(--fg)}
/* THE ANCHORED STATE IS WEIGHT AND RULE, NEVER HUE — so it needs no light-room override at all. The
   fill marks the arrival and fades; the rule stays for the visit. */
.rhold{border-left:2px solid var(--fg);padding-left:10px}
.rhit{background:var(--rhov);transition:background .4s}

/* 3 · FIGURES — the data voice, scrolling inside its own container so a wide table never widens the rail */
.rtwrap{overflow-x:auto}
.rtab{width:100%;border-collapse:collapse}
.rtab th{text-align:left;white-space:nowrap;padding:0 8px 6px 0;border-bottom:var(--line);
  font:600 var(--t-micro) "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--faint)}
.rtab td{padding:9px 8px 9px 0;border-top:var(--line);vertical-align:top}
.rtab tbody tr:first-child td{border-top:0}
.rfig{font:400 12.5px Barlow,sans-serif;color:var(--fg)}
.rfl{font:600 12.5px "JetBrains Mono",monospace;color:var(--fg)}
.rce{font:400 12.5px "JetBrains Mono",monospace;color:var(--faint)}
.rder{font:400 9.5px "JetBrains Mono",monospace;color:var(--faint)}

/* 4 · PROVENANCE — definition rows, fixed label column */
.rdef{display:flex;gap:10px;margin-bottom:8px}
.rdk{flex:0 0 92px;padding-top:2px;font:600 9px "JetBrains Mono",monospace;letter-spacing:.14em;
  color:var(--faint)}
.rdv{font:400 13.5px/1.55 Barlow,sans-serif;color:var(--fg)}

/* 5 · VERIFICATION and 6 · RECORD share the entry row: a marker column, then the line */
.rgrp{margin-bottom:14px}
.rent{display:flex;gap:8px;margin-bottom:9px;font:400 13.5px/1.55 Barlow,sans-serif;color:var(--fg)}
.rmark{flex:none;font:400 11px "JetBrains Mono",monospace;color:var(--fg)}
.rrow-d .rdate{flex:0 0 84px;padding-top:2px;font:400 9.5px "JetBrains Mono",monospace;
  color:var(--faint)}
.rcorr{font:600 9.5px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--fg)}

/* 7 · THREAD — the whole row is the link */
.rthr{display:block;padding:10px 0;border-top:var(--line);text-decoration:none}
.rsec-b > .rthr:first-child{border-top:0}
.rthr:hover{background:var(--rhov)}
.rrel{margin-top:4px;font:400 9.5px "JetBrains Mono",monospace;color:var(--faint)}

/* the standalone page keeps the rail below the read rather than beside it — one render, two
   shapes. Unchanged by Item 42: this is geometry, not the anatomy that reset. */
main.article .ttar{border-top:var(--line);margin-top:26px}
/* MS-1774 · THE RECORD STRIP. The rail came off the instrument pages: it was 485px of a 1520px
   window, 32%, holding seven drawers of which six were closed. The record is NOT optional, so it
   does not go with it — it becomes a horizontal strip under the figures, closed, opened on demand.
   NOTHING INSIDE A SECTION CHANGES. One function builds all seven and it is untouched; this styles
   the container. Written deliberately rather than inherited: no page has ever shipped an article
   rail in flow, so there was no proven state to fall back into. */
main.article.rail-strip > .ttar{display:block;width:100%;margin-top:32px;border-top:var(--line)}
main.article.rail-strip > .ttar > .ttar-head{display:none}
main.article.rail-strip .rsecs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-left:var(--line)}
main.article.rail-strip .rsec{border-bottom:var(--line);border-right:var(--line);min-width:0}
main.article.rail-strip .rsec-h{height:52px}
/* an open section takes the full width of the strip and drops below the row of heads */
main.article.rail-strip .rsec[data-open]{grid-column:1/-1}
main.article.rail-strip .rsec-b{max-height:none}
@media (max-width:1000px){
  main.article.rail-strip .rsecs{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  main.article.rail-strip .rsecs{grid-template-columns:1fr}
}
@media (max-width:1000px){ .ovl-panel.two .ovl-panes{display:block} .ovl-panel.two .ovl-body{border-right:0} }

/* TT-ARC-130 gave each lead column its own head, and at 390 the FEATURED kicker is 360px of nowrap text in
   a 342px column — 17px of page overflow, caught by the frame gate. The kickers are the one place the
   design uses long mono strings, so below the split point they wrap instead of pushing the page. */
@media (max-width:640px){
  .sechead .k{white-space:normal;line-height:1.5}
  .sechead.lead-head{flex-direction:column;align-items:flex-start;gap:4px}
}

/* The INDICATORS block that was lifted here is GONE — the contract now carries it in its own style,
   which the build inlines. One rule, one source; two copies is the fork this lane keeps warning about. */

/* the integrity stats reuse the INDICATORS card component at 3-up — one component, a different mount
   (TT-ARC-120's law), so the trust surface cannot drift away from the front page's look. */
.indgrid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1020px){.indgrid-3{grid-template-columns:repeat(2,1fr)}}
.rules + .sechead{margin-top:56px}

/* PUNCH #2 (TT-ARC-172) — THE SCROLLBAR, not the padding. The 085 padding fix held; the second offender
   was hiding under it. The wire rail is overflow-y:auto, and on any platform with CLASSIC scrollbars the
   bar takes ~10px INSIDE the right edge — so the pane pads 22/22 in tokens and measures 23 left / 33
   right on screen. Michael's eye caught what the tokens denied.

   ⚠️ MY INSTRUMENT CANNOT SEE THIS. Headless Chromium uses OVERLAY scrollbars: measured width 0, insets
   23/23, perfectly symmetric — a green no Windows browser would reproduce. So the cure is STRUCTURAL
   rather than measured: with no bar there is no platform variance to measure in the first place.
   The rail self-drifts and its content is reachable elsewhere, so the bar earns nothing (Arc/Michael);
   the pane takes tabindex + a label in exchange, because hiding an affordance must not remove the ability. */
.leadR{scrollbar-width:none}
.leadR::-webkit-scrollbar{display:none}
.leadR:focus-visible{outline:2px solid var(--fg);outline-offset:-2px}

/* an analysis spans circuits, so its card wears several chips (TT-ARC-172 §2) — they wrap rather than
   push the card, and the mark keeps its place at the head of the row. */
.story .tag + .tag,.fcard .tag + .tag,.sitem .tag + .tag{margin-left:5px}
.story .b > a > .tag,.fcard .tag{display:inline-flex;margin-bottom:8px}

/* ⚠️ PUNCH #8 SHIPPED A FRAME-BREAKER, and it is a one-token cure. The compact card clips its meta line
   with `white-space:nowrap; overflow:hidden` — which clips the PAINT but not the LAYOUT: a grid item
   defaults to min-width:auto, so the column can never shrink below that full unbroken line. At 390px the
   two-column grid computed 526px + 454px inside a 296px container and took the whole page sideways by
   650px, on every page carrying indicators.
   min-width:0 lets 1fr do what it promises, and only then does the overflow:hidden actually clip.
   ⚠️ The rule lives in the CONTRACT — asked Arc to land it at source so this override can be deleted. */
.icard{min-width:0}

/* the video card's reader control (punch #9) — it sits in the vote row's slot, beside the call, because
   that is where Michael red-boxed it and because the two things a reader does with a video (call it,
   read it) belong on one line. */
.vrow{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.vopen{font:800 9.5px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--fg);text-decoration:none;
  border:1px solid var(--fg);border-radius:var(--radius);padding:7px 12px;white-space:nowrap}
.vopen:hover{background:var(--fg);color:var(--bg)}

/* THE STANDALONE STORY ROUTE IS TWO-PANE TOO (punch #9 / spec v1.1 §D: a shared page opens two-pane).
   The popup had the two-pane reader from TT-DEV-074; the page a SHARE actually lands on did not — it ran
   one column with the rail dumped 1,400px below the body, which is where the audit found it. Same shape,
   same collapse point as the popup (1000px), so the reader gets one experience whichever door they came
   through. The rail spans every row and sticks, because a rail that scrolls away is a rail you cannot
   consult while reading the thing it is about. */
main.article.has-rail{display:grid;grid-template-columns:2fr 1fr;column-gap:0;align-items:start}
main.article.has-rail > *{grid-column:1;min-width:0}
/* the rail sticks BELOW the masthead, whose height is measured into --mast-h by motion.js (Michael
   MS-0286: 96px was typed, the nav was 148px, the rail's head sat behind it) */
main.article.has-rail > .ttar{grid-column:2;grid-row:1/-1;position:sticky;top:calc(var(--mast-h, 148px) + 12px);
  max-height:calc(100vh - var(--mast-h, 148px) - 24px);overflow-y:auto;scrollbar-width:none}
main.article.has-rail > .ttar::-webkit-scrollbar{display:none}
@media (max-width:1000px){
  main.article.has-rail{display:block}
  main.article.has-rail > .ttar{position:static;max-height:none}
}

/* the 404's two mono lines — the links row and the receipts footer */
.e404-links{display:flex;gap:22px;margin-top:26px}
.e404-links a{font:800 10px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--fg);text-decoration:none;
  border-bottom:2px solid var(--fg);padding-bottom:3px}
.e404-links a:hover{opacity:.7}
.e404-foot{font:700 9px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--dim);
  margin-top:30px;padding-top:14px;border-top:1px solid var(--edge)}

/* THE NAV GAP BELONGS TO WHATEVER OPENS THE PAGE (punch #8, Michael: the panel "crowds" the nav).
   The 56px is a law (TT-ARC-112: nav-gap == stack-gap), but it was carried by .tabstrip — so a circuit
   page opening with tabs measured 56 while the analysis page, which now opens with the indicator panel,
   measured 0. The gap was never the tab strip's; it belongs to the first thing under the nav, whatever
   that is. Keyed on position so the next page type to open with something new inherits it. */
main > .sechead:first-child{margin-top:56px}

/* ============ THE CLAIM-STATUS RAMP (TAXONOMY.md amendment, TT-ARC-156 §2) ============
   Five values, drawn as ONE ramp from solid to dotted. The firmness law generalized: what a claim rests
   on is DRAWN, not footnoted, so a reader sees how firm it is before deciding to trust it.
   NEVER HUE. The ramp runs on line style, weight and ink — the same reason the diagram's filed edges are
   solid and its reported ones dashed. A colour ramp would carry a value judgement the taxonomy does not
   make (and would die in one of the four rooms). */
/* THE RULE IS PAINTED, NOT BORDERED. A border gives three dash patterns and rounds fractional widths:
   REPORTED at 1.5px dashed and CLAIMED at 1px dashed BOTH computed to 1px dashed, so two steps of a
   five-step ramp were pixel-identical — a ramp with two indistinguishable rungs teaches a reader that
   the glance is unreliable, which is worse than not drawing it. A repeating gradient gives exact
   control of every dash, and currentColor keeps it monochrome by construction. */
/* §1.3 + §7.7 · THE STATUS STAMP LOSES ITS UNDERLINE. The five-step ramp was drawn as repeating
   gradients under the label — the audit found it as a pattern on the ground, and it is: a dashed
   rule is a texture, and the sealed world has one texture, the nebula. The RAMP ITSELF SURVIVES in
   the only place monochrome allows it — WEIGHT and INK, which is what the claim-status law actually
   ranks. Nothing is invented: the five values keep five distinguishable renderings. */
.cstat{display:inline-block;font:800 9px "JetBrains Mono",monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg);background-image:none}
.cstat + .cstat{margin-left:7px}
/* 🔴 FIVE STATUSES NEED FIVE DISTINGUISHABLE RENDERINGS, and my first cut of this only gave four —
   REPORTED and CLAIMED both landed on (dim, 700/600) close enough that the gate counted 4 signatures
   across 5 rungs. That is the exact defect the ramp's own comment warns about: two rungs that look
   alike teach a reader the glance is unreliable, which is worse than not drawing the ramp at all.
   Monochrome leaves three axes — INK, WEIGHT and TRACKING — and five distinct pairs are drawn from
   them. The gate signatures weight+ink+pattern, so each rung differs in at least one it can see. */
.cstat[data-status="FILED"]{color:var(--fg);font-weight:800;letter-spacing:.14em}
.cstat[data-status="SIGNED"]{color:var(--fg);font-weight:600;letter-spacing:.14em}
.cstat[data-status="REPORTED"]{color:var(--dim);font-weight:700;letter-spacing:.16em}
.cstat[data-status="CLAIMED"]{color:var(--dim);font-weight:500;letter-spacing:.16em}
.cstat[data-status="RUMORED"]{color:var(--faint);font-weight:400;letter-spacing:.2em}

/* 🔴 467 §6 · THE 49px DEAD MIDDLE, measured to its cause. These legend cards are .icard, which
   carries a four-row anatomy (chip / num / lbl / meta) and a 150px floor for the indicator grid. A
   legend entry fills only two of those rows, and the default align-content:stretch then shares the
   leftover height BETWEEN them — so the taller the card, the wider the gap it opened between the chip
   and its definition. Not a margin to shave: start-align the content and the slack falls to the
   bottom of the card where it belongs, while the grid keeps every card the same height. */
.claimlegend .icard{cursor:default;align-content:start;min-height:0;padding-bottom:16px}
.claimlegend .ilbl{min-height:0;margin-top:10px}

/* ============ PUNCH #1 (TT-ARC-158) — THE TITLE SECTION, CONFORMED ============
   Michael marked the INDICATORS head as the gold standard and four others as not matching. Measured
   first, on BOTH surfaces (:8901 and :8902), settled and with motion reduced — because an earlier pass
   taken mid-entrance reported THE WIRE's head at 115px against 76px everywhere else, a false positive
   from my own instrument (the DEV-068 lesson, third time).

   THE HEADS THEMSELVES ARE BYTE-IDENTICAL — every one: 76px tall, panel fill 244, 1px edges, no bottom
   border, the same shadow, 22/22/14 padding, Barlow 600 26px title, 10.5px kicker. There is nothing to
   conform in the head.

   WHAT ACTUALLY DIFFERS IS THE AIR UNDER THE TITLE, and only in one place. Every section gives its
   title 14px (head bottom) + 22px (body top) = 36px before content starts. A control row that is the
   FIRST piece after the head gives 14px + 0 = 14px, because .panel-ctrl/.vbtns open with no top pad —
   correct for a row BETWEEN two pieces of a stack, wrong for the row that opens the body. That is the
   whole delta on SCREENING ROOM, and it is exactly the kind of positional asymmetry TT-ARC-102 named:
   one rule, two structural positions, blind to which it is in.

   So the first piece after a head opens the body's air whichever piece it is. Keyed on adjacency, so it
   holds for every page type in the role system as well as the home contract's own class names. */
/* Plain longhand again — the contract's !important shorthands are gone (TT-ARC-163), so adjacency and
   source order are enough. Re-measured after dropping it rather than trusting the removal. */
.sechead + .vbtns,.sechead + .timechips,.panel-head + .panel-ctrl{padding-top:var(--pad)}

/* The wire's interior margins are EVENED AT SOURCE now (TT-ARC-166): the contract carries
   `.sitem{padding:22px 0}`, so the override that lived here is deleted rather than left to fight the
   next lift. Gate #37 keeps measuring it — the fix moved, the law did not. */

/* §5k.5 THE SOCIAL CARD LEADS WITH THE QUOTE (TR-ARC-296 §2: no hero) — the quote is the imagery.
   It stands where the oil stands, in the panel tone, clamped to six lines; the attribution is the
   record's handle + platform mark in the meta face. The post's own line breaks are kept. */
.story .quote{display:flex;flex-direction:column;gap:8px;padding:16px 16px 14px;background:var(--bg2);border-bottom:1px solid var(--edge)}
.story .quote blockquote{margin:0;font-size:15px;line-height:1.45;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.story .quote .attr{font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.story .quote .pmark{border:1px solid var(--edge2);padding:1px 5px;border-radius:var(--radius)}

/* NOTE ON WHERE THIS LIVES: contract.css is INLINED in <style>, then article.css and front.css are
   linked AFTER it — so an equal-specificity rule written in contract.css LOSES to its twin here every
   time, regardless of what order it appears in that file. E4's block is therefore written in front.css,
   which is also the glass's own home. (Third time tonight that "later file wins" decided an outcome:
   the header clearance, the feed's escape, and this.) */
/* ════════════════════════════════════════════════════════════════════════════════════════════════
   E4 · THE FINISH — imagery flush (§10) · the glass on the element law (T9)
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
/* §10 · THE PICTURE FRAMES DIE. Images are flush to their card's edges and the CARD's 5px clips them;
   an image inside a padded, bordered, separately-rounded box is a frame, and the sealed world has one
   container per thing. The story's full-bleed hero and its caption bar STAY — the audit named them as
   devices, not frames, and they are the one place the image IS the surface. */
.story .img,.fcard .img,.leadL .img,.vth .vimg,.bimg img,.gcell img{
  padding:0;border:none;border-radius:0;background:var(--fill)}
.story .img{aspect-ratio:16/9;border-bottom:var(--line)}
.leadL .img{aspect-ratio:16/8.5}
.story .img img,.fcard .img img,.leadL .img img{width:100%;height:100%;object-fit:cover;display:block}

/* T9 · THE GLASS ON THE ELEMENT LAW: the panes are elements — #111, the hairline, 5px, NO shadow. The
   pane's own reading ramp per §3: Barlow 400/17 at 1.7, measure ~660, ink on the pane. The layout and
   rack slots built for 316–319 are untouched. */
.ovl-panel{background:var(--fill);border:var(--line);border-radius:var(--radius);box-shadow:none;
  width:min(1120px,calc(100vw - 48px))}
.ovl-body,.ovl-rail{background:transparent}
.ovl-panel.two .ovl-body{border-right:var(--line)}
.ovl-body .body p{font-size:17px;line-height:1.7;max-width:660px;color:var(--fg)}
.ovl-rack{border-bottom:var(--line);padding:12px 18px}

/* C6 · NEVER A SECOND LAYER INSIDE THE RACK. .vsplit is the rack panel (#0A0A0A) and .vmain — the
   player — is a card on it, which is the ruled ladder. .vside was ALSO painted as a card, and the
   playlist thumbnails are cards inside it: ground -> rack -> card -> card, one rung more than C6
   permits. The playlist is a COLUMN, not a surface; the thumbs are the cards. */
.vside{background:transparent;border:none;border-radius:0;padding:0}

/* C6 IS A HOME RULING, AND ONE RACK IS THE POINT OF IT. On a CATEGORY page the media browser (.bpanel,
   §5i) is already the one panel; the screening room's .vsplit rack inside it makes two — ground ->
   browser -> rack -> card, which is the "second layer inside" C6 forbids by name. Inside the browser
   the browser IS the rack, so .vsplit goes flat there and its cards sit on the browser's own surface. */
.bpanel .vsplit,.browser .vsplit{background:transparent;border:none;border-radius:0;padding:0}

/* 1.4–1.7 · THE NEBULA INVERTS WITH THE ROOM — same geometry, same alphas, black light instead of
   white. Q1/Q2 (whether an inverted backlight reads as one light, and at what weight) ship as
   transcribed: the alphas are NOT re-tuned here, because tuning them is the question Michael asked
   to answer on the published result. */
html[data-theme="light"] .spot{
  background:
    radial-gradient(ellipse 90% 60% at 50% 42%, rgba(0,0,0,.075), transparent 68%),
    radial-gradient(ellipse 55% 38% at 42% 36%, rgba(0,0,0,.10), transparent 70%),
    radial-gradient(ellipse 60% 42% at 60% 52%, rgba(0,0,0,.08), transparent 72%),
    radial-gradient(ellipse 30% 20% at 52% 40%, rgba(0,0,0,.055), transparent 75%); }
/* 3.1–3.3 · the mark takes the room's ink (the light mark set is the same lockup, inverted) */
html[data-theme="light"] .lock .word,
html[data-theme="light"] .avatar{color:#121212}
html[data-theme="light"] .avatar .cur,
html[data-theme="light"] .desklive i{background:#121212}
/* 4.7 · the active control's text is the room's opposite ink */
html[data-theme="light"] .cat.on,html[data-theme="light"] .vbtn.on,
html[data-theme="light"] .vcat.on,html[data-theme="light"] .vb.on{color:#F5F5F5}

/* W15 LIVES HERE, NOT IN contract.css, AND THAT IS THE POINT OF A TERMINAL RULE. contract.css is
   inlined in <style>; article.css and front.css are linked after it, so an equal-specificity rule in
   contract.css loses every tie — .hdot stayed 4px and .vdur stayed 3px when the sweep was written
   there. A standard that must win has to be written where the cascade ends. (Fourth time tonight that
   "later file wins" decided an outcome: the header clearance, the feed's escape, the glass, and this.) */
/* ════════════════════════════════════════════════════════════════════════════════════════════════
   W15 · THE ELEMENT STANDARD, MADE ABSOLUTE (Michael, 2026-09-07)
   Every element on the background except title text: EXACTLY 5px corners, EXACTLY 1px white at 10%.
   Cards, chips, buttons, tabs, controls, panels — everything. No per-control variance survives, and
   the old 18%-border reading is formally dead. The light room inverts the same law by token.

   Written as ONE terminal rule rather than by hunting the variance: the ladder grew back twice already
   (2px surfaces / 0 controls, then 8px on .exbtn and .vbtn, then 50% on the carousel dots), and a
   standard that has to be re-found in fifteen places is a standard that will drift again. The standing
   gate is the other half — a computed-style sweep, so this can never quietly regrow.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.story,.fcard,.sitem,.vth,.ex,.icard,.card,.tag,.vbtn,.vcat,.exbtn,.doorbtn,.cat,.vb,.roomtog,
.ad,.adnative,.door,.smark,.img,.vimg,.leadL .img,.bpanel,.browser,.expfeed,.vsplit,.ovl-panel,
.heroCar .slide,.leadR.feedsec .sitem,.social-plate,.exhibit,.relrow .story,.cstat,.dots button,.cdot,
/* found BY THE SWEEP, not by reading: the carousel dots (4px and 50%), the feed nav (2px), the video
   player (2px) and the duration chip (3px) were four more rungs of the ladder this rule exists to end */
.hdot,.fdnav,.vmain,.vdur,
/* WRITTEN AT THE SPECIFICITY THEY ARE SET AT, not at the one that reads nicely: .hdot.on (0,2,0) and
   .vth .vdur (0,2,0) each beat a bare class no matter which file it sits in. The sweep names the
   selector that actually wins — that is the difference between a standard and a wish. */
.hdot.on,.vth .vdur{
  border-radius:3px}
/* F2's mono retreat never reached the CTA: contract.css set it to Barlow and front.css:522 set it back
   to mono 800/9.5 with an ink border — later file, same specificity. It takes the standard here. */
.vopen{font:500 11.5px/1 Barlow,sans-serif;letter-spacing:.02em;text-transform:none;
  border:var(--line);background:var(--fill);color:var(--fg);padding:0 11px;height:25px;
  display:inline-flex;align-items:center;border-radius:3px}
.vopen:hover{border-color:var(--hairline-hi);background:var(--fill);color:var(--fg)}
.story,.fcard,.sitem,.vth,.ex,.icard,.card,.tag,.vbtn,.vcat,.exbtn,.doorbtn,.cat,.vb,.roomtog,
.adnative,.door,.bpanel,.browser,.expfeed,.vsplit,.ovl-panel,.heroCar .slide,.leadR.feedsec .sitem,
.social-plate,.exhibit{
  border:var(--line)}
/* the two exemptions the ruling itself names: TITLE TEXT sits bare on the ground (C2), and an image
   inside a card is clipped by the card rather than carrying its own frame (§10). */
.sechead,.sechead *{border:none;border-radius:0;background:transparent}
.story .img,.fcard .img,.leadL .img,.heroCar .slide .img{border:none;border-radius:0}

/* W10 (Michael's walk) · SECHEADS FLUSH-LEFT, TIGHT TO THEIR CONTENT, SITE-WIDE. The head was a
   space-between row — title left, kicker pushed to the far right — and a ~40px gap under it. He ruled
   the stack: both parts left, the kicker under the title, and 14–16px to the content it introduces.
   The 150px of C8's air stays ABOVE the head, where the section break belongs; what tightens is the
   distance between a title and the thing it names. */
.sechead{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:150px 0 15px}
.sechead:first-of-type{margin-top:0}
.sechead .t{text-align:left}
.sechead .k{text-align:left}
/* W12 · THE INDICATORS TITLE DIES ON THE NINE TUNINGS. On a circuit page the indicator IS the page's
   own signal and the title said nothing the card does not; it stays on HOME, where the row is one of
   several sections and needs naming. Hidden by ROLE, not by page-guessing: the tuning's head carries
   .panel-head, Home's does not. */
.sechead.panel-head.indhead{display:none}

/* W4 · THE FEED STRIP. The same moving component as the analysis lane — four across, arrows either
   side, auto-advancing — wearing the feed's own anatomy: a mono MARK where the analysis card carries
   art, the timestamp in the data voice, the headline in the card ramp. */
.feedstrip .fdstrip{display:flex;gap:12px}
.feedstrip .feeditem{flex:0 0 calc((100% - 36px) / 4);background:var(--fill);border:var(--line);
  border-radius:3px;overflow:hidden;display:flex;flex-direction:column}
.feedstrip .feeditem > a{display:flex;flex-direction:column;height:100%}
.feedstrip .fmark{height:96px;display:flex;align-items:center;justify-content:center;
  border-bottom:var(--line);background:var(--bg2)}
.feedstrip .fmark .smark{font:800 22px "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--dim);
  background:transparent;border:none;width:auto;height:auto;display:inline}
.feedstrip .feeditem .b{padding:14px 14px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.feedstrip .feeditem h3{font-family:Barlow,sans-serif;font-weight:600;font-size:15.5px;line-height:1.2;
  text-transform:uppercase;letter-spacing:.01em;margin:0;color:var(--fg)}
.feedstrip .feeditem .m{margin-top:auto;font:600 10px "JetBrains Mono",monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint)}
@media(max-width:1020px){.feedstrip .feeditem{flex:0 0 calc((100% - 12px) / 2)}}
@media(max-width:640px){.feedstrip .feeditem{flex:0 0 100%}}

/* W11 · THE RACK TITLE SITS OUTSIDE THE PANEL, and the tab strip is rebuilt.
   The browser's title was inside its panel — a title naming the thing it was sitting in. C2 already
   put every other title bare on the ground; this is the same ruling reaching the one component that
   still had a head indoors. And the tab strip: ONE fill always (a tab is not a hole when it is not
   selected), zero gaps between tabs, radius at the standard's 5px on the top corners only where the
   strip attaches (F1's carve-out for the browser), and SELECTION SPEAKS IN THE TEXT — bright white
   and bolder — rather than by removing the fill. */
/* the title is MOVED in the builder, not hidden here — this rule stays only as a guard so a head can
   never reappear inside the panel without the sweep noticing it is invisible. */
.browser > .sechead,.bpanel > .sechead{display:none}
.browser .vcats.tabstrip{display:flex;gap:0;padding:0;background:transparent;border:none}
.browser .vcats.tabstrip .vcat{
  border-radius:3px 5px 0 0;border:var(--line);border-bottom:0;margin:0;
  background:var(--fill);color:var(--dim);font-weight:500}
.browser .vcats.tabstrip .vcat + .vcat{border-left:0}
.browser .vcats.tabstrip .vcat.on{background:var(--fill);color:#FFFFFF;font-weight:700;border-color:var(--hairline-hi)}
html[data-theme="light"] .browser .vcats.tabstrip .vcat.on{color:#000000}
/* an empty tab says so instead of looking broken: dimmed, still openable, and the body it opens
   carries the words (the honest-empty-state law this build already keeps) */
.browser .vcats.tabstrip .vcat.off{color:var(--faint);opacity:1}

/* W7/W7b · THE NINE DOORS. Three across, each a card on the element law with its circuit's art, a
   WHITE-CHIP DARK-TEXT label (the one place the ruling asks for an inverted chip — it is the door's
   name plate, not a control) and the featured piece's title. No filters, no dates. */
.ndoors{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ndoor{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:230px;
  background:var(--fill);border:var(--line);border-radius:3px;overflow:hidden;padding:18px;
  transition:border-color .15s var(--ease)}
.ndoor:hover{border-color:var(--hairline-hi)}
/* 🔴 R8 · THE ART IS CLEAN. opacity:.55 was a flat full-card wash wearing opacity's clothes — it dimmed
   the PICTURE, globally, before the scrim was even applied, and it is the larger half of why the nine
   doors read as muddy rectangles. §10: the art is opacity 1 and the scrim does all the work, bottom-
   weighted, so the upper two-thirds of every painting is finally visible. */
.ndoor .dart{position:absolute;inset:0;background-size:cover;background-position:center;opacity:1}
/* 🔴 L1 · THE ART-REGION LAW. This scrim flipped to a WHITE WASH in the light room and erased the
   artwork on all nine doors — the audit's best finding, and the single offender site-wide (swept
   1-of-1). It consumes --art-scrim, which is identical in both rooms BY DEFINITION: a scrim over art
   is not a surface of the room. The light override is deleted rather than corrected, because the whole
   defect was that this rule had a room-specific twin at all. */
/* R8/377 · PATTERN B, THE CATCH'S MEASURED CONSTANT, ADOPTED VERBATIM. The door is the one place on
   the home page where ink sits ON the art, so it is Pattern B and not Pattern A. 0deg reads bottom→top:
   .92 behind the title zone, .15 at the top where the picture lives. Still --art-scrim, so L1 holds —
   a scrim over art is not a surface of the room and does not flip with it. */
.ndoor::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(var(--art-scrim),.92),rgba(var(--art-scrim),.15))}
.ndoor .dlabel,.ndoor .dtitle{position:relative;z-index:1}
/* R8 · THE LABELLED PLACEHOLDER DOOR. No oil assigned and no record to borrow a hero from, so the slot
   says so rather than impersonating a painting: the element law's own fill (which follows the room),
   and a mono stamp in the art region's fixed ink. When W7b lands, the oil replaces both by construction. */
.ndoor .dart.noart{background:var(--fill)}
.ndoor .dnoart{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;
  font:600 9px "JetBrains Mono",monospace;letter-spacing:.16em;color:rgba(237,237,237,.42)}
/* 380 · THE FEATURED SLIDE'S CURATOR SLOT — the same law as the door's, on the bigger surface. The
   desk ruled a LABELLED placeholder rather than a stand-in image ("no robots"), so the pane wears the
   element law's fill and says what it is waiting for. It follows the room because, unlike a scrim over
   art, an empty pane IS a surface of the room. */
.heroCar .slide .img.noart{background:var(--fill);display:flex;align-items:center;justify-content:center}
/* the same labelled slot on the article card's art zone — one law, every surface */
.grid .story > .img.noart{background:var(--fill);display:flex;align-items:center;justify-content:center}
.grid .story > .img.noart .dnoart{position:static;transform:none;
  font:600 10px "JetBrains Mono",monospace;letter-spacing:.16em;color:var(--faint)}
.heroCar .slide .img.noart .dnoart{position:static;transform:none;
  font:600 10px "JetBrains Mono",monospace;letter-spacing:.16em;color:var(--faint)}
.ndoor .dlabel{align-self:flex-start;background:#FFFFFF;color:#0A0A0A;font:700 10px "JetBrains Mono",monospace;
  letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border-radius:3px;margin-bottom:10px}
/* L1 · the light room's override of the white-on-art chip is DELETED — Item 9 rules it white-bg /
   dark-ink in BOTH rooms, and this rule was the violation the audit caught. */
/* L1 · text ON art is fixed in both rooms for the same reason the scrim is: the surface under it is
   the picture, not the room. --fg here made the title black-on-dark-art in light. */
.ndoor .dtitle{font-family:Barlow,sans-serif;font-weight:600;font-size:17px;line-height:1.15;
  text-transform:uppercase;letter-spacing:.01em;color:#EDEDED}
@media(max-width:1020px){.ndoors{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ndoors{grid-template-columns:1fr}}

/* 349 · THE UNIFORM CARD LAW. ALL mixes every species newest-first, THREE-UP, and every species card
   takes ONE height and width — a single footprint token. Species allocate the FIXED interior rather
   than changing the box: an article clamps its dek, a SOCIAL card deepens the quote clamp to fill the
   space its missing image would have taken, a video banks thumb + duration. No vertical species
   sections — those force sideways scroll, which is the defect the ruling names. */
/* 381b · ONE CONSTANT SET PER GRID CONTEXT. This token was a THIRD rack height (340px) living beside
   .expfeed's 455px and §11's own — and being the most specific of the three, it is the one that was
   actually winning, which is why the card measured 442 while two other rules said otherwise. 349's
   uniform-card law is unchanged in intent; it now reads the ruled constant instead of its own literal. */
:root{--rackcard-h:var(--acard-h)}
.browser .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.browser .grid .story{min-height:var(--rackcard-h);height:var(--rackcard-h);overflow:hidden}
.browser .grid .story .b{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}
/* the clamps end at whole lines: each is a line-clamp, never a pixel crop.
   381b RE-POINT: 3 lines was 349's allocation inside a 340px card. §11 rules the dek at TWO and this
   selector is MORE SPECIFIC than §11's, so left alone it would quietly win and the ruled clamp would
   be decoration. Same for the social quote: 8 lines was sized for a card that no longer exists. */
.browser .grid .story .d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.browser .grid .story[data-t="social"] .quote blockquote{-webkit-line-clamp:6}
.browser .grid .story[data-t="social"] .b .d{display:none}
.browser .grid .story .m{margin-top:auto}
@media(max-width:1020px){.browser .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.browser .grid{grid-template-columns:1fr}
  .browser .grid .story{height:auto;min-height:0}}

/* the glass's circuit door: it kept a 6px corner and a WHITE-FILL hover — the last control still
   speaking its state through the fill instead of the border (T3), and the last stray radius (W15). */
.ovl-goto{border-radius:3px;border:var(--line);background:var(--fill);color:var(--fg);
  font:500 11.5px/1 Barlow,sans-serif;letter-spacing:.02em;padding:0 11px;height:25px;
  display:inline-flex;align-items:center}
.ovl-goto:hover{background:var(--fill);color:var(--fg);border-color:var(--hairline-hi)}

/* the receipts block opened with a 2px INK rule — the last heavy divider on the site, from the era
   when weight marked importance. W15 leaves one border weight; the section break is the air (C8) and
   the hairline, not a bar. */
.receipts{border-top:var(--line)}

/* ── 348b · THE RACK HEAD: title left, window right, one balanced row; the readouts beneath ─────── */
.rackhead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin:150px 0 15px}
.rackhead:first-child{margin-top:0}
.rackhead .sechead{margin:0;flex:1;min-width:0}
.timesel{display:inline-flex;align-items:center;gap:8px;flex:none;padding-top:6px}
.timesel .tsl{font:600 10px "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.timesel select{height:25px;padding:0 9px;font:500 11.5px/1 Barlow,sans-serif;letter-spacing:0;
  color:var(--fg);background:var(--fill);border:var(--line);border-radius:3px;cursor:pointer;
  transition:border-color .15s var(--ease)}
.timesel select:hover{border-color:var(--hairline-hi)}
/* the count + SHOWING consolidate into ONE right-aligned mono line under the title row (348b) */
.rackhead .sechead .k{align-self:flex-start}
/* ── 347/347b · THE THREE-UP GRID IS UNIVERSAL: every rack's governed grid, everywhere ──────────
   347c's carve-out, kept explicitly: a SINGLE SHOWCASE ROW (one row, arrows, no vertical scroll at
   stake) is not a grid — the home analysis strip and the feed strip stay four across. */
.browser .grid,.circuitfeed.expfeed,.expfeed .grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:1020px){.browser .grid,.circuitfeed.expfeed,.expfeed .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.browser .grid,.circuitfeed.expfeed,.expfeed .grid{grid-template-columns:1fr}}
/* ── 350 · THE KPI ANATOMY, UNIVERSAL — chip top-right, value left, dek full width, mono meta ──── */
.icard{display:grid;grid-template-columns:1fr auto;grid-template-areas:"chip chip" "num num" "lbl lbl" "meta meta";
  gap:6px;padding:16px 16px 14px;background:var(--fill);border:var(--line);border-radius:3px}
.icard .tag{grid-area:chip;justify-self:end;align-self:start}
.icard .inum{grid-area:num;font-family:Barlow,sans-serif;font-weight:600;font-size:34px;line-height:1;
  letter-spacing:-.03em;color:var(--fg);display:flex;align-items:baseline;gap:9px}
.icard .ilbl{grid-area:lbl;font-size:13px;line-height:1.35;color:var(--dim)}
.icard .im{grid-area:meta;margin-top:6px;font:600 9.5px "JetBrains Mono",monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint)}
/* the uplift: colour ONLY where meaning lives. The value stays ink. */
.icard .idelta{font-size:15px;font-weight:600;letter-spacing:0;line-height:1}
.icard .i-up{color:var(--up)}
.icard .i-down{color:var(--down)}
/* 🔴 467 §3 · THE ONE REAL CHROMATIC ISLAND, and its callsites named it. i-up and i-down have no
   caller at all; i-watch's ONLY caller is the empty-indicator placeholder. So the site's single use
   of #FFA726 was an alarm-orange saying "no data here yet" on a sealed-monochrome card — 343's own
   split is DATA ink bright, UI and chrome monochrome, and an absent value is chrome, not a reading.
   The token block is ruled and stays untouched (--watch is still correct for a real watch band on
   the canvas); it is the PLACEHOLDER that was borrowing the wrong vocabulary. --faint is what the
   rest of the site already says for absent, and it follows the room, so it reads in both. */
.icard .i-watch{color:var(--watch)}
.icard .idelta.placeholder,.icard .idelta.placeholder.i-watch{color:var(--faint)}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   W16 + TR-ARC-358 · THE SCALE, AS ONE FACTOR
   Michael on a 1920-class window: "a very weak, minimalistic view… the scale is not correct." The
   pixel audit measured it and he ruled FLAT +30% against the abyss standard.

   ONE TOKEN, NOT A HUNT. 358 is explicit that this must not be per-value editing, and the reason is
   the reason every standard on this project has needed a mechanism: a ramp edited in forty places
   drifts in forty places. --scale multiplies the ramp; the next calibration is ONE NUMBER.

   MOBILE AND TABLET DO NOT INHERIT IT — the ruling is for desktop @100%, which is where the audit
   measured. Below the wide breakpoint the factor is 1 and every value is exactly what it was.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
:root{--scale:1;--wrap-w:calc(1120px * var(--scale,1))}
/* THE TYPE SCALE (Michael MS-1449). Absolute floor 12px — nothing on the site is set below it, and the
   build refuses anything that is (MS-1450). These are the sizes, not suggestions. */
:root{--t-floor:12px;--t-micro:13px;--t-dek:16px;--t-hed:24px;--t-exhibit:10px}   /* THE TYPE SCALE (MS-1449/MS-1462): furniture floor 12, micro 13, standfirst 16, headline 24, and text drawn inside an exhibit 10. Standards, not gates (MS-1466). */
/* MS-1758 · THE HOUSE FACE REACHES THE WHOLE DOCUMENT. --hcond was declared ONLY on .hub, and the
   circuit pages have no .hub — so var(--hcond) resolved to nothing there, the whole `font:` shorthand
   was thrown away, and SIXTEEN rules fell back to plain Barlow at weight 400. That is why the circuit
   lead rendered 72.8px regular and the story row headlines rendered regular too, unnoticed at 34px.
   Declared here so every page inherits it; .hub keeps its own identical declaration, so the twelve
   pages that have it render exactly as before. */
:root{--hcond:italic 800 1em "Barlow Condensed","Arial Narrow",sans-serif}
@media(min-width:1200px){:root{--scale:1.3}}      /* 358 · the ruled +30% */
@media(min-width:2200px){:root{--scale:1.45}}     /* W16 · one more gentle step on his superwides */

@media(min-width:1200px){
  /* the column and the air ride the factor with the type, or the page grows and the measure does not */
  .wrap,.mast .in,.catnav .in{max-width:var(--wrap-w)}
  .sechead,.rackhead{margin-top:calc(150px * var(--scale))}
  footer{margin-top:calc(150px * var(--scale))}
  /* THE MARK — one existing factor multiplied by the new one, so the kit's proportions still hold */
  :root{--markscale:calc(0.32 * var(--scale))}
  .avatar{font-size:calc(22px * var(--scale))}
  /* THE CONTROL STANDARD — height and face together, or the buttons letterbox */
  .cat,.vbtn,.vcat,.exbtn,.doorbtn,.vb,.roomtog,.vopen,.ovl-goto,.timesel select{
    height:calc(25px * var(--scale));min-height:calc(25px * var(--scale));
    font-size:calc(11.5px * var(--scale));padding-left:calc(11px * var(--scale));padding-right:calc(11px * var(--scale))}
  .roomtog{width:calc(25px * var(--scale));padding:0}
  .tag,.article .tag{font-size:calc(10px * var(--scale));padding:calc(4px * var(--scale)) calc(9px * var(--scale))}
  /* THE TYPE RAMP */
  .sechead .t{font-size:calc(31px * var(--scale))}
  .sechead .k{font-size:calc(10.5px * var(--scale))}
  .story h3,.fcard h3,.sitem h3,.vth .vh,.feedstrip .feeditem h3{font-size:calc(15.5px * var(--scale))}
  .story .d,.fcard .d,.sitem .d{font-size:calc(13px * var(--scale))}
  .body p,.ovl-body .body p{font-size:calc(16px * var(--scale))}
  .deck,.slide .deck,.ovl-heroB .deck{font-size:calc(20px * var(--scale))}
  .slide h1,.leadL h1,.article h1,.ovl-heroB h1{font-size:calc(44px * var(--scale))}
  .ndoor .dtitle{font-size:calc(17px * var(--scale))}
  .ndoor{min-height:calc(230px * var(--scale))}
  /* 350's KPI value is named in the sheet as running larger still */
  .icard .inum{font-size:calc(34px * var(--scale))}
  .icard .ilbl{font-size:calc(13px * var(--scale))}
  .icard .im{font-size:calc(9.5px * var(--scale))}
  /* the rows gain height with their content */
  .browser .grid .story{height:var(--acard-h)}   /* the constant already carries --scale */
  .heroCar .slide .img{min-height:calc(360px * var(--scale))}
  .feedstrip .fmark{height:calc(96px * var(--scale))}
}

/* W17 · the playlist thumb's glass door — the control standard, small, under the title */
.vth .vglass{display:inline-flex;align-items:center;height:calc(25px * var(--scale, 1));margin-top:6px;
  padding:0 9px;font:500 10.5px/1 Barlow,sans-serif;letter-spacing:.02em;color:var(--fg);
  background:var(--fill);border:var(--line);border-radius:3px;transition:border-color .15s var(--ease)}
.vth .vglass:hover{border-color:var(--hairline-hi)}

/* ── D2 · THE STATE TRIGGER + ITS POPOVER (Item 21/25/29) ──────────────────────────────────────
   One control on the title row that READS THE LIVE STATE, opening two labelled groups. The panel
   wears the element law; "Window" as a standing label is gone — the trigger says the state instead. */
.statectl{position:relative;flex:none}
.statetrig{display:inline-flex;align-items:center;gap:8px;height:calc(25px * var(--scale,1));padding:0 11px;
  font:500 11.5px/1 Barlow,sans-serif;letter-spacing:.02em;color:var(--fg);background:var(--fill);
  border:var(--line);border-radius:3px;cursor:pointer;transition:border-color .15s var(--ease);white-space:nowrap}
.statetrig:hover{border-color:var(--hairline-hi)}
.statetrig .caret{color:var(--faint);font-size:10px}
.statepop{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:230px;display:flex;
  flex-direction:column;gap:14px;padding:14px;background:var(--fill);border:var(--line);border-radius:3px}
.popgrp{display:flex;flex-direction:column;gap:7px}
.popgl{font:600 9.5px "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.popopts{display:flex;flex-wrap:wrap;gap:6px}
.popopt{height:calc(25px * var(--scale,1));padding:0 10px;font:500 11.5px/1 Barlow,sans-serif;
  color:var(--fg);background:var(--fill);border:var(--line);border-radius:3px;cursor:pointer;
  display:inline-flex;align-items:center;transition:border-color .15s var(--ease)}
.popopt:hover{border-color:var(--hairline-hi)}
.popopt.on{background:var(--fg);color:#0A0A0A;border-color:var(--fg);font-weight:600}
html[data-theme="light"] .popopt.on{color:#F5F5F5}
/* Item 3 · the room control is bigger and takes the slot the avatar left */
.roomtog{width:calc(32px * var(--scale,1));height:calc(32px * var(--scale,1));font-size:14px}
.mastR{align-items:flex-start;padding-top:2px}

/* ── Item 1 · THE NAV LAW: eleven buttons, ONE universal width, filling the row ─────────────────
   D12 rules the METHOD, not the number: "nav button width = row ÷ 11 with gaps". Written as a grid of
   equal fractions rather than the 94.5px the sheet computed at the old column — the fraction IS the
   method, so it re-derives itself at 1456 today and at whatever Michael's next scale calibration makes
   the column tomorrow. The measured widths before this were ragged 69→105px because the row was a flex
   with space-between: eleven different widths for eleven equal things. */
.catnav .in{display:grid;grid-template-columns:repeat(11,1fr);gap:8px;overflow:visible}
.catnav .cat{width:100%;padding-left:4px;padding-right:4px;white-space:nowrap}
@media(max-width:1020px){.catnav .in{grid-template-columns:repeat(6,1fr)}}
@media(max-width:640px){.catnav .in{grid-template-columns:repeat(3,1fr)}}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   PASS 2 · THE SECTION-HEAD BOX (Items 4, 5, 18 — one element, one pass, as the list directs)

   Item 5's real finding is the RATIO, not the number: 150px above a head, 15px below it to its own
   content — 10:1, so every title was glued to its content and marooned from the section above. The
   ruling is −30% on the air ABOVE; the air below stays, and the imbalance closes from the top.

   Item 18's trap, avoided: three of six heads measured "flush" only because their CONTENT was also
   inset by the same 22px. Deleting the head's padding alone would have fixed three and broken three.
   So ONE content-left rule lands on the heads AND the inset content blocks together — the page ends
   with one left edge, which is the actual defect.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.sechead,.rackhead{margin-top:calc(105px * var(--scale,1));padding-top:calc(15.4px * var(--scale,1))}
.sechead:first-of-type,.rackhead:first-child{margin-top:0;padding-top:0}
/* ONE LEFT EDGE. The head loses its inset — and so does every content block that shared it, or the
   page keeps two edges and only three sections move. */
.sechead,.rackhead{padding-left:0;padding-right:0}
.fdwrap,.feedstrip .fdstrip,.vsplit,.expfeed,.browser,.ndoors,.indgrid,.leadR.feedsec{padding-left:0;padding-right:0}
.vsplit{padding:calc(18px * var(--scale,1))}      /* the rack panel keeps its own interior air (C6) */
footer{margin-top:calc(105px * var(--scale,1))}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   PASS 3 · NAVIGATION & CONTROLS (Items 22/23/24 + 30/31/32)

   🔴 D11 SUPERSEDES W11. I built the tab strip gapless and attached to the panel edge one pass ago,
   on F1's carve-out; Michael's punch pass overrules it — tabs become FREE-STANDING NAV-STYLE BUTTONS,
   and with them go the .browser box border and the active tab's top border. The attachment only ever
   existed to make the panel read as governed; the ruling is that the buttons read as buttons instead.
   Recorded rather than quietly swapped: F1 is dead, D11 is the law.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
/* Item 22/30 · the tab row is a button row */
.browser .vcats.tabstrip{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;background:transparent;border:none;padding:0}
.browser .vcats.tabstrip .vcat{border-radius:3px;border:var(--line);border-bottom:var(--line);margin:0;
  background:var(--fill);color:var(--fg);font-weight:500;width:100%}
.browser .vcats.tabstrip .vcat + .vcat{border-left:var(--line)}
.browser .vcats.tabstrip .vcat.on{background:var(--fg);color:#0A0A0A;border-color:var(--fg);font-weight:600}
html[data-theme="light"] .browser .vcats.tabstrip .vcat.on{color:#F5F5F5}
/* Item 23/32 · the box border goes — the rack sits on the ground like every other section */
.browser{border:none;border-radius:0;background:transparent;padding:0}
.bpanel{border:none;border-radius:0;background:transparent;padding:0}
/* Item 24/31 · the filter row: ONE universal width, filling the span. D12's method again — equal
   fractions, so it re-derives at any column. The .grp wrapper's width constraint is lifted first, or
   the row can only ever fill 663px of itself. */
.vbtns{display:grid;grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;max-width:none}
.vbtns .grp{display:contents;max-width:none}
.vbtns .vbtn{width:100%}
@media(max-width:1020px){.vbtns{grid-template-columns:repeat(4,1fr)}}
@media(max-width:640px){.vbtns{grid-template-columns:repeat(2,1fr)}}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   PASS 4 · MOTION & LAYOUT STABILITY (Items 6, 8, 10, 17)

   Item 6 · THE HERO STOPS MOVING THE PAGE. .slides took the active slide's natural height and three
   slides measured 462/417/504 — 87px of document shift on every rotation, measured live. Locked to the
   tallest. D3 rules the slack: shorter slides TOP-ALIGNED, air below — the headline never moves, which
   is the whole point of fixing the height.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
/* 🔴 R7 (TR-ARC-375/375b) · THE FEATURED FRAME LOCKS.
   Item 6 locked the height to the TALLEST slide, which stopped the SHIFT but kept the card enormous.
   375 rules the other way: measure the SHORTEST slide and cut 25-30% — a constant the content must
   fit, not a fit-to-content. Measured after the hed swap at the 1440 flagship: 492 / 546 / 492 px
   rendered, shortest 492, and 492 x .75 = 369 rendered — the -25% end of the ruled band, which is
   where the composition lands once both clamps hold. Authored at BASE scale (369 / 1.3015 = 284) so
   the frame tracks --scale like every other measure on the site: 369px at 1440, 411px at 2200.
   375b: the split moves to one-third art / two-thirds text — the wider text column is also what
   buys the 2-line hed its second line back at 1200, where 47% forced a third. */
.heroCar,.heroCar .slides{height:calc(284px * var(--scale,1));min-height:calc(284px * var(--scale,1))}
/* 🔴 ITEM 8a · THE ART FILLS THE FRAME. `align-content:start` packed the three rows to the top and
   left the slack at the bottom — and because the art column spans the ROWS rather than the frame, the
   card's panel ran 35px below the bottom edge of the picture. That is Michael's observation exactly,
   and it only became visible once 8b brought the headline down and created slack to leave.
   D3's ruling is preserved, not reversed: the headline still never moves, because it stays in row 1.
   The air simply moves from AFTER the last row into a free middle row, so the frame is fully spanned
   and the dots stay pinned to the bottom. Card height = image height, locked, as 8a makes standard. */
.heroCar .slide{align-content:stretch;grid-template-rows:auto 1fr auto;height:100%;overflow:hidden}
/* the art pane crops to fill the frame and never argues with it */
.heroCar .slide > .leadlink:first-child{align-self:stretch;min-height:0;overflow:hidden}
.heroCar .slide .img,.heroCar .slide .img img{height:100%;min-height:0}

/* R7 §2 · THE 2-LINE HED LAW — the CSS half. The preflight gate is the other half: a hed that needs
   a third line FAILS the build and names the slug, so this clamp never silently eats a word. */
.heroCar .slide h1{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 🔴 ITEM 8b · THE LEAD HEADLINE COMES DOWN TO THE SECTION-TITLE SCALE. It rendered at 57px against
   40px section titles ("FEATURED", "2026 IN A.I.") — Michael read it as oversized and ruled it to the
   section-title size "or slightly bigger". 34 base x --scale lands 44px at 1440 and 49 at 2200, which
   keeps the "slightly bigger" relationship at every width because the section titles scale too.
   Written here rather than at the legacy clamps because two of those are still fighting each other
   over this element; this is the last file in the cascade and it settles the question. */
.heroCar .slide h1{font-size:calc(34px * var(--scale,1))}
/* The hed was never the only variable: the three decks run 90, 150 and 300 characters, which is what
   put 113px between two slides whose heds are both two lines. A fixed frame with a free-running deck
   is still a fit-to-content card wearing a lock. The deck clamps to two lines for the same reason
   the hed clamps to two — this is the featured slot, not the story page. */
.heroCar .slide .deck{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* the frame's own budget: the composition is tightened to LIVE inside the constant rather than the
   constant being grown to fit a loose composition. */
.heroCar .slide > .leadlink:nth-child(3){padding:24px 34px 0}
.heroCar .slide h1{margin-top:10px}
.heroCar .slide .deck{margin-top:10px}
.heroCar .slide .meta{margin-top:10px;padding-bottom:0}
.heroCar .slide .heroDots{padding:0 34px 16px}

/* THE LOCK IS A TWO-COLUMN LAW. Below 941 the card STACKS (art over text) and a 272px frame would
   crush it — R7's defect was the desktop rotator's shift. Stacked, the slides stay equal anyway
   because both clamps still hold, so the shift is fixed at every width without the constant. */
@media(max-width:940px){
  .heroCar,.heroCar .slides{height:auto;min-height:0}
  .heroCar .slide{height:auto}
  .heroCar .slide > .leadlink:nth-child(3){padding:22px 20px 0}
  .heroCar .slide .heroDots{padding:0 20px 22px}
  .heroCar .slide .img,.heroCar .slide .img img{height:auto;min-height:200px}
  .heroCar .slide .img img{height:200px;object-fit:cover}}

/* D4 · the feed's page dots — one per PAGE of four */
.fdots{display:flex;gap:7px;justify-content:center;margin-top:14px}
.fdot{width:22px;height:3px;padding:0;border:0;border-radius:3px;background:rgba(255,255,255,.22);cursor:pointer;
  transition:background .15s var(--ease)}
html[data-theme="light"] .fdot{background:rgba(0,0,0,.22)}
.fdot.on{background:var(--fg)}
.feedstrip .fdstrip{display:flex;gap:12px}

/* Item 17 · THE SCREENING ROOM LOSES ITS PANEL, the playlist caps at 4, the scroller dies.
   C6 gave the room a rack panel; the punch pass takes it back — the player and its thumbs are cards on
   the ground like everything else. D8: the leftover column slack stays as AIR rather than stretching
   the cards to fill it, because stretching four cards to hide 23px is a worse lie than the gap. */
.vsplit{background:transparent;border:none;border-radius:0;padding:0}
.vside{height:auto}
.vsin{position:static;overflow:visible;display:flex;flex-direction:column;gap:10px}
.vth:nth-child(n+5){display:none}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   W18 · THE GLASS SCALES WITH THE SITE (TR-ARC-359 — Michael's catch on the live build)
   The overlay kept its pre-30% width while everything around it grew, so the reader's most important
   surface was the one thing still at the old scale. NO HARDCODED OVERLAY SIZES: the width TRACKS THE
   CONTENT COLUMN (the same 1120 × --scale the page uses) and the interior type rides the root token,
   so the glass can never fall behind a calibration again.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.ovl-panel{width:min(calc(1120px * var(--scale,1)), calc(100vw - 48px))}
.ovl-body .body p{font-size:calc(17px * var(--scale,1));line-height:1.7;max-width:calc(660px * var(--scale,1))}
.ovl-body .article h1,.ovl-body .ovl-heroB h1{font-size:calc(44px * var(--scale,1))}
.ovl-body .deck,.ovl-body .ovl-heroB .deck{font-size:calc(20px * var(--scale,1))}
.ovl-rail{font-size:calc(13px * var(--scale,1))}
.ovl-rack{padding:calc(12px * var(--scale,1)) calc(18px * var(--scale,1))}

/* ── Item 14 · EXPANSE CARDS: the chip pins, the title clamps to two lines ─────────────────────
   Ragged card heights came from titles running to three and four lines; the clamp ends at a whole
   line and the chip holds its place rather than being pushed down by the longest headline. */
.ndoor .dlabel{position:absolute;left:calc(18px * var(--scale,1));top:calc(18px * var(--scale,1));margin:0}
.ndoor{justify-content:flex-end;padding-top:calc(58px * var(--scale,1))}
.ndoor .dtitle{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── Items 7/20/28 · INDICATOR CARDS: one height, a divider before the meta, honest empty slots ── */
.icard{min-height:calc(150px * var(--scale,1))}
.icard .im{border-top:var(--line);padding-top:calc(8px * var(--scale,1))}
/* POLISH · A CLIPPED LINE HAS TO LOOK CLIPPED. The indicator's provenance line is nowrap + overflow
   hidden so it stays on one row, but text-overflow was left at `clip` — so "DATA THROUGH 2026-08-31"
   ended mid-word as "DATA THROU" and read like a complete string rather than a truncated one. On a
   site whose premise is receipts, a provenance line that silently loses its date is the wrong thing
   to leave ambiguous. The ellipsis says there is more; the title attribute carries the whole of it. */
.icard .im{text-overflow:ellipsis}
/* an empty slot says it is empty rather than leaving a hole in the 4x2 grid */
.icard.empty{display:flex;align-items:center;justify-content:center;color:var(--faint);
  font:600 10px "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase}

/* ── Item 9 · THE WHITE-ON-ART CHIP VARIANT (chips stay monochrome; this is the art case) ──────
   A chip sitting ON imagery cannot rely on the room's fill for contrast, so it carries its own —
   white ground, ink text, both rooms. The parked tint recipe stays parked. */
.ndoor .dlabel,.leadL .img .tag,.heroCar .slide .img .tag,.vth .vdur{
  background:#FFFFFF;color:#0A0A0A;border-color:#FFFFFF}
/* R8 · the credit line was legible only because a 16-62% wash was sitting under it. Pattern A takes
   that wash away, so the on-art chip law now has to cover the credit too: its own ground, both rooms.
   This is the L4 lesson again — removing a scrim is a contrast change for everything that sat on it. */
.leadL .img .cred,.heroCar .slide .img .cred{position:absolute;left:10px;bottom:10px;z-index:2;
  background:rgba(0,0,0,.62);color:#EDEDED;padding:3px 7px;border-radius:3px;font-size:9px}
/* the reader hero's credit rides at the TOP-LEFT corner — 97% of the way up, which is above the ramp
   by design (that is where the picture is meant to be visible). It therefore has no scrim under it at
   all and needs its own ground for the same reason the door label has one. */
.ovl-heroB .cred{background:rgba(0,0,0,.62);padding:3px 7px;border-radius:3px;color:rgba(237,237,237,.9)}

/* ── Item 33 · the social card gets ITS OWN FORM, and the image slot can never collapse to text ──
   33.2 · a defined fallback on .img: a missing asset shows the element law's fill, never nothing.
   33.3 · the ad card stops sharing the story card's shape — it declares itself (data-t="ad") and now
   looks like what it is rather than a story with the picture missing. */
.browser .grid .story[data-t="social"] .quote{background:transparent;border-bottom:var(--line);padding:calc(16px * var(--scale,1))}
.browser .grid .story[data-t="social"] .quote blockquote{white-space:normal;-webkit-line-clamp:5}
.story .img,.fcard .img{background:var(--fill);min-height:1px}
.browser .grid .story[data-t="ad"]{background:transparent;border:1px dashed var(--edge2);justify-content:center;text-align:center}
.browser .grid .story[data-t="ad"] .img{display:none}

/* THE TAB ROW MUST WRAP BEFORE IT OVERFLOWS. Pass 3 made it a single-row grid (grid-auto-flow:column)
   so the buttons would be equal and fill the span — correct at desktop, and at 390 it forced eleven
   buttons onto one row and pushed the page 131px sideways. Measured, not guessed: .vcat right edge at
   521 against a 390 viewport. It wraps to fixed columns below the desktop breakpoints. */
@media(max-width:1020px){.browser .vcats.tabstrip{grid-auto-flow:row;grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.browser .vcats.tabstrip{grid-template-columns:repeat(2,1fr)}}

/* ── L2 · THE CENTRE SHADE. Pure inversion gave the light nebula the dark room's alphas, and at those
   values it read as a dirty screen rather than designed shade. Raised to the audit's measured set —
   centre ~#8A8A8A, 3.45:1 against the corners: shade you can see on purpose. This is Q1/Q2 answered
   BY MEASUREMENT, which is what they were parked for. */
html[data-theme="light"] .spot{
  background:
    radial-gradient(ellipse 90% 60% at 50% 42%, rgba(0,0,0,.140), transparent 68%),
    radial-gradient(ellipse 55% 38% at 42% 36%, rgba(0,0,0,.180), transparent 70%),
    radial-gradient(ellipse 60% 42% at 60% 52%, rgba(0,0,0,.150), transparent 72%),
    radial-gradient(ellipse 30% 20% at 52% 40%, rgba(0,0,0,.100), transparent 75%); }

/* ── L3 · HEADER SEPARATION, BOTH ROOMS. The audit found no separation in EITHER theme — the dark
   room's absence was simply hidden by black-on-black, which is why it had never been reported. */
.mast{background:rgb(4,4,4);border-bottom:1px solid #2A2A2A}
html[data-theme="light"] .mast{background:#F0F0F0;border-bottom:1px solid #C8C8C8}

/* ── §3.1 · THE INVISIBLE DOOR TEXT — highest severity in the audit, and invisible in BOTH rooms at
   1.00:1: .door is an INVERTED surface that renders opposite to the theme, while .dt took its colour
   from --fg, which TRACKS the theme. Both flipped together, so the text was always exactly its own
   background. Same bug class as L1. Inverse ink, fixed to the surface rather than the room. */
.door .dt,.doorgrid .rdoor .dk{color:var(--bg)}

/* ⚠️ AND THE TRAP INSIDE THE FIX, worth keeping: my first cut set this to a fixed #EDEDED, which is
   correct in the LIGHT room and invisible again in the dark one — because .door's fill IS --fg, so in
   dark the surface is #EDEDED too. The text on an inverted surface is not "the light ink"; it is THE
   INVERSE OF THAT SURFACE, which is --bg. Caught by asking what .door is actually painted with rather
   than by reading the audit's row and matching its shape. */



/* ════════════════════════════════════════════════════════════════════════════════════════════════
   ITEMS 26/27 · THE ANALYSIS CARDS — LIFTED, NOT REDESIGNED (TR-ARC-365, and 363's instruction was
   explicit: "that page IS your implementation source — lift, don't redesign").

   Below is the card chassis from skinflip/tr-analysis-cards.html, taken verbatim. The desk built it so
   the two punch bugs are impossible BY CONSTRUCTION — chips are a horizontal flex row, titles are
   hard-clamped at two lines in a reserved box — and re-typing it here by hand would be exactly how a
   copy drifts from its original. The CARDS themselves are not copied at all: the builder reads that
   file at build time, so a desk edit flows through without a Dev pass.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.sub{font:600 10px/1 'JetBrains Mono';letter-spacing:.2em;color:var(--faint);text-transform:uppercase;margin:0 0 40px}
.formnote{font:400 14.5px/1.6 Barlow;color:var(--dim);max-width:780px;margin:0 0 24px}
/* ── THE ANALYSIS CARD CHASSIS — THREE-UP (TR-BUILD §5.5: every index route renders through this one
   container; one rule fixes all of them; instrument cards enter the same grid at ~515px) ── */
.duo{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.acard{background:var(--fill);border:var(--line);border-radius:3px;overflow:hidden;
 display:flex;flex-direction:column;transition:background 150ms cubic-bezier(.4,0,.2,1);cursor:pointer}
.acard:hover{background:var(--fill-hi)}
/* the visual canvas: always DARK, ~70% of the card */
.acanvas{background:var(--canvas);border-bottom:var(--line);padding:16px;min-height:340px;
 display:flex;flex-direction:column}
/* 🔴 467 §3 · MY OWN SWEEP'S FALSE POSITIVE, kept as a note so the next sweep does not re-flag it.
   The flip test caught .ctitle not changing between rooms and I read that as an unthemed island. It
   is not: this title sits on .acanvas, and L6 pins --canvas at #0A0A0A in BOTH rooms BY RULING so the
   bright series palette keeps one calibrated ground. Ink over a fixed ground must be fixed too —
   theming it to var(--fg) is the exact bug L1 names, a flipping token on a non-flipping surface, and
   would have turned this title black-on-black in the light room. The literal still goes: contract.css
   already declares --ink-inverse for precisely this ("text ON an inverted surface — never --fg").
   Same pixels, one answer instead of two. */
.ctitle{font:600 13.5px/1.2 Barlow;letter-spacing:.02em;text-transform:uppercase;
  color:var(--ink-inverse);margin:0 0 12px}
.acanvas svg{width:100%;height:auto;flex:1}
/* THE CHIP ROW — horizontal by construction (the Item 26 bug cannot exist here) */
.achips{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;padding:14px 18px 0}
.chip{display:inline-flex;align-items:center;height:24px;padding:0 10px;background:var(--chipfill);
 border:var(--line);border-radius:3px;color:var(--chipink);
 font:600 9.5px/1 'JetBrains Mono';letter-spacing:.12em;text-transform:uppercase}
/* THE TITLE — hard 2-line clamp with a reserved box */
.ahed{font:600 19px/1.25 Barlow;letter-spacing:.005em;text-transform:uppercase;color:var(--ink);
 margin:10px 18px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
 overflow:hidden;min-height:47.5px;max-height:47.5px}
.ameta{font:600 9.5px/1.7 'JetBrains Mono';letter-spacing:.1em;color:var(--faint);text-transform:uppercase;
 margin:10px 18px 14px;border-top:var(--line);padding-top:9px}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:10px}
.legend span{font:400 11.5px Barlow;color:#A1A1A1;display:inline-flex;align-items:center;gap:7px}
.legend i{width:13px;height:3px;border-radius:2px;display:inline-block}
.cnote{font:600 8.5px/1.6 'JetBrains Mono';letter-spacing:.08em;color:#6B6B6B;text-transform:uppercase;margin-top:10px}

/* the rack's grid — three-up (TR-BUILD §5.5), two at tablet, one on a phone. The class is still named
   `duo` for one build; the rename lands with the emitter in homepage.py so the two never disagree. */
.browser .grid.duo,.duo{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1400px){.browser .grid.duo,.duo{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1020px){.browser .grid.duo,.duo{grid-template-columns:1fr}}
.acard[data-placeholder]{position:relative}
.acard[data-placeholder] .ameta::after{content:" · PLACEHOLDER CARD";color:var(--faint)}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   367 · THE CONTROL CARD — Michael's ink on the colliding nav rows.
   Both control rows sit on ONE full-width card wearing the element law, spanning the content column,
   with REAL spacing between them and around them. The collision was that two bare rows with their own
   margins jammed into each other; giving them a shared container is what makes the spacing a property
   of the card rather than a negotiation between two margins.
   D7's kind-ranking rides INSIDE the card: the species row is PRIMARY (solid fills), the filter row
   SECONDARY (ghost) — a category difference, not a font-size one.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.ctlcard{display:flex;flex-direction:column;gap:calc(14px * var(--scale,1));
  padding:calc(16px * var(--scale,1));margin:0 0 calc(18px * var(--scale,1));
  background:var(--fill);border:var(--line);border-radius:3px}
.ctlcard > .vcats,.ctlcard > .vbtns{margin:0;padding:0;background:transparent;border:none}
/* D7 · PRIMARY: the species row reads solid */
.ctlcard .vcat{background:var(--fill-hi);border:var(--line)}
.ctlcard .vcat.on{background:var(--fg);color:#0A0A0A;border-color:var(--fg);font-weight:600}
html[data-theme="light"] .ctlcard .vcat.on{color:#F5F5F5}
/* D7 · SECONDARY: the filter row reads ghost — same component, lower rank */
.ctlcard .vbtn{background:transparent;border:var(--line);color:var(--dim)}
.ctlcard .vbtn:hover{border-color:var(--hairline-hi);color:var(--fg)}
.ctlcard .vbtn.on{background:var(--fg);color:#0A0A0A;border-color:var(--fg);font-weight:600}
html[data-theme="light"] .ctlcard .vbtn.on{color:#F5F5F5}

/* 366 · the placeholder marker — it says what it is, in words and in the DOM */
.tnode.placeholder{border-style:dashed;opacity:.72}
.tnode.placeholder .tlbl{color:var(--dim);font-style:normal}
.tnode.placeholder .trc{color:var(--faint)}
.idelta.placeholder{font-size:calc(9.5px * var(--scale,1));font-weight:600;letter-spacing:.1em}
.idelta.placeholder .iph{font-family:'JetBrains Mono',monospace;font-size:8.5px}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   🔴 R2 · ROOT CAUSE OF THE CLIPPED ANALYSIS CARDS — REPRODUCED IN MY OWN TREE, not a cache seam.
   Michael saw ~130px strips; the desk's probes measured 581px and disagreed. Both were right: the desk
   was measuring ITS OWN source page, and I was shipping the cards into `.expfeed .grid`, which carries
   the legacy EXACT-TWO-ROWS LAW — `height:926px`, a constant-height scroll pane sized for 2 rows of
   455px article cards (TT-ARC-120). Seven rows of analysis cards divided that fixed height: 926 ÷ 7 =
   118.6px per row, every card crushed to a strip with its 340px canvas clipped under overflow:hidden.
   The cards were never wrong. They were placed inside a pane whose height is a law about a different
   card. The container's rule cannot reach a grid it was not written for.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.expfeed .grid.acards,.browser .grid.acards,.grid.acards{
  height:auto;max-height:none;overflow:visible;grid-auto-rows:min-content;padding-right:0}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   R1 · THE SECTION BOUNDARY — the rhythm belongs to the boundary, not to a title.
   The 56px gap used to be margin on .sechead, so removing a title (W12) removed the section break with
   it and left a 1px seam on /research/. This element carries BOTH: the standing rhythm, and the rule at
   its midpoint. --secline is one step above the .10 hairline so it reads as a break without announcing
   itself. Title present or absent, the geometry is identical — that is the regression test.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
:root{--secline:rgba(255,255,255,.14)}
html[data-theme="light"]{--secline:rgba(0,0,0,.14)}
.secbound{height:calc(22px * var(--scale,1));margin:0;position:relative}   /* MS-1200 (Michael): the dead band below the tiles cut to a breathing space (~28px at scale); the rule line keeps its job */
.secbound::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--secline)}
.secbound.lead-gap::after{display:none}   /* the first boundary is air, not a break from nothing */
/* the rhythm now lives in the boundary, so the heads give theirs back */
.sechead,.rackhead{margin-top:0;padding-top:0}
.sechead:first-of-type,.rackhead:first-child{margin-top:0}

/* ── R5 · THE TIMELINE STRIP: dots on one axis, labels alternating above and below ────────────── */
.tstrip{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:calc(190px * var(--scale,1));padding:0 8px}
.taxis{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--secline)}
.tnode{position:relative;flex:1 1 0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;min-height:100%;text-decoration:none}
.tdot{width:9px;height:9px;border-radius:50%;background:var(--fg);position:relative;z-index:1;flex:none}
a.tnode:hover .tdot{box-shadow:0 0 0 4px var(--fill)}
.tlab{position:absolute;left:50%;transform:translateX(-50%);width:calc(150px * var(--scale,1));
  display:flex;flex-direction:column;gap:3px;text-align:center}
.tnode.above .tlab{bottom:calc(50% + 16px)}
.tnode.below .tlab{top:calc(50% + 16px)}
.tmo{font:600 9.5px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--faint)}
.tttl{font:600 calc(11.5px * var(--scale,1))/1.25 Barlow,sans-serif;text-transform:uppercase;
  letter-spacing:.01em;color:var(--fg)}
.trc{font:600 9px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--faint)}
@media(max-width:900px){.tstrip{flex-direction:column;align-items:stretch;min-height:0;gap:0}
  .taxis{display:none}
  .tnode{flex-direction:row;gap:12px;min-height:0;padding:12px 0;border-bottom:1px solid var(--secline)}
  .tlab{position:static;transform:none;width:auto;text-align:left;align-items:flex-start}}


/* ════════════════════════════════════════════════════════════════════════════════════════════════
   🔴 R9a + 381b · §11 · THE ARTICLE CARD STANDARD — CLEAN ART, A ROOM-INVARIANT INK BAND, AND A
   FRAME THAT DOES NOT MOVE. Measured off the catch flagship card and adopted for every article card
   (expanse, the landing analysis section, category racks).

   THE CONSTANTS, PINNED (base scale; every one tracks --scale like the rest of the site):
     RACK CUT      card 390 · art 200 · band 190      (the 3-up grids: category pages, expanse)
     FLAGSHIP CUT  card 475 · art 285 · band 190      (~60/40, for a wide/lead cut when one is placed)
   The band is authored as the REMAINDER rather than a third literal, so the three numbers can never
   contradict each other — a fixed total plus a fixed art zone IS a fixed band, and writing it a third
   time is just an opportunity for the sum to stop adding up.

   381c · THE HOME FEATURED SECTION IS EXEMPT and keeps its own R7 frame. Every selector here is
   scoped under .grid for exactly that reason — the featured card is not in a grid, so it cannot be
   caught by accident. Two article frames exist on this site and only two: the featured frame and
   this one. Both fixed. No elastic card anywhere.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
:root{--acard-h:calc(390px * var(--scale,1));   /* rack cut: total card height  */
      --acard-art:calc(200px * var(--scale,1)); /* rack cut: art-zone height    */
      --acard-h-flag:calc(475px * var(--scale,1));--acard-art-flag:calc(285px * var(--scale,1))}
.grid .story{height:var(--acard-h);overflow:hidden}

/* 🔴 THE PANE STOPS SIZING THE CARD — the R2 root cause, one grid over. The category and expanse grids
   live inside .expfeed, which carries the legacy EXACT-TWO-ROWS LAW as a LITERAL: height:926px, being
   2 x 455px cards + 16px gap. With the pane's height fixed and the row auto, the ROW divided the pane
   and the card took whatever was left — 442px, not the 507px its own constant asks for. That is the
   926px defect again, and it is why R9 could not simply be written as a card height: 381b says content
   adapts to the frame, so the CARD is the constant and the pane is derived from it. The two-rows law
   keeps its intent (a pane exactly two rows tall) and loses its stale literal. */
.expfeed .grid{height:calc(var(--acard-h) * 2 + 16px);grid-auto-rows:var(--acard-h)}
@media(max-width:1000px){.expfeed .grid{height:auto;grid-auto-rows:var(--acard-h)}}
.grid.acards .story{height:auto;overflow:visible}          /* the analysis chassis is its own standard */
.grid .story > .img,.grid .story > .quote{height:var(--acard-art);flex:0 0 auto;min-height:0;aspect-ratio:auto}
/* §10a Pattern A is the whole point: the art is CLEAN. No overlay, no filter, and the band below is
   what carries the ink — which is why neither needs to pay for the other. */
.grid .story > .img{filter:none;opacity:1}
.grid .story > .img img{width:100%;height:100%;object-fit:cover;display:block}

/* 🔴 ITEM 10 · THE BAND FOLLOWS THE ROOM (supersedes R9a's room-invariant reading).
   R9a fixed this surface at #0C0B0A by analogy with the chart canvas. Michael inspected the shipped
   page and ruled it wrong in both directions: light room, light band; dark room, exactly as it
   renders today. The analogy was the error — the canvas is fixed because the data-ink palette is
   calibrated against one ground, and prose has no such dependency. So the band takes a TOKEN and
   every value painted on it takes room tokens with it, which is the ordinary element law and needed
   no exemption in the first place. */
.grid .story > .b{flex:1 1 auto;min-height:0;overflow:hidden;background:var(--band);
  padding:calc(22px * var(--scale,1)) calc(26px * var(--scale,1));display:flex;flex-direction:column}
.grid .story > .b > a{flex:1 1 auto;min-height:0;overflow:hidden;gap:calc(8px * var(--scale,1))}

/* the band ramp, translated to the house faces */
.grid .story > .b .tag{background:transparent;border:var(--line);color:var(--dim);
  font:700 10px "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 8px;border-radius:3px;white-space:nowrap}
.grid .story > .b h3{font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:800;
  font-size:calc(21px * var(--scale,1));line-height:1.14;letter-spacing:.005em;color:var(--fg);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.grid .story > .b .d{font-family:Barlow,sans-serif;font-size:calc(13.5px * var(--scale,1));line-height:1.5;
  color:var(--dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.grid .story > .b .m{margin-top:auto;font:600 10px "JetBrains Mono",monospace;letter-spacing:.10em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* R9b · the chips are ONE ROW, never stacked. The record layer already guarantees at most two; this
   guarantees the ROW even if a third ever arrives, so the frame cannot be broken from the data side. */
.chiprow{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:6px;min-width:0}
.chiprow .tag{flex:0 0 auto}
.grid .story > .b > a{align-items:flex-start}

/* the social card's quote takes the art zone's slot, so a mixed grid still lines up */
.grid .story > .quote{overflow:hidden;background:var(--fill);padding:18px 20px}


/* ════════════════════════════════════════════════════════════════════════════════════════════════
   THE ANALYSIS SECTION IS THREE PER ROW — TR-BUILD §5.5 (Michael, 2026-09-08) supersedes Item 11's
   two-up: every index route renders through this one container, instrument cards enter the same grid
   at ~515px, and this is the rule that actually governs (it out-specifies .duo and .browser .grid —
   measured with every matching rule listed, not read from the file). Two at tablet, one on a phone.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
body[data-circ="research"] .browser .grid,
body[data-circ="research"] .expfeed .grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){
  body[data-circ="research"] .browser .grid,
  body[data-circ="research"] .expfeed .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  body[data-circ="research"] .browser .grid,
  body[data-circ="research"] .expfeed .grid{grid-template-columns:1fr}}


/* 🔴 ITEM 9 · THE 2026 STRIP IS CARDED. Light card in the light room, dark in the dark — the ordinary
   element law, which is all this module was missing. Its interior (axis, dots, labels) already
   consumes room tokens, so carding it is the whole fix rather than a re-theme. */
.tcard{background:var(--card);border:var(--line);border-radius:var(--radius);
  padding:calc(28px * var(--scale,1)) calc(26px * var(--scale,1));overflow:hidden}
.tcard .tstrip{margin:0}


/* ════════════════════════════════════════════════════════════════════════════════════════════════
   🔴 ITEM 33 · THE FORMAT ROW IS NAV, NOT CARD FURNITURE. Michael: style them to mimic the top
   navigation exactly — same size, same font, same interaction states — so the two tiers are
   self-evident: a nav-like row above says WHAT KIND, the carded row below says WHICH SUBJECT.
   The values are lifted from .cat rather than re-typed, so the two rows cannot drift apart.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.formatnav{display:flex;gap:4px;align-items:center;overflow-x:auto;margin:0 0 calc(14px * var(--scale,1))}
.formatnav .vcats{display:flex;gap:4px;margin:0;padding:0;background:transparent;border:none}
/* 🔴 MIMIC THE NAV BY NOT RE-DECLARING IT. My first pass copied .cat's values out of contract.css and
   the buttons came out 16.25px/600 against the nav's 14.95px/500 — because that rule has not been the
   winning one for some time: T3's CONTROL STANDARD (h25 · 11.5px, above) already governs .cat AND
   .vcat together. Re-typing a face is how two rows that are supposed to match drift apart, and it is
   the same lesson as the three rack constants. So this rule declares ONLY what the ruling adds on top
   of the shared standard — a uniform width, centring, and the nav's own active inversion. */
/* `.tabstrip .vcat` (11px/600) outranks T3's control standard (.vcat, 11.5px/500) and the row still
   carries that class — two live consumers read it (circuit.js finds the leading species by it, and a
   gate parses it), so removing the class to win the cascade would break them for a styling reason.
   Matched at specificity instead, with the control standard's OWN numbers, and gate 70 below measures
   the format button against the real nav button so the two can never quietly drift apart again. */
.formatnav .vcats .vcat{
  font-family:Barlow,sans-serif;font-size:calc(11.5px * var(--scale,1));font-weight:500;letter-spacing:normal;
  color:var(--fg);background:var(--fill);border:var(--line);white-space:nowrap;
  min-width:calc(104px * var(--scale,1));text-align:center;justify-content:center;
  transition:border-color .15s var(--ease),background .15s var(--ease)}
.formatnav .vcats .vcat.on{background:var(--fg);color:var(--bg);border-color:var(--fg);font-weight:500}
.formatnav .vcat:hover{border-color:var(--hairline-hi)}
/* the nav's active state exactly: the button inverts, it does not merely brighten */
.formatnav .vcat.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
/* an axis the page holds nothing for stays legible but plainly unavailable — the inventory rule */
.formatnav .vcat.off{opacity:.42;cursor:default}

/* the card wraps ONE row snugly now that the primary tier has left it */
.ctlcard{padding:calc(14px * var(--scale,1)) calc(16px * var(--scale,1))}
.ctlcard > .vcats{display:none}     /* nothing should re-enter the card by another path */
@media(max-width:640px){.formatnav .vcat{min-width:0;flex:1 1 auto}}


/* 🔴 ITEM 16/21 · THE HUNG FRAME. Same box as a live indicator — same fill, hairline, radius and
   height — because the ruling is that the FRAME hangs regardless; a frame that shrank or faded would
   be a gap wearing a card's clothes. What differs is only the ink: no number, so the slot reads as
   reserved rather than as a value of zero. */
.icard.iframe .inum.iempty{font-family:Barlow,sans-serif;font-weight:600;
  font-size:calc(15px * var(--scale,1));line-height:1.2;letter-spacing:.04em;color:var(--faint)}
.icard.iframe .ilbl{color:var(--faint)}
.icard.iframe .im{color:var(--faint);opacity:.8}


/* ════════════════════════════════════════════════════════════════════════════════════════════════
   🔴 ITEMS 32 + 36 · THE FOOTER'S TWO MARKS. Both sit quietly at footer scale: the agent door is a
   mono address, the grid mark carries no label at all. Neither competes with the footer line.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.fl .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.flmarks{display:flex;align-items:center;gap:8px}
.agentbtn{font:600 var(--t-micro) "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);background:var(--fill);border:var(--line);border-radius:var(--radius);
  padding:5px 9px;text-decoration:none;white-space:nowrap;transition:border-color .15s var(--ease),color .15s var(--ease)}
.agentbtn:hover{border-color:var(--hairline-hi);color:var(--fg)}
/* the square: the mark only, at footer scale */
.gridbtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  background:var(--fill);border:var(--line);border-radius:var(--radius);text-decoration:none;
  transition:border-color .15s var(--ease)}
.gridbtn:hover{border-color:var(--hairline-hi)}
/* 2x2 of rounded squares, checkered by OPACITY so the two-tone survives the monochrome law and
   follows the room for free — currentColor is the room's ink in both directions. */
.gm{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;width:14px;height:14px;color:var(--fg)}
.gm i{display:block;background:currentColor;border-radius:1.5px}
.gm i:nth-child(1),.gm i:nth-child(4){opacity:1}
.gm i:nth-child(2),.gm i:nth-child(3){opacity:.45}
@media(max-width:640px){.fl .wrap{justify-content:center}}

/* ITEM 35 · the strip's route to the page it teases */
.tmore{display:inline-block;margin-top:calc(18px * var(--scale,1));
  font:600 10.5px "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);background:var(--fill);border:var(--line);border-radius:var(--radius);
  padding:6px 11px;text-decoration:none;transition:border-color .15s var(--ease),color .15s var(--ease)}
.tmore:hover{border-color:var(--hairline-hi);color:var(--fg)}


/* ════════════════════════════════════════════════════════════════════════════════════════════════
   🔴 ITEM 32 · THE AGENT GATEWAY. Dual register made visible: prose at reading measure, and the
   machine block beside it as a real, selectable, copyable object rather than a decorative code
   sample. Mono aesthetic, both rooms, no JavaScript required to read any of it.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
main.agents{max-width:var(--wrap-w);margin:0 auto}   /* the one content token, never a second number (MS-0561) */
.agtitle{font:800 calc(34px * var(--scale,1))/1.1 "JetBrains Mono",monospace;letter-spacing:.02em;
  color:var(--fg);margin:0 0 10px}
.agdek{font-size:calc(17px * var(--scale,1));line-height:1.6;color:var(--dim);max-width:66ch;margin:0 0 40px}
.agsec{border-top:var(--line);padding:28px 0 34px}
.agsec h2{font-family:Barlow,sans-serif;font-weight:600;font-size:calc(22px * var(--scale,1));
  text-transform:uppercase;letter-spacing:.02em;color:var(--fg);margin:0 0 12px}
.agsec p{font-size:calc(16px * var(--scale,1));line-height:1.7;color:var(--dim);max-width:66ch;margin:0 0 10px}
/* the machine half: shown, not hidden. A <script type="application/json"> does not render by
   default, so it is displayed deliberately — the point of the page is that neither register is
   second-class, and an agent's half being invisible to its human would undercut exactly that. */
.agsec script[type="application/json"]{display:block;white-space:pre;overflow-x:auto;
  margin-top:18px;padding:16px 18px;background:var(--band);border:var(--line);border-radius:var(--radius);
  font:400 12px/1.55 "JetBrains Mono",monospace;color:var(--fg)}


/* ════════════════════════════════════════════════════════════════════════════════════════════════
   🔴 ITEM 40 · THE SCREENING ROOM IS ONE CONSOLE. Michael: the split read as "poorly designed" —
   two cards, five buttons, four wrapping titles at four different heights. One card now: the player
   holds the left two-thirds, the queue is a rail INSIDE the same box, and the single READ & REVIEW
   sits in the footer under the player where it always means the film that is loaded.
   Theme law applies — the console is an ordinary card and follows the room.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.vconsole{background:var(--card);border:var(--line);border-radius:var(--radius);
  padding:calc(16px * var(--scale,1));overflow:hidden}
.vconsole .vsplit{margin-top:0;gap:calc(16px * var(--scale,1))}
/* the rail: ROWS, at ONE height, so the queue is even whatever the titles do */
.vconsole .vsin{gap:0}
.vconsole .vth{display:grid;grid-template-columns:calc(104px * var(--scale,1)) 1fr;
  gap:calc(12px * var(--scale,1));align-items:center;
  height:calc(78px * var(--scale,1));min-height:calc(78px * var(--scale,1));
  padding:calc(8px * var(--scale,1));border:none;border-bottom:var(--line);border-radius:0;
  background:transparent;cursor:pointer;transition:background .15s var(--ease)}
.vconsole .vth:last-child{border-bottom:none}
.vconsole .vth:hover{background:var(--fill)}
/* D11 IS 3px AND THIS WAS THE LADDER'S FOURTH RUNG. W15 lists .vimg at (0,1,0); this rule is
   (0,3,0) and beat it, so the console's thumbnails wore 2px while every other card on the site
   wore 3px — invisible in the file, obvious to the sweep, which is the entire reason gate 63
   exists. The height is the rule's real job and stays; the radius comes off so the element
   standard is not overridden by a rule that never meant to set it. */
.vconsole .vth .vimg{height:calc(60px * var(--scale,1))}
/* two lines, hard — an uneven rail was half the defect */
.vconsole .vth .vh{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-family:Barlow,sans-serif;font-size:calc(13px * var(--scale,1));line-height:1.25;color:var(--fg)}
.vconsole .vth .vm{font:600 9.5px "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the playing row declares itself: the indicator and an edge, never colour */
.vconsole .vth[data-playing]{background:var(--fill)}
.vconsole .vth[data-playing]::before{content:"\25B6";position:absolute;left:calc(-2px * var(--scale,1));
  font-size:9px;color:var(--fg)}
.vconsole .vth[data-playing]{position:relative;box-shadow:inset 2px 0 0 var(--fg)}
/* the queue scrolls past four rows rather than growing the console */
.vconsole .vside{max-height:calc(312px * var(--scale,1))}
@media(max-width:900px){.vconsole .vside{max-height:none}}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   🔴 THE POPUP STANDARD — ITEMS 41 · 43 · 45 · 47 · 48. ONE component, site-wide: a standard, not a
   family. Everything here lands once and applies everywhere a popup opens.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── ITEM 43 · THE SHELL: a true fixed modal on an EVEN FRAME ──────────────────────────────────
   Measured before: 63% viewport width, ~18.7% empty gutter each side, no fixed height, a column four
   viewports tall scrolling WITH the page, a fully transparent backdrop, and the masthead still
   showing above it. The ruling is one uniform gutter on all four sides — top = bottom = left = right
   — so the frame reads as a designed matte and every edge is a close target. The panel fills
   everything inside it and the content scrolls INSIDE the panel; the page behind never moves. */
.ovl-wrap{position:fixed;inset:0;z-index:120}
.ovl-panel{--ovl-gutter:clamp(28px, 3vmin, 56px);
  position:fixed;top:var(--ovl-gutter);right:var(--ovl-gutter);
  bottom:var(--ovl-gutter);left:var(--ovl-gutter);
  width:auto;height:auto;max-height:none;transform:none;left:var(--ovl-gutter);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border-radius:5px;   /* ITEM 48: exactly 5px, and NO border */
  border:none;box-shadow:none}
/* ITEM 43 · the backdrop is an OPAQUE THEME WASH, not a blur — there is nothing left visible to
   blur. It hides every site element completely and swaps with the room. */
.ovl-back{position:fixed;inset:0;background:var(--bg);opacity:.94}
html[data-theme="light"] .ovl-back{background:#F4F4F4;opacity:.96}
.ovl-panes{flex:1 1 auto;min-height:0;display:flex;overflow:hidden}
.ovl-body{flex:1 1 auto;min-width:0;overflow-y:auto;padding:0}

/* ITEM 43 · THE EXIT IS A TRUE SQUARE, sticky, house radius, hairline — never the circular glyph */
.ovl-x{position:absolute;top:14px;right:14px;z-index:5;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:var(--fill);border:var(--line);border-radius:var(--radius);
  color:var(--fg);font:400 18px/1 "JetBrains Mono",monospace;cursor:pointer;
  transition:border-color .15s var(--ease)}
.ovl-x:hover{border-color:var(--hairline-hi)}

/* ITEM 45 · the plate chip — the item's visible registration, and the share control */
.ovl-plate{position:absolute;top:14px;left:14px;z-index:5;
  font:600 10px "JetBrains Mono",monospace;letter-spacing:.14em;
  background:var(--fill);border:var(--line);border-radius:var(--radius);color:var(--dim);
  padding:6px 10px;cursor:pointer;transition:border-color .15s var(--ease),color .15s var(--ease)}
.ovl-plate:hover{border-color:var(--hairline-hi);color:var(--fg)}

/* ── ITEM 41 · THE HEADER TAKES THE ARTICLE-CARD GRAMMAR ────────────────────────────────────────
   It was image + overlaid title + text + mismatched chips: Michael's "one big hot mess". The house
   card anatomy instead, in fixed order — clean image, chip, headline, dek, mono meta — and the
   image carries NO text overlay, which is §10a pattern A on the surface that needed it most. */
.ovl-body .ovl-heroB{min-height:0;display:block;border-radius:0;background:none;padding:0}
.ovl-body .ovl-heroB::after,.ovl-body .ovl-heroB::before{content:none}   /* no scrim: no ink on the art */
.ovl-body .ovl-heroB img{display:block;width:100%;max-height:46vh;object-fit:cover}
.ovl-body .ovl-heroB .inner{position:static;padding:26px var(--pad) 0;color:inherit}
.ovl-body .ovl-heroB h1{position:static;color:var(--fg);text-shadow:none;
  font-family:Barlow,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.005em;
  font-size:calc(34px * var(--scale,1));line-height:1.1;margin:12px 0 0;
  display:block;-webkit-line-clamp:none;overflow:visible}   /* popups never ellipsize */
.ovl-body .ovl-heroB .deck{color:var(--dim);font-size:calc(17px * var(--scale,1));line-height:1.55;margin-top:12px}
.ovl-body .ovl-heroB .meta{font:600 10.5px "JetBrains Mono",monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin-top:14px}
.ovl-body .ovl-heroB .cred{position:static;background:none;padding:0;margin-top:6px;
  font:600 9px "JetBrains Mono",monospace;color:var(--faint)}

/* ── ITEM 48 · THE BODY ─────────────────────────────────────────────────────────────────────────
   Line height came down from ~1.8 to the editorial 1.57 — the reading register, not a page of air.
   And the VERTICAL SECTIONS LAW: every travelling form is a FULL-WIDTH section of the content area.
   Nothing renders two-thirds or half width; no floated media with text wrap. */
/* THE BODY'S CLASS IS `body`, NOT `article`. The story page's <main class="wrap article"> never
   reaches the popup — the frag extractor cuts main's CHILDREN — so every rule written against
   `.ovl-body .article` has been landing on nothing, including the measure and the line-height this
   item is about. Measured, not assumed: the popup's first children are .ovl-heroB then article.body. */
/* 🔴 450 §3 · THE MEASURE IS SIZED BY THE PANE, NOT PINNED AT 760. Item 48 set this measure when
   the popup was a different shape; in the two-pane reader it left the body 760px inside a
   1027px pane — a ribbon with ~270px of dead gutter either side, which is exactly what Michael
   marked. The pane owns the gutter as real padding now and the content fills what is left.
   Changed HERE rather than overridden from below: this rule is (0,2,1) and my first attempt at
   `.ovl-body .body` was (0,2,0), so it lost — collapsing the fight beats adding to it. */
.ovl-body article.body{max-width:none;margin:0;padding:0 0 60px;line-height:1.57}
.ovl-body article.body p{line-height:1.57}
.ovl-body .bimg,.ovl-body .vid,.ovl-body .bgallery,.ovl-body .exhibit,.ovl-body .emb-card{
  margin-left:0;margin-right:0;width:100%;max-width:100%;float:none}
/* portrait media still owns its section but is capped and centred on the room ground */
.ovl-body .vid video,.ovl-body .vid iframe{width:100%;max-height:80vh}
.ovl-body .bimg img{width:100%;height:auto;max-height:80vh;object-fit:contain;background:var(--bg2)}

/* ── ITEM 47 · THE TAIL FURNITURE IS REMOVED ────────────────────────────────────────────────────
   The in-article receipts table, the related cards and the circuit-escape bar all go: receipts live
   on the rail's RECEIPTS section, related items on its THREAD section, and the escape bar dies for
   the same reason Item 45's button did. Once open, the reader's only moves are SHARE and CLOSE. */
.ovl-body .receipts,.ovl-body .relrow,.ovl-body .ovl-goto,.ovl-body .doorbtn,
.ovl-body .related,.ovl-body .related-zone,.ovl-body .door{display:none}


/* ── ITEM 41 · ONE HERO MARKUP, TWO TREATMENTS ─────────────────────────────────────────────────
   THE STORY PAGE keeps variant B — the blended full-bleed hero the audit named a device that stays.
   The art is now a child element, so the page re-creates the overlay explicitly instead of getting
   it for free from a shared background. */
main.article .ovl-heroB{position:relative;display:flex;flex-direction:column;justify-content:flex-end}
main.article .ovl-heroB .hart{position:absolute;inset:0;background-size:cover;background-position:center}
main.article .ovl-heroB .hart::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.92) 62%,rgba(0,0,0,.15) 88%,rgba(0,0,0,.15) 100%)}
main.article .ovl-heroB .inner,main.article .ovl-heroB .cred{position:relative;z-index:1}

/* THE POPUP stacks them: clean art on top carrying NO ink, then the house card order below —
   chip, headline (unclamped, popups do not ellipsize), dek, mono meta. */
.ovl-body .ovl-heroB{display:block;position:static}
.ovl-body .ovl-heroB .hart{position:relative;display:block;height:38vh;min-height:220px;
  background-size:cover;background-position:center}
.ovl-body .ovl-heroB .hart::after{content:none}          /* no scrim: no ink rides the art here */
.ovl-body .ovl-heroB .cred{position:absolute;left:10px;top:auto;bottom:10px;z-index:2;
  background:rgba(0,0,0,.62);color:#EDEDED;padding:3px 7px;border-radius:3px;
  font:600 9px "JetBrains Mono",monospace;letter-spacing:.1em}
.ovl-body .ovl-heroB .inner{position:static;display:block;padding:24px var(--pad) 0;color:inherit}
.ovl-body .ovl-heroB .tag{display:inline-block;text-decoration:none}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   🔴 ITEM 22 · THE RECEIPTS LEDGER — the first cross-site view over the dossier store.
   The table is a DATA surface and wears the data voice: mono for every machine-side value (date,
   plate, source, class) and Barlow only for the claim, which is the one human sentence in the row.
   It scrolls inside its own container so seven columns never widen the page — the same containment
   the rail's FIGURES table uses, for the same reason.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.ledgerhead{font:600 12px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--fg);margin:0 0 6px}
.ledgergap{font:400 11px "JetBrains Mono",monospace;letter-spacing:.04em;color:var(--faint);margin:0 0 22px}
.ledgerq{display:flex;align-items:center;gap:10px;margin:14px 0 6px}
.ledgerq input{font:400 12px "JetBrains Mono",monospace;color:var(--fg);background:var(--fill);
  border:var(--line);border-radius:3px;padding:6px 10px;min-width:260px;max-width:100%}
.ledgercount{font:600 10px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--faint);margin:0 0 10px}
.ledgerwrap{overflow-x:auto}
.ledger{width:100%;border-collapse:collapse}
.ledger th{text-align:left;white-space:nowrap;padding:0 12px 8px 0;border-bottom:var(--line);
  font:600 var(--t-micro) "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--faint)}
.ledger th[data-sort]{cursor:pointer}
.ledger th[aria-sort="ascending"]::after{content:" \2191";color:var(--fg)}
.ledger th[aria-sort="descending"]::after{content:" \2193";color:var(--fg)}
.lcell{padding:11px 12px 11px 0;border-top:var(--line);vertical-align:top}
.ldate,.lsrc{font:400 10px "JetBrains Mono",monospace;color:var(--faint);white-space:nowrap}
.lclaim{min-width:280px}
.lct{display:block;font:400 13px/1.4 Barlow,sans-serif;color:var(--fg)}
/* the plate is VISIBLE ON THE ROW by ruling — it is the citation key, so it is readable, not a title */
.lid{display:block;margin-top:3px;font:400 9px "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--faint)}
.lnone{font:400 10px "JetBrains Mono",monospace;color:var(--faint)}
/* the chip is a LINK to its legend row; the link never repaints the chip, so the ladder still reads
   by text alone and the claims-page law survives the chip becoming clickable */
.cstatl{text-decoration:none}
.receiptsbtn{font:600 10px "JetBrains Mono",monospace;letter-spacing:.16em;color:var(--fg);
  text-decoration:none;white-space:nowrap}
.receiptsbtn:hover{color:var(--fg);text-decoration:underline}
@media (max-width:1000px){ .lclaim{min-width:200px} .ledgerq input{min-width:0} }


/* ════════════════════════════════════════════════════════════════════════════════════════════════
   🔴 ITEM 25 · THE ROOM CONTROL IS A DIAGRAM OF THE ROOM SYSTEM
   The square is divided by the chevron, not decorated with one. Face A takes --fg and face B takes
   --bg; those tokens already trade values between rooms, so the two faces swap sides by themselves
   and there is deliberately NO light-room override here — an override would be a second source of
   truth for a thing the room tokens already say. The seam flips direction on toggle.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.roomtog{padding:0;overflow:hidden;background:transparent;display:inline-flex;align-items:center;
  justify-content:center;line-height:0}
.roomtog svg{display:block;width:100%;height:100%}
.roomtog .tgA{fill:var(--fg)}
.roomtog .tgB{fill:var(--bg)}
/* the flip is a mirror about the square's own centre, so the seam reverses without the box moving */
.roomtog .tgg{transform-origin:50% 50%;transition:transform .18s ease}
.roomtog[data-room="light"] .tgg{transform:scaleX(-1)}
@media (prefers-reduced-motion: reduce){ .roomtog .tgg{transition:none} }

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   🔴 ITEM 39 · THE ANALYSIS SHOWCASE — two slots, eight cards, one pool in the DOM.
   The pool IS the card list; the slots are grid POSITIONS. Without the script the first two children
   stand side by side, so a JS-off reader gets a real pair rather than an empty band. With it, the
   pool goes `live` and only the two lit cards show — written at a specificity that BEATS the no-JS
   rule rather than merely following it in the file, because a tie here would resolve by source order
   and that is not a thing worth depending on.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.apool{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.apool > .aslotcard{display:none}
.apool > .aslotcard:nth-child(-n+2){display:block}
.apool.live > .aslotcard:not(.on){display:none}
.apool.live > .aslotcard.on{display:block}
.apool.live > .aslotcard.sl0{grid-column:1;grid-row:1}
.apool.live > .aslotcard.sl1{grid-column:2;grid-row:1}
/* THE SLOTS HOLD THEIR COLUMN AND THEIR ROW, on every rotating surface. The row is not decoration:
   grid auto-placement walks DOM order, so whenever the card lit in a later slot happened to sit
   EARLIER in the pool, the grid placed it first and then could not go backwards for the earlier slot
   — which dropped that one to row 2 and rendered a "side-by-side" row diagonally. It depended on
   which cards the shuffle drew, so it appeared at random and never twice the same way. Pinning the
   row makes position positional rather than order-dependent, which is the whole reason the slots are
   addressed by class instead of by their place in the markup. */
/* WRITTEN AT THE SPECIFICITY IT HAS TO BEAT, measured on the rendered element rather than guessed:
   `.feedstrip .fdstrip` (0,2,0) sets display:flex, so a bare `.fpool` (0,1,0) lost no matter that it
   sits later in the file — the grid-template-columns applied and did nothing, because the box was
   still a flexbox. That is the whole specificity-not-order trap in one rule: the declaration was
   present, correct, and losing. */
.feedstrip .fdstrip.fpool{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:start}
.fpool > .feeditem{display:none}
.fpool > .feeditem:nth-child(-n+4){display:flex}
.fpool.live > .feeditem:not(.on){display:none}
.fpool.live > .feeditem.on{display:flex}
.fpool.live > .feeditem.sl0{grid-column:1;grid-row:1}
.fpool.live > .feeditem.sl1{grid-column:2;grid-row:1}
.fpool.live > .feeditem.sl2{grid-column:3;grid-row:1}
.fpool.live > .feeditem.sl3{grid-column:4;grid-row:1}
/* the light switch, shared by both surfaces: opacity only, never a transform */
.feeditem{opacity:1;transition:opacity .4s ease}
.feeditem.fading{opacity:0}
@media (prefers-reduced-motion: reduce){ .feeditem{transition:none} }
/* 🔴 THE SAME TRAP, IN MY OWN FIX, ONE RULE LATER. I raised the base rule to
   `.feedstrip .fdstrip.fpool` (0,3,0) so it would beat `.feedstrip .fdstrip`'s display:flex — and then
   wrote this override as a bare `.fpool` (0,1,0), which lost to the very rule I had just strengthened.
   The narrow layout never applied: the feed stayed four across at every width, giving 139px cards at
   640 and 77px at 390, well under the 150px the frame gate calls shredding. Raising one end of a
   cascade fight and leaving the other end where it was is how a fix becomes the next defect. */
@media (max-width:1000px){
  .feedstrip .fdstrip.fpool{grid-template-columns:repeat(2,1fr)}
  .fpool.live > .feeditem.sl2{grid-column:1;grid-row:2}
  .fpool.live > .feeditem.sl3{grid-column:2;grid-row:2}
}

/* ITEM 38b · the identity marks. The logo tier is monochrome and theme-following by CONSTRUCTION:
   the mark is masked to currentColor, so one file serves both rooms and a coloured logo dropped into
   the library still renders mono rather than importing a brand palette onto the page. */
.smark-logo{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}
.smark-logo img{width:auto;height:46%;max-width:72%;object-fit:contain;
  filter:grayscale(1) contrast(0) brightness(0);opacity:.92}
html[data-theme="dark"] .smark-logo img,
:root:not([data-theme="light"]) .smark-logo img{filter:grayscale(1) contrast(0) brightness(3)}
.smark-word{font:600 11px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--fg);
  text-align:center;padding:0 8px;line-height:1.2}
.smark-house{display:inline-flex;align-items:center;justify-content:center;color:var(--faint)}
.smark-house svg{width:20px;height:20px}
/* the light switch: opacity only. No transform, no translation — the card never moves or resizes. */
.aslotcard{opacity:1;transition:opacity .4s ease}
.aslotcard.fading{opacity:0}
@media (prefers-reduced-motion: reduce){ .aslotcard{transition:none} }
@media (max-width:1000px){ .apool{grid-template-columns:1fr} .apool.live > .aslotcard.s1{grid-column:1} }

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   🔴 ITEM 34 · SITE-WIDE SEARCH — the masthead input and the labeled-results popup.
   Mono voice throughout, matching the control-card patterns. The popup borrows the reader's own
   geometry (a fixed sheet on an opaque wash) rather than inventing a second modal language.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.srchbox{font:600 10px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--fg);
  background:var(--fill);border:var(--line);border-radius:3px;padding:6px 9px;width:132px}
.srchbox::placeholder{color:var(--faint);letter-spacing:.14em}
.srchbox:focus{outline:none;border-color:var(--hairline-hi)}
.srch{position:fixed;inset:0;z-index:80}
.srch-back{position:fixed;inset:0;background:var(--bg);opacity:.94}
html[data-theme="light"] .srch-back{background:#F4F4F4;opacity:.96}
.srch-panel{position:fixed;inset:28px;background:var(--bg);border:var(--line);border-radius:3px;
  overflow-y:auto;padding:26px 28px}
.srch-x{position:sticky;top:0;float:right;width:28px;height:28px;background:var(--fill);
  border:var(--line);border-radius:3px;color:var(--fg);cursor:pointer;font-size:15px;line-height:1}
.srch-head{font:600 10px "JetBrains Mono",monospace;letter-spacing:.16em;color:var(--faint);
  padding-bottom:12px;border-bottom:var(--line);margin-bottom:6px}
.srch-none{font:400 13px/1.6 Barlow,sans-serif;color:var(--dim);margin:14px 0}
.srow{display:block;padding:12px 0;border-top:var(--line);text-decoration:none}
.srow:first-child{border-top:0}
.srow:hover{background:var(--fill-hi)}
.srow-k{display:flex;gap:8px;margin-bottom:6px}
.srow-t{display:block;font:400 15px/1.35 Barlow,sans-serif;color:var(--fg)}
.srow-s{display:block;margin-top:3px;font:400 12px/1.5 Barlow,sans-serif;color:var(--faint)}
@media (max-width:1000px){ .srchbox{width:96px} .srch-panel{inset:14px;padding:18px} }

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   🔴 ITEM 49 · THE AI TIMELINE
   THE CHIP LANE IS THE GUTTER. Michael's third chip rule — no chip may overlap a card — is held by
   the LAYOUT rather than by script: the cards sit in two columns either side of a fixed centre lane
   and the chips live in that lane, so a chip cannot reach a card however the page reflows. Script is
   left with only the chip-to-chip pass, which is the one thing a layout cannot know.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
/* 🔴 457 · THE CONTAINER WAS SIZED FOR THE LOCKUP THAT LEFT. 34px of top air was chosen with the
   mark sitting in it; the mark went in E1 and the air stayed — the desk's named pattern, at its
   smallest scale. Most of what Michael measured (~230px) was the header's dead gap above it and
   went with that fix; this is the remainder that genuinely belonged to the lockup. */
.tlhead{text-align:center;padding:16px 0 10px}
.tlhead .lock{--fs:calc(30px * var(--scale,1));color:var(--fg);display:inline-flex;justify-content:center}
.tltitle{font:800 34px/1.1 'Barlow Condensed',Barlow,sans-serif;font-style:italic;text-transform:uppercase;
  letter-spacing:.01em;color:var(--fg);margin:16px 0 8px}
.tldek{font:400 15px/1.55 Barlow,sans-serif;color:var(--dim);margin:0 auto 10px;max-width:620px}
.tlstat{font:600 9.5px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--faint)}

/* the command bar: one row, sticky, replacing six rows of chips */
.tlbar{position:sticky;top:0;z-index:12;display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  padding:12px 14px;margin:18px 0 26px;background:var(--bg);border:var(--line);border-radius:3px}
.tlctl,.tldial,.tlspace{display:flex;align-items:center;gap:8px}
.tlbar select{font:600 10px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--fg);
  background:var(--fill);border:var(--line);border-radius:3px;padding:5px 8px;max-width:230px}
.tlbar input[type=range]{width:104px}
.tlyr,.tlcount{font:600 10px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--faint)}
.tlcount{margin-left:auto}
.tlspace .vbtn{width:26px;height:26px;padding:0;display:inline-flex;align-items:center;justify-content:center}

.era{margin:0 0 calc(64px * var(--tl-space,1))}
.erahead{text-align:center;margin-bottom:26px}
.eranum{font:600 9.5px "JetBrains Mono",monospace;letter-spacing:.16em;color:var(--faint)}
.era h2{font:800 22px/1.2 'Barlow Condensed',Barlow,sans-serif;font-style:italic;text-transform:uppercase;
  color:var(--fg);margin:8px 0 4px}
.eraspan{font:600 10px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--faint)}
.eraline{font:400 14px/1.6 Barlow,sans-serif;color:var(--dim);max-width:640px;margin:10px auto 0}

/* the spine: two columns and a fixed centre lane. --tl-lane IS the chip's home and the cards' gap. */
.spinewrap{--tl-lane:104px;position:relative;display:grid;
  grid-template-columns:1fr var(--tl-lane) 1fr;row-gap:calc(26px * var(--tl-space,1))}
.spinewrap::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;
  background:var(--edge);transform:translateX(-.5px)}
.tlentry{display:contents}
.dchip{grid-column:2;justify-self:center;align-self:start;position:relative;z-index:2;
  font:600 9.5px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--fg);
  background:var(--bg);border:var(--line);border-radius:3px;padding:3px 7px;white-space:nowrap}
.tlcard{border:var(--line);border-radius:3px;background:var(--fill);overflow:hidden;min-width:0}
.tlentry:nth-of-type(odd) .tlcard{grid-column:1}
.tlentry:nth-of-type(even) .tlcard{grid-column:3}
.era.one-col .spinewrap{grid-template-columns:1fr var(--tl-lane) 1fr}
.era.one-col .tlentry .tlcard{grid-column:1}
.chead{display:block;width:100%;text-align:left;background:none;border:0;padding:14px 16px;cursor:pointer;
  position:relative;color:var(--fg)}
.chead .hed{display:block;font:600 15px/1.3 Barlow,sans-serif;color:var(--fg);padding-right:22px}
.chead .one{display:block;margin-top:5px;font:400 13px/1.5 Barlow,sans-serif;color:var(--dim)}
.chead .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px;align-items:center}
.tltier,.stampE,.stampC{font:600 8.5px "JetBrains Mono",monospace;letter-spacing:.12em;
  border:var(--line);border-radius:3px;padding:2px 6px;color:var(--fg)}
.stampE{border-color:var(--fg)}
.tlplate{font:400 8.5px "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--faint)}
.chev{position:absolute;right:14px;top:14px;color:var(--faint);transition:transform .15s}
.tlcard.open .chev{transform:rotate(180deg)}
.cbody{display:none;padding:0 16px 16px}
.tlcard.open .cbody{display:block}
.what{font:400 13.5px/1.65 Barlow,sans-serif;color:var(--dim);margin:0 0 10px}
.cnote{font:400 12px/1.55 Barlow,sans-serif;color:var(--faint);margin:0 0 10px}
.rcpts ul{list-style:none;margin:6px 0 10px;padding:0}
.rcpts li{display:flex;align-items:baseline;gap:8px;margin-bottom:7px}
.tlrl{font:400 12.5px/1.45 Barlow,sans-serif;color:var(--fg)}
/* arrival from the ledger: weight and rule, never hue — the same grammar the rail's anchor uses */
.tlhit .tlcard{border-color:var(--fg)}

/* THE POPOVER AS A LITERAL PRINTED RECEIPT — narrow, mono, perforated top and bottom. */
.tlpop{position:absolute;z-index:60;width:264px;background:var(--bg);border:var(--line);border-radius:3px;
  padding:12px 14px 14px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.tlpop-perf{height:0;border-top:1px dashed var(--edge);margin:6px 0 10px}
.tlpop-plate{font:600 10px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--fg)}
.tlpop-t{font:600 13px/1.35 Barlow,sans-serif;color:var(--fg);margin:6px 0 2px}
.tlpop-d{font:400 9.5px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--faint);margin-bottom:8px}
.tlpop-r{border-top:var(--line);padding:8px 0}
.tlpop-id{font:400 8.5px "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--faint)}
.tlpop-l{font:400 12px/1.4 Barlow,sans-serif;color:var(--fg);margin:2px 0 6px}
.tlpop-ledger{display:inline-block;margin-top:4px;font:600 9px "JetBrains Mono",monospace;
  letter-spacing:.12em;color:var(--fg);text-decoration:none}
.tlpop-ledger:hover{text-decoration:underline}
.tlpop-x{position:absolute;top:6px;right:6px;width:20px;height:20px;padding:0;line-height:1;
  background:var(--fill);border:var(--line);border-radius:3px;color:var(--fg);cursor:pointer}
@media (max-width:1000px){
  .spinewrap{--tl-lane:62px;grid-template-columns:var(--tl-lane) 1fr}
  .spinewrap::before{left:calc(var(--tl-lane) / 2)}
  .dchip{grid-column:1}
  .tlentry:nth-of-type(odd) .tlcard,.tlentry:nth-of-type(even) .tlcard,
  .era.one-col .tlentry .tlcard{grid-column:2}
  .tlpop{width:min(264px,86vw)}
}

/* 🔴 THE AGENTS PAGE'S 390 OVERFLOW (found by the suite, not by reading). The page carries a base64
   greeting for whoever reads that far — one unbreakable token 659px wide inside a 294px column, which
   pushed the whole document to 707px at 390 and failed the frame gate in both rooms. Prose wraps at
   spaces and a base64 blob has none, so the break has to be allowed explicitly. `anywhere` rather than
   `break-all`: ordinary words still break only when they genuinely cannot fit, so nothing else on the
   page changes shape. */
.agsec p{overflow-wrap:anywhere}

/* 🔴 447 · THE FAKES SLOTS — thirty empty article cards, six per filter. The glyph is the image
   placeholder by ruling: it claims nothing about a story that does not exist yet, which is the whole
   difference between a placeholder and a lie. Ink is currentColor so it flips with the room. */
.fakeglyph{display:flex;align-items:center;justify-content:center;color:var(--faint);background:var(--bg2)}
.fakeglyph svg{width:26px;height:26px}
.story.fakeslot h3{color:var(--dim)}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   🔴 TR-ARC-450 §3 · THE POPUP'S READING PANE, FILLED.
   The body sat 760px wide inside a 1027px pane — a ribbon down the middle with ~270px of dead
   gutter either side, which is what Michael saw. The measure is now sized BY THE PANE: the pane
   owns the gutter as real padding, and the content fills what is left instead of carrying a
   max-width inherited from the standalone page, where the column is doing a different job.
   §1's empty sections get no invented copy — an empty drawer opens on nothing, which IS the signal.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.ovl-body{padding:0 34px}
.ovl-body .body p,.ovl-body .hero,.ovl-body .receipts,.ovl-body .door{max-width:none}
.ovl-body .body p{font-size:17px;line-height:1.72}
@media (max-width:1000px){ .ovl-body{padding:0 18px} }
/* 450 §1 · an EMPTY section still stands, and reads as deliberately empty rather than broken */
.rsec[data-empty] .rsec-t{color:var(--faint);opacity:.72}
.rsec[data-empty] .rsec-b{min-height:0;padding-top:0;padding-bottom:14px}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   🔴 451 §1 · THE NAV COUNTS ITSELF, so it can never wrap again.
   D12 rules the METHOD, not the number: row ÷ N with gaps. The CSS pinned N at eleven and item 35
   added Timeline — twelve entries in an eleven-column grid, so Fakes fell to row two. That is not a
   rename's fault; it is the same "two answers to one question" the label gate was built for, with
   the stale answer living in the stylesheet. The builder now publishes the real count as --navn and
   the grid reads it, so adding or removing a nav entry re-derives the row with nothing to remember.
   Padding tightens so twelve fit without touching the desk's vocabulary.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.catnav .in{display:grid;grid-template-columns:repeat(var(--navn,11),1fr);gap:6px;overflow:visible}
/* THE FACE IS NOT MINE TO TOUCH. My first pass also shrank the nav's type — and item 33 rules the
   FORMAT ROW as the nav's exact twin, measured face against face by gate 70, so changing one silently
   broke the other (nav 11.23px vs format 14.95px). The column count was the whole fix; padding is
   geometry and safe, typography is the twin's shared subject and is left alone. */
.catnav .cat{width:100%;padding-left:2px;padding-right:2px;white-space:nowrap}
@media(max-width:1020px){.catnav .in{grid-template-columns:repeat(6,1fr)}}
@media(max-width:640px){.catnav .in{grid-template-columns:repeat(3,1fr)}}

/* 🔴 453 §1 · THE STICKY HEADER STOPPED BEING TRANSPARENT. Mid-scroll the hero and the "2026 IN A.I."
   heading showed THROUGH and OVER it: it was fine at rest and broken in motion, which is the tell for
   a stacking problem rather than a colour one. It needs BOTH — an opaque ground of its own so nothing
   reads through, and a stacking context above the page so nothing paints over it. */
/* 🔴 455 #1/#2 · BOTH OF THESE WERE MINE, from the 453 §1 fix, and both are the same mistake:
   I changed things the bleed did not require.

   #1 THE ~200px DEAD GAP. The header is `position:fixed` BY DESIGN (contract.css) and `main` clears
   it with padding-top:var(--hdr-h) — one reservation, derived from the header's own measured height.
   I switched it to `sticky`, which puts it back IN FLOW, so the page reserved 188px AND the header
   occupied 188px. A reserved height outliving what it reserved — the desk's named pattern, and I
   made this instance. Position goes back to fixed; the reservation was never wrong.

   #2 THE TWO-TONE BAND. `.mast` already carries an opaque ground per room (#F0F0F0 light / rgb(4,4,4)
   dark). I painted `.in` and `.catnav` white ON TOP of it, so two white rows sat on a grey mast and
   the grey read as the page showing through between them. The children get no ground of their own —
   the header is ONE surface, which is what "one ground, no seam" means.

   WHAT THE BLEED ACTUALLY NEEDED was the stacking, and only the stacking: an explicit z-index above
   the content. That part stays. */
.mast{z-index:60;isolation:isolate}
.catnav{position:relative}

/* 🔴 451 §4 · THE THEME TOGGLE IS A PLAIN SPLIT RECTANGLE — dark | light, tap a side.
   This SUPERSEDES item 25's chevron-as-seam. Michael read the wedge as a stray back-button and CiC
   flagged it independently; two readers arriving at the same wrong meaning is the design being wrong,
   not the readers. No glyph inside, no triangle: two halves, and the active one says so. */
/* 455 #3 · NOTHING INSIDE IT. 451 ruled a plain 50/50 rectangle and I put DARK/LIGHT labels in it;
   the ruling said the fill alone indicates the active side, and words are not nothing. The halves are
   bare now and the ACTIVE one is stated by a ring drawn on the outside, so the inside stays empty. */
.mastR{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:10px;padding-top:0}
.roomtog{width:auto;height:24px;padding:0;display:inline-flex;overflow:hidden;background:transparent;
  border:var(--line);border-radius:3px}
.roomtog .rt{width:26px;height:100%;padding:0;border:0;cursor:pointer;font-size:0;line-height:0;
  background:transparent}
/* 🔴 467 §4 · THE ACTIVE SIDE WAS UNREADABLE, and the ring is why. 455 emptied the halves and stated
   the active one with a 2px INSET ring — inside a 26x24 block that ring eats the swatch it draws on,
   so both halves ended up mostly border and the reader could not tell which side was lit. Michael's
   call: fill versus dim. The two grounds already ARE the vocabulary (dark swatch, light swatch), so
   the lit side shows its ground at full strength and the other is dimmed back. Nothing is drawn ON
   the control — 455's ruling that the inside stays empty holds; only the way it says which is which
   changes, from an added mark to a difference in the fills that were already there. */
.roomtog .rt-d{background:#121212}
.roomtog .rt-l{background:#F2F2F2}
.roomtog .rt{opacity:.34;transition:opacity 150ms var(--ease)}
.roomtog[data-room="dark"] .rt-d,.roomtog[data-room="light"] .rt-l{opacity:1}
.roomtog .rt:hover{opacity:.66}
.roomtog[data-room="dark"] .rt-d:hover,.roomtog[data-room="light"] .rt-l:hover{opacity:1}
@media (prefers-reduced-motion:reduce){.roomtog .rt{transition:none}}
.roomtog .rt:focus-visible{outline:2px solid var(--fg);outline-offset:1px}

/* 451 §2/§3 · RECEIPTS leaves the header for the footer, in the SAME treatment as USER-AGENT and
   immediately to its left. Search and the room control keep the logo line, and with RECEIPTS gone
   the header compresses back to its original height (§5 is the net effect of 1–4, not its own fix). */
.fl .receiptsbtn{font:600 10px "JetBrains Mono",monospace;letter-spacing:.16em}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   🔴 454 D1 · THE FEED PANE STOPS STEALING THE PAGE'S SCROLL.
   Michael's rule, and it is general: the surface under the cursor must not take the page's scroll.
   The circuit/analysis feed sat in `.expfeed .grid` — TT-ARC-120's EXACT-TWO-ROWS LAW, a constant
   926px pane (1030px after --scale) — holding 3112px of cards. Put the cursor over it, which is
   exactly where the ad row is, and the wheel drove an inner region for two thousand pixels while the
   page stood still. That reads as a dead page, and it is the same wheel-containment class RIG fixed
   in PLATINT.
   The pane grows and the PAGE scrolls now. This supersedes the two-rows law for the circuit feed
   specifically — stated rather than quietly overridden, because that law is right about what it was
   written for (a short pane of article cards) and wrong once the pane holds a page and a half of
   them. No gate pinned the height; the ruling is Michael's, live, from his own hand on the wheel.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.circuitfeed.expfeed > .grid{height:auto;max-height:none;overflow:visible;padding-right:0}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   🔴 454 D2 · THE HOUSE AD STOPS BEING A MOSTLY-EMPTY BOX.
   It is a grid child, so it stretched to the tallest card in its row — 507px — while its copy is a
   few lines and its .img pane is empty. The result was a tall blank with the label stranded at the
   bottom, which is exactly the "empty grey rectangle is not a placeholder, it is a defect" Michael
   marked. It sizes to its content now and its empty image pane is gone rather than reserved.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.story.adnative{align-self:start}
.story.adnative > .img:empty{display:none}
.story.adnative .b{height:auto}

/* 454 E2 · THE STRAY SPINNERS. The tab row's controls are number inputs somewhere in the chain, and
   the browser's default spinner arrows were showing at the right end of the strip on Economics and
   Analysis. They are not a control this design offers, so they are removed rather than styled. */
.vcats input[type=number]::-webkit-inner-spin-button,
.vcats input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.vcats input[type=number]{-moz-appearance:textfield;appearance:textfield}

/* 454 E4 · CHART LABELS STOP CLIPPING AT THE CARD EDGE. End-of-line labels ("AI-ATTR…", "TOTAL CI")
   ran into the right edge because the canvas had no room reserved for the text that sits at the end
   of a series. Fixed NOW, on the placeholders, so real charts do not inherit the clip at build. */
/* the drawing carries its own margin now (the viewBox is widened at the lift), so the canvas keeps
   the card's clip — overflow:visible was the wrong lever and put the label 31px PAST the card. */
.acard .acanvas svg{overflow:hidden}

/* 454 E6 · THE TIMELINE SLIDERS TAKE THE SITE'S THEME. They were browser-default blue — the one
   control on the page that announced it had never been dressed. */
.tldial input[type=range]{-webkit-appearance:none;appearance:none;height:3px;border-radius:2px;
  background:var(--edge);outline:none}
.tldial input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:13px;height:13px;border-radius:3px;background:var(--fg);border:0;cursor:pointer}
.tldial input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:3px;
  background:var(--fg);border:0;cursor:pointer}
.tldial input[type=range]::-moz-range-track{height:3px;background:var(--edge);border-radius:2px}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   🔴 454 C · THE SOCIAL PLATE IS A DESIGNED OBJECT, NOT A TEXT DUMP.
   §5k.5 already rules the form — THE QUOTE IS THE IMAGERY — and 430 built it for the share card.
   This brings the same treatment on-page: an oversized mark at low ink, the verbatim in the quote
   face, the SPEAKER NAMED, and the capture metadata demoted to a provenance strip instead of leading
   as a wall of mono. What it deliberately does NOT do is turn the post's figures into house KPI
   tiles: those numbers are the tracker's claim, and tiling them would strip the attribution this
   plate exists to carry. Flagged to the desk instead.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.social-plate[data-quoteform]{border:var(--line);border-radius:3px;background:var(--fill);
  padding:0;overflow:hidden}
.sp-quote{position:relative;padding:26px 28px 20px}
.sp-mark{position:absolute;left:14px;top:2px;font:800 76px/1 Barlow,sans-serif;color:var(--fg);
  opacity:.10;pointer-events:none;user-select:none}
.sp-quote blockquote{position:relative;margin:0;white-space:pre-line;
  font:400 17px/1.55 Barlow,sans-serif;color:var(--fg)}
.sp-attrib{margin-top:14px;font:600 10px "JetBrains Mono",monospace;letter-spacing:.14em;
  color:var(--faint);text-transform:uppercase}
.social-plate[data-quoteform] .ledger{border-top:var(--line);padding:14px 28px 18px;
  font-size:10.5px;opacity:.86}
@media (max-width:1000px){ .sp-quote{padding:20px 18px 16px} .sp-mark{font-size:54px;left:8px} }

/* 456's figure schema: the unit belongs to the value, the attribution belongs to the derivation. */
.runit{font:400 11px "JetBrains Mono",monospace;color:var(--faint);margin-left:2px}
.rattrib{margin-top:3px;font:400 9px "JetBrains Mono",monospace;letter-spacing:.05em;color:var(--faint)}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   🔴 TR-CIC-006 · THE MACRO PATTERN — built to capex-macro-view.html.
   One chip at a time: the read, one visual, the coverage, the records. Every value is token-side so
   the pattern survives both rooms without a second set of numbers — the blueprint's §8 asks for
   fewer things to gate, and a component that needs a light-room twin is two components.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
/* THE CHIP RACK (TR-BUILD, Michael MS-0303 (3)) — the banked rack's read voice, one chip at a time, above
   the feed. The mount is the instrument's door: its painting, its name, the way in. Ink only. */
.chiprack{margin:0 0 26px}
.chipread{position:relative;border:var(--line);border-radius:3px;background:var(--panel);padding:22px 24px 18px;margin:0 0 14px}
.chipread .mv-read{margin-bottom:16px}
.chipread .exhibit{margin:0 0 16px}
.elrail-chip{top:16px;right:16px;bottom:auto}
.chipmount{display:grid;grid-template-columns:minmax(160px,1fr) 2fr;gap:0;border:var(--line);border-radius:3px;overflow:hidden;
  color:inherit;text-decoration:none;margin:0 0 16px;background:var(--fill)}
.mount-art{background-size:cover;background-position:center;min-height:150px}
.mount-b{padding:16px 18px}
.mount-name{font:800 22px/1.1 'Barlow Condensed',Barlow,sans-serif;font-style:italic;text-transform:uppercase;margin:6px 0 4px;color:var(--fg)}
.mount-plain{font:400 14px/1.45 Barlow,sans-serif;color:var(--dim)}
.mount-go{font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--fg);margin-top:12px}
.chipmount:hover .mount-go{text-decoration:underline}
.elrail-mount{position:static;display:inline-block;margin:-6px 0 14px}
.chipvoices{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.chipvoices .mv-k{width:100%}
.voice{display:inline-flex;flex-direction:column;gap:2px;border:var(--line);border-radius:3px;padding:7px 10px;max-width:280px;color:inherit;text-decoration:none;background:var(--fill)}
.voice-who{font:700 9px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.voice-what{font:600 12.5px/1.3 Barlow,sans-serif;color:var(--fg)}
.voice:hover .voice-what{text-decoration:underline}
@media (max-width:700px){.chipmount{grid-template-columns:1fr}.mount-art{min-height:120px}}
.mv{margin:0 0 46px}
.mv-crumb{font:600 9.5px "JetBrains Mono",monospace;letter-spacing:.16em;color:var(--faint);
  text-transform:uppercase;margin-bottom:12px}
.mv-chiprow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:26px}
.mv-tab{font:600 10px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--faint);
  background:var(--fill);border:var(--line);border-radius:3px;padding:7px 13px;cursor:pointer}
.mv-tab:hover{color:var(--fg)}
.mv-tab.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* THE READ — the number leads, the sentence explains, the provenance sits under both */
.mv-read{border:var(--line);border-radius:3px;background:var(--fill);padding:26px 28px;margin-bottom:22px}
.mv-k{font:600 9.5px "JetBrains Mono",monospace;letter-spacing:.16em;color:var(--faint);
  text-transform:uppercase}
.mv-big{font:800 54px/1 'Barlow Condensed',Barlow,sans-serif;font-style:italic;color:var(--fg);
  margin:10px 0 4px;letter-spacing:.01em}
.mv-u{font-size:26px;margin-left:3px;color:var(--faint)}
.mv-dir{font:600 10px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--fg);margin-bottom:14px}
.mv-sentence{font:400 17px/1.55 Barlow,sans-serif;color:var(--fg);margin:0 0 16px;max-width:70ch}
.mv-plates{display:flex;flex-wrap:wrap;gap:6px}
.mv-p{font:600 9px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--faint);
  border:var(--line);border-radius:3px;padding:3px 7px;text-transform:uppercase}

/* ONE VISUAL — bars on one scale, the scale stated out loud */
.mv-fig{border:var(--line);border-radius:3px;padding:22px 24px;margin-bottom:22px}
.mv-cap{font:600 15px Barlow,sans-serif;color:var(--fg)}
.mv-subcap{font:400 12px "JetBrains Mono",monospace;color:var(--faint);margin:4px 0 18px}
.mv-row{display:grid;grid-template-columns:minmax(150px,2fr) 3fr auto;gap:14px;align-items:center;
  margin-bottom:11px}
.mv-lab{font:400 12.5px/1.35 Barlow,sans-serif;color:var(--fg)}
.mv-sub{display:block;font:400 9px "JetBrains Mono",monospace;color:var(--faint);margin-top:2px}
.mv-track{height:16px;background:var(--bg2);border-radius:2px;overflow:hidden}
.mv-b{height:100%;background:var(--fg)}
.mv-b2{background:var(--faint)}
.mv-val{font:600 12.5px "JetBrains Mono",monospace;color:var(--fg);white-space:nowrap}
.mv-axis{font:400 9.5px/1.5 "JetBrains Mono",monospace;color:var(--faint);margin-top:14px;
  padding-top:12px;border-top:var(--line)}
.mv-cov{font:600 9.5px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--faint);
  text-transform:uppercase;margin:0 0 12px}
/* MS-0077: a labelled placeholder is legal everywhere — it says what it waits for */
.mv-slot{border:var(--line);border-radius:3px;padding:30px 28px;background:var(--fill)}
.mv-slot p{font:400 14px/1.6 Barlow,sans-serif;color:var(--dim);margin:10px 0 0;max-width:62ch}
@media (max-width:1000px){
  .mv-big{font-size:40px}
  .mv-row{grid-template-columns:1fr;gap:5px}
  .mv-track{height:12px}
}

/* 467 §5 · the affordance matches the target: the whole card is clickable, so the whole card says so. */
.story{cursor:pointer}
.story a{cursor:pointer}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   THE POPUP LAW, DECLARED LAST (Michael, Phase 0 · measured miss 2026-09-09 22:57).
   The panel is the CONTENT-WRAP WIDTH and the FULL HEIGHT, the page behind it dimmed and blurred in its
   own theme. ITEM 43's even-gutter frame (above) set width:auto with four gutters and won by order, so
   the served glass ran ~96% of the viewport while the wrap held 1120×scale. The width now reads the ONE
   token the wrap reads (--wrap-w) — the glass and the column cannot disagree again — and this block sits
   at the end of the file on purpose: a later rule is the only thing that can beat it, and there is none.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.ovl-panel{position:fixed;top:0!important;bottom:0;left:50%;right:auto;transform:translateX(-50%);
  width:min(var(--wrap-w),100vw);height:auto;max-height:none;border-radius:0}
.ovl-back{position:fixed;inset:0;background:var(--bg);opacity:.72;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
html[data-theme="light"] .ovl-back{background:var(--bg);opacity:.72}
@media (max-width:900px){.ovl-panel{width:100vw;left:0;transform:none}}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   THE HUB (TR-RESTART §2.2, R1b — analysis-hub-mock.html, approved). Its own layout standard: the
   console strip, the featured band, the facet rail and result ROWS. Structure from the mock, skin from
   the site's tokens — dark ground, mono labels, the monochrome law intact. Every measure tracks --scale.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.hub{--hmono:700 var(--t-micro)/1.4 "JetBrains Mono",monospace;--hcond:italic 800 1em "Barlow Condensed","Arial Narrow",sans-serif}
.hub .hmono,.hub .hbadge,.hub .hdate,.hub .hchip,.hub .hcount,.hub .hsort,.hub .hgrp h3,.hub .hflabel,.hub .hfmeta,.hub .hneedle .c,.hub .hlive .dir,.hub .hnone,.hub .hpill{
  font:var(--hmono);letter-spacing:.12em;text-transform:uppercase}
/* 1 · the console strip */
.hconsole{border:1px solid var(--edge);background:var(--card);margin-top:calc(22px * var(--scale,1))}
.hneedles{display:grid;grid-template-columns:repeat(8,1fr)}
.hneedle{position:relative;border-right:1px solid var(--edge);min-width:0}
.hndoor{display:block;padding:10px 14px 9px;color:inherit;text-decoration:none;min-width:0}
.hneedle:last-child{border-right:0}
.hneedle .v{display:block;font-family:Barlow,sans-serif;font-weight:800;font-size:calc(20px * var(--scale,1));letter-spacing:-.01em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hneedle .c{display:block;color:var(--faint);margin-top:3px}
.hneedle .elrail-needle{position:absolute;top:6px;right:6px;opacity:0;transition:opacity .15s}
.hneedle:hover .elrail-needle,.hneedle:focus-within .elrail-needle{opacity:1}
/* 2 · the head + featured band */
.hphead{padding:calc(34px * var(--scale,1)) 0 6px}
.hphead h1{font:var(--hcond);font-size:calc(44px * var(--scale,1));line-height:1;text-transform:uppercase;margin:0}
.hphead .hsub{color:var(--dim);margin-top:6px;font-size:calc(14px * var(--scale,1))}
.hphead .hsub b{color:var(--fg);font-weight:600}
.hflabel{color:var(--faint);padding-top:18px}
.hfeat{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;padding:12px 0 30px;border-bottom:1px solid var(--edge)}
.hfcard{background:var(--card);border:1px solid var(--edge);display:flex;flex-direction:column;min-width:0}
.hfside{display:grid;grid-template-rows:1fr 1fr;gap:20px}
/* the render's own ground is the card token, so CONTAIN reads as a centred chart and nothing is cropped —
   a thumbnail that loses its top rows is a different finding */
.hfthumb{display:block;background:var(--card);border-bottom:1px solid var(--edge);aspect-ratio:630/330;overflow:hidden}
.hfthumb img,.hthumb img{display:block;width:100%;height:100%;object-fit:contain}
.hfside .hfthumb{aspect-ratio:auto;height:calc(150px * var(--scale,1))}
.hfbody{padding:14px 16px 16px}
.hfcard .hhed{font:var(--hcond);font-size:calc(28px * var(--scale,1));line-height:1.02;margin:8px 0 6px;text-transform:uppercase}
.hfside .hhed{font-size:calc(19px * var(--scale,1))}
.hfmeta{color:var(--faint);margin-top:8px}
/* 3 · the index: facet rail + rows */
.hindex{display:grid;grid-template-columns:calc(245px * var(--scale,1)) 1fr;gap:34px;padding:26px 0 60px}   /* MS-1200 §3: the rail takes ~20px of the width the panel inset gave back */
.hfacets .hgrp{margin-bottom:26px}
.hfacets .hgrp h3{color:var(--faint);margin:0 0 10px;font-weight:700}
.hfacets label{display:flex;align-items:center;gap:9px;padding:4px 0;color:var(--dim);cursor:pointer;font-size:13px}
.hfacets label:hover{color:var(--fg)}
.hfacets input{accent-color:var(--fg);margin:0}
.hfacets .n{margin-left:auto;color:var(--faint);font-size:11px;font-family:"JetBrains Mono",monospace}
.hfacets label.zero{color:var(--faint)}
.hsearch{width:100%;background:var(--card);border:1px solid var(--edge);color:var(--fg);padding:8px 10px;font:inherit;font-size:13px;margin-bottom:22px;border-radius:0}
.hsearch::placeholder{color:var(--faint)}
.htoolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;min-height:26px}
.hpill{border:1px solid var(--edge);background:var(--card);padding:3px 9px;color:var(--dim);cursor:pointer;font-size:10px}
.hpill b{color:var(--faint);font-weight:400;margin-left:6px}
.hclear{color:var(--faint);font-size:12px;text-decoration:underline;background:none;border:0;cursor:pointer;font-family:inherit;padding:0}
.hcount{margin-left:auto;color:var(--faint)}
.hsort{background:none;border:1px solid var(--edge);color:var(--dim);padding:4px 8px;border-radius:0}
.hrow{display:grid;grid-template-columns:1fr calc(210px * var(--scale,1));gap:22px;padding:18px 0;border-bottom:1px solid var(--edge);align-items:center;position:relative}
.hrow[hidden]{display:none}
.hbody{min-width:0}
.htop{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.hbadge{display:inline-block;border:1px solid var(--edge);padding:2px 7px;color:var(--dim)}
.hbadge.live{border-color:var(--fg);color:var(--fg)}
.hdate{color:var(--faint)}
.hrow .hhed{font:var(--hcond);font-size:var(--t-hed);line-height:1.05;margin:0 0 5px;text-transform:uppercase}
.hhed a{color:inherit;text-decoration:none}
.hrow .hhed a:hover{text-decoration:underline;text-decoration-thickness:2px}
.hdek{color:var(--dim);font-size:calc(13px * var(--scale,1));max-width:640px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hchips{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap;align-items:center}
.hchip{border:1px solid var(--edge);padding:1px 7px;color:var(--faint)}
.hchip.orig{border-style:dashed}
.hchip.orig-fake{border-style:solid;border-color:var(--fg);color:var(--fg)}
.hthumb{display:block;background:var(--card);border:1px solid var(--edge);aspect-ratio:630/330;overflow:hidden}
.hlive{display:flex;align-items:baseline;gap:8px;margin:2px 0 5px}
.hlive .v{font-family:Barlow,sans-serif;font-weight:800;font-size:calc(30px * var(--scale,1));line-height:1}
.hlive .dir{color:var(--fg);border:1px solid var(--edge);padding:1px 6px}
/* AN INVISIBLE CONTROL MUST NOT TAKE A CLICK. This button rests at opacity 0 and still intercepted pointer events, so
   wherever its box happened to fall over the headline a reader aiming at the title opened the rail instead — silently,
   because the thing they hit could not be seen. Found by walking the hub, where the narrower centre moved the box onto
   the link; the trap was there on every surface that carries this row. Hidden means unclickable. */
.hrow .elrail{position:absolute;right:calc(210px * var(--scale,1) + 22px);top:18px;opacity:0;pointer-events:none;transition:opacity .15s}
.hrow:hover .elrail,.hrow:focus-within .elrail{opacity:1;pointer-events:auto}
/* AND IN THE PANEL'S CENTRE THE CONTROL SITS IN THE ROW'S OWN FLOW. Its absolute offset is derived from a thumbnail
   width, which only holds while the row is as wide as the page; in the centre the box lands ON the headline, so on
   hover the control appeared over the link a reader was aiming at. A control that has to be positioned by arithmetic
   against another element's size will keep finding a layout where the arithmetic is wrong — in here it takes its own
   place beside the row's marks, always visible, never over anything. */
[data-pcentre] .hrow .elrail{position:static;opacity:1;pointer-events:auto;margin-top:8px;align-self:flex-start}
.hnone{padding:26px 0;color:var(--faint)}
@media(max-width:1000px){
  .hneedles{grid-template-columns:repeat(4,1fr)} .hneedle:nth-child(4){border-right:0} .hneedle:nth-child(-n+4){border-bottom:1px solid var(--edge)}
  .hfeat{grid-template-columns:1fr} .hfside{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .hindex{grid-template-columns:1fr} .hrow{grid-template-columns:1fr} .hrow .hthumb{order:-1;max-width:420px}
  .hrow .elrail{position:static;opacity:1;margin-top:8px}
}
@media(max-width:640px){.hfside{grid-template-columns:1fr} .hneedles{grid-template-columns:repeat(2,1fr)} .hneedle{border-bottom:1px solid var(--edge)}}
/* P2-2 · THE HUB'S ROWS UNDER THE RUNNER TAB, BY REFERENCE (R3b): the same row, the same render, inside the
   circuit's governed body. The head says where they come from and opens the hub. */
.hubmount{padding:6px var(--pad) 18px}
.hubmount-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0 4px;
  font:700 10px/1.4 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.hubmount-head a{color:var(--fg);text-decoration:none}
.hubmount .hrow:last-child{border-bottom:0}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   THE HIGHLIGHT DECK (TR-POLISH §2, P6-D1..D4 — circuit-highlight-deck-mock.html, anatomy only).
   One deck, nine pages; only the records change. Tokens only, so both rooms ship.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.deck{margin-top:calc(22px * var(--scale,1));display:flex;flex-direction:column;gap:16px}
.deck .dk-crumb,.deck .dk-asof,.deck .dk-cap,.deck .dk-dtop,.deck .dk-dmeta,.deck .dk-chip .c,.deck .dk-chip .e,.deck .dk-chip .d,.deck .dk-dir,.deck .hbadge,.deck .hlive .dir{
  font:700 var(--t-micro)/1.4 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase}
/* 1 · the read band */
.dk-read{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center;border:1px solid var(--edge);background:var(--card);padding:22px 24px}
.dk-read.one{grid-template-columns:1fr}
.dk-crumb{color:var(--faint)}
.dk-v{font-family:Barlow,sans-serif;font-weight:800;font-size:calc(56px * var(--scale,1));line-height:1;letter-spacing:-.01em;margin:6px 0 4px}
.dk-v .dk-u{font:700 14px "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--dim);margin-left:8px}
.dk-v.dk-none{font-size:calc(26px * var(--scale,1));color:var(--dim);font-weight:600}
.dk-dir{display:inline-block;border:1px solid var(--edge);padding:2px 7px;color:var(--fg);margin:2px 0 6px}
.dk-sent{font-size:calc(16px * var(--scale,1));line-height:1.45;color:var(--fg);max-width:46ch}
.dk-asof{color:var(--faint);margin-top:8px}
.dk-asof .elrail-inline{position:static;display:inline;padding:0;border:0;background:none;color:var(--fg);font:inherit;cursor:pointer;opacity:1;transform:none}
.dk-exh{background:var(--card);border:1px solid var(--edge);padding:12px 14px}
.dk-cap{color:var(--faint);margin-bottom:6px}
.dk-exh .exhibit{margin:0;border:0;padding:0;background:transparent}
.dk-exh .exfind{font-size:14px;margin:0 0 8px;padding-right:48px}   /* the figure's rail control sits top-right; the finding stops short of it */
.dk-exh .exfals,.dk-exh .exnote,.dk-exh .exkeys,.dk-exh .exdecl,.dk-exh .exunauth,.dk-exh .exabsent,.dk-exh .extell{display:none}
.dk-exh .exthrough{margin-top:8px;padding-top:8px}
/* 2 · the three doors */
.dk-doors{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.dk-door{border:1px solid var(--edge);background:var(--card);display:flex;flex-direction:column;min-height:170px;color:inherit;text-decoration:none;position:relative}
.dk-door.none{color:var(--dim)}
.dk-dtop{padding:10px 14px 8px;border-bottom:1px solid var(--edge);display:flex;align-items:baseline;gap:8px;color:var(--fg)}
.dk-dtail{margin-left:auto;color:var(--faint)}
a.dk-door:hover .dk-dtail{color:var(--fg)}
.dk-dmid{flex:1;padding:12px 14px;display:flex;gap:12px;align-items:flex-start;min-width:0}
.dk-dmid > div{min-width:0}
.dk-dmid .img{width:96px;min-width:96px;height:76px;overflow:hidden;background:var(--bg2)}
.dk-dmid .img img{width:100%;height:100%;object-fit:cover;display:block}
.dk-thumb{display:block;width:120px;min-width:120px;background:var(--card);border:1px solid var(--edge);aspect-ratio:630/330}
.dk-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.dk-door h4{font:italic 800 calc(19px * var(--scale,1))/1.05 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;margin:6px 0 5px;color:var(--fg)}
.dk-dek{color:var(--dim);font-size:13px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dk-dmeta{color:var(--faint);margin-top:6px}
.dk-none{font-size:13px;line-height:1.5;color:var(--dim)}
.deck .hbadge{display:inline-block;border:1px solid var(--edge);padding:2px 7px;color:var(--dim)}
.deck .hbadge.live{border-color:var(--fg);color:var(--fg)}
.deck .hlive{display:flex;align-items:baseline;gap:8px;margin:4px 0 2px}
.deck .hlive .v{font-family:Barlow,sans-serif;font-weight:800;font-size:22px}
.deck .hlive .dir{border:1px solid var(--edge);padding:1px 6px;color:var(--fg)}
/* 3 · the chip strip */
.dk-strip{display:grid;grid-template-columns:repeat(var(--dk-n,6),1fr);gap:1px;border:1px solid var(--edge);background:var(--edge)}
.dk-chip{background:var(--card);padding:9px 12px;text-align:left;border:0;color:inherit;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;gap:3px;min-width:0}
.dk-chip:hover{background:var(--bg2)}
.dk-chip .c{color:var(--faint)}
.dk-chip .r{font-family:Barlow,sans-serif;font-size:16px;font-weight:800;line-height:1.15}
.dk-chip.none .r{color:var(--dim);font-weight:400;font-size:12px;font-family:Barlow,sans-serif;text-transform:none;letter-spacing:0}
.dk-chip .d{color:var(--fg)}
.dk-chip .e{color:var(--faint);text-transform:none;letter-spacing:.02em;font-weight:500;line-height:1.3}
@media(max-width:1000px){
  .dk-read{grid-template-columns:1fr} .dk-doors{grid-template-columns:1fr} .dk-strip{grid-template-columns:repeat(2,1fr)}
}
/* P6-F9 · THE SPINE LINE — the footer states what the site stands on, measured (SPINE-LINE.json) */
.fl .spine{max-width:var(--wrap-w);margin:10px auto 0;padding:10px 24px 0;border-top:1px solid var(--edge);
  font:700 var(--t-micro)/1.6 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   THE FRONT DOOR (TR-POLISH §1, P6-F1..F10 — home-frontdoor-mock.html, anatomy only). Every band is a
   rail (.hband[data-ref="content://rail/home/<addr>"]). Tokens only; both rooms ship.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.hband{display:block}
.hband .hbadge,.hband .wirek,.hband .drmeta,.hband .prevreads,.hband .cc,.hband .cs,.hband .ctop,
.hband .wnum,.hband .wfacets span,.hband .lens button,.hband .snaptabs button,.hband .snapkind,.hband .snapasof,.hband .snapgo,.hband .snapall a,.hband .rc,.hband .vwho,.hband .msub,.hband .mdoors a{
  font:700 10px/1.4 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase}
/* F1 · the wire — a static strip that scrolls sideways, never a marquee (C4) */
.wireband{margin-top:calc(34px * var(--scale,1))}   /* R1: the nav→content gap is the section rhythm's (≥40px) */
.wirestrip{display:flex;gap:22px;align-items:center;overflow-x:auto;white-space:nowrap;padding:8px 0;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);scrollbar-width:thin}
.wirek{color:var(--faint);flex:none}
.wireitem{flex:none;color:inherit;text-decoration:none;display:inline-flex;gap:8px;align-items:baseline;font-size:13px}
.wireitem .wt{color:var(--fg)}
.wireitem:hover .wt{text-decoration:underline}
/* F2 · the day's read */
.herogrid{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;align-items:center;padding:calc(26px * var(--scale,1)) 0 10px}
.mission h1{font:italic 800 calc(44px * var(--scale,1))/1 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;margin:0 0 12px}
.msub{color:var(--dim)} .msub a{color:var(--fg);text-decoration:none}
.mdoors{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px}
.mdoors a{color:var(--fg);text-decoration:none;border:1px solid var(--edge);padding:8px 12px}
.mdoors a:hover{border-color:var(--fg)}
.herogrid{align-items:start}
.mission h1{margin-top:0}
.intro{margin:22px 0 0;max-width:62ch;font-size:calc(15px * var(--scale,1));line-height:1.6;color:var(--dim)}
.intro i{font-style:italic;color:var(--fg)}
.intro .beat{color:var(--fg);text-decoration:none;font-weight:700;border-bottom:1px solid var(--edge)}
.intro .beat:hover{color:var(--s1);border-bottom-color:var(--s1)}
.dayread{border:1px solid var(--edge);background:var(--card);display:flex;flex-direction:column;min-width:0}
.dayread .drthumb{display:block;aspect-ratio:630/330;background:var(--card);border-bottom:1px solid var(--edge)}
.dayread .drthumb img{width:100%;height:100%;object-fit:contain;display:block}
.dayread .img{height:200px;overflow:hidden} .dayread .img img{width:100%;height:100%;object-fit:cover;display:block}
.drbody{padding:14px 16px 16px}
.dayread .hhed{font:italic 800 calc(26px * var(--scale,1))/1.02 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;margin:8px 0 6px}
.dayread .hhed a{color:inherit;text-decoration:none}
.dayread .hdek{color:var(--dim);font-size:13px}
.drmeta{color:var(--faint);margin-top:8px}
.prevreads{display:flex;gap:22px;flex-wrap:wrap;border-top:1px solid var(--edge);padding-top:10px;margin-top:14px;color:var(--faint)}
.prevreads a{color:var(--dim);text-decoration:none}
/* F3 · the console */
.consolegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid var(--edge);background:var(--edge)}
.cdoor{position:relative;background:var(--card);min-width:0}
.cdoorlink{display:block;padding:12px 14px 34px;color:inherit;text-decoration:none;min-height:150px}
.cdoor .cc{display:block;color:var(--faint)}
.cdoor .cv{display:block;font-family:Barlow,sans-serif;font-weight:800;font-size:calc(24px * var(--scale,1));line-height:1.1;margin:3px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdoor .cv i{font:700 11px "JetBrains Mono",monospace;font-style:normal;letter-spacing:.06em;color:var(--dim);margin-left:6px}
.cdoor .cs{display:block;color:var(--dim);font-size:12px;text-transform:none;letter-spacing:.02em;font-weight:500;line-height:1.35}
.cdoor .cspark{display:block;margin-top:6px;color:var(--dim);opacity:.85}
.cdoor .ctop{position:absolute;left:14px;right:14px;bottom:10px;color:var(--fg);text-decoration:none;opacity:0;transition:opacity .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:none;letter-spacing:.02em;font-weight:600;font-size:12px}
.cdoor:hover .ctop,.cdoor:focus-within .ctop{opacity:1}
@media(hover:none){.cdoor .ctop{opacity:1}}
.cdoor .elrail-needle{position:absolute;top:8px;right:8px;opacity:0;transition:opacity .15s}
.cdoor:hover .elrail-needle,.cdoor:focus-within .elrail-needle{opacity:1}
/* F5 · three ways in */
.doors3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:16px}   /* minmax(0): a long node label never widens a column past the frame */
.wdoor{display:flex;flex-direction:column;border:1px solid var(--edge);background:var(--card);color:inherit;text-decoration:none;min-width:0}
.wtop{padding:12px 14px 10px;border-bottom:1px solid var(--edge)}
.wnum{display:block;color:var(--faint)}
.wtop h4{font:italic 800 calc(24px * var(--scale,1))/1 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;margin:4px 0 0}
.wtop h4 a{color:inherit;text-decoration:none}
.wmid{flex:1;padding:12px 14px}
.dthumb{display:block;aspect-ratio:630/330;background:var(--card);border:1px solid var(--edge)} .dthumb img{width:100%;height:100%;object-fit:contain;display:block}
.dtitle{margin-top:10px} .dtitle a{display:block;font:italic 800 16px/1.15 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;color:var(--fg);text-decoration:none;margin-top:6px}
.wfacets{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;color:var(--faint)}
.lens{display:flex;gap:1px;border:1px solid var(--edge);background:var(--edge);margin-bottom:10px}
.lens button{flex:1;background:var(--card);border:0;color:var(--dim);padding:6px 0;cursor:pointer}
.lens button.on{background:var(--fill);color:var(--fg)}
.lenspane img{width:100%;aspect-ratio:630/330;object-fit:contain;display:block;background:var(--card);border:1px solid var(--edge)}
.lensnote{color:var(--dim);font-size:12.5px;line-height:1.5;border:1px solid var(--edge);padding:12px;min-height:60px}
.lensnote a{color:inherit;text-decoration:none} .lensnote a b{color:var(--fg)} .lensnote a:hover b{color:var(--s1)}
.gridmotif{position:relative;height:120px;border:1px solid var(--edge);--gl:rgba(79,195,247,.32);background:
  linear-gradient(var(--gl) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,var(--gl) 1px,transparent 1px) 0 0/24px 24px;margin-bottom:10px}
.gnode{position:absolute;width:8px;height:8px;background:var(--s1);transform:translate(-50%,-50%)}   /* MS-0427 §4: the motif is drawn data */
.gnode span{position:absolute;left:12px;top:-4px;font:700 9px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--dim);white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.wfoot{padding:10px 14px;border-top:1px solid var(--edge);color:var(--dim);font-size:12.5px}
.wfoot b{color:var(--fg);font-weight:700} .wfoot a{color:inherit;text-decoration:none}
/* F6 · today on the runner */
.reads{display:grid;grid-template-columns:1.7fr 1fr;gap:26px;align-items:start}
.reads .hrow{padding:14px 0}
.runnerbox{border:1px solid var(--edge);background:var(--card);padding:14px 16px}
.runnerbox h4{font:italic 800 22px/1 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;margin:0}
.runnerbox h4 span{font:700 14px "JetBrains Mono",monospace;margin-right:6px}
.rsub{color:var(--dim);font-size:12px;margin:6px 0 4px}
.ritem{display:block;padding:8px 0;border-top:1px solid var(--edge);color:inherit;text-decoration:none}
.ritem .rc{display:block;color:var(--faint)} .ritem .rh{display:block;font-weight:600;font-size:14px;line-height:1.2;margin-top:2px}
.ritem:hover .rh{text-decoration:underline}
/* F7 · from the instruments */
.snaptabs{display:flex;gap:1px;border:1px solid var(--edge);background:var(--edge);flex-wrap:wrap}
.snaptabs button{flex:1;min-width:120px;background:var(--card);border:0;color:var(--dim);padding:9px 10px;cursor:pointer;text-align:left}
.snaptabs button b{display:block;font-family:Barlow,sans-serif;font-size:20px;letter-spacing:0;color:var(--fg);line-height:1.1;margin-bottom:2px}
.snaptabs button.on{background:var(--fill);color:var(--fg)}
.snapbody{border:1px solid var(--edge);border-top:0;background:var(--card)}
.snappane{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;padding:16px}
.snappane[hidden]{display:none}
.snapchart .exhibit{margin:0;border:0;padding:0;background:transparent}
.snapchart .exfals,.snapchart .exnote,.snapchart .exkeys,.snapchart .exdecl,.snapchart .exunauth,.snapchart .exabsent{display:none}
.snapchart .exfind{padding-right:48px;font-size:14px}
.snapkind{color:var(--faint)}
.snapside h4{font:italic 800 24px/1.05 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;margin:6px 0 8px}
.snapfind{color:var(--dim);font-size:13px;line-height:1.5}
.snapasof{color:var(--faint);margin-top:10px}
.snapgo{display:inline-block;margin-top:12px;color:var(--fg);text-decoration:none;border:1px solid var(--edge);padding:6px 10px}
.snapall{text-align:right;margin-top:8px} .snapall a{color:var(--faint);text-decoration:none}
/* F8 · the screening room · the voices */
.roomsgrid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start}
.voicesbox{border:1px solid var(--edge);background:var(--card);padding:14px 16px}
.voicesbox h4{font:italic 800 20px/1.05 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;margin:8px 0 10px}
.voice{display:block;padding:10px 0;border-top:1px solid var(--edge);color:inherit;text-decoration:none}
.voice .vq{display:block;font-size:13.5px;line-height:1.45;margin:4px 0}
.voice .vwho{display:block;color:var(--faint)}
@media(max-width:1000px){
  .herogrid,.reads,.roomsgrid,.snappane{grid-template-columns:1fr} .consolegrid{grid-template-columns:repeat(2,1fr)} .doors3{grid-template-columns:1fr}
}
/* MS-0402 THE PLATE: one render per item, shown in both rooms on the plate */
.gridmotif{overflow:hidden}
/* W15 · the element standard reaches every painted element on the front: 3px corners, the 10% outline */
.hband .hbadge,.hub .hbadge,.deck .hbadge{border-radius:3px}
.hband .hbadge.live,.hub .hbadge.live,.deck .hbadge.live{border-color:var(--edge)}
.snapchart .exstale{border-color:var(--edge);border-radius:3px}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   THE EXPLORER (TR-RESTART §7, Phase 4): the lens row, the selection rail (the hub's facets, reused a
   third time), the map and the heatmap. Ink only — a pin's weight is area, a cell's is opacity.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.explorer{margin-top:calc(34px * var(--scale,1))}
.xhead h1{font:italic 800 calc(44px * var(--scale,1))/1 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;margin:0}
.xsub{color:var(--dim);margin:6px 0 16px;max-width:70ch}
.xlens{display:flex;align-items:center;gap:1px;border:1px solid var(--edge);background:var(--edge);margin-bottom:18px;position:sticky;top:var(--mast-h,148px);z-index:11}
.xlens button{background:var(--card);border:0;color:var(--dim);padding:10px 18px;cursor:pointer;font:700 11px "JetBrains Mono",monospace;letter-spacing:.14em}
.xlens button.on{background:var(--fill);color:var(--fg)}
.xlensn{margin-left:auto;padding:0 12px;background:var(--card);align-self:stretch;display:flex;align-items:center;font:700 9px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--faint)}
.xshare{padding:10px 14px;background:var(--card);color:var(--fg);text-decoration:none;font:700 10px "JetBrains Mono",monospace;letter-spacing:.12em}
.xpane[hidden]{display:none}
.xlens-body{display:grid;grid-template-columns:calc(230px * var(--scale,1)) 1fr;gap:26px;align-items:start}
.xrail .hgrp{margin-bottom:22px} .xrail .hgrp h3{font:700 10px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--faint);margin:0 0 8px}
.xrail label{display:flex;align-items:center;gap:9px;padding:3px 0;color:var(--dim);font-size:13px;cursor:pointer}
.xrail label:hover{color:var(--fg)} .xrail input{accent-color:var(--fg);margin:0}
.xrail .n{margin-left:auto;color:var(--faint);font:700 11px "JetBrains Mono",monospace}
.xrail .xrange select{margin-left:auto;background:var(--card);border:1px solid var(--edge);color:var(--fg);font:700 10px "JetBrains Mono",monospace;padding:3px 6px}
.xrail .hgrp:has(input[data-axis="firm"]){max-height:420px;overflow-y:auto}
.xread{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font:700 10px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--faint);margin-bottom:10px}
.xread .xcount{color:var(--fg)}
.xkey i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--fg);vertical-align:middle;margin:0 4px 0 6px}
.xkey i.k-ring{background:transparent;border:1.5px solid var(--fg)}
.xmap{width:100%;height:auto;display:block;background:var(--card);border:1px solid var(--edge)}
.xland{fill:var(--bg2);stroke:var(--edge);stroke-width:.6}
.xgrat line{stroke:var(--edge);stroke-width:.4}
.xpin circle{fill:var(--fg);fill-opacity:.62;stroke:var(--fg);stroke-width:.8;cursor:pointer;transition:fill-opacity .12s}
.xpin circle.ring{fill:none;stroke-dasharray:2 1.5}
.xpin:hover circle,.xpin:focus circle{fill-opacity:1}
.xpin:focus{outline:none} .xpin:focus circle{stroke-width:2}
.xpin.off{display:none}
.xattrib{font:700 9px/1.6 "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--faint);margin-top:8px;text-transform:uppercase}
.xheatwrap{overflow-x:auto;border:1px solid var(--edge);background:var(--card)}
.xheat{border-collapse:collapse;font:600 10px "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--dim)}
.xheat th{text-align:left;padding:6px 6px;white-space:nowrap;color:var(--faint);font-weight:700;border-bottom:1px solid var(--edge)}
.xheat th.xq{writing-mode:vertical-rl;transform:rotate(180deg);text-align:left;padding:8px 4px;font-size:var(--t-micro)}
.xheat th.xfirm{position:sticky;left:0;background:var(--card);z-index:1;min-width:150px;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.xheat th.xfirm a{color:var(--fg);text-decoration:none;font-family:Barlow,sans-serif;font-size:12px;letter-spacing:0}
.xheat th.xfirm .xt{display:block;color:var(--faint);font-size:var(--t-micro)}
.xheat td{padding:1px;border:0}
.xheat td[hidden],.xheat th[hidden]{display:none}
.xcell{display:block;width:16px;height:16px;border:0;padding:0;cursor:pointer;background:var(--fg);opacity:var(--v,.1);border-radius:2px}
.xcell:hover,.xcell:focus{outline:2px solid var(--fg);outline-offset:1px;opacity:1}
.xnone{width:18px}
@media(max-width:1000px){.xlens-body{grid-template-columns:1fr} .xlens{position:static;flex-wrap:wrap} .xlensn{display:none}}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   THE ELECTRIC ACCENT (Michael MS-0420) — supersedes §5.7 as enforced after MS-0383. The cyan (#4FC3F7) is the
   site's brand accent under ONE law: THE ACCENT LIVES ON THE PLATE. As TEXT it appears only on dark surfaces —
   the titles inside boxes (ANALYSIS · EXPLORER · GRID), instrument and structural names, HOUSE markers, live
   dots, link emphasis inside cards, data fills where a portion earns it. On the light CANVAS it appears only as
   FILLS, never as type: the selected nav chip (cyan fill, ink text), the wordmark's blinking cursor, a filled
   door. Inside the plates the accent marks the FURNITURE, never the news — structural titles take cyan, story
   headlines stay white. The cursor is cyan in both rooms (MS-0416's ink cursor superseded, Michael's word).
   THE COLOR LAW, FINAL FORM (MS-0424): every visual on a card draws in cyan, single-voiced, both rooms; a second
   series takes s2, a third s3 — colour arrives only where it encodes; the circuit-hue-on-the-lead is REPEALED.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.lock .cur{background:var(--s1)}   /* LAW A (MS-0433): on the canvas the accent is the room's s1 — #0277BD light, #4FC3F7 dark */
.avatar .cur{background:var(--s1)}
/* MS-0427 §3 · ACTIVE STATES UNIFY ON THE UNDERLINE: the nav's full-cyan chip (MS-0420) reverts — the selected item is
   the room-styled chip with the cyan underline beneath (the original active-nav treatment, restored), and the same
   grammar reaches every sub-control: the Explorer's lens row and mode, the deck's and the coverage's tabs, the
   instrument tabs, the door's lens buttons. One rule everywhere. */
.catnav .cat.on{box-shadow:inset 0 -3px 0 var(--s1)}
.vcat.on,.vb.on,.vbtn.on,.exbtn.on,.xlens button.on,.xlens .xmode.on,.lens button.on,.snaptabs button.on,.dk-chip.on,.hchip.on{position:relative}
/* drawn as a bar INSIDE the control (a pseudo-element), never a shadow (§9) and never its border (the element standard) */
.vcat.on::after,.vb.on::after,.vbtn.on::after,.exbtn.on::after,.xlens button.on::after,.xlens .xmode.on::after,.lens button.on::after,.snaptabs button.on::after,.dk-chip.on::after,.hchip.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--s1);pointer-events:none}
/* a filled door on the canvas: the first of the three (the coverage), the other two ink at rest */
.mdoors a:first-child{background:var(--s1);color:#0A0A0A;border-color:var(--s1)}
.mdoors a:first-child:hover{color:#0A0A0A;border-color:var(--s1);opacity:.88}
.hbadge.live::before,.wire .h .live::before{color:var(--s1)}
.hbadge.live::before{content:'●';margin-right:6px}
.hlive .dir,.dk-dir{border-color:var(--s1)}
.exgn{stroke:var(--s1)}
.hhed a:hover,.fl a:hover,.wireitem:hover .wt,.ritem:hover .rh,.snapgo:hover,.mdoors a:hover,.msub a:hover,
.wfoot a:hover b,.dtitle a:hover,.prevreads a:hover,.xshare:hover,.xheat th.xfirm a:hover,.rthr:hover .rclaim,.dk-door:hover h4{color:var(--s1)}
.snapgo:hover{border-color:var(--s1)}
.xpin:hover circle,.xpin:focus circle{fill:var(--s1);stroke:var(--s1)}
.xcell:hover,.xcell:focus{outline-color:var(--s1)}
.dk-chip:hover .r,.hrow:hover .hhed a{color:var(--s1)}

/* THE CONSOLE (MS-0424 §1 + §4): cyan throughout — no circuit colour anywhere on it — and the tile FILLS its card:
   name, number and read text LEFT, the sparkline RIGHT at full width. Decided against eight in one row: at 1440
   a tile would be 165px, too narrow for a number beside a sparkline; the 4 × 2 matrix with the two-column tile
   measured strongest at both breakpoints (logged). The rule at the top stays as furniture, in the accent. */
.consolegrid{gap:8px;border:0;background:transparent}
.cdoor{border:1px solid var(--edge);border-radius:3px;overflow:hidden}
.cdoor::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--s1)}
.cdoor .cdoorlink{display:grid;grid-template-columns:minmax(0,1fr) 42%;grid-template-areas:"cc spark" "cv spark" "cs spark";column-gap:12px;align-items:center;padding:16px 14px 34px}
.cdoor .cc{grid-area:cc} .cdoor .cv{grid-area:cv;color:var(--fg);white-space:normal;overflow:visible} .cdoor .cs{grid-area:cs}
.cdoor .cv i{display:block;margin:2px 0 0;white-space:normal}   /* the unit sits under the number in the narrower column — never clipped */
.cdoor .cspark{grid-area:spark;width:100%;height:calc(58px * var(--scale,1));margin:0;color:var(--s1);opacity:1;align-self:center}
/* MS-0390 · THE WIRE RUNS LIKE A TICKER (Michael: "it should run on its own like a stock ticker, pause on
   hover") — the strip's items are printed twice and translate by half; hover holds it; reduced motion stills it */
.wirestrip{overflow:hidden}
/* the ticker runs inside its own clip so the moving items never pass under the fixed label */
.wireclip{flex:1;min-width:0;overflow:hidden;display:block}
.wiretrack{display:inline-flex;gap:22px;align-items:baseline;white-space:nowrap;animation:wirerun var(--wire-s,90s) linear infinite;will-change:transform}
.wirestrip:hover .wiretrack,.wirestrip:focus-within .wiretrack{animation-play-state:paused}
@keyframes wirerun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.wiretrack{animation:none}}
/* the DOCKET and SCALING lenses (P4-5, P4-6): a drawn line and a scatter on a declared log axis */
.xline{width:100%;height:auto;display:block;background:var(--card);border:1px solid var(--edge);color:var(--fg)}
.xline .extick{font:600 var(--t-exhibit) "JetBrains Mono",monospace;fill:var(--dim)}
.xstrip{position:relative;height:26px;margin:8px 0 4px;border:1px solid var(--edge);background:var(--card)}
.xrule{position:absolute;top:6px;width:6px;height:14px;border:0;padding:0;background:var(--s1);opacity:.7;cursor:pointer;transform:translateX(-50%);border-radius:1px}
.xrule-P{background:var(--s2);height:8px;top:9px}
.xrule:hover,.xrule:focus{opacity:1;outline:2px solid var(--fg);outline-offset:1px}
.xmodel circle{fill:var(--s1);fill-opacity:.55;stroke:none;cursor:pointer}
.xmodel:hover circle,.xmodel:focus circle{fill-opacity:1;fill:var(--fg)}
.xmodel:focus{outline:none}
/* P4-4 · EXHIBITS mode: a mode tab beside the lenses; the picker is a radio rail; one exhibit at a time, full width */
.xlens .xmode{border-left:3px solid var(--edge);color:var(--dim)}
.xlens .xmode.on{color:var(--fg);background:var(--fill);box-shadow:inset 0 -3px 0 var(--s1)}
.xexhibit .exhibit{margin:0}
.xexhibit .xread{margin:0 0 8px}
.xfacets input[type="radio"]{accent-color:var(--fg);margin:0}
.xrail .hgrp:has(input[name="ex"]){max-height:520px;overflow-y:auto}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   THE PLATE RULE (Michael MS-0402, PALETTE.json `plate`): every house data surface wears the plate in both
   rooms — the console tiles (an instrument bank), the deck's exhibit box, the front's snapshot chart, the
   hub's and the doors' thumbnail frames, the instrument face, the Explorer's viewports. Text cards, chips,
   tables and art follow the room. The class carries the tokens; these rules only name the surfaces.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.cdoor,.dk-exh,.snapchart,.hthumb,.hfthumb,.dthumb,.drthumb,.dk-thumb,.lenspane img,.xmap,.xline,.xheatwrap,.xstrip,.iface,.gface,
.consolegrid,.snapbody{--og:#0277BD;--card:var(--plate);--bg:var(--plate-2);--bg2:var(--plate-2);--fill:var(--plate-fill);--edge:var(--plate-border);--edge2:var(--plate-border);--cardface:var(--plate);--line:1px solid var(--plate-border);--hair:#2A2A2A;--hair-hi:rgba(255,255,255,.14);--rack:var(--plate);--panel:var(--plate);--control:var(--plate);--fill-hi:#1C1C1C;
  --fg:var(--plate-fg);--dim:var(--plate-dim);--faint:var(--plate-faint);
  --s1:#4FC3F7;--s2:#FFB74D;--s3:#81C784;--s4:#E57373;--s5:#BA68C8;--s6:#4DB6AC;--s7:#FFD54F;--s8:#F06292;
  --c-economics:var(--s1);--c-business:var(--s2);--c-labor:var(--s3);--c-politics:var(--s4);--c-technology:var(--s5);--c-science:var(--s6);--c-energy:var(--s7);--c-culture:var(--s8);
  color-scheme:dark}
.cdoor,.dk-exh,.snapbody,.xheatwrap,.xstrip,.iface{background:var(--plate);color:var(--plate-fg)}
.hthumb,.hfthumb,.dthumb,.drthumb,.dk-thumb,.gface,.lenspane img,.xmap,.xline{background:var(--plate)}
.consolegrid{background:transparent}

/* D4 (TR-PROMPT §6, Michael MS-0413): the masthead's right side is RESERVED for the larger SEARCH / ASK field —
   the field and the room control swapped places and the field grew now, so P7 lands without re-ruling the header */
.mastR .srchbox{width:calc(300px * var(--scale,1))}
@media (max-width:1000px){.mastR .srchbox{width:140px}}

/* ═══ SLOPE (P4-7): two quarters, many firms — the crossing lines the message; the leaderboard beside it ═══ */
.xslopewrap{display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);gap:18px;align-items:start}
@media(max-width:900px){.xslopewrap{grid-template-columns:1fr}}
.xslope line{stroke:var(--s1);stroke-width:1.4;opacity:.7}
.xslope circle{fill:var(--s1)}
.xslope.down line{stroke:var(--s4)} .xslope.down circle{fill:var(--s4)}
.xslope{cursor:pointer;outline:none}
.xslope:hover line,.xslope:focus line,.xslope.sel line{stroke-width:3;opacity:1}
.xslope:focus circle,.xslope.sel circle{r:4.5}
.xsl{font:600 8.5px "JetBrains Mono",monospace;fill:var(--dim);letter-spacing:.04em}
.xsll{fill:none;stroke:var(--dim);stroke-width:.6;opacity:.55}
.xrank{border:1px solid var(--edge);background:var(--card);padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.xrank-h{font:700 9px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--faint);margin-bottom:6px}
.xrank-row{display:grid;grid-template-columns:18px minmax(0,1fr) 90px auto;gap:8px;align-items:center;background:none;border:0;padding:2px 0;color:var(--fg);cursor:pointer;text-align:left;font:600 11px Barlow,sans-serif}
.xrank-row:hover .xrank-l,.xrank-row:focus .xrank-l{text-decoration:underline}
.xrank-n{font:700 9px "JetBrains Mono",monospace;color:var(--faint)}
.xrank-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xrank-bar{position:relative;height:8px;background:var(--fill)} .xrank-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--s1)}
.xrank-v{font:700 10px "JetBrains Mono",monospace;color:var(--dim)}

/* ═══ THE THEATER (P6-T1, Michael MS-0410; MS-0458 §1 — a VIEWING STATE under its own law, the one deliberate overlay the
   panel ruling keeps): the visual full-width on ONE PLATE, the view's own controls restacked in columns beneath; same
   nodes, same address (stage=1), Esc reseats the reader ═══ */
.xtheater{padding:10px 14px;background:var(--card);border:0;color:var(--fg);cursor:pointer;font:700 10px "JetBrains Mono",monospace;letter-spacing:.12em}
.xtheater[aria-pressed="true"]{background:var(--fill)}
.ovl.theater{z-index:60}
.ovl.theater .ovl-panel{top:16px;bottom:16px;width:min(1400px,calc(100vw - 48px))}
.th-body{overflow-y:auto;padding:52px 22px 26px;display:flex;flex-direction:column;gap:22px;height:100%;box-sizing:border-box}
.th-stage{border:1px solid var(--plate-border);padding:18px;min-height:200px;flex-shrink:0}
.th-stage .xstage,.th-stage .xexhibit{width:100%} .th-stage .exhibit{margin:0}
.th-stage .xmap,.th-stage .xline{max-height:calc(100vh - 360px);width:auto;max-width:100%;margin:0 auto}
.th-ctl{columns:3 240px;column-gap:26px}
.th-ctl .hgrp{break-inside:avoid;margin-bottom:18px}
.th-ctl .xrail{display:contents}
.th-ctl .tlbar{position:static}
@media(max-width:900px){.th-ctl{columns:1}}
/* a mount that resolved to nothing is SAID, never blank (COMPOSITION-SHAPE M3) */
.mount-broken{border:1px dashed var(--fg);padding:14px 16px;font:700 10px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--fg);display:flex;gap:14px;flex-wrap:wrap}
.mount-broken .mb-a{color:var(--dim);letter-spacing:.04em;text-transform:none} .mount-broken .mb-w{color:var(--faint);text-transform:none;letter-spacing:.04em}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   THE CARD RULE (Michael MS-0420; CARD-SWEEP.json, ARC): the plate extends from the chart to the CARD that owns it.
   An ELEMENT CARD — anything rendering a record — presents DARK in BOTH rooms: kicker, hed, dek and chips ride the
   plate with the visual. The canvas, hero, passage, section chrome, the nav, the footer and the popup's frame follow
   the room. One scope, written where the cascade ends so no earlier room rule can win a tie. Rows taken here:
   the front door whole (the wire band, the day's read + previous reads, the console, the three doors,
   today's rows + the runner column, the instrument tabs + exhibit, the screening room + voices); the hub (console
   strip, featured band, result rows); the deck (read band, doors, chip strip); the circuit coverage cards (story,
   instrument, social, video, voice); the Explorer's rails and the theater's controls; the seven-slot rail. Edge
   cases as ARC ruled: a card with no visual is still a card; a specimen wears its quarantine plate over the card.
   NEXT TOUCH (logged): the popup's article head block (hed · dek · chips · visual) — the prose follows the room.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
/* MS-0427 §5 · THE LIST EXCEPTION: cards STAND, rows SCAN. The card rule governs standalone cards and bands, not list
   rows — the hub's result rows, today's rows on the front, the coverage rows on every circuit page (articles, video,
   social, feed), the related-story row on a record page, the previous-reads strip, the instrument grid's cards — all
   return to the canvas with only the thumbnail (a data surface) plated. If it stands alone it is a card and takes the
   plate; if it repeats down the page it is a row and follows the room. Edge cases decided by that sentence and logged. */
.dayread,.cdoor,.dk-chip,.wdoor,.runnerbox,.snaptabs,.snapbody,.roomvideo,.voicesbox,.tslot,
.hfcard,.deck .dk-read,.deck .dk-door,.deck .dk-exh,.xlens,.tlcard,.tleras .chip,.era h2,
.ttar-drawer,.ovl-rail .ttar,.chipread{
  --og:#0277BD;--card:var(--plate);--bg:var(--plate-2);--bg2:var(--plate-2);--fill:var(--plate-fill);--fill-hi:#1C1C1C;--edge:var(--plate-border);--edge2:var(--plate-border);
  --cardface:var(--plate);--line:1px solid var(--plate-border);--hair:#2A2A2A;--hair-hi:rgba(255,255,255,.14);--rack:var(--plate);--panel:var(--plate);--control:var(--plate);--band:var(--plate);--inset:rgba(255,255,255,.09);
  --fg:var(--plate-fg);--dim:var(--plate-dim);--faint:var(--plate-faint);--hairline-hi:rgba(255,255,255,.22);
  --s1:#4FC3F7;--s2:#FFB74D;--s3:#81C784;--s4:#E57373;--s5:#BA68C8;--s6:#4DB6AC;--s7:#FFD54F;--s8:#F06292;
  --c-economics:var(--s1);--c-business:var(--s2);--c-labor:var(--s3);--c-politics:var(--s4);--c-technology:var(--s5);--c-science:var(--s6);--c-energy:var(--s7);--c-culture:var(--s8);
  color-scheme:dark}
.dayread,.cdoor,.dk-chip,.wdoor,.runnerbox,.snapbody,.voicesbox,.tslot,
.hfcard,.deck .dk-read,.deck .dk-door,.deck .dk-exh,.tlcard,.era h2,.ttar-drawer,.ovl-rail .ttar,.chipread{background:var(--plate);color:var(--plate-fg)}
/* LAW E under the panel ruling: the item's rail sits on the canvas with no surface — only the drawer and the popup's pane (the surfaces not yet moved) keep the plate */
.roomvideo{color:var(--plate-fg)}   /* the screening room's wrapper carries the tokens, never a panel under its cards */
.snaptabs{background:var(--plate);border-color:var(--plate-border)} .snaptabs button{background:var(--plate);border-right:1px solid var(--plate-border)} .snaptabs button:last-child{border-right:0} .snaptabs button.on{background:var(--plate-fill)}
/* the deck's chip strip SCANS as a control (ARC's edge case under MS-0427 §5): the room's surface, no plate */
/* rows that were rules on the ground become cards on the plate */
/* THE ACCENT ON THE PLATE — furniture, never the news */
/* MS-0427 §1 · TYPOGRAPHY GOES BACK TO WHITE: box titles (ANALYSIS · EXPLORER · GRID and their kin) and ALL metric numbers
   (the console's eight, the deck's big number, the hub strip's eight) render in the plate's ink like the headlines —
   numbers and titles are content, and content is never branded. Cyan text is the working vocabulary only (§2):
   origin markers, status markers, link emphasis, active states — kept below exactly as shipped. */
/* the contract's light-room fills on the two standalone cards are out-specified here: on the plate, both rooms */
html[data-theme="light"] .hfcard,html[data-theme="light"] .dayread{background:var(--plate)}
.wfoot b,.lensnote a b,.hbadge.live{color:var(--s1)}
.hbadge.live{border-color:var(--plate-border)}
.wirek{color:var(--plate-faint)}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   THE SIGN-OFF PASS (Michael MS-0433) — five laws and the surface items, all class-level.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
/* LAW B · FILL CARRIES MEANING: filled means ours, outlined means theirs, plated means fake. HOUSE is a filled ink
   chip with the glyph in cyan; WIRE outlined at full-strength ink; FAKE keeps its quarantine plate; circuit chips
   take the full-strength border, no fill. The chip reads its tokens from its surface (LAW A), so the same rule is
   ink-on-plate on a card and ink-on-canvas in a row. */
.orig-house,.hchip.orig-house,.hbadge.orig-house,.deck .hbadge.orig-house{display:inline-block;background:var(--fg);color:var(--bg);border:1px solid var(--fg);border-style:solid;padding:1px 6px;border-radius:3px}
.orig-house .og,.hbadge.orig-house .og{color:var(--s1);font-style:normal;font-weight:800}
.orig-wire,.hchip.orig-wire,.hbadge.orig-wire{display:inline-block;color:var(--fg);border:1px solid var(--fg);border-style:solid;padding:1px 6px;border-radius:3px;background:transparent}
.orig-fake,.hchip.orig-fake{border-radius:3px}
.hchip:not(.orig),.grid .story > .b .tag,.hrow .hchip:not(.orig){border-color:var(--fg);color:var(--fg)}
/* LAW C · ONE INDICATOR ANATOMY: the hub's base row and the deck's chip strip wear the console's tile */
.hconsole{border:0;background:transparent;margin-top:14px}
.hfband .hconsole{margin-top:16px}
.dk-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;border:0;background:transparent}
.dk-chip{position:relative;border:1px solid var(--plate-border);border-radius:3px;overflow:hidden;padding:0;text-align:left;cursor:pointer;font-family:inherit;display:block;min-width:0}
.dk-chip::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--s1)}
.dk-chip:hover{background:var(--plate-fill)}
.dk-chip .cdoorlink{display:grid;grid-template-columns:minmax(0,1fr) 42%;grid-template-areas:"cc spark" "cv spark" "cd spark" "cs spark";column-gap:12px;align-items:center;padding:14px 12px 14px;color:inherit;text-decoration:none}
.dk-chip .cc{grid-area:cc;color:var(--plate-faint);font:700 9px "JetBrains Mono",monospace;letter-spacing:.12em}
.dk-chip .cv{grid-area:cv;font-family:Barlow,sans-serif;font-weight:800;font-size:calc(20px * var(--scale,1));line-height:1.1;color:var(--fg);white-space:normal}
.dk-chip .cv i{display:block;font:700 10px "JetBrains Mono",monospace;font-style:normal;letter-spacing:.06em;color:var(--plate-dim);margin-top:2px}
.dk-chip .cd{grid-area:cd;font:700 9px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--fg)}
.dk-chip .cs{grid-area:cs;color:var(--plate-dim);font-size:11.5px;line-height:1.3}
.dk-chip .cspark{grid-area:spark;width:100%;height:calc(44px * var(--scale,1));color:var(--s1);align-self:center}
.dk-chip.none .cv{font:500 12px Barlow,sans-serif;color:var(--plate-dim)}
.cdoor .cd{grid-area:cd;font:700 9px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--fg);display:block}
.cdoor .cdoorlink{grid-template-areas:"cc spark" "cv spark" "cd spark" "cs spark"}
/* LAW D · STRIPS FOLLOW THE ROOM: THE WIRE is a thin ambient band — light and muted on the light
   canvas so the hero owns the first screen */
.wirestrip{background:transparent;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);color:var(--dim);padding:8px 0}
.wirestrip .wt{color:var(--dim)} .wirestrip .orig-wire,.wirestrip .orig-house{opacity:.85}
/* LAW E · RAILS HAVE NO SURFACE: the facet rails and the timeline's bar sit on the background; the dropdowns keep a fill */
/* LAW E superseded by THE REGION RULE (MS-0466): a region is plated, a strip is not — see the console's surfaces block */
.tlbar{background:transparent;border:0;padding:12px 0}
/* THE EXPLORER: the lens bar dark on every view; the timeline dark like its siblings; cyan across the board */
.xlens{border-color:var(--plate-border);background:var(--plate-border)}
.xlens button{background:var(--plate);color:var(--plate-dim)} .xlens button.on{background:var(--plate-fill);color:var(--plate-fg)}
.xlensn,.xshare,.xtheater{background:var(--plate)} .xlensn{color:var(--plate-faint)} .xshare,.xtheater{color:var(--plate-fg)}
.tlcard{border-color:var(--plate-border)}
.tleras .chip{border-color:var(--plate-border)}
.era h2{display:inline-block;padding:4px 12px;border-radius:3px}
html[data-theme="light"] .spinewrap::before{background:#121212}
.xpin circle{fill:var(--s1);stroke:var(--s1)}   /* pins cyan at rest (supersedes pins-ink-at-rest) */
.xcell{background:var(--s1)}                      /* THE HEATMAP RAMP: near-black at a firm's weakest quarter to full cyan at its best; blank stays blank */
/* THE TWO SMALLER ONES: the screening playlist as dark cards with a hover indicator; a hub row responds before the click */
.tslot{border-color:var(--plate-border)}
.tslot:hover,.tslot:focus-within{outline:2px solid var(--s1);outline-offset:-2px}
.hrow:hover{background:var(--fill)}
.ctop:hover{color:var(--dim)}
/* the hub's tiles keep the console's small mono name (the hub's type scale must not enlarge it) */
.hub .hconsole .cc{font:700 9px "JetBrains Mono",monospace;letter-spacing:.12em}
.hub .hconsole .cd,.hub .hconsole .cs{font-size:11.5px}
/* the timeline's date chips ride the plate with the cards and the spine */
.tleras .chip{--chipfill:var(--plate);--chipink:var(--plate-fg);background:var(--plate);color:var(--plate-fg)}
/* the timeline's date chips are .dchip: they ride the plate with the cards and the spine */
.dchip{background:var(--plate);color:var(--plate-fg);border:1px solid var(--plate-border)}
/* the LIVE status marker is working vocabulary (MS-0433 §2): cyan on every surface, the deck's own badge rule included */
.deck .hbadge.live,.hub .hbadge.live,.hband .hbadge.live,.hbadge.live{color:var(--s1)}

/* ═══ THE RE-WALK OF c4d943cc (Michael MS-0441) ═══ */
/* §1 · COVERAGE LISTINGS BECOME ROWS: the circuit page wears the hub's index — rows scan on the canvas, the exhibit or
   art plated at the right; the facet rail beside them carries no surface (LAW E) */
.cindex{padding-top:18px}
.circuitfeed.expfeed > .grid.hrows{display:block;grid-template-columns:none;gap:0;height:auto;max-height:none;overflow:visible}
/* a row keeps the card's element identity (.story) but none of the card's box: the expanse's fixed heights, fills,
   borders and type are out-specified here so the row is the hub's row */
.circuitfeed .grid.hrows > .srow{display:grid;grid-template-columns:1fr calc(210px * var(--scale,1));gap:22px;padding:18px 0;height:auto;min-height:0;max-height:none;
  border:0;border-bottom:1px solid var(--edge);border-radius:0;background:transparent;overflow:visible;position:relative;transform:none;cursor:default}
.circuitfeed .grid.hrows > .srow[hidden]{display:none}
.circuitfeed .grid.hrows > .srow:hover{background:var(--fill);transform:none}
.circuitfeed .grid.hrows > .srow .hbody{padding:0;display:block}
.srow .hhed{font:var(--hcond);font-size:calc(21px * var(--scale,1));line-height:1.05;margin:0 0 5px;text-transform:uppercase}
.srow .hdek{font-family:Barlow,sans-serif;font-weight:400}
.srow .htop,.srow .hbadge,.srow .hdate,.srow .hchip{font:700 var(--t-micro) "JetBrains Mono",monospace;letter-spacing:.12em}
.srow .hthumb{margin:0;height:auto}
.srow .hthumb.srowart{background:var(--plate);border-color:var(--plate-border)}
.srow .hthumb.srowart .img{height:100%;margin:0} .srow .hthumb.srowart img{width:100%;height:100%;object-fit:cover;display:block}
.srow .hthumb.srowart .noart{display:flex;align-items:center;justify-content:center;height:100%;color:var(--plate-faint);font:700 9px "JetBrains Mono",monospace;letter-spacing:.14em}
.srow .hthumb.srowart .quote{height:100%;padding:12px 14px;overflow:hidden;color:var(--plate-fg);font-size:12px;line-height:1.4}
.srow .hthumb.srowart .quote blockquote{margin:0 0 6px;font-style:italic} .srow .hthumb.srowart .quote .attr{color:var(--plate-dim);font-size:10px}
.srow .hbadge{text-transform:uppercase}
/* §2 · the screening-room playlist's thumbs sit on the plate in both rooms (the contract's light fill out-specified) */
.roomvideo .vth,html[data-theme="light"] .roomvideo .vth,[data-screening] .vth,html[data-theme="light"] [data-screening] .vth{background:var(--plate);color:var(--plate-fg)}
/* §3 · the HOUSE glyph always sits on its own filled chip — the accent is the chip's, never the room's */
.og,.orig-house .og,.hbadge.orig-house .og{color:var(--og)}   /* MS-0452 §2: the chip's own fill decides — light chip deep cyan, dark chip bright cyan */
/* §4 · the GRID door's node labels in the plate's ink, not the dim */
.gnode span{color:var(--fg)}

/* MS-0452 §1 · THE CHIP DETAIL BELONGS TO THE FACET INTERACTION: ticking one TOPIC surfaces that chip's read as ONE
   COMPACT BAND above the filtered rows — header-sized, one at a time; nothing ticked shows no band.
   MS-0470 · THE BAND'S FOUR SHAPES: the band is a FLOW, not a grid sized by whatever lands in it. The read grows; each
   mount the chip actually has — an instrument door, its voices — takes a fixed-width slot (220–320px) capped in height
   and scrolling past the cap; a hidden exhibit is absent, not a collapsed column; the band's height follows the read.
   Instrument only · voices only · both · neither all compose from the same rule. */
.cindex .chiprack{margin:0 0 14px}
.cindex .chipread{padding:12px 16px 12px;margin:0;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-start}
.cindex .chipread .mv-crumb{flex:0 0 100%;margin:0 0 2px}
.cindex .chipread .mv-read{flex:1 1 320px;min-width:0;margin:0;padding:0;border:0;background:transparent;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.cindex .chipread .mv-big{font-size:30px}
.cindex .chipread .mv-u{font-size:15px}
.cindex .chipread .mv-dir{margin:0}
.cindex .chipread .mv-sentence{font-size:14px;margin:0;flex:0 0 100%}
.cindex .chipread .mv-plates{margin-top:4px;flex:0 0 100%}
.cindex .chipread .exhibit,.cindex .chipread .mv-cov,.cindex .chipread .chipmount .mount-art,.cindex .chipread .chipmount .mount-plain,.cindex .chipread .elrail-mount{display:none}
.cindex .chipread .chipmount,.cindex .chipread .chipvoices{flex:0 0 clamp(200px,22%,260px);max-height:150px;overflow:auto;margin:0;border:0;background:transparent;display:block}   /* three across at 1440: the read + two slots (BOTH is the shape that squeezes) */
.cindex .chipread .chipmount{grid-template-columns:1fr}
.cindex .chipread .chipmount .mount-b{padding:0}
.cindex .chipread .chipvoices .mv-k{width:100%;margin:0 0 6px}
.cindex .chipread .chipvoices .voice{display:block;padding:6px 9px;margin:0 0 6px;border:1px solid var(--plate-border);border-radius:3px;text-decoration:none;color:var(--plate-fg);font:400 11px/1.3 Barlow,sans-serif;max-width:none}
.cindex .chipread .chipvoices .voice-who{display:block;font:700 9px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--plate-dim);margin:0 0 2px}
.cindex .chipread .chipvoices .voice-what{display:block}
/* THE VOICE TILE (Michael MS-0407, composed from the chip's mount declaration — CHIP-MOUNT.md): the platform's
   lettermark on the platform's colour, the NAME large, the HANDLE beneath, the screamer as the tile's line — never a
   profile photo. --pc is the platform's dark-room colour (the band is a plate in both rooms), --pcl its light. */
.vtile{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:9px;row-gap:1px;align-items:center;padding:7px 9px;margin:0 0 6px;
  border:1px solid var(--plate-border);border-radius:3px;background:var(--plate-fill);color:var(--plate-fg);text-decoration:none;min-width:0}
.vtile .vt-logo{grid-row:1/3;width:28px;height:28px;border-radius:3px;background:var(--pc);color:#111;display:flex;align-items:center;justify-content:center;
  font:800 14px "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:0}
.vtile .vt-name{font:700 12.5px/1.15 Barlow,sans-serif;color:var(--plate-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vtile .vt-handle{font:600 9px "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--plate-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vtile .vt-what{grid-column:1/3;font:400 11px/1.3 Barlow,sans-serif;color:var(--plate-dim);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vtile:hover{border-color:var(--pc)}
.vtile:hover .vt-name{color:var(--s1)}
.cindex .chipread .elrail-chip{position:absolute;top:10px;right:12px}
.cindex .chipread .rempty{flex:0 0 100%}
/* a row's record control paints as a button, never a column (MS-0469's noted nit) */
.srow .elrail{height:auto;width:auto;padding:4px 8px;line-height:1.4;white-space:nowrap}
/* a zero on the rail states its reason (fed from the circuit record) */
.hfacets .why{display:block;font:400 10.5px/1.35 Barlow,sans-serif;color:var(--faint);margin:-2px 0 6px 24px}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   THE PANEL IS THE MACHINE (Michael MS-0456) — the shell: STRIP · LEFT · CENTRE. Nothing floats, nothing overlays;
   selection replaces content in place. The rails have no surface (LAW E); rows scan, the render stands on the grid.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.panel{margin-top:18px}
.pstrip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);font:700 10px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.pcrumb{display:flex;align-items:center;gap:8px;min-width:0}
.pcrumb .pc{color:var(--fg);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.pcrumb .pc + .pc::before{content:'›';margin-right:8px;color:var(--faint)}
.pcrumb .pc-item{color:var(--dim);text-transform:none;letter-spacing:.02em;font:600 12px Barlow,sans-serif}
.pnav{display:flex;gap:6px}
.pbtn{background:var(--fill);border:var(--line);border-radius:3px;color:var(--fg);padding:5px 10px;cursor:pointer;font:700 10px "JetBrains Mono",monospace;letter-spacing:.12em;text-decoration:none}
.pbtn:hover{border-color:var(--hairline-hi)} .pbtn:disabled{color:var(--faint);cursor:default}
.pid{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--faint)}
.pid .pplate{color:var(--dim)}
.pshare{display:flex;gap:6px}
.pbody{padding-top:18px}
.prail{margin-top:4px}
.prail .ttar{background:transparent;border:0;padding:0}
.prail .ttar-head{display:none}
.pitem .ovl-body{overflow:visible;padding:0}
.pitem .ovl-body .article{max-width:none;padding:0}
.pitem .ovl-heroB{border-radius:3px;overflow:hidden}
.pitem .door{margin-top:26px}
.panel.item .pleft{padding-top:4px}
/* R4 · the narrow collapse, ruled once: the controls behind one button as a sheet, the rail beneath the content, the strip stays */
@media(max-width:1000px){
  .pbody{grid-template-columns:1fr}
  .pleft [data-facets]{display:none}
  .pleft.sheet [data-facets]{display:block;position:fixed;left:0;right:0;bottom:0;top:auto;max-height:70vh;overflow:auto;z-index:65;background:var(--bg);border-top:1px solid var(--edge);padding:16px 18px 24px;box-shadow:none}
  .panel.item .pleft{order:2}
  .panel.item .pcentre{order:1}
  .pid{margin-left:0;width:100%;order:3}
}
/* the element-rail opener hovers to the accent — it is the one affordance that opens the record, and the accent is what
   the site uses to say a thing is ours (Michael's lean in MS-0456, taken and logged) */
.elrail:hover,.elrail:focus-visible{color:var(--s1);border-color:var(--s1)}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   THE CONSOLE'S SURFACES (Michael MS-0466; mock tr-console-left-mock.html) — THE REGION RULE: a region is plated, a
   strip is not. Nothing in the panel sits directly on the site's background. LEFT: three dark plates in both rooms —
   FORMAT, TOPIC, and THE RECORD (the seven slots) when an item is open. CENTRE: a container that follows the room, a
   light plate in the light room and a dark plate in the dark. The strip keeps its hairlines and no surface. Cyan is
   section titles and selection state — not body text, not unselected labels or counts.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.plate.hgrp,.plate.rplate,.xrail,.th-ctl{--og:#0277BD;--card:var(--plate);--bg:var(--plate-2);--bg2:var(--plate-2);--fill:var(--plate-fill);--fill-hi:#1C1C1C;--edge:var(--plate-border);--edge2:var(--plate-border);--line:1px solid var(--plate-border);
  --fg:var(--plate-fg);--dim:var(--plate-dim);--faint:var(--plate-faint);--hairline-hi:rgba(255,255,255,.22);--rhov:#171717;--panel:var(--plate);--s1:#4FC3F7;color-scheme:dark;
  background:var(--plate);color:var(--plate-fg);border:1px solid #2A2A2A;border-radius:3px;margin:0 0 12px;padding:0}
.xrail,.th-ctl{padding:14px 14px 4px}
.hfacets .plate.hgrp{margin:0 0 12px} .plate:last-child{margin-bottom:0}
.plate-h{display:flex;align-items:baseline;gap:8px;padding:11px 13px 9px;border-bottom:1px solid #333}
.plate-h h3{font:italic 800 15px/1 "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#4FC3F7;margin:0}
.plate-h .sub{margin-left:auto;font:700 8.5px "JetBrains Mono",monospace;letter-spacing:.13em;color:#6F6F6F}
.hfacets .hsearch{background:#1B1B1B;border:1px solid #333;color:#EDEDED;margin-bottom:12px;padding:9px 11px;font:500 11px "JetBrains Mono",monospace}
.hfacets .hsearch::placeholder{color:#6F6F6F}
/* the option row — the uplift */
.hfacets .opt,.c3page .c3bar .c3menu .opt{display:grid;grid-template-columns:15px 1fr auto;gap:9px;align-items:center;padding:10px 13px;border-bottom:1px solid #1E1E1E;border-left:2px solid transparent;cursor:pointer;margin:0;color:#EDEDED;font-size:12.5px}
.hfacets .opt:last-of-type,.c3page .c3bar .c3menu .opt:last-of-type{border-bottom:0}
.hfacets .opt:hover,.c3page .c3bar .c3menu .opt:hover{background:#171717;color:#EDEDED}
.hfacets .opt input,.c3page .c3bar .c3menu .opt input{accent-color:#4FC3F7;width:13px;height:13px;margin:0}
.hfacets .opt .l,.c3page .c3bar .c3menu .opt .l{font:600 12.5px Barlow,sans-serif;letter-spacing:.055em;color:#EDEDED;text-transform:uppercase}
.hfacets .opt .n,.c3page .c3bar .c3menu .opt .n{font:600 var(--t-micro) "JetBrains Mono",monospace;color:#6F6F6F;font-variant-numeric:tabular-nums;text-align:right;margin:0}
.hfacets .opt:has(input:checked),.c3page .c3bar .c3menu .opt:has(input:checked){border-left-color:#4FC3F7;background:#141A1D}
.hfacets .opt:has(input:checked) .l{color:#FFFFFF} .hfacets .opt:has(input:checked) .n{color:#4FC3F7}
.hfacets .opt.zero .l,.c3page .c3bar .c3menu .opt.zero .l{color:#6A6A6A;font-weight:400} .hfacets .opt.zero .n{color:#4A4A4A}
.hfacets .opt .why,.c3page .c3bar .c3menu .opt .why{grid-column:2 / 4;font:italic 400 var(--t-micro)/1.5 Barlow,sans-serif;color:#6A6A6A;margin:5px 0 0;display:block}
/* FAKES selected keeps the quarantine grammar — ink, never the accent (decided when reached, MS-0466) */
.hfacets .opt.fake:has(input:checked){border-left-color:#EDEDED;background:#161616}
.hfacets .opt.fake:has(input:checked) .n{color:#EDEDED} .hfacets .opt.fake input{accent-color:#EDEDED}
/* THE RECORD plate — the seven slots as the third plate */
.rplate .ttar{padding:0} .rplate .ttar-head{display:none}
.rplate .rsec{border-bottom:1px solid #1E1E1E} .rplate .rsec:last-child{border-bottom:0}
.rplate .rsec-h{height:auto;padding:11px 13px;border-left:2px solid transparent;font:600 11.5px "JetBrains Mono",monospace;letter-spacing:.13em;color:#EDEDED}
.rplate .rsec-h:hover{background:#171717}
.rplate .rsec[data-open] .rsec-h{background:#141A1D;border-left-color:#4FC3F7;color:#4FC3F7;border-bottom:1px solid #1E1E1E}
.rplate .rsec-b{padding:12px 13px 13px;font-size:11.5px;line-height:1.62;color:#C4C4C4}
.prail{margin:0}
/* CENTRE — a container that follows the room */
.pcentre{background:#FFFFFF;border:1px solid rgba(0,0,0,.12);border-radius:3px;padding:16px 18px}
html:not([data-theme="light"]) .pcentre{background:var(--plate);border-color:#2A2A2A}
.pcentre .hrow:hover{background:var(--fill-hi)}
/* FINDING 2 · the deck condenses to its read band while an item is open — the doors and the chip strip fold away */
body.pitem-open .deck .dk-doors,body.pitem-open .deck .dk-strip,body.pitem-open .deck .dk-exh{display:none}
body.pitem-open .deck .dk-read{grid-template-columns:1fr;padding:14px 18px;gap:0 18px;display:grid;grid-template-areas:"crumb" "line";align-items:center}
body.pitem-open .deck .dk-read .dk-v{font-size:calc(30px * var(--scale,1));display:inline;margin-right:12px}
body.pitem-open .deck .dk-read .dk-dir{display:inline-block;margin-right:12px}
body.pitem-open .deck .dk-read .dk-sent{display:inline;font-size:15px}
body.pitem-open .deck .dk-read .dk-asof{display:none}
body.pitem-open .deck{gap:0}
/* the plate head at the hub's specificity (the hub's mono h3 rule outranked the plate's title) */
.hub .hfacets .plate-h,.hub .rplate .plate-h,.plate-h{display:flex;align-items:baseline;gap:8px;padding:11px 13px 9px;min-height:0;line-height:1;margin:0}
.hub .hfacets .plate-h h3,.hub .rplate .plate-h h3,.plate-h h3{font:italic 800 15px/1 "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#4FC3F7;margin:0;padding:0;line-height:1}
.hub .hfacets .plate-h .sub,.hub .rplate .plate-h .sub{margin:0 0 0 auto;line-height:1;font:700 8.5px "JetBrains Mono",monospace;letter-spacing:.13em;color:#6F6F6F}

/* ═══ THE CONSOLE'S COMPRESSION (Michael MS-0481): the panel holds the means of choosing among records and nothing else.
   (1) VIEW — the third left plate: WINDOW and ORDER as one-of groups, the same uplift as FORMAT and TOPIC, radios that
   read as radios; ORDER carries no count because it is an ordering, not a filter. (2) The scoped ASK field on the strip,
   centred, stating its scope, with the widen control inside it. (3) No section head: the panel starts under the deck. ═══ */
.hfacets .vgrp{border-bottom:1px solid #1E1E1E}
.hfacets .vgrp:last-child{border-bottom:0}
.hfacets .vgl{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;white-space:nowrap;padding:9px 13px 4px;font:700 9px "JetBrains Mono",monospace;letter-spacing:.13em;text-transform:uppercase;color:#9A9A9A}
.hfacets .vgl .vgq{margin-left:auto;color:#5C5C5C;font-size:8px;white-space:normal;text-align:right}
.hfacets .opt.one input[type="radio"]{appearance:none;-webkit-appearance:none;width:13px;height:13px;border:1.5px solid #6F6F6F;border-radius:50%;background:transparent;margin:0;display:grid;place-content:center}
.hfacets .opt.one input[type="radio"]::before{content:"";width:7px;height:7px;border-radius:50%;background:#4FC3F7;transform:scale(0)}
.hfacets .opt.one input[type="radio"]:checked{border-color:#4FC3F7}
.hfacets .opt.one input[type="radio"]:checked::before{transform:scale(1)}
.hfacets .opt.one{padding:8px 13px}
.hfacets .vplate [data-sortnav] .opt .n{display:none}
.pstrip:has(> .pask){display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,460px) minmax(0,1fr);align-items:center;gap:14px}
.pcell{display:flex;align-items:center;gap:14px;min-width:0}
.pcell.pr{justify-content:flex-end;gap:10px}
.pask{display:flex;align-items:center;gap:0;margin:0;width:100%;min-width:0;border:1px solid var(--edge);border-radius:3px;background:var(--fill);overflow:hidden}
.pask-scope{flex:0 0 auto;padding:6px 10px;font:700 var(--t-micro) "JetBrains Mono",monospace;letter-spacing:.13em;color:var(--s1);border-right:1px solid var(--edge);white-space:nowrap;cursor:text}
.paskin{flex:1 1 auto;min-width:0;background:transparent;border:0;color:var(--fg);padding:6px 10px;font:500 12px Barlow,sans-serif;letter-spacing:0;text-transform:none;outline:none}
.paskin::placeholder{color:var(--faint);font-style:italic}
.paskin::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.pask-wide{flex:0 0 auto;background:transparent;border:0;border-left:1px solid var(--edge);color:var(--dim);padding:6px 10px;cursor:pointer;font:700 var(--t-micro) "JetBrains Mono",monospace;letter-spacing:.12em;white-space:nowrap}
.pask-wide:hover{color:var(--s1)}
.pask:focus-within{border-color:var(--s1)}
.pstrip .pid{margin-left:0}
.pstrip .pid:empty{display:none}
@media (max-width:1000px){.pstrip:has(> .pask){display:flex;flex-wrap:wrap;gap:8px 12px}.pcell.pl{flex:1 1 auto}.pcell.pr{flex:0 0 auto;margin-left:auto}.pask{flex:1 1 100%;order:4}.pcell.pr .pid{width:auto}}
/* ═══ THE CENTRE'S THREE SECTIONS (Michael MS-0750). The page held one stack and nothing between the report and the
   29 rows said they were different kinds of thing. They are: the reports are what the page is FOR, the instruments
   are the other thing it permanently holds, and the raw material is what the reports get built OUT OF. Each section
   states its own count, and the raw material states that it is temporary — a section whose name is what a thing is
   made from cannot be read as the page's content. ═══ */
/* A BOARD THAT IS A TABLE (CIC MS-0751 fault 3): when the value column mixes units the bars do not draw, so
   the row gives its space back to the label and the figure, and the value keeps the unit it is counted in. */
/* THE MARK SAYS WHAT IT IS (ARC Round A): a REPORTED figure draws hatched, a FILED one solid — the same rule in
   the DOM board and in the one function, read from the record's own evidence class. */
.exrow.ev-hatched .exrow-bar > span{background:repeating-linear-gradient(135deg,currentColor 0 3px,transparent 3px 6px);opacity:.85}
.exrow.ev-hatched .exrow-v::after{content:" · " attr(data-evidence);font:italic 400 9px Barlow,sans-serif;color:var(--faint);text-transform:lowercase}
.exrow.ev-hatched[data-evidence] .exrow-v::after{content:" · " attr(data-evidence)}
.exboard.notchart .exrow{grid-template-columns:minmax(0,1fr) auto}
.exboard.notchart .exrow-bar{display:none}
.exboard .exrow-bar.nobar > span{display:none}
.exboard.notchart .exrow-v{font-variant-numeric:tabular-nums;white-space:nowrap}

/* AN ANALYSIS RECORD WITH NO HERO (Michael, 2026-09-11): art basically never belongs in that slot, so the
   band collapses to a stated slot rather than opening on a tall empty rectangle that reads as a broken image. */
.ovl-heroB.noart .hart{min-height:0;height:auto;background:none;display:flex;align-items:center;padding:10px 0;border-bottom:1px solid var(--edge)}
.hart.noart .dnoart{font:700 9px "JetBrains Mono",monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}

/* ═══ THE STATUS BOARD'S FILTER (Michael, 2026-09-11). The board opens on WHAT IS LEFT because that is the
   question anyone brings to it; the 159 finished rows are the evidence, not the content. Controls read as
   controls, carry their own counts, and a phase with nothing left says so instead of vanishing. ═══ */
.stfilter{margin:18px 0 0;border:1px solid var(--edge);background:var(--fill);padding:10px 12px}
.stf-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px 9px;padding:4px 0}
.stf-row + .stf-row{border-top:1px solid var(--edge);margin-top:4px}
.stf-k{font:700 9px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--faint);margin-right:4px}
.stf{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--edge);border-radius:2px;padding:4px 8px;cursor:pointer;user-select:none}
.stf input{accent-color:var(--s1);width:12px;height:12px;margin:0}
.stf .l{font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.09em;color:var(--ink)}
.stf .n{font:600 9.5px "JetBrains Mono",monospace;color:var(--dim);font-variant-numeric:tabular-nums}
.stf:hover{border-color:var(--s1)}
.stf:has(input:checked){border-color:var(--s1);background:var(--fill-hi,transparent)}
.stf:has(input:checked) .l{color:var(--s1)}
.stf.done .l{color:var(--dim)}
.stf-out{font:600 9.5px "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--dim)}
.stleft{font:700 9px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--s1);border:1px solid var(--s1);border-radius:2px;padding:1px 5px;margin-left:8px}
.stnone{font:italic 400 11.5px/1.5 Barlow,sans-serif;color:var(--dim);margin:8px 0 0}
.stphase.allDone{opacity:.55}
.stphase.allDone .sthead h2{color:var(--dim)}

/* ═══ THE DERIVED HERO (Round 1, Michael MS-0763): an analysis item's hero is a FIGURE from its own record,
   rendered through the same frame as every server-side figure — both rooms, credit on the page, not painted. ═══ */
/* NO SCRIM AND NO BLEND ON A DERIVED HERO. Variant B paints the title OVER a photograph through a 92% black
   gradient — right for art, and it rendered the first derived figure as a faint line on black. A figure is read,
   not looked through: it sits ABOVE the title block in its own band, at full ink, with nothing riding on it. */
main.article .ovl-heroB.derived{flex-direction:column;height:auto;min-height:0;padding-top:var(--mast-h,150px)}   /* variant B runs art UNDER the masthead; a figure's top row must not hide there */
main.article .ovl-heroB.derived .hart.derived::after{content:none}
main.article .ovl-heroB.derived::after{content:none}   /* the second scrim — the band's own — measured after the first came off */
.ovl-heroB.derived .hart.derived{position:relative;inset:auto;height:auto;min-height:0;background:var(--fill);border-bottom:1px solid var(--edge);padding:18px 18px 8px}
main.article .ovl-heroB.derived .inner{position:relative}
.ovl-heroB.derived .hart.derived .ssrfig{margin:0}
/* MS-1802 · THE ART BLOCK HOLDS ITS AUTHORED WIDTH — option (a), ruled before building. All twelve
   derived covers are authored 960 wide (heights 180-328). width:100% was magnifying them 1.517x into
   a 1456 container, so a 280-tall cover rendered 425 tall and the header paid 954. Held at 960 the
   cover renders at the size it was drawn, the plate carries the space either side (R3: white space is
   not a defect), and nothing is re-authored — which matters because MS-1771 retires these onto the
   Walker anyway. max-width:100% keeps it shrinking below a 960 container instead of overflowing. */
.ovl-heroB.derived .hart.derived .ssrfig svg{display:block;width:100%;height:auto;max-height:520px}
/* SCOPED TO THE INSTRUMENT MASTHEAD (.imast) AND NOWHERE ELSE. The selector above it matches EVERY
   derived hero, and 20 NON-instrument pages carry one — story and analysis records with the same
   figure markup. Michael ruled the twelve INSTRUMENT covers; resizing twenty story heroes on the
   same rule is a blast radius nobody asked for. Caught by counting the pages the selector hits,
   not by reading it. Those twenty keep width:100% and render exactly as they do in production. */
.ovl-heroB.derived.imast .hart.derived .ssrfig svg{width:auto;max-width:100%;margin:0 auto}
.ovl-heroB.derived .hart.derived .cred{position:static;display:block;margin-top:8px;font:700 9px "JetBrains Mono",monospace;letter-spacing:.13em;color:var(--faint)}
/* the thumbnail stage for a motif: the marks and nothing else, on the plate */
.tcover{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.tcover .ssrfig{margin:0;width:100%}
.tcover .ssrfig svg{display:block;width:100%;height:auto}

.plan .plan-body{max-width:88ch}
.plan .plan-body h2{font:700 13px Barlow,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--s1);margin:26px 0 6px;border-bottom:1px solid var(--edge);padding-bottom:6px}
.plan .plan-body h1{display:none}
.plan .plan-body p,.plan .plan-body li{font:400 13.5px/1.6 Barlow,sans-serif;color:var(--dim)}
.plan .plan-body strong{color:var(--ink)}
.plan .plan-body code{font:500 12px "JetBrains Mono",monospace;color:var(--s1)}
.plan .plan-body ul{padding-left:18px;margin:6px 0 12px}
.plan .plan-body hr{border:0;border-top:1px solid var(--edge);margin:20px 0}

.rband .rb-draft{font:400 12px/1.5 Barlow,sans-serif;color:var(--dim);border:1px dashed var(--edge);padding:8px 10px;margin:0 0 12px}
.rband .rb-draft b{font:700 9px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--s2,#FFB74D);margin-right:8px}
.rband.draft{border-top-color:var(--edge)}
.rband h2 a{color:inherit;text-decoration:none} .rband h2 a:hover{color:var(--s1)}
.rband .rb-addr{display:inline-block;margin-top:10px;font:700 9px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--faint);text-decoration:none}
.rband .rb-addr:hover{color:var(--s1)}
.rseat.drafted{min-width:0}
.reportpage .rband{margin:0}

/* A THUMBNAIL PER ROOM (Michael MS-0812): two PNGs, the room's own shown. A screenshot cannot change ground, so
   it is taken twice; nothing in the centre stays dark on light or light on dark. */
.th-light{display:none} .th-dark{display:block}   /* MS-0910: the dark render in BOTH rooms — the light-room swap (MS-0812) is retired; a slot with only the dark picture must never hide it */

/* ═══ THE DOORS (Michael MS-0819): eight cards, one per circuit, each a door into that circuit's report surface.
   Not metric tiles — no number, no sparkline; a reader is choosing a report. Plated, because a card stands alone. ═══ */
.doorgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.doorgrid .rdoor{min-width:0;border:1px solid var(--plate-border,#242424);border-top:2px solid var(--s1);background:var(--plate,#111)}
.doorgrid .rdoor .doorlink{display:flex;flex-direction:column;gap:6px;padding:14px 14px 12px;min-height:150px;color:var(--plate-fg,#EDEDED);text-decoration:none}
.doorgrid .rdoor .dk{font:700 8.5px "JetBrains Mono",monospace;letter-spacing:.16em;color:var(--plate-faint,#6C6C6C)}
.doorgrid .rdoor .dn{font:700 19px/1.1 Barlow,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--plate-fg,#EDEDED)}
.doorgrid .rdoor .dr{font:400 11px/1.5 Barlow,sans-serif;color:var(--plate-dim,#A1A1A1)}
.doorgrid .rdoor .do{margin-top:auto;font:700 9px "JetBrains Mono",monospace;letter-spacing:.13em;color:var(--s1)}
.doorgrid .rdoor:hover{border-top-color:#fff} .doorgrid .rdoor:hover .do{color:#fff}
@media (max-width:1100px){.doorgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.doorgrid{grid-template-columns:minmax(0,1fr)}}
/* the hard break between the doors and the list */
.hsec[data-section="raw"]{margin-top:44px;padding-top:26px;border-top:2px solid var(--ink)}
/* the roll-up is plus / minus (MS-0819), not a triangle */
.hgroup .hg-c{width:auto;height:auto;border:0;transform:none;font:700 14px "JetBrains Mono",monospace;color:var(--s1);line-height:1}
.hgroup .hg-c::before{content:"\2212"} .hgroup.shut .hg-c::before{content:"+"}

.hsec{margin:0 0 34px}
.hsec:last-child{margin-bottom:0}
.hsec-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;border-bottom:1px solid var(--ink);padding:0 0 7px;margin:0 0 4px}
.hsec-h h2{font:700 13px Barlow,sans-serif;letter-spacing:.17em;text-transform:uppercase;color:var(--ink);margin:0}
.hsec-h .hsec-s{margin-left:auto;font:600 9.5px "JetBrains Mono",monospace;letter-spacing:.11em;color:var(--dim)}
.hsec-n{font:italic 400 11.5px/1.55 Barlow,sans-serif;color:var(--dim);max-width:80ch;margin:9px 0 16px}
.hsec[data-section="raw"] .hsec-h{border-bottom-style:dashed;border-bottom-color:var(--edge)}
.hsec[data-section="raw"] .hsec-h h2{color:var(--dim)}

/* THE EIGHT SEATS, TWO PER ROW. Seven are empty and each says what it is waiting for — MS-0753 is explicit that the
   content pass is a curation sitting, so an empty seat is the CORRECT state here and is styled as a real seat rather
   than as a gap: same frame, quieter ink, and the count of what that circuit has to be built from. */
.rgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.rseat{min-width:0;display:flex;flex-direction:column}
/* THE GRID IS TWO PER ROW (Michael MS-0750) AND THE BUILT REPORT TAKES THE WHOLE ROW. Measured rather than
   judged: in a half-width seat the composition renders 434px wide against a 620px canvas, a 0.70 scale, which
   puts its 9/10/11px type on screen at 6.3/7.0/7.7px. The empty seats are text and sit two-up exactly as asked;
   the one that carries a chart cannot, until a report has its own page to open into. */
.rseat.filled{min-width:0;grid-column:1 / -1}
.rgrid{align-items:start}
.rseat.filled .rband{margin:0;height:100%}
.rseat.empty{border:1px dashed var(--edge);border-top:2px solid var(--edge);background:transparent;padding:18px 20px 16px}
.rseat.empty .rb-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;margin:0 0 10px}
.rseat.empty .rb-k{font:700 9px "JetBrains Mono",monospace;letter-spacing:.16em;color:var(--faint);border:1px solid var(--edge);padding:2px 6px;border-radius:2px}
.rseat.empty h2{font:700 19px/1.15 Barlow,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--dim);margin:0}
.rseat.empty .rs-wait{font:400 13px/1.5 Barlow,sans-serif;color:var(--dim);margin:0 0 8px}
.rseat.empty .rs-have{font:600 9.5px "JetBrains Mono",monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin:auto 0 0}
@media (max-width:900px){.rgrid{grid-template-columns:minmax(0,1fr)}}

/* ═══ BAND 2 — THE CIRCUIT REPORT (Michael MS-0735/0736, tier 3). It is the page's own claim, so it is plated like a
   record rather than styled like a row: a marked band, the finding in reading type at reading width, the composition
   full-bleed inside it, and every refusal and denominator carried underneath in the same band rather than tucked into
   a caption. The doors at the foot LEAVE THE PAGE by design (MS-0695) — the depth is downstream and this band is the
   only place on the site that says so out loud. ═══ */
.rband{border:1px solid var(--edge);border-top:2px solid var(--s1);background:var(--fill);padding:20px 22px 16px;margin:0 0 26px}
.rband .rb-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;margin:0 0 12px}
.rband .rb-k{font:700 9px "JetBrains Mono",monospace;letter-spacing:.16em;color:var(--s1);border:1px solid var(--s1);padding:2px 6px;border-radius:2px}
.rband h2{font:700 21px/1.15 Barlow,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin:0}
.rband .rb-sub{font:600 10px "JetBrains Mono",monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);margin-left:auto}
.rband .rb-find{font:400 14px/1.5 Barlow,sans-serif;color:var(--ink);max-width:68ch;margin:0 0 16px}
.rband .ssrfig{margin:0 0 12px;overflow-x:auto}
.rband .ssrfig svg{max-width:100%;height:auto}
.rband .rb-note{font:italic 400 11.5px/1.55 Barlow,sans-serif;color:var(--dim);max-width:80ch;margin:0 0 6px}
.rband .rb-refuse{font:italic 400 13px/1.55 Barlow,sans-serif;color:var(--dim);margin:0}
.rband .rb-ref{margin:10px 0 0;border-top:1px solid var(--edge);padding-top:10px}
.rband .rb-ref summary{cursor:pointer;font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.rband .rb-ref summary:hover{color:var(--s1)}
.rband .rb-ref ul{margin:9px 0 0;padding:0 0 0 16px}
.rband .rb-ref li{font:400 11.5px/1.6 Barlow,sans-serif;color:var(--dim);margin:0 0 5px}
.rband .rb-ref li b{font:700 10px "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--ink);margin-right:6px}
.rband .rb-outs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:14px 0 0;border-top:1px solid var(--edge);padding-top:12px}
.rband .rb-ol{font:700 9px "JetBrains Mono",monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.rband .rb-door{font:700 10px "JetBrains Mono",monospace;letter-spacing:.09em;color:var(--s1);border:1px solid var(--edge);border-radius:2px;padding:5px 9px;text-decoration:none}
.rband .rb-door:hover{border-color:var(--s1);background:var(--fill-hi,transparent)}
@media (max-width:700px){.rband{padding:16px 14px 12px}.rband .rb-sub{margin-left:0;flex:1 1 100%}}

/* ═══ THE GROUPING BAND'S HEADERS (Michael MS-0691) — a group is a header and a run of rows in one flow, not a box:
   the rows stay direct children of the list so the panel keeps finding them, and the header does the dividing with a
   rule and a name, the way a printed section does. The disclosure sits on the header itself, its triangle turning; a
   collapsed group keeps its header and its count, so nothing ever disappears without saying it did. A group with no
   rows in view goes quiet and carries its reason in the records' own words — the same rule the facet plates keep. ═══ */
.hgroup{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;margin:26px 0 0;border-top:2px solid var(--ink);padding:0}
.hgroup:first-child{margin-top:0}
.hgroup .hg-d{display:flex;align-items:baseline;gap:9px;background:transparent;border:0;padding:9px 0 8px;cursor:pointer;color:var(--ink);text-align:left}
.hgroup .hg-c{flex:0 0 auto;width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transform:rotate(90deg);transform-origin:30% 50%;transition:transform .12s ease;align-self:center}
.hgroup.shut .hg-c{transform:rotate(0deg)}
.hgroup .hg-l{font:700 12px Barlow,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.hgroup .hg-n{font:600 11px "JetBrains Mono",monospace;font-variant-numeric:tabular-nums;color:var(--s1)}
.hgroup .hg-d:hover .hg-l{color:var(--s1)}
.hgroup .hg-w{flex:1 1 100%;font:italic 400 10.5px/1.5 Barlow,sans-serif;color:var(--dim);padding:0 0 9px}
.hgroup.zero{border-top-color:var(--edge)}
.hgroup.zero .hg-l{color:var(--dim);font-weight:600} .hgroup.zero .hg-n{color:var(--faint)}
.hgroup .hg-d:focus-visible{outline:2px solid var(--s1);outline-offset:2px}
/* an ECHO is a second appearance of one record, not a second record (a row declaring two circuits stands in both) */
.hrows > .hrow[data-echo]{--echo:1}

/* the honest-empty line on a control (Michael MS-0487) and the captures count on a voice tile (ARC, P7-26) */
.hfacets .vnote{font:italic 400 9.5px/1.5 Barlow,sans-serif;color:#8A8A8A;padding:6px 13px 10px}
.hfacets .vnote[hidden]{display:none}
.vtile .vt-cap{margin-left:6px;padding:0 4px;border:1px solid var(--plate-border);border-radius:2px;font:700 7.5px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--plate-dim)}
.chipvoices .vt-undrawn{font:italic 400 10px/1.4 Barlow,sans-serif;color:var(--plate-dim);padding:2px 0 4px}


/* ═══ THE COMPANIES INDEX AS THE SHELL'S FIRST TENANT (P7-2; PANEL-SHAPE.md step stack: companies): the chain by layer in the
   centre, every firm a chip; a chip with a record opens it in place; a chip without one says why in the record's words; the
   board's declaration on the strip at rest; one door into the Complex. Ink grammar on the chips: the status dot is filled,
   half, or outline; the band is text; the accent marks ELEVATED only. ═══ */
.pdecl{font:700 10px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--dim)}
.boardx .brule{font:400 13px/1.45 Barlow,sans-serif;color:var(--dim);margin:0 0 14px}
.boardx .brule b{font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--fg);margin-right:8px}
.boardx .brule .bauth{display:block;font:italic 400 11px/1.4 Barlow,sans-serif;color:var(--faint);margin-top:4px}
.boardx .htoolbar .bdoor{margin-left:14px;color:var(--fg);white-space:nowrap}
.boardx .htoolbar .bdoor:hover{color:var(--s1);border-color:var(--s1)}
.boardx .hcount{margin-left:auto}
.blayer{margin:0 0 22px}
.blayer[hidden]{display:none}
.blhead{display:grid;grid-template-columns:auto 1fr auto;gap:4px 16px;align-items:baseline;padding:10px 0 8px;border-bottom:1px solid var(--edge);margin-bottom:10px}
.bl-t{font:italic 800 16px/1 "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.03em;text-transform:uppercase;color:var(--fg);margin:0}
.bl-sells{font:400 12.5px/1.35 Barlow,sans-serif;color:var(--dim)}
.bl-stat{font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--faint);white-space:nowrap}
.bl-why{grid-column:1 / 4;font:italic 400 11px/1.4 Barlow,sans-serif;color:var(--faint)}
.bchips{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px}
.cochip{display:grid;grid-template-columns:1fr auto;grid-auto-rows:auto;gap:3px 8px;align-items:center;padding:9px 11px 8px;border:1px solid var(--edge);border-radius:3px;background:var(--fill);min-width:0}
.cochip[hidden]{display:none}
.cochip .cc-t{grid-column:1 / 3;display:block;min-width:0;color:inherit;text-decoration:none}
.cochip .cc-tk{display:inline-block;font:800 15px/1 "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.04em;color:var(--fg);margin-right:6px}
.cochip .cc-priv{display:inline-block;font:700 7.5px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--faint);border:1px solid var(--edge);padding:0 4px;border-radius:2px;vertical-align:2px}
.cochip .cc-n{display:block;font:600 12px/1.2 Barlow,sans-serif;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.cochip a.cc-t:hover .cc-tk{color:var(--s1)}
.cochip a.cc-t:hover .cc-n{text-decoration:underline}
.cochip .cc-s{font:700 8.5px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--faint);display:flex;align-items:center;gap:5px}
.cochip .dot{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--fg);box-sizing:border-box;display:inline-block}
.cochip .st-active{background:var(--fg)}
.cochip .st-moderate{background:linear-gradient(90deg,var(--fg) 50%,transparent 50%)}
.cochip .st-watch{background:transparent}
.cochip .st-unscored{border-style:dashed;border-color:var(--faint)}
.cochip .cc-c{justify-self:end;display:flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums}
.cochip .cc-c b{font:800 15px/1 Barlow,sans-serif;color:var(--fg)}
.cochip .cc-c em{font:700 7.5px "JetBrains Mono",monospace;letter-spacing:.1em;font-style:normal;color:var(--faint)}
.cochip .cc-c em.band-elevated{color:var(--s1)}
.cochip .cc-c.none b{color:var(--faint)}
.cochip .cc-tier{grid-column:1 / 3;font:700 7.5px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--faint)}
.cochip .cc-why{grid-column:1 / 3;font:italic 400 10px/1.35 Barlow,sans-serif;color:var(--faint)}
/* A CLASS THAT MARKS OUR COVERAGE CARRIES NO PAINT (Michael MS-0584): a dashed outline or a changed ground beside a
   score reads as a property of the NUMBER while stating a fact about what the desk holds — Law G. The chip that has no
   page is simply not a link, and the card says how many in words. */
.cochip.norec{background:var(--fill);border-style:solid}
.boutside{font:400 12px/1.5 Barlow,sans-serif;color:var(--dim);border-top:1px solid var(--edge);padding-top:12px;margin:8px 0 0}
.boutside b{font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--fg);margin-right:8px}
/* the board under 1000px: nothing claims a minimum width the frame does not have (law 3, no sideways scroll at 390) */
.boardx .pleft,.boardx .pcentre,.boardx .prest,.boardx .pitem{min-width:0}
@media (max-width:1000px){
  .boardx .htoolbar{flex-wrap:wrap}
  .boardx .hcount{white-space:normal;margin-left:0;flex:1 1 100%}
  .boardx .htoolbar .bdoor{white-space:normal;margin-left:0}
  .blhead{grid-template-columns:1fr}
  .bl-stat{white-space:normal}
  .bl-why{grid-column:1}
  .bchips{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
/* the strip's right cell under 1000px: the declaration first, the controls after it, on their own full row (law 3 at 390) */
@media (max-width:1000px){
  .pcell.pr{flex:1 1 100%;margin-left:0;justify-content:space-between;flex-wrap:wrap;gap:6px 10px}
  .pcell.pr .pid{width:auto;order:0;flex:1 1 auto;min-width:0}
  .pcell.pr .pshare{margin-left:auto}
}

/* ═══ THE COMPANY CONSOLE (P7-7; Michael MS-0435 Ruling 2, MS-0458 item 3): the companies stack's final step, rendered
   into the centre on the page's own grid — the crafted banner in place of an art plate, the record's sections as WIDE /
   HALF / SMALL cards, every gap in the record's words. The same markup is the page and the fragment the shell mounts. ═══ */
/* THE CONTENT LINE ONCE (Michael MS-0561): the console renders inside the shell's own <main class="wrap">, whose width is
   --wrap-w — the site's single content token — so the centre is the same number on the circuit pages, the board and a
   company page, and WIDE / HALF / SMALL compute against one grid everywhere. No page states a width of its own. */
/* the shell's <main> already clears the fixed masthead by its own padding — a console page adds no second offset */
.panel[data-console-page] .pcentre .pitem{display:block}
.panel[data-console-page] .pcrumb .pc-item{color:var(--dim)}
.cstand{margin:0 0 26px}
.pitem .cstand{background:transparent;border:0;padding:0}
.console h1,.console h2{font-family:"Barlow Condensed","Arial Narrow",sans-serif}
.cbanner.iface{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:start;margin:0 0 16px;padding:16px 18px 14px;border-radius:3px;overflow:hidden}   /* the face is a plate by rule (a house data surface plates); the banner wears it with room inside */
.cb-name{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.cb-name h1{font:italic 800 34px/1 "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.02em;text-transform:uppercase;margin:0;color:var(--fg)}
.cb-tk{font:800 14px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--dim)}
.cb-layer{font:700 10px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--dim);margin:8px 0 10px}
.cb-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.cbanner .ichip.dim{color:var(--faint);border-color:var(--edge)}
.cbanner .iasof{font:600 9px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--faint)}
.cb-r{min-width:0;max-width:280px;text-align:right;overflow-wrap:anywhere}
.cb-q{font:800 30px/1 Barlow,sans-serif;color:var(--fg)}
.cb-qempty{font:italic 400 11px/1.45 Barlow,sans-serif;color:var(--faint)}
.cgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cocard{background:var(--card);border:1px solid var(--edge);border-radius:3px;padding:14px 16px 12px;min-width:0}
.cocard.wide{grid-column:span 4}
.cocard.half{grid-column:span 2}
.cocard.small{grid-column:span 1}
.co-h{display:flex;align-items:baseline;gap:10px;border-bottom:1px solid var(--edge);padding-bottom:8px;margin-bottom:10px}
.co-h h2{font:italic 800 14px/1 "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.05em;text-transform:uppercase;margin:0;color:var(--s1)}
.co-sub{margin-left:auto;font:700 8.5px "JetBrains Mono",monospace;letter-spacing:.13em;color:var(--faint);text-align:right}
.co-k{display:block;font:700 9px "JetBrains Mono",monospace;letter-spacing:.13em;color:var(--faint);margin:10px 0 4px;text-transform:uppercase}
.co-b > .co-k:first-child{margin-top:0}
.co-read{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.co-read b{font:800 40px/1 Barlow,sans-serif;letter-spacing:-.02em;color:var(--fg)}
.co-read.small b{font-size:26px}
.co-read span{font:600 11px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--dim)}
.co-read em{font:800 9.5px "JetBrains Mono",monospace;letter-spacing:.16em;font-style:normal;padding:4px 8px;border:1px solid var(--fg);color:var(--fg);border-radius:3px}
.co-sent{font:400 14px/1.45 Barlow,sans-serif;color:var(--fg);margin:8px 0 10px}
.co-line{font:400 12.5px/1.5 Barlow,sans-serif;color:var(--fg)}
.co-line b{font:700 12px "JetBrains Mono",monospace}
.co-ev,.co-note{font:italic 400 11px/1.45 Barlow,sans-serif;color:var(--faint);margin-top:8px}
.co-gap{font:italic 400 11.5px/1.45 Barlow,sans-serif;color:var(--dim);border-left:2px solid var(--edge);padding-left:10px;margin:6px 0 4px}
.co-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.co-stat{font:800 22px/1.1 Barlow,sans-serif;color:var(--fg);letter-spacing:-.01em}
.co-door{display:inline-block;margin-top:10px;font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--edge)}
.co-door:hover{color:var(--s1);border-color:var(--s1)}
.co-peers{display:flex;flex-wrap:wrap;gap:6px}
.co-peer{display:inline-flex;align-items:baseline;gap:7px;border:1px solid var(--edge);border-radius:3px;padding:6px 9px;background:var(--fill);color:inherit;text-decoration:none;min-width:0}
.co-peer .co-pt{font:800 13px "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.04em;color:var(--fg)}
.co-peer .co-pn{font:600 11px Barlow,sans-serif;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.co-peer b{font:700 11px "JetBrains Mono",monospace;color:var(--fg)}
/* .co-peer.norec retired with the marking (MS-0584) — coverage is words under the chips, never paint beside a score */
a.co-peer:hover .co-pt{color:var(--s1)}
.co-news{list-style:none;margin:0;padding:0}
.co-news li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;padding:7px 0;border-top:1px solid var(--edge)}
.co-news li:first-child{border-top:0}
.co-news a{color:var(--fg);text-decoration:none;font:600 13px Barlow,sans-serif}
.co-news a:hover{text-decoration:underline}
.co-date{font:600 9px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--faint)}
.cotab td,.cotab th{font-size:var(--t-micro)}
.cotab td.rce{font-size:var(--t-micro)}
.cocard .exhibit{margin:6px 0 10px}
.co-gaps{margin-top:14px;font:400 11.5px/1.5 Barlow,sans-serif;color:var(--dim);border-top:1px solid var(--edge);padding-top:10px}
.co-gaps b{font:700 9px "JetBrains Mono",monospace;letter-spacing:.13em;color:var(--fg);margin-right:8px}
@media (max-width:1000px){.cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.cocard.wide,.cocard.half{grid-column:span 2}.cocard.small{grid-column:span 1}.cbanner.iface{grid-template-columns:1fr}.cb-r{text-align:left;max-width:none}.co-two{grid-template-columns:1fr}}
@media (max-width:640px){.cgrid{grid-template-columns:1fr}.cocard.wide,.cocard.half,.cocard.small{grid-column:span 1}}
/* THE SECTION RAIL (Michael MS-0530): an index over the console's grid — sticky under the masthead, the seated section's
   name in the accent, the seated card outlined; nothing is hidden. */
.corail{position:sticky;top:calc(var(--mast-h,150px) + 6px);z-index:5;display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin:0 0 12px;padding:6px 8px;background:var(--card);border:1px solid var(--edge);border-radius:3px}
.corail .cor-k{font:700 8.5px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--faint);padding:0 8px 0 4px}
.corail .cor{font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--dim);text-decoration:none;padding:6px 9px;border-radius:2px;white-space:nowrap}
.corail .cor:hover{color:var(--fg);background:var(--fill)}
.corail .cor.on{color:var(--fg);box-shadow:inset 0 -3px 0 var(--s1)}
.cocard.seated{border-color:var(--s1)}
.pitem .corail{top:calc(var(--mast-h,150px) + 6px)}

/* ═══ THE STRIP TAKES A SURFACE (Michael MS-0544, repealing the region rule's second half and the standing exception;
   ARC's replacement: A REGION IS PLATED. A STRIP IS A PLATED BAND WHOSE CONTROLS FOLLOW THE ROOM — and surface no longer
   separates a region from a strip, CONTENT does: a region holds content, a strip holds identity). The band is #0A0A0A in
   BOTH ROOMS — the value the plates already use for their own inset ground, so this is a palette role and not a new hex.
   THE TWO VALUES, stated rather than tuned: band #0A0A0A · controls #FFFFFF in the light room (the room's own fill) and
   #1C1C1C in the dark (the plate's raised fill), two clear steps above the band so nothing goes flat. The strip's own ink
   — crumb and identity — is the plate's ink in both rooms, because it sits on the band. It stays its height and holds
   nothing new. ═══ */
.pstrip{background:#0A0A0A;border:1px solid #242424;border-radius:3px;padding:10px 14px;color:#8A8A8A}
.pstrip .pcrumb .pc{color:#EDEDED}
.pstrip .pcrumb .pc + .pc::before{color:#6C6C6C}
.pstrip .pcrumb .pc-item{color:#A1A1A1}
.pstrip .pid{color:#8A8A8A}
.pstrip .pdecl,.pstrip .pplate{color:#A1A1A1}
.pstrip .orig-house{background:#EDEDED;color:#0A0A0A;border-color:#EDEDED}
.pstrip .orig-house .og{color:#0277BD}
.pstrip .orig-wire{color:#8A8A8A}
.pstrip .orig-fake{color:#EDEDED;border-color:#EDEDED}
.pstrip .og{color:#4FC3F7}
/* the controls follow the room: the light room's own fill reads as a white chip on the dark band; the dark room takes the
   plate's raised fill so the control is two steps above the band rather than one */
html:not([data-theme="light"]) .pstrip .pbtn,
html:not([data-theme="light"]) .pstrip .pask{--fill:#1C1C1C;--fill-hi:#242424;--edge:#333333;--line:1px solid #333333}
html:not([data-theme="light"]) .pstrip .pask .paskin{color:#EDEDED}
html:not([data-theme="light"]) .pstrip .pask-wide{color:#A1A1A1}
html:not([data-theme="light"]) .pstrip .pask-scope{border-right-color:#333333}

/* THE SERVER-SIDE FIGURE (Michael MS-0573, application two): rendered at publish from the declaration, both rooms in
   the page, the room's own shown. Two renders rather than one filtered: SSR fixes ink at publish, and a figure whose
   colour was filtered to fit the room would be lying about what it drew. */
.ssrfig{margin:6px 0 10px;padding:0;max-width:100%;overflow-x:auto}
.ssrfig svg{max-width:100%;height:auto;display:block}
/* MS-1774 · THE FIGURES TAKE THE WIDTH THE RAIL GAVE BACK. Taking the rail off widened the
   instrument column from 881 to 1366 and the figures DID NOT FOLLOW: the base rule above is
   max-width, which caps a figure but never stretches it, so a 960-wide drawing carrying its own
   width attribute sat at 960 and left 406px empty beside it. Two 760s left 606px each.
   THAT WAS A REGRESSION OF MY OWN, from phase 1, found by measuring after the change.
   Scoped to the instrument content wrappers only. The hero (.ovl-heroB, 375 pages) and the band
   (.rband) decide their own width and are deliberately untouched — the base rule is shared by 93
   non-instrument pages and must not move.
   SCOPED BY rail-strip, NOT BY THE WRAPPER: .exvis and .extell are site-wide figure wrappers —
   93 non-instrument pages sit inside them, so scoping by wrapper was no scope at all. rail-strip
   is on exactly the 21 instrument pages and nothing else. */
main.article.rail-strip .exvis .ssrfig svg,
main.article.rail-strip .extell .ssrfig svg{width:100%;height:auto}

/* ── TWO-UP · MS-1772 item 3 ──────────────────────────────────────────────────────────────────
   SCOPED TO article.body ONLY, AND THAT IS A MEASUREMENT, NOT A PREFERENCE. section.ivpane holds
   22 exhibits across 87 panes and NOT ONE pane holds two — a grid there would strand every lone
   figure at half width with dead space beside it, degrading 22 figures to pair none. 10 of the 21
   article.body containers hold two or more, and those are the only places two-up does work.
   THE GRID SPANS EVERYTHING BY DEFAULT and lets only figure.exhibit take a column, so the prose,
   the navigators, the ledgers and the inline scripts are untouched by a rule about figures —
   rather than enumerating siblings that would change the next time someone adds one.
   THE LEAD SPANS BOTH COLUMNS: it is the page's argument, and it is authored 960 wide against the
   body's 760, so side by side the two would render at visibly different scales. */
main.article.rail-strip article.body{display:grid;grid-template-columns:repeat(2,1fr);gap:0 26px;align-items:start}
main.article.rail-strip article.body > *{grid-column:1/-1}
main.article.rail-strip article.body > figure.exhibit{grid-column:auto;min-width:0}
main.article.rail-strip article.body > figure.exhibit.exlead{grid-column:1/-1}
main.article.rail-strip article.body > figure.exhibit:only-of-type{grid-column:1/-1}
@media (max-width:1000px){
  main.article.rail-strip article.body{grid-template-columns:1fr}
  main.article.rail-strip article.body > figure.exhibit{grid-column:1/-1}}
/* THE FINDING KEEPS CLEAR OF THE RAIL BUTTON. At full width the headline never reached the top-right
   corner, so nothing collided; in a 685px column it does — measured at the TEXT, not the box (a block
   element's box always spans the column and always "overlaps" a pinned button, which is why the first
   test said all four collided and meant nothing). The button is 33px plus its inset. */
main.article.rail-strip article.body figure.exhibit .exfind{padding-right:46px}
.ssrfig .ssr-dark{display:none}
html:not([data-theme="light"]) .ssrfig .ssr-light{display:none}
html:not([data-theme="light"]) .ssrfig .ssr-dark{display:block}
/* THE SURFACE DECIDES, NOT THE ROOM. An exhibit's frame is a PLATE — dark in BOTH rooms by the plate rule — so a figure
   inside one always shows its dark render. Following the room there put the light room's near-black ink on a dark card:
   the figure drew, its marks counted, and its labels were invisible. This is the same rule as the ink tokens' own —
   a value chosen for one surface is re-picked for the other, never inherited from the page around it. */
.plate .ssrfig .ssr-light,html[data-theme="light"] .plate .ssrfig .ssr-light{display:none}
.plate .ssrfig .ssr-dark,html[data-theme="light"] .plate .ssrfig .ssr-dark{display:block}
.co-qu{font:700 11px 'JetBrains Mono',monospace;color:var(--dim);letter-spacing:.08em}
/* the quote is a stat and the price is a chart: the stat sits on its own line, the figure takes the card's width */
.co-quote{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.co-quote .co-k{margin:0}
.co-quote .co-stat{margin:0}
.co-quote .co-note{margin:0;flex:1 1 240px}

/* the roll-up glyph, placed LAST so it wins: the earlier triangle rule outranked the override and the picture showed
   a triangle while the census read a minus (MS-0819: plus / minus) */
.hrows .hgroup .hg-d .hg-c{width:auto;height:auto;border:0;transform:none;font:700 14px "JetBrains Mono",monospace;color:var(--s1);line-height:1}
.hrows .hgroup .hg-d .hg-c::before{content:"\2212"} .hrows .hgroup.shut .hg-d .hg-c::before{content:"+"}

/* ═══ THE CATEGORY TOP SECTION (TR-TOPSECTION-v2, Michael MS-0824; the collapse per MS-0833): the page title above
   and never rotating; text left and light (editorial holds no number); the plated visual right; three highlights
   rotating; the topic cards in ONE row beneath — all of it one COLLAPSIBLE section, open at rest, closed to a slim
   bar with + when an item is open. ═══ */
.top{margin:calc(18px * var(--scale,1)) 0 18px}
.top .ptitle{font:800 44px/1 Barlow,sans-serif;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);margin:0 0 14px}
.top .hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-height:300px}
.top .tslide{display:none;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:26px}
.top .tslide.on{display:grid}
.top .hl{display:flex;flex-direction:column;gap:8px;padding:6px 0 34px}
.top .kick{font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0;display:flex;align-items:center;gap:8px}
.top .kick .dot{width:7px;height:7px;border-radius:50%;background:var(--s1)}
.top .kick .sep{color:var(--faint)}
.top .hed{font:700 30px/1.12 Barlow,sans-serif;letter-spacing:.005em;text-transform:uppercase;margin:2px 0 0}
.top .hed a{color:var(--ink);text-decoration:none} .top .hed a:hover{color:var(--s1)}
.top .dek{font:400 16px/1.5 Barlow,sans-serif;color:var(--dim);margin:0;max-width:52ch}
.top .hmeta{font:600 9.5px "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:2px 0 0}
.top .hgo{align-self:flex-start;font:700 10px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--s1);text-decoration:none;border:1px solid var(--edge);border-radius:2px;padding:6px 10px;margin-top:6px}
.top .hgo:hover{border-color:var(--s1)}
.top .tslide .elrail{position:static;opacity:1;pointer-events:auto;margin-top:8px;align-self:flex-start;font:700 9px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--dim);border:1px solid var(--edge);border-radius:2px;background:transparent;padding:5px 8px;cursor:pointer}
.top .tslide .elrail:hover{color:var(--s1);border-color:var(--s1)}
.top .hv{display:flex;flex-direction:column;min-width:0}
.top .canvasarea{flex:0 0 auto;height:300px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:3px}
.top .canvasarea img.th{display:block;width:100%;height:100%;object-fit:contain}
.top .canvasarea .art,.top .canvasarea .artpane,.top .canvasarea figure,.top .canvasarea > div{width:100%;height:100%;margin:0}
.top .canvasarea img:not(.th){display:block;width:100%;height:100%;object-fit:cover}
.top .canvasarea .ssrfig{margin:0;width:100%}
.top .cap{display:flex;align-items:baseline;gap:8px;padding:8px 2px 0;font:600 9.5px "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.top .cap b{color:var(--dim);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.top .cap .sp{flex:1 1 auto;border-top:1px solid var(--edge);transform:translateY(-3px)}
.top .dots{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:6px}
.top .dots button{width:44px;height:4px;border:0;padding:0;background:var(--edge);cursor:pointer;position:relative;overflow:hidden;border-radius:2px}
.top .dots button .fill{position:absolute;inset:0;background:var(--s1);transform:scaleX(0);transform-origin:left}
.top .dots button.on{background:rgba(79,195,247,.25)}
.top .dots .cnt{margin-left:8px;font:600 9px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--faint)}
.top .tnote{font:italic 400 11px/1.5 Barlow,sans-serif;color:var(--dim);margin:8px 0 0}
.top .tbody .deck{margin-top:22px}
.deck .dk-strip{grid-template-columns:repeat(var(--dk-n,6),minmax(0,1fr));gap:8px}
/* the collapse (MS-0833): two states, one bar as the handle in both */
.top .tbar{display:flex;align-items:center;gap:12px;border:1px solid var(--edge);background:var(--fill);padding:6px 8px 6px 12px;margin:0 0 14px}
.top .tholds{font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);flex:1 1 auto}
.top .tbtn{width:26px;height:26px;border:1px solid var(--edge);border-radius:2px;background:transparent;color:var(--s1);cursor:pointer;font:700 16px/1 "JetBrains Mono",monospace;padding:0}
.top .tbtn:hover{border-color:var(--s1)}
.top.closed .hero{display:none}   /* MS-1127 §4: closed hides ONLY the highlight slider — title, count line, button and topic cards stand unchanged */
.top.closed .tbar{margin-bottom:6px}
.hubtop{margin:0 0 22px} .hubtop .tbar{margin-bottom:12px}
@media (max-width:900px){.top .tslide.on{grid-template-columns:minmax(0,1fr)}.top .hl{padding-bottom:36px}}

/* ═══ STANDARD-LINTED FROM HERE (MS-0941 §3): every rule below is held to the element standard at build by lint_css_standard.py —
   an edge is var(--edge) or the standard's 10% value, a radius is 3px; a literal typed here refuses the build. ═══ */
/* ═══ MS-0864 §2–§4 + MS-0866 · chain 108 ═══════════════════════════════════════════════════════════════════════
   §3 THE DERIVED HERO reads in the ROOM's ink — the art hero's white-over-scrim ink (article.css) reached a hero
   that has no scrim and sits on the ground. §2 THE DERIVATION STRIP is a caption: the room's caption tokens, a
   room-following bar. §4 a LIST thumb frame follows the room (MS-0812), so an unloaded light picture is a light
   box, never a black plate. MS-0866 THE FEATURE LAYOUT LAW: story card left (white in the light room), visual
   right (the dark render, both rooms) — home and the eight circuit tops alike. */
.ovl-heroB.derived .inner{color:var(--fg)}
.ovl-heroB.derived h1{color:var(--fg);text-shadow:none}
.ovl-heroB.derived .deck{color:var(--dim)}
.ovl-heroB.derived .meta{color:var(--dim)}
html[data-theme="light"] .ovl-heroB.derived .meta{color:#5E5E5E}
.ovl-heroB.derived .hart.derived{background:var(--card);border-bottom:1px solid var(--edge)}
.ovl-heroB.derived .hart.derived .cred{color:var(--dim);background:none}
html[data-theme="light"] .ovl-heroB.derived .inner,html[data-theme="light"] .ovl-heroB.derived h1{color:#121212}
html[data-theme="light"] .ovl-heroB.derived .deck,html[data-theme="light"] .ovl-heroB.derived .hart.derived .cred{color:#5E5E5E}
/* REMOVED (MS-1799) · the light room's #F4F4F4 derived plate — dead since the rule below it and
   again since the #FFFFFF rule that finally wins. Measured: light computes rgb(255,255,255). */
html:not([data-theme="light"]) .ovl-heroB.derived .hart.derived{background:#111;border-color:rgba(255,255,255,.1)}
html:not([data-theme="light"]) .ovl-heroB.derived .hart.derived .cred{color:#A1A1A1}
/* MS-0910: no light-frame rule for derived thumbs — a derived thumb obeys the card rule, the dark plate in both rooms */
.heroband .mission{margin-bottom:18px}
.herogrid.feature{grid-template-columns:1.1fr 1fr;align-items:stretch}
.herogrid.feature .dayread{background:var(--card);border:1px solid var(--edge)}
html[data-theme="light"] .herogrid.feature .dayread{background:#FFFFFF;color:#121212;border-color:rgba(0,0,0,.1);--edge:rgba(0,0,0,.1);--plate-border:rgba(0,0,0,.1);--fg:#121212;--bg:#FFFFFF;--dim:#5E5E5E;--faint:#6C6C6C;--fill:#FFFFFF;--card:#FFFFFF;--plate-fg:#121212}   /* a WHITE card in the light room carries the light room's tokens — its badge, marker and edge read against white, not the plate (the element standard) */
.herogrid.feature .hv{display:flex;flex-direction:column;min-width:0}
.herogrid.feature .canvasarea{flex:0 0 auto;height:300px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:3px;background:#111}
.herogrid.feature .canvasarea .drthumb{display:block;width:100%;height:100%;aspect-ratio:auto;border:0;background:#111}
.herogrid.feature .canvasarea img{width:100%;height:100%;object-fit:contain;display:block}
@media (max-width:900px){.herogrid.feature{grid-template-columns:1fr}}
\n
/* ═══ TR-P1-01 · THE AS-OF CHIP (MS-0898) — one anatomy on every figure: DATA THROUGH · FETCHED · NEXT · verdict ═══ */
.asof{display:inline-flex;flex-wrap:wrap;gap:0 6px;align-items:baseline;font:700 9px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.asof b{font-weight:700;color:var(--fg)}
.asof .a-k{color:var(--faint)}
.cdoor .asof{display:flex;margin-top:6px;font-size:8px;letter-spacing:.1em}
.rband.surface .asof{margin-left:12px}
.exthrough .asof{display:inline-flex}

/* ═══ TR-P1-02 · THE CLASS CHIP ON THE CONSOLE TILES (MS-0898) — STATED · the evidence class · NO READ ═══ */
.cdoor .ccls{display:flex;flex-wrap:wrap;gap:0 6px;margin:4px 0 0}
.cdoor .ccls .cstat{font-size:8px;padding:2px 5px}
.cstat[data-status="STATED"],.cstat[data-status="NO READ"],.cstat[data-status="DERIVED"]{color:var(--dim);border:1px solid var(--edge);border-radius:3px;padding:2px 5px}

/* ═══ MS-0936 · THE HOME TOP SECTION, ONE ROW — and the eight circuit tops in the same shape ═══════════════════════════
   LEFT a card holding the text (white in the light room, dark in the dark room); RIGHT one dark box (both rooms) holding the
   visual — on home the day's read whole, words inside the box with the picture. Top edges aligned by the grid. */
.herogrid.feature.onerow{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:26px;align-items:start;padding-top:calc(26px * var(--scale,1))}
.herogrid.feature.onerow .mission{margin:0;padding:22px 24px 20px;border:1px solid var(--edge);border-radius:3px;background:var(--card);min-width:0}
.herogrid.feature.onerow .mission .intro{margin-bottom:0}
html[data-theme="light"] .herogrid.feature.onerow .mission{background:#FFFFFF;color:#121212;border-color:rgba(0,0,0,.1);--edge:rgba(0,0,0,.1);--fg:#121212;--bg:#FFFFFF;--dim:#5E5E5E;--faint:#6C6C6C;--card:#FFFFFF}
html:not([data-theme="light"]) .herogrid.feature.onerow .mission{background:#111;color:#EDEDED;border-color:rgba(255,255,255,.1)}
.herogrid.feature.onerow .dayread.darkhero{background:#111;color:#EDEDED;border:1px solid rgba(255,255,255,.1);border-radius:3px;overflow:hidden;--fg:#EDEDED;--dim:#A1A1A1;--faint:#6C6C6C;--edge:rgba(255,255,255,.1);--card:#111;--bg:#111}
html[data-theme="light"] .herogrid.feature.onerow .dayread.darkhero{background:#111;color:#EDEDED;border-color:rgba(255,255,255,.1);--fg:#EDEDED;--dim:#A1A1A1;--faint:#6C6C6C;--edge:rgba(255,255,255,.1);--card:#111;--bg:#111}
.herogrid.feature.onerow .dayread.darkhero .drart{display:block;height:260px;background:#111;border:0;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;overflow:hidden}
.herogrid.feature.onerow .dayread.darkhero .drart .drthumb{display:block;width:100%;height:100%;aspect-ratio:auto;border:0;background:#111}
.herogrid.feature.onerow .dayread.darkhero .drart img{width:100%;height:100%;object-fit:contain;display:block}
.herogrid.feature.onerow .dayread.darkhero .drbody{padding:16px 20px 18px}
.herogrid.feature.onerow .dayread.darkhero .hhed a{color:#EDEDED}
.herogrid.feature.onerow .dayread.darkhero .hdek{color:#A1A1A1}
.herogrid.feature.onerow .dayread.darkhero .orig-house{background:#EDEDED;color:#111}
@media (max-width:900px){.herogrid.feature.onerow{grid-template-columns:1fr}}
/* the circuit tops: the story card LEFT is a card (white in light, dark in dark); the visual RIGHT stays the dark plate */
.top .tslide{align-items:start}
.top .tslide .hl{padding:20px 22px 18px;border:1px solid var(--edge);border-radius:3px;background:var(--card);min-width:0;align-self:start}
html[data-theme="light"] .top .tslide .hl{background:#FFFFFF;color:#121212;border-color:rgba(0,0,0,.1);--edge:rgba(0,0,0,.1);--fg:#121212;--ink:#121212;--dim:#5E5E5E;--faint:#6C6C6C}
html:not([data-theme="light"]) .top .tslide .hl{background:#111;color:#EDEDED;border-color:rgba(255,255,255,.1)}
.top .tslide .hv{align-self:start}
.top .dots{bottom:-18px}

/* ═══ TR-P1-03 · THE JOBS BOARD on /status/ (MS-0898) — the registry, the sweep, the heartbeats, this box's crontab ═══ */
.jbstate{font:800 9px "JetBrains Mono",monospace;letter-spacing:.14em;padding:3px 7px;border:1px solid var(--edge);border-radius:3px;color:var(--dim)}
tr.jb-ok .jbstate{color:var(--s1)}
tr.jb-dead .jbstate,tr.jb-overdue .jbstate,tr.jb-no-heartbeat .jbstate{color:var(--fg)}
.jblog{list-style:none;margin:0;padding:0;font-size:11px;line-height:1.6}

/* ═══ SPEC 1.6 · INSTRUMENT FURNITURE — source · method · the METHOD link, under the face ═══ */
.iface .ifurn{margin-top:14px;padding-top:12px;border-top:1px solid var(--edge);display:flex;flex-direction:column;gap:8px}
.iface .ifurn p{margin:0;font-size:13px;line-height:1.55;color:var(--dim)}
.iface .ifk{font:700 9px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--fg);margin-right:6px}
.iface .ifmlink{font:700 10px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--s1);text-decoration:none;white-space:nowrap}
.iface .ifmlink:hover{text-decoration:underline}

/* ═══ MS-0922 THE HERO LAW + item 4 (TR-P1-06): a derived visual renders on the DARK plate in BOTH rooms — the analysis
   hero shows its dark (full-colour) render in the light room too; the featured render at the top of a page likewise ═══ */
/* MS-0922 THE HERO LAW IS RETIRED (Michael, MS-1802) — not narrowed, removed. His ROOM LAW is the live
   one: thumbnails are always dark, but in the CENTRE REGION heroes, charts and instruments FOLLOW THE
   ROOM, and analysis heroes are built in light AND dark versions. The white plate with its light-variant
   render IS that law being obeyed, so this was never a live law being overridden — it was a dead one
   nobody had retired. The room rules below stand on their own: light #FFFFFF + ssr-light, dark #111 +
   ssr-dark. Measured after removal: light rgb(255,255,255), dark rgb(17,17,17), header 955 — unmoved. */
.ovl-heroB.derived .hart.derived .cred,html[data-theme="light"] .ovl-heroB.derived .hart.derived .cred{color:#A1A1A1}
.ovl-heroB.derived .hart.derived .ssrfig .ssr-light,.top .canvasarea .ssrfig .ssr-light{display:none!important}
.ovl-heroB.derived .hart.derived .ssrfig .ssr-dark,.top .canvasarea .ssrfig .ssr-dark{display:block!important}

/* ═══ MS-1006 · THE FEATURE SYSTEM AND THE HOME PAGE (five items) ═════════════════════════════════════════════════════════
   §1 the feature is ONE CONNECTED ELEMENT: no gap, equal height, one shared outline — the grid wears the outline, the two
   halves lose theirs; the left card follows the room, the right visual is dark in both rooms. §2 ONE title style. §4 the
   wire is a full-width dark banner under the masthead with no label. §5 the top's rail bar is transparent, its button dark. */
.herogrid.feature.onerow{gap:0;align-items:stretch;border:1px solid var(--edge);border-radius:3px;overflow:hidden;padding-top:0;margin-top:calc(18px * var(--scale,1))}   /* MS-1006 §1: the outline hugs the unit — no empty strip inside it */
html[data-theme="light"] .herogrid.feature.onerow{border-color:rgba(0,0,0,.1)}
html:not([data-theme="light"]) .herogrid.feature.onerow{border-color:rgba(255,255,255,.1)}
.herogrid.feature.onerow .mission,html[data-theme="light"] .herogrid.feature.onerow .mission,html:not([data-theme="light"]) .herogrid.feature.onerow .mission{border:0;border-radius:0}
.herogrid.feature.onerow .dayread.darkhero,html[data-theme="light"] .herogrid.feature.onerow .dayread.darkhero{border:0;border-radius:0;display:flex;flex-direction:column;height:100%}
.herogrid.feature.onerow .dayread.darkhero .drart{flex:1 1 auto;min-height:260px;height:auto}
.herogrid.feature.onerow .mission h1,.top .hed{font:700 calc(32px * var(--scale,1))/1.05 Barlow,sans-serif;font-style:normal;letter-spacing:.005em;text-transform:uppercase;margin:0 0 12px}
.top .hed{margin:2px 0 0}
.top .tslide.on{gap:0;align-items:stretch;border:1px solid var(--edge);border-radius:3px;overflow:hidden}
html[data-theme="light"] .top .tslide.on{border-color:rgba(0,0,0,.1)}
html:not([data-theme="light"]) .top .tslide.on{border-color:rgba(255,255,255,.1)}
.top .tslide .hl,html[data-theme="light"] .top .tslide .hl,html:not([data-theme="light"]) .top .tslide .hl{border:0;border-radius:0;align-self:stretch}
.top .tslide .hv{align-self:stretch;background:#111;display:flex;flex-direction:column}
.top .canvasarea{flex:1 1 auto;height:auto;min-height:300px;border-radius:0}
.top .cap{padding:8px 12px 10px;color:#A1A1A1} .top .cap b{color:#EDEDED} .top .cap .sp{border-top-color:rgba(255,255,255,.1)}
.top .dots{bottom:-22px}
.wireband{margin:0 0 calc(18px * var(--scale,1));width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.wirestrip,html[data-theme="light"] .wirestrip{background:#0A0A0A;border:0;color:#EDEDED;padding:10px 24px}
.wirestrip .wt,html[data-theme="light"] .wirestrip .wt{color:#EDEDED}
.wirestrip .wirek{display:none}
.top .tbar,html[data-theme="light"] .top .tbar,.hubtop .tbar{background:transparent;border:0;padding:6px 0 6px 2px}
.top .tbtn,html[data-theme="light"] .top .tbtn,.hubtop .tbtn{background:#111;color:#EDEDED;border:1px solid rgba(255,255,255,.1);border-radius:3px}
.top .tbtn:hover{border-color:var(--s1);color:var(--s1)}
/* MS-1006 §4: the wire is a banner under the masthead — the section boundary that followed the old wire band (its rule and
   its 73px of rhythm) does not draw after a banner; the feature follows the banner directly */
.wireband + .secbound{display:none}

/* ── MS-1026 · THE SIX INDICATOR CARDS (spec 2.2): the composite leads, six cards three across on the dark plate, one reading each with
   its band, its band meter and its own as-of chip. Literal dark values by ruling — the plate is dark in both rooms (MS-0922). ── */
.indlead{display:grid;grid-template-columns:1fr 200px;gap:14px;align-items:center;background:#111;border:1px solid #2A2A2A;border-radius:3px;padding:12px 14px;margin:2px 0 10px;color:#E6E6E6}
.indlead .co-k{color:#9E9E9E;margin-top:0}
.indlead .co-read b{color:#FFF}.indlead .co-read span{color:#9E9E9E}.indlead .co-read em{border-color:#E6E6E6;color:#E6E6E6}
.indlead .il-chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 6px}
.indlead .ichip{border-color:#4A4A4A;color:#E6E6E6}
.indlead .asof{color:#9E9E9E}.indlead .asof b{color:#FFF}.indlead .asof .a-k{color:#777}
.indlead .co-note{color:#9E9E9E}
.indlead.none .co-read b{color:#6F6F6F}
.ind6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;background:#111;border:1px solid #2A2A2A;border-radius:3px;padding:8px;margin:4px 0 8px}
.indcard{background:#181818;border:1px solid #2A2A2A;border-radius:3px;padding:10px 12px 9px;min-width:0;color:#E6E6E6;display:flex;flex-direction:column;gap:4px}
.indcard .ic-k{font:700 9px "JetBrains Mono",monospace;letter-spacing:.13em;color:#9E9E9E;text-transform:uppercase}
.indcard .ic-v{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.indcard .ic-v b{font:800 30px/1 Barlow,sans-serif;letter-spacing:-.02em;color:#FFF}
.indcard .ic-v em{font:800 8.5px "JetBrains Mono",monospace;letter-spacing:.14em;font-style:normal;padding:3px 6px;border:1px solid #E6E6E6;color:#E6E6E6;border-radius:3px}
.indcard.none .ic-v b{color:#6F6F6F}.indcard.none .ic-v em{border-color:#6F6F6F;color:#9E9E9E}
.igauge{width:100%;max-width:150px;height:auto;display:block;margin:2px 0 0}
.igauge.big{max-width:200px;margin:0 auto}
.igauge .ig-t{font:700 var(--t-exhibit) "JetBrains Mono",monospace;fill:#9E9E9E}
.indcard .ic-foot{font:700 8.5px "JetBrains Mono",monospace;letter-spacing:.12em;color:#9E9E9E;text-transform:uppercase}
.indcard .ic-foot .ic-cls{color:#4FC3F7}.indcard[data-class="ledger"] .ic-foot .ic-cls{color:#E6E6E6}
.indcard .asof{color:#9E9E9E;font-size:8px;letter-spacing:.1em}.indcard .asof b{color:#E6E6E6}.indcard .asof .a-k{color:#777}
@media (max-width:760px){.ind6{grid-template-columns:repeat(2,minmax(0,1fr))}.indlead{grid-template-columns:1fr}.igauge.big{margin:0}}
@media (max-width:460px){.ind6{grid-template-columns:1fr}}

/* ── MS-1029 §6 · THE BOTTOM RAIL: RECEIPTS · USER AGENT · GRID as the top nav's own buttons (the `cat` control standard) ── */
.botnav{display:flex;align-items:center;gap:6px}
.botnav .cat{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;text-decoration:none}
@media(max-width:640px){.botnav{justify-content:center;flex-wrap:wrap}}

/* ── MS-1029 §7 · THE FAKE FLAG: part of a catalogued fake's picture, thumbnail and hero alike ── */
.img,.hart,.hthumb,.hfthumb,.drthumb,.dk-thumb{position:relative}
.fakeflag{position:absolute;left:8px;top:8px;z-index:3;display:inline-flex;align-items:center;gap:4px;font:800 var(--t-micro)/1 "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;padding:5px 8px;background:#E6E6E6;color:#111;border:1px solid #111;border-radius:3px;pointer-events:none}
.fakeflag.big{left:14px;top:14px;font-size:12px;padding:7px 11px}
.hart .fakeflag{left:auto;right:20px;top:auto;bottom:26px;z-index:2}   /* the band sits under the fixed masthead: the flag rides its lower-right corner, above the wash */

/* ── spec 2.4 · THE TAPE LENS: the current series to yesterday, one line per ticker rebased to 100 — SOXX in the house cyan, the members in
   gray (MS-0424: blue or grayscale on data marks); a selected or hovered line comes forward. The rank list reuses the slope's anatomy. ── */
.xtapewrap{display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);gap:18px;align-items:start}
@media(max-width:900px){.xtapewrap{grid-template-columns:1fr}}
.xtape polyline{stroke:var(--dim);stroke-width:1.1;opacity:.45;vector-effect:non-scaling-stroke;transition:opacity .15s,stroke-width .15s}
.xtape.soxx polyline{stroke:var(--s1);stroke-width:2.2;opacity:1}
.xtape.sel polyline,.xtape:hover polyline,.xtape:focus-visible polyline{stroke:var(--s1);stroke-width:2;opacity:1}
.xtape[data-ref]{cursor:pointer}
.xsl.soxx{fill:var(--s1);font-weight:700}
.xrank-row.down .xrank-bar i{background:var(--dim)}

/* spec 2.5 · the panel declaration in an instrument's furniture (mode · owner · evidence), the furniture's own voice */
.ifdecl{font:400 12px/1.5 Barlow,sans-serif;color:var(--dim);margin:4px 0 0}
.ifdecl .iflic{display:block;font:italic 400 11px/1.4 Barlow,sans-serif;color:var(--faint)}

/* ── V.1a (MS-1054) · the visual-spec covers: the thumbnail SVG inline in its frame; the hero band without a credit line ── */
.th-svg{display:block;width:100%;height:100%;background:#0A0A0A}
.th-svg svg{display:block;width:100%;height:100%}
.ovl-heroB.derived.v1 .hart.derived .ssrfig svg{max-height:none}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   MS-1074 (A) · LIGHT ON LIGHT, THE CHARTS INSIDE AN OPEN ITEM ONLY (Michael, 2026-09-11, final; MS-1072 drew the line).
   The plate rule (MS-0402/0427) stands everywhere else: house surfaces wear the dark plate in both rooms. In the light room
   the ONE surface that goes light is the chart inside an open item — an analysis item's, an instrument's, a board's hero,
   its exhibits, its figure blocks and the instrument's face block. The hero draws its light face (built from the same line
   of covers-v1.json, MS-1064); the instrument face reads in the room's ink on white. Thumbnails always dark (MS-1054).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .ovl-heroB.derived .hart.derived .ssrfig .ssr-light{display:block!important}
html[data-theme="light"] .ovl-heroB.derived .hart.derived .ssrfig .ssr-dark{display:none!important}
html[data-theme="light"] .ovl-heroB.derived .hart.derived{background:#FFFFFF;border-color:rgba(0,0,0,.1)}
html[data-theme="light"] .iface[data-instrument]{
  --plate:#FFFFFF;--plate-2:#F7F7F7;--plate-border:rgba(0,0,0,.12);--plate-fg:#121212;--plate-dim:#5E5E5E;--plate-faint:#6C6C6C;--plate-fill:#F2F2F2;
  --og:#0277BD;--card:#FFFFFF;--bg:#F7F7F7;--bg2:#F7F7F7;--fill:#F2F2F2;--fill-hi:#E8E8E8;--edge:rgba(0,0,0,.12);--edge2:rgba(0,0,0,.12);--line:1px solid rgba(0,0,0,.12);
  --fg:#121212;--dim:#5E5E5E;--faint:#6C6C6C;--s1:#0277BD;color-scheme:light;background:#FFFFFF;color:#121212}
html[data-theme="light"] .iface[data-instrument] .ssrfig .ssr-light{display:block}
html[data-theme="light"] .iface[data-instrument] .ssrfig .ssr-dark{display:none}

/* MS-1071 · THE WIRE TICKER'S HOUSE CHIP, DARK ROOM ONLY: the chip blends into the rail — dark fill, the rail's light-gray
   HOUSE — so the only thing that pops is the cyan ">_" prompt. The light room already reads right and is untouched. */
html:not([data-theme="light"]) .wirestrip .orig-house{background:#0A0A0A;color:#A1A1A1;border-color:#0A0A0A}
html:not([data-theme="light"]) .wirestrip .orig-house .og{color:#4FC3F7}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   MS-1060 §2 · ONE HIGHLIGHT HEIGHT (Michael, 2026-09-11). The slider at the top of every circuit is ONE fixed height —
   the reference is /economics/ on "The builders are spending faster than the business can pay" (272px × the scale, 354px
   at the standard). The left fills the way home does: the title at one standard size, spaced down to the subtext, the
   buttons beneath; a long title clamps to three lines and never grows the card. The picture on the right fills the
   height, drawn vertical (the mountain of columns, MS-1054 §3 — V.1b). Home is the exception for now.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.top .tslide.on{height:calc(272px * var(--scale,1))}
.top .tslide .hl{height:100%;box-sizing:border-box;overflow:hidden;gap:8px;padding:20px 22px 18px;justify-content:flex-start}
.top .hed{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.top .dek{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.top .tslide .hv{height:100%;min-height:0}
.top .canvasarea{flex:1 1 auto;min-height:0;height:auto}
.top .canvasarea .ssrfig,.top .canvasarea .ssrfig > div{height:100%}
.top .canvasarea .ssrfig svg{display:block;width:100%;height:100%}
.top .canvasarea img:not(.th){height:100%;object-fit:cover}
.top .cap{flex:0 0 auto}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   V.1c · THE KPI TILES (Michael MS-1063 §3; MS-1054 §4–5). One anatomy on the home console's eight tiles, the hub's base
   row and every circuit's chip strip: the TITLE big and readable, the NUMBER big with its unit beneath, the verb, and a
   cyan filled-area under the number filling the tile. Nothing else on the face — the stamps and chips live on the record.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.cdoor .cdoorlink,.dk-chip .cdoorlink{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:16px 16px 0;min-height:calc(150px * var(--scale,1));height:100%;box-sizing:border-box}
.cdoor .cc,.dk-chip .cc{display:block;font:800 calc(13px * var(--scale,1))/1.1 Barlow,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--fg);margin:0 0 6px}
.cdoor .cv,.dk-chip .cv{display:block;font:800 calc(40px * var(--scale,1))/1 Barlow,sans-serif;letter-spacing:-.02em;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.cdoor .cv i,.dk-chip .cv i{display:block;font:700 calc(10px * var(--scale,1))/1.2 "JetBrains Mono",monospace;font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:6px 0 0;white-space:normal}
.cdoor .cd,.dk-chip .cd{display:block;font:700 calc(10px * var(--scale,1))/1 "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--s1);margin:8px 0 0}
.cdoor .carea,.dk-chip .carea{display:block;width:calc(100% + 32px);margin:auto -16px 0;height:calc(52px * var(--scale,1));flex:0 0 auto;padding-top:10px;box-sizing:content-box}
.cdoor .cs,.cdoor .ccls,.cdoor .asof,.dk-chip .ccls,.dk-chip .asof,.cdoor .cspark,.dk-chip .cspark{display:none}
.dk-chip .cv{font-size:calc(30px * var(--scale,1))}
.dk-chip.none .cv{font:600 calc(13px * var(--scale,1))/1.3 Barlow,sans-serif;color:var(--plate-dim);white-space:normal;letter-spacing:0}
.dk-chip.none .cs{display:block;color:var(--plate-faint);font-size:var(--t-micro);line-height:1.3;margin-top:6px}
.cdoor .ctop{bottom:auto;top:calc(150px * var(--scale,1) - 24px);left:16px;right:16px}
.dk-chip .cdoorlink{padding:14px 14px 0;min-height:calc(140px * var(--scale,1))}

/* MS-1072 · THE EXPLORER IN THE LIGHT ROOM: cards, chips, controls and buttons are dark plates on the light page — the
   milestone cards, the year chips on the spine, the era chips and the lens bar's buttons already plate by rule; the
   filter bar's two selects and the Space buttons follow them. The page ground stays light. */
html[data-theme="light"] .tlbar select,html[data-theme="light"] .tlspace .vbtn{background:#111111;color:#EDEDED;border:1px solid rgba(255,255,255,.1)}
html[data-theme="light"] .tlspace .vbtn:hover{border-color:#4FC3F7;color:#4FC3F7}
.tlbar{margin-top:0}

/* MS-1086 · HOME'S CONSOLE IN ONE ROW: the eight circuit tiles eight across, the V.1c anatomy kept and scaled to the narrower
   tile; a number past four digits reads short (160K) — the exact figure is on the record. The first pass at a lighter home. */
.consoleband .consolegrid{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.consoleband .cdoor .cdoorlink{padding:12px 12px 0;min-height:calc(118px * var(--scale,1))}
.consoleband .cdoor .cc{font-size:calc(10.5px * var(--scale,1));letter-spacing:.05em;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.consoleband .cdoor .cv{font-size:calc(28px * var(--scale,1))}
.consoleband .cdoor .cv i{font-size:calc(8.5px * var(--scale,1));margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.consoleband .cdoor .cd{font-size:calc(8.5px * var(--scale,1));letter-spacing:.1em;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.consoleband .cdoor .carea{width:calc(100% + 24px);margin:auto -12px 0;height:calc(38px * var(--scale,1));padding-top:8px}
.consoleband .cdoor .ctop{top:calc(118px * var(--scale,1) - 22px);left:12px;right:12px;font-size:10px}
@media (max-width:1100px){.consoleband .consolegrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.consoleband .consolegrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   MS-1089 · RULINGS FROM THE WALK (Michael, 2026-09-11): the company consoles, the (D) list closed, home.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
/* §1a THE CONSOLE BANNER wears the cyan accent in BOTH rooms, a dark border, dark ink on cyan */
.cbanner.iface,html[data-theme="light"] .cbanner.iface{background:#4FC3F7;color:#0A0A0A;border:1px solid #111111;
  --plate:#4FC3F7;--plate-fg:#0A0A0A;--plate-dim:#1B2A33;--plate-faint:#2E3F4A;--plate-border:rgba(0,0,0,.28);--plate-fill:rgba(0,0,0,.08);
  --card:#4FC3F7;--fg:#0A0A0A;--dim:#1B2A33;--faint:#2E3F4A;--edge:rgba(0,0,0,.28);--edge2:rgba(0,0,0,.28);--s1:#0A0A0A;--og:#0A0A0A;color-scheme:light}
.cbanner.iface .igauge .ig-b1{stroke:rgba(0,0,0,.12)}.cbanner.iface .igauge .ig-b2{stroke:rgba(0,0,0,.2)}.cbanner.iface .igauge .ig-b3{stroke:rgba(0,0,0,.3)}
.cbanner.iface .igauge .ig-b4{stroke:rgba(0,0,0,.42)}.cbanner.iface .igauge .ig-b5{stroke:rgba(0,0,0,.56)}
.cbanner.iface .igauge .ig-tick{stroke:#0A0A0A}.cbanner.iface .igauge .ig-needle{stroke:#0A0A0A}.cbanner.iface .igauge .ig-dot{fill:#0A0A0A}.cbanner.iface .igauge .ig-hub{fill:#0A0A0A}
.cbanner.iface .igauge .ig-t{fill:#1B2A33}
.cbanner.iface .ichip,.cbanner.iface .ichip.dim{border-color:rgba(0,0,0,.45);color:#0A0A0A}
/* §1b THE COMPOSITE LEAD AND THE SIX INDICATOR CARDS go light in the light room — backgrounds and the light face of the ink; the meters as they are */
html[data-theme="light"] .indlead,html[data-theme="light"] .ind6{background:#FFFFFF;border-color:rgba(0,0,0,.12);color:#121212}
html[data-theme="light"] .indcard{background:#F7F7F7;border-color:rgba(0,0,0,.12);color:#121212}
html[data-theme="light"] :is(.indlead .co-k,.indlead .co-read span,.indlead .asof,.indlead .co-note,.indcard .ic-k,.indcard .ic-foot,.indcard .asof){color:#5E5E5E}
html[data-theme="light"] :is(.indlead .co-read b,.indlead .asof b,.indcard .ic-v b,.indcard .asof b){color:#121212}
html[data-theme="light"] :is(.indlead .co-read em,.indlead .ichip,.indcard .ic-v em){border-color:#121212;color:#121212}
html[data-theme="light"] :is(.indlead .asof .a-k,.indcard .asof .a-k){color:#8A8A8A}
html[data-theme="light"] :is(.indlead.none .co-read b,.indcard.none .ic-v b){color:#9E9E9E}
html[data-theme="light"] .indcard.none .ic-v em{border-color:#9E9E9E;color:#6C6C6C}
html[data-theme="light"] .indcard .ic-foot .ic-cls{color:#0277BD}html[data-theme="light"] .indcard[data-class="ledger"] .ic-foot .ic-cls{color:#121212}
html[data-theme="light"] :is(.indcard,.indlead) .igauge .ig-t{fill:#5E5E5E}
html[data-theme="light"] :is(.indcard,.indlead) .igauge .ig-b1{stroke:#E6E6E6}html[data-theme="light"] :is(.indcard,.indlead) .igauge .ig-b2{stroke:#D6D6D6}html[data-theme="light"] :is(.indcard,.indlead) .igauge .ig-b3{stroke:#C2C2C2}
html[data-theme="light"] :is(.indcard,.indlead) .igauge .ig-b4{stroke:#A8A8A8}html[data-theme="light"] :is(.indcard,.indlead) .igauge .ig-b5{stroke:#8A8A8A}
html[data-theme="light"] :is(.indcard,.indlead) .igauge .ig-tick{stroke:#121212}html[data-theme="light"] :is(.indcard,.indlead) .igauge .ig-needle{stroke:#0277BD}html[data-theme="light"] :is(.indcard,.indlead) .igauge .ig-dot{fill:#0277BD}html[data-theme="light"] :is(.indcard,.indlead) .igauge .ig-hub{fill:#121212}
/* §1c PRICE and FINANCIALS side by side */
.co-pricefin{align-items:start}.co-pricefin > div{min-width:0}
/* §1e LAYOFFS and SISTERS fifty-fifty — the record's card width says half now (rig/console_sections.py); the grid halves it */
/* §4b HOME: the four house items as a 2×2 QUAD of cards — the thumbnail on top (dark, as always), the text below following the room */
.reads.quad{grid-template-columns:1fr}
.reads.quad .hrows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.reads.quad .hrow{display:flex;flex-direction:column;padding:0;border:1px solid var(--edge);border-radius:3px;background:var(--card);overflow:hidden;align-items:stretch}
.reads.quad .hrow .hthumb{order:-1;width:100%;max-width:none;border:0;border-bottom:1px solid var(--edge);border-radius:0}
.reads.quad .hrow .hbody{padding:14px 16px 16px}
.reads.quad .hrow .elrail{right:12px;top:auto;bottom:14px}
@media (max-width:760px){.reads.quad .hrows{grid-template-columns:1fr}}

/* ═══ MS-1103 · THE REPORT DOORS on /research/ (3.6 ruled A): eight cards two per row, home's card shape — the circuit's name on the
   dark plate, the text below following the room; a real break beneath them; the analysis list under the break for now. ═══ */
/* ═══ MS-1131 · THE REPORTS PAGE AS A SKELETON INSTRUMENT: the title card (Industry's header anatomy), two rows of four tiles
   (the home console's V.1c anatomy at four across), the eight-tab panel (the navigator component). ═══ */
.rtitle{padding:calc(30px * var(--scale,1)) 0 14px}
.rtitle .tag{display:inline-block;font:700 10px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--fg);background:var(--fill);border:1px solid var(--edge);padding:4px 8px;text-decoration:none}
.rtitle h1{font:700 calc(44px * var(--scale,1))/.94 Barlow,sans-serif;letter-spacing:-.03em;text-transform:uppercase;margin:14px 0 0;color:var(--fg)}
.rtitle .rsub{font-size:calc(20px * var(--scale,1));line-height:1.4;color:var(--dim);margin-top:12px;max-width:900px}
.rtitle .meta{font:600 10.5px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--dim);margin-top:12px;text-transform:uppercase}
/* ═══ MS-1144 · THE WALKER LENS: Graphic Walker's renderer on the Explorer, our rail, our furniture ═══ */
.wklens .xrail select,.wklens .xrail input[type="date"]{width:100%;min-width:0;background:var(--card);color:var(--fg);border:1px solid var(--edge);border-radius:2px;padding:5px 6px;font:600 11px "JetBrains Mono",monospace}
.wklens .xrail .xrange{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.wklens .xrail .xrange .l{font:700 8.5px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--faint)}
.wklens .wk-note{font:400 11px/1.45 Barlow,sans-serif;color:var(--dim);margin:0 0 8px}
.wklens .wk-spec{font:700 9px "JetBrains Mono",monospace;letter-spacing:.1em}
.wklens .wk-json{margin:8px 0 0;max-height:260px;overflow:auto;font:400 9.5px/1.4 "JetBrains Mono",monospace;color:var(--dim);background:var(--fill);border:1px solid var(--edge);padding:8px;white-space:pre-wrap;word-break:break-all}
.wkmount{position:relative;min-height:440px;border:1px solid var(--edge);background:var(--card);padding:8px}
.wkmount .wkwait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font:700 10px/1.7 "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--faint)}
.wkmount.loading .wkwait::after{content:" · LOADING"}
.wkmount.on .wkwait{display:none}
.wkmount .wkerr{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font:700 10px/1.7 "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--s2,#FFB74D)}
.wkmount canvas,.wkmount svg{max-width:100%}
.wkfurn{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.wkfurn .asof{align-self:flex-start}
.wkfurn p{margin:0;font:400 12px/1.5 Barlow,sans-serif;color:var(--dim)}
.wkfurn .ifk{font:700 9px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--fg);margin-right:6px}
.wkfurn .ifmlink{font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--s1);text-decoration:none;margin-left:6px}
html[data-theme="light"] .wkmount{background:#FFFFFF}
/* ═══ MS-1158 · PORTED WHOLE: a thecatch page inside the site's frame — its own styles rule inside; the frame only boxes it ═══ */
.ported-whole{margin:12px 0;border:1px solid var(--edge);background:#FFFFFF;color:#121212;padding:16px;overflow-x:auto;border-radius:3px}
.ported-whole img{max-width:100%;height:auto}
/* a ported page keeps its position:fixed scenes INSIDE its wrapper (a transformed ancestor is their containing block) and its own stacking — nothing of it may cover the site's frame or tabs */
.ported-whole .ported-page{position:relative;transform:translateZ(0);isolation:isolate;overflow:hidden;min-height:0}
.ported-whole .was-link{border-bottom:1px dotted currentColor;cursor:default}
.ported-whole .ts-sub{margin-top:28px;padding-top:18px;border-top:2px solid rgba(0,0,0,.15)}
.ported-whole .ported-wait{margin:0;font:700 10px "JetBrains Mono",monospace;letter-spacing:.12em;color:#6C6C6C;padding:18px 0;text-align:center}
.ported-whole .ts-sub-h{font:700 11px "JetBrains Mono",monospace;letter-spacing:.16em;color:#55524A;margin:0 0 12px}
/* ═══ MS-1168 · THE TOP SECTION, VERSION 2 (Industry only, a test): words on the left — the title, the count line, one card of three
   highlight chips on the white — and a house-art rotator on the right, the height of the left column. The KPI tiles beneath and
   everything below are untouched. Dark room by the law: the card takes the dark plate; the painting is the painting. ═══ */
.top.top-v2{margin-top:calc(18px * var(--scale,1) - 35px)}   /* MS-1188: 35 px closer to the nav */
.top.top-v2 .ptitle{font-size:calc(50px * var(--scale,1));line-height:.92;margin:0 0 12px}   /* Michael 19:44: the section a quarter shorter */
.top.top-v2 .tv2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:stretch}
/* MS-1188 · the tagline strip: the width of the card, the collapse button at its right end; dark plate in both rooms (the inverted strip is the one-line alternative) */
.tv2-tag{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#1f2226;color:#FFFFFF;border-radius:4px;padding:11px 16px;margin:0 0 12px;font:700 12px/1 "JetBrains Mono",monospace;letter-spacing:3px;text-transform:uppercase;white-space:nowrap;overflow:hidden}
.tv2-tag .tv2-tagline{overflow:hidden;text-overflow:ellipsis}
.tv2-tag .sl{color:#4fc3f7;font-weight:800}
.tv2-tag .tbtn{flex:0 0 auto;width:24px;height:24px;border:1px solid rgba(255,255,255,.35);color:#4fc3f7;background:transparent;font:700 15px/1 "JetBrains Mono",monospace;border-radius:2px}
.tv2-tag .tbtn:hover{border-color:#4fc3f7}
html[data-theme="dark"] .tv2-tag{border:1px solid #333333}
.top.top-v2 .tv2-l{display:flex;flex-direction:column;min-width:0}
.top.top-v2 .tbar{display:none}
.tv2-card{background:#FFFFFF;color:#121212;border:1px solid rgba(0,0,0,.12);border-radius:6px;box-shadow:0 8px 28px rgba(0,0,0,.14);padding:2px 24px;flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between}
html[data-theme="dark"] .tv2-card,.tv2-card.dark{background:var(--card);color:var(--fg);border-color:var(--edge);box-shadow:0 8px 28px rgba(0,0,0,.45)}
.tv2-chip{display:block;padding:16px 0;border-bottom:1px solid rgba(0,0,0,.12);text-decoration:none;color:inherit}
html[data-theme="dark"] .tv2-chip{border-bottom-color:var(--edge)}
.tv2-chip:last-child{border-bottom:0}
.tv2-chip .htop{margin-bottom:3px;font:600 var(--t-micro) "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase}
.tv2-chip .hbadge{border:1px solid currentColor;padding:2px 7px;opacity:.85}
.tv2-chip .hhed{font:italic 800 calc(21px * var(--scale,1))/1.05 "Barlow Condensed","Arial Narrow",sans-serif;line-height:1.05;text-transform:uppercase;margin:0 0 2px;transition:color .15s}
.tv2-chip:hover .hhed{color:var(--s1)}
.tv2-chip .hdek{font-size:calc(12.5px * var(--scale,1));line-height:1.35;color:#55524A;max-width:none;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
html[data-theme="dark"] .tv2-chip .hdek{color:var(--dim)}
.tv2-chip .hchips{margin-top:7px;display:flex;flex-wrap:wrap;gap:6px;font:700 var(--t-micro) "JetBrains Mono",monospace;letter-spacing:.1em}
.tv2-chip .hchip{border:1px solid currentColor;padding:1px 7px} .tv2-chip .hchip.orig{border-style:dashed;opacity:.8}
.tv2-art{position:relative;min-height:300px;border-radius:6px;overflow:hidden;box-shadow:0 10px 32px rgba(0,0,0,.28);background:#111}
.tv2-slide{position:absolute;inset:0;opacity:0;transition:opacity var(--tv2-fade,1200ms) ease;margin:0}
.tv2-slide.on{opacity:1}
.tv2-slide img{display:block;width:100%;height:100%;object-fit:cover}
.tv2-slide figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:baseline;padding:34px 14px 18px;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.62) 100%);color:#EDEDED;font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;font-size:var(--t-micro)}
.tv2-slide figcaption .no{color:#FFFFFF} .tv2-slide figcaption .who{color:rgba(237,237,237,.75)}
.tv2-bars{position:absolute;left:14px;right:14px;bottom:0;display:flex;gap:6px;z-index:2}
.tv2-bars button{flex:1 1 0;height:24px;border:0;padding:0;background:transparent;cursor:pointer;position:relative;overflow:hidden;border-radius:0}   /* a 24 px hit area (bus 1324); the drawn line stays 3 px */
.tv2-bars button::before{content:"";position:absolute;left:0;right:0;bottom:8px;height:3px;background:rgba(255,255,255,.28);border-radius:2px}
.tv2-bars button .fill{position:absolute;left:0;right:0;bottom:8px;height:3px;background:#4FC3F7;transform:scaleX(0);transform-origin:left;border-radius:2px}
.tv2-bars button.on::before{background:rgba(255,255,255,.4)}
.top.top-v2.closed .tv2-card,.top.top-v2.closed .tv2-art{display:none}   /* closed: the strip and its button stay, the card and the painting go */
.top.top-v2.closed .tv2-tag{margin-bottom:0}
@media (max-width:900px){.top.top-v2 .tv2{grid-template-columns:1fr}.tv2-art{min-height:300px;order:2}.top.top-v2 .tv2-l{order:1}}
/* ═══ MS-1162 / MS-1173 · THE FILTER RAIL IN THE LIGHT ROOM (Reports + the eight circuits, light room only — the dark room is untouched):
   the header strip stays black with its cyan title and grey sub-label; everything under it sits on a white card; rows dark, counts
   grey, dividers light; empty rows faded; light checkboxes with a cyan-blue accent; the selected row a pale cyan wash with a 3 px
   cyan bar on its left edge; hover a whisper of grey. ═══ */
html[data-theme="light"] .hfacets .plate.hgrp{background:#FFFFFF;border:1px solid #d9d9d9;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.04);overflow:hidden;color-scheme:light}
html[data-theme="light"] .hfacets .plate-h{background:#111111;border-bottom:1px solid #333333}
html[data-theme="light"] .hfacets .plate-h h3{color:#4FC3F7} html[data-theme="light"] .hfacets .plate-h .sub{color:#6F6F6F}
html[data-theme="light"] .hfacets .opt{color:#1a1a1a;border-bottom:1px solid #ececec;border-left:3px solid transparent;background:transparent}
html[data-theme="light"] .hfacets .opt .l{color:#1a1a1a} html[data-theme="light"] .hfacets .opt .n{color:#8a8a8a}
html[data-theme="light"] .hfacets .opt:hover{background:#f6f6f6;color:#1a1a1a}
html[data-theme="light"] .hfacets .opt input{accent-color:#0a7fb5;color-scheme:light}
html[data-theme="light"] .hfacets .opt:has(input:checked){background:#eef8fd;border-left-color:#4fc3f7}
html[data-theme="light"] .hfacets .opt:has(input:checked) .l{color:#1a1a1a} html[data-theme="light"] .hfacets .opt:has(input:checked) .n{color:#0a7fb5}
html[data-theme="light"] .hfacets .opt.zero .l,html[data-theme="light"] .hfacets .opt.zero .n{color:#b5b5b5}
html[data-theme="light"] .hfacets .opt .why{color:#9a9a9a}
html[data-theme="light"] .hfacets .opt.fake:has(input:checked){border-left-color:#1a1a1a;background:#f3f3f3} html[data-theme="light"] .hfacets .opt.fake:has(input:checked) .n{color:#1a1a1a} html[data-theme="light"] .hfacets .opt.fake input{accent-color:#1a1a1a}
html[data-theme="light"] .hfacets .vgrp{border-bottom:1px solid #ececec} html[data-theme="light"] .hfacets .vgl{color:#8a8a8a}
html[data-theme="light"] .hfacets .hsearch{background:#FFFFFF;border:1px solid #d9d9d9;color:#1a1a1a} html[data-theme="light"] .hfacets .hsearch::placeholder{color:#8a8a8a}
/* MS-1140 · the analysis list under a SMALL section label, not a headline */
.hsec.small .hsec-h{border-bottom:1px dashed var(--edge);padding-bottom:8px}
.hsec.small .hsec-h h2{font:700 11px "JetBrains Mono",monospace;letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
/* Phase 4 (c) · a LINKS pane: the reference view's six AI Index dimensions as cards into the hub's views */
.ivlinks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 6px}
.ivlink{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--edge);background:var(--fill);color:var(--fg);text-decoration:none;border-radius:3px;min-width:0}
.ivlink:hover{border-color:var(--s1)}
.ivlink .ivl-k{font:var(--hcond);font-size:calc(18px * var(--scale,1));line-height:1;text-transform:uppercase}
.ivlink .ivl-q{font:400 13px/1.45 Barlow,sans-serif;color:var(--dim)}
.ivlink .ivl-f{font:700 9px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--faint)}
.ivlink .ivl-go{margin-top:auto;font:700 10px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--s1)}
.cseat .cseat-more{margin:12px 0 0;font:700 10px "JetBrains Mono",monospace;letter-spacing:.1em} .cseat .cseat-more a{color:var(--s1);text-decoration:none}
@media (max-width:900px){.ivlinks{grid-template-columns:1fr}}
.consoleband.rtiles .consolegrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.consoleband.rtiles .cdoor .cdoorlink{min-height:calc(136px * var(--scale,1))}
.consoleband.rtiles .cdoor .cv{font-size:calc(32px * var(--scale,1))}
.consoleband.rtiles .cdoor .ctop{top:calc(136px * var(--scale,1) - 22px)}
.rpanel{margin-top:14px}
.rpanel .rband.surface{margin:0;border:0;padding:0}
@media (max-width:900px){.consoleband.rtiles .consolegrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rdoors-sec{margin:calc(18px * var(--scale,1)) 0 0}
.hsec-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.hsec-h h2{font:var(--hcond);font-size:calc(30px * var(--scale,1));line-height:1;text-transform:uppercase;margin:0}
.hsec-h .hsec-k{font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--faint)}
.rdoors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.rcard{display:flex;flex-direction:column;border:1px solid var(--edge);border-radius:3px;background:var(--card);overflow:hidden;min-width:0}
.rcard .rplate{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;aspect-ratio:630/330;background:#111111;color:#E8EDF2;text-decoration:none;border-bottom:1px solid var(--edge)}
.rcard .rplate .rk{font:700 11px "JetBrains Mono",monospace;letter-spacing:.18em;color:#4FC3F7}
.rcard .rplate .rn{font:800 calc(56px * var(--scale,1))/1 Barlow,sans-serif;letter-spacing:-.01em;text-transform:uppercase;color:#E8EDF2}
.rcard .rbody{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px}
.rcard .rbody .dk{font:700 8.5px "JetBrains Mono",monospace;letter-spacing:.16em;color:var(--faint)}
.rcard .rbody h3{font:var(--hcond);font-size:calc(22px * var(--scale,1));line-height:1.05;text-transform:uppercase;margin:0}
.rcard .rbody h3 a{color:var(--fg);text-decoration:none} .rcard .rbody h3 a:hover{text-decoration:underline;text-decoration-thickness:2px}
.rcard .rbody .rdek{margin:0;color:var(--dim);font-size:calc(13px * var(--scale,1));line-height:1.45}
.rcard .rbody .rmeta{font:700 9px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--faint);margin-top:4px}
.rcard .rbody .rgo{align-self:flex-start;margin-top:6px;font:700 10px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--s1);text-decoration:none;border:1px solid var(--edge);border-radius:2px;padding:6px 10px}
.rcard .rbody .rgo:hover{border-color:var(--s1)}
.hbreak{height:1px;background:var(--edge);margin:calc(64px * var(--scale,1)) 0 calc(48px * var(--scale,1))}
@media (max-width:760px){.rdoors{grid-template-columns:1fr}}

/* ═══ MS-1108 · THE TAB NAVIGATOR — an instrument's views as tabs across the top of the centre region, the panes beneath,
   the scope rail beside (the Layoffs Board pattern). Tabs in the site's theme, not pills: the snaptabs' shape. ═══ */
.ivnav-wrap{margin:calc(18px * var(--scale,1)) 0}
.ivtabs{display:flex;flex-wrap:wrap;gap:1px;border:1px solid var(--edge);background:var(--edge)}
.ivtabs .ivtab{flex:1 1 auto;min-width:96px;background:var(--card);border:0;color:var(--dim);padding:11px 12px;cursor:pointer;text-align:center;font:700 10px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase}
.ivtabs .ivtab:hover{color:var(--fg)}
.ivtabs .ivtab.on{background:var(--fill);color:var(--fg);box-shadow:inset 0 -3px 0 var(--s1)}
.ivbody{display:block;border:1px solid var(--edge);border-top:0;background:var(--card);padding:16px}   /* MS-1127 §3: the rail left the side; the charts take the width */
.ivpanes{min-width:0}
.ivscope{font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--dim);margin:0 0 12px;padding:8px 10px;border:1px solid var(--edge);border-radius:3px}
.ivscope b{color:var(--s1)}
.ivq{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;margin:0 0 12px}
.ivq .ivk{font:var(--hcond);font-size:calc(20px * var(--scale,1));line-height:1;text-transform:uppercase;color:var(--fg)}
.ivq .ivquestion{color:var(--dim);font-size:calc(13px * var(--scale,1))}
.ivq .ivscopes{margin-left:auto;font:700 8.5px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--faint)}
.ivpane .exhibit{margin:0}
.ivfind{margin:10px 0 0;color:var(--dim);font-size:13px;line-height:1.5}
.ivrail{border-left:1px solid var(--edge);padding-left:16px;min-width:0}
.ivrail .ivr-h{font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--faint);margin:0 0 8px}
.ivrail a{display:block;color:var(--fg);text-decoration:none;font:600 12px/1.3 Barlow,sans-serif;padding:4px 6px;border-radius:2px}
.ivrail a:hover{background:var(--fill)}
.ivrail a.on{background:var(--fill);color:var(--s1);box-shadow:inset 3px 0 0 var(--s1)}
.ivrail details{border-top:1px solid var(--edge);padding:4px 0}
.ivrail summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;font:700 11px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--dim);padding:6px 0}
.ivrail summary::-webkit-details-marker{display:none}
.ivrail summary::before{content:"▸";color:var(--faint);font-size:10px} .ivrail details[open] summary::before{content:"▾"}
.ivrail summary a{display:inline;padding:0;font:inherit;color:inherit} .ivrail summary a.on{background:none;box-shadow:none;color:var(--s1)}
.ivrail .ivr-n{margin-left:auto;font:700 9px "JetBrains Mono",monospace;color:var(--faint)}
.ivrail .ivr-firms{display:flex;flex-wrap:wrap;gap:4px;padding:2px 0 8px}
.ivrail .ivr-firms a{font:700 10px "JetBrains Mono",monospace;letter-spacing:.06em;padding:3px 6px;border:1px solid var(--edge)}
.ivrail .ivr-layer.cmp summary{color:var(--faint)}
.ivrail .ivr-vlist a{font-size:11.5px;padding:3px 6px;display:flex;gap:6px} .ivrail .ivr-vlist a .ivr-n{margin-left:auto}
.ivrail .ivr-note{margin:10px 0 0;font-size:10.5px;line-height:1.4;color:var(--faint)}
@media (max-width:900px){.ivrail{border-left:0;border-top:1px solid var(--edge);padding:12px 0 0}}
/* ═══ MS-1127 §3 · THE SCOPE STRIP: a horizontal row of drop-downs across the top of the navigator — THE INDUSTRY · L1..L5 · THE MARKET ·
   SUPPLY · DEMAND VERTICALS. One menu open at a time (details[name]); the menu floats under its handle; a handle whose menu holds the
   selected scope carries .has; the selected link carries .on as it did on the rail. ═══ */
.ivstrip{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px;margin:0 0 8px;padding:8px 10px;border:1px solid var(--edge);background:var(--card);position:relative;z-index:5}
.ivstrip .ivs-h{align-self:center;font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--faint);margin-right:4px}
.ivstrip .ivs-all{display:flex;align-items:center;font:700 11px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--fg);text-decoration:none;padding:6px 10px;border:1px solid var(--edge);border-radius:2px}
.ivstrip .ivs-all:hover{background:var(--fill)} .ivstrip .ivs-all.on{background:var(--fill);color:var(--s1);box-shadow:inset 0 -3px 0 var(--s1)}
.ivdrop{position:relative}
.ivdrop summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;height:100%;padding:6px 10px;border:1px solid var(--edge);border-radius:2px;color:var(--dim);font:600 11px/1.2 Barlow,sans-serif;white-space:nowrap}
.ivdrop summary::-webkit-details-marker{display:none}
.ivdrop summary b{font:700 11px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--fg)}
.ivdrop summary .ivs-name{color:var(--dim)} .ivdrop.cmp summary b{color:var(--faint)}
.ivdrop summary .ivr-n{font:700 9px "JetBrains Mono",monospace;color:var(--faint)}
.ivdrop summary::after{content:"▾";color:var(--faint);font-size:10px} .ivdrop[open] summary::after{content:"▴"}
.ivdrop summary:hover,.ivdrop[open] summary{background:var(--fill)} .ivdrop.has summary{border-color:var(--s1);box-shadow:inset 0 -3px 0 var(--s1)} .ivdrop.has summary b{color:var(--s1)}
.ivdrop .ivmenu{position:absolute;top:calc(100% + 4px);left:0;z-index:30;min-width:280px;max-width:min(560px,80vw);padding:8px;border:1px solid var(--edge);background:var(--card);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.ivdrop .ivmenu a{display:block;color:var(--fg);text-decoration:none;font:600 12px/1.3 Barlow,sans-serif;padding:4px 6px;border-radius:2px}
.ivdrop .ivmenu a:hover{background:var(--fill)} .ivdrop .ivmenu a.on{background:var(--fill);color:var(--s1);box-shadow:inset 3px 0 0 var(--s1)}
.ivdrop .ivmenu .ivr-whole{font:700 10.5px "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--dim);border-bottom:1px solid var(--edge);margin-bottom:6px;padding-bottom:6px}
.ivdrop .ivmenu .ivr-firms{display:flex;flex-wrap:wrap;gap:4px}
.ivdrop .ivmenu .ivr-firms a{font:700 10px "JetBrains Mono",monospace;letter-spacing:.06em;padding:3px 6px;border:1px solid var(--edge)}
.ivdrop .ivmenu .ivr-vlist{columns:2;column-gap:8px} .ivdrop .ivmenu .ivr-vlist a{display:flex;gap:6px;font-size:11.5px;padding:3px 6px;break-inside:avoid} .ivdrop .ivmenu .ivr-vlist a .ivr-n{margin-left:auto;font:700 9px "JetBrains Mono",monospace;color:var(--faint)}
.ivbody .ivr-note{margin:12px 0 0;font-size:10.5px;line-height:1.4;color:var(--faint)}
/* MS-1127 §2 · SOURCE / METHOD / PANEL as three cards: a prominent title, the body at reading size */
.iface .ifurn.ifcards{display:grid;grid-template-columns:repeat(var(--ifn,3),minmax(0,1fr));gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--edge)}
.iface .ifurn.ifcards[data-n="2"]{--ifn:2}
.iface .ifcard{border:1px solid var(--edge);background:var(--fill);padding:12px 14px;min-width:0}
.iface .ifcard h4.ifk{margin:0 0 8px;font:700 11px "JetBrains Mono",monospace;letter-spacing:.16em;color:var(--s1)}
.iface .ifcard p{margin:0;font:400 14px/1.55 Barlow,sans-serif;color:var(--fg)}
.iface .ifcard.ifdecl p{font:400 13px/1.55 Barlow,sans-serif;color:var(--dim)}
.iface .ifcard .ifmlink{font:700 10.5px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--s1);text-decoration:none;white-space:nowrap}
@media (max-width:900px){.iface .ifurn.ifcards{grid-template-columns:1fr}}
/* MS-1127 §1 · the instrument header stands above its hero painting */
.ovl-heroB.derived.ihead .inner{padding-bottom:16px}
main.article .ovl-heroB.derived.ihead .hart.derived{border-top:1px solid var(--edge);border-bottom:0}
.ovl-body .ovl-heroB.derived.ihead .inner{padding-top:26px}

/* ═══ MS-1114 · THE COMPLEX'S BOARD: each layer a collapsible section, one open at a time; the matrix kept ═══ */
.cxlayers{margin:calc(18px * var(--scale,1)) 0}
.cxl{border:1px solid var(--edge);border-radius:3px;margin:0 0 8px;background:var(--card)}
.cxl summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:12px;padding:12px 14px}
.cxl summary::-webkit-details-marker{display:none}
.cxl .cx-n{font:800 11px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--s1);min-width:26px}
.cxl .cx-name{font:var(--hcond);font-size:calc(20px * var(--scale,1));line-height:1;text-transform:uppercase;color:var(--fg)}
.cxl .cx-needle{margin-left:auto;font:600 10px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--dim);white-space:nowrap}
.cxl .cx-needle b{color:var(--fg)} .cxl .f-hot{color:#E57373;font-weight:800} .cxl .f-mid{color:#FFB74D;font-weight:700}
.cxl .cx-ctl{width:22px;height:22px;border:1px solid var(--edge);border-radius:2px;display:inline-flex;align-items:center;justify-content:center;font:700 14px/1 "JetBrains Mono",monospace;color:var(--s1)}
.cxl .cx-ctl::before{content:"+"} .cxl[open] .cx-ctl::before{content:"−"}
.cxl .cx-test{margin:0 14px 10px;color:var(--dim);font-size:13px}
.cxl .cxboard{margin:0 14px 14px;width:calc(100% - 28px)}
.cxboard th{font:700 var(--t-micro) "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--faint);text-align:center;padding:0 6px 6px}
.cxboard th.l{text-align:left}
.cxboard td{text-align:center;font:700 12px "JetBrains Mono",monospace;padding:7px 6px}
.cxboard td.tk,.cxboard td.nm,.cxboard td.cv{text-align:left} .cxboard td.nm{font:500 12.5px Barlow,sans-serif}
.cxboard td.tk a{color:var(--s1);text-decoration:none} .cxboard td.tk a:hover{text-decoration:underline}
.cxboard td.cv{font:700 var(--t-micro) "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.cxboard td.hot{color:#E57373} .cxboard td.mid{color:#FFB74D} .cxboard td.cool{color:var(--dim)} .cxboard td.na{color:var(--faint)}
.cxboard td.comp{font-weight:800;border-left:1px solid var(--edge)}
.cxboard td.filed{text-decoration:underline dotted}
.cxl.cmp .cx-name{color:var(--dim)}
.cx-key{font:600 10px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--faint);margin:10px 0 0;line-height:1.7} .cx-key b{color:var(--dim)}
.cx-law{font-size:11px;color:var(--faint);margin:6px 0 0}

/* MS-1119 (g) · THE VERTICAL STATES inside Industry's VERTICALS pane */
.vstate{border:1px solid var(--edge);border-radius:3px;padding:16px 18px;margin:0 0 16px;background:var(--card)}
.vstate .vs-k{font:700 9px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--s1)}
.vstate h3{font:var(--hcond);font-size:calc(26px * var(--scale,1));line-height:1;text-transform:uppercase;margin:6px 0 8px}
.vstate .vs-headline{margin:0 0 4px;font-weight:600;font-size:15px} .vstate .vs-lede{margin:0 0 12px;color:var(--dim);font-size:13.5px;line-height:1.5}
.vstate .vs-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:0 0 14px}
.vstate .vs-kpi{border:1px solid var(--edge);border-radius:3px;padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.vstate .vs-kpi b{font:800 22px/1 Barlow,sans-serif;color:var(--fg)} .vstate .vs-kpi span{font-size:11.5px;color:var(--dim)} .vstate .vs-kpi i{font:400 9.5px "JetBrains Mono",monospace;color:var(--faint);font-style:normal}
.vstate .vs-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 12px}
.vstate .vs-players{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.vstate .vs-player{font:600 11.5px Barlow,sans-serif;border:1px solid var(--edge);border-radius:3px;padding:3px 8px;color:var(--dim)} .vstate .vs-player.tracked{color:var(--fg);border-color:var(--s1)} .vstate .vs-player em{font:700 9.5px "JetBrains Mono",monospace;font-style:normal;color:var(--s1)}
.vstate .vs-chain{margin:6px 0 0;padding-left:18px;font-size:12.5px;color:var(--dim);line-height:1.45} .vstate .vs-chain b{color:var(--fg)}
.vstate .vs-signals{list-style:none;margin:6px 0 12px;padding:0;font-size:12.5px;line-height:1.5} .vstate .vs-when{font:700 9px "JetBrains Mono",monospace;color:var(--faint);margin-right:6px}
.vstate .vs-sources{margin:6px 0 12px;padding-left:18px;font-size:11.5px;line-height:1.5} .vstate .vs-sources a{color:var(--s1)}
.vstate .vs-note{font-style:italic;color:var(--dim);font-size:12.5px}
.vstate .vs-addr{font:700 9px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--faint);margin:8px 0 0} .vstate .vs-addr a{color:var(--faint)}
@media (max-width:760px){.vstate .vs-two{grid-template-columns:1fr}}

/* ═══ MS-1108 (3) · THE INSTRUMENT CONSOLE at /research/instruments/: the sections as the top tabs, the seats beneath, one surface each ═══ */
.console-page .hphead{padding-bottom:12px}
.cseat .cseat-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 6px}
.cseat .cseat-k{font:700 9px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--s1)}
.cseat.waiting .cseat-k{color:var(--faint)}
.cseat .cseat-go{margin-left:auto;font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--s1);text-decoration:none;border:1px solid var(--edge);border-radius:2px;padding:5px 9px}
.cseat .cseat-t{font:var(--hcond);font-size:calc(30px * var(--scale,1));line-height:1;text-transform:uppercase;margin:0 0 12px}
.cseat .cseat-what{font-size:14px;line-height:1.55;color:var(--dim);max-width:70ch}
.cseat.held .ivnav-wrap{margin-top:8px}
.hconsole-door{margin:0 0 14px;font:600 11px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--dim)} .hconsole-door a{color:var(--s1);text-decoration:none;font-weight:800} .hconsole-door a:hover{text-decoration:underline}

/* ═══ MS-1108 (3.3) · the console's tables and essays ═══ */
.cledger{margin:calc(16px * var(--scale,1)) 0}
.cxledger td.rfl{font-weight:800} .cxledger .cstat[data-status="FIRM"]{color:var(--fg)}
.edboard td.rce{font-size:var(--t-micro);color:var(--dim)} .edboard .edst{font:800 8.5px "JetBrains Mono",monospace;letter-spacing:.12em;padding:2px 6px;border:1px solid var(--edge);border-radius:3px}
.edboard .edst-confirmed{color:var(--fg);border-color:var(--fg)} .edboard .edst-expected{color:var(--dim)} .edboard .edst-estimated{color:var(--faint)}
.fuledger td{vertical-align:top} .fuledger .fu-claim b{display:block;font:600 13px Barlow,sans-serif;color:var(--fg)} .fuledger .fu-kill{display:block;font:700 9px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--faint);margin-top:4px}
.fuledger .fu-read{font-size:12px;color:var(--dim)} .fuledger .fu-read i{display:block;font-style:normal;font:700 8.5px "JetBrains Mono",monospace;color:var(--s1);margin-top:3px}
.fuledger .fu-pill{display:inline-block;font:800 8.5px "JetBrains Mono",monospace;letter-spacing:.12em;padding:3px 7px;border:1px solid var(--edge);border-radius:3px}
.fuledger .fu-p-trig{color:#E57373;border-color:#E57373} .fuledger .fu-p-watch{color:#FFB74D;border-color:#FFB74D} .fuledger .fu-p-stand{color:var(--dim)}
.fuledger .fu-d{display:block;font:600 9px "JetBrains Mono",monospace;color:var(--faint);margin-top:4px}
/* Phase 4 · 4.1 · the receipts ledger in the falsifier ledger's anatomy */
.rcledger .fu-p-rev{color:#4FC3F7;border-color:#4FC3F7} .rcledger .fu-p-pend{color:#FFB74D;border-color:#FFB74D}
.rcledger .rc-d{font:700 10px "JetBrains Mono",monospace;white-space:nowrap;color:var(--dim)} .rcledger .rc-call b{display:block;font:600 13px Barlow,sans-serif;color:var(--fg)}
.rcledger .rc-note{font-size:12px;line-height:1.5;color:var(--dim);max-width:52ch} .rcledger .rc-acc a{font:700 10px "JetBrains Mono",monospace;color:var(--s1);text-decoration:none} .rcledger .rc-none{font:600 9px "JetBrains Mono",monospace;color:var(--faint)}
.cseat.essay .essay-body{max-width:78ch;font-size:15px;line-height:1.6} .cseat.essay .essay-body h2{font:var(--hcond);font-size:calc(24px * var(--scale,1));text-transform:uppercase;margin:24px 0 8px}
.cseat.essay .essay-body table{width:100%;border-collapse:collapse;font-size:12.5px;margin:12px 0} .cseat.essay .essay-body th,.cseat.essay .essay-body td{text-align:left;padding:7px 8px;border-top:1px solid var(--edge);vertical-align:top}
.cseat.essay .essay-body .kicker,.cseat.essay .essay-body .eyebrow{font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--s1)}
.cseat.essay .essay-body .band-charcoal,.cseat.essay .essay-body .band-gray{background:var(--fill);padding:12px 14px;border-radius:3px;margin:12px 0}
.cseat.essay .essay-body a{color:var(--s1)}

/* MS-1200 (Michael, 2026-09-11) · THE GAP AND THE WIDTH below the top section, all eight circuits. The browser's 26px top margin,
   the panel's 18px top margin and 22px top padding all go: the circuit bar sits a breath under the tiles. The panel's SIDE padding
   goes to 0 so the bar, the rail's left edge and the list's right edge line up with the tiles and the painting above — the inset
   was the mock's panel card, which has had no border or fill since LAW E; nothing else used it. */
.browser{margin-top:0}
.browser .panel,.browser>.panel{margin-top:0;padding:6px 0 var(--pad)}
.top.top-v2{margin-bottom:0}                       /* the top section's 18px tail was the third slice of the dead band */
.browser .hindex>.pcentre{padding-left:0;padding-right:0}   /* the centre column's 18px inset put the list's right edge 18px inside the bar's */
/* MS-1198: a four-line title (The Room of Engineers) started above the masthead's bottom edge — the band's inner block began at
   70px while the fixed masthead is --hdr-h tall. The inner block now starts below the masthead; short titles still sit at the
   band's foot (justify-content:flex-end, min-height 440px), so the park piece and every other article do not move. */
main.article .ovl-heroB .inner{padding-top:calc(var(--hdr-h,139px) + 24px)}

/* MS-1232 (Michael) · THE STORY PANEL'S OWN HEADER STRIP: the rail boxes' plate header, verbatim — STORIES on the left, the live count
   (crows.js finds [data-count] anywhere in the index) moved into the strip on the right, so the empty band above the first row goes.
   MS-1234 · INNER ROOM: the strip spans the panel's full width; the rows sit 24px in from both borders, their dividers the inner width. */
.browser .hindex>.pcentre{padding:0}
.browser .pcentre .pstories{border-radius:3px 3px 0 0}
.browser .hindex .pcentre .pstories .sub.hcount{margin:0 0 0 auto}   /* the count's old toolbar margin (40px below) must not follow it into the strip */
.browser .pcentre .prest>.hresults{padding:8px 24px 16px}
.browser .pcentre .htoolbar:has(.hpills:empty){display:none}
.browser .pcentre .pitem{padding:16px 24px}
html[data-theme="light"] .browser .pcentre .pstories{background:#111111;border-bottom:1px solid #333333}
html[data-theme="light"] .browser .pcentre .pstories h3{color:#4FC3F7} html[data-theme="light"] .browser .pcentre .pstories .sub{color:#6F6F6F}

/* MS-1199 §5 · THE SOURCE-NAME PLATE: a captured item's picture is its source's name in the site's type on a dark plate with its circuit's
   colour — no favicon, no logo, no proxy. Dark in both rooms, like the derived thumbnails (the circuit tokens are bright). */
.img.splate{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;background:#111111;color:#EDEDED;padding:14px 16px 14px 22px;overflow:hidden;aspect-ratio:630/330;box-sizing:border-box}
.img.splate .sp-bar{position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--pc)}
.img.splate .sp-src{font:italic 800 clamp(20px,2.4vw,34px)/1 'Barlow Condensed','Barlow',sans-serif;text-transform:uppercase;letter-spacing:.01em;color:#FFFFFF;overflow-wrap:anywhere}
/* MS-1934: on the narrower related-reads card a long source name broke mid-word (DATACENTERDYNAMI / CS.COM) — the plate's name is
   set smaller there only, so it fits whole; the front's plates keep their size. overflow-wrap stays as the last resort. */
.related .img.splate .sp-src{font-size:clamp(17px,1.75vw,25px)}
/* MS-1934: a LONG source name (18+ characters, e.g. datacenterdynamics.com) is set smaller wherever the plate is drawn — front rows
   included — so it never breaks mid-word; short names keep the plate's full size. */
.img.splate .sp-src.sp-long{font-size:clamp(17px,1.75vw,25px)}
.img.splate .sp-k{font:700 9px 'JetBrains Mono',monospace;letter-spacing:.16em;color:var(--pc)}
.hthumb .img.splate{width:100%;height:100%}
.ovl-heroB.splate .hart.splate-hart{background:#111111}
.ovl-heroB.splate .hart.splate-hart .img.splate{position:absolute;inset:0;aspect-ratio:auto;padding:0 40px 150px 48px;justify-content:flex-end}
.ovl-heroB.splate .hart.splate-hart .sp-bar{width:14px}
.ovl-heroB.splate .hart.splate-hart .sp-src{font-size:clamp(34px,5vw,64px)}

/* MS-1227 §4 · FAKES IS A FLAG: the red indicator on every card a fake shows as, and the strip's FAKES toggle (the mock of MS-1235) */
.fk-ind{display:inline-flex;align-items:center;gap:5px;background:#D7263D;color:#FFFFFF;font:800 10px 'JetBrains Mono',monospace;letter-spacing:.14em;padding:3px 7px;margin-right:8px;border-radius:2px;line-height:1}
.hrow.is-fake{box-shadow:inset 3px 0 0 #D7263D}
.hrow.is-fake .hthumb{outline:2px solid #D7263D;outline-offset:-2px}
.hchip.orig-fake,.hrow.is-fake .hchip.orig-fake{background:#D7263D;color:#FFFFFF;border-color:#D7263D}
.pbtn.pfakes{border:1px solid #D7263D;color:#D7263D;background:transparent;margin-left:8px}
.pbtn.pfakes b{background:#D7263D;color:#FFFFFF;padding:0 5px;margin-left:6px;border-radius:2px}
.pbtn.pfakes[aria-pressed="true"]{background:#D7263D;color:#FFFFFF}
.pbtn.pfakes[aria-pressed="true"] b{background:#FFFFFF;color:#D7263D}
.pbtn.pfakes.zero{opacity:.45;cursor:default}
.tv2-chip .fk-ind{margin-right:6px}
/* MS-1227 §4: the ⚠ FAKE origin chip is one red wherever it sits — rows, cards, the strip's identity chip (it overrides the older neutral rules) */
.orig.orig-fake,.hchip.orig-fake,.pstrip .orig-fake,.pid .orig-fake,html[data-theme="light"] .orig.orig-fake{background:#D7263D;color:#FFFFFF;border-color:#D7263D}
.rchip.fk{background:#D7263D;color:#FFFFFF;border-color:#D7263D;margin-right:6px}   /* MS-1227 §4: the flag in search results */

/* MS-1229 · THE OPEN TEXTBOOK AS ONE BOOK: the navigator as a book — the cover and the spine (the chapters, numbered, under their
   parts) in a column on the left; the open chapter on the right, its machine live. The navigator still reads only .ivtab. */
.ivnav-wrap.ivbook{display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:auto 1fr;gap:0;border:1px solid var(--edge);align-items:start}
.ivnav-wrap.ivbook>.bk-cover{grid-column:1;grid-row:1}
.ivnav-wrap.ivbook>.ivtabs{grid-column:1;grid-row:2;display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;border:0;border-top:1px solid var(--edge);max-height:78vh;overflow:auto;padding:6px 0;position:sticky;top:calc(var(--hdr-h,139px) + 8px)}
.ivnav-wrap.ivbook>.ivbody{grid-column:2;grid-row:1 / span 2;border-left:1px solid var(--edge);min-width:0}
.ivnav-wrap.ivbook .ivpart{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:12px 16px 6px}
.ivnav-wrap.ivbook .ivtab{display:flex;gap:10px;align-items:baseline;justify-content:flex-start;text-align:left;width:100%;padding:7px 16px;border:0;border-left:3px solid transparent;border-radius:0;background:transparent;color:var(--fg);font:500 14px/1.3 Barlow,system-ui,sans-serif;text-transform:none;letter-spacing:0}
.ivnav-wrap.ivbook .ivtab i{font:700 11px 'JetBrains Mono',monospace;font-style:normal;color:var(--faint);min-width:22px}
.ivnav-wrap.ivbook .ivtab.on{border-left-color:#4FC3F7;background:rgba(79,195,247,.08)}
.ivnav-wrap.ivbook .bk-cover{position:relative;aspect-ratio:3/4;background:#000 center/cover no-repeat;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;color:#FFFFFF}
.ivnav-wrap.ivbook .bk-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85),transparent 60%)}
.ivnav-wrap.ivbook .bk-cover *{position:relative;z-index:1}
.ivnav-wrap.ivbook .bk-cover .k{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.16em;color:#4FC3F7}
.ivnav-wrap.ivbook .bk-cover h3{font:italic 800 30px/1 'Barlow Condensed',sans-serif;text-transform:uppercase;margin:8px 0 6px;color:#FFFFFF}
.ivnav-wrap.ivbook .bk-cover p{font-size:13px;opacity:.85;margin:0;color:#FFFFFF}
.ivnav-wrap.ivbook .ivpane{padding:18px 22px}
@media (max-width:1000px){.ivnav-wrap.ivbook{grid-template-columns:1fr}.ivnav-wrap.ivbook>.ivtabs{position:static;max-height:40vh}.ivnav-wrap.ivbook>.ivbody{grid-column:1;grid-row:auto;border-left:0}.ivnav-wrap.ivbook .bk-cover{aspect-ratio:16/9}}

/* MS-1253 · A FROZEN REPORT EDITION: its date on its face, the rule stated, each figure a dated snapshot linking to its live home */
.edition .ed-k{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.16em;color:var(--dim)}
.edition .ed-rule{font:600 11px 'JetBrains Mono',monospace;letter-spacing:.06em;color:var(--dim);border-left:3px solid var(--s1);padding:6px 10px;margin:10px 0 18px}
.edition .edfig{border:1px solid var(--edge);padding:12px 14px;margin:14px 0}
.edition .edfig figcaption{display:flex;gap:12px;align-items:baseline;justify-content:space-between}
.edition .ef-asof,.edition .ef-src{font:700 9.5px 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--faint)}
.edition .ef-v{font:800 34px/1 'Barlow Condensed',sans-serif;margin:8px 0}.edition .ef-v span{font-size:14px;margin-left:4px;color:var(--dim)}
.edition .edfig table{width:100%;border-collapse:collapse;margin:6px 0}.edition .edfig td{border-bottom:1px solid var(--edge);padding:5px 4px}.edition .edfig td.v{text-align:right;font-variant-numeric:tabular-nums}
.edition .ef-live{display:inline-block;margin-top:6px;font:700 10.5px 'JetBrains Mono',monospace;letter-spacing:.1em;color:var(--s1)}
.edition .ed-list{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:20px;border-top:1px solid var(--edge);padding-top:12px}
.edition .ed-lk{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.14em;color:var(--dim)}.edition .ed-l{font:700 11px 'JetBrains Mono',monospace;padding:4px 8px;border:1px solid var(--edge)}.edition .ed-l.on{border-color:var(--s1);color:var(--s1)}

/* ═══ MS-1282 · THE HOME PAGE, REWORKED — light room: light-grey ground, white surfaces, black text, deep-blue first door; dark room:
   near-black ground, dark-grey surfaces, white text, cyan first door. Thumbnails stay dark in both; the paintings show as painted. ═══ */
body:has(.homeband){--hg:#ECECEC;--hs:#FFFFFF;--hi:#111111;--hl:rgba(0,0,0,.14);--hgo:#0B4F9C;--hgoi:#FFFFFF;--hsl:#0B4F9C;--hd:#55524A;background:var(--hg)}
html[data-theme="dark"] body:has(.homeband){--hg:#0A0A0A;--hs:#1B1D20;--hi:#F2F2F2;--hl:rgba(255,255,255,.12);--hgo:#4FC3F7;--hgoi:#0A0A0A;--hsl:#4FC3F7;--hd:rgba(255,255,255,.62)}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body:has(.homeband){--hg:#0A0A0A;--hs:#1B1D20;--hi:#F2F2F2;--hl:rgba(255,255,255,.12);--hgo:#4FC3F7;--hgoi:#0A0A0A;--hsl:#4FC3F7;--hd:rgba(255,255,255,.62)}}
.homeband{padding-top:calc(22px * var(--scale,1))}
.home-title{font:italic 800 clamp(30px,5.55vw,84px)/.94 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:-.005em;color:var(--hi);margin:0 0 18px}
.home-title span{display:block;white-space:nowrap}
.home-doors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 18px}
.home-doors a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 12px;background:var(--hs);color:var(--hi);border:1px solid var(--hl);border-radius:4px;font:700 12px/1.1 "JetBrains Mono",monospace;letter-spacing:.12em;text-decoration:none;text-align:center}
.home-doors a:hover{border-color:var(--hgo)}
.home-doors a.primary{background:var(--hgo);color:var(--hgoi);border-color:var(--hgo)}
.home-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:stretch}
.home-card{background:var(--hs);color:var(--hi);border:1px solid var(--hl);border-radius:6px;padding:22px 26px;display:flex;flex-direction:column;justify-content:space-between}
.home-card .intro{margin:0;max-width:none;color:var(--hi);font-size:calc(16px * var(--scale,1));line-height:1.62}
.home-card .intro i{color:var(--hi)} .home-card .intro .beat{color:var(--hi);border-bottom-color:var(--hsl)}
.home-tag{border-top:1px solid var(--hl);margin-top:20px;padding-top:14px;font:700 12px/1.2 "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--hi)}
.home-tag .sl{color:var(--hsl);font-weight:800}
.home-art.tv2-art{min-height:340px;border-radius:6px}
/* three ways in, slim: a dark thumbnail, then the label, the name, one line and the way in */
.doors-slim{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sdoor{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:center;background:var(--hs);color:var(--hi);border:1px solid var(--hl);border-radius:4px;padding:12px;text-decoration:none}
.sdoor:hover{border-color:var(--hgo)}
.sthumb{display:block;aspect-ratio:630/330;background:#111;border-radius:2px;overflow:hidden}
.sthumb img,.sthumb .th{width:100%;height:100%;object-fit:cover;display:block}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:12px;height:100%;box-sizing:border-box;background:#111;background-image:linear-gradient(rgba(79,195,247,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(79,195,247,.18) 1px,transparent 1px);background-size:12px 12px}
.sgrid i{background:#4FC3F7;opacity:.75;border-radius:1px}
.sbody{display:flex;flex-direction:column;gap:3px;min-width:0}
.snum{font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--hd)}
.sname{font:italic 800 22px/1 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase}
.sline{font-size:12.5px;line-height:1.35;color:var(--hd);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.sgo{font:700 10px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--hgo)}
/* today on the runner: one row of four smaller cards (2 × 2 on a tablet, one column on a phone) */
.reads.row4{grid-template-columns:1fr}
.reads.row4 .hrows{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.reads.row4 .hrow{display:flex;flex-direction:column;padding:0;border:1px solid var(--hl);border-radius:3px;background:var(--hs);color:var(--hi);overflow:hidden;align-items:stretch}
.reads.row4 .hrow .hthumb{order:-1;width:100%;max-width:none;border:0;border-bottom:1px solid var(--hl);border-radius:0}
.reads.row4 .hrow .hbody{padding:10px 12px 12px;background:var(--hs);color:var(--hi)}
.reads.row4 .hrow .hhed{font-size:calc(17px * var(--scale,1));line-height:1.05}
.reads.row4 .hrow .hdek{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;color:var(--hd)}
.reads.row4 .hrow .elrail{right:10px;top:auto;bottom:10px}
/* from the instruments: one featured instrument under a short switch */
.home-snap{flex-wrap:nowrap;overflow-x:auto}
.home-snap button{min-width:0}
.snapband .snapbody{background:var(--hs);border:1px solid var(--hl);border-top:0}
.home-inst{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:center;color:var(--hi)}
.home-inst .snapvis{display:block;background:#111;border-radius:3px;overflow:hidden;aspect-ratio:630/330}
.home-inst .snapvis img,.home-inst .snapvis .th{width:100%;height:100%;object-fit:contain;display:block}
.home-inst h4{color:var(--hi)} .home-inst .snapfind{color:var(--hd);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* screening room: one feature on the left, four more on the right */
.homeroom .vside .vth{background:var(--hs);color:var(--hi);border-bottom:1px solid var(--hl)}
.homeroom .vside .vth .vm{color:var(--hd)}
.homeroom .vimg{background-color:#111}
@media (max-width:1100px){.reads.row4 .hrows{grid-template-columns:repeat(2,minmax(0,1fr))}.doors-slim{grid-template-columns:1fr}}
@media (max-width:760px){.home-doors{grid-template-columns:repeat(2,minmax(0,1fr))}.home-pair,.home-inst{grid-template-columns:1fr}.home-title span{white-space:normal}.home-art.tv2-art{min-height:240px}}
@media (max-width:640px){.reads.row4 .hrows{grid-template-columns:1fr}}
/* MS-1282 walk fixes: the instrument's way in reads in both rooms; a tab's reading stays on one line */
.home-inst .snapgo{color:var(--hi);border:1px solid var(--hl);padding:7px 10px;display:inline-block;text-decoration:none}
.home-inst .snapgo:hover{border-color:var(--hgo);color:var(--hgo)}
.home-snap button b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:17px}
/* MS-1288 · the agent chip's prompt, beside it, in the chip's own colours in both rooms */
.agentprompt{font:600 var(--t-micro) "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--dim);text-decoration:none;white-space:nowrap;padding:5px 2px}
.agentprompt:hover{color:var(--fg)}

/* ═══ MS-1291 · THE TIMELINE, SIDEWAYS — light: white stage, black line, white buttons (chosen = black); dark: near-black stage,
   light-grey line, dark-grey buttons (chosen = white). Both: the strip and the cards are dark plates, epochs wear a cyan top edge,
   year tags are black with white text, era names grey with a cyan mark, the chosen card outlined in cyan. ═══ */
.tls{--ts-stage:#FFFFFF;--ts-line:#111111;--ts-btn:#FFFFFF;--ts-btni:#111111;--ts-bd:rgba(0,0,0,.18);--ts-on:#111111;--ts-oni:#FFFFFF;--ts-rec:#FFFFFF;--ts-reci:#111111;--ts-yr:#0B4F9C;--ts-dim:#55524A;margin:0 0 8px}
html[data-theme="dark"] .tls{--ts-stage:#0A0A0A;--ts-line:#BDBDBD;--ts-btn:#26292D;--ts-btni:#EDEDED;--ts-bd:rgba(255,255,255,.12);--ts-on:#F2F2F2;--ts-oni:#0A0A0A;--ts-rec:#1B1D20;--ts-reci:#F2F2F2;--ts-yr:#4FC3F7;--ts-dim:rgba(255,255,255,.62)}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .tls{--ts-stage:#0A0A0A;--ts-line:#BDBDBD;--ts-btn:#26292D;--ts-btni:#EDEDED;--ts-bd:rgba(255,255,255,.12);--ts-on:#F2F2F2;--ts-oni:#0A0A0A;--ts-rec:#1B1D20;--ts-reci:#F2F2F2;--ts-yr:#4FC3F7;--ts-dim:rgba(255,255,255,.62)}}
.tls-strip{position:relative;height:62px;background:#111;border-radius:4px;overflow:hidden;cursor:pointer;touch-action:none;user-select:none}
.tls-band{position:absolute;top:0;bottom:16px;background:rgba(255,255,255,.035)} .tls-band.alt{background:rgba(79,195,247,.07)}
.tls-tick{position:absolute;bottom:16px;width:2px;height:16px;background:#FFFFFF;opacity:.8;transform:translateX(-1px)}
.tls-tick.ep{height:40px;background:#4FC3F7;opacity:1}
.tls-dec{position:absolute;bottom:1px;font:600 9.5px "JetBrains Mono",monospace;color:rgba(255,255,255,.55);transform:translateX(-50%)}
.tls-win{position:absolute;top:2px;bottom:2px;border:2px solid #4FC3F7;background:rgba(79,195,247,.14);border-radius:3px;pointer-events:none;transition:left .25s,width .25s}
.tls-ctl{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:10px 0}
.tls-eras,.tls-filt,.tls-nav{display:flex;flex-wrap:wrap;gap:4px}
.tls-b{height:30px;padding:0 10px;background:var(--ts-btn);color:var(--ts-btni);border:1px solid var(--ts-bd);border-radius:4px;font:600 12px Barlow,sans-serif;cursor:pointer;white-space:nowrap;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.tls-b.on{background:var(--ts-on);color:var(--ts-oni);border-color:transparent}
.tls-stage{position:relative;height:440px;background:var(--ts-stage);border:1px solid var(--ts-bd);border-radius:4px;overflow:hidden;cursor:grab;touch-action:pan-y;outline:none}
.tls-stage:focus-visible{box-shadow:0 0 0 2px #4FC3F7}
.tls-track{position:absolute;left:0;top:0;bottom:0;will-change:transform;transition:transform .35s ease}
.tls-line{position:absolute;left:0;right:0;top:220px;height:2px;background:var(--ts-line)}
.tls-eranames{position:absolute;left:0;top:8px;height:20px;width:100%;pointer-events:none;z-index:2;transition:transform .35s ease}
.tls-en{position:absolute;top:0;font:700 10px "JetBrains Mono",monospace;letter-spacing:.12em;color:#8A8A8A;white-space:nowrap;padding-left:10px;border-left:3px solid #4FC3F7}
.tls-card{position:absolute;width:160px;display:flex;flex-direction:column;gap:6px;text-align:left;background:#15171A;color:#FFFFFF;border:1px solid rgba(255,255,255,.10);border-radius:4px;padding:10px 11px;cursor:pointer;font:inherit}
.tls-card.up{bottom:238px} .tls-card.dn{top:238px}
.tls-card.ep{border-top:3px solid #4FC3F7}
.tls-card:hover{border-color:rgba(79,195,247,.6)} .tls-card.sel{outline:2px solid #4FC3F7;outline-offset:1px}
.tls-ct{font:700 13.5px/1.2 Barlow,sans-serif;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.tls-cm{display:flex;gap:5px;flex-wrap:wrap}
.tls-tier,.tls-tag{font:700 8.5px "JetBrains Mono",monospace;letter-spacing:.1em;color:rgba(255,255,255,.6)}
.tls .stampC{font:700 8.5px "JetBrains Mono",monospace;letter-spacing:.1em;border:1px solid currentColor;padding:1px 5px;color:#FFB74D}
.tls-yr{position:absolute;top:211px;transform:translateX(-50%);background:#000;color:#FFF;font:700 10px "JetBrains Mono",monospace;padding:2px 6px;border-radius:2px;white-space:nowrap}
.tls-card[hidden],.tls-yr[hidden]{display:none}
.tls-record{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;margin-top:12px;background:var(--ts-rec);color:var(--ts-reci);border:1px solid var(--ts-bd);border-radius:4px;padding:18px 22px}
.tls-record[hidden]{display:none}
.tls-rbig{font:italic 800 64px/1 "Barlow Condensed","Arial Narrow",sans-serif;color:var(--ts-yr)}
.tls-rk{font:700 10px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--ts-dim);text-transform:uppercase}
.tls-record h3{font:italic 800 28px/1.05 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;margin:4px 0 8px;color:var(--ts-reci)}
.tls-rline{font:600 15px/1.45 Barlow,sans-serif;margin:0 0 6px} .tls-rwhat,.tls-rc{font:400 14px/1.55 Barlow,sans-serif;color:var(--ts-dim);margin:0 0 8px}
.tls-rtags{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0} .tls-record .tls-tier,.tls-record .tls-tag{color:var(--ts-dim)}
.tls-rr{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin:8px 0} .tls-rr a{color:var(--ts-yr);font:600 13px Barlow,sans-serif;text-decoration:none}
.tls-rnav{display:flex;gap:6px;align-items:center;margin-top:10px} .tls-plate{margin-left:auto;font:600 10px "JetBrains Mono",monospace;color:var(--ts-dim)}
.tls-foot{display:flex;justify-content:flex-end;margin-top:10px} .tls-open{font:700 12px "JetBrains Mono",monospace;letter-spacing:.12em;color:inherit;text-decoration:none;border:1px solid var(--ts-bd);padding:9px 14px;border-radius:4px;background:var(--ts-btn);color:var(--ts-btni)}
@media (max-width:760px){.tls-record{grid-template-columns:1fr}.tls-rbig{font-size:46px}.tls-ctl{gap:8px}}
/* MS-1291 · the Three Ways In Explorer card's picture is the Walker: cyan bars on the dark plate */
.swalk{display:flex;align-items:flex-end;gap:6px;height:100%;padding:10px 12px;box-sizing:border-box;background:#111}
.swalk i{flex:1;background:#4FC3F7;opacity:.8;border-radius:1px 1px 0 0}
.tlpage .tlhead{margin:calc(18px * var(--scale,1)) 0 14px} .tlpage .tlhead h1{font:italic 800 calc(44px * var(--scale,1))/1 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;margin:0 0 6px}
.tlpage .tlsub{font:600 11px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
/* ═══ MS-1299 · THE STRIP, BIGGER — 150 px, one dark plate in both rooms; era bands alternate two dark greys and carry their
   number and name; the current era is brighter with its name in cyan; three tick heights; big decade labels; a grabbable window ═══ */
.tls-strip{height:150px;background:#101112}
.tls-band{position:absolute;top:0;bottom:30px;background:#17191C;border:0;border-right:1px solid #0B0C0D;padding:8px 8px 0;margin:0;color:#BDBDBD;text-align:left;cursor:pointer;overflow:hidden;display:flex;align-items:flex-start;gap:6px;font:inherit;z-index:1}
.tls-band.alt{background:#1F2226}
.tls-band:hover,.tls-band:focus-visible{background:#2A2E33;outline:none}
.tls-band.cur{background:#30353B}
.tls-band.cur .tls-bnm,.tls-band.cur .tls-bn{color:#4FC3F7}
.tls-bn{font:700 12px "JetBrains Mono",monospace;letter-spacing:.06em;color:#9A9A9A;flex:0 0 auto}
.tls-bnm{font:700 12.5px/1.2 Barlow,sans-serif;color:#BDBDBD;white-space:nowrap}
.tls-band.narrow .tls-bnm{display:none}
.tls-tick{bottom:30px;z-index:2;pointer-events:none}
.tls-tick.ep{height:92px;width:3px;background:#4FC3F7;opacity:1}
.tls-tick.mi{height:58px;width:2px;background:#FFFFFF;opacity:.9}
.tls-tick.ev{height:30px;width:2px;background:#FFFFFF;opacity:.45}
.tls-dec{bottom:4px;font:700 18px "JetBrains Mono",monospace;color:#BDBDBD;z-index:2}
.tls-win{top:2px;bottom:2px;border:4px solid #4FC3F7;background:rgba(79,195,247,.16);border-radius:4px;z-index:3;pointer-events:auto;cursor:grab;min-width:14px}
.tls-win:active{cursor:grabbing}
.tls-win::after{content:'';position:absolute;left:50%;top:50%;width:4px;height:26px;transform:translate(-50%,-50%);border-left:2px solid #4FC3F7;border-right:2px solid #4FC3F7;opacity:.8}
.tls-eras{display:none}
@media (max-width:760px){.tls-strip{height:120px}.tls-tick.ep{height:70px}.tls-tick.mi{height:44px}.tls-tick.ev{height:22px}.tls-dec{font-size:13px}.tls-band{bottom:24px}.tls-tick{bottom:24px}}

/* ═══ THE WORD MARK · "THE SCAN" (Michael's pick from the desk's logo studies). The mark does not change: the >_ glyph and
   TOKEN RUNNER stand as they did, ink = the room's ink. One thin cyan line with a soft glow passes over the name — about 2.5 s a
   pass, then rest, then again — on LARGE marks only (the site masthead, and any mark set as a banner with .scan). Small marks
   stay still. CSS only: the line is a pseudo-element that moves by transform, so nothing shifts; reduced motion = no line. ═══ */
/* THE CUT RETIRES: the sliced band through the letters (contract.css, MS-0416's --my/--mw mask) comes off the wordmark */
.lock .word{-webkit-mask-image:none!important;mask-image:none!important}
.mast .lock .word,.lock.scan .word{position:relative}
.mast .lock .word::after,.lock.scan .word::after{content:'';position:absolute;top:-10%;bottom:-10%;left:0;right:0;pointer-events:none;
  background:linear-gradient(90deg,transparent calc(50% - 1.5px),#4FC3F7 calc(50% - 1px),#4FC3F7 calc(50% + 1px),transparent calc(50% + 1.5px));
  filter:drop-shadow(0 0 5px rgba(79,195,247,.9)) drop-shadow(0 0 12px rgba(79,195,247,.45));
  transform:translateX(-50%);opacity:0;animation:tr-scan 7s ease-in-out infinite;will-change:transform,opacity}
@keyframes tr-scan{0%{transform:translateX(-50%);opacity:0}5%{opacity:1}31%{opacity:1}36%{transform:translateX(50%);opacity:0}100%{transform:translateX(50%);opacity:0}}
@media (prefers-reduced-motion: reduce){.mast .lock .word::after,.lock.scan .word::after{animation:none;opacity:0;display:none}}

/* ═══ THE FIRMS RAIL, THE COMPANY MARKS AND THE WAY BACK TO THE CONSOLE ═══════════════════════════════════════════════
   A firm's name is a link wherever it appears; where the desk holds no console the name stands plain and says why. */
.lfr{margin:18px 0 6px}
.lfr .lfr-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.lfr .lfr-k{font:700 10px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--ink)}
.lfr .lfr-n{font:400 10px "JetBrains Mono",monospace;letter-spacing:.04em;color:var(--faint)}
.lfr .lfr-gap{font:400 12px Barlow,system-ui,sans-serif;color:var(--faint)}
.lfrtab td.nm a{color:var(--s1);text-decoration:none}
.lfrtab td.nm a:hover{text-decoration:underline}
.nocon{color:var(--faint);border-bottom:1px dotted var(--hair);cursor:help}
.cxboard td.tk a{color:var(--s1);text-decoration:none}
.cxboard td.tk a:hover{text-decoration:underline}
.ivr-pair{display:inline-flex;align-items:center;gap:2px}
.ivr-co{font:700 10px "JetBrains Mono",monospace;color:var(--faint);text-decoration:none;padding:0 3px;border-radius:3px}
.ivr-co:hover{color:var(--s1);background:var(--fill)}
.inconsole{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:10px 0 0}
.inconsole a{font:700 10px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--s1);text-decoration:none;border:1px solid var(--edge);border-radius:3px;padding:6px 10px}
.inconsole a:hover{border-color:var(--s1)}
.inconsole .inc-w{font:400 11px Barlow,system-ui,sans-serif;color:var(--faint)}

/* ONE ROW OF NAVIGATION AT A TIME: the scope strip folds behind its own line; the tabs stay the standing row. */
.ivfold{margin:0 0 8px;border:1px solid var(--edge);background:var(--card)}
.ivfold>.ivfold-s{display:flex;align-items:center;gap:10px;padding:9px 11px;cursor:pointer;list-style:none}
.ivfold>.ivfold-s::-webkit-details-marker{display:none}
.ivfold>.ivfold-s b{font:700 11px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--fg)}
.ivfold>.ivfold-s .ivfold-w{font:400 11px Barlow,system-ui,sans-serif;color:var(--faint);margin-left:auto}
.ivfold>.ivfold-s:hover{background:var(--fill)}
.ivfold[open]>.ivfold-s{border-bottom:1px solid var(--edge)}
.ivfold .ivstrip{margin:0;border:0}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   MS-1356 · THE CONSOLE IS NOT A CONSOLE — THE RACK (Michael, 2026-09-12). The two chooser rows are gone.
   PORTED, not written: this is the house's book rack (.ivbook above) — a sticky column of entries under
   part headings — refitted for 24 seats. What the rows cost: from the foot of an instrument the section
   row sat 2,332px above the viewport and the seat row 2,249px above, so changing seat meant scrolling up,
   hunting two rows, and scrolling back. The rack stands still instead, and every seat is on it.
   THE ROOMS: no colour is typed here. The card, the ink, the dim seat name and the cyan current seat are
   the room's own tokens, so the rack is white-card/black-heading in the light room and plate in the dark.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
.ivnav-wrap.ivrack{display:grid;grid-template-columns:268px minmax(0,1fr);gap:0;border:1px solid var(--edge);align-items:start}
.ivnav-wrap.ivrack>.ivtabs{grid-column:1;display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;border:0;background:transparent;
  padding:6px 0;position:sticky;top:calc(var(--hdr-h,139px) + 10px);
  max-height:calc(100vh - var(--hdr-h,139px) - 20px);overflow-y:auto;scrollbar-width:none}
.ivnav-wrap.ivrack>.ivtabs::-webkit-scrollbar{display:none}
.ivnav-wrap.ivrack>.ivpanes{grid-column:2;border-left:1px solid var(--edge);min-width:0;background:var(--card);padding:16px 18px}
.ivnav-wrap.ivrack>.ivpanes>.ivpane{padding:0}
/* a section is a heading over its seats, never a thing to click */
.ivnav-wrap.ivrack .ivpart{font:700 9px "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);padding:12px 14px 4px}
.ivnav-wrap.ivrack .ivpart:first-child{padding-top:4px}
/* a seat: the name, left-aligned, quiet until it is the one you are in */
.ivnav-wrap.ivrack .ivtab{display:block;width:100%;text-align:left;flex:0 0 auto;min-width:0;padding:5px 14px;
  border:0;border-left:3px solid transparent;border-radius:0;background:transparent;color:var(--dim);
  font:500 12.5px/1.25 Barlow,system-ui,sans-serif;letter-spacing:0;text-transform:none;cursor:pointer}
.ivnav-wrap.ivrack .ivtab:hover{color:var(--fg);background:var(--fill)}
.ivnav-wrap.ivrack .ivtab.on{border-left-color:var(--s1);background:var(--fill);color:var(--fg);font-weight:700;box-shadow:none}
.ivnav-wrap.ivrack .ivtab.waiting{color:var(--faint);font-style:italic}
/* A SHORT ROOM STILL HOLDS ALL 24 (MS-1356 (5)): at 900px the rack stands 731px and every seat is on screen; at 800px it
   was 90px taller than the space it had, and the last three seats fell inside the clip. The rows and headings tighten by
   height — the test is the room's height, because that is what ran out — so the whole rack stays reachable without scrolling. */
@media (max-height:880px){
  .ivnav-wrap.ivrack .ivtab{padding:3px 14px;font-size:12px}
  .ivnav-wrap.ivrack .ivpart{padding:8px 14px 3px}
}
/* MS-1356 (6): below 1000px the rack folds to a strip across the top — the same collapse point as the article rail */
@media (max-width:1000px){
  .ivnav-wrap.ivrack{grid-template-columns:1fr}
  .ivnav-wrap.ivrack>.ivtabs{position:sticky;top:var(--hdr-h,139px);z-index:4;background:var(--card);
    max-height:none;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;
    border-bottom:1px solid var(--edge);padding:0}
  .ivnav-wrap.ivrack>.ivtabs::-webkit-scrollbar{display:none}
  .ivnav-wrap.ivrack .ivpart{display:none}
  .ivnav-wrap.ivrack .ivtab{width:auto;white-space:nowrap;border-left:0;border-bottom:3px solid transparent;padding:8px 12px}
  .ivnav-wrap.ivrack .ivtab.on{border-left-color:transparent;border-bottom-color:var(--s1)}
  .ivnav-wrap.ivrack>.ivpanes{grid-column:1;border-left:0;padding:14px 0 0}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   MS-1361 / MS-1362 · THE CIRCUIT PAGE, VERSION 3 — built to TR-CIRC-001-economics-mock-v3.html.
   The left filter card retires; ONE sticky bar carries the kinds and the narrowing, and the content takes
   the full width. EACH KIND KEEPS ITS OWN SHAPE: an article is a row with the painting right; VIDEO IS
   NEVER A ROW; analysis wears the desk's plate and the plate carries the number; social is a quote card.
   SCOPED TO .c3page ON PURPOSE — Economics is built first and walked before the other seven move, so
   nothing here may reach a page still running today's layout.
   NO COLOUR IS TYPED: the mock's #29B6F6/#141618/#24282D are the rooms' own tokens here, so the page is
   white-card/black-ink in the light room and the plate in the dark, like every other surface.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
.c3page .c3bar{position:sticky;top:var(--hdr-h,139px);z-index:14;background:var(--bg);
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);margin:0 0 18px}
.c3page .c3barin{display:flex;align-items:center;gap:18px;padding:10px 0;flex-wrap:wrap}
.c3page .c3btns{display:flex;gap:6px;flex-wrap:wrap}
.c3page .c3btn{font:700 var(--t-micro)/1 "JetBrains Mono",monospace;letter-spacing:.12em;padding:10px 13px;
  border:1px solid var(--edge);border-radius:3px;color:var(--dim);background:transparent;cursor:pointer}
.c3page .c3btn b{color:var(--fg);font-weight:700}
.c3page .c3btn:hover{color:var(--fg)}
.c3page .c3btn.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.c3page .c3btn.on b{color:var(--bg)}
.c3page .c3spacer{flex:1}
.c3page .c3drops{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.c3page .c3count{font:700 var(--t-micro) "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--faint)}

/* the sections: a head that names what it holds, and a collapse that is a control, not decoration */
.c3page .c3sec{border-top:1px solid var(--edge);margin-top:26px}
.c3page .c3sechead{display:flex;align-items:center;gap:14px;padding:14px 0}
.c3page .c3sechead h2{font:700 var(--t-micro)/1 "JetBrains Mono",monospace;letter-spacing:.2em;color:var(--s1);margin:0}
.c3page .c3sechead .c3sub{font:700 var(--t-micro)/1 "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--dim)}
.c3page .c3tog{margin-left:auto;font:700 var(--t-micro) "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--dim);
  border:1px solid var(--edge);border-radius:3px;padding:7px 11px;background:transparent;cursor:pointer}
.c3page .c3sec.closed .c3body{display:none}

/* THE LEAD — one item drawn big. Analysis wears its plate, never a painting (MS-1361 §2). */
.c3page .c3lead{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:center}
.c3page .c3leadart{min-height:380px;border:1px solid var(--edge);overflow:hidden;background:var(--card)}
.c3page .c3leadart img,.c3page .c3leadart .exsvg{width:100%;height:auto;display:block}
.c3page .c3leadbody{display:flex;flex-direction:column;justify-content:center;min-width:0}
.c3page .c3kick{font:700 var(--t-micro)/1 "JetBrains Mono",monospace;letter-spacing:.18em;color:var(--s1)}
.c3page .c3leadhed{font:var(--hcond);font-size:calc(56px * var(--scale,1));line-height:.98;margin:14px 0 12px;text-transform:uppercase}
.c3page .c3leadhed a{color:inherit;text-decoration:none}
.c3page .c3leadhed a:hover{text-decoration:underline;text-decoration-thickness:2px}
.c3page .c3lead p{font-size:17px;line-height:1.55;color:var(--dim);margin:0;max-width:52ch}

/* THE ROWS — one shape per kind, all of them .hrow so the one filter owns them */
.c3page .c3row{display:grid;grid-template-columns:1fr 320px;gap:26px;padding:20px 0;
  border-top:1px solid var(--edge);align-items:center}
.c3page .c3row[hidden],.c3page .c3soc[hidden],.c3page .c3vcard[hidden]{display:none}
.c3page .c3rbody{min-width:0}
.c3page .c3meta{font:700 var(--t-micro)/1.3 "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--faint)}
.c3page .c3hed{font:var(--hcond);font-size:calc(28px * var(--scale,1));line-height:1.05;margin:8px 0 6px;text-transform:uppercase}
.c3page .c3hed a{color:inherit;text-decoration:none}
.c3page .c3hed a:hover{text-decoration:underline;text-decoration-thickness:2px}
.c3page .c3dek{margin:0 0 8px;color:var(--dim);font-size:var(--t-dek);max-width:80ch}
.c3page .c3art{display:block;border:1px solid var(--edge);overflow:hidden;aspect-ratio:630/330;background:var(--card)}
.c3page .c3art .img{width:100%;height:100%;background-size:cover;background-position:center}
.c3page .c3art img{width:100%;height:100%;object-fit:cover;display:block}

/* ANALYSIS: the desk's plate, and the number is the picture */
.c3page .c3plate{min-height:150px;border:1px solid var(--edge);display:grid;place-items:center;text-align:center;padding:14px}
.c3page .c3plate b{display:block;font:var(--hcond);font-size:calc(40px * var(--scale,1));line-height:1;color:var(--s1)}
.c3page .c3plate i{display:block;font:700 var(--t-micro) "JetBrains Mono",monospace;letter-spacing:.12em;
  color:var(--dim);font-style:normal;margin-top:8px}

/* SOCIAL: a small quote card, never a headline row. The initials circle went at MS-1426. */
.c3page .c3soc{align-items:center}
.c3page .c3quote{font:600 26px/1.15 'Barlow Condensed',Barlow,sans-serif;margin:4px 0 8px;max-width:90ch}
.c3page .c3quote a{color:inherit;text-decoration:none}
.c3page .c3quote a:hover{text-decoration:underline}

/* THE LIST STACKS. It sits inside .browser, whose .grid rule lays cards three across — right for cards, wrong for
   full-width rows. The list drops the grid class; this states the intent so nothing inherits columns by accident. */
.c3page [data-rows]{display:block;min-width:0}
/* THE PLATE AT LEAD SIZE: where the slate names a number, the number is the picture and takes the art side whole. */
/* MS-1758 · THE LEAD PLATE TAKES c3slot's DARK TREATMENT BUT NOT ITS ROW GEOMETRY. c3slot sizes a
   ROW thumbnail — 320px wide on a 630/330 ratio — and it was shrinking the lead plate to 320x168
   beside a drawn figure that renders 756x396. The colour is what we wanted from it; the size is not. */
.c3page .c3slot.c3leadplate{width:auto;aspect-ratio:auto;min-height:380px;height:100%}
.c3page .c3leadplate{min-height:380px;height:100%;border:1px solid var(--edge)}
.c3page .c3leadplate b{font-size:calc(96px * var(--scale,1))}
.c3page .c3leadplate i{font-size:var(--t-micro);letter-spacing:.16em;margin-top:14px}

/* VIDEO IS NEVER A ROW. In the list it runs wide; pressing VIDEO lays the SAME cards as a wall three across. */
.c3page .c3vid{text-decoration:none;color:inherit}
.c3page .c3still{display:block;position:relative;border:1px solid var(--edge);
  background:var(--card) center/cover no-repeat}
.c3page .c3play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;
  border:2px solid var(--fg);border-radius:50%;display:grid;place-items:center;color:var(--fg);font-size:20px}
.c3page .c3vh{display:block;font:var(--hcond);font-size:calc(28px * var(--scale,1));line-height:1.05;
  margin:10px 0 4px;text-transform:uppercase}
.c3page .c3vm{display:block;font-size:14px;color:var(--dim)}
.c3page [data-rows][data-mode="video"]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.c3page [data-rows][data-mode="video"] .c3vid{border-top:0;padding:0;display:block}
.c3page [data-rows][data-mode="video"] .c3still{min-height:180px}
.c3page [data-rows][data-mode="video"] .c3vh{font-size:calc(20px * var(--scale,1))}

.c3page .c3more{width:100%;border:0;border-top:1px solid var(--edge);background:transparent;color:var(--fg);
  padding:18px;text-align:center;font:700 var(--t-micro) "JetBrains Mono",monospace;letter-spacing:.16em;cursor:pointer}
.c3page .c3more:hover{background:var(--fill)}

@media (max-width:1000px){
  .c3page .c3lead,.c3page .c3row{grid-template-columns:1fr}
  .c3page .c3leadhed{font-size:calc(38px * var(--scale,1))}
  .c3page [data-rows][data-mode="video"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .c3page [data-rows][data-mode="video"]{grid-template-columns:1fr}
  .c3page .c3soc{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   MS-1409 · THE MIXED VIEW IS THE EDITION, NOT A PILE. ALL is the page at rest — the curated twelve in
   his order — so it gets ONE COMMON FRAME: the same left text edge, the same right slot width, the same
   padding and the same hairline divider. Only what sits INSIDE the slot differs by kind. The five
   per-kind views are NOT touched: each is restored from [data-mode] exactly as it was walked and approved.
   His test: one text edge (yes/no), one slot width (yes/no), tallest ÷ median ≤ 1.6. Before this pass the
   answers were no (43 and 133), no (320, 1354 and 72) and 2.07.
   THE DIVIDER is var(--edge) — already rgba(0,0,0,.1) in the light room and rgba(255,255,255,.1) in the
   dark, which is the hairline he described and the value the standard already blesses. Nothing invented.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
.c3page [data-rows]:not([data-mode]) > .hrow{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;
  padding:20px 0;border-top:1px solid var(--edge);align-items:center;border-bottom:0}
.c3page .c3slot{width:320px;aspect-ratio:630/330;min-height:0;overflow:hidden}
.c3page [data-rows]:not([data-mode]) .c3rbody{display:block;min-width:0}
/* the text edge is the container's, for every kind — nothing indents past an avatar */
.c3page [data-rows]:not([data-mode]) .c3quote,
.c3page [data-rows]:not([data-mode]) .c3hed,
.c3page [data-rows]:not([data-mode]) .c3vh{margin-left:0}
/* clamped so one long quote or deck cannot swing the rhythm — this is what holds the ratio, not hope */
.c3page [data-rows]:not([data-mode]) .c3quote{font-size:22px;display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden;margin:4px 0 8px}
.c3page [data-rows]:not([data-mode]) .c3dek{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin:0 0 8px}
.c3page [data-rows]:not([data-mode]) .c3hed,
.c3page [data-rows]:not([data-mode]) .c3vh{font-size:calc(26px * var(--scale,1));display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* the plate keeps the room law: a DARK plate with cyan figures in BOTH rooms, at the shared outer size */
.c3page .c3slot.c3plate{background:var(--plate);border-color:var(--plate-border);display:grid;place-items:center}
.c3page .c3slot.c3plate b{color:var(--s1)}
.c3page .c3slot.c3plate i{color:var(--plate-dim)}
/* SOCIAL: the avatar and the handle live in the slot; the quote starts where every headline starts */
.c3page .c3socslot{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;
  border:1px solid var(--edge);background:var(--plate)}
.c3page .c3who{font:700 15px/1.25 Barlow,sans-serif;letter-spacing:.02em;color:#FFFFFF;text-align:left}
.c3page .c3handle{font:400 12px/1.3 "JetBrains Mono",monospace;letter-spacing:.04em;color:var(--plate-dim)}
/* VIDEO in the mixed edition: the still with its play badge IN THE SLOT — it does not take the page */
.c3page [data-rows]:not([data-mode]) .c3still{min-height:0;height:100%}
.c3page [data-rows]:not([data-mode]) .c3play{width:44px;height:44px;font-size:15px}

/* ── THE FIVE PER-KIND VIEWS, RESTORED UNTOUCHED ─────────────────────────────────────────────────── */
.c3page [data-rows][data-mode="social"] > .hrow{display:grid;grid-template-columns:72px minmax(0,1fr);gap:18px;
  align-items:start;padding:20px 0;border-top:1px solid var(--edge)}
.c3page [data-rows][data-mode="social"] .c3socslot{border:0;background:transparent;flex-direction:row;order:-1}
.c3page [data-rows][data-mode="social"] .c3slot{width:72px;aspect-ratio:1}
.c3page [data-rows][data-mode="social"] .c3who,
.c3page [data-rows][data-mode="social"] .c3handle{display:block}
.c3page [data-rows][data-mode="video"] .c3slot{width:auto;aspect-ratio:16/9}
.c3page [data-rows][data-mode="video"] .c3rbody{padding-top:10px}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   MS-1413 · ONE BAR, DARK. The band under the lead was four layers deep — a white control bar, a black
   strip beneath it, and empty strips above and below — which is the opposite of "going deeper makes the
   frame SIMPLER". The two rows become ONE row on ONE dark plate, seated flush against the lead above and
   the stories below.
   IT IS A CONTROL SURFACE, so it does NOT follow the room: the plate is #0A0A0A in BOTH rooms, the same
   value the black strip used. Its own tokens are declared here so nothing leaks in from a room that would
   make it white. The EDGE uses the standard's blessed 10% hairline rather than the strip's old literal.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
.c3page .c3bar{--barbg:#0A0A0A;--barfg:#EDEDED;--barcy:#4FC3F7;--bardim:#8A8A8A;--barwell:#161616;
  background:var(--barbg);color:var(--barfg);border:1px solid rgba(255,255,255,.1);border-radius:3px;
  margin:0;padding:0;position:sticky;top:var(--hdr-h,139px);z-index:14}
.c3page .c3barin{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;padding:8px 12px;min-width:0}
.c3page .c3btns{display:flex;gap:6px;flex-wrap:nowrap;flex:0 0 auto}

/* the kinds: no fill unlit, cyan fill lit, one at a time — identical in both rooms */
.c3page .c3bar .c3btn{background:transparent;border:0;border-radius:3px;color:var(--barfg);
  padding:7px 10px;cursor:pointer;font:700 var(--t-micro)/1 "JetBrains Mono",monospace;letter-spacing:.12em;white-space:nowrap}
.c3page .c3bar .c3btn b{color:var(--barcy);font-weight:700;margin-left:5px}
.c3page .c3bar .c3btn:hover{color:#FFFFFF}
.c3page .c3bar .c3btn.on{background:var(--barcy);color:#0A0A0A}
.c3page .c3bar .c3btn.on b{color:#0A0A0A}

/* the ASK field takes the centre and is the first thing to narrow at 1280 */
.c3page .c3bar .pask-scope{color:var(--barcy);border-right:1px solid rgba(255,255,255,.1)}
.c3page .c3bar .paskin{color:var(--barfg)}
.c3page .c3bar .paskin::placeholder{color:var(--bardim)}
.c3page .c3bar .pask-wide{color:var(--bardim);border-left:1px solid rgba(255,255,255,.1)}
.c3page .c3bar .pask-wide:hover{color:var(--barcy)}

/* the right cluster: the drops, the flag, then the three navigation controls */
.c3page .c3bar .c3drops{display:flex;gap:6px;align-items:center;flex:0 0 auto;margin-left:auto}
.c3page .c3bar .c3drop > summary{background:transparent;border:0;color:var(--barfg);padding:7px 9px;
  font:700 var(--t-micro)/1 "JetBrains Mono",monospace;letter-spacing:.12em;cursor:pointer;list-style:none;white-space:nowrap}
.c3page .c3bar .c3drop > summary::-webkit-details-marker{display:none}
.c3page .c3bar .c3drop > summary::after{content:" \25BE";color:var(--bardim)}
.c3page .c3bar .c3drop[open] > summary{color:var(--barcy)}
.c3page .c3bar .pfakes{background:transparent;border:0;color:var(--barfg);padding:7px 9px;
  font:700 var(--t-micro)/1 "JetBrains Mono",monospace;letter-spacing:.12em;margin:0}
.c3page .c3bar .pfakes i{color:#D7263D;font-style:normal;margin-right:4px}
.c3page .c3bar .pfakes b{background:transparent;color:#D7263D;padding:0;margin-left:4px}
.c3page .c3bar .pfakes[aria-pressed="true"]{background:#D7263D;color:#FFFFFF}
/* BACK · FORWARD · OPEN LIVE: white hairline outline, white label, no fill */
.c3page .c3bar .pbtn,.c3page .c3bar .popen{background:transparent;border:1px solid rgba(255,255,255,.1);
  border-radius:3px;color:var(--barfg);padding:6px 9px;font:700 var(--t-micro)/1 "JetBrains Mono",monospace;
  letter-spacing:.12em;text-decoration:none;white-space:nowrap}
.c3page .c3bar .pbtn:hover,.c3page .c3bar .popen:hover{border-color:rgba(255,255,255,.55);color:#FFFFFF}
/* the drops open ON the plate, not in the room */
.c3page .c3bar .c3menu{background:var(--barbg);border:1px solid rgba(255,255,255,.1);color:var(--barfg)}
.c3page .c3bar .c3menu .opt{color:var(--barfg)}
.c3page .c3bar .c3menu .n{color:var(--barcy)}

/* FLUSH: nothing above it, nothing below it, and no lead background showing past it */
.c3page .c3sec + .c3bar,.c3page .c3bar + .panel{margin-top:0}
.c3page .panel > .c3bar{margin:0}
.c3page .panel{background:transparent;border:0;padding:0}
.c3page .panel > .pbody{padding-top:0}

/* ONE ROW AT BOTH WINDOWS. At 1280 the ASK narrows first; if it still will not fit, BACK and FORWARD
   give up their words and keep their arrows. A second row is not an option — it is the defect removed. */
@media (max-width:1400px){
    .c3page .c3barin{gap:8px}
  .c3page .c3bar .c3btn{padding:7px 8px}
}
@media (max-width:1320px){
    .c3page .c3bar .pbtn[data-pback] .w,.c3page .c3bar .pbtn[data-pfwd] .w{display:none}
}

/* MS-1413 · FLUSH MEANS FLUSH, BELOW AS WELL AS ABOVE. The bar sat hard against the lead (0px) but carried a 43px
   blank band beneath it — .pcentre's 16px padding plus the STORIES section's 26px margin plus its 1px rule. That is
   not a stray element, it is the section's own rhythm, but it reads as exactly the empty strip the ruling outlawed.
   The panel's first section gives its rhythm back so the bar butts the stories the way it butts the lead. */
.c3page .panel > .pbody,
.c3page .panel .pcentre{padding-top:0}
.c3page .panel .prest > .c3sec:first-child{margin-top:0;border-top:0}
.c3page .panel .prest > .c3sec:first-child > .c3sechead{padding-top:10px}

/* THE ASK KEEPS ITS ROOM AT FULL WIDTH. It was squeezed to 172px at 1440 — the field had no space and WHOLE SITE
   was clipped to "WHOLE S". It is the first control to narrow at 1280 (the ruling says so), but not before. */

/* MS-1413 · THE ROW MUST FIT, NOT MERELY BE ONE ROW. Widening the ASK to rescue it from 172px overshot: at 1440 the
   inner row wanted 1466px inside 1390px — a 76px overrun with OPEN LIVE clipped by 75. "One row" cannot see that,
   because the line is still one line; it simply runs past the plate. The arithmetic at 1440 is 598 kinds + ASK +
   572 drops + two 12px gaps, so the ASK gets a 260 basis and a 180 floor: 1374 inside 1390, and still nowhere near
   the crush it started from. The drops may shrink, and the row clips INWARD as a backstop rather than escaping. */
.c3page .c3barin{overflow:hidden}
.c3page .c3bar .c3drops{min-width:0}
.c3page .c3bar .c3btns{min-width:0}

/* MS-1413 · THE SCOPE BUTTON KEEPS ITS WORD. The ASK field has its room now, but WHOLE SITE was trimming to
   "WHOLE S" at 1440 and "WHO" at 1280 — the button was giving up its label rather than its padding. It holds its
   text and tightens instead; below 1320 it drops to the arrow alone, which is the same rule BACK and FORWARD follow. */

/* MS-1413 · THE ASK, SIZED ONCE — replacing four patches that were overriding each other. The measurement that
   mattered: at 1440 the well was 180px and the INPUT inside it was 20px, because the scope tag and WHOLE SITE ate it.
   A field you cannot type in is not a field. And the clipped "WHOLE SI" was never the button's own box (89 of 89
   shown) — it was .pask{overflow:hidden} cutting a child that sat 33px past the well. So: give the well real width,
   let the input keep a floor of its own, and below 1320 the scope button becomes the arrow BACK and FORWARD use. */

/* MS-1413 · THE ROW, SOLVED ONCE — AGAINST ITS BUDGET, NOT AGAINST A GUESS.
   Measured: the plate gives 1390 at 1440 and 1230 at 1280. The kinds take 598/574, the drops 572/477, the gaps 24/16
   — leaving 196px and 163px for the ASK. Every fixed width tried (340, 300, 260, 180) was either wider than that (the
   row overran and clipped OPEN LIVE) or narrower than a usable field (a 20px input). So the ASK stops carrying a
   width: it takes the REMAINDER and can never push a control off the plate.
   AND HIS OWN COLLAPSE RULE SUPPLIES THE ROOM. MS-1413: "if it still will not fit, BACK and FORWARD collapse to their
   arrows alone." With their words they cost 148px at 1440; as arrows, 54 — handing the ASK 94px more, so the field
   gets real typing room. Below 1400 the scope tag shortens to ASK; the scope still reads in the placeholder. */
.c3page .c3bar .pask{flex:1 1 0;min-width:0;max-width:460px;margin:0;
  background:var(--barwell);border:1px solid rgba(255,255,255,.1);border-radius:3px}
.c3page .c3bar .paskin{flex:1 1 auto;min-width:0}
.c3page .c3bar .pask-wide{flex:0 0 auto;white-space:nowrap;padding:6px 9px}
.c3page .c3bar .pbtn[data-pback] .w,
.c3page .c3bar .pbtn[data-pfwd] .w{display:none}
@media (max-width:1400px){
}
@media (max-width:1320px){
}

/* MS-1413 rolled to the seven · A KIND WITH NOTHING IN IT SAYS SO. The bar emits a `zero` class, but the only rules
   for it were written for the left rail's .hfacets .opt — so a VIDEO 0 button on Politics or Science would render at
   full strength, looking live and doing nothing. It goes quiet and stops taking a click, the same honest-empty rule
   the facet rows already follow. (Politics and Science carry no video; Science holds 5 rows in total.) */
.c3page .c3bar .c3btn.zero{color:var(--bardim);cursor:default;pointer-events:none}
.c3page .c3bar .c3btn.zero b{color:var(--bardim)}
.c3page .c3bar .pfakes.zero{color:var(--bardim);cursor:default;pointer-events:none}
.c3page .c3bar .pfakes.zero i,.c3page .c3bar .pfakes.zero b{color:var(--bardim)}


/* ── MS-1429 · THE DROP PANELS ────────────────────────────────────────────────────────────────────────
   The option rules above are now shared with the old left rail rather than copied. What remains is what
   only the bar needs: the panel must never leave the window (WHEN ran 414px off the right edge), and a
   zero-count row must look dead and refuse the click — the rule already written for the VIDEO 0 button. */
.c3page .c3bar .c3drop{position:relative}
.c3page .c3bar .c3menu{position:absolute;top:calc(100% + 6px);right:0;z-index:20;min-width:230px;
  max-width:min(560px,88vw);max-height:62vh;overflow:auto;border-radius:3px}
.c3page .c3bar .c3menu .vgl{font:700 var(--t-micro)/1 "JetBrains Mono",monospace;letter-spacing:.12em;
  color:var(--bardim);padding:10px 13px 6px}
.c3page .c3bar .c3menu .opt.zero{pointer-events:none}
.c3page .c3bar .c3menu .opt.zero .n{color:#4A4A4A}

/* ── MS-1432 · THE HOVER PROMISE IS HONOURED ──────────────────────────────────────────────────────────
   "If a surface changes on hover, it is clickable. If it is not clickable, it does not change on hover."
   The strip already lights across its whole width; the cursor now says so across the same area, and the
   inner links keep their own pointer and their own destination. Rooms are unchanged — only the cursor. */
.c3page .c3row{cursor:pointer}
.c3page .c3row a,.c3page .c3row button,.c3page .c3row label,.c3page .c3row input{cursor:pointer}
.c3page .c3row .c3dek,.c3page .c3row .c3quote{cursor:text}

/* ── MS-1431 · THE BAR SIMPLIFIES WHILE YOU READ ──────────────────────────────────────────────────────
   "Going deeper makes the frame SIMPLER, not busier." With an item open, the six kinds give their place
   to ONE back control that names its destination; TOPIC, WHEN, ORDER and FAKES keep their positions and
   go quiet, because they filter a list the reader is not looking at. panel.js already toggles
   body.pitem-open, so the whole state change is CSS and nothing new has to be wired. */
.c3page .c3bar .c3back{display:none;background:var(--barcy);color:#0A0A0A;border:0;border-radius:3px;
  padding:8px 12px;cursor:pointer;font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:.12em;white-space:nowrap}
.c3page .c3bar .c3back:hover{background:#FFFFFF}
body.pitem-open .c3page .c3bar .c3back{display:inline-flex;align-items:center}
body.pitem-open .c3page .c3bar .c3btns > .c3btn{display:none}
body.pitem-open .c3page .c3bar .c3drops .c3drop > summary,
body.pitem-open .c3page .c3bar .pfakes{opacity:.4;pointer-events:none}

/* ══ THE INSTRUMENT BANDS ON A CIRCUIT PAGE (Michael MS-1644, amended MS-1646) ═══════════════════
   A reading renders as its own instrument block — headline dark plate, chart, provenance line,
   console link — BESIDE what is already there, replacing nothing (MS-1572). Four of them stacked,
   full width: the question the ruling asks is whether four read as a BOARD or as a PILE, and a
   two-by-two grid would answer a different question by halving every chart's width.
   Every colour and radius here is a token: this sits below the W15 marker, where the standard is
   absolute and a hand-typed edge refuses the build (MS-0941 §3). */
.trbands{display:flex;flex-direction:column;gap:calc(22px * var(--scale,1));margin:calc(20px * var(--scale,1)) 0 0}
.trband{margin:0;border:1px solid var(--edge);background:var(--card);border-radius:3px;overflow:hidden}
.trb-head{padding:16px 18px 12px;border-bottom:1px solid var(--edge)}
.trb-crumb{font:700 var(--t-micro)/1.4 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.trb-name{font-family:Barlow,sans-serif;font-weight:800;font-size:calc(26px * var(--scale,1));line-height:1.15;letter-spacing:-.01em;margin:8px 0 4px;color:var(--fg)}
.trb-sub{font-size:calc(15px * var(--scale,1));line-height:1.45;color:var(--dim);margin:0;max-width:78ch}
.trb-draw{padding:14px 16px;min-height:calc(300px * var(--scale,1))}
.trb-wait{font:600 13px/1.7 "JetBrains Mono",monospace;color:var(--dim);margin:0;padding:26px 4px}
.trb-foot{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;padding:11px 18px 13px;border-top:1px solid var(--edge)}
.trb-rec{font:600 var(--t-micro)/1.5 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.trb-console{margin-left:auto;font:700 var(--t-micro) "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--fg);text-decoration:none;border:1px solid var(--edge);padding:5px 9px;border-radius:3px}
.trb-console:hover{border-color:var(--fg)}

/* ══ MS-1658 · REPORTS GOES FULL WIDTH ═══════════════════════════════════════════════════════════
   Both left-rail blocks die and the reports pane takes the page. .hindex is a two-column grid —
   245px of rail then the content — and it is shared by Reports, Entities and the circuit index, so
   the collapse is a MODIFIER on this surface rather than a change to the grid four pages rely on.
   Measured live at 1440 before the change: the rail took 319px of 1348, 24% of the page, before
   anything was drawn. Michael: the same move as Instruments, one pattern applied twice. */
.hindex.norail{grid-template-columns:1fr}
.hindex.norail>.pleft{display:none}

/* ══ MS-1666 · THE RAW MATERIAL INSIDE THE CIRCUIT TABS ══════════════════════════════════════════
   The analysis list moved up: each circuit tab now carries the items filed on that circuit, beneath
   its report surface. An item appears under EVERY circuit it carries, so these counts describe what
   ONE tab holds and are never added together — 40 tagged rows produce 66 placements across nine tabs.
   The rows are the site's own .hrow, unchanged: this only spaces them under the surface above. */
.ivrows{margin-top:18px;border-top:1px solid var(--edge);padding-top:14px}
.ivrows-h{font:700 var(--t-micro)/1.4 "JetBrains Mono",monospace;letter-spacing:.12em;
          text-transform:uppercase;color:var(--faint);margin:0 0 10px}
.ivrows .hrows{display:flex;flex-direction:column;gap:14px}

/* ══ MS-1663 · THE INSTRUMENTS PAGE — AN INDEX OF DOORS ══════════════════════════════════════════
   Four sections, twenty-four cards, four across. Ported from the desk's concept
   (TR-INSTRUMENTS-PAGE.html) — the SHAPE is his; the VALUES are this site's, because three of the
   mock's most-used names are not tokens here: --cyan, --cyanD and --mono do not exist and would have
   rendered as nothing, and it selects on data-room where this site uses data-theme. The accent is
   --s1 (the same #4FC3F7 / #0277BD the mock hardcodes) and mono is the literal used 324 times.
   A card is a DOOR: the whole card is the link, so the hit area is the card and not a word in it. */
.inssec{padding:calc(34px * var(--scale,1)) 0 6px}
.inssec h2{font:800 calc(38px * var(--scale,1))/1 Barlow,sans-serif;letter-spacing:-.02em;margin:0;color:var(--fg)}
.inslede{font:400 var(--t-micro)/1.5 "JetBrains Mono",monospace;letter-spacing:.12em;
         color:var(--faint);margin:6px 0 18px;text-transform:uppercase}
.inscards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
/* MS-1822 · THE FIXED CARD HEIGHT COMES OFF. height:calc(470px * var(--scale,1)) is the single
   declaration behind BOTH numbers in the record — the 414 Michael measured and the 611 he refused —
   they are the same rule at two window widths. A card now takes the height of its parts. Grid items
   still stretch to their row, so a row keeps ONE height (his MS-1762 ruling) — it is just no longer a
   height typed in advance. The description is already clamped to four lines, so the tallest card
   cannot run away. */
.inscard{background:var(--card);border:1px solid var(--edge);display:flex;flex-direction:column;
         color:inherit;text-decoration:none;border-radius:3px;overflow:hidden}
.inscard:hover{border-color:var(--s1)}
/* MS-1758 · THE VISUAL SLOT IS DARK IN BOTH ROOMS WITH WHITE TEXT — the same rule every other data
   surface follows. It was a light grey panel holding a figure as text; the room was inverted. */
/* THE SLAB: 150 -> 102 declared, which is Michael's ~132 rendered at the width he measures (x1.3).
   It held a 42px number in 195px of plate — his own R3 evidence line. */
.ins-vis{background:var(--plate);color:var(--plate-fg);min-height:calc(102px * var(--scale,1));display:flex;flex-direction:column;
         align-items:center;justify-content:center;gap:4px;padding:14px;text-align:center}
.ins-f{font:800 calc(38px * var(--scale,1))/1 Barlow,sans-serif;letter-spacing:-.03em;color:var(--plate-fg)}
.ins-u{font:400 var(--t-micro) "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--plate-dim);text-transform:uppercase}
.ins-body{padding:14px 15px 16px;display:flex;flex-direction:column;flex:1}
.ins-meta{display:flex;gap:10px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.ins-chip{font:400 var(--t-micro) "JetBrains Mono",monospace;letter-spacing:.12em;
          border:1px solid var(--edge);padding:3px 8px;color:var(--dim)}
.ins-date{font:400 var(--t-micro) "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--faint)}
.inscard h3{font:800 italic calc(19px * var(--scale,1))/1.2 Barlow,sans-serif;letter-spacing:-.01em;
            margin:0 0 6px;color:var(--fg)}
/* MS-1758 · ONE CARD SIZE. The cards ran 415 to 585 because nothing fixed them and the description was
   told to stretch: paragraphs measured 82px to 260px across twelve different heights. The card is fixed
   and the description is clamped to four lines, so every card agrees and none of them clips mid-word. */
/* MS-1828 · THE TAG ROW IS UNPINNED. flex:1 made the description absorb every spare pixel in the card
   and pushed the tags onto the floor, so a one-line card like layoffs-board held a 97px hole between
   its last sentence and its tags — three quarters of the slab, on six of fourteen cards at 46 or more.
   Without it the block reads top-down and the leftover falls BELOW the content, where empty space looks
   deliberate instead of looking like something that failed to load. Same pixels, different message; the
   page height does not change, because a card still stretches to its row. */
.inscard p{margin:0 0 12px;font-size:calc(14px * var(--scale,1));line-height:1.5;color:var(--dim);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ins-tags{display:flex;gap:6px;flex-wrap:wrap}
.ins-tags span{font:400 var(--t-micro) "JetBrains Mono",monospace;letter-spacing:.1em;
               border:1px solid var(--edge);padding:3px 7px;color:var(--faint)}
.ins-house{background:var(--fill);color:var(--fg)}
/* NOT BUILT: an empty dashed panel, and NOT a link — a door onto a 404 is worse than an honest gap. */
.inscard.pending{cursor:default}
.inscard.pending:hover{border-color:var(--edge)}
.ins-vis-none{border:2px dashed var(--edge);margin:12px;min-height:calc(120px * var(--scale,1))}
.ins-vis-none span{font:400 var(--t-micro) "JetBrains Mono",monospace;letter-spacing:.16em;color:var(--faint)}
.inscard.pending h3{color:var(--faint)}
/* MS-1813 RULED · NOT BUILT IS A STATE, NOT A LINK — AND IT CHANGES HERE, WHERE IT IS PINNED,
   not on the index page only. Michael: "a third variant in a round about killing variants is worse
   than the cyan." This is the single rule that colours every NOT BUILT the site draws; I counted
   what it reaches before touching it — 3 occurrences, all on /research/instruments/ (the stub and
   the two unbuilt Discipline rows), and no other page in the bundle renders the class. The accent
   is reserved for things a reader can open; an unbuilt seat cannot be opened. Keeps !important
   because the rule it overrides carries one — removing that is a wider change than this ruling. */
.ins-soon{border-color:var(--edge)!important;color:var(--faint)!important}
@media (max-width:1200px){.inscards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.inscards{grid-template-columns:1fr}.inssec h2{font-size:28px}}

/* ═══ R1 (MS-1793) · ONE INSTRUMENT MASTHEAD, DARK IN BOTH ROOMS ═══
   Michael: "Restore the overlaid black band. It is the original, not an addition, and today it only
   exists in light — give it a dark half. Three hero classes collapse to one."

   REBUILT FROM WHAT IS BUILT, not written new (MS-1762). The precedent is .img.splate — "dark in both
   rooms, like the derived thumbnails" — which pins #111111 literally. It does NOT ride --plate: that
   token INVERTS to #FFFFFF in the light room (front.css:3838), so a band built on it would turn white
   on exactly the pages this rule exists to fix.

   THE DARK HALF IS THE EDGE. In the light room the band already reads: a near-black rectangle on a white
   page. In the dark room the page ground is #0A0A0A and the band is #111111, so it has no boundary and
   the treatment disappears (verified by render on receipts-ledger, not by token). The band therefore
   carries its own edge, which costs nothing in light and is the whole treatment in dark.

   .inner IS THE BAND on all 20. On the 8 plain-hero instruments it sits over the painting and its scrim,
   exactly as the original did; on the 12 derived ones it sits above the figure, which stays legible
   rather than being drowned under a near-black wash. One class, one treatment, two anatomies. */
/* TWO ANATOMIES, ONE TREATMENT — and the difference is NOT cosmetic. On the 12 DERIVED instruments
   there is no painting behind the head, so the band is the plate itself: solid #111111. On the 8 PLAIN
   ones a painting sits behind it under the ::after scrim, and that is the original the ruling calls for
   — so the band there stays TRANSPARENT and lets the scrim do its job. A solid fill on those pages
   covers the oil completely, which is a regression dressed as a fix; caught by rendering it, not by
   reading the rule. Both halves still get the edge, which is the part the dark room was missing. */
.ovl-heroB.imast .inner{color:#EDEDED}
.ovl-heroB.imast.derived .inner{background:#111111;border-bottom:1px solid rgba(255,255,255,.16)}
.ovl-heroB.imast:not(.derived){border-bottom:1px solid rgba(255,255,255,.16)}
.ovl-heroB.imast h1{color:#EDEDED;text-shadow:none}
.ovl-heroB.imast .deck{color:rgba(237,237,237,.82)}
.ovl-heroB.imast .meta{color:rgba(237,237,237,.55)}
.ovl-heroB.imast .tag{background:#EDEDED;color:#111111;border:1px solid rgba(255,255,255,.16)}

/* THE LIGHT ROOM MUST BE BEATEN AT ITS OWN SPECIFICITY. html[data-theme="light"] .ovl-heroB.derived h1
   is (0,3,2); a bare .ovl-heroB.imast h1 is (0,2,1) and would lose, leaving #121212 ink on a #111111
   band — black on black. These restate the band at matching weight and later in the cascade. */
html[data-theme="light"] .ovl-heroB.imast .inner,
html[data-theme="light"] .ovl-heroB.imast h1{color:#EDEDED}
html[data-theme="light"] .ovl-heroB.imast.derived .inner{background:#111111}
html[data-theme="light"] .ovl-heroB.imast .deck{color:rgba(237,237,237,.82)}
html[data-theme="light"] .ovl-heroB.imast .meta{color:rgba(237,237,237,.55)}
html[data-theme="light"] .ovl-heroB.imast .tag{background:#EDEDED;color:#111111}

/* ═══ R2 (MS-1793 item 2) · THE INSTRUMENTS INDEX ═══
   The page was the odd one out: div.rtitle at 290px and no artwork, while eight section pages carry
   top-v2. It now wears top-v2's own classes, so the layout is inherited and cannot drift from theirs.

   THE ART BOX IS PINNED TO THE RULED 693x482. Michael's ruling, and the six paintings are cropped to
   it rather than shipped at full resolution — 11.4MB of oil became 3.8MB. The box holds its shape
   whether or not a painting is in it, so the empty state and the filled state are the same geometry
   and landing the art is never a re-layout. */
.insv2 .tv2-art{min-height:482px;max-height:482px}
.insv2-card{padding:22px 24px;gap:12px;justify-content:flex-start}
.insv2-card .rsub{font:400 16px/1.55 Barlow,sans-serif;color:var(--dim);margin:10px 0 0}
.insv2-card .meta{font:700 10.5px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--faint);margin-top:14px}

/* THE EMPTY SLOT SAYS WHAT IT WAITS FOR — the house's heroless rule, not a broken image and not a
   silent gap. Dashed, so it reads as a slot and never as a picture that failed to load. */
.insart-wait{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:var(--fill);border:1px dashed var(--edge);box-shadow:none;text-align:center;padding:0 24px}
.insart-w{font:800 15px/1.2 "Barlow Condensed",Barlow,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.insart-n{font:700 10.5px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--faint)}

/* DISCIPLINE AS ROWS (MS-1793). Nine cards were 2,012px — the biggest single block on the longest page
   on the site. A row carries the same record, the same reading and the same door, laid along the line.
   R3 floors respected: nothing here is below 12px and the row itself is the tap target, well over 24. */
/* MS-1822 · ONE GRID, NOT NINE. Every .insrow was its OWN grid, so each row sized its fr columns from
   whatever was left after ITS auto columns — a row reading 224 ENTRIES left less than one reading
   9 AREAS, and the two unbuilt rows carry no reading at all, so their description got the slack. The
   description column measured 545 to 624: seventy-nine pixels of spread that no single row could show
   you. The container now owns the tracks and every row inherits them with subgrid, so a column is
   sized ONCE across all nine. The row stays a real box — border, hover and link intact — which is why
   this is subgrid and not display:contents. */
.insrows{display:grid;grid-template-columns:auto minmax(0,1.1fr) minmax(0,2fr) auto auto;
  border-top:1px solid var(--edge)}
.insrow{display:grid;grid-column:1/-1;grid-template-columns:subgrid;gap:16px;
  align-items:baseline;padding:14px 6px;border-bottom:1px solid var(--edge);text-decoration:none;color:var(--fg)}
.insrow:hover{background:var(--fill)}
.insrow .ins-chip{font:700 12px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--s1);white-space:nowrap}
.insrow h3{margin:0;font:700 17px/1.2 Barlow,sans-serif;color:var(--fg)}
.insrow .insrow-d{margin:0;font:400 13.5px/1.45 Barlow,sans-serif;color:var(--dim);min-width:0}
.insrow .insrow-f{font:800 20px/1 Barlow,sans-serif;color:var(--fg);white-space:nowrap;text-align:right}
.insrow .insrow-f .ins-u{font:700 12px "JetBrains Mono",monospace;color:var(--dim);margin-left:4px}
.insrow .insrow-t{font:700 12px "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--faint);white-space:nowrap}
.insrow.pending{opacity:1}
.insrow.pending h3{color:var(--dim)}
@media (max-width:900px){.insrows{grid-template-columns:auto minmax(0,1fr)}
  .insrow{row-gap:6px}
  .insrow .insrow-d,.insrow .insrow-f,.insrow .insrow-t{grid-column:1/-1;text-align:left}}

/* A SEAT WITH NO RECORD IS A LINE, NOT A 414px CARD. It has no reading, no visual and no sentence to
   carry, so the card was padding around an absence — Michael's own R3 evidence. Still no link: a door
   onto a 404 is worse than an honest gap. */
/* align-self:start OR THE STUB IS NOT A STUB. .inscards is a grid, and a grid item stretches to the
   height of the tallest cell in its row — so the "compact" stub measured 611px, exactly the card it
   was meant to replace. The markup was right and the rendered height was unchanged; found by measuring
   the box on the page, which is the fourth time today that reading the code would have said done. */
.insstub{display:flex;align-self:start;align-items:baseline;gap:14px;flex-wrap:wrap;padding:14px 16px;
  border:1px dashed var(--edge);border-radius:3px;background:var(--fill)}
.insstub h3{margin:0;font:700 16px/1.2 Barlow,sans-serif;color:var(--dim)}
.insstub .ins-chip{font:700 12px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--faint)}
.insstub .ins-soon{font:700 12px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--faint);
  border:1px solid var(--edge);border-radius:2px;padding:2px 6px}
.insstub p{margin:0;font:400 13px/1.45 Barlow,sans-serif;color:var(--faint);flex:1 1 100%}

/* TWO DEFECTS FOUND BY LOOKING AT THE RENDERED PAGE, NOT BY READING THE BUILD (R2, MS-1811).

   1 · THE TITLE WAS RIDING UNDER THE FIXED MASTHEAD. Measured: title top 127 against a masthead whose
   bottom is 139 — twelve pixels of the h1 behind the nav. The old div.rtitle declared
   padding:calc(30px * var(--scale,1)) 0 14px; a section declares a MARGIN instead, and a top margin
   COLLAPSES through .hub, so the clearance the page used to have vanished with the port. Padding does
   not collapse. This restores the page's own 30px rather than inventing a number. Live was 218 and
   politics is 156; this lands in that range instead of under the chrome.

   2 · THE CARD WAS STRETCHING TO THE PAINTING AND HOLDING 267px OF NOTHING. On a circuit page
   .tv2-card is flex:1 1 auto because it carries three highlight chips that fill it. This page has no
   chips — it has a tag, two lines and a byline — so stretching produced a white box with a quarter of
   a metre of empty inside it. R3 says the space a removal leaves stays empty; it does not say draw a
   BOX around the emptiness. The card now takes its content's height and the space beside the painting
   is page ground, which is what empty is supposed to look like. */
/* MS-1813 RULED · PINNED TO POLITICS, NOT TO A NUMBER I LIKED. The 30px restored the value the old
   div.rtitle declared, which cleared the masthead but landed the title at 166 against politics at
   156 — a NEW 10px divergence introduced by the very port meant to end the divergence, and the same
   species as the 2px and 4px gaps flagged this morning. 20px lands it on 156. The reference is
   /politics/ and any future change to this value should be measured against that page, not chosen. */
/* MS-1813 RULED · THE TITLE SITS WHERE POLITICS' TITLE SITS: 156. MEASURED, NOT CHOSEN.
   I first blamed margin collapse and tried display:flow-root on the container so .top's own margin
   would do the work — the structurally pure fix. IT DID NOT: the title went back to 127, which proves
   nothing was collapsing. The container simply carries no masthead clearance, and this section needs
   its own. So the value is a real measurement, taken from two points on this page (30px→166, 20px→153,
   so 1.3 rendered px per declared px at this width) and solved for the target: 22px lands 156 exactly.
   THE REFERENCE IS /politics/, NOT THIS NUMBER. If the house spacing moves, re-measure against that
   page and re-solve; do not nudge this constant. Verified: 156 against politics' 156, both at 1545. */
.insv2{padding-top:calc(22px * var(--scale,1))}
.insv2 .tv2-card{flex:0 0 auto}
/* PLACEMENT ONLY — THE COLOUR IS THE HOUSE'S AND I AM NOT OVERRULING IT. .ins-soon is pinned to the
   accent with !important at line 4988, and the NOT BUILT cards on the live page already wear that cyan,
   so it is the established treatment for an unbuilt seat rather than an accident of my markup. I tried
   to neutralise it, measured rgb(79,195,247) coming back anyway, and then read WHY instead of reaching
   for a second !important. Changing what NOT BUILT looks like is a decision for Michael, not a thing to
   slip in under a layout fix. This rule only puts the marker in the column the built rows keep free. */
.insrow .insrow-soon{grid-column:4/-1;justify-self:end;font:700 12px "JetBrains Mono",monospace;
  letter-spacing:.1em;white-space:nowrap}
/* MS-1949 · THE RUNNER edition: the byline line, the draft face, the sources list */
.edition .ed-by{font:700 11px 'JetBrains Mono',monospace;letter-spacing:.1em;color:var(--dim);margin:8px 0 0;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.edition.draft .ed-rule{border-left-color:#c0392b;color:#c0392b}
.edition .ed-l.draft{border-style:dashed}
.edition .ed-sources{margin-top:18px;border-top:1px solid var(--edge);padding-top:10px}.edition .ed-sources ol{margin:8px 0 0 18px;padding:0;font-size:13px;line-height:1.5}.edition .ed-sources a{overflow-wrap:anywhere}
.edition .ef-live + .ef-src{margin-left:12px}


/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   THE PHONE VIEW (Michael MS-2114, 2026-09-17). Everything below lives under ONE breakpoint: phones, below 700px wide.
   At 700px and wider not one rule here applies, so the desktop looks as it did. The menu button and the menu are display:none
   outside this block. Both rooms: the menu sheet is the masthead's own ground (rgb(4,4,4) in the dark room, rgb(251,251,251)
   in the light room), its text the page's ink (--fg), the current section marked with the room's accent (--s1).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
.mburger,.mmenu,.xpiece-phone,.wkchange{display:none}   /* the desktop state, written BEFORE the phone block so the phone rules below win at equal specificity (the note's lesson, MS-2118) */
@media (max-width:700px){
  :root{--hdr-h:64px}
  html,body{overflow-x:hidden;max-width:100%}
  .wrap,main.wrap{padding-left:14px;padding-right:14px}
  img,svg,video,iframe{max-width:100%}
  /* A · THE HEADER: the logo row only, the menu button at its right; the nav bar and the masthead's search and room switch step aside */
  .mast{padding:8px 0 6px}
  .mast .in{grid-template-columns:auto 1fr auto;padding:0 12px;gap:8px;align-items:center}
  .mast .in>.lock{justify-self:center}
  .mast .in>.mastR{display:none}
  nav.catnav{display:none}
  .mburger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 10px;border:1px solid var(--edge);border-radius:3px;background:transparent;color:var(--fg);cursor:pointer;justify-self:end}
  .mburger span{display:block;height:2px;width:100%;background:currentColor;border-radius:1px}
  html.mopen .mburger span:nth-child(2){opacity:0}
  /* THE MENU: full screen, one column, large tap targets, the current section marked */
  .mmenu{display:block;position:fixed;inset:0;z-index:70;overflow:auto;-webkit-overflow-scrolling:touch;background:rgb(4,4,4);color:var(--fg);padding:14px 14px 40px}
  html[data-theme="light"] .mmenu{background:rgb(251,251,251)}
  .mmenu[hidden]{display:none}
  html.mopen{overflow:hidden}
  .mmenu .mclose{position:absolute;top:10px;right:12px;width:44px;height:44px;border:1px solid var(--edge);border-radius:3px;background:transparent;color:var(--fg);font:400 26px/1 Barlow,sans-serif;cursor:pointer}
  .mmenu .mtools{display:flex;flex-direction:column;gap:14px;margin:64px 0 18px}
  .mmenu .mtools .srchbox{width:100%;box-sizing:border-box;height:44px;font-size:13px;letter-spacing:.12em}
  .mmenu .mtools .roomtog{height:44px;width:auto;align-self:flex-start}
  .mmenu .mtools .roomtog .rt{width:64px}
  .mmenu .mlinks{display:flex;flex-direction:column}
  .mmenu .mlinks .cat{display:flex;align-items:center;min-height:52px;width:auto;padding:0 14px;font-size:15px;letter-spacing:.14em;border:0;border-bottom:1px solid var(--edge);border-radius:0;background:transparent;color:var(--fg);text-decoration:none}
  .mmenu .mlinks .cat.on{box-shadow:inset 4px 0 0 var(--s1);color:var(--s1)}
  /* B · NO SIDEWAYS SCROLL: anything wide scrolls inside its own box */
  .hband{max-width:100%;overflow-x:hidden}
  .pcentre,.prest,.panel,.pbody,.browser{max-width:100%;min-width:0}
  .exhibit,.ssrfig,.rtwrap,.ledgerwrap,.ftable-wrap,.tls-stage{max-width:100%;overflow-x:auto}
  article.body,main.article .body,.article .body{grid-template-columns:minmax(0,1fr)!important}   /* the article's column never grows to its widest child */
  .iface,.ivbody,.ivpanes,.ivmenu,.cbanner,.cgrid,.cocard{max-width:100%;min-width:0;overflow-x:auto}   /* the instrument faces: a wide face scrolls inside its own box */
  .iface .iread,.iface .ifurn,.iface .ibasis{flex-wrap:wrap;min-width:0} .iface .iread>*{min-width:0}
  .cxlayers summary,.cxl summary{flex-wrap:wrap;max-width:100%}   /* the layer switch's summary wraps instead of pushing its marker past the edge */
  .ivdrop .ivmenu{left:auto;right:0;max-width:calc(100vw - 40px)}   /* a drop-down menu opens within the screen */
  .exhibit svg,.ssrfig svg{max-width:100%;height:auto;overflow:hidden}
  /* C · TAP TARGETS: at least 44px tall wherever a visitor taps */
  .c3btn,.c3back,.pask-scope,.pask-wide,.pbtn,.rbtn,.ifmlink,.c3tog,.popen,.xtheater,.xshare,.botnav .cat,.agentbtn,.agentprompt,.ttp-bar button,.wk-spec,.gbtn{min-height:44px;display:inline-flex;align-items:center}
  .paskin{min-height:44px}
  .vbtn,.tbtn,.ivtab,.tls-b,.ctop,.doorbtn,.ed-l,.hindex .tag,.chiprow .tag,.ef-live,.elrail,.pcrumb a,main li > a{min-height:44px;display:inline-flex;align-items:center}
  .mast .in>.mark,.mast .in>.lock{min-height:44px;align-items:center}
  .wirestrip{padding-top:0;padding-bottom:0} .wireitem{min-height:44px;align-items:center}
  /* D · THE SECTION PAGES: one column; the filter buttons one row that scrolls sideways inside itself; the ask box full width; each story image first, then the words */
  .c3page .c3bar .c3barin{display:flex;flex-direction:column;align-items:stretch;gap:8px;max-width:100%}
  .c3page .c3btns{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;padding-bottom:4px;gap:6px}
  .c3page .c3btns>*{flex:0 0 auto}
  .c3page .c3drops{display:flex;flex-wrap:wrap;gap:6px;max-width:100%}
  .c3page .c3drop{position:relative}
  .c3page .c3menu{max-width:calc(100vw - 28px);left:0}
  .c3page .c3sechead{flex-wrap:wrap;gap:8px}
  .pask{display:flex;flex-wrap:wrap;width:100%;max-width:100%;box-sizing:border-box}
  .pask .pask-scope{flex:1 1 auto}
  .pask .paskin{flex:1 1 100%;order:3;width:100%;box-sizing:border-box;border-top:1px solid var(--edge)}
  .pask .pask-wide{flex:0 0 auto;border-left:0}
  .c3page [data-rows]:not([data-mode]) > .hrow,.c3page .c3rows .c3row,.c3page .c3row{display:flex;flex-direction:column;gap:10px;padding:16px 0}
  .c3page .c3row .c3slot{order:-1;width:100%;max-width:100%;margin:0}
  .c3page .c3row .c3art{aspect-ratio:630/330;width:100%}
  .c3page .c3row .c3art .img{width:100%;height:100%}
  .c3page .c3row .c3art .img img{width:100%;height:100%;object-fit:cover;display:block}
  .c3page .c3row .c3plate{min-height:0;padding:14px}
  .c3page .c3row .c3rbody{width:100%;min-width:0}
  /* E · RECEIPTS: the ledger scrolls sideways inside its own box, the date and the claim columns fixed at the left */
  .ledgerwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ledger .lcell{white-space:nowrap}
  .ledger th:first-child,.ledger td.ldate{position:sticky;left:0;z-index:2;background:var(--bg);min-width:84px}
  .ledger th:nth-child(2),.ledger td.lclaim{position:sticky;left:84px;z-index:2;background:var(--bg);min-width:180px;white-space:normal}
  /* F · THE SMALL ONES: the video fills the width in a portrait window */
  .xwatch figure.vid,.xwatch .ttp{width:100%;max-width:100%;margin-left:0;margin-right:0}
  .xwatch .ttp{display:flex;flex-direction:column} .xwatch .ttp video{order:1} .xwatch .ttp .ttp-bar{position:static;order:2;opacity:1} .xwatch .ttp figcaption{order:3;padding:8px 10px 10px}   /* on a phone the player bar sits under the picture and the caption under the bar, nothing over the words */
  /* (2) the room switch in the menu says which room is which, the current one marked */
  .mmenu .mtools .roomtog .rt{position:relative;font-size:12px;line-height:44px;min-height:44px;width:auto;min-width:88px;padding:0 14px;font-family:"JetBrains Mono",monospace;font-weight:700;letter-spacing:.12em}
  .mmenu .mtools .roomtog .rt-d{color:#EDEDED} .mmenu .mtools .roomtog .rt-l{color:#121212}
  .mmenu .mtools .roomtog .rt-d::after{content:"DARK"} .mmenu .mtools .roomtog .rt-l::after{content:"LIGHT"}
  .mmenu .mtools .roomtog[data-room="dark"] .rt-d::after,.mmenu .mtools .roomtog:not([data-room="light"]) .rt-d::after{content:"DARK ✓"} .mmenu .mtools .roomtog[data-room="light"] .rt-l::after{content:"LIGHT ✓"}
  .xwatch .ttp video,.xwatch .vid video{width:100%!important;height:auto!important;max-height:none!important;margin:0!important}
  /* G · WHAT CANNOT WORK: on /interlinked/ each piece leads with its video; the walk link says where it is best */
  .xpiece-links{flex-direction:column;gap:0}
  .xpiece-links a[href*="/interlinked/watch/"]{order:-1}
  .xpiece-phone{display:inline;color:var(--faint,#6C6C6C);font-weight:400;letter-spacing:.06em;margin-left:8px}
  /* the Walker on a phone: the chart first at full width, the controls behind a button */
  .wklens .xrail{display:none}
  html.wkctl .wklens .xrail{display:block}
  .wkchange{display:inline-flex!important;align-items:center;min-height:44px;margin:0 0 10px;padding:0 14px;font:700 12px "JetBrains Mono",monospace;letter-spacing:.12em;border:1px solid var(--edge);border-radius:3px;background:transparent;color:var(--fg);cursor:pointer}
  .xlens-body{grid-template-columns:1fr}
}

/* ═══ THE CHANNEL BAND (Michael MS-2187, ruled MS-2196 · DEV 2026-09-26): the YouTube player and its playlist under the console.
   The band's own tokens, scoped: dark - the house dark plate, white titles, gray metadata, the accent only on the active-row marker
   and hover; light - a white card body, near-black titles, gray metadata, the deep accent. Thumbnails sit on a near-black plate in both
   rooms (ROOM LAW). The element standard: var(--edge) at 10%, 3px corners, 50% for the circular play control. */
.ytband{--yt-plate:#111111;--yt-fill:#161616;--yt-ink:#EDEDED;--yt-dim:#A1A1A1;--yt-faint:#6C6C6C;--yt-acc:#4FC3F7;--edge:rgba(255,255,255,.10)}
html[data-theme="light"] .ytband,html[data-theme="hybrid-a"] .ytband{--yt-plate:#FFFFFF;--yt-fill:#F2F2F2;--yt-ink:#121212;--yt-dim:#5E5E5E;--yt-faint:#6C6C6C;--yt-acc:#0277BD;--edge:rgba(0,0,0,.10)}
.ytband .ytpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}   /* MS-3955: two films side by side, equal, neither featured; one column at phone width */
.ytband .ytfilm{margin:0;border:1px solid var(--edge);background:var(--yt-plate);color:var(--yt-ink);border-radius:3px;overflow:hidden}
.ytband .ytfilm .ttp{border:0;border-radius:0}
.ytband .ytfilm video{width:100%;aspect-ratio:16/9;display:block;background:#000;object-fit:cover}
.ytband .ytfilm figcaption{padding:12px 14px 13px;border-top:1px solid var(--edge)}
/* MS-4131: THE DOOR on each channel card. These two films leave the Interlinked listing, and the card was the only other place
   they appeared - it played them but did not link to their page. The door makes the row safe to remove. */
.ytband .ytfilm figcaption .ytdoor{display:inline-block;margin-top:9px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);text-decoration:none;border:1px solid var(--edge);border-radius:4px;padding:5px 9px}
.ytband .ytfilm figcaption .ytdoor:hover{border-color:var(--cyan)}

.ytband .ytfilm figcaption b{display:block;font:var(--hcond);font-size:18px;line-height:1.1;text-transform:uppercase;color:var(--yt-ink);font-weight:700}
.ytband .ytfilm figcaption span{display:block;margin-top:4px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--yt-dim)}
.ytband .ytfoot{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;padding:12px 2px 0;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--yt-faint)}
.ytband .ytfoot a{color:var(--yt-ink);text-decoration:none;border-bottom:1px solid var(--edge)}
.ytband .ytfoot a:hover{color:var(--yt-acc);border-color:var(--s1)}
@media (max-width:820px){.ytband .ytpair{grid-template-columns:1fr}}

/* ═══ THE INTERLINKED PAGE, REBUILT (Michael MS-2190, ruled MS-2199 option A · DEV 2026-09-26): the pieces lead - a hero on their
   own stills, the explainer, the cards with two door tiles, the Walker below. Scoped tokens per room; every still on a near-black
   plate in both rooms (ROOM LAW). The element standard: var(--edge), 3px corners, 50% for circular controls. */
.ilfront,.ilhead{--il-plate:#111111;--il-fill:#161616;--il-ink:#EDEDED;--il-dim:#A1A1A1;--il-faint:#6C6C6C;--il-acc:#4FC3F7;--edge:rgba(255,255,255,.10)}
html[data-theme="light"] .ilfront,html[data-theme="hybrid-a"] .ilfront,html[data-theme="light"] .ilhead,html[data-theme="hybrid-a"] .ilhead{--il-plate:#FFFFFF;--il-fill:#F2F2F2;--il-ink:#121212;--il-dim:#5E5E5E;--il-faint:#6C6C6C;--il-acc:#0277BD;--edge:rgba(0,0,0,.10)}
.ilfront{margin-top:18px}
.ilfront .ilwhat{margin:14px 0 18px;max-width:900px;color:var(--il-dim);font-family:var(--text);font-size:15px;line-height:1.55}
.ilfront .ilwhat b{color:var(--il-ink);font-weight:600}
.ilfront .ilhero{position:relative;border:1px solid var(--edge);border-radius:3px;overflow:hidden;background:#0A0A0A;aspect-ratio:21/9;min-height:300px;max-height:520px}
.ilfront .ilslide{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.ilfront .ilslide.on{opacity:1}
.ilfront .ilslide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ilfront .ilslide .ilshade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.62) 42%,rgba(0,0,0,.08) 78%)}
.ilfront .ilslide .iltext{position:absolute;left:0;right:0;bottom:0;top:0;padding:34px 36px;display:flex;flex-direction:column;justify-content:flex-end;max-width:640px}
.ilfront .ilslide .ilkick{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#4FC3F7;margin-bottom:10px}
.ilfront .ilslide h2{font:var(--hcond);font-size:38px;line-height:1.02;text-transform:uppercase;color:#EDEDED;margin:0 0 10px;font-weight:800}
.ilfront .ilslide p{color:#C9C9C9;font-family:var(--text);font-size:15px;line-height:1.5;margin:0 0 16px;max-width:560px}
.ilfront .ildoors{display:flex;gap:10px;flex-wrap:wrap}
.ilfront .ildoor{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid rgba(255,255,255,.55);border-radius:3px;background:rgba(10,10,10,.55);color:#EDEDED;text-decoration:none;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;transition:border-color .15s,color .15s}
.ilfront .ildoor:hover{border-color:var(--s1);color:#4FC3F7}
.ilfront .ildoor.soon{opacity:.55;pointer-events:none}
.ilfront .ilnav{position:absolute;right:14px;bottom:14px;display:flex;gap:6px;align-items:center}
.ilfront .ilnav button{width:12px;height:12px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:transparent;padding:0;cursor:pointer}
.ilfront .ilnav button.on{background:#4FC3F7;border-color:var(--s1)}
.ilfront .ilarrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(10,10,10,.5);color:#EDEDED;font-size:18px;cursor:pointer;display:grid;place-items:center}
.ilfront .ilarrow:hover{border-color:var(--s1);color:#4FC3F7}
.ilfront .ilarrow.l{left:12px}.ilfront .ilarrow.r{right:12px}
.ilfront .ilcards{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px}
.ilfront .ilcard{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:22px;align-items:center;padding:18px 20px;border:1px solid var(--edge);border-radius:3px;background:var(--il-plate);color:var(--il-ink);transition:background .15s}
.ilfront .ilcard:hover{background:var(--il-fill)}
.ilfront .ilcard .ilkick{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--il-faint);margin-bottom:8px}
.ilfront .ilcard h3{font:var(--hcond);font-size:26px;line-height:1.05;text-transform:uppercase;margin:0 0 8px;font-weight:800;color:var(--il-ink)}
.ilfront .ilcard h3 a{color:inherit;text-decoration:none}
.ilfront .ilcard h3 a:hover{color:var(--il-acc)}
.ilfront .ilcard p{color:var(--il-dim);font-family:var(--text);font-size:14.5px;line-height:1.5;margin:0}
.ilfront .ilmeta{margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--il-faint)}
.ilfront .ilmeta a{color:var(--il-acc);text-decoration:none}
.ilfront .iltiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ilfront .iltile{display:block;position:relative;border:1px solid var(--edge);border-radius:3px;overflow:hidden;background:#0A0A0A;aspect-ratio:16/9;text-decoration:none;color:#EDEDED;transition:border-color .15s}
.ilfront .iltile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s var(--ease)}
.ilfront .iltile:hover{border-color:var(--s1)}
.ilfront .iltile:hover img{transform:scale(1.03)}
.ilfront .iltile .illab{position:absolute;left:0;right:0;bottom:0;padding:40px 10px 9px;background:linear-gradient(to top,rgba(0,0,0,.94) 0,rgba(0,0,0,.82) 45%,rgba(0,0,0,0) 100%);text-shadow:0 1px 2px rgba(0,0,0,.9);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#EDEDED}
.ilfront .iltile:hover .illab{color:var(--il-acc)}
.ilfront .iltile .illab .ilnote{display:none;font-weight:400;letter-spacing:.06em;color:#A1A1A1;margin-left:8px}
.ilfront .iltile .ilbadge{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:rgba(10,10,10,.55);display:grid;place-items:center}
.ilfront .iltile .ilbadge::before{content:"";width:14px;height:16px;background:#EDEDED;clip-path:polygon(0 0,100% 50%,0 100%);margin-left:3px}
.ilfront .iltile .ilbadge.grid{border-radius:3px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#EDEDED}
.ilfront .iltile .ilbadge.grid::before{display:none}
.ilfront .iltile.soon img{filter:brightness(.45) grayscale(.4)}
.ilfront .iltile.soon{pointer-events:none}
.ilfront .iltile.soon .illab{color:#8A8A8A}
.ilhead{margin:26px 0 6px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.ilhead h2{font:var(--hcond);font-size:28px;text-transform:uppercase;margin:0;font-weight:800;color:var(--il-ink)}
.ilhead span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--il-faint)}
.ilhead.ilwalker{margin-top:44px}
@media (max-width:900px){.ilfront .ilcard{grid-template-columns:1fr}.ilfront .ilhero{aspect-ratio:4/3;max-height:none}.ilfront .ilslide .iltext{padding:18px}.ilfront .ilslide h2{font-size:26px}.ilfront .ilslide p{font-size:13.5px}.ilfront .ilarrow{display:none}}
@media (max-width:520px){.ilfront .iltiles{grid-template-columns:1fr}.ilfront .iltile.video{order:-1}.ilfront .iltile .illab .ilnote{display:inline}}   /* MS-2114 G: on a phone the video leads; the walk says where it is best */

/* ═══ THE HUE EXPERIMENT (Michael MS-2219 · DEV 2026-09-26): a per-piece accent from the poster, in the NAMED SLOTS ONLY - the chart
   highlight series (the exhibits' --lead), section dividers and pull quotes; cyan stays the house thread everywhere else (wordmark
   cursor, chrome, both room laws). Dark room: the hue as is. Light room: a darkened hue for contrast on white. */
[data-hue="ember"]{--lead:#FF7A1A;--hue-ink:#FF7A1A}
html[data-theme="light"][data-hue="ember"],html[data-theme="hybrid-a"][data-hue="ember"],html[data-theme="light"] [data-hue="ember"],html[data-theme="hybrid-a"] [data-hue="ember"]{--lead:#9A3E00;--hue-ink:#9A3E00}
[data-hue] .body .pull,.body[data-hue] .pull{border-left:4px solid var(--lead);color:var(--fg)}
[data-hue] .body h2,.body[data-hue] h2{padding-top:14px;border-top:2px solid var(--lead)}
[data-hue] .body h2::before,.body[data-hue] h2::before{content:"";display:block;width:34px;height:2px;background:var(--lead);margin:-16px 0 12px}
[data-hue] .ssrfig svg [fill="#4FC3F7"],[data-hue] .ssrfig svg [fill="#0277BD"]{fill:var(--lead)}
[data-hue] .ssrfig svg [stroke="#4FC3F7"],[data-hue] .ssrfig svg [stroke="#0277BD"]{stroke:var(--lead)}
/* MS-2224 (Michael's watch): ONE LAYER OF TYPE AT A TIME on the Interlinked hero - the slide's words sit on their own near-solid plate,
   the still's own headline no longer shows through them; the same plate in both rooms because the still is dark in both. */
.ilfront .ilslide .iltext{top:auto;right:auto;left:22px;bottom:22px;max-width:640px;padding:22px 24px 20px;background:rgba(10,10,10,.9);border:1px solid var(--edge);border-radius:3px;display:block}
.ilfront .ilslide .ilshade{background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 45%,rgba(0,0,0,0) 80%)}
@media (max-width:900px){.ilfront .ilslide .iltext{left:10px;right:10px;bottom:10px;max-width:none;padding:14px 16px}}
@media (max-width:900px){.ilfront .ilhero{aspect-ratio:3/4}}   /* MS-2224: room for the still above the words' plate on a phone */

/* MS-2230: THE HUE SYSTEM IS LAW - each investigation's poster hue in the named slots; the light-room variant darkened to 4.5:1 on white. */
[data-hue="violet"]{--lead:#9B6CFF;--hue-ink:#9B6CFF}
html[data-theme="light"][data-hue="violet"],html[data-theme="hybrid-a"][data-hue="violet"],html[data-theme="light"] [data-hue="violet"],html[data-theme="hybrid-a"] [data-hue="violet"]{--lead:#855CDB;--hue-ink:#855CDB}
[data-hue="crimson"]{--lead:#FF3B5C;--hue-ink:#FF3B5C}
html[data-theme="light"][data-hue="crimson"],html[data-theme="hybrid-a"][data-hue="crimson"],html[data-theme="light"] [data-hue="crimson"],html[data-theme="hybrid-a"] [data-hue="crimson"]{--lead:#DB324F;--hue-ink:#DB324F}
[data-hue="teal"]{--lead:#2EE6D6;--hue-ink:#2EE6D6}
html[data-theme="light"][data-hue="teal"],html[data-theme="hybrid-a"][data-hue="teal"],html[data-theme="light"] [data-hue="teal"],html[data-theme="hybrid-a"] [data-hue="teal"]{--lead:#198077;--hue-ink:#198077}
[data-hue="signal-green"]{--lead:#3DFF7A;--hue-ink:#3DFF7A}
html[data-theme="light"][data-hue="signal-green"],html[data-theme="hybrid-a"][data-hue="signal-green"],html[data-theme="light"] [data-hue="signal-green"],html[data-theme="hybrid-a"] [data-hue="signal-green"]{--lead:#1F843F;--hue-ink:#1F843F}
[data-hue="amber"]{--lead:#FFC107;--hue-ink:#FFC107}
html[data-theme="light"][data-hue="amber"],html[data-theme="hybrid-a"][data-hue="amber"],html[data-theme="light"] [data-hue="amber"],html[data-theme="hybrid-a"] [data-hue="amber"]{--lead:#936F04;--hue-ink:#936F04}
[data-hue="magenta"]{--lead:#FF3FD6;--hue-ink:#FF3FD6}
html[data-theme="light"][data-hue="magenta"],html[data-theme="hybrid-a"][data-hue="magenta"],html[data-theme="light"] [data-hue="magenta"],html[data-theme="hybrid-a"] [data-hue="magenta"]{--lead:#CB32AB;--hue-ink:#CB32AB}
[data-hue="ice-blue"]{--lead:#7FD8FF;--hue-ink:#7FD8FF}
html[data-theme="light"][data-hue="ice-blue"],html[data-theme="hybrid-a"][data-hue="ice-blue"],html[data-theme="light"] [data-hue="ice-blue"],html[data-theme="hybrid-a"] [data-hue="ice-blue"]{--lead:#497D93;--hue-ink:#497D93}
[data-hue="silver"]{--lead:#C9CED6;--hue-ink:#C9CED6}
[data-hue="water-blue"]{--lead:#3B8BFF;--hue-ink:#3B8BFF}
[data-hue="blood-red"]{--lead:#D0202E;--hue-ink:#D0202E}
[data-hue="molten-copper"]{--lead:#D9843A;--hue-ink:#D9843A}
html[data-theme="light"][data-hue="molten-copper"],html[data-theme="hybrid-a"][data-hue="molten-copper"],html[data-theme="light"] [data-hue="molten-copper"],html[data-theme="hybrid-a"] [data-hue="molten-copper"]{--lead:#7C4A14;--hue-ink:#7C4A14}   /* MS-2310: The Needle's Eye - molten copper, a bronze beside the ember's orange */
[data-hue="deep-navy"]{--lead:#5B74E8;--hue-ink:#5B74E8}
html[data-theme="light"][data-hue="deep-navy"],html[data-theme="hybrid-a"][data-hue="deep-navy"],html[data-theme="light"] [data-hue="deep-navy"],html[data-theme="hybrid-a"] [data-hue="deep-navy"]{--lead:#22307A;--hue-ink:#22307A}   /* MS-2310: The Preemption Play - deep navy, violet-leaning beside the water blue and the ice */
[data-hue="lab-lime"]{--lead:#C6F53A;--hue-ink:#C6F53A}
html[data-theme="light"][data-hue="lab-lime"],html[data-theme="hybrid-a"][data-hue="lab-lime"],html[data-theme="light"] [data-hue="lab-lime"],html[data-theme="hybrid-a"] [data-hue="lab-lime"]{--lead:#5C7A00;--hue-ink:#5C7A00}   /* MS-2310: The Paper Flood - lab lime, yellow-green beside the signal green and the amber */
[data-hue="pink"]{--lead:#D9528A;--hue-ink:#D9528A}
html[data-theme="light"][data-hue="pink"],html[data-theme="hybrid-a"][data-hue="pink"],html[data-theme="light"] [data-hue="pink"],html[data-theme="hybrid-a"] [data-hue="pink"]{--lead:#C2185B;--hue-ink:#C2185B}   /* EP01 THE BRAKE - the fast lane accent, Dial A slot 2; the validated light-room pink */
[data-hue="parchment"]{--lead:#F5EEDC;--hue-ink:#F5EEDC}
html[data-theme="light"][data-hue="parchment"],html[data-theme="hybrid-a"][data-hue="parchment"],html[data-theme="light"] [data-hue="parchment"],html[data-theme="hybrid-a"] [data-hue="parchment"]{--lead:#7A6A3E;--hue-ink:#7A6A3E}   /* MS-2349: The Resignation Letters - parchment, the warm paper-white of a letter; a warm brown in the light room */
[data-hue="steel"]{--lead:#768AA2;--hue-ink:#768AA2}
html[data-theme="light"][data-hue="steel"],html[data-theme="hybrid-a"][data-hue="steel"],html[data-theme="light"] [data-hue="steel"],html[data-theme="hybrid-a"] [data-hue="steel"]{--lead:#3E5068;--hue-ink:#3E5068}   /* MS-2353: The Silence Contracts - steel, cold grey-blue */
[data-hue="harbor"]{--lead:#4ACDA8;--hue-ink:#4ACDA8}
html[data-theme="light"][data-hue="harbor"],html[data-theme="hybrid-a"][data-hue="harbor"],html[data-theme="light"] [data-hue="harbor"],html[data-theme="hybrid-a"] [data-hue="harbor"]{--lead:#1E7A62;--hue-ink:#1E7A62}   /* MS-2354: Where They Land - harbor, landing-light green-teal */
[data-hue="indigo"]{--lead:#6C5CEB;--hue-ink:#6C5CEB}
html[data-theme="light"][data-hue="indigo"],html[data-theme="hybrid-a"][data-hue="indigo"],html[data-theme="light"] [data-hue="indigo"],html[data-theme="hybrid-a"] [data-hue="indigo"]{--lead:#3E32B0;--hue-ink:#3E32B0}   /* MS-2351: What the Machine Sees - indigo, deep blue-violet ink */
html[data-theme="light"][data-hue="blood-red"],html[data-theme="hybrid-a"][data-hue="blood-red"],html[data-theme="light"] [data-hue="blood-red"],html[data-theme="hybrid-a"] [data-hue="blood-red"]{--lead:#8E1420;--hue-ink:#8E1420}   /* MS-2306: By the People - blood red, deeper and bluer-free than the crimson; gold stays the check's */
html[data-theme="light"][data-hue="water-blue"],html[data-theme="hybrid-a"][data-hue="water-blue"],html[data-theme="light"] [data-hue="water-blue"],html[data-theme="hybrid-a"] [data-hue="water-blue"]{--lead:#1F55B8;--hue-ink:#1F55B8}   /* MS-2230: The Water Draw - water blue, deeper than the house cyan and the ice blue; 4.5:1 on white */
html[data-theme="light"][data-hue="silver"],html[data-theme="hybrid-a"][data-hue="silver"],html[data-theme="light"] [data-hue="silver"],html[data-theme="hybrid-a"] [data-hue="silver"]{--lead:#5B6470;--hue-ink:#5B6470}
/* MS-2238: THE POSTER MASTHEAD on house investigations - the poster whole above the title block, no scrim, one layer of type. */
.ovl-heroB.poster{min-height:0;display:block;background:none}
.ovl-heroB.poster::before,.ovl-heroB.poster::after,.ovl-heroB.poster .hart::before,.ovl-heroB.poster .hart::after{display:none}
.ovl-heroB.poster .hart.pwhole{position:relative;inset:auto;height:auto;min-height:0;aspect-ratio:16/9;background:#0A0A0A;overflow:hidden;border-radius:3px}
.ovl-heroB.poster .hart.pwhole img{display:block;width:100%;height:100%;object-fit:cover}
.ovl-heroB.poster .inner{position:relative;padding:22px 0 6px;color:var(--fg)}
html[data-theme="light"] .ovl-heroB.poster .inner,html[data-theme="hybrid-a"] .ovl-heroB.poster .inner{color:var(--fg)}
@media (max-width:720px){.ovl-heroB.poster .inner{padding:16px 0 4px}}
.ovl-heroB.poster h1{color:var(--fg);text-shadow:none}
.ovl-heroB.poster .deck{color:var(--dim)}
.ovl-heroB.poster .meta{color:var(--faint)}
.ovl-heroB.poster .cred{color:rgba(237,237,237,.9)}
main.wrap .ovl-heroB.poster,.article .ovl-heroB.poster{display:block;min-height:0}
main.wrap .ovl-heroB.poster .inner,.article .ovl-heroB.poster .inner{padding:22px 22px 6px}
main.wrap .ovl-heroB.poster .hart.pwhole{margin:0}
/* MS-2249 item 1 (Michael's watch of the live page) · THE POSTER SHOWS WHOLE ON EVERY PATH. On the page the masthead is fixed, so the poster
   clears it as the derived masthead does; the picture keeps its OWN ratio - no box to crop it, no plate to pad it - on the page and in the
   overlay alike; the credit is one slim line under the picture, outside its box, both rooms. MS-2251: the hue selectors above now key on
   any element carrying data-hue, so the fragment opened from a listing carries the piece's hue into the overlay's charts. */
main.article .ovl-heroB.poster{padding-top:var(--mast-h,150px)}
.ovl-heroB.poster .hart.pwhole,.ovl-body .ovl-heroB.poster .hart.pwhole{position:relative;inset:auto;aspect-ratio:auto;height:auto;min-height:0;overflow:visible;background:none;border-radius:3px;margin:0}
.ovl-heroB.poster .hart.pwhole img,.ovl-body .ovl-heroB.poster .hart.pwhole img{display:block;width:100%;height:auto;max-height:none;object-fit:fill;border-radius:3px}
.ovl-heroB.poster .pcred,.ovl-body .ovl-heroB.poster .pcred{display:block;position:static;margin:0;padding:7px 22px 0;font:700 9px "JetBrains Mono",monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);background:none;line-height:1.4}
@media (max-width:720px){.ovl-heroB.poster .pcred{padding:6px 14px 0}}

/* THE SOCIAL CHIPS (Michael MS-2318): house furniture, one list (social.py) feeds the home banner and every footer; no hue of the week */
.schips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.schip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border:1px solid currentColor;border-radius:13px;font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;text-decoration:none!important;transition:background .15s,color .15s,border-color .15s}
.schips-light{margin:14px 0 26px}.schips-light .schip{color:var(--dim,#6C6C6C)}.schips-light .schip:hover{background:#0A0A0A;border-color:#0A0A0A;color:#FFFFFF}
.schips-dark{margin:12px 0 0}.schips-dark .schip{color:var(--dim,#A1A1A1)}   /* MS-2438: the footer's live chips one step up, the dim voice of the room, so the gap to the placeholders is carried by colour and not by hover */.schips-dark .schip:hover{background:#FFFFFF;border-color:#4FC3F7;color:#0A0A0A}
.schip.soon{cursor:default;pointer-events:none;user-select:none}   /* MS-2436: the placeholder chip - a span with no link; no hover, the default cursor, the faint voice of its room */
.schip.soon,.schip.soon:hover{color:var(--faint,#6C6C6C);background:transparent;border-color:currentColor}   /* the faint voice of whichever room the row sits in: #7C7C7C dark, #6C6C6C light (MS-2436) */
.fl .schips{margin-top:12px}
/* THE ROOM SELECTION PLATE (MS-2396 item 5): asked once, remembered under tt-theme */
.roomplate{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);opacity:1;transition:opacity .3s}
.roomplate.off{opacity:0;pointer-events:none}
.roomplate-in{width:min(92vw,520px);background:#0E0E11;border:1px solid rgba(255,255,255,.14);border-radius:4px;padding:30px 32px 28px;color:#F2F2F2;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.roomplate-k{font:800 12px "JetBrains Mono",monospace;letter-spacing:.18em;color:#4FC3F7}
.roomplate-h{margin-top:12px;font:italic 800 clamp(30px,5vw,44px)/1.05 "Barlow Condensed","Barlow Semi Condensed",Barlow,sans-serif;text-transform:uppercase}
.roomplate-p{margin-top:10px;font:500 14px/1.5 Barlow,system-ui,sans-serif;color:#A1A1A1}
.roomplate-b{display:flex;gap:10px;margin-top:22px}.roomplate-b button{flex:1;height:46px;border:1px solid currentColor;background:transparent;color:inherit;font:800 13px "JetBrains Mono",monospace;letter-spacing:.16em;cursor:pointer;border-radius:3px}
.roomplate-b button{display:flex;align-items:center;justify-content:center;gap:10px;background:#141418;color:#F2F2F2;border-color:rgba(255,255,255,.18)}
.roomplate-sw{display:inline-flex;flex-direction:column;gap:3px;width:30px;height:22px;padding:4px;box-sizing:border-box;border-radius:2px;border:1px solid rgba(255,255,255,.25)} .roomplate-sw i{display:block;height:3px;border-radius:1px}
.sw-dark{background:#000000;border-color:rgba(255,255,255,.25)} .sw-dark i:first-child{background:#EDEDED;width:70%} .sw-dark i:last-child{background:#4FC3F7;width:40%}   /* the dark room's tokens: ground #000, type #EDEDED, accent #4FC3F7 */
.sw-light{background:#FFFFFF;border-color:rgba(0,0,0,.25)} .sw-light i:first-child{background:#121212;width:70%} .sw-light i:last-child{background:#0277BD;width:40%}   /* the light room's tokens: ground #FFF, type #121212, accent #0277BD (contract.css) */
.roomplate-x{position:absolute;right:10px;top:8px;width:34px;height:34px;border:0;background:transparent;color:#A1A1A1;font:400 26px/1 Barlow,sans-serif;cursor:pointer} .roomplate-x:hover{color:#FFF} .roomplate-in{position:relative}
.roomplate-b button:hover{outline:2px solid #4FC3F7;outline-offset:1px}
/* THE GRID SWITCH (MS-3922): with the grid off the doors close up - three home doors, two slim doors - no gap where a control was */
.home-doors.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.doors-slim.two{grid-template-columns:repeat(2,minmax(0,1fr))}
/* THE LIBRARY ROW and THE HOMEPAGE'S LATEST EIGHT (MS-3923): a thumbnail and two actions at equal weight; the actions are the article standard's buttons (standard.css) */
.ilcard.ilrow{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:18px;align-items:start}
/* MS-4131: THE QUADRANT. The homepage band draws THE SAME ROW COMPONENT as the library - same fields, same order, same actions -
   and only its arrangement differs, so the two cannot silently diverge. In the quadrant the card STACKS: the thumbnail on top at full
   card width, the body beneath. The two actions keep their auto-fit rule, so at a narrow card they sit one above the other rather
   than overflowing - which is what put 48px of horizontal scroll on the page the last time this was tried. */
/* the band wrapper is a 1.7fr/1fr grid from the old layout and its second column is EMPTY - that is the dead space to the right
   of the cards. With the quadrant on, the wrapper is one column and the four cards take the whole measure. */
.reads.ilquad{grid-template-columns:minmax(0,1fr)}
.ilquad .ilcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ilquad .ilcard.ilrow{grid-template-columns:minmax(0,1fr);gap:12px;align-content:start}
.ilquad .ilcard.ilrow .ilthumb img{width:100%;height:auto;display:block}
.ilquad .ilcard.ilrow .ilmeta{font-size:10px}
.ilquad.iltrio .ilcards{grid-template-columns:repeat(3,minmax(0,1fr))}   /* MS-4957: three in one row on the homepage */
@media (max-width:820px){.ilquad .ilcards,.ilquad.iltrio .ilcards{grid-template-columns:minmax(0,1fr)}}

.ilcard.ilrow .ilthumb{min-width:0}
.ilcard.ilrow h3{margin:0 0 6px}
.ilcard.ilrow .as-door-actions{margin-top:12px}
.readsband .ilfront{margin-top:0}   /* MS-3953: the homepage band is the library's own rows on the library's own plate - one component, one style */
@media (max-width:760px){.home-doors.three{grid-template-columns:1fr}.doors-slim.two{grid-template-columns:1fr}.ilcard.ilrow{grid-template-columns:1fr}}

/* MS-3940: the SOCIAL tab at zero shows one quiet line - muted text on the page surface, no box, no border, nothing pressable, both rooms (--faint follows the room) */
.hnone.quiet{padding:26px 0;color:var(--faint);background:none;border:0;text-transform:none;letter-spacing:0;font:500 15px/1.5 Barlow,sans-serif}
/* MS-3943: THE WALKER ON THE HOMEPAGE - a reserved space so the page does not jump when it mounts, and one quiet line until it does */
.walkerband .xpane[data-lazy]{min-height:620px;position:relative}
.walkerband .wk-wait{margin:0 0 14px;font:600 11px/1.6 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.walkerband .xpane[data-lazy] .xstage{min-height:420px}
@media (max-width:760px){.walkerband .xpane[data-lazy]{min-height:520px}}

/* THE SOCIAL STACK (MS-4293, MS-4305/4306): ONE CARD, ONE SHAPE. Rail left - the photo, the name, the handle, the door to X;
   the post right - when, the whole text, the provenance. No image, no video, no slot for one. The identity sizes are the
   in-article card's (.as-card: 44px, 15px, 11px) scaled up about 30 percent, as the approved arrangement asks. */
.c3page .xsoc[hidden]{display:none}
.c3page .xsoc-cards{display:flex;flex-direction:column}
.c3page .xsc{display:grid;grid-template-columns:232px minmax(0,1fr);gap:28px;padding:22px 0;border-top:1px solid var(--edge)}
.c3page .xsc-rail{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.c3page .xsc-av{width:58px;height:58px;border-radius:50%;object-fit:cover;background:var(--fill);display:block}
.c3page .xsc-name{font:700 20px/1.2 Barlow,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji';color:var(--fg);overflow-wrap:anywhere}
.c3page .xsc-handle{font:600 14px/1.4 "JetBrains Mono",monospace;letter-spacing:.04em;color:var(--faint);overflow-wrap:anywhere}
.c3page .xsc-open{margin-top:auto;font:700 var(--t-micro)/1.3 "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--fg);
  text-decoration:none;border:1px solid var(--edge);padding:8px 10px;white-space:nowrap}
.c3page .xsc-open:hover{border-color:var(--s1);color:var(--s1)}
.c3page .xsc-post{min-width:0;display:flex;flex-direction:column;gap:10px}
.c3page .xsc-when{font:700 var(--t-micro)/1.3 "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--faint)}
.c3page .xsc-text{margin:0;font-size:21px;font-family:Barlow,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji';line-height:1.5;color:var(--fg);overflow-wrap:anywhere}
.c3page .xsc-prov{margin-top:auto;font:600 var(--t-micro)/1.5 "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--dim)}
.c3page .xsc-more{margin:18px 0 0;background:none;border:1px solid var(--fg);color:var(--fg);padding:10px 16px;
  font:700 11px "JetBrains Mono",monospace;letter-spacing:.12em;cursor:pointer}
.c3page .xsc-more[hidden]{display:none}
@media (max-width:700px){.c3page .xsc{grid-template-columns:1fr;gap:12px}}
/* THE NEWS CARDS (MS-4499): four per category page, the title off, headline · outlet · date · link out. Still: no scroll, no ticker. */
.dk-newsrow{grid-template-columns:repeat(var(--dk-n,4),minmax(0,1fr))}
.dk-news .cdoorlink{display:flex;flex-direction:column;justify-content:space-between;gap:12px;min-height:132px;padding:16px 14px 14px}
.dk-news .nh{font:600 15.5px/1.32 Barlow,sans-serif;color:var(--fg);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.dk-news .nm{font:700 9px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--plate-faint)}
.dk-news:hover .nh{color:var(--s1)}
.dk-news.down{cursor:default} .dk-news.down .nh{color:var(--plate-dim);font-weight:500}
@media(max-width:900px){.dk-newsrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.dk-newsrow{grid-template-columns:minmax(0,1fr)}}

/* ══ THE PLAYERS CARD (MS-4551 rulings 1-5; MS-4588 the layout; MS-4686; Michael's arrangement ruling MS-4697: FIVE ACROSS,
   the photographs and names up big, the role legible; MS-4698: the photo is the link). One full-width card; a grid, left to right
   then wrap; paged by anchors; three parts per card and nothing else. Tokens only. */
.c3sec.c3room .c3body{padding:0 0 18px}
.plr-law{font:600 18px/1.45 Barlow,sans-serif;color:var(--fg);margin:0 0 18px;max-width:1100px}   /* ruling 2, in type a reader reads */
.soc-law{font:500 15px/1.6 Barlow,sans-serif;color:var(--fg);margin:0 0 16px;max-width:1100px}
.plr-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:0 0 18px;align-items:end}   /* MS-4700: six full-width buttons, the lanes */
/* MS-4979 (Michael): the buttons wear the site's standard - white when not chosen, charcoal when chosen (the nav bar's own look) - and a short
   footprint bar stands on each: the lane's count of players. Charcoal bars, the chosen lane's bar cyan. */
.plr-lane{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;text-decoration:none;--lb:var(--card);--lc:var(--fg);--le:var(--edge);--bar:#3a3d42}
.plr-bar{display:block;width:100%;background:var(--bar);position:relative;border-radius:2px 2px 0 0}
.plr-bar b{position:absolute;left:0;right:0;top:-20px;text-align:center;font:700 13px/1 "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--dim)}
.plr-nav{padding-top:22px;row-gap:30px}   /* the count stands above its bar: room for it, and between rows when the six wrap */
.plr-lbl{display:flex;align-items:center;justify-content:center;min-height:52px;padding:10px 12px;background:var(--lb);color:var(--lc);font:700 14px/1.2 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;text-align:center;border:1px solid var(--le);border-radius:3px}
.plr-lane:hover .plr-lbl,.plr-lane:focus-visible .plr-lbl{border-color:var(--s1)}
.plr-lane:hover{--bar:var(--s1)}
.plr:has(#lane-model-labs:target) .plr-lane[data-lane="model-labs"],.plr:has(#lane-chips:target) .plr-lane[data-lane="chips"],.plr:has(#lane-hyperscalers:target) .plr-lane[data-lane="hyperscalers"],.plr:has(#lane-capital:target) .plr-lane[data-lane="capital"],.plr:has(#lane-policy-politics:target) .plr-lane[data-lane="policy-politics"],.plr:has(#lane-content-producers:target) .plr-lane[data-lane="content-producers"],
.plr:not(:has(.plr-page:target)) .plr-lane[data-lane="model-labs"]{--lb:#121212;--lc:#fff;--le:#121212;--bar:var(--s1)}   /* the chosen lane; the first is open at rest */
.plr:has(#lane-model-labs:target) .plr-lane[data-lane="model-labs"] .plr-lbl,.plr:has(#lane-chips:target) .plr-lane[data-lane="chips"] .plr-lbl,.plr:has(#lane-hyperscalers:target) .plr-lane[data-lane="hyperscalers"] .plr-lbl,.plr:has(#lane-capital:target) .plr-lane[data-lane="capital"] .plr-lbl,.plr:has(#lane-policy-politics:target) .plr-lane[data-lane="policy-politics"] .plr-lbl,.plr:has(#lane-content-producers:target) .plr-lane[data-lane="content-producers"] .plr-lbl,
.plr:not(:has(.plr-page:target)) .plr-lane[data-lane="model-labs"] .plr-lbl{box-shadow:inset 0 -3px 0 var(--s1)}
html[data-theme="dark"] .plr-lane{--bar:#6b7078}
.plr-page{display:none;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 18px;background:var(--card);border:1px solid var(--edge);padding:26px 24px}
.plr-page:target,.plr-page:first-of-type{display:grid}
.plr:has(.plr-page:target) .plr-page:first-of-type:not(:target){display:none}   /* one page at a time: a targeted page hides the first */
.plr-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;min-width:0;padding:8px 4px}
.plr-card img{width:168px;height:168px;max-width:100%;border-radius:50%;object-fit:cover;background:var(--fill);border:1px solid var(--edge);display:block}
.plr-x{position:relative;display:inline-block;border-radius:50%;line-height:0}
.plr-x:hover img,.plr-x:focus-visible img{box-shadow:0 0 0 3px var(--s1)}   /* the cyan ring: it reads as clickable */
.plr-out{position:absolute;right:6px;bottom:10px;width:26px;height:26px;border-radius:50%;background:var(--card);border:1px solid var(--edge);color:var(--fg);font:800 14px/24px "JetBrains Mono",monospace;text-align:center}   /* leaving the site, the arrow the rest of the site uses */
.plr-x:hover .plr-out{border-color:var(--s1);color:var(--s1)}
.plr-name{font:700 20px/1.2 Barlow,sans-serif;color:var(--fg);overflow-wrap:anywhere}
.plr-role{font:500 15px/1.35 Barlow,sans-serif;color:var(--dim);overflow-wrap:anywhere}
.plr-role.plr-null{font:700 11px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--faint)}
.plr-line{display:block;font:500 15px/1.35 Barlow,sans-serif;color:var(--dim);overflow-wrap:anywhere}   /* the brief's two lines: role_source, then context; no role line (posts 65, 74) */
.plr-line.plr-context{font-size:13px;color:var(--faint)}
.plr-method{margin:18px 0 0;border:1px solid var(--edge);background:var(--card)}
.plr-method summary{cursor:pointer;padding:12px 16px;font:700 13px "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.plr-method p{margin:0;padding:0 16px 16px;font:500 15px/1.6 Barlow,sans-serif;color:var(--dim);max-width:1100px}
@media(max-width:1100px){.plr-page{grid-template-columns:repeat(4,minmax(0,1fr))}.plr-card img{width:144px;height:144px}.plr-nav{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.plr-page{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px;padding:18px 14px}.plr-card img{width:120px;height:120px}.plr-name{font-size:17px}}
@media(max-width:520px){.plr-page{grid-template-columns:repeat(2,minmax(0,1fr))}.plr-card img{width:112px;height:112px}.plr-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ══ THE CONVERSATION (MS-4551 SOCIETY; MS-4686): ten themes, the newest titles of each, link out; a source at zero is a finding. */
.soc-gaps{list-style:none;margin:0 0 16px;padding:12px 14px;border:1px solid var(--edge);background:var(--card);font:500 15px/1.6 Barlow,sans-serif;color:var(--fg)}
.soc-gaps .soc-k{font:700 12px "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.soc-gaps b{color:var(--fg);font:700 11px "JetBrains Mono",monospace;letter-spacing:.1em}
.soc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.soc-theme{background:var(--card);border:1px solid var(--edge);padding:14px 16px;min-width:0}
.soc-theme h3{margin:0 0 10px;font:700 13px/1.2 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--fg);display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.soc-theme .soc-n{font:700 11px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--dim);white-space:nowrap}
.soc-theme ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.soc-theme li{display:flex;flex-direction:column;gap:2px;min-width:0}
.soc-theme a{font:600 14px/1.35 Barlow,sans-serif;color:var(--fg);text-decoration:none;overflow-wrap:anywhere}
.soc-theme a:hover{color:var(--s1)}
.soc-m{font:700 11px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.soc-none{font:500 12px Barlow,sans-serif;color:var(--faint)}

/* ══ THE CONSOLE FRAME (MS-4688): the sealed edge is the house's; the inside is Michael's and ships empty. No chrome inside. */
.insv2 .tv2-frameonly{margin-bottom:18px}
.console-frame{display:block;width:100%;min-height:72vh;background:var(--card);border:1px solid var(--edge)}
@media(max-width:700px){.console-frame{min-height:56vh}}

/* ══ INSIDE THE CONSOLE FRAME (MS-4688/MS-4654): the chart, then the discipline as plain rows. No chrome of ours around the chart. */
.console-frame{padding:18px 18px 20px}
/* THE INSTRUMENT CONSOLE (MS-4860; the artefact's shell, console-shell.css): a charcoal title bar and a charcoal rail in BOTH rooms, framing the
   space; cyan over the selected item; the space itself takes the room and carries NO layout rule - only the sealed edge (min-width:0, overflow:auto) */
.icon{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--edge);border-radius:3px;background:var(--card);margin-top:14px}
.icon-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.insv3{padding-top:8px}.insv3 .icon{margin-top:0}
.icon-head{flex:none;background:#1f2226;color:#fff}
.icon-bar{display:flex;align-items:baseline;justify-content:space-between;gap:24px;min-height:72px;padding:18px 24px 16px}
.icon-page{font:italic 800 34px/1 "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.01em;text-transform:uppercase;color:#fff;white-space:nowrap}
.icon-title{margin:0;display:flex;align-items:baseline;justify-content:flex-end;gap:14px;flex-wrap:wrap;min-width:0;text-align:right}
.icon-room{font:italic 800 30px/1 "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.01em;text-transform:uppercase;color:#fff}
.icon-inst{font:italic 800 30px/1 "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.01em;text-transform:uppercase;color:#4fc3f7;overflow-wrap:anywhere}
.icon-tab{border:1px solid var(--edge);border-radius:3px;background:#fff;color:#121212;padding:8px 14px;cursor:pointer;font:700 14px/1.2 Barlow,sans-serif}   /* MS-4841: white filled, cyan filled when selected */
.icon-tab:hover{background:#dff3fd;border-color:#dff3fd}
.icon-tab.on{background:#4fc3f7;border-color:#4fc3f7;color:#04121a}
.icon-body{display:flex;align-items:stretch;min-height:0;height:clamp(640px,calc(100vh - 150px),1500px)}
.icon-nav{flex:0 0 244px;display:flex;flex-direction:column;overflow-y:auto;padding:12px 0;background:#1f2226;color:#EDEDED;border-top:1px solid rgba(255,255,255,.1)}
.icon-cat{display:flex;align-items:center;gap:10px;width:100%;padding:11px 20px;border:0;background:transparent;color:#EDEDED;text-align:left;cursor:pointer;font:700 13px "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase}
.icon-cat .tw{font-size:10px;color:#8d9296;width:10px}
.icon-cat .ct{margin-left:auto;font-weight:400;color:#8d9296}
.icon-cat:hover{background:rgba(255,255,255,.06)}
.icon-items{display:none}.icon-g[data-open="1"] .icon-items{display:block}
.icon-item{display:block;width:100%;padding:8px 20px 8px 40px;border:0;border-left:3px solid transparent;background:transparent;color:#A1A1A1;text-align:left;cursor:pointer;font:500 15px/20px Barlow,sans-serif}
.icon-item:hover{background:rgba(255,255,255,.06);color:#fff}
.icon-item[aria-current="true"]{color:#fff;font-weight:600;border-left-color:#4fc3f7;background:rgba(79,195,247,.22)}
.icon-foot{margin-top:auto;padding:14px 20px 4px;border-top:1px solid rgba(255,255,255,.1)}
.icon-foot button{border:1px solid rgba(255,255,255,.1);border-radius:3px;background:transparent;color:#A1A1A1;padding:8px 10px;cursor:pointer;font:700 13px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase}
.icon-foot button:hover{color:#fff}
/* MS-4987 (Michael, 2 Oct 2026): THE CONSOLE WINDOW IS ALWAYS LIGHT, in both rooms. The rail and the title bar stay dark; the space where the
   instrument draws carries the light room's own colours, so chart lettering is always legible and no chart is ever made twice for two rooms. */
.icon-space{flex:1 1 auto;min-width:0;min-height:0;overflow:auto;background:var(--card);color:var(--fg);color-scheme:light;
  --bg:#FFFFFF;--card:#FFFFFF;--fg:#121212;--dim:#5E5E5E;--faint:#6C6C6C;--edge:rgba(0,0,0,.10);--fill:#FFFFFF;--s1:#0277BD;--line:1px solid rgba(0,0,0,.10)}
/* AN INSTRUMENT IN THE SPACE (MS-4865): small margins, the figure first and large, the discipline under it; nothing under 13px */
.ins{padding:14px 16px 28px;color:var(--fg)}
.ins-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}.ins-tabs[hidden]{display:none}
.ins-fig{border:1px solid var(--edge);border-radius:3px;background:var(--bg);padding:8px;overflow-x:auto;overflow-y:hidden;min-height:340px}   /* a drawing the tool will not make narrower scrolls sideways inside its frame, never cut */
.ins-tags{display:flex;flex-wrap:wrap;gap:8px 22px;margin:14px 0 0;font:500 14px/1.5 Barlow,sans-serif;color:var(--dim)}
.ins-tags b{font:700 13px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--fg);margin-right:6px}
.ins-warn{margin:12px 0 0;font:600 15px/1.5 Barlow,sans-serif;color:#b26a00}

.ins-h{margin:26px 0 8px;padding-bottom:8px;border-bottom:1px solid var(--edge);font:700 13px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--fg)}
.ins-note{margin:0 0 12px;font:500 14px/1.6 Barlow,sans-serif;color:var(--dim)}
.ins-tw{overflow-x:auto;border:1px solid var(--edge);border-radius:3px}
.ins table{border-collapse:collapse;width:100%;font:500 14px/1.4 Barlow,sans-serif}
.ins th,.ins td{text-align:left;padding:7px 12px;border-bottom:1px solid var(--edge);white-space:nowrap}
.ins th{font:700 13px "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);background:var(--card);position:sticky;top:0}
.ins td.n{text-align:right;font:500 13px "JetBrains Mono",monospace}
.ins td a{color:var(--s1);text-decoration:none}.ins td a:hover{text-decoration:underline}
.ins-ns{font:700 13px "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--dim)}
.ins-fresh{width:auto!important;min-width:420px}
/* THE SLICERS (MS-4871): a drop-down above every column of names */
.ins-frow th{padding:6px 8px;background:var(--card);top:35px}
.ins-dd{position:relative;display:inline-block}
.ins-fb{border:1px solid var(--edge);border-radius:3px;background:var(--bg);color:var(--dim);padding:5px 9px;cursor:pointer;font:700 13px "JetBrains Mono",monospace;letter-spacing:.06em;white-space:nowrap;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.ins-fb b{font-weight:700;color:var(--fg)}
.ins-fb.on{border-color:var(--s1)}.ins-fb.on b{color:var(--s1)}
.ins-fp{position:absolute;left:0;top:calc(100% + 6px);z-index:40;display:flex;flex-direction:column;min-width:240px;max-height:340px;overflow-y:auto;overscroll-behavior:contain;background:var(--card);border:1px solid var(--edge);border-radius:3px;box-shadow:0 12px 32px rgba(0,0,0,.28);padding:6px 0;text-transform:none;letter-spacing:0}
.ins-fp[hidden]{display:none}
.ins-opt{display:flex;align-items:center;gap:10px;padding:6px 12px;font:500 14px/1.2 Barlow,sans-serif;color:var(--fg);cursor:pointer;white-space:nowrap}
.ins-opt:hover{background:var(--fill)}
.ins-opt input{accent-color:#4fc3f7;width:16px;height:16px;margin:0;flex:0 0 auto}
.ins-opt span{flex:1 1 auto}.ins-opt i{font:700 13px "JetBrains Mono",monospace;font-style:normal;color:var(--dim)}
.ins-fc{align-self:flex-start;margin:4px 12px 8px;border:1px solid var(--edge);border-radius:3px;background:transparent;color:var(--s1);padding:4px 10px;cursor:pointer;font:700 13px "JetBrains Mono",monospace}
.ins-tw{min-height:420px}
.ins-says{margin:0 0 12px;font:500 16px/1.5 Barlow,sans-serif;color:var(--dim);max-width:1100px}.ins-says:empty{display:none}
/* THE SLICERS ABOVE THE CHART (MS-4873) */
.ins-slice{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 12px;padding:10px 12px;border:1px solid var(--edge);border-radius:3px;background:var(--fill)}
.ins-sl{font:700 13px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--dim);margin-right:8px}
.ins-slice .ins-fb{max-width:260px;padding:7px 11px}
.ins-slice .ins-fp{min-width:300px;max-height:420px}
.ins-reset{margin:0!important;align-self:center!important}
.ins-sn{margin-left:auto;font:500 14px Barlow,sans-serif;color:var(--dim)}
.ins-fail{margin:24px;font:600 16px/1.5 Barlow,sans-serif;color:var(--fg)}
@media(max-width:980px){.icon-body{flex-direction:column;height:auto}.icon-nav{flex:none;max-height:40vh}.icon-space{flex:none;height:70vh}}
.cs-chart{min-height:200px}
.cs-wait,.cs-empty{font:600 15px/1.5 Barlow,sans-serif;color:var(--dim);margin:0}
.cs-box{min-width:0;overflow:auto}
.cs-tags{display:flex;flex-wrap:wrap;gap:8px 22px;margin:14px 0 0;font:600 13.5px/1.5 "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}   /* MS-4700: no micro text; 13.5px is the floor here */
.cs-tags b{color:var(--fg)}
.cs-warn{margin:10px 0 0;font:600 15px/1.5 Barlow,sans-serif;color:var(--s2,#FFB74D)}
.cs-table{margin:16px 0 0;border:1px solid var(--edge)}
.cs-table summary{cursor:pointer;padding:12px 14px;font:700 12px "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.cs-tw{max-height:520px;overflow:auto;border-top:1px solid var(--edge)}
.cs-tw table{border-collapse:collapse;width:100%;font:500 13.5px/1.4 Barlow,sans-serif;color:var(--fg)}
.cs-tw th,.cs-tw td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--edge);white-space:nowrap}
.cs-tw th{font:700 10px "JetBrains Mono",monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);position:sticky;top:0;background:var(--card)}
.cs-tw td.n{text-align:right;font:600 12.5px "JetBrains Mono",monospace}
.cs-ns,.cs-null{font:700 11px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--dim)}
.cs-fresh{margin:16px 0 0;border-collapse:collapse;font:500 14px Barlow,sans-serif;color:var(--fg)}
.cs-fresh th{font:700 10px "JetBrains Mono",monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);text-align:left;padding:6px 14px 6px 0}
.cs-fresh td{padding:6px 14px 6px 0;font:600 13px "JetBrains Mono",monospace}

/* ══ A ROOM WITHOUT A HERO (MS-4755): the title alone above the faces; the gap beneath is white space, not a slot. */
.top.top-bare{padding-bottom:6px}
.top.top-bare .ptitle{margin-bottom:0}
.top.top-bare .tv2-tag-bare{margin:10px 0 0}   /* MS-4763: the banner under the title, the full width, no collapse control (nothing left to collapse) */
.soc-method{margin:18px 0 0;border:1px solid var(--edge);background:var(--card)}   /* MS-4765: the record's method, behind a collapse, under the themes */
.soc-method summary{cursor:pointer;padding:12px 16px;font:700 13px "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.soc-method .soc-law{margin:0;padding:0 16px 14px}
.soc-method .soc-gaps{margin:0 16px 16px}

/* ══ THE CATEGORY PAGE CONTAINERS (MS-4751/4768/4778): three boxes that scroll inside themselves; nothing expands; the page below never moves. */
.catpage{display:flex;flex-direction:column;gap:22px;margin:4px 0 18px}   /* the wrapper is .catpage: .cat is the nav link's class */
.cat-sec{min-width:0}
.cat-head{display:flex;align-items:baseline;gap:14px;padding:12px 0;border-top:1px solid var(--edge)}
.cat-head h2{margin:0;font:700 14px "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--fg)}
.cat-sub{font:700 12px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--dim)}
.cat-box{display:grid;grid-template-columns:repeat(var(--cat-across,3),minmax(0,1fr));gap:16px;align-content:start;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--edge);background:var(--card);padding:16px;
  max-height:calc(var(--cat-rows,2) * var(--cat-row-h,300px) + (var(--cat-rows,2) - 1) * 16px + 32px)}
.cat-articles{--cat-row-h:300px}.cat-sourced{--cat-row-h:232px}.cat-social{--cat-row-h:250px}.cat-video{--cat-row-h:260px}.cat-articles.cat-std{--cat-row-h:372px}
.cat-card{display:flex;flex-direction:column;gap:8px;min-width:0;height:var(--cat-row-h,300px);overflow:hidden;text-decoration:none;color:var(--fg);border:1px solid var(--edge);background:var(--bg,transparent)}
.cat-card img,.cat-noimg{display:block;width:100%;height:140px;object-fit:cover;background:var(--fill)}
.cat-vcard img,.cat-vcard .cat-noimg{height:160px}
.cat-card .cat-t{font:700 17px/1.25 Barlow,sans-serif;padding:0 12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cat-card .cat-d{font:500 14px/1.4 Barlow,sans-serif;color:var(--dim);padding:0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cat-card .cat-m,.cat-item .cat-m{font:700 10.5px "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:0 12px 12px;margin-top:auto}
.cat-card:hover .cat-t{color:var(--s1)}
.cat-item{display:flex;flex-direction:column;gap:7px;min-width:0;height:var(--cat-row-h,232px);overflow:hidden;border:1px solid var(--edge);padding:12px 0 0}
.cat-item .cat-src{align-self:flex-start;margin:0 12px;font:700 10px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--dim)}
.cat-item .cat-t{font:700 15.5px/1.3 Barlow,sans-serif;color:var(--fg);text-decoration:none;padding:0 12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.cat-item .cat-t:hover{color:var(--s1)}
.cat-item .cat-s{font:500 13.5px/1.45 Barlow,sans-serif;color:var(--dim);padding:0 12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.cat-item .cat-m{padding:0 12px 10px}
/* THE STORY ROOM (Michael's wireframe CATEGORY-PAGE-WIREFRAME-V2, MS-4826): the container head is a black bar, the label then the count;
   the article card is art 16:9 · date and minutes · title · standfirst · byline; the social card is photo · name · handle · text · THE POST */
.cat-std .cat-head{align-items:center;gap:18px;padding:11px 16px;border-top:0;background:#1f2226;border-radius:4px;margin:0 0 12px}   /* MS-4828: the top band's own title bar (.tv2-tag) */
html[data-theme="dark"] .cat-std .cat-head{border:1px solid #333333}
.cat-std .cat-head h2{color:#fff;font-size:13px;letter-spacing:3px}
.cat-std .cat-sub{color:#4fc3f7;font-size:13px}
.cat-std .cat-tog{margin-left:auto;flex:0 0 auto;width:24px;height:24px;min-height:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.35);color:#4fc3f7;background:transparent;font:700 15px/1 "JetBrains Mono",monospace;border-radius:2px;padding:0;cursor:pointer}
.cat-std .cat-tog:hover{border-color:#4fc3f7}
.cat-sec.closed .cat-box{display:none}
/* MS-4841: with a mouse the page keeps the wheel; the boxes move on their arrows. A touch screen keeps the finger scroll (no arrows needed there, but they work). */
@media (hover:hover) and (pointer:fine){.cat-std.cat-paged .cat-box{overflow-y:hidden;overscroll-behavior:auto}}
.cat-pg{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.cat-pg[hidden]{display:none}
.cat-pg + .cat-tog{margin-left:8px}
.cat-pos{font:700 13px "JetBrains Mono",monospace;letter-spacing:.1em;color:#A1A1A1;margin-right:6px;white-space:nowrap}
.cat-std .cat-arw{flex:0 0 auto;width:24px;height:24px;min-height:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.35);color:#4fc3f7;background:transparent;font:700 10px/1 "JetBrains Mono",monospace;border-radius:2px;padding:0;cursor:pointer}
.cat-std .cat-arw:hover{border-color:#4fc3f7}
.cat-std .cat-arw:disabled{opacity:.3;cursor:default;border-color:rgba(255,255,255,.35)}
.cat-sec.closed .cat-pg{display:none}
/* MS-4845: the WHO and WHEN drop-downs in the SOCIAL bar */
.cat-filt{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.cat-filt + .cat-tog{margin-left:8px}
.cat-sec.closed .cat-filt{display:none}
.cat-dd{position:relative;display:inline-block}
.cat-ddb{border:1px solid rgba(255,255,255,.35);background:transparent;color:#A1A1A1;height:24px;padding:0 10px;font:700 13px "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;border-radius:2px;cursor:pointer;white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis}
.cat-ddb b{color:#4fc3f7;font-weight:700}
.cat-ddb:hover,.cat-ddb[aria-expanded="true"]{border-color:#4fc3f7}
.cat-ddp{position:absolute;right:0;top:calc(100% + 8px);z-index:50;display:flex;flex-direction:column;min-width:280px;max-height:380px;overflow-y:auto;overscroll-behavior:contain;background:#1f2226;border:1px solid #4a4e52;box-shadow:0 12px 32px rgba(0,0,0,.45);padding:6px 0}
.cat-ddp[hidden]{display:none}
.cat-opt{display:flex;align-items:center;gap:10px;padding:7px 14px;font:500 15px/1.2 Barlow,sans-serif;color:#EDEDED;cursor:pointer;white-space:nowrap}
.cat-opt:hover{background:rgba(255,255,255,.07)}
.cat-opt input{accent-color:#4fc3f7;width:16px;height:16px;margin:0;flex:0 0 auto}
.cat-opt span{flex:1 1 auto}
.cat-opt i{font:700 13px "JetBrains Mono",monospace;font-style:normal;color:#8d9296}
.cat-ddc{align-self:flex-start;margin:4px 14px 8px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#4fc3f7;padding:4px 10px;font:700 13px "JetBrains Mono",monospace;letter-spacing:.08em;border-radius:2px;cursor:pointer}
.cat-item[hidden]{display:none}
/* MS-4854: the source's mark top left of a sourced card, the chip and the play button top right */
.cat-stop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px;min-width:0}
.cat-sq .cat-stop{padding:0}
.cat-ico{display:block;width:44px;height:44px;flex:0 0 44px}
.cat-ico-none{border-radius:50%;background:var(--fill)}
.cat-sright{display:inline-flex;align-items:center;gap:8px;min-width:0}
.cat-stop .cat-src,.cat-stop .cat-play{margin:0;align-self:center}
.cat-pair .cat-sourced{--cat-row-h:280px}
@media(max-width:700px){.cat-std .cat-head{flex-wrap:wrap;row-gap:10px}.cat-filt{order:3;margin-left:0;flex:1 1 100%;flex-wrap:wrap}.cat-std .cat-head .cat-tog{margin-left:auto}.cat-ddp{right:auto;left:0;min-width:240px;max-width:calc(100vw - 48px)}.cat-ddb{max-width:calc(100vw - 60px)}}
/* THE FEATURE ROW (MS-4830): the Walker at two thirds, the feature video at one third, under the top title bar */
.top.top-v2.top-feat .tv2{grid-template-columns:minmax(0,9fr) minmax(0,11fr)}   /* MS-4834: the chart narrower, the video wider, so the level row stands taller */
.top.top-feat.closed .feat-v,.top.top-feat.closed .feat-w{display:none}
.feat-w{min-width:0;position:relative;background:#0c0d0e;border:1px solid #333;overflow:hidden}   /* MS-4832: dark in both rooms, no controls, level with the video window */
.feat-w .xpane{position:absolute;inset:44px 0 0 0}
.feat-tabs{position:absolute;left:0;right:0;top:0;height:44px;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid #333}   /* MS-4839: the top of the card is the chart buttons' */
.feat-tab{border:1px solid rgba(255,255,255,.25);background:transparent;color:#A1A1A1;padding:6px 12px;font:700 13px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;border-radius:2px;cursor:pointer}
.feat-tab.on{border-color:#4fc3f7;color:#4fc3f7}
.feat-tab:hover{color:#fff}
/* THE ROOM'S OWN CHARTS (a proposal on Economics): MS-4841 - white filled buttons, cyan filled when chosen, lined up with the chart's left edge, a hair lower */
.feat-cc .feat-tabs{height:52px;padding:8px 16px 0;border-bottom:0;align-items:center}
.feat-cc .feat-tab{border:1px solid #fff;background:#fff;color:#121212;padding:7px 12px;font:700 13px/1.2 Barlow,sans-serif;letter-spacing:0;text-transform:none;border-radius:3px}
.feat-cc .feat-tab:hover{background:#dff3fd;border-color:#dff3fd;color:#121212}
.feat-cc .feat-tab.on{background:#4fc3f7;border-color:#4fc3f7;color:#04121a}
.feat-more{margin-left:auto;font:700 13px "JetBrains Mono",monospace;letter-spacing:.1em;color:#4fc3f7;text-decoration:none;white-space:nowrap}
.feat-more:hover{text-decoration:underline}
.feat-stage{position:absolute;inset:52px 8px 8px 12px;overflow:hidden}
/* MS-5017: a room with no feature video and no house article - the chart card takes the full row under the title bar; the social
   section stands alone at full width when the room has no film */
.top.top-v2.top-feat .tv2:has(.feat-none){grid-template-columns:minmax(0,1fr)}
.top.top-v2.top-feat .tv2 .feat-v.feat-none{display:none!important}
.top.top-v2.top-feat .tv2:has(.feat-none) .tv2-l{min-height:0}
.top.top-v2.top-feat .tv2:has(.feat-none) .feat-w{height:460px}
.cat-pair.solo{grid-template-columns:minmax(0,1fr)}
/* MS-4956: the homepage's instrument charts, one card per room, under a dark bar that names the room */
.home-cc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.home-cc-grid.n2{grid-template-columns:repeat(2,minmax(0,1fr))}.home-cc-grid.n1{grid-template-columns:minmax(0,1fr)}
.home-cc{min-width:0}
.home-cc-h{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#121212;border:1px solid #333;border-bottom:0;border-top:2px solid #4fc3f7;padding:9px 14px}
.home-cc-h a{font:700 17px/1.1 "Barlow Condensed",Barlow,sans-serif;letter-spacing:.06em;color:#fff;text-decoration:none}
.home-cc-h a.home-cc-go{font:700 13px "JetBrains Mono",monospace;letter-spacing:.1em;color:#4fc3f7}
.home-cc-h a:hover{text-decoration:underline}
.home-cc .feat-w{height:380px}
@media(max-width:1100px){.home-cc-grid,.home-cc-grid.n2{grid-template-columns:minmax(0,1fr)}.home-cc .feat-w{height:340px}}
/* phone width (the pre-ship pass): the card's three buttons fit; the way into the console is left off a phone, where the console is not built to be used */
@media(max-width:700px){.feat-more{display:none}.feat-cc .feat-tabs{padding:8px 10px 0;gap:6px}.feat-cc .feat-tab{padding:6px 8px}.ins-fresh{min-width:0!important}.ins-fresh th,.ins-fresh td{white-space:normal;overflow-wrap:anywhere}}
.cc-fail{margin:16px;font:600 15px/1.5 Barlow,sans-serif;color:#C8C8C8}
.feat-w .xrail,.feat-w .xread{display:none!important}
.feat-w .xlens-body{display:block!important}
.feat-w .wkmount,.feat-w .wkmount.on{min-height:0;border:0!important;background:transparent!important;padding:8px 8px 8px 8px}
.feat-w .wkmount .wkwait{color:#6C6C6C}
.feat-w .wk-null,.feat-w .hgrp:last-child,.feat-w .xkey,.feat-w [data-wk-furn],.feat-w .xattrib{display:none!important}   /* method is not page furniture (MS-4765): the notes and the spec stay on the Explorer */
.feat-w .xlens-body{grid-template-columns:170px minmax(0,1fr);gap:16px}
.feat-v{min-width:0;border:1px solid #333;background:#000}
/* MS-4848: no video in the room - the newest house article stands in the video's window */
.feat-art{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;text-decoration:none;color:#fff}
.feat-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feat-ov{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:8px;padding:48px 20px 18px;background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.88))}
.feat-art .feat-k{padding:0!important;color:#4fc3f7}
.feat-art .feat-t{font:italic 800 26px/1.1 Barlow,sans-serif;color:#fff}
.feat-art:hover .feat-t{color:#4fc3f7}
.feat-art .cat-empty{padding:20px}
.feat-v video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.feat-v > span,.feat-v > a{padding:0 16px}
.feat-k,.feat-m{font:700 13px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.feat-k{padding-top:8px!important}
.feat-t{font:italic 800 24px/1.1 Barlow,sans-serif;color:var(--fg);text-decoration:none}
.feat-t:hover{color:var(--s1)}
.feat-d{font:500 15px/1.45 Barlow,sans-serif;color:var(--dim)}
@media(max-width:900px){.top.top-v2.top-feat .tv2{grid-template-columns:minmax(0,1fr)}.feat-w{height:320px;order:2}}
/* THE VIDEO CARDS (MS-4832): three across, the poster at 16:9, a click plays the film in a pop-up */
.cat-video.cat-std{--cat-row-h:auto}
/* MS-4843: SOCIAL at two thirds and VIDEO at one third share the foot of the page; three films show, stacked, and SOCIAL stands as tall */
.cat-pair{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:22px;align-items:stretch}
.cat-pair .cat-sec{display:flex;flex-direction:column;min-width:0}
.cat-pair .cat-box{overscroll-behavior:auto;grid-template-columns:repeat(var(--cat-across,3),minmax(0,1fr))}
.cat-pair .cat-video{container-type:inline-size}
.cat-pair .cat-video .cat-box{max-height:calc(3 * ((100cqw - 34px) * .5625 + 74px) + 66px)}
.cat-pair .cat-box{grid-auto-rows:max-content}.cat-pair .cat-vpop > *{flex:0 0 auto}
.cat-pair .cat-social{--cat-row-h:320px}.cat-pair .cat-sourced{--cat-row-h:250px}
.cat-pair .cat-social .cat-box,.cat-pair .cat-sourced .cat-box{flex:1 1 0;height:0;min-height:688px;max-height:none}   /* never under two rows, whatever VIDEO holds */
.cat-pair .cat-social .cat-x{-webkit-line-clamp:6}
.cat-xfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font:700 13px "JetBrains Mono",monospace;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.cat-xfoot{flex-wrap:wrap;row-gap:4px}.cat-xfoot .cat-lk{margin-top:0;letter-spacing:.06em}
@media(max-width:1100px){.cat-pair{grid-template-columns:minmax(0,1fr)}.cat-pair .cat-social .cat-box,.cat-pair .cat-sourced .cat-box{flex:0 0 auto;height:auto;max-height:964px}.cat-pair .cat-social,.cat-pair .cat-sourced{--cat-across:2!important}}
@media(max-width:600px){.cat-pair .cat-social,.cat-pair .cat-sourced{--cat-across:1!important}}
.cat-vpop .cat-t{display:block!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feat-w .xpane,.feat-w .xstage,.feat-w .xlens-body,.feat-w .wkhost{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
.cat-vpop{height:auto;gap:0;cursor:pointer}
.cat-vthumb{position:relative;display:block}
.cat-vpop .cat-vthumb img,.cat-vpop .cat-vthumb .cat-noimg{height:auto;aspect-ratio:16/9;object-position:top}
.cat-vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.5);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;padding-left:4px}
.cat-vpop:hover .cat-vplay{border-color:#4fc3f7;color:#4fc3f7}
.cat-vpop .cat-t{font:700 18px/1.25 Barlow,sans-serif;padding:12px 14px 6px}
.cat-vpop .cat-f{font:700 13px "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:0 14px 14px}
.cat-pop{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.82);padding:24px}
.cat-pop-in{position:relative;width:min(1100px,100%);background:#000;border:1px solid #333;border-radius:var(--radius);overflow:hidden}      /* the site's one radius (it was square, and its close button 2px) */
.cat-pop video{display:block;width:100%;max-height:calc(100vh - 140px);background:#000}
.cat-pop-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:#1f2226;color:#fff;font:700 16px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase}
.cat-pop-x{width:28px;height:28px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#4fc3f7;font:700 16px/1 "JetBrains Mono",monospace;cursor:pointer;border-radius:var(--radius)}
.cat-pop-x:hover{border-color:#4fc3f7}
/* THE FOUR X CARDS (MS-4830): square, the whole message, scrolling inside the card when it is long */
.cat-squares .cat-box{max-height:none;overflow:visible}
.cat-sq{display:flex;flex-direction:column;gap:12px;min-width:0;height:290px;overflow:hidden;border:1px solid var(--edge);background:var(--bg,transparent);padding:18px}
.cat-sqwho{display:flex;align-items:center;gap:12px;min-width:0}
.cat-sqwho > div{display:flex;flex-direction:column;min-width:0}
.cat-sq .cat-av{width:56px;height:56px;flex:0 0 56px}
.cat-sq .cat-nm{font-size:18px;margin-top:0}
.cat-sqtxt{flex:1 1 auto;min-height:0;margin:0;overflow-y:auto;overscroll-behavior:contain;font:500 15px/1.45 Barlow,sans-serif;color:var(--fg);overflow-wrap:anywhere}
.cat-sqfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;font:700 13px "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.cat-sqfoot .cat-lk{margin-top:0}
.cat-sqt{font:700 19px/1.25 Barlow,sans-serif;color:var(--fg);text-decoration:none;overflow-wrap:anywhere}.cat-sqt:hover{color:var(--s1)}.cat-sq .cat-src{margin:0}.cat-sqfoot > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cat-sqfoot time,.cat-sqfoot .cat-lk{white-space:nowrap}
.cat-sqfoot time{letter-spacing:0}
.top-feat .feat-w.explorer{margin-top:0}.feat-w .xpane{margin:0;padding:0;min-height:0}.feat-w .xread{margin-top:0}
.cat-sec.closed .cat-head{margin-bottom:0}
.cat-acard{gap:0}
.cat-acard img,.cat-acard .cat-noimg{height:auto;aspect-ratio:16/9;flex:0 0 auto}
.cat-acard .cat-w,.cat-acard .cat-f{font:700 13px "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:14px 14px 0}
.cat-acard .cat-f{margin-top:auto;padding:0 14px 14px}
.cat-acard .cat-t{font:italic 800 20px/1.1 Barlow,sans-serif;padding:8px 14px;-webkit-line-clamp:2}
.cat-acard .cat-d{padding:0 14px;-webkit-line-clamp:2}
.cat-xcard{justify-content:space-between;gap:0;padding:16px}
.cat-xtop{display:flex;flex-direction:column;min-width:0}
.cat-av{display:block;width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--fill)}
.cat-nm{font:700 16px/1.2 Barlow,sans-serif;color:var(--fg);margin-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-hd{font:500 13px/1.3 Barlow,sans-serif;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-x{font:500 14px/1.45 Barlow,sans-serif;color:var(--dim);margin-top:10px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.cat-lk{font:700 13px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--dim);text-decoration:none;margin-top:12px}
.cat-lk:hover{color:var(--s1)}
.cat-empty{grid-column:1/-1;margin:0;font:600 15px/1.5 Barlow,sans-serif;color:var(--dim)}
@media(max-width:1000px){.cat-box{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.cat-box{grid-template-columns:minmax(0,1fr)}}
.cat-play{align-self:flex-start;margin:0 12px;border:1px solid var(--edge);background:var(--card);color:var(--fg);padding:6px 10px;font:700 11px "JetBrains Mono",monospace;letter-spacing:.12em;cursor:pointer}
.cat-play:hover{border-color:var(--s1);color:var(--s1)}
.cat-embed{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}
.cat-item.playing{height:auto}
/* THE FOOTER'S BUTTONS AND LETTERING (Michael, bus posts 490, 492, 494; 10 October 2026). The social buttons are SQUARE and match
   the top navigation buttons, not pills: the control standard's shape (the .cat rule above: the token's radius, the hairline border,
   25px times the page scale high), the shape the footer's own Receipts button already has. And nothing in the footer is micro text
   (post 482): its lettering is at the floor, 15px in a window under 700, 16px from there up, 17px from 2200. One footer, every page. */
.fl{--fl-floor:15px}
@media(min-width:700px){.fl{--fl-floor:16px}}
@media(min-width:2200px){.fl{--fl-floor:17px}}
.fl .fltxt{font-size:var(--fl-floor)}
.fl .schip{height:calc(25px * var(--scale,1));min-height:calc(25px * var(--scale,1));padding:0 calc(11px * var(--scale,1));border:var(--line);border-radius:var(--radius);font-size:var(--fl-floor);letter-spacing:.06em}
.fl .schip span{font-size:var(--fl-floor)}
.fl .botnav .cat,.fl .receiptsbtn{font-size:var(--fl-floor)}
@media(max-width:699px){.fl .schip{min-height:44px}}

/* THE MENU (Michael, bus post 699, 10 October 2026; round nav-2026-10-10). Five items in one row at every width from 700 up: Home,
   Interlinked, Players, Sprawl and Esper; the last two each open a drop-down under themselves. The row's count is still handed in
   by the build (--navn), so the columns follow what was printed. THE LETTERING IS AT THE FLOOR (R-017: 16px, 17 from 2200), for the
   five items and for the items in a drop-down, which are square like the buttons and stand on the page's own ground so nothing shows
   through them. The sector numbers are in the monospace face. A drop-down opens on hover where there is a mouse, and by the script
   (phone.js) on a tap, on Enter, Space or the down arrow; Escape and a click elsewhere close it. Below 700 the row gives way to the
   phone menu, where Sprawl and Esper are headings with their items indented under them. */
.catnav{z-index:40}
.catnav .in{grid-template-columns:repeat(var(--navn,5),minmax(0,1fr))}
@media(max-width:1020px){.catnav .in{grid-template-columns:repeat(var(--navn,5),minmax(0,1fr))}}
.catnav .cat{font-size:16px;height:auto;min-height:calc(30px * var(--scale,1));display:flex;align-items:center;justify-content:center;text-decoration:none}
@media(min-width:2200px){.catnav .cat{font-size:17px}}
.catdd{position:relative;min-width:0}
.catdd-top::after{content:"";display:inline-block;margin-left:10px;border:5px solid transparent;border-top-color:currentColor;border-bottom:0;transform:translateY(1px)}
.catdd-menu{display:none;position:absolute;left:0;top:100%;z-index:60;min-width:100%;width:max-content;max-width:calc(100vw - 24px);padding-top:6px;flex-direction:column;gap:4px}
.catdd:last-child .catdd-menu{left:auto;right:0}
.catdd.open > .catdd-menu{display:flex}
@media(hover:hover){.catdd:hover:not(.esc) > .catdd-menu{display:flex}}
.catnav .catdd-menu .cat{justify-content:flex-start;text-align:left;padding-left:14px;padding-right:20px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.catnav .catdd-menu .cat:not(.on){background:var(--bg)}      /* the lit item keeps the menu's own lit look, light on dark or dark on light */
html[data-theme="light"] .catnav .catdd-menu .cat{box-shadow:0 6px 18px rgba(0,0,0,.14)}
.catnav .catdd-menu .cat:hover,.catnav .catdd-menu .cat:focus-visible{border-color:var(--s1);color:var(--s1)}
.catdd-n{font-family:"JetBrains Mono",monospace;font-weight:700;color:var(--s1);margin-right:.3em}
.catnav .catdd-menu .cat.on .catdd-n{color:inherit}
@media(max-width:700px){
  .mmenu .mlinks .cat{justify-content:flex-start;text-align:left}      /* the list reads from the left, so an item under a heading can be seen to stand in from it (it was centred) */
  .mmenu .mlinks .cat.mhead{font-weight:800}
  .mmenu .mlinks .cat.mhead::after{display:none}
  .mmenu .mlinks .cat.msub{padding-left:38px;min-height:48px}
  .mmenu .mlinks .cat.msub .catdd-n{margin-right:.3em}
}
/* the two blank landing pages (bus post 699): a title band and nothing else. The pre-title is in the monospace face at the lettering
   floor (R-017); the line under the title is the copy's size. */
.lp-band{min-height:38vh}
.lp-pre{font:700 16px/1.4 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 10px}
.lp-line{margin:16px 0 0;font:500 calc(17.5px * var(--scale,1))/1.5 Barlow,sans-serif;color:var(--fg);max-width:60ch}
@media(max-width:699px){.lp-pre{font-size:15px}}
@media(min-width:2200px){.lp-pre{font-size:17px}}
/* the home page's films open in the one video pop-up (bus post 612): each is its poster as a button, with a plain play label */
.ytplay{position:relative;display:block;width:100%;padding:0;border:1px solid var(--edge);border-radius:var(--radius);background:#000;cursor:pointer;overflow:hidden}
.ytplay img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#000}
.ytplay-go{position:absolute;left:14px;bottom:12px;display:inline-flex;align-items:center;gap:10px;color:#fff;font:700 16px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.ytplay-go b{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#4fc3f7;color:#000;font-size:14px}
.ytplay:hover,.ytplay:focus-visible{border-color:#4fc3f7}

/* THE PLAYERS PAGE'S SIX GROUPS AS NAVIGATION CARDS (bus post 741; players.py, navcards.css). The 'All' card, when it is switched on,
   shows every pane at once. */
.plr-cards{display:block;margin:0 0 18px}
.plr-cards .navcards{margin:0}
.plr:has(#lane-all:target) .plr-page{display:grid!important}
.plr:has(#lane-all:target) .plr-page::before{content:attr(data-lane-name);grid-column:1/-1;font:italic 800 26px/1 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase}
/* THE HOME PAGE'S SEVEN SECTOR CARDS, directly under the hero (bus post 743; sprawl.home_row, navcards.css) */
.home-sectors .navcards{margin:18px 0 6px}

/* A DRAWING IS NEVER CUT AT ITS CARD (bus post 910): the chart card asks for its own width and redraws one that passes its edge (catchart.js); where the renderer still makes a drawing wider than the card, it scrolls sideways inside the stage and is not cut */
.feat-cc .feat-stage{overflow-y:hidden;max-width:100%}   /* the stage scrolls sideways only where catchart.js finds a drawing that cannot be made to fit, and says so on the stage itself */

/* THE HOME PAGE AFTER ITS TOP (home_bands.py; bus posts 916, 919): plain sections stacked. Six Esper chart cards, three across; the ten
   highest ranked of Replicants, five across; the three newest pieces. Nothing under the floor (R-017); the palette of R-021. */
.hb-grid.n6,.hb-grid.n5,.hb-grid.n4{grid-template-columns:repeat(3,minmax(0,1fr))}
.hb-cc .home-cc-h a{font-size:20px}.hb-cc .home-cc-h a.home-cc-go{font-size:16px}
.hb-cc .feat-w{height:400px}
.hb-credit{background:#0c0d0e;border:1px solid #333;border-top:0;padding:8px 14px 10px}
.hb-credit .es-credit{margin:0;font:500 16px/1.45 Barlow,sans-serif;color:#a3a7ae}
.hb-credit .es-credit a{color:#ededed;text-decoration:underline;text-underline-offset:3px}
.hb-credit .es-credit a:hover{color:#4fc3f7}
.hb-on{margin:16px 0 0}
.hb-people{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.hb-people .rp-p{grid-template-rows:auto}
.sp-mosaic.hb-pieces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sp-mosaic.hb-pieces .sp-m,.sp-mosaic.hb-pieces .hb-piece{grid-column:span 1;grid-row:auto}
@media(max-width:1299px){.hb-people{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hb-people .rp-p{grid-template-columns:60px minmax(0,1fr);padding:12px}.hb-people .rp-ph{width:60px;height:60px}
@media(max-width:1100px){.hb-grid.n6,.hb-grid.n5,.hb-grid.n4{grid-template-columns:repeat(2,minmax(0,1fr))}.hb-people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.hb-grid.n6,.hb-grid.n5,.hb-grid.n4,.hb-people,.sp-mosaic.hb-pieces{grid-template-columns:minmax(0,1fr)}.hb-cc .feat-w{height:340px}}
@media(min-width:2200px){.hb-credit .es-credit,.hb-cc .home-cc-h a.home-cc-go{font-size:17px}}
.hb-cc .feat-cc .feat-tab{font-size:16px;border-radius:0}
@media(min-width:2200px){.hb-cc .feat-cc .feat-tab{font-size:17px}}
@media(max-width:699px){.hb-cc .feat-cc .feat-tab{font-size:15px}}

/* the home page's heading in his words (bus post 928): one title that wraps, no word broken, never under the other pages' heading sizes */
.home-top .lp-pre{margin:0 0 8px}
.home-title.home-title-his{font-size:clamp(40px,5.2vw,84px);line-height:.96}
.home-title.home-title-his span{white-space:normal;overflow-wrap:normal;word-break:keep-all;hyphens:none}
.home-slogan{margin:0 0 18px}
.hb-title{margin:0 0 8px}
.hb-line{font:500 calc(18px * var(--scale,1))/1.5 Barlow,sans-serif;color:var(--hd);margin:0 0 18px;max-width:1100px}
.hb-places-band .navcards{--nc-n:4}
@media(max-width:999px){.hb-places-band .navcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hb-cc .feat-cc .feat-tabs{flex-wrap:nowrap}.hb-cc .feat-cc .feat-tab{white-space:nowrap;padding:8px 10px}
@media(max-width:760px){.hb-cc .feat-cc .feat-tabs{flex-wrap:wrap}}

/* THE HOME PAGE'S SOCIAL BUTTONS (Michael, bus post 930 item 6): larger, standing out, square not pill-shaped, a solid ground, spread
   across the full width of the page, each the same width; in the palette (R-021: no brand colours); the mark and the name at the floor.
   On a phone four by two. The footer's small row elsewhere is not changed. */
.socialband .schips{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;margin:0}
.socialband .schip{height:auto;min-height:56px;padding:10px 8px;justify-content:center;gap:10px;border:1px solid var(--hl);border-radius:0;background:var(--hs);color:var(--hi);font:700 16px/1.15 "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;text-align:center}
.socialband .schip svg{width:20px;height:20px;flex:0 0 auto}
.socialband .schips-light .schip,.socialband .schip{color:var(--hi)}
.socialband .schip:hover,.socialband .schip:focus-visible{background:var(--hi);border-color:var(--hi);color:var(--hs);box-shadow:inset 0 -3px 0 var(--s1);outline:none}
.socialband .schip.soon,.socialband .schip.soon:hover{background:var(--hs);color:var(--hd);border-color:var(--hl);box-shadow:none}
@media(max-width:999px){.socialband .schips{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr))}.socialband .schip{flex-direction:column;gap:6px;font-size:15px;letter-spacing:.02em;min-height:64px}}
@media(min-width:2200px){.socialband .schip{font-size:17px}}

/* ═══ THE LIGHT THEME'S FRAME AND ITS ACTION BUTTONS (Michael's GUIDELINES, bus posts 949 to 963, 10 and 11 October 2026; guidelines,
   not rules: open to his tuning, shown to him before they are settled). His reason: "cards, cards, cards all in white. And they all just
   blend together"; "dark holding the frame so that colour stands out". The LIGHT theme only; the dark theme is left as it stands (956).
   THE SETTINGS, each colour named once so that a change is one change (953, 954):
     --act / --act-ink / --act-edge                 the action button (VIEW, OPEN ARTICLE, PLAY FILM, the ALL buttons): filled dark, the site's cyan text (1001)
     --act-plain                                    the social buttons' text and icon: white, the one exception
     --act-turn / --act-turn-ink / --act-turn-edge  the same button on a dark surface, turned so that it stands out from what it sits on
     --frame-on                                     the site's cyan, the chart buttons' own: the line under a pressed dark button
     (--frame, --frame-ink, --frame-dim, --frame-line, --frame-btn, --frame-btn-ink, --frame-on-ink, --frame-hover: the dark header and
      footer he tried and withdrew, bus posts 981 and 982; kept as settings, used by nothing)
     --dcard / --dcard-ink / --dcard-line           a card turned dark to break up a run of white ones (the four place cards) */
html[data-theme="light"]{--act:#111111;--act-ink:#4FC3F7;--act-plain:#FFFFFF;--act-edge:#111111;--act-turn:#FFFFFF;--act-turn-ink:#111111;--act-turn-edge:#FFFFFF;
  --frame:#0A0A0A;--frame-ink:#F2F2F2;--frame-dim:rgba(255,255,255,.72);--frame-line:#2A2A2A;--frame-btn:#FFFFFF;--frame-btn-ink:#121212;
  --frame-on:#4FC3F7;--frame-on-ink:#04121A;--frame-hover:#DFF3FD;--dcard:#111111;--dcard-ink:#FFFFFF;--dcard-line:#111111}
/* THE HEADER AND THE FOOTER KEEP THEIR OWN GROUND (Michael, bus posts 981 and 982, 11 October 2026): he tried the dark band and his eye
   said no: "It actually put too much contrast in." So 954 to 957 are withdrawn: the header, its menu and the footer's ground are as they
   were; selected is the dark button, in the menu and on a card. The --frame settings are kept, unused, should he return to it. */
/* the footer carries the home page's social buttons in place of the pills (955, kept by 982): one component, in the form it has on the
   page it stands on: dark with white text in the light theme, the dark theme's own form there */
.fl .flsocial{flex:1 0 100%;order:2;--hs:#1B1D20;--hi:#F2F2F2;--hl:rgba(255,255,255,.12);--hd:rgba(255,255,255,.62)}
.fl .flmarks{order:3}
.fl .flsocial .schips{margin:0}
.fl .flsocial .schip,.fl .flsocial .schip span{font-size:var(--fl-floor)}
.fl .flsocial .schip{height:auto;min-height:48px;padding:8px;border:1px solid var(--hl);border-radius:0;letter-spacing:.06em}
@media(max-width:999px){.fl .flsocial .schip{min-height:60px;padding:8px 2px;letter-spacing:.02em}}
html[data-theme="light"] .fl .flsocial .schip{background:var(--act);color:var(--act-plain);border-color:var(--act-edge)}
html[data-theme="light"] .fl .flsocial .schip:hover,html[data-theme="light"] .fl .flsocial .schip:focus-visible{background:var(--act);color:var(--act-plain);border-color:var(--act-edge);box-shadow:inset 0 -4px 0 var(--frame-on)}
html[data-theme="light"] .fl .flsocial .schip.soon,html[data-theme="light"] .fl .flsocial .schip.soon:hover{background:#3A3A3A;border-color:#3A3A3A;color:#D0D0D0;box-shadow:none}
/* the home page's social buttons: dark, white text and icon (949 item 3) */
html[data-theme="light"] .hband.socialband .schip{background:var(--act);color:var(--act-plain);border-color:var(--act-edge)}
html[data-theme="light"] .hband.socialband .schip:hover,html[data-theme="light"] .hband.socialband .schip:focus-visible{background:var(--act);color:var(--act-plain);border-color:var(--act-edge);box-shadow:inset 0 -4px 0 var(--frame-on)}
html[data-theme="light"] .hband.socialband .schip.soon,html[data-theme="light"] .hband.socialband .schip.soon:hover{background:#3A3A3A;border-color:#3A3A3A;color:#D0D0D0;box-shadow:none}
/* the action buttons: filled dark, white text (949 item 5, 950, 952); on a dark surface turned the other way */
html[data-theme="light"] .nc-go span{background:var(--act);color:var(--act-ink);border-color:var(--act-edge)}
html[data-theme="light"] .navcard.on .nc-go span{background:none;color:inherit;border-color:currentColor}      /* the selected card is dark and its mark stays quiet (bus post 811) */
html[data-theme="light"] .pc-chip{background:var(--act);color:var(--act-ink);border-color:var(--act-edge)}
html[data-theme="light"] .pc-chip:hover,html[data-theme="light"] .pc-chip:focus-visible{color:var(--act-ink);box-shadow:inset 0 -3px 0 var(--frame-on)}
/* the four places: four dark buttons, white text, each wholly pressable, with no VIEW mark inside (949 item 4; 981 item 2) */
html[data-theme="light"] .hb-places-band .navcard.cat{background:var(--dcard);color:var(--dcard-ink);border-color:var(--dcard-line)}
html[data-theme="light"] .hb-places-band .navcard.cat:hover,html[data-theme="light"] .hb-places-band .navcard.cat:focus-visible{border-color:var(--frame-on);box-shadow:inset 0 -4px 0 var(--frame-on)}
.hb-places-band .navcard .nc-go{display:none}
.hb-places-band .navcard.cat{padding-bottom:18px}
.hb-places-band .navcard.cat:hover,.hb-places-band .navcard.cat:focus-visible{box-shadow:inset 0 -4px 0 var(--s1)}
/* THE SOURCE OF A HOME CHART CARD, FOLDED (bus post 971): one closed section on each card, in the form of THE ROWS; nothing of it shows
   until it is opened */
.hb-cc .hb-src{border-top:1px solid rgba(255,255,255,.14);margin:0;padding:0 14px;background:#09090b;color:#c8c8c8}
.hb-cc .hb-src > summary{cursor:pointer;padding:10px 0;font:700 16px/1.2 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:#ededed}
.hb-cc .hb-src > summary:hover,.hb-cc .hb-src > summary:focus-visible{color:#4fc3f7;outline:none}
.hb-cc .hb-src p{margin:0 0 10px;font:500 16px/1.45 Barlow,sans-serif;color:#c8c8c8}
.hb-cc .hb-src p b{color:#ededed;font-weight:700}
.hb-cc .hb-src a{color:#ededed;text-decoration:underline;text-underline-offset:3px}.hb-cc .hb-src a:hover{color:#4fc3f7}
@media(max-width:699px){.hb-cc .hb-src > summary,.hb-cc .hb-src p{font-size:15px}}
@media(min-width:2200px){.hb-cc .hb-src > summary,.hb-cc .hb-src p{font-size:17px}}
/* THE TITLE ON ONE LINE (949 item 1) at 1000 wide and over: its size follows the width it has; under that it wraps, at a size that reads */
.home-top{container-type:inline-size}
@media(min-width:1000px){.home-title.home-title-his{font-size:clamp(30px,4.6cqw,84px)}.home-title.home-title-his span{white-space:nowrap}}
@media(max-width:999px){.home-title.home-title-his{font-size:clamp(34px,8.6cqw,64px)}}
/* a name never runs past its button: tighter letters where the eight are narrow (measured at 360, 1000 and 1100 wide) */
@media(max-width:1199px){.socialband .schip{letter-spacing:.02em;padding-left:4px;padding-right:4px;gap:6px}.fl .flsocial .schip{letter-spacing:.02em;padding-left:4px;padding-right:4px}}
@media(max-width:389px){.socialband .schip,.fl .flsocial .schip{letter-spacing:0;padding-left:1px;padding-right:1px}}
@media(min-width:1000px) and (max-width:1099px){.socialband .schip{flex-direction:column;gap:6px;min-height:64px}}
@media(max-width:389px){.socialband .schips{grid-template-columns:repeat(2,minmax(0,1fr))}.socialband .schip,.fl .flsocial .schip{flex-direction:row;gap:8px;min-height:48px;letter-spacing:.02em}}   /* under 380 wide a nine-letter name at the size floor does not fit a quarter of the row: two across, four rows */

/* THE "ALL ..." BUTTONS OF THE HOME PAGE (Michael, bus post 987): the dark action button, on the one setting, at the RIGHT edge at the end
   of their section, so that none stands directly above the next section's title */
.hb-on{text-align:right}

/* ═══ A BUTTON THAT TAKES YOU SOMEWHERE (Michael's guideline, bus posts 989 and 1001, 11 October 2026; his choice: "Yes, every page"):
   "every button that takes you somewhere should be a black button with cyan text and a cyan arrow." The reading: a white button is a
   control that changes what is shown here; the cyan fill is the chosen one; black with cyan text and the long arrow takes you somewhere.
   It is the action button's text setting, --act-ink (the site's cyan, the chart buttons' own). VIEW, OPEN ARTICLE, the ALL buttons and
   their like carry the long arrow; PLAY FILM keeps its play triangle (it opens a film); no outline on a light ground. The social buttons
   are the one exception: white text and icon (--act-plain). On a chart card OPEN IN ESPER and OPEN THE INSTRUMENT stay plain cyan text
   with the arrow (1001 item 2). The light theme only (956). */
html[data-theme="light"] .sp-enter{background:var(--act);color:var(--act-ink);box-shadow:inset 0 0 0 1px var(--act-edge)}
html[data-theme="light"] .sp-enter:hover,html[data-theme="light"] .sp-enter:focus-visible{filter:none;box-shadow:inset 0 -4px 0 var(--frame-on)}
/* the four places: their names in the same cyan with the arrow (989 item 6, kept by 1001 item 3) */
html[data-theme="light"] [data-band="places"] .navcard .nc-k{color:var(--act-ink)}
html[data-theme="light"] [data-band="places"] .navcard .nc-k::after{content:" \2192";font-style:normal}

/* ═══ THE INSTRUMENT GROUND, ONE SETTING (Michael's guidelines, bus posts 960 to 962 and 965, 11 October 2026): "match the card and any gray
   elements on that card to the graphic walker black. Otherwise, it doesn't blend as one instrument." --ig is the chart renderer's own
   ground, measured: rgb(9,9,11). The shared chart card, the home page's chart cards and Esper's chart cards take exactly it; the
   Instruments page reads the same value. His test: title, chart, source line, "The rows" and the opened table read as ONE piece. */
:root{--ig:#09090b}
/* NOT ON AN ARTICLE: there the chart card is one of the page's dark media blocks (frames, the film, the chart), which share ONE fill and
   ONE edge by the article standard, and the suite holds the thirteen live articles unchanged. So the instrument ground is given to the
   chart card where it stands on the site's own pages: the home page, a Sprawl window, a sector page's Data pane, Esper. */
.hb-cc .feat-cc,.sp-chart .feat-cc,.es-chart .feat-cc{background:var(--ig)}
html[data-theme="light"] .hb-cc .feat-cc,html[data-theme="light"] .sp-chart .feat-cc,html[data-theme="light"] .es-chart .feat-cc{border-color:var(--ig)}
html[data-theme="light"] .hb-cc .home-cc-h{background:var(--ig);border-color:var(--ig);border-top-color:#4fc3f7}
html[data-theme="light"] .hb-cc .hb-src{background:var(--ig)}
/* ESPER'S CHART CARD GOES DARK, to match the articles (960): the card takes the chart's own colour, its title and source line turn white,
   "The rows" opens a dark table with white text. Inside the card the house inks are the dark ones, so every part that reads them turns
   with the ground; the figure cards beside the charts are not changed (he did not name them). The light theme only (956). */
html[data-theme="light"] .es-card[data-es-table]{--hs:var(--ig);--hi:#EDEDED;--hl:rgba(255,255,255,.16);--hd:#C8C8C8;--hgo:#4FC3F7;--hgoi:#04121A;background:var(--ig);border-color:var(--ig);color:#EDEDED;color-scheme:dark}
html[data-theme="light"] .es-card[data-es-table] .es-credit a{color:#EDEDED;text-decoration-color:#4FC3F7}
html[data-theme="light"] .es-card[data-es-table] .es-credit a:hover{color:#4FC3F7}
html[data-theme="light"] .es-card[data-es-table] .es-rows summary:hover{color:#4FC3F7}

/* REPLICANTS: THE FILTER BAR'S CARD GOES DARK (Michael, bus post 951): "keep the search white the selections white the drop down white so
   just the card goes dark". The words that sit straight on the card turn light; a chosen "Show only" button takes the cyan of a chosen
   chart button, so it is plainly told from the white ones on the dark ground. The light theme only. */
html[data-theme="light"] .rp-tools{background:var(--dcard);border-color:var(--dcard-line)}
html[data-theme="light"] .rp-tools input,html[data-theme="light"] .rp-tools select{background:#FFFFFF;color:#121212;border-color:#FFFFFF}
html[data-theme="light"] .rp-tools input::placeholder{color:#5E5E5E}
html[data-theme="light"] .rp-tools .rp-count,html[data-theme="light"] .rp-tools .rp-only{color:#EDEDED}
html[data-theme="light"] .rp-tools .rp-g{background:#FFFFFF;color:#121212;border-color:#FFFFFF}
html[data-theme="light"] .rp-tools .rp-g[aria-pressed="true"]{background:#4FC3F7;color:#04121A;border-color:#4FC3F7;box-shadow:none}
html[data-theme="light"] .rp-tools .rp-g:hover,html[data-theme="light"] .rp-tools .rp-g:focus-visible,html[data-theme="light"] .rp-tools input:focus,html[data-theme="light"] .rp-tools select:focus{outline-color:#4FC3F7}
/* THE INTERLINKED PAGE'S CARDS: no white ground on hover (bus post 952 item 2: "the background changes to white. And it looks weird").
   The quieter sign that a card is under the pointer: a line round its picture in the site's own blue; the picture already opens the article. */
.ilfront .ilcard.ilrow:hover{background:var(--il-plate)}
.ilfront .ilcard.ilrow:hover .ilthumb .pc-pic{outline:3px solid var(--s1);outline-offset:2px}
.sp-m-chart,.hb-credit{background:var(--ig)}   /* the Sprawl window's chart wrapper stands on the same instrument ground */

/* THE INTERLINKED PAGE'S CARDS: NO CHANGE OF GROUND ON HOVER AT ALL (bus posts 952 and 1005). MY FAULT, found by Desktop: the rule I wrote
   to take the white ground off set the ground to the card's plate colour, which is white in the light theme while the card at rest has
   no ground of its own. The hovered card now has exactly what it has at rest: none. The line round the picture is the sign. */
.ilfront .ilcard.ilrow:hover{background:transparent}
/* ESPER'S CHART CARD IS ONE BLACK IN THE DARK THEME TOO (bus post 1005 item 4): this one thing only; nothing else of the dark theme changes */
.es-card[data-es-table]{--hs:var(--ig);--hi:#EDEDED;--hl:rgba(255,255,255,.16);--hd:#C8C8C8;--hgo:#4FC3F7;--hgoi:#04121A;background:var(--ig);border-color:var(--ig);color:#EDEDED;color-scheme:dark}
.es-card[data-es-table] .feat-cc{border-color:var(--ig)}
.es-card[data-es-table] .es-credit a{color:#EDEDED;text-decoration-color:#4FC3F7}
.es-card[data-es-table] .es-credit a:hover,.es-card[data-es-table] .es-rows summary:hover{color:#4FC3F7}
/* ESPER'S CARD FOOT AS ON INSTRUMENTS (bus post 1003): one short Source line in view; SOURCE AND METHOD and THE ROWS, two closed sections
   in one form, their names in the spaced capitals */
.es-card .es-rows summary{font:700 var(--sp-small)/1.2 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;padding:12px 0}
.es-card .es-src{margin-top:0}
.es-card .es-srcbody{padding:0 0 12px;display:flex;flex-direction:column;gap:8px;max-width:1100px}
.es-card .es-srcbody .es-credit{flex:none}
.es-card .es-srcbody b{color:var(--hi);font-weight:700}

/* ═══ THE HOME PAGE'S ONE FRAME (home_frame.py, home-frame.js; Michael's plan of 11 October 2026, section 5): the seven sector cards; under
   them the selected sector's two pieces at the left (a third) and its chart at the right (two thirds); under that one row of its
   people. Compact: the pair's height follows the window so that the row of people stays in view on a full-height desktop window. */
.hf-panels{margin-top:14px}
.hf-panel[hidden]{display:none}
.hf-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px;align-items:stretch}
.hf-pieces{display:grid;grid-auto-rows:auto;gap:12px;min-width:0;align-content:start}
.hf-pieces .sx-piece{min-width:0;border-top:0;padding-top:0;margin:0}
.hf-chart{min-width:0;display:flex;flex-direction:column}
.hf-chart .feat-w{flex:1 1 auto;height:auto;min-height:380px}
.hf-strip{margin-top:14px}
.hf-people{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;min-height:108px}
.hf-people .hf-person{min-width:0}
.hf-on{margin:12px 0 0;text-align:right}
.hf-band .navcards{margin-bottom:0}
@media(max-width:1100px){.hf-people{grid-template-columns:repeat(3,minmax(0,1fr))}.hf-people .hf-person:nth-child(n+4){display:none}}
@media(max-width:999px){.hf-pair{grid-template-columns:minmax(0,1fr)}.hf-pieces{grid-template-columns:repeat(2,minmax(0,1fr))}.hf-chart .feat-w{height:380px;flex:none}}
@media(max-width:699px){.hf-pieces{grid-template-columns:minmax(0,1fr)}.hf-people{grid-template-columns:minmax(0,1fr)}.hf-people .hf-person:nth-child(n+3){display:none}.hf-chart .feat-w{height:340px}}
/* THE FRAME KEPT COMPACT (his word: "quite compressed... most of this in a viewing frame"): the cards a little smaller here, the pair's height
   following the window so the row of people stays in view on a full-height desktop window, the people as one tight row (a name, and its
   role on one line). A picture in the left column keeps its left edge and its height; where the column is wider than the picture's
   shape allows at that height, the picture's right edge is what gives. */
@media(min-width:1000px){
  .hf-band .navcard.cat{padding:12px 12px 10px}
  .hf-band .navcard .nc-v{font-size:clamp(28px,22cqw,46px)}
  .hf-band .navcard .nc-fig{margin-top:6px}
  .hf-band .navcard .nc-lab{margin-top:4px;line-height:1.25}
  .hf-band .navcard .nc-go{padding-top:8px}
  .hf-pair{--hf-h:clamp(430px,calc(100vh - 560px),640px)}
  .hf-pieces{grid-template-rows:minmax(0,1fr) minmax(0,1fr);height:var(--hf-h)}
  .hf-pieces .sx-piece{display:flex;flex-direction:column;gap:6px;min-height:0}
  .hf-pieces .sx-piece .pc-pic{flex:1 1 auto;min-height:0;display:block;overflow:hidden}
  .hf-pieces .sx-piece .pc-pic img{width:100%;height:100%;object-fit:cover;object-position:left center;display:block}
  .hf-pieces .sx-piece .pc-chips{flex:0 0 auto}
  .hf-chart{height:var(--hf-h)}
  .hf-chart .feat-w{min-height:0}
}

/* THE FRAME AFTER HIS FIRST LOOK (bus posts 1064 to 1071, 11 October 2026).
   THE BAR: a low dark bar over the seven cards names the row as the Sprawl and opens the Sprawl page; its button is the action button
   turned for a dark surface (white ground, dark text) so that it stands out there.
   THE CARDS: no VIEW mark; the selected one has the site's cyan as its ground with dark text, and the cyan travels along the row.
   UNDER THE CARDS: room, the site's own section rule, room.
   THE SEVEN PANELS stand in one place and one is shown, so a sector's chart is already drawn when its turn comes and the page below
   does not move as the sectors turn.
   THE PEOPLE: five real cards across the whole width, name and role whole; the button on its own line under them, at the right. */
.hf-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#111111;color:#FFFFFF;padding:8px 8px 8px 16px;margin:0 0 8px}
.hf-bar-t{font:italic 800 26px/1 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.01em;color:#FFFFFF;margin:0}
.hf-bar-go{display:inline-block;background:#FFFFFF;color:#121212;text-decoration:none;font:700 16px/1 "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;padding:11px 14px;white-space:nowrap}
.hf-bar-go:hover,.hf-bar-go:focus-visible{background:#DFF3FD;box-shadow:inset 0 -4px 0 #4FC3F7;outline:none}
.hf-band .navcard .nc-go{display:none}
.hf-band .navcard.cat{padding-bottom:14px}
.hf-band .navcard.cat.on,html[data-theme="light"] .hf-band .navcard.cat.on,html[data-theme="dark"] .hf-band .navcard.cat.on{background:#4FC3F7;color:#04121A;border-color:#4FC3F7;box-shadow:none}
.hf-band .navcard.cat.on *{color:#04121A;opacity:1}
.hf-panels{display:grid;margin-top:24px;padding-top:26px;border-top:1px solid var(--hl,rgba(0,0,0,.14))}
.hf-panel{grid-area:1 / 1;min-width:0}
.hf-panel.hf-off{visibility:hidden;pointer-events:none}
.hf-strip{margin-top:16px}
.hf-people{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:stretch}
.hf-people .rp-p{grid-template-rows:auto;min-height:132px}
.hf-on{margin:14px 0 0;text-align:right}
@media(max-width:1100px){.hf-people{grid-template-columns:repeat(3,minmax(0,1fr))}.hf-people .hf-person:nth-child(n+4){display:none}}
@media(max-width:699px){.hf-bar{flex-wrap:wrap;padding:10px 12px}.hf-bar-t{font-size:22px}.hf-bar-go{font-size:15px}.hf-people{grid-template-columns:minmax(0,1fr)}.hf-people .hf-person:nth-child(n+4){display:none}.hf-people .hf-person:nth-child(3){display:grid}}
@media(min-width:2200px){.hf-bar-go{font-size:17px}}
/* the people's cards are one height in every sector, so the page does not move as the sectors turn: every panel is as tall as the tallest
   (they share one place), and the row of people takes up what is left in its own */
@media(min-width:1000px){.hf-panel{display:flex;flex-direction:column}.hf-strip{flex:1 1 auto;display:flex;flex-direction:column}.hf-people{flex:1 1 auto;grid-auto-rows:1fr}.hf-people .rp-p{height:100%;box-sizing:border-box}}

/* THE HERO'S FILM SLIDER (bus 1166): the film's frame zero as the poster (it carries the title), one plain play mark in its lower left,
   and under the picture, not on it, the series line and the way to the piece */
.home-art.home-films{display:grid;grid-template-rows:auto auto;min-height:0;background:#0b0b0d}   /* ONE HEIGHT FOR EVERY SLIDE (Desktop, bus 1328): the slides stack in one grid cell, so the box is as tall as the tallest and the page under it never jumps */
.home-films .tv2-slide.hf-film{grid-area:1 / 1;position:relative;inset:auto;opacity:1;display:flex;visibility:hidden;flex-direction:column;margin:0;transition:none}
.home-films .tv2-slide.hf-film.on{visibility:visible}
.home-films .tv2-bars{grid-area:2 / 1}
.home-films .hf-play{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:#000;cursor:pointer;overflow:hidden}
.home-films .hf-play img{display:block;width:100%;height:100%;object-fit:cover}
.home-films .hf-mark{position:absolute;left:18px;bottom:18px;display:flex;align-items:center;gap:12px;padding:13px 20px;border-radius:6px;background:rgba(0,0,0,.78);border:1px solid rgba(79,195,247,.9);font:700 16px/1 var(--mono, monospace);letter-spacing:.14em;color:#fff}
.home-films .hf-mark b{color:#4FC3F7;font-size:18px}
.home-films .hf-play:hover .hf-mark,.home-films .hf-play:focus-visible .hf-mark{background:#4FC3F7;color:#000}
.home-films .hf-play:hover .hf-mark b,.home-films .hf-play:focus-visible .hf-mark b{color:#000}
.home-films .tv2-slide figcaption.hf-cap{position:static;display:flex;flex-wrap:nowrap;align-items:baseline;justify-content:space-between;gap:8px 16px;padding:14px 18px 16px;background:none}   /* ONE ROW on every slide: the series line left, READ THE ARTICLE right (Desktop's call, bus 1328); wraps only at phone width */
.home-films .hf-series{font:600 14px/1.2 var(--mono, monospace);letter-spacing:.1em;color:#4FC3F7;min-width:0}
.home-films .hf-read{flex:0 0 auto;white-space:nowrap}
.home-films .hf-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.home-films .hf-read{font:600 16px/1 var(--mono, monospace);letter-spacing:.12em;color:#EDEDED;text-decoration:none;border-bottom:1px solid #4FC3F7}
.home-films .hf-read:hover{color:#4FC3F7}
.home-films .tv2-bars{position:static;padding:0 18px 12px}
@media (max-width:700px){.home-films .tv2-slide figcaption.hf-cap{flex-wrap:wrap}.home-films .hf-play{aspect-ratio:auto}.home-films .hf-play img{aspect-ratio:16/9;height:auto}.home-films .hf-mark{position:static;justify-content:center;border-radius:0;border-width:1px 0 0;padding:12px 14px;font-size:16px}}   /* on a phone the play mark stands under the picture, so nothing covers the title (bus 1174) */