/* Evidence Deflator — site design system.
   Light first, dark by preference. One accent (vermilion) = "the bar".
   Serif for headings, Inter for interface, mono for every number. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15.5px/1.65 var(--sans);
  font-feature-settings:'cv11','ss01';-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
::selection{background:var(--accent-soft)}
.narrow{max-width:760px}

/* ---------- type ---------- */
.eyebrow{font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:1px}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;color:var(--ink);margin:0}
.display{font-size:clamp(38px,5.6vw,66px);line-height:1.03;letter-spacing:-.025em}
h1{font-size:clamp(30px,3.8vw,44px);line-height:1.12}
h2{font-size:clamp(24px,2.6vw,30px);line-height:1.2}
h3{font-size:19px;line-height:1.3}
.lede{font-size:clamp(17px,1.6vw,19.5px);line-height:1.55;color:var(--ink-2);max-width:680px}
.muted{color:var(--muted)} .small{font-size:13.5px}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.c-accent{color:var(--accent)} .c-pos{color:var(--pos)} .c-warn{color:var(--warn)}
p{margin:0 0 14px}
code{font:13.5px/1.5 var(--mono);background:var(--sunk);padding:1px 6px;border-radius:4px}

/* ---------- sections ---------- */
section{padding-block:72px;border-top:1px solid var(--rule)}
section.first{border-top:0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.sec-head p{margin:8px 0 0;color:var(--ink-2);max-width:620px}
.sec-head .more{font-size:14px;white-space:nowrap}

/* ---------- buttons ---------- */
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;font:500 15px/1 var(--sans);padding:12px 18px;border-radius:var(--radius);text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{background:var(--ink-2)}
.btn-secondary{border-color:var(--rule);color:var(--ink);background:var(--surface)}
.btn-secondary:hover{border-color:var(--faint)}
.btn .arr{transition:transform .15s}
.btn:hover .arr{transform:translateX(2px)}
.copy{display:inline-flex;align-items:center;gap:10px;font:13.5px/1 var(--mono);background:var(--sunk);border:1px solid var(--rule);color:var(--ink-2);padding:11px 14px;border-radius:var(--radius);cursor:pointer}
.copy:hover{color:var(--ink)}
.copy .ok{display:none;color:var(--pos)}
.copy.done .ok{display:inline}.copy.done .cp{display:none}

/* ---------- hero ---------- */
.hero{padding-block:76px 64px}
.hero .display{margin:18px 0 22px;max-width:900px}
.hero .lede{margin-bottom:30px}
.instrument{margin-top:56px;border:1px solid var(--rule);background:var(--surface);border-radius:8px;overflow:hidden}
.instrument-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--rule-2)}
.instrument-head .t{font-size:14px;color:var(--ink-2)}
.instrument-body{padding:8px 16px 4px}
.instrument-foot{display:flex;gap:0;border-top:1px solid var(--rule-2);flex-wrap:wrap}
.instrument-foot div{flex:1 1 180px;padding:16px 20px;border-right:1px solid var(--rule-2)}
.instrument-foot div:last-child{border-right:0}
.instrument-foot b{display:block;font:500 30px/1.1 var(--mono);letter-spacing:-.02em}
.instrument-foot span{font-size:13px;color:var(--muted)}

/* ---------- stats / triad ---------- */
.stats{display:flex;flex-wrap:wrap;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.stats > div{flex:1 1 200px;padding:22px 24px 20px 0;margin-right:24px;border-right:1px solid var(--rule)}
.stats > div:last-child{border-right:0;margin-right:0}
.stats b{display:block;font:500 clamp(34px,4vw,46px)/1 var(--mono);letter-spacing:-.03em;margin-bottom:10px}
.stats span{font-size:13.5px;color:var(--ink-2);display:block;max-width:240px}
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.triad > div{padding:4px 32px 4px 0;margin-right:32px;border-right:1px solid var(--rule)}
.triad > div:last-child{border-right:0;margin-right:0}
.triad .k{font:500 12px/1 var(--mono);color:var(--accent);letter-spacing:.08em}
.triad h3{margin:14px 0 10px}
.triad p{color:var(--ink-2);font-size:15px}
.example{margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:32px;align-items:start;border:1px solid var(--rule);border-radius:8px;background:var(--surface);padding:26px}
.example .meter{height:14px;background:var(--sunk);border-radius:3px;overflow:hidden;display:flex;margin:14px 0 8px}
.example .meter i{display:block;height:100%}
.example .meter .ob{background:var(--accent)} .example .meter .cl{background:var(--pos)}
.legend{display:flex;gap:18px;font-size:13px;color:var(--ink-2);flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}

/* ---------- lists ---------- */
.rows{border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:24px;padding:18px 0;border-bottom:1px solid var(--rule);text-decoration:none;align-items:baseline}
a.row:hover .row-title{text-decoration:underline;text-decoration-color:var(--faint)}
.row-date{font:13px/1.4 var(--mono);color:var(--muted)}
.row-title{font:500 17px/1.35 var(--serif)}
.row-sub{font-size:14.5px;color:var(--ink-2);margin-top:4px}
.row-tag{font:12px/1 var(--mono);color:var(--muted);white-space:nowrap}
.tag{display:inline-block;font:500 11.5px/1 var(--mono);padding:5px 8px;border-radius:4px;letter-spacing:.02em;white-space:nowrap}
.tag-red{color:var(--accent);background:var(--accent-soft)}
.tag-amber{color:var(--warn);background:var(--warn-soft)}
.tag-green{color:var(--pos);background:var(--pos-soft)}
.tag-grey{color:var(--muted);background:var(--sunk)}

.who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.who > div{padding:22px 28px 6px 0}
.who > div + div{padding-left:28px;border-left:1px solid var(--rule)}
.who h3{margin-bottom:10px}
.who p{color:var(--ink-2);font-size:15px}
.who .act{font-size:14px}

/* ---------- code ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--rule);margin-bottom:0}
.tabs button{font:500 13.5px/1 var(--sans);background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);padding:11px 14px;cursor:pointer;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.code{position:relative;background:#14161A;color:#E6E3DC;border-radius:0 0 8px 8px;padding:20px 22px;font:13.5px/1.7 var(--mono);overflow-x:auto;white-space:pre;margin:0}
.code.solo{border-radius:8px}
.code .c{color:#7F858E} .code .s{color:#B5D19A} .code .k{color:#E6A07E} .code .o{color:#9FC2E8}
@media (prefers-color-scheme:dark){.code{background:#0A0B0D;border:1px solid var(--rule)}}
.code-wrap{max-width:100%;border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:var(--surface)}
.code-wrap .code{border-radius:0}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:8px;background:var(--surface)}
table.data{border-collapse:collapse;width:100%;font-size:14px}
table.data th{font:500 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 14px;border-bottom:1px solid var(--rule);background:var(--surface);white-space:nowrap;position:sticky;top:0}
table.data td{padding:11px 14px;border-bottom:1px solid var(--rule-2);white-space:nowrap;vertical-align:middle}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr:hover td{background:var(--sunk)}
table.data .r{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
table.data td.wrap{white-space:normal;min-width:150px}
table.data tr.hl td{background:var(--accent-soft)}
.mbar{display:inline-flex;align-items:center;gap:8px;width:200px}
.mbar .track{position:relative;flex:1;height:6px;background:var(--sunk);border-radius:3px}
.mbar .fill{position:absolute;left:0;top:0;bottom:0;background:var(--ink-2);border-radius:3px}
.mbar .fill.neg{background:var(--faint)}
.mbar .t2{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--muted)}
.mbar span{font:12px var(--mono);color:var(--muted);width:38px;text-align:right}

/* ---------- controls ---------- */
.seg{display:inline-flex;background:var(--sunk);border-radius:6px;padding:3px;gap:2px}
.seg button{font:500 13px/1 var(--sans);border:0;background:none;color:var(--ink-2);padding:8px 12px;border-radius:4px;cursor:pointer}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0 12px}
.linkbtn{font:500 13.5px var(--sans);background:none;border:0;color:var(--ink-2);cursor:pointer;padding:10px 0;text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:3px}

/* ---------- chart ---------- */
.chart{border:1px solid var(--rule);border-radius:8px;background:var(--surface);padding:12px 14px 6px}
.chart svg{display:block;width:100%;height:auto}
.chart .ax{stroke:var(--rule)} .chart .lab{fill:var(--muted);font:11px var(--mono)}
.chart .bar{stroke:var(--accent);stroke-width:2} .chart .barlab{fill:var(--accent);font:500 11.5px var(--mono)}
.chart .t2{stroke:var(--muted);stroke-dasharray:3 4} .chart .t2lab{fill:var(--muted);font:11.5px var(--mono)}
.chart .zone{fill:var(--accent-soft)} .chart .zonelab{fill:var(--accent);font:11px var(--mono);opacity:.8}
.chart .pt{fill:var(--ink);fill-opacity:.45} .chart .pt.best{fill:var(--ink);fill-opacity:1}
.chart .src{fill:var(--faint);font:10.5px var(--mono)}

/* ---------- article (audits, method) ---------- */
.article{padding-block:56px 80px}
.article .meta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:16px 0 30px;color:var(--muted);font-size:14px}
.prose{max-width:720px;font-size:16.5px;line-height:1.72}
.prose h1{margin-bottom:8px}
.prose h2{font-size:23px;margin:44px 0 12px}
.prose h3{margin:30px 0 10px}
.prose p,.prose li{color:var(--ink)}
.prose ul,.prose ol{padding-left:22px;margin:0 0 16px}
.prose li{margin:6px 0}
.prose blockquote{margin:22px 0;padding:4px 0 4px 20px;border-left:2px solid var(--accent);color:var(--ink-2)}
.prose table{border-collapse:collapse;width:100%;font-size:14.5px;margin:18px 0 24px;display:block;overflow-x:auto}
.prose th{font:500 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule)}
.prose td{padding:10px 12px;border-bottom:1px solid var(--rule-2);vertical-align:top}
.prose strong{font-weight:600}
.prose pre{background:var(--sunk);padding:16px 18px;border-radius:6px;overflow-x:auto;font:13.5px/1.6 var(--mono)}
.prose pre code{background:none;padding:0}
.eq{font:14px/1.7 var(--mono);background:var(--surface);border:1px solid var(--rule);border-left:2px solid var(--accent);padding:14px 18px;margin:16px 0 20px;overflow-x:auto;white-space:pre;border-radius:0 6px 6px 0}
.callout{border:1px solid var(--rule);background:var(--surface);border-radius:8px;padding:20px 22px;margin:28px 0}
.split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.aside{position:sticky;top:84px;font-size:14px;color:var(--ink-2)}
.aside .box{border-top:1px solid var(--ink);padding-top:14px;margin-bottom:28px}
.aside .box h4{font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.aside ul{list-style:none;padding:0;margin:0}
.aside li{margin:8px 0}

/* ---------- page head ---------- */
.page-head{padding-block:60px 36px}
.page-head h1{margin:16px 0 14px;max-width:900px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .triad,.who{grid-template-columns:minmax(0,1fr)}
  .triad > div{border-right:0;margin-right:0;padding:0 0 24px;border-bottom:1px solid var(--rule);margin-bottom:24px}
  .triad > div:last-child{border-bottom:0;margin-bottom:0}
  .who > div + div{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .example{grid-template-columns:minmax(0,1fr)}
  .split{grid-template-columns:minmax(0,1fr)}
  .aside{position:static}
  .row{grid-template-columns:minmax(0,1fr);gap:6px}
  section{padding-block:52px}
}
@media (max-width:640px){
  .stats > div{flex-basis:100%;border-right:0;margin-right:0;border-bottom:1px solid var(--rule);padding-right:0}
  .stats > div:last-child{border-bottom:0}
  .hero{padding-block:48px 40px}
}
h1 code,h2 code,h3 code,.row-title code{font-size:.78em;padding:2px 7px;vertical-align:.08em}