/* 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. */
/* TT-ARC-090: DISPLAY IS BARLOW. Space Grotesk left the font link entirely, so every declaration
   naming it here would have fallen back to system sans — silently, on article headlines. */
/* article-page additions over the contract css — same tokens, no new colors (strict monochrome) */
.article{max-width:760px;margin:0 auto;padding:34px 20px 80px}
.article .tag{display:inline-block;background:var(--fill);color:var(--fg);border:var(--line);font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:.14em;padding:6px 10px}
.screamer{font-family:Barlow,sans-serif;font-weight:700;font-size:clamp(30px,5.4vw,54px);line-height:.9;margin:16px 0 10px;letter-spacing:-.03em}   /* TT-ARC-009: display sizes condense; the article screamer is one */
.deck{font-style:italic;font-size:19px;line-height:1.5;color:var(--dim);margin:0 0 8px}
.meta{font:600 11px/1.6 "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--faint);margin:0 0 22px}
.body p{font-size:17.5px;line-height:1.75;margin:0 0 18px}
.body h2{font-family:Barlow,sans-serif;font-weight:700;font-size:22px;margin:30px 0 12px}
.pull{margin:26px 0;padding:4px 0 4px 20px;border-left:4px solid var(--fg);font-size:21px;line-height:1.5;font-weight:600}
.vid video,.vid iframe{width:100%;aspect-ratio:16/9;display:block;background:#000;border:1px solid var(--edge)}
.vid figcaption,.doc figcaption{font:11px/1.6 "JetBrains Mono",monospace;color:var(--faint);padding-top:6px}
.doc object{width:100%;height:520px;border:1px solid var(--edge)}
.embx{padding:40px 20px;border:1px dashed var(--edge2);text-align:center;font:600 12px "JetBrains Mono",monospace;color:var(--dim)}
.vlabel,.vcount{font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--dim)}
.vcount{margin-left:auto}









.reveal{margin:30px 0}
.tell{margin-top:16px;border:1px solid var(--edge);padding:14px 16px}
/* .tellk, NOT .tk — .tk is the logo's TOKEN span in the contract; the first name collided and shrank the logo to 11px */
.tellk{font:800 11px "JetBrains Mono",monospace;letter-spacing:.16em;color:var(--dim)}
.receipts{margin-top:36px;border-top:2px solid var(--fg);padding-top:14px}
.receipts h3{font:800 13px "JetBrains Mono",monospace;letter-spacing:.16em;margin:0 0 10px}
/* a receipt row WRAPS: an instrument's long source name pushed its date 56px past a phone's edge (the
   Complex, measured at 390); the name may break anywhere, the date keeps its right edge on the row it fits */
.receipts li{list-style:none;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--edge)}
.receipts .rn{min-width:0;flex:1 1 180px;overflow-wrap:anywhere}
.receipts ul{margin:0;padding:0}
.rk{font:700 10px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--faint);min-width:80px}
.receipts a{color:var(--fg)}
.rd{margin-left:auto;font:11px "JetBrains Mono",monospace;color:var(--faint)}
.rewrite-plate{border:1px solid var(--edge);border-left:4px solid var(--fg);padding:10px 14px;margin:0 0 18px;font-size:13.5px;line-height:1.6;color:var(--dim)}
.rwk{font:800 10px "JetBrains Mono",monospace;letter-spacing:.16em;background:var(--fg);color:var(--bg);padding:3px 7px;margin-right:8px}
/* multimedia blocks (TT-ARC-027) */
.bimg img{width:100%;display:block;border:1px solid var(--edge);border-radius:var(--radius)}
.bimg figcaption,.gcell figcaption{font:12px/1.5 Barlow;color:var(--dim);padding-top:6px}
.bimg .cred,.gcell .cred{display:block;font:600 10px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--faint)}
.bgallery{position:relative;overflow:hidden;margin:22px 0}
.gtrack{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.gcell{flex:0 0 78%;scroll-snap-align:start;margin:0}
.gcell img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--edge);border-radius:var(--radius)}
.gwalk{position:absolute;top:38%;background:var(--bg);border:1px solid var(--edge);border-radius:50%;width:38px;height:38px;cursor:pointer;color:var(--fg)}
.gwalk.prev{left:8px}.gwalk.next{right:8px}
.bstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:24px 0;border-top:2px solid var(--fg);padding-top:16px}
.stat .sn{display:block;font-family:Barlow,sans-serif;font-weight:700;font-size:30px;letter-spacing:-.02em}
.stat .sl{font:600 10px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--dim)}

/* THE HEADER — variant B ruled (TT-ARC-029): one header, two frames; lifted from the demo */
.ovl-heroB{position:relative;min-height:440px;display:flex;flex-direction:column;justify-content:flex-end;
background-size:cover;background-position:center;border-radius:12px 12px 0 0;overflow:hidden}
/* R8/377 · PATTERN B ON THE READER HERO — same endpoints as the doors, mapped to a different anatomy.
   The doors are 230px cards whose only ink is a title at the base, so the two-stop constant lands the
   .92 exactly where the ink is: measured 9.0-10.8:1 on all nine, both rooms. The reader hero is 440px
   carrying an ENTIRE ink block — tag, h1, deck, meta — that occupies the bottom 71%. Dropped on it
   unchanged, the ramp had already climbed to .46 by the top of the headline and the worst art measured
   3.71:1, under the 4.5 floor. 376's own words are the resolution: the darkening "ramps in behind the
   title zone", and on this card the title zone is most of the card. So the ENDPOINTS are Arc's exactly
   (.92 floor, .15 ceiling, bottom-weighted) and only the ramp's extent follows the ink. Verified by
   render, not by token — which is the whole reason the flat 35% wash that used to prop this up is gone. */
.ovl-heroB::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%)}
.ovl-heroB .inner{position:relative;z-index:1;padding:70px 40px 30px;color:#EDEDED}
.ovl-heroB .cred{position:absolute;z-index:1;left:16px;top:14px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;color:rgba(237,237,237,.6);text-transform:uppercase}
.ovl-heroB .tag{background:var(--fill);color:var(--fg);border:var(--line)}
.ovl-heroB h1{font-family:Barlow,sans-serif;font-weight:700;font-size:clamp(28px,3.6vw,44px);line-height:.94;letter-spacing:-.03em;margin:14px 0 0;color:#EDEDED;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.ovl-heroB .deck{font-size:16.5px;color:rgba(237,237,237,.82);margin-top:12px;max-width:900px}
.ovl-heroB .meta{font-size:10.5px;color:rgba(237,237,237,.55);margin-top:12px;text-transform:uppercase;letter-spacing:.06em}
.ovl-heroB{border-radius:0}
.ovl-heroB .inner{padding:60px 20px 24px}

/* PANEL-STANDARD §7 zone 7 — RELATED. Cards on the reader surface, so the ladder applies inside the popup
   too. Empty rows never render (absent, not dimmed), and no ad may appear in this zone. */
.related{margin-top:34px;border-top:1px solid var(--edge);padding-top:26px}
.relrow + .relrow{margin-top:26px}
.relrow h3{font-family:Barlow,sans-serif;font-weight:600;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);margin:0 0 12px}
.relrow .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0}
.relrow .story{height:auto}
.relrow .story .img{height:120px}
.relrow .story h3{font-size:15px;line-height:1.15;margin:6px 0 0}
@media (max-width:900px){.relrow .grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.relrow .grid{grid-template-columns:1fr}}
.article .door{margin-top:26px}

/* THE EXHIBIT (B3 skeleton). Mono only — series are told apart by stroke pattern and label, never by hue,
   because the monochrome law applies to data as much as to chrome. The data-through plate is part of the
   figure, not a caption we might forget: an undated chart is a claim with no expiry. */
.exhibit{margin:26px 0;border:1px solid var(--edge);background:var(--cardface);border-radius:var(--radius);padding:var(--pad)}
.exfind{font-family:Barlow,sans-serif;font-weight:600;font-size:19px;line-height:1.2;letter-spacing:-.012em;margin:0 0 14px}
.exsvg{width:100%;height:auto;display:block;color:var(--fg)}
.extick{font:600 9px "JetBrains Mono",monospace;fill:var(--dim)}
.exkeys{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px}
.exkey{display:inline-flex;align-items:center;gap:6px;font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--dim)}
.exnote{font-size:12.5px;line-height:1.5;color:var(--dim);margin-top:12px}
.exthrough{font:700 9px "JetBrains Mono",monospace;letter-spacing:.16em;color:var(--dim);margin-top:12px;
  padding-top:10px;border-top:1px solid var(--edge);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* THE OTHER TWO T0 TYPES (TT-ARC-135 §V). One frame, three bodies — the finding headline, the data-through
   plate and the stale flag are the FRAME's job, so a new type inherits the standards instead of re-earning
   them. Both of these follow the room through the same tokens the line chart uses, in all four themes. */
.extiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;background:var(--edge)}
.extile{background:var(--cardface);padding:16px 14px}
.extile-n{font-family:Barlow,sans-serif;font-weight:600;font-size:31px;line-height:1;letter-spacing:-.02em;color:var(--fg)}
.extile-u{font:700 11px "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--dim);margin-left:4px}
.extile-l{font:700 9px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--dim);margin-top:8px;text-transform:uppercase}
.extile-s{font-size:11.5px;line-height:1.45;color:var(--dim);margin-top:6px}
/* the board reads with the bars stripped: the number is printed, the bar only repeats it as length */
.exboard{display:flex;flex-direction:column;gap:9px}
.exrow{display:grid;grid-template-columns:minmax(88px,26%) 1fr auto;align-items:center;gap:12px}
.exrow-l{font:700 10px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--fg);text-transform:uppercase}
.exrow-bar{height:9px;background:var(--edge);display:block}
.exrow-bar>span{display:block;height:100%;background:var(--fg);opacity:.72}
.exrow-v{font-family:Barlow,sans-serif;font-weight:600;font-size:15px;color:var(--fg);font-variant-numeric:tabular-nums}
/* STALE = LAST GOOD, never silent and never hidden: it rides the plate the reader is already looking at */
.exstale{font:700 9px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--fg);border:1px solid var(--fg);padding:2px 6px}

/* THE SCRUBBABLE EXPLORER (T2). touch-action:pan-y so a vertical swipe stays the PAGE's — only a
   horizontal drag is ours; the same manners the diagram engine had to learn in the popup. */
.exexp{touch-action:pan-y;cursor:ew-resize}
.exexp:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.exrd{display:flex;flex-wrap:wrap;gap:2px 26px;align-items:baseline;margin-top:12px;
  border-top:1px solid var(--edge);padding-top:11px}
.exrd-at{font:700 9px "JetBrains Mono",monospace;letter-spacing:.16em;color:var(--dim);width:100%}
.exrd-x{color:var(--fg)}
.exrd-r{display:flex;gap:9px;align-items:baseline}
.exrd-l{font:700 9px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.exrd-v{font-family:Barlow,sans-serif;font-weight:600;font-size:19px;color:var(--fg);font-variant-numeric:tabular-nums}
.exrd-gap .exrd-l,.exrd-gap .exrd-v{border-bottom:1px solid var(--fg)}
.exhint{font:700 8.5px "JetBrains Mono",monospace;letter-spacing:.16em;color:var(--dim);margin-top:9px}

/* INLINE CARD METRIC — the card scale is a STYLING fact keyed off data-type, never a second frame:
   the one place a number would most damage a reader if it lost its date is on a card, at a glance. */
.exhibit[data-type="metric"]{padding:16px 18px}
.exhibit[data-type="metric"] .exfind{font-size:14.5px;line-height:1.25;margin:0 0 10px}
.exmwrap{display:flex;flex-direction:column;gap:2px}
.exmv{font-family:Barlow,sans-serif;font-weight:600;font-size:38px;line-height:1;letter-spacing:-.022em;color:var(--fg)}
.exmu{font:700 12px "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--dim);margin-left:5px}
.exml{font:700 9px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;margin-top:6px}
/* the delta wears a sign and its basis in words — never a colour, never an arrow alone: up-is-green is
   a value judgement the data has not made */
.exmd{font:700 10px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--fg);margin-top:8px}
.exmb{color:var(--dim);font-weight:600;margin-left:7px;letter-spacing:.06em}
.exmspark{width:96px;height:26px;margin-top:10px;color:var(--fg);opacity:.75}

/* THE TWO FACES (TT-ARC-146) — pure CSS, no JS. T0 is the face shares, films, print and a JS-off
   reader see, so a flip that needed a script would be a face half the audience could not reach. The
   checkbox stays focusable (never display:none) so the keyboard can work it. */
.exfaces{position:relative}
.exflip{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.exflipl{display:inline-flex;gap:1px;margin:0 0 14px;cursor:pointer;user-select:none}
.exflipl span{font:700 9px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--dim);
  border:1px solid var(--edge);padding:4px 10px;background:var(--cardface)}
.exflipl .exflipa{color:var(--fg);border-color:var(--fg)}
.exflip:checked+.exflipl .exflipa{color:var(--dim);border-color:var(--edge)}
.exflip:checked+.exflipl .exflipb{color:var(--fg);border-color:var(--fg)}
.exflip:focus-visible+.exflipl span{outline:2px solid var(--fg);outline-offset:1px}
.exface.exsimple{font-size:15px;line-height:1.62;color:var(--fg);max-width:62ch}
/* SIMPLE LEADS (TT-ARC-152 §2). The unchecked state is what a reader gets with no interaction, so the
   ruled default is the OFF state — never a class the stylesheet has to remember to add. */
.exface.extech{display:none}
.exflip:checked~.exface.exsimple{display:none}
.exflip:checked~.exface.extech{display:block}

/* THE RECEIPT-ABSENCE NOTICE (TT-ARC-147) — absence is a DISPLAYED STATE, never a blocker and never
   a blank. It reads as a standing label, not an alarm: a receiptless item is normal, not broken. */
/* the rule is drawn on --dim, not --edge: --edge is a panel seam and it all but disappears in the dark
   room, which would leave a STANDING NOTICE reading as loose text in half the themes. Caught by looking. */
.exabsent,.exunauth{font:700 9px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--dim);
  border:1px dashed var(--dim);padding:7px 10px;margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.exabsc,.exunp{color:var(--fg);letter-spacing:.1em;font-weight:800}

/* AN EMPTY RAIL SLOT SAYS WHY (TR-BUILD §4 E2, Michael MS-0286): the reason reads as a standing label in
   the honesty voice — the same dashed rule the receipt-absence notice wears — never a blank drawer. */
.rempty{font:600 12.5px/1.5 Barlow,sans-serif;color:var(--dim);background:var(--fill);border:1px solid var(--edge);border-radius:3px;padding:8px 10px;margin:4px 0 6px}
/* THE PORTED ESSAY'S LABEL — the one paragraph a Cycle Memory piece opens with: mono, spaced, a statement
   of what kind of argument follows ("ARGUES FROM HISTORY, NOT FROM A LEDGER"). */
.blabel{font:700 11px/1.6 "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--dim);border-left:3px solid var(--fg);padding-left:12px;margin:0 0 22px}

/* THE INSTRUMENT FACE (TR-BUILD §3): one number, one direction, one sentence, at reading size. The
   number is display type; the direction is a mono chip; everything else is prose in the article's own
   voice. Ink only — colour is the system's voice, never the editorial's (§5.7). */
.iface{margin:0 0 22px;padding:0 0 18px;border-bottom:1px solid var(--edge)}
.iread{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ival{font-family:Barlow,sans-serif;font-weight:700;font-size:64px;line-height:1;letter-spacing:-.03em;color:var(--fg)}
.iunit{font:700 14px "JetBrains Mono",monospace;color:var(--dim);letter-spacing:.06em}
.ichip{font:800 9.5px "JetBrains Mono",monospace;letter-spacing:.16em;padding:4px 8px;border:1px solid var(--fg);color:var(--fg);border-radius:3px}
.iband{font:700 11px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.iqual{font:600 11px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--dim);margin-top:6px}
.isent{font-family:Barlow,sans-serif;font-weight:600;font-size:22px;line-height:1.3;margin:16px 0 8px;color:var(--fg)}
.ipress{font-size:16px;line-height:1.55;color:var(--fg);margin:8px 0}
.ibasis,.ihonest{font-size:13px;line-height:1.5;color:var(--dim);margin:8px 0 0}
.ihonest{border-left:3px solid var(--dim);padding-left:10px}
.iasof{font:700 9px "JetBrains Mono",monospace;letter-spacing:.16em;color:var(--dim);margin-top:12px;text-transform:uppercase}

/* THE DATAVIZ BUILD LAW, DEV'S HALF (tr-dataviz-toolbox.html). Three authored organs the frame renders and
   gates: the DECLARATION plate (mode · owner · evidence · as-of) in the through-plate's voice; the TELL —
   the one true sentence — printed ON the figure, inside the picture's own box, never beside it; and the
   FALSIFY line, which sits directly under the finding it would overturn. What the desk has not authored
   prints as UNAUTHORED in the absence voice above: a gap you can see is a gap that shrinks. Every ink is a
   token, so it reads in all four rooms and never paints over the data with a colour.
   THE TELL IS A STRIP, NOT AN OVERLAY. The first cut floated it over the picture's bottom-left corner and
   the render showed it sitting on the origin tick — a sentence that hides a number is the wrong kind of
   "on the figure". It now heads the picture inside the figure's own box: the same geometry the gate
   measures, and by construction it can never occlude a datum, a tick, or a T2 engine's handles. */
.exvis{position:relative}
.extell{font-family:Barlow,sans-serif;font-weight:600;font-size:13px;line-height:1.35;color:var(--fg);
  border-left:3px solid var(--fg);padding:2px 0 2px 10px;margin:0 0 12px}
.exfals{font-size:12.5px;line-height:1.5;color:var(--dim);margin:-6px 0 14px;display:flex;gap:8px;align-items:baseline}
.exfalsk{flex:none;font:800 9px "JetBrains Mono",monospace;letter-spacing:.16em;color:var(--fg)}
.exdecl{font:700 9px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--dim);margin-top:12px;
  display:flex;gap:14px;flex-wrap:wrap;text-transform:uppercase}

/* SCATTER / QUADRANT · GAUGE · TIMELINE (§V type inventory). Every value below is a TOKEN: an exhibit
   that hard-codes ink passes in the room it was written in and fails in the other three. */
.exquad{font:700 8.5px "JetBrains Mono",monospace;letter-spacing:.12em;fill:var(--dim);text-transform:uppercase}
.exaxl{font:700 9px "JetBrains Mono",monospace;letter-spacing:.14em;fill:var(--dim);text-transform:uppercase}
.exgv{font-family:Barlow,sans-serif;font-weight:600;font-size:34px;fill:var(--fg);letter-spacing:-.02em}
.exgu{font:700 12px "JetBrains Mono",monospace;fill:var(--dim)}
.exgl{font:700 9px "JetBrains Mono",monospace;letter-spacing:.14em;fill:var(--dim);text-transform:uppercase}
.exband{font:700 8.5px "JetBrains Mono",monospace;letter-spacing:.1em;fill:var(--dim);text-transform:uppercase}
.exera{font:700 9px "JetBrains Mono",monospace;letter-spacing:.14em;fill:var(--fg);text-transform:uppercase}
/* tier is drawn in WEIGHT, not hue — the mono law reaches the data, not just the chrome */
.exte{font:600 10px "JetBrains Mono",monospace;fill:var(--dim)}
.exte.epoch{font-weight:800;fill:var(--fg);letter-spacing:.04em}
.exte.mile{font-weight:700;fill:var(--fg)}
.exte.event{font-weight:500;fill:var(--dim)}

/* THE DIAGRAM ENGINE (TT-ARC-137). The popup constraint is a LAW, and most of it is enforced here: the
   stage is BOUNDED — a fixed, viewport-relative height that cannot grow with the graph — so a 10-node
   diagram and a 60-node one occupy the same room in the reader. The engine fits to this box; it never
   asks the box to fit the graph. */
.exdiagram{width:100%;height:min(46vh,420px);display:block;color:var(--fg);cursor:grab;touch-action:pan-y}
.exdiagram.grabbing{cursor:grabbing}
.exdl{font:700 8.5px "JetBrains Mono",monospace;letter-spacing:.1em;fill:var(--dim)}
/* a FILED edge is the only one that reads as clickable — the reported ones must not look live */
.exde.filed{cursor:pointer}
.exde.filed:hover{opacity:1!important;stroke-width:4}
.exdctl{display:flex;gap:1px;margin-top:8px;justify-content:flex-end}
.exdctl button{font:700 9px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--dim);
  background:var(--cardface);border:1px solid var(--edge);padding:5px 10px;cursor:pointer;min-width:32px}
.exdctl button:hover{color:var(--fg);border-color:var(--fg)}

/* §5k.5 THE SOCIAL PAGE shows the full post and the receipt ledger (§5h.1) before the desk's note */
.social-plate{margin:0 0 22px;padding:16px 18px;background:var(--bg2);border:1px solid var(--edge);border-left:4px solid var(--fg)}
.social-plate blockquote{margin:0 0 14px;white-space:pre-line;line-height:1.5;font-size:16px}
.social-plate .ledger{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.social-plate .ledger a{color:inherit;text-transform:none;letter-spacing:0;word-break:break-all}
@media (max-width:640px){.social-plate .ledger{grid-template-columns:1fr}}

/* P2-4 · THE QUARANTINE PLATE — a specimen says what it is before its first word, on the page and in the
   popup alike (one template). Ink only: the mark is a border, never a colour. */
.quarantine-plate{margin:0 0 22px;padding:12px 16px;border:2px solid var(--fg);background:var(--bg2);
  font-size:13.5px;line-height:1.5;color:var(--fg)}
.quarantine-plate .qk{font:800 10px "JetBrains Mono",monospace;letter-spacing:.16em;margin-right:8px;
  border:1px solid var(--fg);padding:2px 6px;border-radius:2px;vertical-align:middle}
/* §5.7 THE ACCENT: the board's lead row is its lead series — here (not front.css) so the thumbnail engine's
   stage, which renders with this sheet, cuts the same picture the page shows */
.exboard .exrow:first-child .exrow-bar>span{background:var(--lead,var(--s1));opacity:1}

/* THE VARIETY PASS (Michael MS-0390 part 3, ARC MS-0393): four more shapes in the one grammar — a dumbbell,
   a dot plot with a reference, a donut, small multiples. Series ink from the toolbox range (s1 leads);
   axes, labels and the remainder stay ink; every value is printed beside its mark. */
.exdb{display:flex;flex-direction:column;gap:11px}
.exdb-row{display:grid;grid-template-columns:minmax(88px,26%) 1fr auto;align-items:center;gap:12px}
.exdb-l{font:700 10px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--fg);text-transform:uppercase}
.exdb-track{position:relative;height:14px}
.exdb-track::before{content:'';position:absolute;left:0;right:0;top:6px;height:2px;background:var(--edge)}
.exdb-range{position:absolute;top:3px;height:8px;background:var(--lead,var(--s1));opacity:.55;border-radius:4px}
.exdb-end{position:absolute;top:2px;width:10px;height:10px;border-radius:50%;background:var(--lead,var(--s1));transform:translateX(-50%)}
.exdb-pt{position:absolute;top:1px;width:12px;height:12px;border-radius:50%;background:var(--fg);border:2px solid var(--card);transform:translateX(-50%);box-sizing:border-box}
.exdb-v{font-family:Barlow,sans-serif;font-weight:600;font-size:14px;color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap}
/* a long unit on the record (an indexed series says how it was indexed) must never widen the frame: the label wraps past
   two words of number, and under 700px the row stacks — label · track, then the value beneath (law 3, no sideways scroll) */
.exdb-row{min-width:0}
.exdb-v{white-space:normal;max-width:min(42%,320px);text-align:right;line-height:1.25}
@media (max-width:700px){.exdb-row{grid-template-columns:minmax(72px,30%) 1fr}.exdb-v{grid-column:1/3;max-width:none;text-align:left;font-size:12.5px}}
.exdots{display:flex;flex-direction:column;gap:9px;position:relative}
.exdot-row{display:grid;grid-template-columns:minmax(88px,30%) 1fr auto;align-items:center;gap:12px}
.exdot-l{font:700 10px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--fg);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exdot-track{position:relative;height:14px}
.exdot-track::before{content:'';position:absolute;left:0;right:0;top:6px;height:1px;background:var(--edge)}
.exdot{position:absolute;top:2px;width:10px;height:10px;border-radius:50%;background:var(--lead,var(--s1));transform:translateX(-50%)}
.exdot-ref{position:absolute;top:-2px;bottom:-2px;width:0;border-left:2px dashed var(--fg);transform:translateX(-50%)}
.exdot-v{font-family:Barlow,sans-serif;font-weight:600;font-size:14px;color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap}
.exdot-refl{font:700 9px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--dim);text-transform:uppercase;margin-top:4px;padding-left:calc(30% + 12px)}
.exdonut{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
.exdonut svg{width:150px;height:150px;display:block}
.exdonut-arc{stroke:var(--lead,var(--s1))} .exdonut-rest{stroke:var(--edge)}
.exdonut-big{font-family:Barlow,sans-serif;font-weight:600;font-size:34px;line-height:1;color:var(--fg);letter-spacing:-.02em}
.exdonut-l{font:700 10px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--dim);text-transform:uppercase;margin-top:6px}
.exdonut-k{display:flex;flex-direction:column;gap:8px}
.exdonut-k span{display:inline-flex;align-items:center;gap:8px;font:700 10px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
.exdonut-k i{width:10px;height:10px;border-radius:2px;display:inline-block}
.exmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.exmp-p{border:1px solid var(--edge);padding:10px 12px;position:relative}
.exmp-l{font:700 9px "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--fg);text-transform:uppercase;margin-bottom:6px;padding-right:60px}
.exmp-u{font:700 8.5px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--faint);text-transform:uppercase}
.exmp-flag{position:absolute;top:8px;right:8px;font:800 8px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--fg);border:1px solid var(--fg);padding:1px 4px;text-transform:uppercase}
.exmp-p.flagged .exmp-bars{opacity:.4}
.exmp-bars{display:flex;align-items:flex-end;gap:4px;height:64px;margin-top:20px}   /* room for the value labels above the bars */
.exmp-bar{flex:1;background:var(--lead,var(--s1));border-radius:2px 2px 0 0;position:relative;min-height:2px}
.exmp-bar span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font:600 9px "JetBrains Mono",monospace;color:var(--dim);white-space:nowrap;padding-bottom:2px}
.exmp-x{display:flex;gap:4px;margin-top:4px}
.exmp-x span{flex:1;text-align:center;font:600 8px "JetBrains Mono",monospace;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the line's EVENT pins and the log-scale stamp */
.exev{font:700 8.5px "JetBrains Mono",monospace;letter-spacing:.1em;fill:var(--fg);text-transform:uppercase}
.exevl{stroke:var(--fg);stroke-width:1;stroke-dasharray:3 3;opacity:.7}

/* THE FILM PLATE (Fast Lane, MS-2479): the film above the body at the article's full width, its route beneath; outside the reading path */
.filmplate{margin:6px 0 28px}
.filmplate .vid video{width:100%;aspect-ratio:16/9;display:block;background:#000;border:1px solid var(--edge);border-radius:var(--radius)}
.filmplate .vid figcaption{font:11px/1.6 "JetBrains Mono",monospace;color:var(--faint);padding-top:6px;letter-spacing:.04em;text-transform:uppercase}
.fl-route{display:flex;flex-wrap:wrap;gap:10px 28px;margin:12px 0 0;font:600 14px/1.3 "Barlow Condensed",Barlow,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.fl-route-foot{margin:22px 0 8px}
.fl-walk{color:var(--cyan,#4FC3F7);text-decoration:none;border-bottom:1px solid var(--edge);padding-bottom:2px}
.fl-walk:hover{border-bottom-color:currentColor}