/* THE TWO ACCENTS (MS-3895) · the SITE ACCENT is cyan, the site's own --s1 in each room (the site rules the value per room) and its chart step --chart1 for drawn figures · THE EPISODE ACCENT is set
   once per episode in episode.json beside the artwork (accent, accent_light) and arrives on <html> as --ep-accent and --ep-accent-light;
   nothing in this stylesheet names a colour. ONE DEFAULT, ONE EXCEPTION (MS-3887): charts are the site accent, as everywhere on the site;
   THE EPISODE ACCENT IS THE EXCEPTION AND MARKS OUR OWN ARITHMETIC - a figure we computed rather than read off a filing - or the outcome a
   section is about. Never decoration, never a date. A literal colour in this file is a fault the build refuses. */
:root{--as-fig-grey-light:var(--faint);--as-owed-light:color-mix(in srgb,var(--s2) 55%,#000);--as-accent:var(--ep-accent);--as-site:var(--s1);--as-chart:var(--chart1);--as-owed:var(--s2);--as-fig-ink:var(--plate-fg);--as-fig-dim:var(--plate-dim);--as-fig-grid:var(--plate-border);--as-fig-neutral:var(--as-chart);--as-fig-fill:color-mix(in srgb,var(--as-chart) 18%,transparent);--as-fig-hot:var(--as-accent);--as-fig-hotfill:color-mix(in srgb,var(--as-accent) 22%,transparent);--as-fig-grey:var(--plate-faint);--as-fig-s1:var(--as-chart);--as-imgedge:rgba(255,255,255,.14)}
html[data-theme="light"]{--as-accent:var(--ep-accent-light);--as-owed:var(--as-owed-light);--as-fig-ink:var(--fg);--as-fig-dim:var(--dim);--as-fig-grid:rgba(0,0,0,.10);--as-fig-fill:color-mix(in srgb,var(--as-chart) 14%,transparent);--as-fig-hotfill:color-mix(in srgb,var(--as-accent) 16%,transparent);--as-fig-grey:var(--as-fig-grey-light);--as-imgedge:rgba(0,0,0,.22)}
/* THE ARTICLE STANDARD V2 · the additions the standard needs on top of the site's own contract.css, article.css and front.css.
   Every colour, edge, radius, face and size below is a site token or a site rule (contract.css / front.css / article.css), never a
   value of our own. Nothing here restyles a site component; it composes them. The rule the page is built on (MS-3833): THE CONTAINER
   STAYS FULL WIDTH, THE CONTENT ALMOST NEVER IS. Prose sits in a reading column; the space beside it always does a job. */

/* THE SECTION · a full-width band inside main.wrap. A section is a grid: the reading column and the job beside it. */
.as-sec{padding:calc(34px * var(--scale,1)) 0 calc(18px * var(--scale,1));border-top:1px solid var(--edge);scroll-margin-top:24px}
.as-sec:first-of-type{border-top:none}
.as-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin:0 0 calc(16px * var(--scale,1))}
/* THE NUMERAL (MS-3899): the spine's eight sections carry a roman numeral, the apparatus four a diamond; the marker sits WITH the heading -
   the heading's display size at 0.85, the same baseline, the accent, one unit; the gap is one measure of the marker's own size. */
.as-k{font:700 11px/1.2 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:inline-flex;align-items:baseline;gap:.9em}
.as-k b{color:var(--as-site);font:italic 800 calc(22px * var(--scale,1) * .85)/1 "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:0;text-transform:none}
.as-head{gap:8px calc(22px * var(--scale,1) * .45)}
.as-head h2{margin:0;font-family:Barlow;font-weight:700;font-size:calc(22px * var(--scale,1));line-height:1.1;letter-spacing:-.01em;color:var(--fg)}
.as-when{font:600 11px/1.6 "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--faint);max-width:66ch}  /* the library's note: when a section is used and when it is dropped */
.as-when b{color:var(--dim)}

/* THE READING COLUMN · about 66 characters of the body face at the site's article size; it never grows to the container. */
.as-prose{max-width:66ch}
.as-prose p{font-size:calc(17.5px * var(--scale,1));line-height:1.75;margin:0 0 18px;color:var(--fg)}
.as-prose p:last-child{margin-bottom:0}
.as-prose .pull{border-left:4px solid var(--fg);padding:2px 0 2px 18px;font-size:calc(21px * var(--scale,1));font-weight:600;line-height:1.35}
.as-grid{display:grid;gap:calc(24px * var(--scale,1)) calc(28px * var(--scale,1));align-items:start}
.as-grid.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.as-grid.prose-aside{grid-template-columns:minmax(0,66ch) minmax(240px,1fr)}          /* prose left, the job on the right */
.as-grid.split{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}                     /* SPLIT · one third prose, two thirds figure */
.as-grid.split.flip{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}                /* alternating: the figure left */
.as-grid.split.flip > .as-prose{order:2}
/* SINGLE COLUMN, FULL WIDTH — AN APPROVED ARTICLE LAYOUT (Michael MS-4038). Side by side is for when BOTH columns carry their weight;
   when they do not - a short paragraph against a tall card, a figure that leaves a hole - the section STACKS, and that is a correct
   choice rather than a compromise. A builder must never squeeze content into two columns to look like it belongs. */
.as-grid.stack,.as-grid.stack.two,.as-grid.stack.prose-aside,.as-grid.stack.split,.as-grid.stack.split.flip{grid-template-columns:minmax(0,1fr)}
.as-grid.stack > .as-prose{max-width:none}
.as-grid.stack.split.flip > .as-prose{order:0}
.as-full{max-width:none}                                                              /* FULL WIDTH IS EARNED · once per piece, deliberately */

/* THE BUTTON · the site's home door (front.css .home-doors a), used for every route out and every named control. A link out is a
   button and opens a new tab; internal content opens on the page. */
.as-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 14px;background:var(--fill);color:var(--fg);border:1px solid var(--edge);border-radius:var(--radius);font:700 12px/1.1 "JetBrains Mono",monospace;letter-spacing:.12em;text-decoration:none;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.as-btn:hover{border-color:var(--s1)}
.as-btn.primary{background:var(--s1);color:var(--accent-ink);border-color:var(--s1)}
.as-btn.out::after{content:"\2197";font-weight:800}                                     /* the arrow that says: a new tab */
.as-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

/* MECHANISM ONE · HORIZONTAL TABS · named buttons across the top · parallel sources you compare, three to six. Built on the site's
   .ivtabs (front.css): flex buttons, the active one carries the cyan inset rule. Every panel is real HTML, present without scripts:
   with scripts off every panel shows, stacked, each under its own name. */
.as-tabs{border:1px solid var(--edge);border-radius:var(--radius);background:var(--card);overflow:hidden}
.as-tabs .as-tabbar{display:flex;flex-wrap:wrap;gap:1px;background:var(--edge);border-bottom:1px solid var(--edge)}
.as-tabs .as-tab{flex:1 1 auto;min-width:96px;min-height:44px;background:var(--card);color:var(--dim);border:none;padding:11px 12px;font:700 11px/1.2 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.as-tabs .as-tab[aria-selected="true"]{background:var(--fill);color:var(--fg);box-shadow:inset 0 -3px 0 var(--s1)}
.as-tabs .as-tab:focus-visible{outline:2px solid var(--s1);outline-offset:-2px}
.as-tabs .as-pane{padding:calc(18px * var(--scale,1)) calc(20px * var(--scale,1))}
.as-tabs .as-pane[hidden]{display:none}
.as-tabs .as-pane > .as-panename{display:none;font:700 11px/1.2 "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--faint);margin:0 0 10px}
html.no-js .as-tabs .as-tabbar{display:none} html.no-js .as-tabs .as-pane{display:block!important;border-top:1px solid var(--edge)} html.no-js .as-tabs .as-pane > .as-panename{display:block}

/* MECHANISM TWO · VERTICAL ACCORDION · stacked rows that expand in place · parallel records you read down. The row IS the EP03 9:16
   evidence board card (MS-3836: reuse, do not redesign): uniform columns for the ticker, the filing and the change, and the receipt,
   so the boundaries line up down the stack. Collapsed it shows the row; open it drops the full extract and the button beneath. */
.as-acc{border-top:1px solid var(--edge)}
.as-row{border-bottom:1px solid var(--edge);background:var(--card)}
.as-row > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(150px,17%) minmax(200px,26%) minmax(0,1fr) 44px;gap:0 18px;align-items:center;padding:14px 16px;min-height:44px}
.as-row > summary::-webkit-details-marker{display:none}
.as-row > summary:hover{background:var(--fill)}
.as-row > summary:focus-visible{outline:2px solid var(--s1);outline-offset:-2px}
.as-row .rtick{font:italic 800 calc(34px * var(--scale,1))/1 "Barlow Condensed","Arial Narrow",sans-serif;color:var(--fg);white-space:nowrap}
.as-row .rco{font:600 12px/1.2 Barlow,sans-serif;color:var(--dim);margin-top:3px}
.as-row .rfil{font:600 calc(14px * var(--scale,1))/1.25 Barlow,sans-serif;color:var(--fg)}
.as-row .rchg{font:800 calc(15px * var(--scale,1))/1.25 Barlow,sans-serif;color:var(--as-accent);margin-top:2px}
.as-row .rsrc{font:500 11px/1.5 "JetBrains Mono",monospace;letter-spacing:.02em;color:var(--dim)}
.as-row .rsrc .racc{color:var(--fg)}
.as-row .rcap{font:500 11px/1.5 "JetBrains Mono",monospace;letter-spacing:.02em;color:var(--faint)}
.as-row .rtog{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--edge);border-radius:var(--radius);color:var(--fg);font:800 16px "JetBrains Mono",monospace}
.as-row[open] .rtog::before{content:"\2212"} .as-row:not([open]) .rtog::before{content:"+"}
.as-row .as-rowbody{padding:6px 16px 20px;border-top:1px solid var(--edge);background:var(--bg)}
.as-row .as-rowbody blockquote{margin:14px 0 0;padding:0 0 0 18px;border-left:4px solid var(--fg);font-size:calc(16.5px * var(--scale,1));line-height:1.65;color:var(--fg);max-width:78ch}
.as-row .as-rowbody .as-cite{margin:10px 0 0;font:600 11px/1.6 "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--faint);max-width:78ch}
.as-row .as-rowbody mark{background:none;color:var(--s1);font-weight:700}

/* MECHANISM THREE · THE FRAME STRIP · quarter-width tiles in a row · an index of the film, never the figures. A tile is the frame at
   a quarter of the measure with its caption; clicking opens the frame in the theatre. Portrait frames by default (8b), landscape only
   where the content is horizontal. */
.as-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(14px * var(--scale,1))}
.as-strip.six{grid-template-columns:repeat(6,minmax(0,1fr))}
.as-tile{display:block;background:var(--card);border:1px solid var(--edge);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;padding:0}
.as-tile img{display:block;width:100%;height:auto;background:#000}
.as-tile .cap{padding:8px 10px 10px;font:600 10.5px/1.5 "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.as-tile .cap b{display:block;color:var(--fg)}
.as-tile:hover{border-color:var(--s1)}
.as-tile:focus-visible{outline:2px solid var(--s1)}
.as-strip.portrait .as-tile img{aspect-ratio:9/16;object-fit:cover}

/* MECHANISM FOUR · THE PAIR · two cards side by side · two things set against each other. The site's card. */
.as-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(18px * var(--scale,1))}
.as-card{background:var(--card);border:1px solid var(--edge);border-radius:var(--radius);padding:calc(18px * var(--scale,1)) calc(20px * var(--scale,1));display:flex;flex-direction:column;gap:10px;min-width:0}
.as-card .who{display:flex;align-items:center;gap:12px}
.as-card .who img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--fill)}
.as-card .who .name{font:700 calc(15px * var(--scale,1))/1.2 Barlow,sans-serif;color:var(--fg)}
.as-card .who .handle{font:600 11px/1.4 "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--faint)}
.as-card .role{font:700 11px/1.2 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--s1)}
.as-card .text{font-size:calc(16.5px * var(--scale,1));line-height:1.6;color:var(--fg);white-space:pre-line}
.as-card .text mark{background:none;color:var(--s1);font-weight:700}
.as-card .foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px 14px;font:600 11px/1.6 "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--faint)}
.as-card .as-btns{margin-top:4px}

/* THE FIGURE · drawn, never screenshotted. An SVG drawn in the page from the numbers beside it; the site's chart ground (--canvas)
   and the site chart palette (--chart1, then the episode accent for the hot series). Numbers stay in the DOM as text. */
.as-fig{background:var(--canvas);border:1px solid var(--edge);border-radius:var(--radius);padding:14px 14px 10px;min-width:0}
.as-fig svg{display:block;width:100%;height:auto;font-family:"JetBrains Mono",monospace}
.as-fig .fk{font:700 11px/1.3 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--plate-fg);margin:0 0 8px}
.as-fig .fs{font:500 10.5px/1.5 "JetBrains Mono",monospace;letter-spacing:.04em;color:var(--plate-dim);margin:8px 0 0}
.as-fig .fs i{font-style:italic}
.as-figs{display:grid;gap:calc(14px * var(--scale,1))}
.as-figs.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.as-figs.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.as-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(14px * var(--scale,1))}
.as-metric{background:var(--card);border:1px solid var(--edge);border-radius:var(--radius);padding:14px 16px}
.as-metric .v{font:italic 800 calc(34px * var(--scale,1))/1 "Barlow Condensed","Arial Narrow",sans-serif;color:var(--fg);white-space:normal;text-wrap:balance}   /* a long value wraps inside its pane instead of running off the page (EP03 at 1024-1366, two pieces at 768; Rig, 3 Oct 2026) */
.as-metric.hot .v{color:var(--as-accent)}
.as-metric .l{font:700 11px/1.3 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:6px}
.as-metric .m{font:500 11px/1.5 "JetBrains Mono",monospace;color:var(--faint);margin-top:4px}

/* THE TABLE · the ladder as a table, full width, the site's .ftable (front.css) with the year columns right-set. */
.as-table{width:100%;border-collapse:collapse;font-size:calc(14px * var(--scale,1))}
.as-table th,.as-table td{padding:10px 12px;border-bottom:1px solid var(--edge);text-align:left;vertical-align:top}
.as-table th{font:700 11px/1.3 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.as-table td.n,.as-table th.n{text-align:right;font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums}
.as-table td.t{font:italic 800 calc(20px * var(--scale,1))/1 "Barlow Condensed","Arial Narrow",sans-serif;white-space:nowrap}
.as-table td.up{color:var(--as-accent);font-weight:700}
.as-table td.dn{color:var(--s1);font-weight:700}
.as-table tr.sum td{border-top:2px solid var(--fg);font-weight:700}
.as-table-wrap{overflow-x:auto}

/* THE FILM · the site's player (.ttp, player.js) inside a card at a third of the measure beside the prose, or in the theatre. */
.as-film{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(24px * var(--scale,1));align-items:start}
.as-film .as-player{background:var(--card);border:1px solid var(--edge);border-radius:var(--radius);padding:10px}
.as-film .as-player figcaption{font:600 11px/1.6 "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:8px 4px 2px}
.as-film .ttp video{aspect-ratio:16/9}
.as-film .ttp.portrait video{aspect-ratio:9/16;max-height:70vh;margin:0 auto}

/* THE THEATRE · internal content opens on the page. The site's overlay (front.css .ovl / .ovl-back / .ovl-panel / .ovl-x), fed here by
   a frame, a filing extract, or the film; Esc closes; focus returns to the control that opened it. */
.as-ovl{position:fixed;inset:0;z-index:80;display:none}
.as-ovl.in{display:block}
.as-ovl .ovl-back{position:fixed;inset:0;background:var(--plate-2);opacity:.86;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}   /* MS-3924: the scrim is dark in BOTH rooms - --plate-2 is the room-invariant plate ground by the site's ruling; a film sits against dark */
html[data-theme="light"] .as-ovl .ovl-back{background:var(--plate-2);opacity:.86}   /* the site's light-room overlay rule outranks the plain one; the theatre's scrim stays dark in the light room (MS-3924) */
.as-ovl .ovl-panel{background:var(--plate);border-color:var(--plate-border);color:var(--plate-fg)}
.as-ovl .as-stage{cursor:default}
.as-ovl .ovl-x{background:var(--plate);border-color:var(--plate-border);color:var(--plate-fg)}
.as-ovl .ovl-cap{color:var(--plate-dim)}
.as-ovl .ovl-panel{position:absolute;left:50%;transform:translateX(-50%);top:0;bottom:0;width:min(calc(1120px * var(--scale,1)),100vw);background:var(--bg);border-left:1px solid var(--edge);border-right:1px solid var(--edge);overflow:auto;display:flex;flex-direction:column}
.as-ovl .ovl-x{position:sticky;top:12px;align-self:flex-end;margin:12px 14px 0 0;z-index:2;background:var(--bg);border:1px solid var(--edge);border-radius:var(--radius);color:var(--fg);font:800 14px "JetBrains Mono",monospace;min-width:44px;min-height:44px;cursor:pointer}
.as-ovl .as-stage{flex:1;display:grid;place-items:center;padding:0 24px 24px}
.as-ovl .as-stage img{max-width:100%;max-height:calc(100vh - 140px);display:block;border:1px solid var(--edge)}
.as-ovl .as-stage .ttp{width:100%;max-width:100%}
.as-ovl .as-stage .ttp.portrait{max-width:calc((100vh - 160px) * 9 / 16)}
.as-ovl .as-stage .ttp.portrait video{aspect-ratio:9/16}
.as-ovl .as-stage .as-doc{max-width:78ch;padding:10px 0 30px}
.as-ovl .as-stage .as-doc h3{margin:0 0 6px;font:italic 800 calc(34px * var(--scale,1))/1 "Barlow Condensed","Arial Narrow",sans-serif;color:var(--fg)}
.as-ovl .as-stage .as-doc .as-cite{font:600 11px/1.6 "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--faint);margin:0 0 14px}
.as-ovl .as-stage .as-doc blockquote{margin:0;padding:0 0 0 18px;border-left:4px solid var(--fg);font-size:calc(17.5px * var(--scale,1));line-height:1.7;color:var(--fg)}
.as-ovl .as-stage .as-doc mark{background:none;color:var(--s1);font-weight:700}
.as-ovl .ovl-cap{padding:10px 24px 24px;font:600 11px/1.6 "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);text-align:center}
body.as-lock{overflow:hidden}

/* THE CLOSE · the closing statement (full width if it earns it) and the corrections in the desk's own voice, dated. */
.as-close{padding:calc(40px * var(--scale,1)) 0;text-align:left}
.as-close .line{margin:0;font:italic 800 clamp(30px,5.2vw,84px)/.96 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:-.005em;color:var(--fg)}
.as-close .line b{color:var(--as-accent);font-weight:800}
.as-close .under{margin:14px 0 0;font:700 12px/1.4 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.as-corr{max-width:78ch}
.as-corr li{list-style:none;padding:12px 0;border-bottom:1px solid var(--edge);display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;font-size:calc(15px * var(--scale,1));line-height:1.6}
.as-corr li .d{font:700 11px/1.6 "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--faint)}
.as-corr ul{margin:0;padding:0}

/* THE LIBRARY PAGE · the blank standard marks each placeholder so no reader mistakes it for content. */
.as-ph{color:var(--dim);font-style:italic}
.as-phbox{border:1px dashed var(--edge2,var(--edge));border-radius:var(--radius);padding:14px 16px;font:600 11px/1.6 "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--faint);text-transform:uppercase}

/* THE FIRST PASS BELOW 960 (MS-3833: a first pass, not a design - raised as a question). Grids stack; the strip goes two across;
   the accordion row wraps its columns. */
@media (max-width:960px){
  .as-grid.two,.as-grid.prose-aside,.as-grid.split,.as-grid.split.flip{grid-template-columns:1fr}
  .as-grid.split.flip > .as-prose{order:0}
  .as-strip,.as-strip.six{grid-template-columns:repeat(2,minmax(0,1fr))}
  .as-pair,.as-film{grid-template-columns:1fr}
  .as-figs.five,.as-figs.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .as-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .as-row > summary{grid-template-columns:minmax(0,1fr) 44px;gap:6px 12px}
  .as-tabs .as-tab{min-width:0;flex:1 1 30%}
}

/* ── the pieces the library needs beyond the mechanisms ── */
.as-article{padding-bottom:40px}
.as-hero .as-eyebrow,.as-hero .as-hook{font:700 12px/1.4 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase}
.as-hero .as-eyebrow{color:var(--faint);margin:0 0 10px}
.as-hero .as-hook{color:var(--s1);margin:0 0 8px}
.as-hero .home-title span{white-space:normal}
.as-hero .home-card .intro{margin:0 0 14px}
.as-hero .as-art{position:relative;overflow:hidden;min-height:340px;background:var(--plate)}
.as-hero .as-art figure{position:absolute;inset:0;margin:0;opacity:1}
.as-hero .as-art img{width:100%;height:100%;object-fit:cover;display:block}
.as-hero .as-artph{display:grid;place-items:center;padding:24px}
@media (max-width:760px){.as-hero .as-art{min-height:0;aspect-ratio:16/9}}   /* the opening frame shows whole on a phone: a 16:9 picture in a near-square box cut its title on both sides (seen at 390, 3 Oct 2026) */
.as-hero .as-when{margin-top:14px}
.as-strap{margin:-6px 0 calc(16px * var(--scale,1));font:italic 500 calc(15px * var(--scale,1))/1.5 Barlow,sans-serif;color:var(--dim)}
.as-console{border-top:none;padding-top:calc(18px * var(--scale,1))}
.as-metric{text-decoration:none;display:block}
a.as-metric:hover{border-color:var(--s1)}
.as-metrics.four{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:12px}
.as-metrics.four .as-metric .v{font-size:calc(22px * var(--scale,1))}
.as-spine{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:2px 0;background:var(--bg);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);padding:6px 0}
.as-spine a{font:700 10.5px/1.2 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);text-decoration:none;padding:9px 10px;min-height:36px;display:inline-flex;align-items:center}
.as-spine a:hover{color:var(--fg);box-shadow:inset 0 -3px 0 var(--s1)}
.as-film{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.as-film .as-playerwrap{min-width:0}
.as-poster{position:relative;display:block;width:100%;padding:0;border:1px solid var(--edge);border-radius:var(--radius);background:#000;cursor:pointer;overflow:hidden}
.as-poster img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
/* THE PLAY CONTROL sits where the site's player bar sits - along the foot, over the empty band of frame zero - never on the type (MS-3880: frame zero is sparse so a control lands in space; the site's .ttp-bar is at the foot, so this matches it). */
.as-poster .as-play{position:absolute;left:0;right:0;bottom:0;height:52px;display:flex;align-items:center;gap:12px;padding:0 14px;background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,0));color:var(--plate-fg);font:700 12px/1 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;text-align:left}
.as-poster .as-play b{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--s1);color:var(--accent-ink);font-size:14px;padding-left:3px;box-sizing:border-box}
.as-poster:hover{border-color:var(--s1)} .as-poster:focus-visible{outline:2px solid var(--s1);outline-offset:2px}
.as-figcap{font:600 11px/1.6 "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:8px 2px 0;margin:0}
.as-film .as-card p{margin:0;font-size:calc(15.5px * var(--scale,1));line-height:1.6}
.as-metalist{display:grid;gap:0;margin:4px 0}
.as-metalist div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--edge);font:600 11px/1.5 "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase}
.as-metalist div span:first-child{color:var(--faint)} .as-metalist div span:last-child{color:var(--fg);text-align:right}
.as-card .as-fs,.as-fs{font:500 10.5px/1.5 "JetBrains Mono",monospace;letter-spacing:.04em;color:var(--faint);margin:10px 0 0;max-width:none}
.as-card.hot .role{color:var(--as-accent)}
.as-margin .text{font-size:calc(17px * var(--scale,1));font-style:italic}
.as-note{margin:14px 0 0;padding:12px 14px;border:1px dashed var(--edge2,var(--edge));border-radius:var(--radius);font-size:calc(14.5px * var(--scale,1));line-height:1.6;color:var(--dim);max-width:78ch;display:block}
.as-note b{color:var(--fg)}
.as-prose .as-note{margin-top:4px}
.as-rcpt{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 16px;margin:14px 0 0;font:500 11.5px/1.5 "JetBrains Mono",monospace;letter-spacing:.02em;max-width:78ch}
.as-rcpt dt{color:var(--faint);text-transform:uppercase;letter-spacing:.1em} .as-rcpt dd{margin:0;color:var(--fg)}
.as-owed,.as-owedcell{display:inline-block;padding:6px 10px;border:1px solid var(--s2);border-radius:var(--radius);color:var(--s2);font:700 10.5px/1.4 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;margin-top:8px}
.as-owedcell{margin-top:0;white-space:normal}
.as-mark{display:inline-block;padding:2px 8px;border:1px solid var(--as-accent);border-radius:var(--radius);color:var(--as-accent);font:800 10px/1.5 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;vertical-align:middle}

/* MS-4112: a decision the desk has taken and MICHAEL RULES, marked on the page where it stands rather than in a note elsewhere.
   It reads as a chip like the arithmetic mark but filled, because it is asking for an answer rather than declaring a method. */
.as-rule{display:inline-block;padding:2px 8px;border-radius:var(--radius);background:var(--as-accent);color:#000;font:800 10px/1.5 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;margin-right:6px}
.as-seq{display:grid;gap:8px;margin:8px 0}
.as-arrow{text-align:center;color:var(--faint);font:700 16px "JetBrains Mono",monospace}
.as-tablewrap{margin-top:calc(28px * var(--scale,1))}
.as-tk{font:700 11px/1.3 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--fg);margin:0 0 10px}
.as-table td .as-btn{min-height:32px;padding:5px 10px;font-size:10px}
.as-table td.n .n,.as-table .n{font-family:"JetBrains Mono",monospace;font-size:12px}
.as-strip{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-flow:dense}
.as-tile.land{grid-column:span 2}
.as-tile img{aspect-ratio:9/16;object-fit:contain;object-position:top;background:#000}
.as-tile.land img{aspect-ratio:auto;height:100%;object-fit:contain}
.as-tile{display:flex;flex-direction:column}
.as-tile .imgbox{flex:1;min-height:0;background:#000;display:flex;align-items:flex-start;justify-content:center}
.as-tile.land .imgbox{align-items:center}
.as-tile .imgbox img{max-height:100%;width:100%}
.as-lead{margin-bottom:calc(18px * var(--scale,1))}
.as-disc > summary{grid-template-columns:minmax(0,1fr) 44px}
.as-dsum{font:700 calc(14px * var(--scale,1))/1.3 Barlow,sans-serif;color:var(--fg)}
.as-corr{margin:8px 0 0;padding:0}
.as-corr li{list-style:none;display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;padding:12px 0;border-bottom:1px solid var(--edge);font-size:calc(15px * var(--scale,1));line-height:1.6;max-width:none}
.as-corr li span:last-child{max-width:78ch}
.as-corr li .d{font:700 11px/1.6 "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--faint)}
.as-closeband{background:var(--bg2);margin:0 calc(-24px);padding-left:24px;padding-right:24px}
.as-close{max-width:min(60ch,760px);margin:0 auto;text-align:center}
.as-close .line{font-size:clamp(28px,4.2vw,64px)}
.as-rules .as-prose p{font-size:calc(15px * var(--scale,1));line-height:1.6}
.as-rules{border-top:none}
.as-rowbody .as-btns .as-btn{white-space:normal;text-align:left}
@media (max-width:960px){.as-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.as-tile.land{grid-column:span 2}.as-film{grid-template-columns:1fr}.as-metrics.four{grid-template-columns:repeat(2,minmax(0,1fr))}.as-closeband{margin:0 -16px;padding-left:16px;padding-right:16px}}

.as-film .as-card p.as-fs{font:500 10.5px/1.5 "JetBrains Mono",monospace;letter-spacing:.04em;color:var(--faint);margin:10px 0 0}

.as-tile.land .imgbox img{object-position:center}

/* ── ROUND ONE (MS-3865) ── */
html[data-theme="light"] .as-fig{background:var(--card);border-color:rgba(0,0,0,.14)}
html[data-theme="light"] .as-fig .fk{color:var(--fg)} html[data-theme="light"] .as-fig .fs{color:var(--dim)}
html[data-theme="light"] .as-mark{color:var(--as-accent);border-color:var(--as-accent)}
html[data-theme="light"] .as-owed,html[data-theme="light"] .as-owedcell{color:var(--as-owed);border-color:var(--as-owed)}
html[data-theme="light"] .as-card,html[data-theme="light"] .as-metric,html[data-theme="light"] .as-row,html[data-theme="light"] .as-tabs{border-color:rgba(0,0,0,.18)}
html[data-theme="light"] .as-tabs .as-tabbar{background:rgba(0,0,0,.12);border-bottom-color:rgba(0,0,0,.18)}
html[data-theme="light"] .as-tabs .as-tab[aria-selected="true"]{box-shadow:inset 0 -3px 0 var(--as-site)}
html[data-theme="light"] .as-row > summary:hover{background:rgba(0,0,0,.04)}
html[data-theme="light"] .as-table th,html[data-theme="light"] .as-table td{border-bottom-color:rgba(0,0,0,.14)}
html[data-theme="light"] .as-table tbody tr:hover td{background:rgba(0,0,0,.035)}
html[data-theme="light"] .as-acc{border-top-color:rgba(0,0,0,.18)}
html[data-theme="light"] .as-rowbody{background:var(--bg2)}
html[data-theme="light"] .as-row .as-rowbody mark,html[data-theme="light"] .as-card .text mark,html[data-theme="light"] .as-ovl .as-doc mark{color:var(--as-site)}
html[data-theme="light"] .as-k b,html[data-theme="light"] .as-hero .as-hook,html[data-theme="light"] .as-card .role{color:var(--as-site)}
html[data-theme="light"] .as-card.hot .role,html[data-theme="light"] .as-row .rchg,html[data-theme="light"] .as-metric.hot .v,html[data-theme="light"] .as-table td.up,html[data-theme="light"] .as-close .line b{color:var(--as-accent)}
html[data-theme="light"] .as-table td.dn{color:var(--as-site)}
html[data-theme="light"] .as-tile,html[data-theme="light"] .as-poster,html[data-theme="light"] .as-rotator,html[data-theme="light"] .as-rotator .stage img{border-color:var(--as-imgedge)}
html[data-theme="light"] .as-rotator .stage button{border-color:var(--as-imgedge)}
html[data-theme="light"] .as-spine{background:var(--bg)}
.as-table tbody tr:hover td{background:rgba(255,255,255,.04)}
.as-row .rchg.dn{color:var(--s1)}

/* THE FRAME ROTATOR · one aspect per component (16:9 here, the widescreen cut); one frame large, NAMED controls beneath (beat number and
   name), never a bare arrow, no rotation, every frame real HTML in the page; the large frame opens the theatre. The tabs mechanism. */
.as-rotator{border:1px solid var(--edge);border-radius:var(--radius);background:var(--card);overflow:hidden}
.as-rotator .as-pane{padding:0}
.as-rotator .stage button{display:block;width:100%;padding:0;border:none;background:#000;cursor:pointer}
.as-rotator .stage img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#000}
.as-rotator .stage button:focus-visible{outline:2px solid var(--s1);outline-offset:-2px}
.as-rotator .as-pane .cap{display:block;padding:10px 14px;font:600 10.5px/1.5 "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);border-top:1px solid var(--edge)}
.as-rotator .as-pane .cap b{color:var(--fg)}
.as-rotator .as-tabbar{border-top:1px solid var(--edge);border-bottom:none}
.as-rotator .as-tab{min-width:0;flex:1 1 0;padding:11px 6px;font-size:10px}
.as-rotator .as-tab b{display:block;color:var(--fg);font-size:12px;margin-bottom:3px}
html.no-js .as-rotator .as-pane{border-top:1px solid var(--edge)}

/* THE LEDE and THE BAND · the balance rule's levers: opening paragraphs up into a full-width lede; notes and chrome down into a full-width band. */
.as-lede{max-width:none;margin:0 0 calc(22px * var(--scale,1))}
.as-lede p{max-width:78ch}
.as-band{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:16px;align-items:start;margin-top:calc(22px * var(--scale,1))}
.as-band .as-note{margin:0;max-width:none}
.as-band .as-owed{margin:0;max-width:26ch;white-space:normal}

/* THE CLOSER AS TWO CARDS · the prose card and the statement card side by side; the statement's type fills its card (standard.js). */
.as-closegrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(18px * var(--scale,1));align-items:stretch}
.as-closegrid.statement-right > .as-statement{order:2}
.as-statement{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-height:360px;padding:calc(28px * var(--scale,1))}
.as-statement .line{margin:0;font:italic 800 64px/.96 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:-.005em;color:var(--fg);text-wrap:balance;width:100%}
.as-statement .line b{color:var(--as-accent);font-weight:800}
/* MS-4122: THE BIG NUMERAL AND HEADLINE, the elements catalogue's strongest single element, expressed in the article standard's own
   stylesheet because the catalogue's class is scoped to the front page. One number, one line. The numeral is the accent because it IS
   the outcome the section is about; the line beneath matches the statement card opposite it so the two read as a pair. */
.as-bigcount{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;height:100%;gap:calc(10px * var(--scale,1))}
.as-bigcount .n{margin:0;font:italic 800 clamp(64px, 11vw, 140px)/.9 "Barlow Condensed","Arial Narrow",sans-serif;color:var(--as-accent);letter-spacing:-.01em}
.as-bigcount .l{margin:0;font:italic 800 clamp(28px, 3.4vw, 44px)/1.02 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;color:var(--fg);text-wrap:balance}
.as-statement .under{margin:14px 0 0;font:700 11px/1.4 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.as-closegrid .as-card .as-prose p{font-size:calc(16.5px * var(--scale,1))}
@media (max-width:960px){.as-closegrid{grid-template-columns:1fr}.as-closegrid.statement-right > .as-statement{order:0}.as-band{grid-template-columns:1fr}.as-rotator .as-tab{flex:1 1 30%}}


/* THE DOORS (MS-3923, MS-3924) · a card on the interlinked page or the homepage band: a thumbnail and two actions at equal weight, PLAY THE VIDEO
   (the theatre, over the page) and READ THE ARTICLE (navigates); where there is no article the second action is a non-interactive marker,
   ARTICLE COMING SOON - muted text on the card surface, no fill, no border, no accent, visibly quieter than the live control, in both rooms. */
.as-door-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;align-items:stretch}   /* MS-3953: equal columns while both fit, one under the other when they do not - a label never leaves its box (the flex version let the boxes shrink under their labels) */
.as-door-actions .as-btn{min-width:0}
.as-soon{min-width:0;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;font:700 11px/1.2 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);background:none;border:1px solid transparent;cursor:default;user-select:none}
.as-door-thumb{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--plate-2);border:1px solid var(--edge);border-radius:var(--radius)}
/* THE FORM OF A REBUILT PIECE (Michael, MS-5188): the headline band holds as many measures as the piece names; the panes of a section are
   small multiples a reader scans; a named stop (the voices) is marked off from the numbered run */
.as-console .as-metrics{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.as-panes{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:calc(18px * var(--scale,1))}
.as-panes .as-metric .v{font-size:clamp(20px,2.2vw,30px)}
.as-sec.as-stop{border-left:4px solid var(--s1);padding-left:calc(18px * var(--scale,1))}
.as-console .as-metric .l,.as-panes .as-metric .l{font-size:13px;text-transform:none}   /* the labels carry dates and counts: readable size, and the source's own capitals (PDEs) kept */

/* THE RECEIPTS TABLE ON A PHONE (Michael, MS-6718): each receipt stacks as a block, every word kept, its column's name above each part.
   Wide screens are unchanged. The column names come from the cells' own data-l (frozen_figures.py). */
@media (max-width:640px){
  .as-table.as-rcpt,.as-table.as-rcpt tbody,.as-table.as-rcpt tr,.as-table.as-rcpt td{display:block;width:100%}
  .as-table.as-rcpt thead{display:none}
  .as-table.as-rcpt tr{border-bottom:1px solid var(--edge);padding:10px 0}
  .as-table.as-rcpt td{border-bottom:0;padding:4px 0;overflow-wrap:anywhere}
  .as-table.as-rcpt td::before{content:attr(data-l);display:block;font:700 10px/1.4 "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--dim);margin-bottom:2px}
}