/* ============ Fabric.Media — SIGNAL v2 ============ */
:root{--display:'Archivo',system-ui,sans-serif;--ui:'Archivo',system-ui,sans-serif;--body:'Newsreader',Georgia,serif;--mono:'IBM Plex Mono',ui-monospace,monospace;--wrap:1280px;--pad:32px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#7E7A74;font-family:var(--ui);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---- theme ---- */
html{background:#7E7A74}
.sg{--paper:#FAF8F4;--el:#FFFFFF;--el2:#F2EFE9;--ink:#131211;--ink2:#4A453E;--ink3:#7E7871;--ln:#E4DFD6;--ln2:#CFC8BC;--acc:#2340D6;--acc2:#5B72E8;--acc-t:#EDEFFD;--b1:#2340D6;--b2:#B4400F;--b3:#146152;--b4:#5A3FBF;--b5:#0E7490;--b6:#B4266E;--warn:#B4400F;--ok:#12805C;background:var(--paper);color:var(--ink);min-height:100vh}
.sg[data-mode=dark]{--paper:#0D0D0F;--el:#141418;--el2:#1C1C22;--ink:#EDE9E3;--ink2:#A9A39B;--ink3:#726C65;--ln:rgba(255,255,255,.11);--ln2:rgba(255,255,255,.2);--acc:#7D93FF;--acc2:#A9BAFF;--acc-t:rgba(125,147,255,.14);--b1:#7D93FF;--b2:#FF9166;--b3:#4FC3A1;--b4:#A98BFF;--b5:#53C6DE;--b6:#F06BAB;--warn:#FF9166;--ok:#4FC3A1}
.sg a:hover{color:var(--acc)}
.in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* ============ PLATES — generated key art, no photography ============ */
.plate{position:relative;overflow:hidden;background:var(--el2);isolation:isolate;container-type:inline-size}
/* Breaking intrusion: house red enters a plate ONLY while the desk's live
   'breaking' tag is on the post — rendered from the tag itself, so clearing
   Breaking in the desk removes the treatment on the next render. Red is
   reserved for this; no other plate element may use it. */
/* Monument cut: ledger number at plate scale, atmosphere beneath it, and
   provenance demoted to edge code. Injected by signal.js from signal-meta,
   so a post without a stamped number simply has no monument. */
.plate .fog{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent 52%,rgba(8,8,12,.34) 100%),radial-gradient(120% 88% at 50% 122%,rgba(8,8,12,.4),transparent 60%)}
/* Monument: 35% white (65% transparent, owner call), NORMAL blend. Screen blends compound — every overlap
   (numeral x bloom, numeral x BREAKING) multiplied brightness and glowed.
   Plain alpha lightens on overlap too, but bounded, and colors underneath
   keep their hue. Tracking -.085em, size set by signal.js fit-to-rails with
   a height clamp so there is always real air, never a sliver. */
/* Everything on the plate scales WITH the plate (owner call 2026-08-16:
   the card-size render, where fixed px sizes read proportionally huge, is
   the layout — so the proportions are now the law at every size).
   Reference: 20px label / 13px title / 9px edge on a 690px plate.
   cqw ONLY: this label was at top:4.5cqh, and cqh does not exist in a
   container-type:inline-size container, so it silently resolved against the
   VIEWPORT height -- the label slid up and down with the browser window and
   at most window sizes landed on top of the badge that used to sit here. */
.plate .brk-x{position:absolute;inset:0;z-index:5;pointer-events:none;box-shadow:inset 0 0 0 3px #E8412B}
.plate .brk-x::before{content:"";position:absolute;inset:0;mix-blend-mode:screen;background:radial-gradient(60% 90% at 76% 20%,rgba(232,65,43,.55),transparent 62%)}
.plate .brk-x::after{content:"BREAKING";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:900 13cqw/1 Archivo,Helvetica,Arial,sans-serif;letter-spacing:.08em;color:#E8412B;text-shadow:0 0 30px rgba(232,65,43,.55),0 0 8px rgba(0,0,0,.35);white-space:nowrap}
/* Burn-in scales with its plate everywhere (owner: "that's it. Do it
   everywhere", 2026-08-16). Cards, idents and strips inherit the same
   proportional voice; the post hero overrides position and shows the title. */
.plate .mk{position:absolute;left:2cqw;bottom:8%;z-index:5;font-family:var(--mono);font-size:max(7px,1.9cqw);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.5);line-height:1.75;max-width:70%}
/* Hero burn-in: the human title, matched to the monument's transparency.
   The seed lives in data-seed, so this is display only. */
.art-plate .mk,.plate.dressed .mk{color:rgba(255,255,255,.4);max-width:46%;white-space:normal;line-height:1.75;
  font-size:max(8px,1.9cqw);letter-spacing:.24em;left:2cqw;bottom:auto;top:56%}
/* ---- title-card dress (owner-approved 2026-08-26) ----
   Every plate on every surface: ghost channel word, headline, credit, mark.
   All sizes are cqw so one rule serves a 296px card and an 840px hero; the
   ghost word's size is set by signal.js, which MEASURES the word rather than
   guessing (MEASUREMENT at a fixed size cropped both edges). The quote, the
   verification eyebrow and the ledger number are gone from the artwork -- the
   quote and its claim live in the page body now, where they can be checked. */
.plate.dressed .ghostw{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);
  z-index:1;font-family:var(--display);font-weight:900;line-height:.8;letter-spacing:-.06em;
  text-transform:uppercase;color:rgba(255,255,255,.10);white-space:nowrap;pointer-events:none}
.plate.dressed .cardhd{position:absolute;left:2.6cqw;right:6cqw;bottom:12.5cqw;z-index:6;margin:0;
  font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.035em;color:#fff;
  text-shadow:0 2px 34px rgba(6,6,10,.5);text-wrap:balance}
.plate.dressed .attr{position:absolute;left:2.6cqw;right:21cqw;bottom:4cqw;z-index:6;
  font-family:var(--mono);font-size:max(9px,1.834cqw);font-weight:600;letter-spacing:.14em;
  color:rgba(255,255,255,.72)}
.plate.dressed .attr b{font-weight:600;color:rgba(255,255,255,.95)}
.plate.dressed .attr .src{color:rgba(255,255,255,.72)}
.plate.dressed .attr .dt{color:rgba(255,255,255,.62)}
.plate.dressed .attr .sep{color:rgba(255,255,255,.45)}
/* Thin strips (t2, 16/5.4) carry the headline and mark only -- a credit there
   would be 6px and the card prints the byline in type right beneath it. */
/* The mark signs every plate. */
.art-head h1,.t1>h2,.t2>h3{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* signal.js adds .shown when the plate declines the headline (too small a
   card): the headline can never end up in neither place. */
.t1>h2.shown,.t2>h3.shown,.art-head h1.shown{position:static;width:auto;height:auto;overflow:visible;
  clip:auto;clip-path:none;white-space:normal}
.t1>h2.shown{margin:14px 0}
.t2>h3.shown{margin:11px 0 9px}
.art-head h1.shown{margin:16px 0 18px}
/* The lead card's hover cue moved with the headline. */
.t1:hover .plate.dressed .cardhd{color:#fff;text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:5px;text-decoration-color:var(--acc)}
/* THE DATE, as a corner stamp (owner pick B, 2026-08-27). Top-left, the one
   corner every motif leaves empty, diagonally opposite the mark. It is on the
   plate because the plate is now the post's main image AND its share image,
   and a share with no time context is a claim with no date on it. Our PUBLISH
   date, deliberately: the provenance rail still carries SIGNAL PUBLISHED and
   SOURCE PUBLISHED separately, and neither of those is what a share claims.
   Same max(px, cqw) pattern as .attr — the floor keeps it legible on a 343px
   card, the cqw keeps it proportional on a 1200px plate. */
.plate.dressed .stamp{position:absolute;left:2.6cqw;top:3.4cqw;z-index:6;font-family:var(--mono);font-size:max(8px,1.834cqw);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72)}
/* THE MARK IS THE WORDMARK (2026-09-13). It was an initial, "F.", which made
   the site a brand plus a monogram; one lockup signs every surface now. A
   wordmark is wider than an initial, so it sits smaller and .attr below gives
   back the room it used to have. The light word and the accent period follow
   the same grammar as .wm -- i is the light half, s is the accent character. */
.plate.dressed .fmark{position:absolute;right:2.2cqw;bottom:1.9cqw;z-index:7;
  font-family:var(--display);font-size:max(11px,2.35cqw);font-weight:800;letter-spacing:-.035em;
  color:rgba(255,255,255,.85);pointer-events:none}
.plate.dressed .fmark i{font-style:normal;font-weight:400;color:rgba(255,255,255,.62)}
.plate.dressed .fmark s{text-decoration:none;color:#A9BAFF}
.plate .cap{position:absolute;right:12px;bottom:10px;z-index:5;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.plate::before,.plate::after{content:"";position:absolute;inset:0}

/* ============ FABRICATED — pipeline-validation posts, pre-cadence ============
   Not an error state: a deliberate, confident marker that this post was
   published while the pipeline was being built and proven, not by the
   running system. Applied via an internal Ghost tag so it can be lifted in
   one place (scripts/tag-pretest-posts.mjs) once real cadence content
   dominates the archive. */
.fab-ribbon{position:absolute;top:0;right:0;z-index:7;width:132px;height:132px;overflow:hidden;pointer-events:none}
.fab-ribbon span{position:absolute;top:24px;right:-36px;width:180px;transform:rotate(45deg);background:var(--warn);color:#fff;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;text-align:center;padding:5px 0;box-shadow:0 2px 6px rgba(0,0,0,.28)}
.fab-strip{display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;padding:11px var(--pad);margin:0 calc(var(--pad) * -1) 22px}
.fab-strip b{color:var(--warn);font-weight:700;letter-spacing:.14em;text-transform:uppercase;flex:none}
.fab-strip i{width:6px;height:6px;border-radius:50%;background:var(--warn);flex:none;animation:sgPulse 2.4s infinite}
/* Recovered is a note, not an alarm: same strip, no pulse, the network blue
   rather than the warning colour. A reader should read it, not worry. */
.fab-strip--rec b{color:var(--acc2)}
.fab-strip--rec i{background:var(--acc2);animation:none}

/* ramp — the house gradient, grid ruled */
.plate[data-p=ramp]{background:linear-gradient(calc(146deg + var(--ga,0deg)),#0A0A0C 0%,#16246E 30%,#2340D6 64%,#7D93FF 100%)}
.plate[data-p=ramp]::before{background:radial-gradient(70% 110% at var(--gx,82%) var(--gy,24%),rgba(169,186,255,.5),transparent 62%)}
.plate[data-p=ramp]::after{background:repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 1px,transparent 1px calc(46px*var(--gs,1))),repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px calc(46px*var(--gs,1)));opacity:var(--gi,1)}

/* ============ nexus — THE SIGNAL's own motif (2026-09-14) ============
   Owner: "update The Signal background banner design to more of a
   medianexis vibe. A real extension of the network programming graphics
   package -- uniquely so. Lead by example."

   The Signal is the parent of the ident system, and until now it wore the
   generic ramp -- the same plate as any ad-tech signal. This is the first
   PROGRAMME motif: built from the package's own primitives so it is
   unmistakably one of the family, and composed so no channel plate could be
   mistaken for it.

   THE IDEA IS THE NAME. A nexus is the point the lines meet; a signal is what
   radiates from it. So: one NODE, set right of the title where the text
   column ends (--nx/--ny, fixed on the ident, not rolled by the generator --
   the flagship's composition is designed, not seeded); concentric RINGS
   radiating from it (the arc motif's repeating-radial-gradient, at ring
   spacing rather than arc spacing, fading with distance); a horizontal
   SIGNAL LINE through the node -- the one straight line in the package,
   because a broadcast has a carrier; and the field motif's DOT LATTICE as
   the ground it all sits in, masked so it thins toward the text.

   THE GROUND IS THE NETWORK RAMP WITH medianexis's OWN NAVY IN IT. The ramp
   runs #0A0A0C -> #16246E -> #2340D6 -> #7D93FF; this one runs through
   #01478F -- the mark's blue, sampled off Jason's sheet -- before it reaches
   the accent, so the flagship carries the publication's colour and every
   channel plate carries the network's. That is the whole "extension,
   uniquely so": same grammar, one new word in it.

   --gs and --gi still come from the seed, so ring spacing and lattice
   intensity breathe the way every other plate does; --ga is ignored on
   purpose (a carrier line does not tilt). */
.plate[data-p=nexus]{--nx:78%;--ny:52%;
  background:linear-gradient(146deg,#07070A 0%,#0B1E4A 26%,#01478F 52%,#2340D6 76%,#7D93FF 100%)}
/* rings + the node. The rings fade with distance from the node (the mask);
   the node is a hot core with the accent halo -- the wordmark's own period,
   made into a light source. */
.plate[data-p=nexus]::before{
  background:
    radial-gradient(circle at var(--nx) var(--ny),#fff 0 5px,rgba(169,186,255,.95) 6px,rgba(169,186,255,.45) 12px,rgba(125,147,255,.18) 22px,transparent 34px),
    repeating-radial-gradient(circle at var(--nx) var(--ny),transparent 0 calc(34px*var(--gs,1)),rgba(255,255,255,.62) calc(34px*var(--gs,1)) calc(35.5px*var(--gs,1)),transparent calc(35.5px*var(--gs,1)) calc(70px*var(--gs,1)));
  -webkit-mask-image:radial-gradient(circle at var(--nx) var(--ny),#000 0,rgba(0,0,0,.7) 24%,rgba(0,0,0,.25) 48%,transparent 72%);
  mask-image:radial-gradient(circle at var(--nx) var(--ny),#000 0,rgba(0,0,0,.7) 24%,rgba(0,0,0,.25) 48%,transparent 72%);
  opacity:var(--gi,1)}
/* the carrier line + the lattice. The line is the only straight edge in the
   package; the lattice thins toward the text so the title sits on ground
   rather than on pattern. */
.plate[data-p=nexus]::after{
  background:
    linear-gradient(180deg,transparent 0 calc(var(--ny) - 1px),rgba(255,255,255,.7) calc(var(--ny) - 1px) calc(var(--ny) + 1px),transparent calc(var(--ny) + 1px)),
    linear-gradient(180deg,transparent 0 calc(var(--ny) - 9px),rgba(169,186,255,.16) calc(var(--ny) - 9px) calc(var(--ny) + 9px),transparent calc(var(--ny) + 9px)),
    radial-gradient(circle at center,rgba(255,255,255,.5) 1px,transparent 1.2px) 0 0/calc(14px*var(--gs,1)) calc(14px*var(--gs,1));
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.12) 0,rgba(0,0,0,.45) 45%,#000 70%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.12) 0,rgba(0,0,0,.45) 45%,#000 70%);
  opacity:calc(.8*var(--gi,1))}

/* field — dot matrix over a two-blob ground */
.plate[data-p=field]{background:linear-gradient(calc(160deg + var(--ga,0deg)),#101018,#1A1A24)}
.plate[data-p=field]::before{background:radial-gradient(52% 76% at var(--gx,24%) var(--gy,32%),rgba(35,64,214,.9),transparent 64%),radial-gradient(46% 68% at var(--gx2,80%) var(--gy2,76%),rgba(180,64,15,.6),transparent 62%)}
.plate[data-p=field]::after{background:radial-gradient(circle at center,rgba(255,255,255,.42) 1px,transparent 1.1px) 0 0/calc(11px*var(--gs,1)) calc(11px*var(--gs,1));opacity:calc(.7*var(--gi,1))}

/* rule — diagonal hatch, single accent */
.plate[data-p=rule]{background:linear-gradient(calc(120deg + var(--ga,0deg)),#0B0B0D 0%,#141B4A 58%,#2340D6 100%)}
.plate[data-p=rule]::before{background:repeating-linear-gradient(calc(58deg + var(--ga,0deg)),rgba(255,255,255,.4) 0 2px,transparent 2px calc(12px*var(--gs,1)));opacity:calc(.34*var(--gi,1))}
.plate[data-p=rule]::after{background:linear-gradient(200deg,transparent 40%,rgba(8,8,10,.68) 100%)}

/* arc — concentric rings, measurement */
.plate[data-p=arc]{background:linear-gradient(calc(150deg + var(--ga,0deg)),#0A0F14 0%,#0F3F44 52%,#20A08A 100%)}
.plate[data-p=arc]::before{background:repeating-radial-gradient(circle at var(--gx,18%) var(--gy,84%),transparent 0 calc(22px*var(--gs,1)),rgba(255,255,255,.32) calc(22px*var(--gs,1)) calc(22px*var(--gs,1) + 1px))}
.plate[data-p=arc]::after{background:repeating-radial-gradient(circle at var(--gx,18%) var(--gy,84%),transparent 0 calc(22px*var(--gs,1)),rgba(255,255,255,.32) calc(22px*var(--gs,1)) calc(22px*var(--gs,1) + 1px)),linear-gradient(160deg,rgba(8,8,10,.5),transparent 56%);opacity:var(--gi,1)}/* rings duplicated onto ::after because the feature photo (.plate-photo, z-index:1)   paints ABOVE ::before — Measurement plates with photos showed no pattern at all */

/* split — hard geometric cut, two grounds */
.plate[data-p=split]{background:#0A0A0C}
.plate[data-p=split]::before{background:linear-gradient(calc(146deg + var(--ga,0deg)),#16246E,#2340D6 62%,#7D93FF);clip-path:polygon(var(--gx,34%) 0,100% 0,100% 100%,var(--gy,12%) 100%)}
.plate[data-p=split]::after{background:repeating-linear-gradient(0deg,rgba(255,255,255,.09) 0 1px,transparent 1px calc(14px*var(--gs,1)));opacity:var(--gi,1)}

/* ember — the agencies beat */
.plate[data-p=ember]{background:linear-gradient(calc(146deg + var(--ga,0deg)),#0C0806 0%,#5C1B08 44%,#E4622E 100%)}
.plate[data-p=ember]::before{background:radial-gradient(60% 90% at var(--gx,78%) var(--gy,30%),rgba(255,168,120,.5),transparent 62%)}
.plate[data-p=ember]::after{background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px calc(46px*var(--gs,1)));opacity:var(--gi,1)}

/* violet — streaming */

/* ---- data plate: the art IS the story's data ---- */
.plate[data-p=data]{background:linear-gradient(160deg,#0A0A0C,#12142C)}
.plate[data-p=data]::before{background:repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0 1px,transparent 1px 26px)}
.plate[data-p=data]::after{display:none}
.dplot{position:absolute;inset:auto 7% 22% 7%;height:56%;display:flex;align-items:flex-end;gap:2.4%;z-index:2}
.dplot i{flex:1;background:linear-gradient(180deg,var(--acc2),rgba(125,147,255,.16));display:block;min-height:3px}
.dplot i.hi{background:linear-gradient(180deg,#fff,var(--acc2))}
.dhead{position:absolute;left:7%;top:16%;z-index:3;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.dhead b{display:block;font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.03em;color:#fff;margin-top:7px;text-transform:none}
.plate[data-p=data] .mk,.plate[data-p=data] .cap{color:rgba(255,255,255,.45)}

/* ============ STRIP + MASTHEAD ============ */
.sg-strip{background:var(--el);border-bottom:1px solid var(--ln);font-family:var(--mono)}
.sg-strip .in{display:flex;align-items:center;gap:16px;height:38px;overflow:hidden}
.sg-strip .k{display:inline-flex;align-items:center;gap:7px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--warn);flex:none}
.sg-strip .k i{width:5px;height:5px;border-radius:50%;background:var(--warn);animation:sgPulse 2.4s infinite}
@keyframes sgPulse{0%,100%{opacity:1}50%{opacity:.25}}
.sg-rot{position:relative;flex:1;min-width:0;height:38px}
.sg-rot a{position:absolute;inset:0;display:flex;align-items:center;gap:14px;opacity:0;transition:opacity .4s;pointer-events:none}
.sg-rot a.on{opacity:1;pointer-events:auto}
.sg-rot time{font-size:10.5px;color:var(--ink3);flex:none}
.sg-rot .bt{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);flex:none}
.sg-rot .t{font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:-.015em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-dots{display:flex;gap:5px;flex:none}
.sg-dots i{width:5px;height:5px;border-radius:50%;background:var(--ln2)}
.sg-dots i.on{background:var(--warn)}

.sg-head{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--ink)}
.sg-head .in{display:flex;align-items:center;gap:26px;height:66px}
/* ONE BASELINE ACROSS THE MASTHEAD (owner, 2026-09-14: "the wordmark and
   the top nav need to sit on the same baseline visually"). Every box in
   the row was already centred (all midpoints at 33px of 66) and it still
   read as two rows, because centring boxes is not aligning type: measured
   live, the 23px lowercase wordmark's baseline sat at 40.5px and the
   12.5px nav's at 36.25px -- 4px apart. They meet in the middle: the
   wordmark rises 2px, the nav's padding shifts its text down 2px without
   changing its box, and the buttons stay centred where they were. */
.sg-head .wm{position:relative;top:-2px}
.wm{flex:none;font-family:var(--display);font-size:23px;font-weight:800;letter-spacing:-.042em;color:var(--ink);white-space:nowrap}
.wm s{text-decoration:none;color:var(--acc)}
.wm i{font-style:normal;font-weight:400;color:var(--ink2)}
.sg-nav{display:flex;gap:22px;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.sg-nav::-webkit-scrollbar{display:none}
.sg-nav a{flex:none;white-space:nowrap;font-size:12.5px;font-weight:600;letter-spacing:-.005em;color:var(--ink2);padding:7px 0 3px;border-bottom:2px solid transparent}
.sg-nav a:hover,.sg-nav a.on{color:var(--ink);border-bottom-color:var(--acc)}
.sg-acts{flex:none;margin-left:auto;display:flex;align-items:center;gap:12px}
/* .msw (the Light/Dark pill) retired 2026-09-14 -- "it's all light now
   everywhere". The [data-mode=dark] tokens above stay: they cost nothing
   and are the revert. */
.sg-k{font-family:var(--mono);font-size:10.5px;color:var(--ink3);border:1px solid var(--ln);padding:6px 8px;display:inline-flex;align-items:center;line-height:0}
.sg-k:hover{color:var(--acc);border-color:var(--acc)}
.sg-btn{display:inline-flex;align-items:center;height:34px;padding:0 17px;background:var(--acc);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:-.005em;border-radius:999px}
.sg-btn:hover{background:var(--ink);color:var(--paper)}
.sg-burger{display:none;flex-direction:column;justify-content:center;gap:4px;width:34px;height:34px;padding:0 7px;border:1px solid var(--ln2);background:transparent;cursor:pointer;border-radius:2px}
.sg-burger span{display:block;height:1.5px;background:var(--ink)}
.sg-burger:hover{border-color:var(--ink)}

.sg-sub{border-bottom:1px solid var(--ln)}
.sg-sub .in{display:flex;align-items:center;gap:26px;height:44px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.sg-sub .tag{letter-spacing:.24em}
.sg-sub .st{margin-left:auto;display:flex;gap:24px}
.sg-sub .st b{font-family:var(--display);font-size:12.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-right:6px}

/* ============ TIERS ============ */
.tier{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:4px 8px;border:1px solid currentColor;border-radius:2px}
.tier.ex{color:var(--warn)}
.tier.an{color:var(--acc)}
.tier.br{color:var(--ink3)}
.tier.si{color:var(--ok)}
/* channel badges — one hue per section, matching the plate palette */
.tier.ch{color:var(--ink2)}
.tier.ch-measurement{color:var(--b3)}
.tier.ch-streaming{color:var(--b4)}
.tier.ch-ad-tech{color:var(--b1)}
.tier.ch-agencies{color:var(--b2)}
.tier.ch-retail-media{color:var(--b5)}
.tier.ch-creators{color:var(--b6)}
.kick{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.kick .id{color:var(--ink3)}
.byl{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink3);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.byl b{font-weight:500;color:var(--ink2)}
.byl .src{color:var(--acc)}

/* T1 exclusive */
.ch-lead{margin:0 0 30px;padding-bottom:28px;border-bottom:2px solid var(--ink)}
.t1{display:block}
.t1 .plate{aspect-ratio:16/8;margin:16px 0 18px}
.t1 h2{font-family:var(--display);font-size:44px;font-weight:800;letter-spacing:-.042em;line-height:1.01;margin:14px 0 14px;color:var(--ink);text-wrap:balance}
.t1 p{font-family:var(--body);font-size:18px;line-height:1.46;color:var(--ink2);margin:0 0 16px;max-width:58ch}
.t1:hover h2{color:var(--acc)}

/* T2 analysis — no plate, ruled */
/* "Why it matters" — the desk's consequence line. Optional everywhere: most
   signals do not carry one, and the absence is meaningful, so nothing here
   reserves space. Cards hydrate it from signal-meta via signal.js. */
.wim{display:block;margin:10px 0 0;padding:9px 0 0;border-top:1px solid var(--ln)}
.wim[hidden]{display:none}
.wim .lb{display:block;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin-bottom:5px}
.wim p{margin:0;font-family:var(--body);font-size:14px;line-height:1.45;color:var(--ink)}
.t1 .wim p{font-size:16px}
/* Lead-card provenance. Fills the column the lead story used to leave empty,
   with the desk's own receipts rather than furniture. Mono throughout: this
   is apparatus, and must never compete with the headline above it. */
/* THE CREDIT ROW — the other half of comps option 4, "the plate is ours"
   (owner, 2026-08-27; label approved "Drafted from", 2026-08-28).
   The credit came off the artwork on 2026-08-27 and this is where it went. It
   shipped without this row for a day: the lead card fell back to the older
   .leadprov definition list and the Latest grid showed no credit at all, which
   is what the owner caught.

   Reporter LEADS and links to their archive, outlet follows — authorship
   elevated (owner, 2026-08-27). With no byline the publication is the credit
   and stands alone. The label is "Drafted from", NOT "Reported by": A53
   retired first-filed claims because day-precision dates cannot establish who
   reported first, and this row must not quietly reintroduce one.

   Lives here rather than in signal-feed/feed.css because v2's feed card uses
   the same component — putting it in the overlay is how the two would drift.

   Sizes snapped to the type scale on the way in: the prototype these rules
   came from is not linted, and it carried 15px / 10px / 9.5px, none of which
   is a step. The linter caught all three. */
.cred{margin:16px 0 0;padding-top:13px;border-top:1px solid var(--ln)}
.cred[hidden]{display:none}
.cred .lb{display:block;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:7px}
/* center, not baseline (2026-09-13): the row carries the outlet's source
   mark on editorial surfaces now, and a 17px chip on a text baseline sits
   low. Set here rather than in feed.css -- a bare .cred rule appended after
   signal.css is exactly what the scoping guard forbids. */
.cred .ln{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cred .who{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-.018em;color:var(--ink);
  border-bottom:1.5px solid var(--ch,var(--acc));padding-bottom:1px}
.cred a.who:hover{color:var(--acc);border-bottom-color:var(--acc)}
.cred .at{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--ink2)}
.cred .more{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
/* Story page: the same line, given a block of its own under the dek. */
[data-wim-slot]:empty{display:none}
[data-wim-slot] .art-wim{margin:16px 0 4px}
p.art-wim,.art-wim{margin:18px 0 22px;padding:14px 18px;border-left:3px solid var(--acc);background:var(--el2);font-family:var(--body);font-size:18px;line-height:1.5;color:var(--ink)}
.art-wim .lb{display:block;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin-bottom:7px}
.art-wim p{margin:0;font-family:var(--body);font-size:18px;line-height:1.5;color:var(--ink)}
.art-wim .lb{display:block}
.t2{display:block;padding-top:15px;border-top:2px solid var(--ink)}
/* Card thumb: the story's own plate at band scale. Same seed as the hero,
   so a story looks like itself everywhere. Kept quiet — no monument, no
   edge code; those are hero apparatus (owner call 2026-08-16). */
/* Bottom margin exists because the h3 that used to carry the gap is now
   visually hidden (the plate is the headline): without it the excerpt sat
   flush against the artwork. 14px ~ the t1 plate's 18px scaled to t2 width. */
.t2 .plate{aspect-ratio:16/8;margin:12px 0 14px}
.t2 h3{font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.03em;line-height:1.13;margin:11px 0 9px;color:var(--ink);text-wrap:pretty}
.t2 p{font-family:var(--body);font-size:16px;line-height:1.46;color:var(--ink2);margin:0 0 11px}
.t2 .cred{margin-top:11px;padding-top:11px}
.t2 .cred .who{font-size:14px}
.t2:hover h3{color:var(--acc)}

/* T3 brief — text only, dense */
.t3{display:grid;grid-template-columns:46px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--ln);align-items:start}
.t3 time{font-family:var(--mono);font-size:10.5px;color:var(--acc);padding-top:3px}
.t3 h4{font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:-.018em;line-height:1.26;margin:0;color:var(--ink)}
.t3 .bt{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-top:5px;display:block}
.t3:hover h4{color:var(--acc)}

/* ============ HOME ============ */
.sg-home{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:36px;padding:26px 0 40px}
.sg-lead{min-width:0;display:flex;flex-direction:column}
/* A TRUE HERO (2026-09-14). The lede owns the column; the next two in the
   river sit beneath it as a pair. .lead-split/.also below are kept only
   because the desk's Preview (prototype/Preview.jsx) still draws that
   shape from this stylesheet. */
.lead-hero{padding-bottom:4px}
/* The hero's plate top meets the rail's top (owner, 2026-09-14: "align the
   tops of the hero dressplate and The Signal subscribe promo"). .t1 .plate
   carries a 16px top margin for the kick that sits above it on a channel
   lead; an ordinary story renders no kick, so on the home that margin was
   16px of nothing, and the plate sat 16px below the newsletter card. */
.lead-hero .t1 .plate{margin-top:0}
/* "It's the hero of the hero": the eyebrow steps up one size on the lede
   card only. Four selectors, because feed.css's :is(.app,...) .wim .lb sets
   9px at three and loads later. */
.lead-hero .t1 .wim .lb{font-size:10.5px}
.lead-pair{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:10px 0 28px;border-bottom:1px solid var(--ink)}
.lead-split{display:grid;grid-template-columns:minmax(0,1.55fr) 1fr;gap:32px;padding-bottom:26px;border-bottom:1px solid var(--ink)}
.also{display:flex;flex-direction:column;gap:22px;border-left:1px solid var(--ln);padding-left:32px}
.also h5{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);margin:0 0 2px}

.secH{display:flex;align-items:baseline;gap:14px;padding:26px 0 10px;border-bottom:2px solid var(--ink);margin-bottom:18px}
.secH h2{font-family:var(--display);font-size:18px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;margin:0}
.secH .sub{font-family:var(--body);font-style:italic;font-size:16px;color:var(--ink3)}
.secH .more{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.wirelist{display:flex;flex-direction:column}
/* /stories/ -- the arc rows reuse the Wire's .t3 grammar with a signal
   count where the time would be (page-stories.hbs, 2026-09-14). Since 3.7.0
   the rows arrive as the page's own content (build-arcs.mjs), so .arcs-body
   styles the intro paragraph itself instead of borrowing .gh-content. */
.arcs .t3{grid-template-columns:64px 1fr}
.arcs .t3 .n{display:flex;flex-direction:column;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);padding-top:2px}
.arcs .t3 .n b{font-family:var(--display);font-size:21px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--acc);margin-bottom:3px}
.arcs .t3 h4{font-size:16px}
.arcs-body>p{font-family:var(--body);font-size:21px;line-height:1.62;color:var(--ink);max-width:64ch;margin:0 0 8px}
.arcs-body .secH{padding-top:18px}
/* the coverage roll-up: two numbered lists side by side, the rail's
   .railnum grammar at column width (page-stories.hbs) */
.covgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin-top:8px}
.covlist{margin:0 0 26px}
.covlist li a{align-items:baseline}
.covlist .n{color:var(--acc);min-width:28px}
.covlist h4{font-size:14px}
.covlist .who{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-top:3px}
@media(max-width:860px){.covgrid{grid-template-columns:1fr}}
.arcs-grid{padding-top:0}

/* rail */
.rail{display:flex;flex-direction:column;min-width:0}
.railH{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);padding-bottom:9px;border-bottom:1px solid var(--ink);margin-bottom:12px}
.railH i{width:5px;height:5px;border-radius:50%;background:var(--warn)}
.railH .ct{margin-left:auto;color:var(--acc)}
/* The house label above a promo: full ink, not faint — Eleanor's "disappears"
   was this label at var(--ink3) against the saturated card below it. */
.railH--house{color:var(--ink);border-bottom-color:var(--ink)}
.boltcard{position:relative;overflow:hidden;isolation:isolate;padding:22px 20px;margin-bottom:26px;background:linear-gradient(146deg,#0A0A0C 0%,#16246E 34%,#2340D6 72%,#7D93FF 100%)}
.boltcard::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 40px)}
.boltcard .sr{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.6);display:block;margin-bottom:11px}
.boltcard .nm{font-family:var(--display);font-size:38px;font-weight:900;letter-spacing:-.045em;line-height:.9;color:#fff;margin:0 0 11px}
.boltcard p{font-family:var(--body);font-size:14px;line-height:1.44;color:rgba(247,245,240,.82);margin:0 0 15px}
.boltcard input{width:100%;height:36px;padding:0 11px;border:0;background:rgba(255,255,255,.14);color:#fff;font-family:var(--ui);font-size:12.5px;margin-bottom:7px}
.boltcard input::placeholder{color:rgba(255,255,255,.5)}
.boltcard button{width:100%;height:36px;border:0;background:#fff;color:#16246E;font-family:var(--ui);font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.boltcard .fine{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.52);margin:9px 0 0}
.railnum{list-style:none;margin:0 0 26px;padding:0}
.railnum li{border-bottom:1px solid var(--ln)}
.railnum a{display:grid;grid-template-columns:22px 1fr;gap:11px;padding:10px 0;align-items:start}
.railnum .n{font-family:var(--mono);font-size:10.5px;color:var(--acc)}
.railnum h4{margin:0;font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:-.018em;line-height:1.26}
/* ============ SISTER PUBLICATIONS — "editorial embassy" ============
   Owner-approved 2026-08-25. Each unit wears its OWN publication's design
   system rather than Fabric's, so the rail reads as two guest columns and
   not as two Fabric boxes. Tokens are taken from source, not guessed:
   The Measure from themeasure.net/assets/css/the-measure.css (vermilion
   #E8412B, ink #14110F, hairline #E7E2DA, Archivo headlines); TVREV from
   the Ghost handoff kit's tokens/colors.css (signal blue #2456ff, warm
   neutrals, Newsreader body) -- and #2456ff is also the accent-color the
   gated tvrev2beta2 beta serves, which corroborates the kit.

   Newsreader and Archivo are already loaded by this theme, and Newsreader
   is genuinely TVREV's --font-body, so the borrowed voices cost no extra
   font requests. Local tokens are literals on purpose: they are another
   publication's palette, not ours, and must not drift with our own. */
.promo{padding:14px;margin-bottom:12px;display:block}
.promo .plogo{display:flex;align-items:center;margin-bottom:9px}
.promo .plogo img,.promo .plogo .tvrev-lg{width:auto;display:block}
.promo .plogo .drk{display:none}
.sg[data-mode=dark] .promo .plogo .lgt{display:none}
.sg[data-mode=dark] .promo .plogo .drk{display:block}
/* Shared shell so the two stay siblings: mono kicker with a leading tick,
   a dek, the live feed, a "read" link. Only voice and colour differ. */
.promo .rl{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;display:flex;align-items:center;gap:6px;margin:0}
.promo p{font-size:12.5px;line-height:1.42;margin:7px 0 0}
.promo .pfeed{margin:11px 0 0;padding:11px 0 0;gap:8px}
.promo .pfeed a{font-size:12.5px}
.promo .pfeed .d{font-size:9px}
.promo .go{display:block;margin-top:11px;padding-top:10px;font-family:var(--mono);
  font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}

/* ---- TVREV: warm paper, signal blue, serif voice ---- */
.promo--tv{background:#faf8f4;border:1px solid #e0dacb;box-shadow:inset 0 2px 0 0 #2456ff}
.promo--tv .plogo .tvrev-lg{height:19px;color:#16140f}
.promo--tv .rl{color:#2456ff}
.promo--tv .rl i{width:4px;height:4px;border-radius:50%;background:#2456ff;flex:none}
.promo--tv p{font-family:var(--body);font-style:italic;color:#423d33}
.promo--tv .pfeed{border-top:1px solid #e0dacb}
.promo--tv .pfeed a{font-family:var(--body);font-weight:500;line-height:1.32;color:#16140f}
.promo--tv .pfeed a:hover{color:#2456ff}
.promo--tv .pfeed .d{color:#7a7464}
.promo--tv .go{border-top:1px solid #e0dacb;color:#2456ff}
.sg[data-mode=dark] .promo--tv{background:#1b1813;border-color:#332e25;box-shadow:inset 0 2px 0 0 #9fb3ff}
.sg[data-mode=dark] .promo--tv .plogo .tvrev-lg{color:#f3efe6}
.sg[data-mode=dark] .promo--tv .rl{color:#9fb3ff}
.sg[data-mode=dark] .promo--tv .rl i{background:#9fb3ff}
.sg[data-mode=dark] .promo--tv p{color:#bdb6a4}
.sg[data-mode=dark] .promo--tv .pfeed{border-color:#332e25}
.sg[data-mode=dark] .promo--tv .pfeed a{color:#f3efe6}
.sg[data-mode=dark] .promo--tv .pfeed a:hover{color:#9fb3ff}
.sg[data-mode=dark] .promo--tv .pfeed .d{color:#7a7464}
.sg[data-mode=dark] .promo--tv .go{border-color:#332e25;color:#9fb3ff}

/* ---- The Measure: white card, vermilion, Archivo voice ---- */
.promo--ms{background:#FFFFFF;border:1px solid #E7E2DA;border-radius:3px}
.promo--ms .plogo img{height:17px}
.promo--ms .rl{color:#E8412B}
.promo--ms .rl i{width:12px;height:2px;background:#E8412B;flex:none}
.promo--ms p{font-family:var(--display);font-size:12px;color:#8A8175}
.promo--ms .pfeed{border-top:1px solid #E7E2DA}
.promo--ms .pfeed a{font-family:var(--display);font-size:12px;font-weight:600;
  letter-spacing:-.012em;line-height:1.3;color:#14110F}
.promo--ms .pfeed a:hover{color:#E8412B}
.promo--ms .pfeed .d{color:#8A8175}
.promo--ms .go{border-top:1px solid #E7E2DA;color:#E8412B}
.sg[data-mode=dark] .promo--ms{background:#1A1714;border-color:#332e2a}
.sg[data-mode=dark] .promo--ms .rl{color:#FF6A4D}
.sg[data-mode=dark] .promo--ms .rl i{background:#FF6A4D}
.sg[data-mode=dark] .promo--ms p{color:#A8A096}
.sg[data-mode=dark] .promo--ms .pfeed{border-color:#332e2a}
.sg[data-mode=dark] .promo--ms .pfeed a{color:#FBFAF7}
.sg[data-mode=dark] .promo--ms .pfeed a:hover{color:#FF6A4D}
.sg[data-mode=dark] .promo--ms .pfeed .d{color:#8A8175}
.sg[data-mode=dark] .promo--ms .go{border-color:#332e2a;color:#FF6A4D}

/* ============ POST — the showcase ============ */
.art-top{padding:26px 0 0}
.art-head{max-width:860px;padding-bottom:26px;border-bottom:1px solid var(--ink)}
.art-head h1{font-family:var(--display);font-size:58px;font-weight:800;letter-spacing:-.046em;line-height:1;margin:16px 0 18px;color:var(--ink);text-wrap:balance}
.art-head .dek{font-family:var(--body);font-size:21px;line-height:1.44;color:var(--ink2);margin:0 0 20px;max-width:60ch}
/* 16/8 is a BANNER, and on a phone that is what it looked like: a 311x156
   strip carrying a ghost word and no headline, sitting under a 38px <h1>
   that had already said the title (owner, 2026-09-09: "the click through
   is a horror show"). The pager's cards are 16/9 and read as pictures, so
   the article hero takes the same ratio — one grammar, and the plate stops
   looking like a failed headline slot.
   og-plates is unaffected: it sets width/height/aspect-ratio:auto on
   .art-plate explicitly for the 1200x630 render. */
.art-plate{aspect-ratio:16/9;margin:22px 0 20px}
.art-body{display:grid;grid-template-columns:236px minmax(0,700px) 1fr;gap:0 42px;padding:32px 0 0}
.prov{border-right:1px solid var(--ln);padding-right:26px;display:flex;flex-direction:column;gap:20px;align-self:start;position:sticky;top:126px}
.provH{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);padding-bottom:9px;border-bottom:1px solid var(--ink)}
.score{display:flex;align-items:baseline;gap:10px}
.score .n{font-family:var(--display);font-size:46px;font-weight:900;letter-spacing:-.045em;line-height:.86;color:var(--ink)}
.score .m{font-family:var(--mono);font-size:9px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.score .m b{display:block;color:var(--ok);font-weight:500}
.pdl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0;font-family:var(--mono);font-size:10.5px;line-height:1.5}
.pdl dt{color:var(--ink3);letter-spacing:.1em;text-transform:uppercase;font-size:9px;padding-top:2px}
.pdl dd{margin:0;color:var(--ink2)}
.pdl dd em{font-style:normal;color:var(--ink)}
.pdl dd a{color:var(--acc);border-bottom:1px solid var(--acc-t)}
.spark{display:flex;align-items:flex-end;gap:2px;height:34px}
.spark i{flex:1;background:var(--acc);opacity:.5;display:block;min-height:2px}
.spark i:last-child{opacity:1}

.prose{font-family:var(--body);font-size:21px;line-height:1.62;color:var(--ink)}
.sg[data-mode=dark] .prose{color:var(--ink2)}
.prose p{margin:0 0 1.05em}
.prose h2{font-family:var(--display);font-size:25px;font-weight:800;letter-spacing:-.032em;margin:1.7em 0 .5em;color:var(--ink)}
.prose a{color:var(--acc);box-shadow:inset 0 -1px 0 currentColor}
.prose strong{font-weight:600;color:var(--ink)}
.pull{margin:1.7em 0;padding:20px 0;border-top:3px solid var(--acc);border-bottom:1px solid var(--ln)}
.pull q{display:block;font-family:var(--display);font-size:25px;font-weight:700;letter-spacing:-.028em;line-height:1.16;quotes:none;color:var(--ink);margin-bottom:11px}
.pull cite{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:var(--ink3)}

/* source trail */
.trail{border:1px solid var(--ln);background:var(--el);margin:2em 0;padding:20px 22px}
.trail .h{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);padding-bottom:11px;border-bottom:1px solid var(--ln);margin-bottom:14px}
.trail .h .ct{margin-left:auto;color:var(--ink3)}
.trail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.trail li{display:grid;grid-template-columns:58px 92px 1fr;gap:14px;padding:10px 0;border-bottom:1px solid var(--ln);align-items:baseline}
.trail li:last-child{border-bottom:0;padding-bottom:0}
.trail .dt{font-family:var(--mono);font-size:10.5px;color:var(--ink3)}
.trail .ty{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.trail .ty.doc{color:var(--b3)}
.trail .ty.unc{color:var(--warn)}
.trail .tx{font-family:var(--body);font-size:16px;line-height:1.42;color:var(--ink2)}

/* update log */
.ulog{border-left:3px solid var(--warn);padding:4px 0 4px 18px;margin:2em 0;display:flex;flex-direction:column;gap:14px}
.ulog .h{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--warn)}
.ulog .u{display:flex;flex-direction:column;gap:5px}
.ulog .dt{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--ink3)}
.ulog .tx{font-family:var(--body);font-size:16px;line-height:1.45;color:var(--ink2)}

/* datasets */
.dsets{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:2em 0}
.dset{border:1px solid var(--ln);padding:13px 14px;display:block}
.dset:hover{border-color:var(--acc)}
.dset .fn{font-family:var(--mono);font-size:10.5px;color:var(--ink);margin-bottom:6px;word-break:break-all}
.dset .mt{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--ink3)}

.art-end{max-width:978px;padding-left:278px;margin-top:40px;padding-bottom:50px}
.auth{display:grid;grid-template-columns:58px 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ln)}
.auth .av{width:58px;height:58px;border-radius:50%;overflow:hidden;background:var(--el2)}
.auth .av img{width:100%;height:100%;object-fit:cover}
.auth .nm{font-family:var(--display);font-size:16px;font-weight:800;letter-spacing:-.025em;margin-bottom:5px}
.auth .bio{font-family:var(--body);font-size:16px;line-height:1.45;color:var(--ink2);max-width:64ch}
.discl{margin-top:14px;padding:13px 15px;background:var(--el2);border-left:2px solid var(--ln2);font-family:var(--mono);font-size:9px;line-height:1.6;letter-spacing:.04em;color:var(--ink3)}
.discl b{color:var(--ink2);font-weight:500}

/* ============ TOPIC — dossier ============ */
.dos-mast{padding:34px 0 0}
/* Channel ident: the section's own motif as its masthead — network
   programming, one strand per channel. */
.kick .id:empty{display:none}
.chid{aspect-ratio:16/4.6;display:block;margin:0 0 18px}
/* Reporter record card. Deliberately motif-free: paper, rules and type
   only. A channel is ours to brand; a byline is not. */
.repcard{border-top:2px solid var(--ink);border-bottom:1px solid var(--ln);padding:18px 0 20px;margin:0 0 4px}
.repcard h1{margin:10px 0 0}
.repcard .std{margin:12px 0 0;max-width:62ch}
.repcard .repnote{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin:14px 0 0;line-height:1.7}
.chid .mk{font-size:10.5px;letter-spacing:.2em;max-width:none}
.chid .chid-t{position:absolute;left:26px;right:26px;bottom:20px;z-index:5}
.chid .chid-t h1{color:#fff;margin:6px 0 0;text-shadow:0 2px 22px rgba(6,6,10,.5)}
.chid .chid-t .kick{color:rgba(255,255,255,.72)}
.chid .chid-t .kick .id{color:rgba(255,255,255,.55)}
.chid .chid-t .tier.br{background:rgba(255,255,255,.16);color:#fff;border-color:transparent}
/* State of play inherits its channel's accent, so the module reads as part
   of that strand rather than generic desk furniture. */
/* One colour per channel, now driving BOTH the edge and the series eyebrow
   through --ch, so the lockup is tinted by the beat it belongs to rather than
   the two being set independently and drifting. */
[data-ch=measurement] .sop{--ch:#20A08A}
[data-ch=agencies] .sop{--ch:#E4622E}
[data-ch=streaming] .sop,[data-ch=ad-tech] .sop{--ch:#2340D6}
[data-ch=retail-media] .sop,[data-ch=creators] .sop,[data-ch=deals] .sop{--ch:#5D6C99}
.sop{border-left-color:var(--ch,var(--acc))}
@media(max-width:700px){.chid{aspect-ratio:16/7}.chid .chid-t{left:16px;right:16px;bottom:14px}}
.dos-mast h1{font-family:var(--display);font-size:64px;font-weight:900;letter-spacing:-.05em;line-height:.94;margin:14px 0 14px;color:var(--ink)}
.dos-mast .std{font-family:var(--body);font-size:18px;line-height:1.46;color:var(--ink2);margin:0 0 22px;max-width:56ch}
.dos-grid{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:36px;padding-bottom:44px}
/* State of Play — desk-apparatus module, same garment family as .srcq
   (accent left edge, elevated ground, mono label). Dot-motif corner ties
   it to the plate language; no drop cap (it is a brief, not an article). */
.sop{position:relative;border:1px solid var(--ln2);border-left:3px solid var(--acc);background:var(--el2);padding:22px 26px 20px;margin:0 0 30px;overflow:hidden}
.sop::after{content:"";position:absolute;top:10px;right:10px;width:96px;height:44px;opacity:.35;pointer-events:none;background:radial-gradient(circle at center,var(--ink3) 1.1px,transparent 1.3px) 0 0/11px 11px;-webkit-mask-image:linear-gradient(115deg,transparent 20%,#000 70%);mask-image:linear-gradient(115deg,transparent 20%,#000 70%)}
/* THE SERIES LOCKUP (owner, 2026-08-28). State of Play was a mono section
   label at 10.5px — apparatus, a box with a caption. It is a named thing the
   desk publishes on a cadence, so it takes the same treatment as The Signal in
   the rail: a small mono eyebrow over the name at display scale. Deliberately
   the SAME 38px/900/-.045em as .boltcard .nm, because the two are siblings and
   the owner is balancing them against each other. Ink rather than white — this
   one sits on paper. */
.sopH{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 14px;align-items:baseline;
  padding:0 34px 14px 0;border-bottom:1px solid var(--ln);margin-bottom:16px}
.sopH .sr{grid-column:1/-1;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ch,var(--acc));margin-bottom:7px}
.sopH .sr::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--ch,var(--acc));margin-right:8px;vertical-align:1px}
.sopH h2{font-family:var(--display);font-size:38px;font-weight:900;letter-spacing:-.045em;line-height:.9;
  color:var(--ink);margin:0;text-wrap:balance}
.sopH .as{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
@media(max-width:620px){.sopH h2{font-size:28px}.sopH{grid-template-columns:1fr}.sopH .as{margin-top:8px}}
.sop .gh-content{font-size:18px}
/* Tightened on the owner's note (2026-08-27): the brief is four dense
   movements, and at 1.5/normal it read like body copy rather than a briefing.
   Line-height to 1.42 and a hair of negative tracking pull each movement into a
   block you can take in at once. SIZE IS UNCHANGED at the scale's 18px — the
   lint caught a 17px here on the first pass and was right: the ask was spacing,
   not a new step in the type scale. */
.sop .sopB{line-height:1.42;letter-spacing:-.006em}
.sop .sopB p{margin:0 0 12px}
.sop .sopB p:last-child{margin-bottom:0}

/* The header is the control. The caret is drawn rather than typed so it keeps
   its weight against the mono label beside it. */
.sop[data-sop] .sopH{cursor:pointer;user-select:none}
/* Absolute now rather than a flex item: a 38px name would drag a baseline-
   aligned caret down beside its descenders. Pinned to the corner it stays
   where the eye expects the control. */
.sop[data-sop] .sopH::after{content:"";position:absolute;right:4px;top:9px;width:9px;height:9px;
  border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);
  transform:rotate(45deg);transition:transform .18s ease}
.sop[data-sop][aria-expanded="false"] .sopH::after{transform:rotate(-45deg)}
.sop[data-sop] .sopH:hover::after{border-color:var(--ink)}
.sop[data-sop][aria-expanded="false"] .sopB{display:none}
.sop[data-sop][aria-expanded="false"]{padding-bottom:16px}
.sop[data-sop][aria-expanded="false"] .sopH{padding-bottom:0;border-bottom:0;margin-bottom:0}
.sop[data-sop] .sopH:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.sop .gh-content p strong{font-family:var(--display);font-size:12.5px;letter-spacing:.02em}
.sop .lede{font-family:var(--body);font-size:18px;line-height:1.5;color:var(--ink);margin:0 0 18px;max-width:66ch}
.moves{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ln)}
.moves div{padding:14px 16px 0;border-right:1px solid var(--ln)}
.moves div:last-child{border-right:0}
.moves .l{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px}
.moves .v{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-.022em;line-height:1.25;color:var(--ink)}
.moves .v em{font-style:normal;color:var(--warn)}
.moves .v em.up{color:var(--ok)}

.trk{width:100%;border-collapse:collapse;margin-bottom:30px}
.trk caption{text-align:left;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);padding-bottom:10px}
.trk th{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);text-align:left;font-weight:500;padding:9px 12px;border-bottom:1px solid var(--ink)}
.trk td{padding:11px 12px;border-bottom:1px solid var(--ln);font-size:14px;vertical-align:middle}
.trk tr:hover td{background:var(--el)}
.trk .en{font-family:var(--display);font-weight:700;letter-spacing:-.022em;color:var(--ink)}
.trk .mv{font-family:var(--mono);font-size:10.5px}
.trk .mv.up{color:var(--ok)}
.trk .mv.dn{color:var(--warn)}
.trk .mv.fl{color:var(--ink3)}
.trk .nt{font-family:var(--body);font-size:14px;color:var(--ink2);line-height:1.4}
.trk .lk{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);white-space:nowrap}

.river{display:flex;flex-direction:column}
.riv{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:26px;padding:20px 0;border-bottom:1px solid var(--ln);align-items:start}
.riv .plate{aspect-ratio:16/10}
.riv h3{font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.03em;line-height:1.14;margin:11px 0 9px;color:var(--ink)}
.riv p{font-family:var(--body);font-size:16px;line-height:1.45;color:var(--ink2);margin:0 0 11px}
.riv:hover h3{color:var(--acc)}
.riv.noart{grid-template-columns:1fr}
.pager{display:flex;gap:7px;padding:22px 0 0}
.pager a,.pager span{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;padding:7px 12px;border:1px solid var(--ln)}
.pager .cur{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pager a:hover{border-color:var(--acc);color:var(--acc)}

/* ============ THE BOLT ============ */
.bolt-mast{position:relative;overflow:hidden;isolation:isolate;padding:56px 0 50px;color:#F7F5F0}
/* Flagship ident. Same system as the channel idents (motif plate carries the
   masthead) at flagship scale: taller band, content vertically centred, and
   the ledger monument carrying the current issue number. .bolt-ka is retired
   — the ramp motif is the key art now, so The Signal and every channel page
   are drawn by one engine. */
.sig-ident{padding:0;min-height:clamp(330px,32vw,440px);display:flex;align-items:center}
.sig-ident>.in{position:relative;z-index:5;width:100%;align-items:center}
/* CTV hero details (VIZIO/Apple TV reference). One column anchored left over
   the motif, an oversized title, a two-line description, and a single
   unmistakable CTA — the pattern a 10-foot interface uses because it has one
   job. Everything secondary sits below the button, never beside it. */
.sigv{display:block!important}
/* Cast art: right side of the band, fading into the motif toward the text —
   the connected-TV hero pattern. Sits under the fog and the monument. */
.sigv-castart{position:absolute;top:0;bottom:0;right:0;width:56%;z-index:2;pointer-events:none;
  background-repeat:no-repeat;background-position:right bottom;background-size:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%);
  opacity:.8}
.sigv-castline{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:14px 0 0}
.sigv-castline b{color:#fff;font-weight:600}
@media(max-width:860px){.sigv-castart{width:78%;opacity:.45}}
.sigv-t{max-width:min(620px,62%)}
.sig-ident .sigv-t h1{font-size:clamp(52px,7.4vw,104px);line-height:.86;letter-spacing:-.055em;margin:0 0 14px;text-shadow:0 2px 40px rgba(6,6,10,.45)}
.sigv-desc{font-family:var(--body);font-size:clamp(17px,1.5vw,21px);line-height:1.42;color:rgba(247,245,240,.86);margin:0 0 24px;max-width:46ch}
.sigv-fmt{display:flex;flex-wrap:wrap;gap:8px 26px;margin:26px 0 0}
.sigv-fmt span{display:flex;flex-direction:column;gap:3px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.sigv-fmt b{font-family:var(--ui);font-size:14px;font-weight:700;letter-spacing:-.02em;text-transform:none;color:#fff}
.sigv-fmt .soon b{color:rgba(255,255,255,.62)}
.sigv-fmt .soon{color:rgba(255,255,255,.42)}
@media(max-width:860px){.sigv-t{max-width:100%}}
/* Sits behind the whole band as texture, not beside the subscribe panel —
   at this alpha it reads as watermark rather than a competing element. */
.sig-ident .mk{left:16px;bottom:12px}
.sig-ident .fog{background:linear-gradient(96deg,rgba(6,6,8,.88) 0%,rgba(6,6,8,.6) 48%,rgba(6,6,8,.1) 100%)}
/* Under the nexus motif the fog is lighter on the right: the node is the
   key art and the old fog was tuned to sit a cast photo under it. */
.sig-ident[data-p=nexus] .fog{background:linear-gradient(96deg,rgba(6,6,8,.86) 0%,rgba(6,6,8,.52) 42%,rgba(6,6,8,0) 78%)}
/* The placeholder cast figures come off (2026-09-14). They were a stand-in
   for a photo of the hosts; the ident is drawn by the graphics package now,
   and stock figures over a designed motif read as two ideas. The markup and
   this rule stay so a real cast photo can go back in with one line. */
.sig-ident[data-p=nexus] .sigv-castart{display:none}
/* Formats carry their own status, so "soon" can never read as a live
   promise. The pending one is set back rather than hidden. */
.sig-ident .bolt-cnt{flex-wrap:wrap;gap:26px 30px;align-items:flex-start}
.sig-ident .bolt-cnt div{max-width:190px}
.sig-ident .bolt-cnt .n{font-size:18px;line-height:1.12;letter-spacing:-.025em}
.sig-ident .bolt-cnt .soon .n{color:rgba(255,255,255,.62)}
.sig-ident .bolt-cnt .soon .l{color:rgba(255,255,255,.42)}
.sig-ident .bolt-cnt .soon .l::before{content:"";display:inline-block;width:5px;height:5px;border:1px solid rgba(255,255,255,.5);border-radius:50%;margin-right:6px;vertical-align:middle}
@media(max-width:700px){.sig-ident{min-height:0;padding:38px 0 34px}}
.bolt-ka{position:absolute;inset:0;z-index:-1;background:linear-gradient(112deg,#08080A 0%,#101B5E 32%,#2340D6 66%,#7D93FF 100%)}
.bolt-ka::before{content:"";position:absolute;inset:0;background:radial-gradient(62% 120% at 80% 32%,rgba(169,186,255,.5),transparent 60%),repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 100px)}
.bolt-ka::after{content:"";position:absolute;inset:0;background:linear-gradient(96deg,rgba(6,6,8,.9) 0%,rgba(6,6,8,.66) 46%,rgba(6,6,8,.14) 100%)}
.bolt-mast .in{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:end}
.bolt-brand{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.bolt-brand .fm{font-family:var(--display);font-size:16px;font-weight:800;letter-spacing:-.038em;color:#F7F5F0}
.bolt-brand .fm s{text-decoration:none;color:#A9BAFF}
.bolt-brand .fm i{font-style:normal;font-weight:400;color:rgba(247,245,240,.7)}
.bolt-brand u{text-decoration:none;width:1px;height:14px;background:rgba(255,255,255,.28)}
.bolt-brand .sr{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.bolt-mast h1{font-family:var(--display);font-size:80px;font-weight:900;letter-spacing:-.05em;line-height:.88;margin:0 0 16px;color:#fff}
.bolt-mast .std{font-family:var(--body);font-size:18px;line-height:1.48;color:rgba(247,245,240,.82);margin:0 0 22px;max-width:52ch}
.bolt-cnt{display:flex;gap:30px}
.bolt-cnt div{display:flex;flex-direction:column;gap:5px}
.bolt-cnt .n{font-family:var(--display);font-size:21px;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1}
.bolt-cnt .l{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.bolt-sub{background:rgba(10,10,12,.6);border:1px solid rgba(255,255,255,.2);padding:18px}
.bolt-sub .lb{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.62);display:block;margin-bottom:12px}
.bolt-sub input{width:100%;height:38px;padding:0 12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;font-family:var(--ui);font-size:14px;margin-bottom:8px}
.bolt-sub input::placeholder{color:rgba(255,255,255,.45)}
.bolt-sub button{width:100%;height:38px;border:0;background:#fff;color:#101B5E;font-family:var(--ui);font-weight:800;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.bolt-sub .fine{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:rgba(255,255,255,.5);margin:10px 0 0;line-height:1.5}
.bolt-body{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:36px;padding:30px 0 46px}
.iss{display:grid;grid-template-columns:74px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--ln);align-items:start}
.iss .no{font-family:var(--mono);font-size:10.5px;color:var(--acc);padding-top:3px}
.iss h3{font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.03em;line-height:1.15;margin:0 0 8px;color:var(--ink)}
.iss .tp{font-family:var(--body);font-size:16px;line-height:1.45;color:var(--ink2);margin:0 0 8px}
.iss .m{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.iss:hover h3{color:var(--acc)}
.epgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:30px}
.epcard .plate{aspect-ratio:16/9;margin-bottom:11px;display:flex;align-items:center;justify-content:center}
.epcard .plate .pl{position:relative;z-index:5;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center}
.epcard .plate .pl::after{content:"";border-left:11px solid #101B5E;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.epcard .plate .dur{position:absolute;right:9px;top:9px;z-index:5;font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:rgba(255,255,255,.85);background:rgba(0,0,0,.45);padding:2px 6px}
.epcard h4{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.022em;line-height:1.24;margin:0 0 6px;color:var(--ink)}
.epcard .m{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}

/* ============ EMAIL preview ============ */
.mailwrap{background:#6E6A64;padding:34px 0 60px;min-height:100vh}
.mailbar{max-width:680px;margin:0 auto 18px;display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.mailbar .sp{margin-left:auto}
.mailclient{max-width:680px;margin:0 auto;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.28)}
.mailmeta{padding:16px 22px;border-bottom:1px solid #E4DFD6;font-family:var(--mono);font-size:10.5px;line-height:1.9;color:#7E7871}
.mailmeta b{color:#131211;font-weight:500}
.mailmeta .subj{font-family:'Archivo',sans-serif;font-size:16px;font-weight:700;letter-spacing:-.025em;color:#131211;margin-top:6px;display:block}

/* ============ responsive ============ */
@media(max-width:1180px){
.sg-head .in{gap:18px}
.sg-nav{gap:18px}
/* .sg-k{display:none} used to sit here (2026-08-08, v1: hide the search icon
   to make room for the nav). Removed 2026-09-17 (A117): since the 1024px
   split, .sg-head is the ONLY chrome between 1024 and 1180 and .fhead, which
   carries the phone's search form, is off -- so that band had no search
   control on any page (owner, on a Record page: "seem to have lost the
   search in the top nav"). .sg-nav scrolls (overflow-x:auto) and .sg-acts is
   flex:none, so the 32px icon fits without the rule. */
.sg-home,.dos-grid,.bolt-body{grid-template-columns:1fr}
.art-body{grid-template-columns:1fr;gap:0}
.prov{position:static;border-right:0;padding-right:0;border-bottom:1px solid var(--ln);padding-bottom:20px;margin-bottom:26px;flex-direction:row;flex-wrap:wrap;gap:28px}
.prov .spark{flex:none;width:160px}
.trk .mv{white-space:nowrap}
.art-end{padding-left:0}
.lead-split,.lead-pair{grid-template-columns:1fr}
.also{border-left:0;padding-left:0;border-top:1px solid var(--ln);padding-top:20px}
.grid3,.epgrid,.moves{grid-template-columns:1fr}
.moves div{border-right:0;border-bottom:1px solid var(--ln);padding-bottom:14px}
.moves div:last-child{border-bottom:0;padding-bottom:0}
.bolt-mast .in{grid-template-columns:1fr}
.bolt-mast h1{font-size:52px}
/* 38px in a 311px column is six lines with breaks like "open-web / pitch
   stalled as". This heading only appears at all below 560px — where the
   plate declines to typeset the title, see `roomy` in signal.js — so it is
   phone type and should be sized as such. 30, not 31: the display tier is
   a frozen scale and theme-lint refused the off-step value, correctly. */
.art-head h1{font-size:30px;letter-spacing:-.038em}
.dos-mast h1{font-size:42px}
.riv{grid-template-columns:1fr}
}
@media(max-width:980px){
.sg-burger{display:flex}
.sg-nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:70;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--ink);box-shadow:0 18px 40px rgba(0,0,0,.14);padding:6px var(--pad) 14px;overflow:visible}
.sg-head.open .sg-nav{display:flex}
.sg-nav a{font-size:16px;padding:11px 0;border-bottom:1px solid var(--ln);border-left:2px solid transparent;padding-left:0}
.sg-nav a:hover,.sg-nav a.on{border-bottom-color:var(--ln);color:var(--acc)}
.sg-sub .st{display:none}
}
@media(prefers-reduced-motion:reduce){.sg-strip .k i{animation:none}}

/* ============ Ghost / Koenig ============ */
.gh-content{font-family:var(--body);font-size:21px;line-height:1.62;color:var(--ink)}
.sg[data-mode=dark] .gh-content{color:var(--ink2)}
.gh-content>*{margin:0 0 1.05em}
/* hr = house-page section divider, drawn as the plate motif (dot run + ring)
   so content stays plain HTML and the graphic language lives in the theme. */
.gh-content hr,.art-body hr{border:0;width:88px;height:14px;margin:2.4em 0 2.2em;position:relative;opacity:.5;overflow:visible;
  background:radial-gradient(circle 1.8px at 7px 7px,currentColor 98%,transparent) 0 0/12px 14px repeat-x}
.gh-content hr::after,.art-body hr::after{content:"";position:absolute;right:-26px;top:1.6px;width:9px;height:9px;border:1.4px solid currentColor;border-radius:50%}
/* "From the original" — verbatim excerpt block (signal.js renders from
   signal-meta). Quiet quoted-source garment, deliberately distinct from
   .gh-content blockquote's loud editorial pull-quote. */
.srcq{margin:2.2em 0 1.4em;padding:18px 22px;border-left:3px solid var(--acc);background:var(--el2)}
.srcq figcaption{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink3);margin-bottom:9px}
.srcq blockquote{margin:0;border:0;padding:0;font-family:var(--body);font-style:italic;font-size:18px;line-height:1.56;color:var(--ink2)}
.srcq cite{display:block;margin-top:11px;font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:var(--ink3)}
.srcq cite a{color:var(--acc)}
/* "read the original · gated" — a heads-up on a paywalled receipt, never a
   badge for the outlet. Mono, faint, lowercase, no colour, no border, no logo,
   so it reads as a footnote ON the link rather than a button competing with it.
   font-style resets because one of its three homes is inside the body's <em>
   attribution line; the other two are this cite and a timeline row. Never on a
   plate — see the gate pass in signal.js. */
.gate{font-family:var(--mono);font-size:10.5px;font-style:normal;font-weight:400;text-transform:none;letter-spacing:.02em;color:var(--ink3);white-space:nowrap}
/* Option B sub-brand: the desk mark in the sub-bar stats (header.hbs) */
.st .deskmark-st{color:var(--acc)}
/* ============ ABOUT — the special page ============
   The plate motif language (dot fields, rings, scanlines, grid) escapes the
   image overlays and becomes full-bleed page furniture. Colors come from
   theme vars so every band adapts to light/dark. */
.ab-hero,.abx hr{border:0;width:100vw;margin-left:calc(50% - 50vw);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ab-hero{height:132px;margin-top:6px;margin-bottom:14px;opacity:.5;background:
  radial-gradient(circle at 76% 46%,transparent 42px,var(--acc) 43px 45px,transparent 46px),
  radial-gradient(circle at 82% 62%,transparent 14px,var(--ink3) 15px 16px,transparent 17px),
  radial-gradient(circle at 18% 40%,var(--acc) 0 5px,transparent 6px),
  radial-gradient(circle at center,var(--ink3) 1px,transparent 1.2px) 0 0/12px 12px,
  linear-gradient(0deg,transparent 49.5%,var(--ln2) 49.5% 50.5%,transparent 50.5%)}
.abx hr{height:64px;margin-top:2.6em;margin-bottom:2.4em;opacity:.42;background:none}
.abx hr::after{content:none}
/* THE THREE BANDS CYCLE (2026-09-14). They were :nth-of-type(1/2/3) and
   the About page has FIVE <hr> -- four in the page content plus the one
   page-about.hbs puts above "Contact the desk" -- so bands 4 and 5 fell
   through to `background:none` and rendered as two 64px blank gaps.
   Measured on the live page before the change, not inferred: bands 4 and 5
   reported backgroundImage "none" at a full 64px of height. Cycling means
   the page can grow a section without growing a hole. */
.abx hr:nth-of-type(3n+1){background:
  radial-gradient(circle at 24% 50%,transparent 20px,var(--acc) 21px 22.5px,transparent 23.5px),
  radial-gradient(circle at center,var(--ink3) 1.1px,transparent 1.3px) 0 0/13px 13px}
.abx hr:nth-of-type(3n+2){background:
  radial-gradient(circle at 70% 50%,var(--acc) 0 4px,transparent 5px),
  repeating-linear-gradient(58deg,var(--ink3) 0 1.5px,transparent 1.5px 11px)}
.abx hr:nth-of-type(3n){background:
  radial-gradient(circle at 50% 50%,transparent 16px,var(--acc) 17px 18.5px,transparent 19.5px),
  repeating-linear-gradient(90deg,var(--ln2) 0 1px,transparent 1px 42px),
  repeating-linear-gradient(0deg,var(--ln2) 0 1px,transparent 1px 42px)}
/* desk request form (page-about.hbs) */
.dform{margin-top:.4em;font-family:var(--ui)}
.dform label{display:block;margin:0 0 16px;font-size:12.5px;font-weight:600;letter-spacing:.01em}
.dform .req{font-weight:400;color:var(--ink3);font-size:10.5px;margin-left:4px}
.dform input,.dform select,.dform textarea{display:block;width:100%;margin-top:6px;padding:10px 12px;font:inherit;font-weight:400;font-size:16px;color:var(--ink);background:var(--el);border:1px solid var(--ln2);border-radius:2px}
.dform input:focus,.dform select:focus,.dform textarea:focus{outline:2px solid var(--acc);outline-offset:0;border-color:var(--acc)}
.dform .hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.dform button{font:inherit;font-size:14px;font-weight:600;padding:11px 22px;color:var(--paper);background:var(--ink);border:0;border-radius:2px;cursor:pointer}
.dform button:disabled{opacity:.55;cursor:default}
.dform-note{margin-top:14px;font-size:14px;color:var(--ink2)}
/* post bodies open with the attribution line since the dek dedupe — a drop
   cap on "Signal from…" reads as a typo, not typography */
.gh-content h2{font-family:var(--display);font-size:25px;font-weight:800;letter-spacing:-.032em;margin:1.7em 0 .5em;color:var(--ink)}
.gh-content h3{font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.028em;margin:1.5em 0 .4em;color:var(--ink)}
.gh-content a{color:var(--acc);box-shadow:inset 0 -1px 0 currentColor}
.gh-content strong{font-weight:600;color:var(--ink)}
.gh-content ul,.gh-content ol{padding-left:1.2em}
.gh-content li{margin-bottom:.4em}
.gh-content blockquote{margin:1.7em 0;padding:20px 0;border-top:3px solid var(--acc);border-bottom:1px solid var(--ln);font-family:var(--display);font-size:25px;font-weight:700;letter-spacing:-.028em;line-height:1.16;color:var(--ink)}
.gh-content hr{border:0;border-top:1px solid var(--ln);margin:2em 0}
.gh-content figure{margin:1.8em 0}
.gh-content figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink3);padding-top:9px;text-align:left}
.gh-content .kg-card{margin:1.8em 0}
.gh-content .kg-width-wide{width:min(100%,860px);margin-left:calc(50% - min(50%,430px))}
.gh-content .kg-width-full{width:min(100vw,1180px);margin-left:calc(50% - min(50vw,590px))}
.gh-content .kg-callout-card{display:flex;gap:14px;padding:18px 20px;background:var(--el2);border-left:3px solid var(--acc);font-family:var(--ui);font-size:16px;line-height:1.5}
.gh-content .kg-bookmark-card a{display:grid;grid-template-columns:1fr auto;border:1px solid var(--ln);box-shadow:none;text-decoration:none}
.gh-content .kg-bookmark-content{padding:16px 18px}
.gh-content .kg-bookmark-title{font-family:var(--display);font-weight:700;letter-spacing:-.025em;color:var(--ink);font-size:16px}
.gh-content .kg-bookmark-description{font-size:14px;color:var(--ink2);margin-top:6px}
.gh-content .kg-bookmark-metadata{font-family:var(--mono);font-size:10.5px;color:var(--ink3);margin-top:10px;display:flex;gap:8px;align-items:center}
.gh-content .kg-bookmark-thumbnail img{width:170px;height:100%;object-fit:cover}
.gh-content .kg-embed-card,.gh-content .kg-video-card,.gh-content .kg-audio-card{margin:1.8em 0}
/* Ghost-native embeds arrive with fixed 200x113 oembed dimensions -- make
   them fill the column (owner ask 2026-08-24: video in original posts). */
.gh-content .kg-embed-card iframe{width:100%;aspect-ratio:16/9;height:auto}
/* Watch block: a sister-pub video pulled up onto the article page. */
.watch{margin:0 0 26px}
.watch figcaption{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--acc);padding-bottom:9px;border-bottom:1px solid var(--ink);margin-bottom:12px}
.watch iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;background:#000}
.gh-content .kg-toggle-card{border:1px solid var(--ln);padding:16px 18px}
.gh-content .kg-toggle-heading{display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.gh-content .kg-toggle-heading-text{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.025em;margin:0}
.gh-content .kg-toggle-content{display:none;padding-top:12px;font-size:18px}
.gh-content .kg-toggle-card[data-kg-toggle-state=open] .kg-toggle-content{display:block}
.gh-content .kg-button-card a{font-family:var(--ui);font-weight:700;font-size:12.5px;letter-spacing:.02em;background:var(--acc);color:#fff;padding:12px 20px;display:inline-block;box-shadow:none;border-radius:999px}
.gh-content table{width:100%;border-collapse:collapse;font-family:var(--ui);font-size:14px}
.gh-content th{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;text-align:left;padding:9px 12px;border-bottom:1px solid var(--ink);color:var(--ink3)}
.gh-content td{padding:10px 12px;border-bottom:1px solid var(--ln)}
.gh-content code{font-family:var(--mono);font-size:.86em;background:var(--el2);padding:2px 5px}
.gh-content pre{background:var(--el2);padding:16px 18px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.6}
.gh-content pre code{background:none;padding:0}
/* members / subscribe states */
.gh-members-form{display:flex;flex-direction:column;gap:7px}
.gh-members-form .msg{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;display:none}
.gh-members-form.success .msg.ok,.gh-members-form.error .msg.err{display:block}
.gh-members-form .msg.ok{color:#fff}
.gh-members-form .msg.err{color:#FFC9B4}
.paywall{border:1px solid var(--ink);padding:28px 30px;margin:2em 0;text-align:center}
.paywall h3{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.035em;margin:0 0 10px}
.paywall p{font-family:var(--body);font-size:16px;line-height:1.5;color:var(--ink2);margin:0 0 18px;max-width:48ch;margin-inline:auto}
/* archive / pagination */
.pagination{display:flex;gap:7px;padding:22px 0 0;font-family:var(--mono);font-size:10.5px}
.pagination a,.pagination span{padding:7px 12px;border:1px solid var(--ln)}
.pagination a:hover{border-color:var(--acc);color:var(--acc)}
.err{padding:90px 0;text-align:center}
.err .code{font-family:var(--display);font-size:110px;font-weight:900;letter-spacing:-.06em;line-height:1;color:var(--acc)}
.err h1{font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.035em;margin:14px 0 10px}
.err p{font-family:var(--body);font-size:18px;color:var(--ink2);margin:0 0 22px}

/* ============ footer ============ */
.sg-foot{background:var(--ink);color:var(--ink3);padding:44px 0 0;margin-top:20px}
.sg[data-mode=dark] .sg-foot{background:#08080A}
.sg-foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-bottom:34px}
.sg-foot .wm{font-size:28px;color:#FAF8F4;margin-bottom:14px}
.sg-foot .wm s{color:var(--acc2)}
.sg-foot .wm i{color:rgba(250,248,244,.66)}
.sg-foot p{font-family:var(--body);font-size:16px;line-height:1.5;max-width:34ch;margin:0;color:rgba(250,248,244,.62)}
.sg-foot h4{font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#FAF8F4;margin:0 0 14px}
.sg-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.sg-foot ul a{font-size:14px;color:rgba(250,248,244,.62)}
.sg-foot ul a:hover{color:#FAF8F4}
/* nav-helper output in the footer: bare anchors, styled like the ul lists */
.sg-foot .ftnav{display:flex;flex-direction:column;gap:9px}
.sg-foot .ftnav a{font-size:14px;color:rgba(250,248,244,.62)}
.sg-foot .ftnav a:hover{color:#FAF8F4}
/* ownership disclosure — site-wide, above the legal row */
.sg-foot .discl-foot{font-family:var(--body);font-size:12.5px;line-height:1.6;color:rgba(250,248,244,.5);max-width:88ch;padding:0 0 20px}
.sg-foot .discl-foot b{color:rgba(250,248,244,.72);font-weight:600}
.sg-foot .lg{border-top:1px solid rgba(250,248,244,.14);padding:16px 0;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(250,248,244,.4);display:flex;gap:20px;flex-wrap:wrap}
.sg-foot .lg .p{margin-left:auto}
.sg-foot .lg a{color:inherit}
@media(max-width:1180px){.sg-foot .cols{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.sg-foot .cols{grid-template-columns:1fr}}

/* ============ feature image composited into the plate ============ */
.plate-photo{position:absolute;inset:0;z-index:1;background-image:var(--photo);background-size:cover;background-position:center;mix-blend-mode:luminosity;filter:contrast(1.1) saturate(1.05);opacity:.72}/* photo rides its own layer via --photo so the section gradient beneath   survives — inline background-image used to REPLACE the gradient, which   killed the duotone motif on every photo plate */
.plate:has(.plate-photo)::before{z-index:2;opacity:.55}
.plate:has(.plate-photo)::after{z-index:3;opacity:.5}
.plate:has(.plate-photo) .mk,.plate:has(.plate-photo) .cap{z-index:6}
figure.plate{margin:24px 0 0}

/* search button reset */
.sg-k{font:inherit;font-family:var(--mono);font-size:10.5px;cursor:pointer}

/* sample-issue email embed on The Signal page */
/* Issue archive: flat rows, number + lede headline + date link. */
.issarch{border-top:2px solid var(--ink);margin-bottom:26px}
.issarch a{display:flex;gap:18px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--ln);color:var(--ink)}
.issarch a:hover .tt{color:var(--acc)}
.issarch .no{font-family:var(--mono);font-size:10.5px;color:var(--ink3);flex:none}
.issarch .tt{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.02em}
.issarch .dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin-left:auto;flex:none;white-space:nowrap}
@media(max-width:700px){.issarch a{flex-wrap:wrap}.issarch .dt{margin-left:0;width:100%}}
.mailframe{width:100%;max-width:640px;height:780px;border:1px solid var(--ln2);background:#FAF8F4;display:block}

/* ---- the "view in browser" page for a sent issue (/email/<uuid>/) ----
   Rendered by partials/email-issue.hbs behind post.hbs's {{#is "emailPost"}}
   guard. The issue arrives as the email HTML it was sent as, carrying its own
   masthead, type and 600px table, so this adds a measure it can sit in rather
   than a design: .art-body's 236px+700px article grid is what squeezed it.
   640px matches .mailframe above, which is the same email on /the-signal/. */
.emv{max-width:680px;margin:0 auto;padding:22px 0 64px}
.emv-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  border-bottom:1px solid var(--ln);padding-bottom:11px;margin-bottom:20px}
.emv-back{font-family:var(--ui);font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.emv-back:hover{color:var(--acc)}
.emv-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink3);text-align:right}
/* The issue is a MAIL DOCUMENT and its inner table is pinned by an INLINE
   style="width:600px;max-width:600px", which a stylesheet rule cannot
   override without !important — and forcing a 600px email table narrower
   reflows a layout that was built for exactly that measure. Measured on a
   375px phone: the box is 311px and the table stays 600, so without this the
   email is CLIPPED and the reader loses the right-hand third of every issue.
   So it scrolls inside its own box: the issue stays whole and the page still
   never scrolls sideways. Same bargain .mailframe makes on /the-signal/,
   where the identical email sits in an iframe. */
.emv-doc{border:1px solid var(--ln2);background:#FAF8F4;overflow-x:auto;-webkit-overflow-scrolling:touch}
.emv-doc img{max-width:100%;height:auto}
@media(max-width:700px){.emv-top{flex-direction:column;gap:4px}.emv-meta{text-align:left}}

/* ============ iSpot Top Commercials rail unit (ported from Look Directions v1.0) ============ */
/* ---- iSpot horizontal ticker (Terminal) ---- */
/* ---- iSpot Top Commercials rail unit ---- */
/* Maps theme tokens into the widget's namespace. Four of these named
   properties this theme never defines (--line, --line2, --card, --mut,
   --ink-2), so the widget's rules, borders and muted text resolved to
   nothing. Corrected to the real tokens 2026-08-22. */
.isp{--i-line:var(--ln);--i-line2:var(--ln2);--i-surface:var(--el);--i-ink:var(--ink);--i-paper:var(--paper);--i-mut:var(--ink3);--i-body:var(--ink2);--i-hover:var(--acc-t);--i-acc:var(--acc);--i-r:12px;
border:1px solid var(--i-line);border-radius:var(--i-r);overflow:hidden;background:var(--i-surface);margin-bottom:26px}
.tr .isp{--i-line:var(--ln);--i-line2:var(--ln2);--i-surface:var(--el);--i-ink:var(--ink);--i-paper:var(--paper);--i-mut:var(--ink3);--i-body:var(--ink2);--i-hover:rgba(107,132,255,.13);--i-acc:var(--acc);--i-r:0}
.isp-hd{display:flex;align-items:center;gap:6px;padding:9px 10px 7px;white-space:nowrap}
.isp-hd .ttl{font-family:var(--ui);font-size:12.5px;font-weight:800;letter-spacing:-.025em;color:var(--i-ink)}
/* Disclosure row: stated plainly, sized to be read rather than announced. */
.isp-sub{display:flex;align-items:center;gap:8px;padding:0 10px 8px;border-bottom:1px solid var(--i-line);white-space:nowrap;min-height:8px}
/* Publication-side disclosure: our type, our canvas, above the unit. */
.adlabel{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);padding:0 0 6px}
/* NO LABEL OVER NOTHING (2026-09-14). The hosted iSpot unit hides itself
   when its feed is down (by design: no sample data on a live site), and the
   ADVERTISEMENT eyebrow above it kept standing over an empty 2px div for as
   long as /api/topspots was 503 -- which is how the owner found out the
   scraper had broken. The label follows the unit: empty unit, no label. */
.adlabel:has(+ .isp:empty){display:none}
.isp-sub .wk{margin-left:auto;font-family:var(--mono);font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--i-mut)}
.isp-hd .by{margin-left:auto;display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--i-mut)}
.isp-hd .by b{font-family:var(--ui);font-weight:800;color:#12A46B;letter-spacing:-.02em;font-size:11px;text-transform:none}
.isp-hd .by i{font-style:normal;width:4px;height:4px;border-radius:50%;background:#12A46B}
.isp-roll{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--i-line);border-bottom:1px solid var(--i-line)}
.tr .isp-roll{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--i-line);border-bottom:1px solid var(--i-line)}
.isp-roll div{background:var(--i-surface);padding:8px 5px;min-width:0;overflow:hidden}
.isp-roll .n{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:-.035em;line-height:1;color:var(--i-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.isp-roll .l{font-family:var(--mono);font-size:6.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--i-mut);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.isp-listwrap{position:relative;height:216px;overflow:hidden}
.isp-listwrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26px;pointer-events:none;z-index:3;background:linear-gradient(180deg,transparent,var(--i-surface))}
.isp-list{display:flex;flex-direction:column;will-change:transform;animation:ispScroll 34s linear infinite}
.isp-listwrap:hover .isp-list{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.isp-list{animation:none}.isp-listwrap{height:auto}}
.isp-row{position:relative;display:grid;grid-template-columns:12px 40px minmax(0,1fr) 30px;gap:8px;padding:8px 10px;border-bottom:1px solid var(--i-line);align-items:center;cursor:pointer}
.isp-row:last-child{border-bottom:0}
.isp-row:hover{background:var(--i-hover)}
.isp-row .rk{font-family:var(--mono);font-size:9.5px;color:var(--i-mut);line-height:1}
.isp-row .bd{display:flex;flex-direction:column;min-width:0}
.isp-row .th{aspect-ratio:16/10;border-radius:3px;overflow:hidden;position:relative}
.isp-row .th>img{width:100%;height:100%;object-fit:cover;display:block}
.isp-row .th.noimg{background:repeating-linear-gradient(-45deg,var(--i-line) 0 1px,transparent 1px 6px),var(--i-hover)}
.tr .isp-row .th{border-radius:0}
.isp-row .br{display:block;font-size:11.5px;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--i-ink);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.isp-row .ti{display:block;font-family:var(--mono);font-size:8px;letter-spacing:0;color:var(--i-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.isp-row .at{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.isp-row .at .v{display:block;font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--i-ink);line-height:1}
.isp-row .at .d{display:block;font-family:var(--mono);font-size:7.5px;letter-spacing:.04em;color:var(--i-mut);line-height:1}
.isp .up{color:#12A46B}
.isp .dn{color:#D2410F}
.isp-det{position:absolute;right:100%;top:-4px;margin-right:10px;z-index:60;width:250px;background:var(--i-surface);border:1px solid var(--i-line2);border-radius:var(--i-r);padding:12px 13px;opacity:0;visibility:hidden;transform:translateX(6px);transition:opacity .14s,transform .14s,visibility .14s;box-shadow:0 18px 40px rgba(0,0,0,.22);pointer-events:none}
.tr .isp-det{box-shadow:0 18px 40px rgba(0,0,0,.5)}
.isp-row:hover .isp-det{opacity:1;visibility:visible;transform:none}
.isp-det .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--i-acc);padding-bottom:8px;border-bottom:1px solid var(--i-line);margin-bottom:9px;display:flex}
.isp-det .k b{margin-left:auto;color:var(--i-mut);font-weight:400}
.isp-det dl{display:grid;grid-template-columns:66px 1fr;gap:6px 11px;margin:0;font-family:var(--mono);font-size:10px;line-height:1.5}
.isp-det dt{color:var(--i-mut);letter-spacing:.1em;text-transform:uppercase;font-size:8px;padding-top:2px}
.isp-det dd{margin:0;color:var(--i-body)}
.isp-det dd em{font-style:normal;color:var(--i-ink)}
.isp-ft{display:flex;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid var(--i-line);font-family:var(--mono);font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--i-mut);white-space:nowrap}
.isp-ft span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.isp-ft a{margin-left:auto;color:var(--i-acc);flex:none}
@media(max-width:1180px){.isp-det{right:auto;left:0;top:100%;margin:6px 0 0;transform:translateY(-4px)}}
/* House-promo frame. A rule above in ink and a hairline below set the unit
   off from the editorial either side of it, and the mono label says who is
   speaking. Deliberately NOT .adlabel/"Advertisement" -- that belongs to the
   iSpot placement, which is third-party paid; this is Fabric's own service. */
.hpromo{margin:26px 0 34px;padding:14px 0 22px;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ln)}
.hpromo__lb{font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink3);padding:0 0 10px}
.hpromo .qwide{margin:0}
/* Consult an analyst, wide. Same identity as the rail card (.qpromo) but
   laid across the main column: the quote carries the weight on the left, the
   attribution and CTA sit right, and it stacks on narrow screens. Placed
   above THE WIRE so it reads as the end of the curated edition. */
.qwide{position:relative;overflow:hidden;isolation:isolate;display:grid;
  grid-template-columns:minmax(0,1fr) 260px;gap:30px;align-items:center;
  border-radius:12px;padding:24px 28px;margin:6px 0 34px;
  background:linear-gradient(104deg,#0B0A09 0%,#132AA8 46%,#2C46D8 78%,#4C63E8 100%)}
.qwide::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 120% at 14% 10%,rgba(107,132,255,.5),transparent 64%)}
.qwide:hover{box-shadow:0 0 0 1px var(--acc)}
.qwide .rl{font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:10px}
.qwide blockquote{margin:0;font-family:var(--display);font-size:23px;line-height:1.24;
  font-weight:700;letter-spacing:-.026em;color:#F7F5F0;text-wrap:pretty;max-width:34ch}
.qwide__who{border-left:1px solid rgba(255,255,255,.3);padding-left:26px}
.qwide .at{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center}
.qwide .av{width:38px;height:38px;border-radius:50%;overflow:hidden;
  background:rgba(255,255,255,.14);box-shadow:0 0 0 1px rgba(255,255,255,.28)}
.qwide .av img{width:100%;height:100%;object-fit:cover;display:block}
.qwide .nm{font-size:12.5px;font-weight:700;letter-spacing:-.015em;color:#fff;line-height:1.2}
.qwide .ro{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:rgba(255,255,255,.82);margin-top:3px}
.qwide .go{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;margin-top:14px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.34)}
@media(max-width:820px){
  .qwide{grid-template-columns:1fr;gap:20px;padding:20px}
  .qwide blockquote{font-size:18px;max-width:none}
  .qwide__who{border-left:0;border-top:1px solid rgba(255,255,255,.2);padding:18px 0 0}
}
.qpromo{position:relative;overflow:hidden;isolation:isolate;border:0;border-radius:12px;padding:16px;margin-bottom:12px;display:block;background:linear-gradient(148deg,#0B0A09 0%,#1B32B8 56%,#6B84FF 100%)}
.qpromo::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 90% at 18% 12%,rgba(107,132,255,.5),transparent 64%)}
.qpromo:hover{box-shadow:0 0 0 1px var(--acc)}
.qpromo .rl{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:10px}
.qpromo blockquote{margin:0 0 12px;font-size:16px;line-height:1.36;font-weight:600;letter-spacing:-.018em;color:#F7F5F0;text-wrap:pretty}
.qpromo .at{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center}
.qpromo .av{width:38px;height:38px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.14);box-shadow:0 0 0 1px rgba(255,255,255,.28)}
.qpromo .av img{width:100%;height:100%;object-fit:cover;display:block}
.qpromo .nm{font-size:12.5px;font-weight:700;letter-spacing:-.015em;color:#fff;line-height:1.2}
.qpromo .ro{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:rgba(255,255,255,.62);margin-top:3px}
/* The CTA is the one thing this card asks you to do — Eleanor's contrast pass
   applied inside the card too: #A9BAFF on the gradient's light end was ~2.2:1.
   Near-white with the periwinkle kept for the arrow. */
.qpromo .go{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.92);margin-top:12px;padding-top:11px;border-top:1px solid rgba(255,255,255,.2)}
.qpromo:hover .go{color:#fff}
/* THE FABRIC UNIT, IN FABRIC'S DESIGN SYSTEM (2026-09-14). Owner, same
   day, two passes: first "more ad-like than content module", then "use the
   Fabric logo, the sewn letterform look, and Fabric DS style. In a way it
   too is an advertisement." So the blue ramp -- medianexis's colour -- came
   off it: this is Fabric speaking inside medianexis, in Fabric's own
   tokens, hard-set so it never inherits the publication's colourway. Paper
   ground, hairline border, ink type, red as the one accent (eyebrow and the
   CTA pill), Plex Mono labels, Archivo 800 headline, the trimmed wordmark
   at chrome height (15-22px in the rail, 26px wide). partials/fabric-ad.hbs,
   wide in the home column and narrow in the rail (.fabad--rail). */
.fabad{--fp:#FBFAF7;--fi:#14110F;--fr:#E8412B;--ft:#8A8175;--fm:#5C554B;--fh:#E7E2DA;
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px 34px;align-items:end;
  border:1px solid var(--fh);border-radius:12px;padding:20px 26px 22px;margin:6px 0 34px;
  background:var(--fp);color:var(--fi);text-decoration:none;
  transition:border-color 140ms ease,box-shadow 140ms ease}
.fabad:hover{border-color:var(--fi);box-shadow:0 10px 30px rgba(20,17,15,.08)}
/* TWO LINES, like the sister-pub promos (owner, 2026-09-17). The mark and the
   label sat side by side here while .promo puts the lockup on its own line
   (.plogo) and the mono metadata beneath it (.rl) — so Fabric's unit read as a
   different kind of object from The Measure's and TVREV's, sitting inches
   away. Same stacking now, same 9px beat under the mark. The TOKENS stay
   Fabric's: this box is Fabric speaking inside medianexis, so the accent is
   Fabric red and not the publication's blue. */
.fabad__brand{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  padding-bottom:14px;border-bottom:1px solid var(--fh)}
.fabad__brand img{display:block;height:26px;width:auto}
.fabad__brand i{font-style:normal;font-family:var(--mono);font-size:9px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--fr)}
.fabad__h{grid-column:1;display:block;font-family:var(--display);font-size:30px;line-height:1.04;
  font-weight:800;letter-spacing:-.036em;color:var(--fi);text-wrap:balance;max-width:19ch}
.fabad__p{grid-column:1;display:block;font-family:var(--body);font-size:16px;line-height:1.45;
  color:var(--fm);max-width:50ch}
.fabad__row{grid-column:2;grid-row:2/4;align-self:end;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.fabad__cta{display:inline-flex;align-items:center;gap:10px;background:var(--fr);color:#fff;
  font-family:var(--display);font-size:14px;font-weight:800;letter-spacing:-.01em;
  padding:13px 20px;border-radius:999px;white-space:nowrap;transition:background 140ms ease}
.fabad__cta b{font-weight:800}
.fabad:hover .fabad__cta{background:var(--fi)}
.fabad__who{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:9px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ft)}
.fabad__who img{width:30px;height:30px;border-radius:50%;object-fit:cover;display:block;
  box-shadow:0 0 0 1px var(--fh)}
.fabad__who b{display:block;font-family:var(--display);font-size:12.5px;font-weight:700;
  letter-spacing:-.01em;text-transform:none;color:var(--fi);margin-bottom:2px}
.fabad--rail{grid-template-columns:1fr;gap:10px;padding:16px 16px 18px;margin:0 0 12px}
.fabad--rail .fabad__brand{padding-bottom:10px;gap:10px}
.fabad--rail .fabad__brand img{height:20px}
.fabad--rail .fabad__h{font-size:18px;max-width:none}
.fabad--rail .fabad__p{font-size:14px;line-height:1.42}
.fabad--rail .fabad__row{grid-column:1;grid-row:auto;gap:12px;margin-top:6px}
.fabad--rail .fabad__cta{font-size:12.5px;padding:11px 16px}
@media(max-width:820px){
  .fabad{grid-template-columns:1fr;padding:18px}
  .fabad__h{font-size:21px;max-width:none}
  .fabad__row{grid-column:1;grid-row:auto;margin-top:6px}
}
/* sample-data chip — shows until a real iSpot feed is wired via @custom.ispot_feed_url */
.isp .smp{font-family:var(--mono);font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--warn);border:1px solid currentColor;border-radius:2px;padding:2px 5px;margin-left:8px}

/* loop animations for the iSpot units — missed by the 1.0.11 port (the
   extractor couldn't match nested keyframe braces): without ispScroll the
   rail list sat frozen showing its doubled loop content twice */
@keyframes ispbMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ispScroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}

/* sister-pub latest-5 lists in the rail promos (filled by signal.js) */
.pfeed{list-style:none;margin:10px 0 8px;padding:10px 0 2px;border-top:1px solid var(--ln);display:flex;flex-direction:column;gap:7px}
.pfeed:empty{display:none}
.pfeed a{display:flex;gap:8px;align-items:baseline;font-family:var(--ui);font-size:12.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--ink2)}
.pfeed a:hover{color:var(--acc)}
.pfeed .d{flex:none;font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--ink3)}


/* One-line pointer above the dek, shown only when the story moved after
   this post. Deliberately lighter than .art-wim beside it: this is
   navigation, not judgment. */
.contd{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:14px 0 2px;font-family:var(--mono);font-size:10.5px;line-height:1.6;
}
.contd__k{
  text-transform:uppercase;letter-spacing:.2em;font-size:9px;
  font-weight:600;color:var(--acc2);
}
.contd a{color:var(--ink2);text-decoration:underline;text-underline-offset:2px}
.contd a:hover{color:var(--acc)}

/* .series* rules removed 2026-08-22: the two coverage blocks they styled
   were consolidated into THE TIMELINE, which uses .trail. Left no dead
   selectors behind rather than letting them rot in the stylesheet. */

/* Both trail blocks take the SECOND accent (--acc2), which separates the
   coverage apparatus from --acc — the primary accent carries judgment and
   navigation (.art-wim sits directly above, .kick, .byl .src) and two
   identical blue-ruled blocks stacked read as one repeated element.
   --b1..--b6 were not candidates: those are the channel colours on .tier,
   and borrowing one would collide with network programming. Direction is
   carried by the label, since continuing and later are one system. */
.series--later{border-left-color:var(--acc2)}


/* first-report credit in the byline row — quieter than .src (the source
   count), since the reporter's name carries the emphasis on its own */
.byl .fby a{color:var(--ink2);text-decoration:underline;text-underline-offset:2px}
.byl .fby a:hover{color:var(--ink)}

/* source-trail role chip: the first report is the claim that matters */
.trail .ty.first{color:var(--ink);border-color:currentColor;font-weight:700}

/* timeline: our own signals sit in the accent family so they read as ours
   against the outlets' reports; the current post is the anchor */
.trail .ty.sig{color:var(--acc2);border-color:currentColor}
.trail .ty.self{color:var(--acc);border-color:currentColor;font-weight:700}
.trail li.tl-self .tx{font-weight:700;color:var(--ink)}

/* the outlet a signal was drafted from, trailing its headline in the timeline */
.trail .tl-src{font-style:normal;color:var(--ink3);font-size:9px;letter-spacing:.06em}

/* Channel hero: The Signal's CTV layout at channel scale. The flagship
   should still out-shout a section, so this sits a step below it in height
   and display size. No cast art — the motif plate is the key art, and
   .sigv-t already caps the text at 62% so the field carries the right. */
.chid-hero{min-height:clamp(250px,23vw,340px);margin:0 0 18px}
.chid-hero .sigv-t h1{font-size:clamp(40px,5.4vw,74px)}
.chid-hero .sigv-desc{font-size:clamp(15px,1.25vw,18px);margin:0 0 18px}
.chid-hero .sigv-fmt{margin:20px 0 0}


/* ---- THE BRIDGE: plate to copy (comps option 2, "tighten and align") ----
   With the headline living in the artwork, the plate and the copy beneath it
   read as two unrelated objects — the owner's words, and the reason the comps
   sheet existed. A channel-coloured rule carries the eye out of the plate and
   into the summary, and the gap between them collapses so they read as one
   unit rather than an image with a caption under it.

   This is option 2 COMBINED with option 4 (the plate is ours), which the comps
   presented as alternatives. They are compatible: the rule is purely visual,
   the credit removal is about ownership. Option 2's mock still showed the
   source signed on the plate because it predates that decision; it is not
   coming back. The source credit lives under the summary with the link to the
   original, which is where option 4 put it.

   --ch is the channel's own colour, set on the card/article root. The fallback
   is the accent, so a post with no channel still gets a rule. */
.ch-measurement{--ch:var(--b3)}
.ch-streaming{--ch:var(--b4)}
.ch-ad-tech{--ch:var(--b1)}
.ch-agencies{--ch:var(--b2)}
.ch-retail-media{--ch:var(--b5)}
.ch-creators{--ch:var(--b6)}

/* Collapse the gap the rule is meant to close. */
.t1 .plate{margin-bottom:0}
.t2 .plate{margin-bottom:0}
.art-head .art-plate{margin-bottom:0}

/* DIRECT CHILD, not descendant (2026-09-14). Written `.t1 p`, this rule
   also reached the <p> INSIDE the card's why-block, which already wears the
   feed's 3px accent rule -- so the hero's WHY IT MATTERS carried two
   vertical rules, one in the channel colour and one in the accent. Owner:
   "does not need two vertical rules. One is good." The bridge is for the
   summary that follows the plate and nothing else. */
.t1 > p,
.t2 > p,
.art-head .dek{margin-top:0;padding-top:13px;padding-left:11px;border-left:2px solid var(--ch,var(--acc))}

/* When the plate is too small to carry the headline the heading un-hides and
   sits between the plate and the dek, so it joins the rule rather than
   breaking it — otherwise the line would start halfway down the card. */
.t1 h2.shown,
.t2 h3.shown,
.art-head h1.shown{margin-top:0;padding-top:13px;padding-left:11px;border-left:2px solid var(--ch,var(--acc))}
.t1 h2.shown + p,
.t2 h3.shown + p,
.art-head h1.shown + .dek{padding-top:0}