/* Machine Speed — shared design system */
:root{
  --cap:#1f9d7a; --pol:#c98a12; --def:#3f6fd1; --atk:#d15656; --mkt:#8b5cd6;
  --cap-soft:rgba(31,157,122,.12); --pol-soft:rgba(201,138,18,.12);
  --def-soft:rgba(63,111,209,.12); --atk-soft:rgba(209,86,86,.12);
  --mkt-soft:rgba(139,92,214,.12);
}
/* Dark (default) */
:root[data-theme="dark"]{
  --bg:#0e1116; --panel:#161b22; --panel-2:#1b2230; --line:#2a3240;
  --ink:#e8edf4; --ink-2:#aab4c2; --ink-3:#7d8898;
  --accent:#5aa0ff; --accent-soft:#1d2c45; --new:#f0c674;
  --cap:#7bc8b0; --pol:#e2b25a; --def:#8db4ff; --atk:#e88a8a; --mkt:#bda0f0;
  --cap-soft:rgba(123,200,176,.16); --pol-soft:rgba(226,178,90,.16);
  --def-soft:rgba(141,180,255,.16); --atk-soft:rgba(232,138,138,.16);
  --mkt-soft:rgba(189,160,240,.16);
  --shadow:0 1px 0 rgba(255,255,255,.02);
}
/* Light */
:root[data-theme="light"]{
  --bg:#f4f6fa; --panel:#ffffff; --panel-2:#eef1f6; --line:#dce1ea;
  --ink:#17202c; --ink-2:#465262; --ink-3:#78849a;
  --accent:#245fd0; --accent-soft:#e4ecfb; --new:#9a6a00;
  --shadow:0 1px 2px rgba(20,30,50,.05);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:.1px; transition:background .2s,color .2s;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}
a{color:var(--accent); text-decoration:none} a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.wrap{max-width:1180px; margin:0 auto; padding:22px 22px 64px}
/* 22px of gutter either side is 44px of a 390px phone — an eighth of the screen
   spent on margin, and it compounds: inside .wrap sit a card border and the
   card's own padding before any text starts. 16px still keeps the cards clear
   of the bezel and hands back 12px to every line on every page, which is where
   the brief's stage text was running narrowest. */
@media(max-width:600px){.wrap{padding:16px 16px 52px}}
@media(min-width:1400px){.wrap{max-width:1340px; padding:26px 32px 72px}}
@media(min-width:1750px){.wrap{max-width:1560px}}

/* Top nav */
.nav{display:flex; align-items:center; gap:18px; padding:14px 0 18px; border-bottom:1px solid var(--line); margin-bottom:22px; flex-wrap:wrap}
.nav .logo{display:flex; align-items:baseline; gap:10px; margin-right:6px}
.nav .logo b{font-size:19px; letter-spacing:-.3px; color:var(--ink)}
.nav .logo span{font-size:10.5px; text-transform:uppercase; letter-spacing:1.4px; color:var(--ink-3)}
.nav a.link{font-size:13.5px; color:var(--ink-2); padding:5px 2px; border-bottom:2px solid transparent}
.nav a.link:hover{color:var(--ink); text-decoration:none}
.nav a.link.active{color:var(--ink); border-bottom-color:var(--accent)}
.nav .spacer{margin-left:auto}

/* Lane bar — the second nav row.

   The site nav carries the places (board, threads, archive, about); the lane
   bar carries the taxonomy. Splitting them keeps either row from growing past
   the point where it wraps into an unreadable block, and it lets each lane
   link wear its own colour, which the single mixed row could not do. */
.lanebar{display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:0 0 16px; margin:-8px 0 22px; border-bottom:1px solid var(--line)}
.lanebar .lbl{font-size:10.5px; text-transform:uppercase; letter-spacing:1.4px;
  color:var(--ink-3); margin-right:6px}
.lanebar a{font-size:12.5px; font-weight:600; color:var(--ink-2);
  padding:4px 10px; border-radius:6px; border:1px solid transparent}
.lanebar a:hover{text-decoration:none; color:var(--ink); background:var(--panel-2)}
.lanebar a.active{color:var(--ln); background:var(--ln-soft); border-color:var(--ln-soft)}
.lanebar a i{display:inline-block; width:7px; height:7px; border-radius:2px;
  background:var(--ln); margin-right:6px; vertical-align:middle}
@media(max-width:600px){
  .lanebar{gap:4px; padding-bottom:12px}
  .lanebar .lbl{display:none}
  .lanebar a{font-size:12px; padding:4px 8px}
}
.themebtn{background:var(--panel-2); color:var(--ink-2); border:1px solid var(--line); border-radius:20px;
  font-size:12.5px; padding:5px 12px; cursor:pointer; display:inline-flex; gap:6px; align-items:center}
.themebtn:hover{color:var(--ink)}
.themebtn[hidden]{display:none}

/* The masthead on a phone.

   Left alone, the nav wrapped onto three rows at 390px: the wordmark, then the
   links, then the theme button stranded on a line of its own — the auto spacer
   pushes it right, and once the links have filled a row there is nothing left
   for it to share with. Three rows for eight controls is a lot of a small
   screen spent before any content appears.

   The fix is to say which row each thing belongs on rather than leaving it to
   whatever fits. `order` assigns rows explicitly: the wordmark and the theme
   toggle take the first — brand left, toggle right, which is where a reader
   looks for it anyway — and every link takes the second. The toggle loses its
   text label and keeps the icon, so it is a round target roughly 33px square:
   still well over the 24px minimum for a thumb, and small enough that the
   wordmark and its tagline are not squeezed.

   The spacer earns its keep here. Ordering alone is not enough — flex wraps
   wherever the line runs out, so the first link would ride up onto the first
   row beside the toggle. Turned into a zero-height item at 100% width, and
   ordered between the toggle and the links, it consumes the rest of row one and
   forces the break. That is the whole reason it is not simply hidden.

   Two rows, and the second fits at 360px: six links come to about 262px, plus
   five gaps. The gap is what has the slack, so it steps down rather than the
   type. A seventh destination would wrap to a third row again, and the answer
   then is a scrolling link row, not smaller type. */
@media(max-width:600px){
  .nav{gap:14px; row-gap:2px; padding:12px 0 14px; margin-bottom:18px}
  .nav .logo{order:1; margin-right:0}
  .nav .logo b{font-size:18px}
  .nav .themebtn{order:2; margin-left:auto; padding:6px 9px; border-radius:50%}
  .nav .themebtn .lbl{display:none}
  .nav .themebtn .ico{font-size:14px; line-height:1}
  .nav .spacer{order:3; flex:0 0 100%; height:0; margin:0}
  .nav a.link{order:4; font-size:13px}
}
@media(max-width:400px){
  .nav{gap:10px}
}
@media(max-width:380px){
  .nav .logo span{display:none}
}

/* Header block */
h1{font-size:26px; margin:0; font-weight:700; letter-spacing:-.3px; display:flex; align-items:center; gap:12px}
.lanerule{display:inline-block; width:34px; height:4px; border-radius:2px}
.pagehead{margin-bottom:18px}
/* Measure. Typographic advice puts comfortable prose at 60–75 characters, and a
   96ch cap was the compromise here for a while. It still read as truncated: a
   two-sentence introduction stopping two thirds of the way across leaves a void
   down the right of the page that looks like a layout failure rather than like
   restraint. These blocks are two or three sentences, not an article, so they
   now run the full column and .wrap is the only thing bounding them — which is
   what the cap should have been all along, since .wrap already steps 1180 →
   1340 → 1560 with the viewport. To pull them back in, put a max-width here;
   that is the only place the introduction measure is set.
   Anything genuinely paragraph-length — .prose on About — sets its own. */
.pagehead .sub{color:var(--ink-2); font-size:14px; margin-top:5px; max-width:none}
@media(min-width:1400px){.pagehead .sub{font-size:14.5px}}
/* The board's own subtitle is one short line and spans the full column. */
.pagehead .sub.wide{max-width:none; font-size:14.5px}
@media(min-width:1400px){.pagehead .sub.wide{font-size:15px}}
.stamp{display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-size:13.5px;
  background:var(--accent-soft); color:var(--accent); padding:6px 12px; border-radius:20px; font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;background:#39c07f;box-shadow:0 0 0 3px rgba(57,192,127,.18)}
.note{margin-top:12px; font-size:12.5px; color:var(--ink-3); font-style:italic; max-width:98ch}
.note p{margin:0 0 8px; line-height:1.65} .note p:last-child{margin-bottom:0}
.notebox{margin:0 0 30px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow)}
.notebox > summary{cursor:pointer; list-style:none; padding:13px 16px; font-size:12px;
  font-weight:650; letter-spacing:.5px; text-transform:uppercase; color:var(--ink-3)}
.notebox > summary::-webkit-details-marker{display:none}
.notebox > summary::after{content:"+"; float:right; font-size:14px; line-height:1}
.notebox[open] > summary::after{content:"–"}
.notebox > summary:hover{color:var(--ink)}
.notebox[open] > summary{border-bottom:1px solid var(--line)}
.notebox .note{margin:0; padding:14px 16px; max-width:104ch}

/* Section headers */
section.block{margin-bottom:30px}
.blockhead{font-size:13px; text-transform:uppercase; letter-spacing:1.3px; color:var(--ink);
  border-left:3px solid var(--accent); padding-left:10px; margin:0 0 14px}

/* New strip */
.newstrip{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:26px; box-shadow:var(--shadow)}
.newstrip h2{margin:0 0 10px; font-size:12.5px; text-transform:uppercase; letter-spacing:1.4px; color:var(--new)}
.newstrip ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.newstrip li{display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.45}
.newstrip .empty{margin:0; font-size:14px; color:var(--ink-2); line-height:1.55}
.lanepill{flex:none; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; padding:2px 7px; border-radius:5px; margin-top:2px}
.lp-cap{background:var(--cap-soft); color:var(--cap)} .lp-pol{background:var(--pol-soft); color:var(--pol)}
.lp-def{background:var(--def-soft); color:var(--def)} .lp-atk{background:var(--atk-soft); color:var(--atk)}
.lp-mkt{background:var(--mkt-soft); color:var(--mkt)}

/* KPI + charts row */
/* One tile per lane. auto-fit rather than a fixed column count so adding a
   lane never needs a matching CSS edit — the row reflows on its own. */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:26px}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; box-shadow:var(--shadow)}
.stat .n{font-size:26px; font-weight:750; letter-spacing:-.5px}
.stat .l{font-size:11.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--ink-3); margin-top:2px}
.stat .bar{height:3px; border-radius:2px; margin-top:10px}
.charts{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:30px}
@media(max-width:820px){.charts{grid-template-columns:1fr}}
.chartcard{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:var(--shadow)}
.chartcard h3{margin:0 0 12px; font-size:12.5px; text-transform:uppercase; letter-spacing:1px; color:var(--ink-2)}
.hbars{display:flex; flex-direction:column; gap:13px; padding:6px 0 2px}
.hbar{display:grid; grid-template-columns:92px 1fr 26px; align-items:center; gap:10px; font-size:13px}
.hbar .hlabel{color:var(--ink-2)}
.hbar .htrack{background:var(--panel-2); border-radius:6px; height:14px; overflow:hidden}
.hbar .hfill{display:block; height:100%; border-radius:6px; transition:width .4s ease}
.hbar .hval{text-align:right; color:var(--ink); font-weight:650}
.donutwrap{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.donut{width:150px; height:150px; border-radius:50%; flex:none; position:relative}
.donut::after{content:""; position:absolute; inset:27px; border-radius:50%; background:var(--panel)}
.donut .center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:1}
.donut .center b{font-size:23px; font-weight:750; line-height:1}
.donut .center span{font-size:10px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.6px; margin-top:2px}
.dlegend{display:flex; flex-direction:column; gap:8px; font-size:12.5px}
.dlegend .row{display:flex; align-items:center; gap:8px; color:var(--ink-2)}
.dlegend i{width:10px; height:10px; border-radius:3px; flex:none}
.dlegend b{color:var(--ink); margin-left:3px}

/* Lanes */
.lanes{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-bottom:30px; align-items:start}
.lanes-single{grid-template-columns:1fr}
@media(max-width:820px){.lanes{grid-template-columns:1fr}}
.lane{background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow)}
.lane > h3{margin:0; padding:13px 16px; position:sticky; top:0; z-index:3; font-size:13px; text-transform:uppercase; letter-spacing:1.2px;
  display:flex; align-items:center; gap:9px; border-bottom:1px solid var(--line); background:var(--panel-2)}
.lane > h3 .barv{width:3px; height:15px; border-radius:2px}
.lane > h3 .count{margin-left:auto; font-size:11px; color:var(--ink-3); letter-spacing:.4px}
.lane > h3 a.more{margin-left:8px; font-size:11px; letter-spacing:.3px; text-transform:none}
.item{padding:14px 16px; border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:none}
.item:target{background:var(--accent-soft)}
.item h4{margin:0 0 5px; font-size:15px; line-height:1.35; font-weight:650}
.item p{margin:0 0 8px; font-size:13.5px; color:var(--ink-2); line-height:1.5}
.meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px}
.conf{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:2px 7px; border-radius:5px}
.c-confirmed{background:var(--cap-soft); color:var(--cap)} .c-claimed{background:var(--atk-soft); color:var(--atk)}
.c-researchers{background:var(--def-soft); color:var(--def)} .c-press{background:var(--def-soft); color:var(--def)}
.c-on-record{background:var(--pol-soft); color:var(--pol)}
.c-self-reported{background:var(--atk-soft); color:var(--atk)}
/* Retired 2026-08-06, deliberately still here: the frozen archive snapshots from
   before the rename carry .c-official / .c-vendor in their markup and load this
   same stylesheet. Deleting these two rules would silently strip the colour off
   every confidence pill in the back catalogue. */
.c-official{background:var(--pol-soft); color:var(--pol)}
.c-vendor{background:var(--atk-soft); color:var(--atk)}
.badge-new{font-size:9.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--new); border:1px solid var(--new); border-radius:5px; padding:1px 6px}
.src{color:var(--ink-3)} .src a{color:var(--ink-2)}

/* Tables */
table{width:100%; max-width:100%; table-layout:fixed; border-collapse:collapse; font-size:13.5px; background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow)}
th,td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--ink-3); background:var(--panel-2)}
tr:last-child td{border-bottom:none}
th,td{overflow-wrap:anywhere}
th:nth-child(1){width:28%} th:nth-child(3){width:16%}
td.thread{font-weight:600} td.when{color:var(--ink-3)}
@media(max-width:640px){th,td{padding:9px 10px; font-size:12.5px}}
/* Below ~600px three columns squeeze the status text into a ribbon, so the
   watchlist stacks: one card per thread, date demoted to a footer line. */
@media(max-width:600px){
  .watch,.watch tbody,.watch tr,.watch td{display:block; width:auto}
  .watch{table-layout:auto}
  .watch thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .watch tr{padding:12px 14px; border-bottom:1px solid var(--line)}
  .watch tr:last-child{border-bottom:none}
  .watch td{padding:0; border:none}
  .watch td.thread{font-size:14px; margin-bottom:4px}
  .watch td.status{color:var(--ink-2); line-height:1.55}
  .watch td.when{margin-top:6px; font-size:11px; text-transform:uppercase; letter-spacing:.7px}
  .watch td.when::before{content:"Last changed "}
}

/* Sources */
ol.sources{margin:0; padding-left:22px; font-size:12.5px; color:var(--ink-2); columns:2; column-gap:34px}
@media(min-width:1400px){ol.sources{columns:3; column-gap:30px}}
@media(max-width:720px){ol.sources{columns:1}}
ol.sources li{margin:0 0 8px; break-inside:avoid; line-height:1.45}
ol.sources .outlet{color:var(--ink-3)}

/* Prose (about)
   A few short paragraphs set to a 74ch measure left three quarters of a wide
   page empty and read as though the text had been cut off. Widening the measure
   alone would only trade one problem for another — a 140-character line is
   genuinely hard to read — so on a wide screen the paragraphs run in two
   columns instead, the same device the sources list already uses. Each column
   keeps a comfortable measure and the page stops looking half-finished.
   Below 1120px it reverts to a single column, where the measure is the
   viewport's problem rather than ours. */
.prose{max-width:78ch}
.prose p{color:var(--ink-2); font-size:14.5px; break-inside:avoid}
.prose h2{font-size:17px; margin:26px 0 8px}
.prose code{background:var(--panel-2); padding:1px 5px; border-radius:4px; font-size:13px}
@media(min-width:1120px){
  .prose{max-width:none; columns:2; column-gap:52px}
  .prose > :first-child{margin-top:0}
  .prose h2{column-span:all}
}
/* About is two paragraphs. A third column at 1750px was right when this page ran
   five paragraphs deep; with two it would stand empty, which reads worse than a
   wide measure does. So the column count stays at two and the type grows instead
   — the measure comes back down because the character is wider, not because the
   column is narrower, and no part of the page is left unused. If About ever gets
   long again, restore `columns:3` here and drop the size steps. */
@media(min-width:1400px){.prose p{font-size:15.5px}}
@media(min-width:1750px){.prose{column-gap:60px} .prose p{font-size:16.5px}}

/* Archive */
.arch{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px}
.arch a{display:block; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:var(--shadow)}
.arch a:hover{border-color:var(--accent); text-decoration:none}
.arch .d{display:block; font-size:15px; font-weight:650; color:var(--ink)}
.arch .m{display:block; font-size:12px; color:var(--ink-3); margin-top:4px}

footer{margin-top:34px; border-top:1px solid var(--line); padding-top:16px; font-size:12.5px; color:var(--ink-3)}
.legend{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; font-size:11.5px; color:var(--ink-3)}
.legend span{display:inline-flex; align-items:center; gap:5px}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
/* Trademark mark. Raised and reduced by hand rather than with <sup>, which
   would add leading to the footer line. */
.tm{font-size:.68em; vertical-align:super; line-height:0; margin-left:1px; letter-spacing:.2px}

/* Screen-reader-only utility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------------------
   Substack subscribe. Rendered only when SUBSTACK_URL is set in build.py.
   --------------------------------------------------------------------------- */
.subscribe p{margin:0 0 14px; color:var(--ink-2); max-width:78ch; line-height:1.6}
.subbtn{display:inline-block; background:var(--accent); color:#fff; font-weight:600;
  padding:10px 20px; border-radius:8px; font-size:14px}
.subbtn:hover{text-decoration:none; filter:brightness(1.08)}
:root[data-theme="light"] .subbtn{color:#fff}
.nav a.link.sub-link{color:var(--accent); font-weight:600}

/* ---------------------------------------------------------------------------
   Week headings inside a lane. The board covers a stated period rather than a
   rolling week, so a lane can run to a dozen items; these break it into
   scannable chunks and give the eye a fixed rhythm on a tall desktop column.
   --------------------------------------------------------------------------- */
.weekhead{
  margin:0; padding:7px 16px; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:1.1px; color:var(--ink-3);
  background:var(--panel-2); border-bottom:1px solid var(--line);
  border-top:1px solid var(--line); display:flex; align-items:center; gap:8px;
  position:sticky; top:41px; z-index:2;
}
.weekhead:first-of-type{border-top:none}
.weekhead span{
  margin-left:auto; font-weight:650; color:var(--ink-2); background:var(--panel);
  border:1px solid var(--line); border-radius:20px; padding:0 8px; letter-spacing:.4px;
}

/* Stamp row — "last updated" and "covering" sit side by side on desktop and
   stack on a phone. */
.stamprow{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:14px}
.stamprow .stamp{margin-top:0}
.stamp.cov{background:var(--panel-2); color:var(--ink-2); font-weight:600}
.stamp.cov time{color:var(--ink); font-weight:700}

/* The 48-hour strip runs two-up once there is room for it. */
@media(min-width:1100px){.newstrip ul{grid-template-columns:1fr 1fr; column-gap:28px}}

/* Wide desktop: four KPI cards get some air, and the lane grid keeps its two
   columns rather than sprawling to four — two columns of readable measure beats
   four columns of narrow ones. */
@media(min-width:1400px){
  .stats{gap:18px}
  .charts{gap:20px}
  .lanes{gap:22px}
  .item{padding:15px 18px}
  .item h4{font-size:15.5px}
  .item p{font-size:14px}
  .lane > h3{padding:14px 18px}
  .weekhead{padding:8px 18px}
}

/* Print / no-CSS safety: sticky headers must not overlap in a paged context. */
@media print{
  .lane > h3,.weekhead{position:static}
  .nav .themebtn{display:none}
}

/* ---------------------------------------------------------------------------
   Week pages and the compressed running list.

   The board keeps a growing period on one page, which is the point of it — but
   past a few weeks the front page turns into a wall. So the front page prints
   the recent weeks as full cards and everything older as one line per item,
   each line linking into that week's own page where the full card lives.
   --------------------------------------------------------------------------- */

/* Intro line under a section header. */
.lede{margin:-4px 0 16px; font-size:13px; color:var(--ink-3); max-width:none; line-height:1.6}

/* The compressed index of older weeks. */
.older .wkgroup{margin-bottom:22px}
.older .wkgroup:last-child{margin-bottom:0}
.older .wkgroup > h3{
  display:flex; align-items:baseline; gap:10px; margin:0 0 8px;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1.1px;
  border-bottom:1px solid var(--line); padding-bottom:7px;
}
.older .wkgroup > h3 a{color:var(--ink)}
.older .wkgroup > h3 span{
  margin-left:auto; font-size:11px; font-weight:600; letter-spacing:.4px;
  text-transform:none; color:var(--ink-3);
}
ul.mini{list-style:none; margin:0; padding:0; display:grid; gap:2px}
ul.mini li{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:9px;
  padding:6px 8px; border-radius:7px; font-size:13.5px; line-height:1.45;
}
ul.mini li:hover{background:var(--panel-2)}
ul.mini .lanepill{margin-top:2px}
ul.mini .h{flex:1 1 340px; color:var(--ink); font-weight:550; padding-right:10px}
ul.mini .m{flex:none; font-size:11.5px; color:var(--ink-3); white-space:nowrap; padding-top:2px}
ul.mini .m a{color:var(--ink-3)}
@media(min-width:1400px){ul.mini li{font-size:14px}}
@media(max-width:600px){
  ul.mini li{gap:6px}
  ul.mini .h{flex:1 1 100%; order:2}
  ul.mini .m{order:3; flex:1 1 100%; white-space:normal}
}

/* Previous / next week, above and below a week page. */
.pager{
  display:flex; align-items:center; gap:12px; margin:0 0 24px;
  font-size:12.5px; font-weight:600;
}
.pager + .lanes{margin-top:0}
.pager .prev,.pager .next{flex:1 1 0; min-width:0}
.pager .next{text-align:right}
.pager .idx{
  flex:none; color:var(--ink-3); text-transform:uppercase; letter-spacing:.9px; font-size:11px;
  border:1px solid var(--line); border-radius:20px; padding:5px 12px; background:var(--panel);
}
.pager .idx:hover{color:var(--ink); border-color:var(--accent); text-decoration:none}
footer + .pager{margin:0}
.lanes + .pager,section.block + .pager{margin-top:4px; margin-bottom:30px}
@media(max-width:600px){
  .pager{flex-wrap:wrap; gap:8px}
  .pager .prev,.pager .next{flex:1 1 100%; text-align:left}
  .pager .idx{order:3; margin:2px auto 0}
}

/* ---------------------------------------------------------------------------
   Dossiers — one incident, in dated stages.

   A lane card answers "what happened today". A dossier answers "how did this
   thing unfold", which needs a different shape: an ordered spine of stages,
   each one carrying its own sources and its own confidence label, so a reader
   can see the difference between what an organisation confirmed on day one and
   what the press reconstructed a week later. Contested figures get a visible
   flag rather than a silent choice between two numbers.
   --------------------------------------------------------------------------- */

/* Index of briefs */
.dgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px}
/* With one brief on the board, auto-fill still lays out three tracks and the
   card occupies the first — which looks like two cards failed to load rather
   than like there is one brief. A lone card takes the whole row instead. It was
   briefly capped at 760px, which fixed the "failed to load" reading but left
   the right half of the page empty; the card being the full width of the column
   is what actually makes it read as the subject of the page. The summary inside
   it is two sentences, so it takes the card's width rather than a measure of
   its own — a cap there would only move the empty space inside the border. */
.dgrid:has(> :only-child){grid-template-columns:1fr}
.dcard{
  display:block; background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px 15px; box-shadow:var(--shadow); border-left:3px solid var(--ln);
}
.dcard:hover{text-decoration:none; border-color:var(--ln)}
.dcard .top{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px}
.dcard h3{margin:0 0 6px; font-size:16px; letter-spacing:-.2px; color:var(--ink); line-height:1.35}
.dcard p{margin:0 0 10px; font-size:13.5px; color:var(--ink-2); line-height:1.5}
.dcard .foot{font-size:11.5px; color:var(--ink-3); display:flex; gap:10px; flex-wrap:wrap}
.dstatus{
  flex:none; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
  padding:2px 7px; border-radius:5px; background:var(--panel-2); color:var(--ink-2);
  border:1px solid var(--line);
}
.dstatus.open{background:var(--atk-soft); color:var(--atk); border-color:transparent}

/* The timeline itself */
.tl{position:relative; margin:0; padding:0 0 0 26px; list-style:none}
.tl::before{
  content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px;
  background:var(--line); border-radius:2px;
}
.tl > li{position:relative; padding:0 0 22px}
.tl > li:last-child{padding-bottom:2px}
.tl > li::before{
  content:""; position:absolute; left:-26px; top:5px; width:14px; height:14px;
  border-radius:50%; background:var(--bg); border:3px solid var(--ln);
}
.tl .when{
  display:block; font-size:11.5px; font-weight:700; letter-spacing:.7px;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:3px;
}
.tl h3{margin:0 0 5px; font-size:15.5px; letter-spacing:-.2px; line-height:1.4; color:var(--ink)}
.tl p{margin:0 0 8px; font-size:14px; line-height:1.55; color:var(--ink-2)}
.tl .meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:11.5px}
.tl .meta .src a{color:var(--ink-3)}
.tl .meta .src a:hover{color:var(--accent)}

/* A contested figure. Shown, not resolved silently. */
.flag{
  margin:8px 0 0; padding:9px 12px; border-radius:8px; font-size:12.5px; line-height:1.5;
  background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--new);
  color:var(--ink-2);
}
.flag b{color:var(--ink); font-weight:650}

/* Brief page head. Held to the width of the act panels below it so the
   summary and the first panel share a left and a right edge. */
.dhead .sub{max-width:860px}
.dmeta{display:flex; gap:18px; flex-wrap:wrap; font-size:12px; color:var(--ink-3); margin-top:10px}
.dmeta b{color:var(--ink-2); font-weight:600}

/* ---- Act panels ---------------------------------------------------------
   The alternative reading of a brief: instead of one undifferentiated
   timeline, a stack of numbered panels, each answering one question, with a
   downward arrow between them. Two acts can share a row when they are two
   answers to the same question — two companies' positions, say — and the
   split row is what makes that comparison legible. Below 860px the split
   collapses to one column, because two 300px panels of prose is worse than
   reading them in sequence.

   Nothing here carries content: the panels are built from the same stages the
   timeline renders, so this file can be edited freely without a fact moving.

   Width is the one thing the panels cannot inherit from the page. A split row
   is self-limiting — two columns of a wide container are each still readable —
   but a solo panel would stretch to whatever the container gives it, and at
   1560px that is a 155-character line where the reference design sets about 90.
   Side by side the two looked like different components. The cap below is what
   makes a solo panel and one half of a split row read at the same rhythm, and
   it is the number to change if the panels ever want to be wider or narrower;
   nothing else depends on it. */
.actrow{
  position:relative; display:grid; grid-template-columns:1fr; gap:16px;
  margin-bottom:34px; max-width:860px;
}
.actrow.split{grid-template-columns:1fr 1fr}
.actrow:last-child{margin-bottom:0}
/* The arrow between rows. On the row itself rather than between them, so it
   cannot end up orphaned under the final panel. */
.actrow:not(:last-child)::after{
  content:"↓"; position:absolute; left:0; right:0; bottom:-26px; text-align:center;
  font-size:15px; line-height:1; color:var(--ink-3);
}
.act{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  border-left:3px solid var(--ln); padding:16px 20px 6px; box-shadow:var(--shadow);
}
.acthead{display:flex; align-items:baseline; gap:9px; margin-bottom:7px}
.actnum{
  flex:none; font-size:11px; font-weight:800; letter-spacing:.4px; color:var(--ln);
}
/* Separator between the number and the kind, drawn rather than written so the
   number stays on its own in the markup and in a screen reader's output. */
.actnum::after{content:" ·"; opacity:.55}
.actkind{
  flex:1 1 auto; font-size:10.5px; font-weight:750; text-transform:uppercase;
  letter-spacing:1px; color:var(--ln);
}
.actwhen{flex:none; font-size:11.5px; color:var(--ink-3); white-space:nowrap}
.act > h3{
  margin:0 0 12px; font-size:18px; line-height:1.35; letter-spacing:-.3px; color:var(--ink);
}
.act .actnote{margin:0 0 12px}
.pts{margin:0; padding:0; list-style:none}
.pts > li{
  position:relative; padding:0 0 13px 15px; margin-bottom:13px;
  border-bottom:1px solid var(--line); font-size:14px; line-height:1.6; color:var(--ink-2);
}
.pts > li:last-child{border-bottom:0}
.pts > li::before{
  content:""; position:absolute; left:0; top:7px; width:6px; height:6px;
  border-radius:50%; background:var(--ln);
}
/* A folded-in board item: the same fact, filed elsewhere, shown hollow so the
   distinction between "this brief reported it" and "the board already had it"
   survives the layout. */
.pts > li.fold::before{background:transparent; border:1.5px solid var(--ln)}
.pts .pwhen{
  display:block; font-size:11px; font-weight:700; letter-spacing:.7px;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:2px;
}
.pts b{color:var(--ink); font-weight:650}
.pts .meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
           font-size:11.5px; margin-top:6px}
.pts .meta .src a{color:var(--ink-3)}
.pts .meta .src a:hover{color:var(--accent)}
.pts .flag{font-size:12px}

@media(max-width:860px){
  .actrow.split{grid-template-columns:1fr}
}
@media(max-width:600px){
  /* The stage timeline, without the rail.

     This is the layout a brief falls back to when it has no acts. The vertical
     rail and its 26px indent are what make such a brief read as a sequence on a
     laptop; on a phone they are 26px of a 358px column spent on a gutter, and
     every stage description sets in a ribbon to the right of it.

     So below 600px the rail comes off and the sequence is carried by a hairline
     between stages plus the lane-coloured dot moved inline, ahead of the date
     label — the same two signals, costing nothing but themselves. The stage
     text starts at the left edge and takes the full column. The first stage
     drops its top rule and padding so the list still begins flush with
     everything above it. */
  .tl{padding-left:0}
  .tl::before,
  .tl > li::before{display:none}
  .tl > li{padding:15px 0 17px; border-top:1px solid var(--line)}
  .tl > li:first-child{padding-top:0; border-top:0}
  .tl .when{display:flex; align-items:center; gap:7px}
  .tl .when::before{content:""; flex:none; width:9px; height:9px;
    border-radius:50%; background:var(--ln)}

  .dgrid{grid-template-columns:1fr}
  .act{padding:14px 16px 4px}
  .acthead{flex-wrap:wrap; gap:6px}
  .actwhen{width:100%}
}

/* Display face — headlines only
   ----------------------------------------------------------------------------
   Newsreader is built for screen reading at small sizes, which is what the
   board is: a page skimmed for what changed. It runs on headline text only —
   page titles, item headlines, the compressed index, brief and act headings —
   while every label, count, table header and body paragraph stays on the UI
   sans. The uppercase micro-labels (.blockhead, .weekhead, .lane > h3) are
   deliberately left alone: at 13px, letterspaced and capitalised, a serif
   reads as decoration rather than hierarchy.

   Weights step down as size does — a serif at 700 next to 13.5px body copy is
   heavier than the page needs, and Newsreader's 600 holds its own at 15px.
   Set --display to inherit and every rule below falls back to the sans. */
:root{--display:"Newsreader",Georgia,"Times New Roman",serif}

h1{font-family:var(--display); font-weight:500; font-size:29px; letter-spacing:-.4px}
/* The masthead carries the display face too. Without it the serif shows up only
   in the headline under a sans wordmark, which reads as a mismatch rather than
   as the publication's voice. */
.nav .logo b{font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:-.3px}
/* Header metadata is metadata: one quiet line, not two filled pills competing
   with the headline they sit under. */
.pagehead.board{margin-bottom:6px}
/* The landing page states its claim in one line rather than a display headline:
   a board someone opens daily does not need a poster over it, but dropping the
   thesis entirely would leave a feed with no position. */
.pagehead.board.nohead .stampline{margin-top:0}
.thesis{font-family:var(--display); font-size:17px; line-height:1.4; font-weight:400;
  color:var(--ink-2); margin:0 0 8px; max-width:60ch}

/* Compact subscribe — one row, card language, for the foot of the board. */
.block.subscribe.compact{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:14px 18px; margin:18px 0 0; box-shadow:var(--shadow)}
.block.subscribe.compact .blockhead{margin:0; border-left:0; padding-left:0;
  font-size:11px; letter-spacing:1.2px; white-space:nowrap}
.block.subscribe.compact p{margin:0; flex:1; min-width:220px; max-width:none;
  font-size:13.5px; color:var(--ink-2)}
.block.subscribe.compact .subbtn{flex:none; margin:0; font-size:13px; padding:9px 15px}
@media(max-width:620px){
  .block.subscribe.compact{gap:10px}
  .block.subscribe.compact p{flex:1 1 100%}
}
@media(max-width:600px){.thesis{font-size:16px}}
.stampline{display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:10px 0 0;
  font-size:12px; color:var(--ink-3); letter-spacing:.2px}
.stampline time{color:var(--ink-2); font-weight:600}
.stampline .dot{margin-right:2px}
@media(max-width:600px){h1{font-size:24px}}
.item h4{font-family:var(--display); font-weight:600; font-size:16px; line-height:1.3}
ul.mini .h{font-family:var(--display); font-weight:500; font-size:15px}
.arch .d{font-family:var(--display); font-weight:600}
.dcard h3, .tl h3, .act > h3{font-family:var(--display); font-weight:600; letter-spacing:-.1px}
.newstrip li > span{font-family:var(--display); font-size:15px}

/* Forecasts page (forecasts.py). A forecast card is a board card with the
   probability pulled out to the left, so the number reads before the question. */
.fc-list .item.fc{display:grid; grid-template-columns:64px 1fr; gap:14px; align-items:start}
.fc-list .item.fc:last-child{border-bottom:0}
.fc-p{font-size:22px; font-weight:750; letter-spacing:-.4px; color:var(--accent); line-height:1.1;
  font-variant-numeric:tabular-nums; padding-top:1px}
.fc-main h4{display:flex; gap:8px; align-items:flex-start}
.fc-main .meta{display:block; font-size:12.5px; line-height:1.55}
.fc-why{font-size:13px !important}
.fc-verdict{margin-top:9px; display:inline-block; font-size:11px; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; padding:3px 8px; border-radius:5px}
.fc-verdict a{color:inherit; text-decoration:underline}
.fc-yes{background:var(--cap-soft); color:var(--cap)}
.fc-no{background:var(--atk-soft); color:var(--atk)}
.fc-void{background:var(--panel-2); color:var(--ink-3)}
.fc-list > .lede{padding:14px 16px; margin:0}
@media(max-width:600px){.fc-list .item.fc{grid-template-columns:1fr; gap:4px}}
.fc-cal th:nth-child(1),.fc-cal th:nth-child(3){width:auto}
.fc-cal th{overflow-wrap:normal; letter-spacing:.3px}

/* Findings layer (insights.py). Chart marks use their own tokens: the dark
   theme's lane colours are tuned for text-sized pills and read as pastel at
   mark size, so marks take a deeper step, validated against the dark panel
   (CVD and normal-vision separation, contrast). Light marks are the lane colours. */
:root{--cap-mark:var(--cap); --pol-mark:var(--pol); --def-mark:var(--def); --atk-mark:var(--atk); --mkt-mark:var(--mkt)}
:root[data-theme="dark"]{--cap-mark:#2a9f7c; --pol-mark:#c4841a; --def-mark:#5a86e0; --atk-mark:#d65c5c; --mkt-mark:#9170dc}
.stat .d{font-size:12px; color:var(--ink-3); margin-top:6px}
.footlinks{margin-top:10px; font-size:12.5px} .footlinks a{color:var(--ink-2)}
.ms-multiples{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px}
.ms-mini{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px 10px; box-shadow:var(--shadow)}
.ms-mhead{display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:650; color:var(--ink-2); margin-bottom:10px}
.ms-mhead b{margin-left:auto; color:var(--ink); font-variant-numeric:tabular-nums}
.ms-mhead .sw,.ms-legend i{width:9px; height:9px; border-radius:2px; display:inline-block}
.ms-cols{display:flex; align-items:flex-end; gap:2px; height:92px; border-bottom:1px solid var(--line)}
.ms-col{flex:1; max-width:24px; height:100%; display:flex; align-items:flex-end; cursor:default}
.ms-col i{display:block; width:100%; min-height:1px; background:var(--c); border-radius:4px 4px 0 0}
.ms-col:hover i{filter:brightness(1.15)}
.ms-col.partial i{opacity:.4}
.ms-axis{display:flex; justify-content:space-between; font-size:10.5px; color:var(--ink-3); margin-top:5px}
.ms-table{margin:14px 0 0} .ms-table table{border:0; border-radius:0; box-shadow:none}
.ms-legend{display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--ink-2); margin:10px 0 0}
.ms-legend span{display:inline-flex; align-items:center; gap:6px} .ms-legend i{border-radius:50%}
.lagwrap{overflow-x:auto; border-radius:12px}
.lagtab{min-width:760px; table-layout:auto}
.lagtab th,.lagtab td{padding:10px 12px}
.lagtab th[scope=row]{font-weight:600; font-size:13px; width:26%}
.lagtab th[scope=row] small{display:block; font-weight:400; color:var(--ink-3); font-size:11.5px; margin-top:2px}
.lagtab .num{text-align:right; white-space:nowrap; width:1%; font-variant-numeric:tabular-nums}
.lagtab td.open{color:var(--ink-3)} .lagtab td.open small{font-size:11px}
.lagtab .ahead{color:var(--ink-3); cursor:help}
.lagtab .strip{width:44%; position:relative}
.lagtab .track{position:relative; display:block; height:14px; border-bottom:1px solid var(--line)}
.lagtab .track i{position:absolute; top:3px; width:8px; height:8px; margin-left:-4px; border-radius:50%;
  box-shadow:0 0 0 2px var(--panel); cursor:default}
.lagtab .track i.resp{border-radius:2px}
.lagtab .track i:hover{transform:scale(1.5); z-index:2}
.lagtab .months{position:relative; display:block; height:14px}
.lagtab .months span{position:absolute; font-size:10.5px; transform:translateX(-50%)}
.conftab{min-width:640px; table-layout:auto} .conftab .num{text-align:right}
.conftab th:nth-child(1){width:auto}
.arch .wt{font-weight:500; color:var(--ink-3); font-size:11.5px}
.corr td.when{white-space:nowrap; width:1%} .corr p{margin:6px 0 0; color:var(--ink-2); line-height:1.55}
@media(max-width:600px){.ms-multiples{grid-template-columns:1fr 1fr}}
.lagtab th[scope=row],.conftab th[scope=row]{text-transform:none; letter-spacing:normal; color:var(--ink); background:var(--panel)}
.conftab th[scope=row]{font-weight:600; font-size:13px}
/* On a phone the lag table keeps what it is for — thread, policy, defense —
   and drops the markets column and the timeline strip rather than scroll. */
@media(max-width:640px){
  .lagtab{min-width:0}
  .lagtab .strip,.lagtab th:nth-child(4),.lagtab td:nth-child(4){display:none}
  .lagtab th[scope=row]{width:auto}
}
.corr{table-layout:auto} .corr td.when{color:var(--ink-3); font-size:12.5px; padding-right:4px}
@media(max-width:600px){.corr td.when{white-space:normal; width:5.5em}}

/* Front page and topic pages (layers.py): This week, the search box, topics
   and one card per week. */
.thisweek .picks{margin:0}
.thisweek .more{display:inline-block; margin-top:12px; font-size:13.5px; font-weight:600}
.picks{list-style:none; margin:0 0 30px; padding:0; display:grid; gap:12px}
.pick{display:grid; grid-template-columns:34px 1fr; gap:12px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:14px 16px; box-shadow:var(--shadow)}
.pick.nopn{grid-template-columns:1fr}
.pick > div{min-width:0}
.pn{font-family:var(--display); font-size:24px; line-height:1; color:var(--ink-3); font-variant-numeric:tabular-nums}
.ph{display:block; font-weight:650; font-size:15px; color:var(--ink); line-height:1.4}
.pw{margin:6px 0 8px; color:var(--ink-2); font-size:14px; line-height:1.55; max-width:95ch}
.pm{display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px; color:var(--ink-3)}
.homesearch{display:grid; gap:8px; margin:0 0 30px; padding:16px; background:var(--panel-2);
  border:1px solid var(--line); border-radius:12px}
.homesearch label{font-size:12px; font-weight:650; text-transform:uppercase; letter-spacing:1px; color:var(--ink-2)}
.homesearch div{display:flex; gap:8px}
.homesearch input[type=search]{flex:1; min-width:0; font:inherit; font-size:15px; padding:10px 12px; color:var(--ink);
  background:var(--panel); border:1px solid var(--line); border-radius:8px}
.homesearch input[type=search]:focus{outline:2px solid var(--accent); outline-offset:1px}
.homesearch button{font:inherit; font-weight:650; font-size:14px; padding:0 16px; border-radius:8px; cursor:pointer;
  color:var(--bg); background:var(--accent); border:0}
.homesearch button:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.topics{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px}
.topic{display:grid; gap:4px; min-width:0; padding:12px 14px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; color:inherit}
.topic:hover,.topic:focus-visible{border-color:var(--accent); text-decoration:none; outline:none}
.topic .tn{display:flex; align-items:baseline; gap:8px; font-weight:650; font-size:14.5px; color:var(--ink)}
.topic .tn b{margin-left:auto; font-weight:600; font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.topic .td{font-size:13px; line-height:1.5; color:var(--ink-2)}
.wgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px}
.wcard{display:flex; flex-direction:column; gap:9px; min-width:0; padding:14px 16px; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); color:inherit}
.wcard:hover,.wcard:focus-visible{border-color:var(--accent); text-decoration:none; outline:none}
.wcard .wt{display:flex; align-items:baseline; gap:8px; font-family:var(--display); font-size:18px; color:var(--ink)}
.wcard .wt b{margin-left:auto; font-family:inherit; font-size:12px; font-weight:600; color:var(--ink-3)}
.wbar{display:flex; gap:2px; height:6px}
.wbar i{display:block; border-radius:2px; min-width:3px}
.wkey{font-size:11.5px; color:var(--ink-3)}
.wcard .wl{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--ink-3)}
.wcard ul{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.wcard li{display:flex; align-items:flex-start; gap:8px; font-size:13.5px; line-height:1.4; color:var(--ink-2)}
.wcard li span:last-child{min-width:0}
.wcard .wgo{margin-top:auto; padding-top:4px; font-size:13px; font-weight:600; color:var(--accent)}
.tlist .weekhead{top:0}
.crows{list-style:none; margin:0; padding:2px 0 8px; border-bottom:1px solid var(--line)}
.crows:last-child{border-bottom:0}
.crow{display:grid; grid-template-columns:52px auto 1fr; gap:10px; align-items:baseline; padding:6px 16px; font-size:13.5px}
.crow time{color:var(--ink-3); font-size:12px; font-variant-numeric:tabular-nums}
.crow a{color:var(--ink-2)} .crow a:hover{color:var(--ink)}
.crow.key a{color:var(--ink); font-weight:600}
.crow .lanepill{margin-top:0}
.topics.wide{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
@media(max-width:600px){
  .wgrid,.topics,.topics.wide{grid-template-columns:1fr}
  .crow{grid-template-columns:46px 1fr; row-gap:4px} .crow a{grid-column:1 / -1}
  .pick{grid-template-columns:24px 1fr; gap:10px}
}
.pick.nopn .pw{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.topic{align-content:start}
.wcard .wt b{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.thisweek{margin-top:22px}
.crow .lanepill{justify-self:start}
/* This week banner (layers.py + home.js), on Explore's carousel chrome. */
.hcar{--car-mark:var(--new)}
.hcar .msx-carnav,.hcar .msx-carthumbs,.hcar .msx-carticks{display:none}
.hcar.js .msx-carnav{display:flex}
.hcar.js .msx-carticks{display:flex}
.hcar.js .msx-carthumbs{display:grid}
.hcar:not(.js) .hcar-slides .msx-carslide + .msx-carslide{border-top:1px solid var(--x-hair)}
.hcar .msx-carticks i{flex:1; background:var(--x-line)}
.hcar .msx-carticks i.on{flex:2; background:var(--ln)}
.hcar .why{font-weight:650; color:var(--x-ink)}
.thisweek .more{margin-top:12px}
@media(max-width:640px){.hcar.js .msx-carthumbs{display:none}}
.hcar .msx-carslide[hidden]{display:none}
/* Header search and the search page (layers.py, search.js). */
.navsearch{display:flex; margin-right:4px}
.navsearch input{width:190px; font:inherit; font-size:13px; padding:6px 10px; color:var(--ink);
  background:var(--panel); border:1px solid var(--line); border-radius:20px}
.navsearch input:focus{outline:2px solid var(--accent); outline-offset:1px; width:240px}
@media(max-width:700px){.navsearch{order:10; flex-basis:100%; margin:4px 0 0} .navsearch input,.navsearch input:focus{width:100%}}
.bigsearch{display:grid; gap:10px; margin:0 0 14px}
.bigsearch input{font:inherit; font-size:16px; padding:11px 14px; color:var(--ink); background:var(--panel);
  border:1px solid var(--line); border-radius:10px}
.bigsearch input:focus{outline:2px solid var(--accent); outline-offset:1px}
.schips{display:flex; flex-wrap:wrap; gap:8px}
.schip{display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:12.5px; font-weight:600; color:var(--ink-2);
  background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:5px 11px; cursor:pointer}
.schip i{width:8px; height:8px; border-radius:50%}
.schip[aria-pressed="true"]{color:var(--ink); border-color:var(--accent); background:var(--accent-soft)}
.scount{color:var(--ink-3); font-size:13px; margin:0 0 12px}
.sresults{list-style:none; margin:0 0 30px; padding:0; display:grid; gap:10px}
.sres{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:13px 16px; min-width:0}
.sres .sm{display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px; color:var(--ink-3); margin-bottom:6px}
.sres .sm .lanepill{margin-top:0}
.sres .stop{color:var(--ink-2)}
.sres .sh{display:block; font-weight:650; font-size:15px; color:var(--ink); line-height:1.4}
.sres .sc{margin:6px 0; color:var(--ink-2); font-size:13.5px; line-height:1.55}
.sres .ss{font-size:12px; color:var(--ink-3)} .sres .ss a{color:var(--ink-2)}
.sres mark{background:var(--accent-soft); color:inherit; border-radius:2px; padding:0 1px}
.wcard2 .ws{font-size:13px; line-height:1.5; color:var(--ink-2); border-top:1px solid var(--line); padding-top:8px; margin-top:4px}
.wcard2 .ws b{color:var(--ink); font-weight:600}
.wcard2 .wgo{font-size:13px; font-weight:600; color:var(--accent); margin-top:2px}
.blockhead a{text-transform:none; letter-spacing:0; font-weight:600}
.topics.wide{margin-bottom:30px}
.awlist{background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.aw{border-bottom:1px solid var(--line)} .aw:last-child{border-bottom:0}
.aw summary{display:flex; align-items:baseline; gap:12px; padding:11px 16px; cursor:pointer; list-style:none;
  font-size:14px; font-weight:600; color:var(--ink)}
.aw summary::-webkit-details-marker{display:none}
.aw summary::before{content:"+"; width:12px; color:var(--ink-3); font-weight:500}
.aw[open] summary::before{content:"–"}
.aw summary time{margin-left:auto; font-size:12px; font-weight:500; color:var(--ink-3); white-space:nowrap}
.aw summary:hover{background:var(--panel-2)}
.aw summary:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.aw p{margin:0; padding:0 16px 14px 40px; font-size:13.5px; line-height:1.6; color:var(--ink-2); max-width:110ch}
.aw summary em{font-style:normal; font-size:12px; font-weight:600; color:var(--ink-3); background:var(--panel-2);
  border:1px solid var(--line); border-radius:20px; padding:0 8px}
.awitems{list-style:none; margin:0; padding:0 16px 12px 40px; display:grid; gap:2px}
.awitems li{display:grid; grid-template-columns:52px auto minmax(0,1fr) auto; gap:10px; align-items:baseline;
  padding:6px 0; border-top:1px solid var(--line); font-size:13.5px}
.awitems li:first-child{border-top:0}
.awitems time{font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.awitems .lanepill{margin-top:0; justify-self:start}
.awitems .h{color:var(--ink-2)} .awitems .h:hover{color:var(--ink)}
.awitems .src{font-size:12px; color:var(--accent); white-space:nowrap}
@media(max-width:640px){
  .awitems{padding-left:16px}
  .awitems li{grid-template-columns:46px 1fr; row-gap:4px}
  .awitems .h,.awitems .src{grid-column:1 / -1}
}
.awitems .src{white-space:normal; max-width:30ch; text-align:right} @media(max-width:640px){.awitems .src{max-width:none; text-align:left}}
/* The guide strip under the This week banner (layers.guide_bar). */
.guide{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; margin-top:14px;
  background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.gcell{position:relative; display:grid; gap:4px; align-content:start; padding:14px 40px 14px 16px;
  background:var(--panel); color:inherit; min-width:0}
.gcell:hover,.gcell:focus-visible{background:var(--panel-2); text-decoration:none; outline:none}
.gcell:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.gl{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--ink)}
.gd{font-size:13.5px; line-height:1.45; color:var(--ink-2)}
.gm{font-size:12px; color:var(--ink-3); margin-top:2px}
.ga{position:absolute; right:16px; top:14px; color:var(--accent); font-size:15px}
.gcell:hover .ga{transform:translateX(2px)}
@media(prefers-reduced-motion:reduce){.gcell:hover .ga{transform:none}}

/* The front page, set like a broadsheet (layers.home_body).

   A dateline under the nav; a contents column on the left that says what each
   layer of the site is for; this week's lead set large on the right with the
   next few items two-up under a rule; then the So What pages, then the newest
   week cards. Rules and type do the work, not boxes. */
.dateline{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:-8px 0 32px;
  padding-bottom:8px; border-bottom:1px solid var(--line); font-size:12px; color:var(--ink-3)}
.dateline .dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--cap); margin-right:6px; vertical-align:middle}
.dateline time{color:var(--ink-2); font-weight:600}
.front{display:grid; grid-template-columns:300px minmax(0,1fr); gap:56px; align-items:start; margin-bottom:44px}
@media(max-width:860px){.front{grid-template-columns:1fr; gap:28px} .ways{order:2}}  /* on a phone the news comes first */

.ways{display:flex; flex-direction:column}
.waysin{margin:0 0 12px; font-family:var(--display); font-style:italic; font-size:17px; color:var(--ink-2)}
.way{display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; padding:14px 0; border-top:1px solid var(--line); color:inherit}
.way:first-of-type{border-top-color:var(--ink)}
.way.last{border-bottom:1px solid var(--ink); padding-bottom:18px}
.way:hover{text-decoration:none} .way:hover .wt{color:var(--accent)}
.way .wn{font-family:var(--display); font-size:15px; color:var(--ink-3); padding-top:3px}
.way.last .wn,.way.last .wt{color:var(--accent)}
.way .wb{display:flex; flex-direction:column; gap:3px}
.way .wt{font-family:var(--display); font-size:21px; line-height:1.15; color:var(--ink)}
.way .wd{font-size:13px; line-height:1.5; color:var(--ink-2)}

.frontlead{display:flex; flex-direction:column; gap:28px; min-width:0}
.frontlead .lede{margin:0}
.kick{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px}
.kick time{font-weight:600; color:var(--ink-3); margin-left:8px; letter-spacing:.8px}
.frontlead .lead{display:flex; flex-direction:column; gap:12px; color:inherit}
.frontlead .lead:hover{text-decoration:none} .frontlead .lead:hover .lh{color:var(--accent)}
.frontlead .lead .lh{font-family:var(--display); font-weight:500; font-size:40px; line-height:1.08; letter-spacing:-.6px; color:var(--ink); text-wrap:pretty}
@media(max-width:600px){.frontlead .lead .lh{font-size:30px}}
.frontlead .lead .ls{font-family:var(--display); font-size:18px; line-height:1.5; color:var(--ink-2)}
.frontlead .lead .lm{font-size:12.5px; color:var(--ink-3)}
.twoup{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 36px; border-top:1px solid var(--ink); padding-top:18px}
@media(max-width:600px){.twoup{grid-template-columns:1fr}}
.two{display:flex; flex-direction:column; gap:6px; padding:0 0 18px; color:inherit}
.two:nth-child(n+3){padding-top:18px; border-top:1px solid var(--line)}
@media(max-width:600px){.two:nth-child(n+2){padding-top:18px; border-top:1px solid var(--line)}}
.two:hover{text-decoration:none} .two:hover .th{color:var(--accent)}
.two .th{font-family:var(--display); font-size:21px; line-height:1.25; color:var(--ink)}
.frontlead .more{font-size:13.5px; font-weight:600; align-self:flex-start}

.sowhat{border-top:2px solid var(--ink); padding-top:20px}
.swhead{margin:0 0 20px; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.swhead a{font-family:var(--display); font-size:24px; color:var(--ink)}
.swhead em{font-family:var(--display); font-style:italic; font-size:16px; color:var(--ink-3)}
.swgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:36px}
.swgrid.tall{margin-top:8px}
.sw{display:flex; flex-direction:column; gap:8px; color:inherit; min-width:0}
.sw + .sw{padding-left:36px; border-left:1px solid var(--line)}
@media(max-width:700px){.sw + .sw{padding-left:0; border-left:0; padding-top:18px; border-top:1px solid var(--line)}}
.sw:hover{text-decoration:none} .sw:hover .swt{color:var(--accent)}
.sw .kick{color:var(--ink-3)}
.sw .swt{font-family:var(--display); font-size:26px; line-height:1.15; letter-spacing:-.3px; color:var(--ink)}
.sw .swd{font-size:14px; line-height:1.55; color:var(--ink-2)}
.blockhead.rw{display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap}
.blockhead.rw a{font-size:13px; text-transform:none; letter-spacing:0; font-weight:500}

/* Text wrapping, site-wide: headings balance their lines, running text avoids
   orphans, and no paragraph runs past a readable measure on a wide screen. */
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
/* Headlines balance so no line is left with a single word; running text fills its column. */
.frontlead .lead .lh,.two .th,.sw .swt,.story .sn,.brow .bt{text-wrap:balance}
.pagehead .sub,.lede,.frontlead .lead .ls,.sw .swd,.story .why,.brow .bs,.way .wd{text-wrap:pretty}

/* Grids with a fixed count get fixed columns; auto-fill is for open-ended
   lists only. Three week cards on the front page, 3 / 1, with room to read. */
.wgrid.front{grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch}
@media(max-width:900px){.wgrid.front{grid-template-columns:1fr}}
.wgrid.front .wcard{padding:18px 20px; gap:11px}
.wgrid.front .wcard li{font-size:13.5px; line-height:1.55}
.wgrid.front .wcard .wgo{margin-top:auto}

/* Watchlist: the stories as entries, three across, each led by its emblem
   (layers.EMBLEMS): one drawing per story in one hand, lane colour as the
   accent. The eye goes to the drawing, then the name. */
.stories{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 40px; border-top:2px solid var(--ink); margin-bottom:36px}
@media(max-width:1000px){.stories{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.stories{grid-template-columns:1fr}}
.story{display:flex; flex-direction:column; gap:8px; padding:22px 0 24px; border-bottom:1px solid var(--line); color:inherit; min-width:0}
.story:hover{text-decoration:none} .story:hover .sn{color:var(--accent)}
/* The cast's bodies take the reading's tint, 0 (quiet) to 4 (unanswered). */
:root{--lv0:#e9edf3; --lv1:#d6efe5; --lv2:#f6ead0; --lv3:#f8dcc9; --lv4:#f5cfcf}
:root[data-theme="dark"]{--lv0:#242c37; --lv1:#1d3a30; --lv2:#3a3120; --lv3:#3f2a20; --lv4:#45232a}
.emblem{display:block; fill:none; stroke:var(--ink); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.emblem .bd{fill:var(--ems)} .emblem .lens{fill:var(--panel)}
.emblem.lv0 .bd{fill:var(--lv0)} .emblem.lv1 .bd{fill:var(--lv1)} .emblem.lv2 .bd{fill:var(--lv2)} .emblem.lv3 .bd{fill:var(--lv3)} .emblem.lv4 .bd{fill:var(--lv4)}
.emblem .ac{stroke:var(--em)} .emblem .af{fill:var(--em); stroke:none} .emblem .af.ac{stroke:var(--em)}
.emblem .sc{fill:var(--panel); stroke:var(--ink); stroke-width:2} .emblem .pu{fill:var(--ink); stroke:none}
.emblem .hl{fill:var(--panel); stroke:none}
.emblem .mo{fill:none; stroke:var(--ink); stroke-width:2.4} .emblem ellipse.mo{fill:var(--ink); stroke:none}
.emblem .sw{fill:var(--def); stroke:none}
.story .emblem{width:96px; height:96px; margin-bottom:8px; transition:transform .15s}
.story:hover .emblem{transform:translateY(-2px)}
.story .kick .rd{color:var(--ink); font-weight:700}
.story .why{font-size:13.5px; line-height:1.5; color:var(--ink); margin:-2px 0 2px}
.story .why em{font-style:normal; color:var(--ink-3)}
.story .smeta{font-size:11px; color:var(--ink-3); letter-spacing:.3px}
.story.lv3 .kick .rd,.story.lv4 .kick .rd{color:var(--atk)}

/* The legend strip under the Watchlist headline: the five readings. */
.scale{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:0 0 28px}
@media(max-width:800px){.scale{grid-template-columns:1fr}}
.sc-cell{display:grid; grid-template-columns:44px auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:10px; align-items:center; padding:12px 14px; background:var(--panel)}
.sc-cell .emblem{width:44px; height:44px; grid-row:1 / 3}
.sc-cell .sc-n{font-family:var(--display); font-size:18px; color:var(--ink-3); grid-row:1 / 3; padding-right:2px}
.sc-cell .sc-name{font-size:13px; font-weight:700; color:var(--ink)}
.sc-cell .sc-what{font-size:12px; line-height:1.4; color:var(--ink-2)}
@media(max-width:800px){.sc-cell{grid-template-columns:44px auto minmax(0,1fr)}}
.story .kick{display:flex; justify-content:space-between; gap:10px; color:var(--ink-3); font-weight:600; letter-spacing:.8px; font-size:10.5px}
.story .kick time{margin-left:0; color:var(--ink-2)}
.story .sn{font-family:var(--display); font-size:24px; line-height:1.15; letter-spacing:-.3px; color:var(--ink)}
.story .sd{font-size:13.5px; line-height:1.5; color:var(--ink-2)}
.story .st{font-size:13px; line-height:1.5; color:var(--ink-2); padding-top:8px; border-top:1px solid var(--line); margin-top:2px}
.story .st b{color:var(--ink); font-weight:600}
.alsow .blockhead{margin-bottom:6px}

/* Briefs: one full-width entry per brief (build.brief_row). */
.briefrows{display:flex; flex-direction:column; border-top:2px solid var(--ink)}
.brow{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px; padding:24px 0 26px; border-bottom:1px solid var(--line); color:inherit; min-width:0}
@media(max-width:800px){.brow{grid-template-columns:1fr; gap:14px}}
.brow:hover{text-decoration:none} .brow:hover .bt{color:var(--accent)}
.brow .bl,.brow .br{display:flex; flex-direction:column; gap:8px; min-width:0}
.brow .bk{display:flex; align-items:center; gap:10px}
.brow .bt{font-family:var(--display); font-size:28px; line-height:1.15; letter-spacing:-.4px; color:var(--ink)}
.brow .bm{font-size:12.5px; color:var(--ink-3)}
.brow .bs{font-size:15px; line-height:1.6; color:var(--ink-2)}
.brow .blast{font-size:13.5px; line-height:1.55; color:var(--ink-2); padding-top:8px; border-top:1px solid var(--line)}
.brow .blast b{color:var(--ink); font-weight:600}
.brow .bgo{font-size:13px; font-weight:600; color:var(--accent); margin-top:2px}