/* articles.css · /articles/ index and article pages.
   Loaded after style.css + themes.css. Article pages are always soft pop
   (article-boot.js pins data-style="clay"), so everything here is written
   against the clay tokens and only light/dark varies.

   Anatomy of an article page, top to bottom:
     .strip          same status strip as the homepage, plus a reading bar
     .a-hero         title, dek, and the dossier window (question, facts, relay)
     .a-tabs         Article | Full report | Method | Sources, sticky
     [data-panel]    one panel per tab; without JS they all show, stacked
     .a-end          approval stamp, more articles, back to the portfolio */

/* ── chart palette: validated against the clay panels (light #FFF, dark #2D2856)
   with the dataviz validator, both modes. Slots 1-3 also pass all-pairs, so
   scatter/dot exhibits stay on s1-s3. s5 is under 3:1 in light mode: any
   chart using it must direct-label or offer the table view (the kit always
   offers the table). Status colors (--ok/--warn/--crit) are never series. ── */
:root{
  --s1:#4A5BD4; --s2:#F25C4A; --s3:#14A38B; --s4:#9B5DE5; --s5:#D9A21B;
  --a-grid:rgba(58,54,110,.10); --a-read:680px;
}
@media (prefers-color-scheme:dark){
  :root:where(:not([data-theme="light"])){
    --s1:#6874EE; --s2:#EA5F47; --s3:#17A487; --s4:#A078EE; --s5:#B8891A;
    --a-grid:rgba(222,218,247,.10);
  }
}
:root[data-theme="dark"]{
  --s1:#6874EE; --s2:#EA5F47; --s3:#17A487; --s4:#A078EE; --s5:#B8891A;
  --a-grid:rgba(222,218,247,.10);
}

/* ── strip additions ── */
.strip .host a{color:inherit;}
.strip .host a:hover{color:var(--accent); text-decoration:none;}
.strip .crumb{color:var(--ink-soft);}
.strip .crumb a{color:var(--ink-soft);}
.strip .crumb a:hover{color:var(--accent); text-decoration:none;}
.strip .prog{position:absolute; left:0; right:0; bottom:-2px; height:3px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; pointer-events:none;}

/* ── draft preview banner (injected by articles.js on /drafts/ only) ── */
.draftbar{position:relative; z-index:29; background:var(--warn); color:#241F00;
  font-size:13.5px; font-weight:600; text-align:center; padding:7px 16px;
  background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.07) 0 10px,transparent 10px 20px);}
.draftbar a{color:inherit; text-decoration:underline;}

/* ════════ hero ════════ */
.a-hero{padding:64px 0 34px; display:grid; grid-template-columns:minmax(0,1fr); gap:40px; align-items:start;}
@media (min-width:1020px){.a-hero{grid-template-columns:minmax(0,1fr) 430px; gap:56px; padding-top:78px;}}
.a-tags{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; padding:0; list-style:none;}
.a-tags li{font-size:13px; font-weight:600; color:var(--ink-soft); background:var(--panel);
  border:1.5px solid var(--line); border-radius:var(--rp); padding:3px 12px;}
.a-tags li.kind{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,var(--line));}
h1.a-title{font-size:clamp(34px,5.6vw,66px); line-height:1.04; font-weight:800; letter-spacing:-.028em;
  max-width:18ch; margin:0 0 22px;}
.a-dek{font-size:clamp(18px,2.1vw,21px); line-height:1.55; color:var(--ink-soft); max-width:52ch; margin:0 0 26px;}
.a-byline{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:14.5px; color:var(--ink-soft); margin:0;}
.a-byline b{color:var(--head); font-weight:700;}

/* the dossier: the page's one loud object */
.dossier{position:relative;}
.dossier .bar .ttl{font-family:var(--sans); font-size:13px; letter-spacing:0; color:var(--head);}
.d-body{padding:22px 22px 20px;}
.d-q{margin:0 0 20px;}
.d-q .d-lb{display:block; font-size:13px; font-weight:700; color:var(--ink-faint); margin-bottom:6px;}
.d-q p{margin:0; font-size:clamp(19px,2vw,22px); line-height:1.4; font-weight:700; color:var(--head); letter-spacing:-.01em;}
.d-facts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; margin:0 0 22px;
  padding:16px 0 0; border-top:2px dashed var(--line);}
.d-facts div{min-width:0;}
.d-facts dt{font-size:12.5px; color:var(--ink-faint); font-weight:600; margin-bottom:2px;}
.d-facts dd{margin:0; font-size:15px; font-weight:700; color:var(--ink); overflow-wrap:anywhere;}
.d-facts dd.num{font-variant-numeric:tabular-nums;}

/* status pill: reserved status colors, always icon + words */
.status{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700;
  border-radius:var(--rp); padding:2px 10px 2px 7px; border:1.5px solid currentColor; white-space:nowrap;}
.status::before{font-size:11px; line-height:1;}
.status.verified{color:var(--ok);}      .status.verified::before{content:"✔";}
.status.partial{color:var(--warn);}     .status.partial::before{content:"◐";}
.status.exploratory{color:var(--violet);} .status.exploratory::before{content:"✦";}
.status.unverified{color:var(--crit);}  .status.unverified::before{content:"✕";}
.dossier .bar .status{margin-left:auto; font-family:var(--sans); letter-spacing:0;}

/* the relay: who did what, in order. Report, then article, then approval. */
.relay{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; position:relative;}
/* pips sit at the left of three equal columns (gap 10px): the rule runs pip 1
   to pip 3, and the accent stops at pip 2 while approval is pending */
.relay::before{content:""; position:absolute; top:13px; left:14px; right:calc((100% - 20px) / 3 - 14px); height:3px; border-radius:3px; background:var(--line);}
.relay::after{content:""; position:absolute; top:13px; left:14px; right:calc((100% - 20px) / 3 - 14px); height:3px; border-radius:3px; background:var(--accent);
  transform-origin:left; transform:scaleX(1);}
.relay:has(li.pending)::after{right:calc(2 * (100% - 20px) / 3 - 4px);}
.relay li{position:relative; min-width:0;}
.relay .pip{position:relative; z-index:1; display:grid; place-items:center; width:29px; height:29px; border-radius:50%;
  background:var(--panel); border:2.5px solid var(--accent); color:var(--accent); font-size:13px; font-weight:800;
  box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 45%,var(--head));}
.relay li.ok .pip{background:var(--accent); color:#FFF6F3;}
.relay .role{display:block; margin-top:9px; font-size:13.5px; font-weight:800; color:var(--head);}
.relay .who{display:block; font-size:12.5px; line-height:1.4; color:var(--ink-soft); overflow-wrap:anywhere;}
.relay .when{display:block; font-size:12px; color:var(--ink-faint); font-variant-numeric:tabular-nums;}
.relay li.pending .pip{border-style:dashed; border-color:var(--ink-faint); color:var(--ink-faint); box-shadow:none;}
/* the one orchestrated moment: on load the line draws across and each pip
   stamps down in order, the approval last. Reduced motion skips straight to done. */
.relay.go::after{animation:relayline 1.1s cubic-bezier(.5,0,.2,1) .25s both;}
.relay.go .pip{animation:relaystamp .38s cubic-bezier(.3,1.6,.5,1) both;}
.relay.go li:nth-child(1) .pip{animation-delay:.2s;}
.relay.go li:nth-child(2) .pip{animation-delay:.72s;}
.relay.go li:nth-child(3) .pip{animation-delay:1.26s;}
@keyframes relayline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes relaystamp{0%{transform:scale(.4) translateY(-6px); opacity:0}70%{opacity:1}100%{transform:none; opacity:1}}
@media (prefers-reduced-motion:reduce){.relay.go::after,.relay.go .pip{animation:none}}

/* ════════ tabs ════════ */
/* opaque and full-bleed: the background runs edge to edge (shadow + clip-path)
   so prose and gutter sidenotes never show through while it is stuck */
.a-tabs{position:sticky; top:40px; z-index:20; margin:6px 0 0; padding:12px 0;
  background:var(--bg); box-shadow:0 0 0 100vmax var(--bg); clip-path:inset(0 -100vmax -2px);
  border-bottom:2px solid var(--line);}
.a-tabs .row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.a-tabs [role="tablist"]{display:flex; gap:6px; flex-wrap:wrap;}
.a-tab{cursor:pointer; font:inherit; font-size:14.5px; font-weight:700; color:var(--ink-soft);
  background:transparent; border:2px solid transparent; border-radius:var(--rp); padding:6px 15px;}
.a-tab:hover{color:var(--head); border-color:var(--line);}
.a-tab[aria-selected="true"]{color:#FFF6F3; background:var(--accent); border-color:var(--accent);
  box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 55%,var(--head));}
.a-tab .ct{font-weight:600; opacity:.7; margin-left:4px; font-variant-numeric:tabular-nums;}
.a-tabs .dl{margin-left:auto; display:flex; gap:8px;}
.a-tabs .dl a{font-size:13.5px; font-weight:700; color:var(--head); border:2px solid var(--line-strong);
  border-radius:var(--rp); padding:5px 13px; background:var(--panel);}
.a-tabs .dl a:hover{border-color:var(--accent); color:var(--accent); text-decoration:none;}
@media (max-width:700px){
  .a-tabs{top:auto; position:relative;}
  .a-tabs .dl{margin-left:0; width:100%;}
  .a-tab{padding:5px 12px; font-size:14px;}
}
/* without JS every panel shows; with JS only the selected one */
.js-tabs [data-panel][hidden]{display:none !important;}
[data-panel]{padding-top:44px;}
.nojs-h{font-size:clamp(24px,3vw,32px); font-weight:800; color:var(--head); letter-spacing:-.02em; margin:0 0 20px;}
.js-tabs .nojs-h{display:none;}

/* ════════ the reading layout ════════ */
.a-read{display:grid; grid-template-columns:minmax(0,1fr); gap:0;}
@media (min-width:1180px){.a-read{grid-template-columns:190px minmax(0,1fr); gap:52px;}}
.a-toc{display:none;}
@media (min-width:1180px){
  .a-toc{display:block; position:sticky; top:124px; align-self:start; max-height:calc(100vh - 150px); overflow:auto;}
}
.a-toc .toc-lb{font-size:13px; font-weight:800; color:var(--head); margin:4px 0 10px;}
.a-toc ol{list-style:none; margin:0; padding:0; border-left:2px solid var(--line);}
.a-toc a{display:block; font-size:13.5px; line-height:1.35; color:var(--ink-soft); padding:6px 0 6px 14px; margin-left:-2px;
  border-left:2px solid transparent;}
.a-toc a:hover{color:var(--head); text-decoration:none;}
.a-toc a.on{color:var(--accent); border-left-color:var(--accent); font-weight:700;}
.a-toc:empty{display:none;}

/* prose: one measure, left aligned. Wide children (.x-wide) break out to the
   full column; sidenotes (.sn) hang in the right gutter on wide screens. */
.a-prose{min-width:0; counter-reset:sn;}
.a-prose > *{max-width:var(--a-read);}
.a-prose > .x-wide{max-width:none;}
/* list rules stay on the prose's own lists: exhibits inside .a-prose carry
   legends, ledgers, and steppers that must not inherit them */
.a-prose p,.a-prose > ul > li,.a-prose > ol > li{font-size:18px; line-height:1.72;}
.a-prose p{margin:0 0 22px;}
.a-prose > p.lede{font-size:21px; line-height:1.6; color:var(--head); font-weight:500;}
.a-prose h2{font-size:clamp(25px,2.8vw,31px); line-height:1.2; font-weight:800; letter-spacing:-.02em;
  color:var(--head); margin:60px 0 16px; scroll-margin-top:130px; position:relative;}
.a-prose h3{font-size:21px; line-height:1.3; font-weight:700; color:var(--head); margin:38px 0 10px; scroll-margin-top:130px; position:relative;}
.a-prose h2:first-child{margin-top:0;}
.a-prose .anc{position:absolute; left:-1.1em; top:0; color:var(--ink-faint); opacity:0; font-weight:600;}
.a-prose h2:hover .anc,.a-prose h3:hover .anc,.a-prose .anc:focus-visible{opacity:1; text-decoration:none;}
@media (max-width:700px){.a-prose .anc{display:none}}
.a-prose a:not(.anc):not(.cite){color:var(--head); text-decoration:underline; text-decoration-color:var(--accent);
  text-decoration-thickness:2px; text-underline-offset:3px;}
.a-prose a:not(.anc):not(.cite):hover{color:var(--accent);}
.a-prose b,.a-prose strong{color:var(--head); font-weight:700;}
.a-prose > ul,.a-prose > ol{padding-left:1.3em; margin:0 0 22px;}
.a-prose > ul > li,.a-prose > ol > li{margin:0 0 8px;}
.a-prose > ul > li::marker,.a-prose > ol > li::marker{color:var(--accent); font-weight:700;}
.a-prose code{font-family:var(--mono); font-size:.86em; background:var(--well); border-radius:6px; padding:1px 6px;}
.a-prose pre{font-family:var(--mono); font-size:14px; line-height:1.6; background:var(--well); border:2px solid var(--line);
  border-radius:var(--r3l); padding:16px 18px; overflow:auto; margin:0 0 24px;}
.a-prose pre code{background:none; padding:0; font-size:inherit;}
.a-prose hr{border:0; height:0; margin:48px 0; border-top:2px dashed var(--line);}
.a-prose blockquote.pull{margin:40px 0; padding:4px 0 4px 26px; border-left:6px solid var(--accent);
  font-size:clamp(22px,2.5vw,27px); line-height:1.35; font-weight:800; color:var(--head); letter-spacing:-.015em;}
.a-prose blockquote.pull cite{display:block; margin-top:10px; font-size:14px; font-weight:600; font-style:normal; color:var(--ink-soft); letter-spacing:0;}
.a-prose blockquote:not(.pull){margin:0 0 22px; padding:2px 0 2px 20px; border-left:3px solid var(--line-strong); color:var(--ink-soft);}

/* sidenotes: authored as <span class="sn">note</span> right after the word
   they annotate. articles.js adds the numbered toggle. */
.sn{display:block; font-size:14px; line-height:1.5; color:var(--ink-soft); font-weight:400;}
.snref{counter-increment:sn;}
.snref button{cursor:pointer; font:inherit; font-size:12px; font-weight:800; color:var(--accent); background:var(--accent-tint);
  border:0; border-radius:var(--rp); padding:0 6px; margin-left:2px; vertical-align:super; line-height:1.4;}
.snref button::before{content:counter(sn);}
.sn .n{font-weight:800; color:var(--accent); margin-right:4px;}
@media (min-width:1180px){
  .a-prose .sn{float:right; clear:right; width:200px; margin:4px -236px 12px 0; position:relative;}
  .snref button{cursor:default;}
}
@media (max-width:1179px){
  .js-sn .sn{display:none; margin:10px 0 14px; padding:12px 14px; background:var(--bg-soft); border-radius:var(--r3l); border:1.5px solid var(--line);}
  .js-sn .sn.open{display:block;}
  .js-sn .snref button[aria-expanded="true"]{background:var(--accent); color:#FFF6F3;}
}
@media (min-width:1180px){.a-prose > p:has(.sn),.a-prose > ul:has(.sn){max-width:var(--a-read);}}

/* inline citation: <a class="cite" href="#src-3">3</a> */
.cite{display:inline-block; font-size:12px; font-weight:800; line-height:1.4; color:var(--violet);
  background:color-mix(in srgb,var(--violet) 12%,transparent); border-radius:var(--rp); padding:0 6px;
  vertical-align:super; margin-left:1px; text-decoration:none;}
.cite:hover{background:var(--violet); color:#FFF; text-decoration:none;}
.citepop{position:absolute; z-index:40; max-width:320px; background:var(--panel); border:2px solid var(--line-strong);
  border-radius:var(--r3l); padding:10px 13px; font-size:13.5px; line-height:1.45; color:var(--ink);
  box-shadow:0 4px 0 rgba(40,36,92,.12),0 18px 30px -18px rgba(40,36,92,.4); pointer-events:none;}
.citepop b{display:block; color:var(--head);}

/* ── callouts: finding / caveat / method. The heading is authored text. ── */
.callout{margin:32px 0; padding:18px 20px 18px 22px; border-radius:var(--r4l); background:var(--panel);
  border:2px solid var(--line); border-left:7px solid var(--c,var(--accent)); box-shadow:var(--shadow-card);}
.callout.finding{--c:var(--accent);}
.callout.caveat{--c:var(--warn);}
.callout.method{--c:var(--violet);}
.callout h4{margin:0 0 6px; font-size:16.5px; font-weight:800; color:var(--head);}
.callout p{font-size:16.5px; line-height:1.62; margin:0 0 10px;}
.callout p:last-child{margin-bottom:0;}

/* ── stat tiles: a headline number when the number IS the point ── */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin:34px 0;}
.stat{background:var(--panel); border:2px solid var(--line); border-radius:var(--r4l); padding:16px 18px 14px; box-shadow:var(--shadow-card);}
.stat .v{display:block; font-size:clamp(30px,3.6vw,40px); line-height:1.05; font-weight:800; color:var(--head);
  letter-spacing:-.025em; font-variant-numeric:tabular-nums;}
.stat .v small{font-size:.5em; font-weight:700; color:var(--ink-soft); margin-left:3px; letter-spacing:0;}
.stat .l{display:block; margin-top:6px; font-size:14.5px; line-height:1.4; color:var(--ink-soft);}
.stat .d{display:inline-block; margin-top:8px; font-size:13px; font-weight:700; color:var(--ink-soft);}

/* ════════ exhibits: interactive windows inside the article ════════ */
.exhibit{margin:40px 0 44px;}
.exhibit .win{box-shadow:var(--shadow-win);}
.exhibit .bar .ttl{font-family:var(--sans); font-size:13.5px; letter-spacing:0; color:var(--head); font-weight:700;}
.exhibit .bar .end{display:flex; gap:4px; align-items:center;}
@media (max-width:700px){.exhibit .bar .end{display:flex}}
.xview{cursor:pointer; font:inherit; font-family:var(--sans); font-size:12.5px; font-weight:700; color:var(--ink-soft);
  background:transparent; border:1.5px solid transparent; border-radius:var(--rp); padding:2px 10px;}
.xview:hover{color:var(--head); border-color:var(--line);}
.xview[aria-pressed="true"]{color:var(--head); background:var(--panel); border-color:var(--line-strong);}
.x-body{position:relative; padding:18px 20px 16px; min-height:120px;}
.x-body.flush{padding:0;}
.x-ctrl{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin:0 0 14px; font-size:14px; color:var(--ink-soft);}
.seg{display:inline-flex; gap:2px; padding:3px; background:var(--well); border-radius:var(--rp);}
.seg button{cursor:pointer; font:inherit; font-size:13px; font-weight:700; color:var(--ink-soft); background:transparent;
  border:0; border-radius:var(--rp); padding:4px 12px;}
.seg button[aria-pressed="true"]{background:var(--panel); color:var(--head); box-shadow:0 2px 0 rgba(40,36,92,.12);}
.x-ctrl input[type="range"]{accent-color:var(--accent); width:160px;}
.x-ctrl output{font-weight:700; color:var(--head); font-variant-numeric:tabular-nums; min-width:4ch;}
.exhibit p{font-size:inherit; line-height:inherit;}
.exhibit figcaption{max-width:var(--a-read); margin:12px 2px 0; font-size:14.5px; line-height:1.55; color:var(--ink-soft);}
.exhibit figcaption b{color:var(--head);}
.exhibit figcaption .src{display:block; margin-top:4px; font-size:13px; color:var(--ink-faint);}
.x-err{padding:30px 20px; text-align:center; color:var(--ink-soft); font-size:14.5px;}
.x-loading{padding:40px 20px; text-align:center; color:var(--ink-faint); font-size:14px;}

/* charts (article-charts.js). Text wears text tokens; marks wear series. */
.chart{position:relative; width:100%;}
.chart svg{display:block; width:100%; height:auto; overflow:visible;}
.chart .gl{stroke:var(--a-grid); stroke-width:1;}
.chart .ax{stroke:var(--line-strong); stroke-width:1;}
.chart .tk{fill:var(--ink-faint); font-size:12px; font-family:var(--sans); font-variant-numeric:tabular-nums;}
.chart .axl{fill:var(--ink-soft); font-size:12.5px; font-weight:600; font-family:var(--sans);}
.chart .dl{fill:var(--ink); font-size:12.5px; font-weight:700; font-family:var(--sans); font-variant-numeric:tabular-nums;}
.chart .dl.soft{fill:var(--ink-soft); font-weight:600;}
.chart .ann line{stroke:var(--ink-faint); stroke-width:1.5; stroke-dasharray:3 4;}
.chart .ann text{fill:var(--ink-soft); font-size:12px; font-weight:600; font-family:var(--sans);}
.chart .xh{stroke:var(--ink-faint); stroke-width:1; pointer-events:none;}
.chart .hit{fill:transparent; cursor:crosshair;}
.chart .bar-hit{fill:transparent; cursor:default;}
.chart .mk{stroke:var(--panel); stroke-width:2;}
.legend{display:flex; flex-wrap:wrap; gap:6px 16px; margin:0 0 10px; padding:0; list-style:none; font-size:13.5px; color:var(--ink-soft);}
.legend li{display:inline-flex; align-items:center; gap:7px;}
.legend i{width:14px; height:4px; border-radius:2px; background:var(--c);}
.legend.dots i{width:10px; height:10px; border-radius:50%;}
.ttip{position:absolute; z-index:5; pointer-events:none; min-width:130px; max-width:260px; background:var(--panel);
  border:2px solid var(--line-strong); border-radius:12px; padding:8px 11px; font-size:13px; line-height:1.45; color:var(--ink);
  box-shadow:0 3px 0 rgba(40,36,92,.10),0 14px 24px -14px rgba(40,36,92,.35); opacity:0; transition:opacity .12s;}
.ttip.on{opacity:1;}
.ttip .h{font-weight:800; color:var(--head); margin-bottom:3px;}
.ttip .r{display:flex; align-items:center; gap:8px; justify-content:space-between;}
.ttip .r span{display:inline-flex; align-items:center; gap:6px; color:var(--ink-soft);}
.ttip .r i{width:9px; height:9px; border-radius:50%; background:var(--c);}
.ttip .r b{font-variant-numeric:tabular-nums; color:var(--head);}

/* the table view every chart offers (and the no-JS fallback when authored) */
.dtable{width:100%; border-collapse:separate; border-spacing:0; font-size:14.5px; font-variant-numeric:tabular-nums;}
.dtable th{text-align:left; font-weight:700; color:var(--head); padding:8px 12px; border-bottom:2px solid var(--line-strong); white-space:nowrap;}
.dtable td{padding:7px 12px; border-bottom:1px solid var(--line); color:var(--ink);}
.dtable td.n,.dtable th.n{text-align:right;}
.dtable tr:last-child td{border-bottom:0;}
.dtable th button{all:unset; cursor:pointer;}
.dtable th button:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px;}
.dtable th[aria-sort="ascending"] button::after{content:" ▲"; font-size:10px; color:var(--accent);}
.dtable th[aria-sort="descending"] button::after{content:" ▼"; font-size:10px; color:var(--accent);}
.tscroll{overflow-x:auto;}

/* ── claims ledger: what the report asserts and how well it holds up ── */
.claims{list-style:none; margin:34px 0; padding:0; display:grid; gap:10px;}
.claims li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 18px; align-items:start;
  background:var(--panel); border:2px solid var(--line); border-radius:var(--r4l); padding:14px 16px;}
.claims li[hidden]{display:none;} /* filters set hidden; display:grid above would override it */
.claims .c{font-size:16px; line-height:1.5; color:var(--ink); font-weight:600;}
.claims .why{grid-column:1/-1; font-size:14.5px; line-height:1.5; color:var(--ink-soft);}
@media (max-width:600px){.claims li{grid-template-columns:minmax(0,1fr)}}

/* ════════ report panel: the report as delivered, set as a sheet ════════ */
.a-sheet{max-width:860px; background:var(--panel); border:2px solid var(--line-strong); border-radius:var(--r5);
  padding:clamp(24px,5vw,56px) clamp(20px,5.5vw,64px); box-shadow:var(--shadow-win);}
.a-sheet .sheet-note{display:flex; gap:12px; align-items:flex-start; margin:0 0 34px; padding:12px 14px;
  background:var(--bg-soft); border-radius:var(--r3l); font-size:14.5px; line-height:1.5; color:var(--ink-soft);}
.a-sheet .sheet-note b{color:var(--head);}
.a-sheet .a-prose p,.a-sheet .a-prose > ul > li,.a-sheet .a-prose > ol > li{font-size:16.5px;}
.a-sheet .a-prose h2{font-size:24px; margin-top:44px;}
.a-sheet .a-prose h3{font-size:19px;}
.a-sheet .a-prose h1{font-size:30px; font-weight:800; color:var(--head); margin:0 0 20px; letter-spacing:-.02em;}
.a-sheet .a-prose table{border-collapse:collapse; width:100%; font-size:14.5px; margin:0 0 24px;}
.a-sheet .a-prose th,.a-sheet .a-prose td{border-bottom:1px solid var(--line); padding:7px 10px; text-align:left;}
.a-sheet .a-prose th{border-bottom:2px solid var(--line-strong); color:var(--head);}

/* ════════ method panel ════════ */
.steps{list-style:none; margin:0 0 30px; padding:0; counter-reset:st; max-width:var(--a-read);}
.steps > li{counter-increment:st; position:relative; padding:0 0 26px 54px; margin:0;}
.steps > li::before{content:counter(st); position:absolute; left:0; top:0; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-weight:800; font-size:15px; color:var(--accent); border:2.5px solid var(--accent); background:var(--panel);}
.steps > li::after{content:""; position:absolute; left:16px; top:40px; bottom:6px; width:2.5px; background:var(--line); border-radius:2px;}
.steps > li:last-child::after{display:none;}
.steps h4{margin:4px 0 6px; font-size:18px; font-weight:800; color:var(--head);}
.steps p{font-size:16.5px; line-height:1.62; margin:0 0 12px;}
.prompt{position:relative; margin:4px 0 12px; background:var(--well); border:2px solid var(--line); border-radius:var(--r3l);}
.prompt .ph{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 12px; border-bottom:2px solid var(--line);
  font-size:13px; font-weight:700; color:var(--ink-soft);}
.prompt .copy{cursor:pointer; font:inherit; font-size:12.5px; font-weight:700; color:var(--ink-soft);
  background:var(--panel); border:1.5px solid var(--line-strong); border-radius:var(--rp); padding:1px 10px;}
.prompt .copy:hover{color:var(--accent); border-color:var(--accent);}
.prompt pre{margin:0; padding:12px 14px; font-family:var(--mono); font-size:13.5px; line-height:1.6; white-space:pre-wrap; color:var(--ink);}

/* ════════ sources panel ════════ */
.srcs{list-style:none; margin:0; padding:0; counter-reset:src; max-width:820px;}
.srcs li{counter-increment:src; display:grid; grid-template-columns:40px minmax(0,1fr); gap:4px 12px; padding:14px 0; border-bottom:2px dashed var(--line);
  scroll-margin-top:130px;}
.srcs li::before{content:counter(src); grid-row:1/span 3; font-weight:800; font-size:15px; color:var(--violet);
  background:color-mix(in srgb,var(--violet) 12%,transparent); border-radius:var(--rp); text-align:center; height:26px; line-height:26px;}
.srcs li:target,.srcs li.flash{background:color-mix(in srgb,var(--violet) 7%,transparent); border-radius:var(--r3l);}
.srcs .t{font-weight:700; color:var(--head); font-size:16px; line-height:1.4;}
.srcs .t a{color:inherit; text-decoration:underline; text-decoration-color:var(--violet); text-decoration-thickness:2px; text-underline-offset:3px;}
.srcs .m{font-size:14px; color:var(--ink-soft);}
.srcs .u{font-size:13.5px; color:var(--ink-soft); line-height:1.5;}

/* ════════ end of article ════════ */
.a-end{margin-top:80px; padding:40px 0 52px; border-top:2px solid var(--line);}
/* the article footer carries one rule, not the homepage footer's two */
.a-end .basefoot{border-top:0; padding-top:0; margin-top:36px;}
.a-end > .basefoot:first-child{margin-top:0;}
.a-stamp{display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; background:var(--panel); border:2px solid var(--line-strong);
  border-radius:var(--r5); padding:18px 22px; box-shadow:var(--shadow-card); max-width:860px;}
.a-stamp .seal{flex:none; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; font-size:24px; font-weight:800;
  color:#FFF6F3; background:var(--accent); box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 55%,var(--head)); transform:rotate(-8deg);}
.a-stamp p{margin:0; flex:1; min-width:220px; font-size:15.5px; line-height:1.55; color:var(--ink-soft);}
.a-stamp p b{color:var(--head);}
.a-more{margin-top:48px;}
.a-more h2{font-size:22px; font-weight:800; color:var(--head); margin:0 0 16px;}

/* ════════ article cards (index + "more articles") ════════ */
.acards{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; list-style:none; margin:0; padding:0;}
.acard{display:flex; flex-direction:column; height:100%; background:var(--panel); border:2px solid var(--line-strong); border-radius:var(--r5);
  overflow:hidden; color:var(--ink); box-shadow:0 4px 0 color-mix(in srgb,var(--line-strong) 40%,transparent);
  transition:transform .15s ease, box-shadow .15s ease;}
.acard:hover{text-decoration:none; transform:translateY(-3px); box-shadow:0 7px 0 color-mix(in srgb,var(--accent) 45%,var(--head));}
.acard:focus-visible{outline:3px solid var(--accent); outline-offset:3px;}
@media (prefers-reduced-motion:reduce){.acard{transition:none}.acard:hover{transform:none}}
.acard .cv{aspect-ratio:16/7; background:var(--well); border-bottom:2px solid var(--line); overflow:hidden;}
.acard .cv img{display:block; width:100%; height:100%; object-fit:cover;}
.acard .in{display:flex; flex-direction:column; gap:10px; padding:18px 20px 20px; flex:1;}
.acard .top{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; font-size:13px; color:var(--ink-faint); font-weight:600;}
.acard h3{margin:0; font-size:22px; line-height:1.2; font-weight:800; letter-spacing:-.018em; color:var(--head);}
.acard p{margin:0; font-size:15.5px; line-height:1.55; color:var(--ink-soft);}
.acard .q{margin-top:auto; padding-top:12px; border-top:2px dashed var(--line); font-size:14.5px; line-height:1.45; color:var(--ink);}
.acard .q b{display:block; font-size:12.5px; color:var(--ink-faint); font-weight:700; margin-bottom:2px;}

/* index page */
.ai-hero{padding:72px 0 40px; max-width:760px;}
.ai-hero h1{font-size:clamp(40px,7vw,80px); line-height:1; font-weight:800; letter-spacing:-.035em; margin:0 0 20px; max-width:none;}
.ai-hero p{font-size:clamp(18px,2vw,21px); line-height:1.55; color:var(--ink-soft); margin:0 0 14px; max-width:56ch;}
.ai-feature{margin:0 0 26px;}
.ai-feature .acard{display:grid; grid-template-columns:minmax(0,1fr);}
@media (min-width:900px){
  .ai-feature .acard{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);}
  .ai-feature .acard .cv{aspect-ratio:auto; min-height:100%; border-bottom:0; border-right:2px solid var(--line);}
  .ai-feature .acard .in{padding:30px 32px;}
  .ai-feature .acard h3{font-size:clamp(28px,3vw,36px);}
  .ai-feature .acard p{font-size:17px;}
}
.ai-empty{background:var(--panel); border:2px dashed var(--line-strong); border-radius:var(--r5); padding:40px 28px; max-width:760px;}
.ai-empty h2{margin:0 0 8px; font-size:22px; font-weight:800; color:var(--head);}
.ai-empty p{margin:0; color:var(--ink-soft);}

/* homepage strip (index.html #articles): hidden until something is published */
#articles[hidden]{display:none;}
#articles .acards{margin-top:28px;}

/* report tables use the full sheet width, not the reading measure */
.a-sheet .a-prose > .tscroll,.a-sheet .a-prose > hr{max-width:none;}
.a-sheet .a-prose td,.a-sheet .a-prose th{min-width:120px; vertical-align:top;}

/* ── decision tree exhibit (a stepper: one question at a time) ── */
.dtree{display:grid; gap:14px; max-width:720px;}
.dpath{list-style:none; margin:0; padding:0; display:grid; gap:6px;}
.dpath li{display:flex; justify-content:space-between; gap:16px; align-items:baseline; font-size:14px; color:var(--ink-soft);
  padding:8px 12px; background:var(--bg-soft); border-radius:var(--r3l);}
.dpath li b{flex:none; color:var(--head); font-weight:800;}
.dq p{margin:0 0 14px; font-size:19px; line-height:1.45; font-weight:700; color:var(--head);}
.dbtns{display:flex; gap:10px;}
.dbtn{cursor:pointer; font:inherit; font-size:15px; font-weight:800; color:var(--head); background:var(--panel);
  border:2px solid var(--line-strong); border-radius:var(--rp); padding:8px 26px; box-shadow:0 3px 0 var(--line);}
.dbtn:hover{border-color:var(--accent); color:var(--accent);}
.dbtn:active{transform:translateY(2px); box-shadow:0 1px 0 var(--line);}
.dbtn.ghost{justify-self:start; font-size:14px; padding:6px 16px; box-shadow:none;}
.dres{background:var(--accent-tint); border:2px solid color-mix(in srgb,var(--accent) 40%,var(--line)); border-radius:var(--r4l); padding:18px 20px;}
.dres:focus{outline:none;}
.dres h4{margin:0 0 6px; font-size:21px; font-weight:800; color:var(--head);}
.dres p{margin:0 0 8px; font-size:16px; line-height:1.55;}
.dres .dsrc{font-size:13px; color:var(--ink-soft); font-weight:600;}
.dguard{margin-top:12px; padding-top:12px; border-top:2px dashed color-mix(in srgb,var(--accent) 30%,var(--line));}
.dguard b{font-size:14px; color:var(--head);}
.dguard ul{margin:6px 0 0; padding-left:1.2em;}
.dguard li{font-size:15px; line-height:1.5; margin:0 0 4px;}
.dguard li::marker{color:var(--accent);}
.x-fallback{margin:0; padding-left:1.2em; font-size:15.5px; line-height:1.6;}
.js-tabs .x-fallback{display:none;}

/* ── TODO markers: visible in drafts, and tools/articles.py refuses to
   publish while any exist ── */
.todo{outline:2px dashed var(--warn); outline-offset:4px; border-radius:6px; background:color-mix(in srgb,var(--warn) 10%,transparent);}
.todo::before{content:"To do: "; font-weight:800; color:var(--warn);}

/* ── network exhibit (who talks to whom). Node fills are series tokens;
   edges and labels stay in ink so identity is never color alone ── */
.net{display:block; width:100%; height:auto;}
.net-e{stroke:var(--ink-faint); opacity:.32; stroke-linecap:round; transition:opacity .15s, stroke .15s;}
.net-e.hot{stroke:var(--accent); opacity:.85;}
.net-e.dim{opacity:.07;}
.net-n{cursor:pointer; outline:none; transition:opacity .15s;}
.net-n circle{stroke:var(--panel); stroke-width:2.5;}
.net-n.sel circle,.net-n:focus-visible circle{stroke:var(--head); stroke-width:3;}
.net-n.dim{opacity:.25;}
.net-l{fill:var(--ink); font-family:var(--sans); font-size:13px; font-weight:700; paint-order:stroke; stroke:var(--panel); stroke-width:4px; stroke-linejoin:round;}
.net-info{margin:10px 0 0; padding:10px 14px; background:var(--bg-soft); border-radius:var(--r3l); font-size:14.5px; line-height:1.5; color:var(--ink-soft); min-height:3em;}
.net-info b{color:var(--head);}
@media (prefers-reduced-motion:reduce){.net-e,.net-n{transition:none}}

/* ── replay exhibit (a step-through timeline) ── */
.replay{display:grid; gap:14px;}
.rp-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;}
.rp-clock{display:flex; align-items:baseline; gap:12px; font-variant-numeric:tabular-nums;}
.rp-clock b{font-size:28px; font-weight:800; color:var(--head); letter-spacing:-.02em;}
.rp-clock span{font-size:13.5px; color:var(--ink-soft);}
.rp-ctl{display:flex; gap:8px;}
.rp-ctl .dbtn{padding:6px 18px; font-size:14px;}
.rp-ctl .dbtn:disabled{opacity:.4; cursor:default;}
.rp-track{position:relative; height:34px; margin:4px 12px;}
.rp-track::before,.rp-fill{content:""; position:absolute; left:0; top:15px; height:4px; border-radius:4px;}
.rp-track::before{right:0; background:var(--line);}
.rp-fill{background:var(--accent); width:0; transition:width .35s ease;}
.rp-mark{position:absolute; top:7px; width:20px; height:20px; margin-left:-10px; border-radius:50%; cursor:pointer; padding:0;
  border:3px solid var(--panel); background:var(--kc); box-shadow:0 0 0 1.5px var(--line-strong); transition:transform .15s;}
.rp-mark.on{transform:scale(1.35); box-shadow:0 0 0 2px var(--head);}
.rp-mark:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
.rp-card{background:var(--bg-soft); border-radius:var(--r4l); padding:16px 18px; min-height:150px;}
.rp-top{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:8px;}
.rp-kind{font-size:12.5px; font-weight:800; color:#FFF; background:var(--kc); border-radius:var(--rp); padding:2px 10px;}
.rp-who{font-size:16px; font-weight:800; color:var(--head);}
.rp-id{font-family:var(--mono); font-size:12px; color:var(--ink-faint);}
.rp-d{margin:0 0 8px; font-size:16.5px; line-height:1.55;}
.rp-q{margin:0; padding:2px 0 2px 14px; border-left:4px solid var(--kc,var(--accent)); font-size:15.5px; font-style:italic; color:var(--ink);}
.rp-card:has(.k-break) .rp-q{--kc:var(--crit);} .rp-card:has(.k-fix) .rp-q{--kc:var(--ok);}
.rp-legend{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; color:var(--ink-soft);}
.rp-legend li{display:inline-flex; align-items:center; gap:6px;}
.rp-legend i{width:10px; height:10px; border-radius:50%; background:var(--kc);}
/* kinds: problems and fixes are states, so they take the status colors; the rest stay quiet */
.k-ask{--kc:var(--violet);} .k-work{--kc:var(--ink-soft);} .k-break{--kc:var(--crit);} .k-fix{--kc:var(--ok);} .k-done{--kc:var(--accent);}
@media (prefers-reduced-motion:reduce){.rp-fill,.rp-mark{transition:none}}

/* a private log citation: a message id on the author's own chat server,
   shown so claims stay traceable, never linked */
.logref{font-family:var(--mono); font-size:.72em; color:var(--ink-faint); background:var(--well); border-radius:6px; padding:1px 6px; white-space:nowrap; vertical-align:1px;}