/* Insights — the index and the article pages.
   The shell (header, footer, .wrap, .eyebrow, typography, buttons) comes from ../css/styles.css;
   this file adds the reading furniture. Every colour resolves from a token so the pages follow
   the site's light/dark toggle without a second palette. */

/* ---------- section and article heads ---------- */
.page-head{padding:var(--s9) 0 var(--s7);}
.page-head .display{margin:var(--s3) 0 var(--s4);max-width:18ch;}
.page-head .lede{max-width:62ch;}

.article-head{padding:var(--s9) 0 var(--s6);}
.article-head .display{margin:var(--s3) 0 var(--s4);max-width:20ch;
  font-size:clamp(34px,4.4vw,60px);}
.article-standfirst{font-size:1.125rem;line-height:1.6;color:var(--ink-2);max-width:60ch;}
.article-meta{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s6);
  padding-top:var(--s5);border-top:1px solid var(--line);
  font:500 0.6875rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);}
.article-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5);
  margin-top:var(--s6);}

/* ---------- the index ---------- */
.insight-list{display:grid;gap:var(--s5);padding-bottom:var(--s9);}
.insight{display:block;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);
  padding:var(--s6);transition:transform .2s var(--ease),box-shadow .2s var(--ease),
  border-color .2s var(--ease);}
.insight:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);
  border-color:var(--line-2);}
.insight .kicker{font:500 0.6875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);}
.insight h2{font:600 1.5rem/1.2 var(--display);color:var(--ink);margin:var(--s3) 0 var(--s3);
  letter-spacing:-0.02em;}
.insight p{font-size:0.9375rem;line-height:1.65;color:var(--ink-2);margin:0;max-width:70ch;}
.insight .more{display:inline-flex;gap:10px;align-items:center;margin-top:var(--s4);
  font-size:0.8125rem;font-weight:800;color:var(--accent-text);}
.insight-empty{color:var(--ink-3);font-size:0.9375rem;padding:var(--s6) 0 var(--s9);}

/* ---------- article body ---------- */
.prose{max-width:68ch;padding-bottom:var(--s7);}
.prose h2{font:600 1.625rem/1.25 var(--display);color:var(--ink);letter-spacing:-0.02em;
  margin:var(--s8) 0 var(--s4);}
.prose h3{font:700 1.0625rem/1.35 var(--font);color:var(--ink);margin:var(--s6) 0 var(--s3);}
.prose p{font-size:1.0625rem;line-height:1.75;color:var(--ink-2);margin:0 0 var(--s4);}
.prose strong{color:var(--ink);font-weight:600;}
.prose ul{margin:0 0 var(--s4);padding-left:1.15em;}
.prose li{font-size:1.0625rem;line-height:1.75;color:var(--ink-2);margin-bottom:var(--s2);
  list-style:disc;}
.prose code{font-family:var(--mono);font-size:0.9375rem;background:var(--bg-2);
  border:1px solid var(--line);border-radius:3px;padding:1px 5px;color:var(--ink);}
.prose a{color:var(--accent-text);border-bottom:1px solid var(--line-2);}
.prose a:hover{border-bottom-color:var(--accent-text);}
.prose hr{border:0;border-top:1px solid var(--line);margin:var(--s8) 0;}

/* A line that carries the argument on its own. */
.prose .kicker-line{font:600 1.25rem/1.45 var(--display);color:var(--ink);
  border-left:3px solid var(--accent);padding:var(--s2) 0 var(--s2) var(--s5);
  margin:var(--s6) 0;letter-spacing:-0.01em;max-width:none;}

/* ---------- figures ---------- */
.figure{margin:var(--s6) 0;max-width:none;}
.figure figcaption{font-size:0.8125rem;line-height:1.55;color:var(--ink-3);margin-top:var(--s3);}
table.data{width:100%;border-collapse:collapse;font-size:0.9375rem;
  font-variant-numeric:tabular-nums;}
table.data th,table.data td{padding:9px 12px;text-align:right;
  border-bottom:1px solid var(--line);white-space:nowrap;}
table.data th:first-child,table.data td:first-child{text-align:left;}
table.data thead th{font:600 0.75rem/1.3 var(--font);color:var(--ink-2);
  border-bottom:1px solid var(--line-2);}
table.data tbody tr:hover td,table.data tbody tr:hover th{background:var(--bg-2);}
table.data td.pos{color:#1E7A4C;} table.data td.neg{color:#B3261E;}
[data-theme="dark"] table.data td.pos{color:#5FBF8B;}
[data-theme="dark"] table.data td.neg{color:#F08A80;}
table.data tr.highlight td,table.data tr.highlight th{background:var(--accent-soft);
  font-weight:600;color:var(--ink);}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* Headline figures, three or four across. */
.stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:var(--s6) 0;}
.stat{background:var(--bg);padding:var(--s5);border-left:3px solid var(--accent);}
.stat b{display:block;font:700 1.625rem/1.1 var(--display);color:var(--ink);
  letter-spacing:-0.01em;}
.stat span{display:block;margin-top:var(--s2);font-size:0.8125rem;color:var(--ink-3);
  line-height:1.4;}

.article-foot{border-top:1px solid var(--line);padding:var(--s6) 0 var(--s9);max-width:68ch;}
.article-foot p{font-size:0.875rem;line-height:1.7;color:var(--ink-3);margin:0 0 var(--s3);}

@media (min-width:760px){
  .stat-row{grid-template-columns:repeat(4,1fr);}
  .insight{padding:var(--s7);}
}