/* ============================================================================
   article.css — Insight article layout (_layouts/insight-article.njk).

   Two parts:
   1. The article design: head, lead image, TOC, prose, CTA, author card.
   2. Chart/figure classes for hand-authored figures (src/_includes/figures/*,
      src/insights/<post>/*.njk) and report-style posts. These came from the
      retired report.css; they are scoped to .ar-prose so figures render as
      originally published.
   ============================================================================ */

.ar-wrap{max-width:1120px;margin:0 auto}

/* ---- head ---- */
.ar-head{padding:72px 24px 40px}
.ar-head-col{max-width:800px;display:flex;flex-direction:column;gap:22px}
.ar-crumb{
  margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--c-mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;
}
.ar-crumb a{color:#64748b}
.ar-crumb a:hover{color:var(--c-accent)}
.ar-crumb-sep{color:#cbd5e1}
.ar-crumb-topic{color:var(--c-accent);text-transform:uppercase}
.ar-h1{
  margin:0;font-size:clamp(36px,5vw,54px);font-weight:500;letter-spacing:-.025em;line-height:1.1;
  color:var(--c-ink);text-wrap:balance;
}
.ar-dek{margin:0;font-size:clamp(18px,2vw,21px);font-weight:300;line-height:1.6;color:#475569;text-wrap:pretty}
.ar-meta{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:22px;border-top:1px solid var(--c-line);
}
.ar-byline{display:flex;align-items:center;gap:12px}
.ar-avatar{display:block;width:40px;height:40px;border-radius:9999px;-o-object-fit:cover;object-fit:cover;background:var(--c-line)}
.ar-byline-text{display:flex;flex-direction:column;gap:2px}
.ar-author{font-size:15px;font-weight:600;color:var(--c-ink)}
.ar-when{font-size:13.5px;color:#64748b}
.ar-copy{
  display:flex;align-items:center;gap:8px;height:36px;padding:0 16px;cursor:pointer;
  background:#fff;border:1px solid var(--c-line);border-radius:9999px;
  font-size:13.5px;font-weight:500;color:#475569;
}
.ar-copy:hover{border-color:var(--c-accent);color:var(--c-accent)}
.ar-copy[hidden]{display:none}
.ar-copy-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- lead image ---- */
.ar-lead{padding:0 24px}
.ar-lead-frame{
  max-width:1120px;margin:0 auto;aspect-ratio:2/1;overflow:hidden;
  border-radius:16px;background:var(--c-band);border:1px solid var(--c-hair);
}
.ar-lead-frame img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}

/* ---- body + TOC ---- */
.ar-body{padding:64px 24px 96px}
.ar-body-row{display:flex;gap:72px;align-items:flex-start}
.ar-toc{flex:0 0 200px;position:sticky;top:104px;display:flex;flex-direction:column;gap:4px}
.ar-toc-head{margin:0 0 12px;font-family:var(--c-mono);font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--c-muted)}
.ar-toc-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.ar-toc-item{display:flex;align-items:baseline;gap:10px;padding:6px 0;font-size:14px;line-height:1.4;color:#64748b}
.ar-toc-item::before{
  content:"";flex:none;width:5px;height:5px;border-radius:9999px;background:#cbd5e1;transform:translateY(-2px);
}
.ar-toc-item:hover{color:var(--c-accent)}
.ar-toc-item.is-active{color:var(--c-ink);font-weight:600}
.ar-toc-item.is-active::before{background:var(--c-accent)}
.ar-col{flex:1 1 auto;min-width:0;max-width:700px}

/* ---- prose ---- */
.ar-prose{font-size:18px;line-height:1.75;color:#334155}
.ar-prose > :first-child{margin-top:0}
.ar-prose p,.ar-prose ul,.ar-prose ol{margin:0 0 24px;font-size:18px;line-height:1.75;color:#334155;text-wrap:pretty}
.ar-prose ul,.ar-prose ol{padding-left:1.4em}
/* Tailwind's preflight strips list markers; prose lists want them back. */
.ar-prose ul{list-style:disc}
.ar-prose ol{list-style:decimal}
.ar-prose li{margin:0 0 10px}
.ar-prose li:last-child{margin-bottom:0}
.ar-prose h2{
  margin:64px 0 20px;font-size:30px;font-weight:500;letter-spacing:-.02em;line-height:1.25;
  color:var(--c-ink);text-wrap:pretty;
}
.ar-prose > h2:first-child{margin-top:0}
.ar-prose h3{margin:40px 0 14px;font-size:21px;font-weight:600;letter-spacing:-.01em;line-height:1.35;color:var(--c-ink)}
.ar-prose strong{font-weight:600;color:var(--c-ink)}
.ar-prose em{font-family:var(--c-serif);font-style:italic;color:var(--c-ink)}
.ar-prose a{color:var(--c-accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#bfdbfe}
.ar-prose a:hover{color:var(--c-accent-dark);text-decoration-color:currentColor}
.ar-prose hr{border:0;border-top:1px solid var(--c-line);margin:56px 0}
.ar-prose img{max-width:100%;height:auto;border-radius:10px}
.ar-prose blockquote{margin:48px 0;padding:32px 0;border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.ar-prose blockquote p{
  margin:0;font-family:var(--c-serif);font-style:italic;font-size:clamp(22px,2.6vw,27px);
  line-height:1.5;color:#1e3a8a;
}
.ar-prose blockquote p + p{margin-top:16px}
.ar-prose figure{margin:40px 0;padding:28px;border:1px solid var(--c-line);border-radius:16px}
.ar-prose figcaption{
  margin:18px 0 0;padding-top:14px;border-top:1px solid var(--c-hair);
  font-family:var(--c-sans);font-size:13.5px;line-height:1.6;color:#64748b;
}
.ar-prose sup{line-height:0;font-size:11px}
.ar-prose sup a{
  padding:0 2px;font-family:var(--c-mono);font-size:11px;font-weight:600;text-decoration:none;
}

/* Sources: `<ol class="sources" role="list">` with `<li id="src-N">`. The
   counter keeps the mono numbering; role="list" restores the list semantics
   Safari drops with list-style:none. Back-links (.ar-src-back) come from the
   layout script. */
.ar-prose ol.sources{list-style:none;padding:0;margin:0 0 24px;counter-reset:src;display:flex;flex-direction:column;gap:14px}
.ar-prose ol.sources li{
  position:relative;margin:0;padding-left:36px;counter-increment:src;
  font-size:14px;line-height:1.6;color:#475569;
}
.ar-prose ol.sources li::before{
  content:counter(src);position:absolute;left:0;top:1px;
  font-family:var(--c-mono);font-size:12px;font-weight:600;color:var(--c-accent);
}
.ar-prose ol.sources a{white-space:nowrap;text-decoration:none}
.ar-prose ol.sources a:not(.ar-src-back)::after{content:" ↗"}
.ar-prose ol.sources a.ar-src-back{font-family:var(--c-mono)}
.ar-prose ol.sources em{font-family:inherit;color:inherit}

/* Stat trio (_includes/stat-trio.njk). */
.ar-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px;margin:40px 0 44px}
.ar-stat{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:2px solid var(--c-ink)}
.ar-stat-num{font-size:44px;font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--c-accent)}
.ar-prose .ar-stat-label{margin:0;font-size:15px;line-height:1.5;color:#475569}
.ar-stats-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}

/* Small mono kicker above a heading (report-style posts). */
.ar-prose .ar-kicker{
  margin:64px 0 10px;font-family:var(--c-mono);font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;line-height:1.5;color:var(--c-accent);
}
.ar-prose .ar-kicker + h2,.ar-prose .ar-kicker + h3{margin-top:0}
.ar-prose h2 + .ar-kicker{margin-top:28px}

/* ---- end CTA ----
   Doubled with .ar-cta so it beats the .ar-prose p/a rules when a post places
   the CTA inline in its body. */
.ar-cta{
  margin:48px 0 0;padding:32px;border-radius:16px;display:flex;flex-direction:column;gap:18px;
  background:linear-gradient(180deg,#0b1f3a 0%,#071426 100%);
}
.ar-cta .ar-cta-text{margin:0;font-size:22px;font-weight:500;letter-spacing:-.015em;line-height:1.35;color:#fff;text-wrap:pretty}
.ar-cta .ar-cta-text em{font-family:var(--c-serif);font-style:italic;font-weight:400;color:#e3b94a}
.ar-cta .ar-cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.ar-cta .ar-cta-primary{
  display:inline-flex;align-items:center;height:44px;padding:0 24px;border-radius:9999px;
  background:var(--c-accent);color:#fff;font-weight:500;font-size:14.5px;text-decoration:none;
}
.ar-cta .ar-cta-primary:hover{background:var(--c-accent-dark);color:#fff}

/* ---- author card ---- */
.ar-author-card{
  display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;
  margin-top:56px;padding:28px;border:1px solid var(--c-line);border-radius:16px;
}
.ar-author-photo{flex:none;display:block;width:56px;height:56px;border-radius:9999px;-o-object-fit:cover;object-fit:cover;background:var(--c-line)}
.ar-author-text{flex:1 1 280px;display:flex;flex-direction:column;gap:10px}
.ar-author-label{margin:0;font-family:var(--c-mono);font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--c-muted)}
.ar-author-name{margin:0;font-size:17px;font-weight:600;color:var(--c-ink)}
.ar-author-bio{margin:0;font-size:15px;line-height:1.6;color:#475569}
.ar-author-bio strong{font-weight:600;color:var(--c-ink)}

/* ---- responsive ---- */
@media (max-width:1079.98px){
  .ar-toc{display:none}
}
@media (max-width:768px){
  .ar-prose figure{padding:20px}
}

/* ---- print: drop the site chrome and page tools; charts print drawn (below) ---- */
@media print{
  .site-header,.site-page > footer,.ar-copy,.ar-toc,.ar-cta,.ar-src-back{display:none}
  .ar-head{padding:0 0 24px}
  .ar-lead{padding:0}
  .ar-body{padding:32px 0 0}
  .ar-col{max-width:none}
  .ar-prose h2,.ar-prose h3{-moz-column-break-after:avoid;break-after:avoid}
  .ar-prose figure,.ar-prose blockquote,.ar-stats,.ar-author-card{-moz-column-break-inside:avoid;break-inside:avoid}
}

/* ============================================================================
   2. Figure/chart classes (from the retired report.css, scoped).
   ============================================================================ */
.ar-prose{
  --paper:#F6F6F2;
  --paper-2:#EEEEE8;
  --ink:#191B1D;
  --muted:#61656B;
  --rule:#D7D8D1;
  --rule-strong:#C3C4BB;
  --accent:#1C4A6E;
  --accent-soft:rgba(28,74,110,.13);
  --accent-line:rgba(28,74,110,.42);
  --warm-soft:rgba(138,90,43,.16);
  --warm-line:rgba(138,90,43,.45);
  --serif:Georgia,"Times New Roman",serif;
  --sans:var(--c-sans);
  --mono:var(--c-mono);
}
/* The article's figure box replaces the old chartframe border/background. */
:where(.ar-prose) .figure{font-size:16px}
:where(.ar-prose) .chartframe{background:none;border:0;padding:0}
:where(.ar-prose) .chart-head{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:baseline;margin:0 0 1rem}
:where(.ar-prose) .chart-title{font-family:var(--sans);font-weight:600;font-size:17px;color:var(--c-ink);line-height:1.35}
:where(.ar-prose) .legend{display:flex;gap:1.1rem;flex-wrap:wrap;font-family:var(--mono);font-size:.74rem;color:var(--muted);line-height:1.5}
:where(.ar-prose) .legend i{display:inline-block;width:22px;height:0;vertical-align:middle;margin-right:.45rem}
:where(.ar-prose) .legend .ideal{border-top:2px dashed var(--ink)}
:where(.ar-prose) .legend .model{border-top:2.5px solid var(--accent)}
:where(.ar-prose) .legend .gap{height:11px;width:16px;background:var(--accent-soft);border:1px solid var(--accent-line);margin-right:.45rem;vertical-align:-2px}
:where(.ar-prose) .legend .gap-warm{height:11px;width:16px;background:var(--warm-soft);border:1px solid var(--warm-line);margin-right:.45rem;vertical-align:-2px}
:where(.ar-prose) svg.chart{display:block;width:100%;height:auto;font-family:var(--mono)}
:where(.ar-prose) .ax{stroke:var(--ink);stroke-width:1}
:where(.ar-prose) .grid{stroke:var(--rule);stroke-width:1}
:where(.ar-prose) .tick-t{fill:var(--muted);font-size:13px}
:where(.ar-prose) .axis-label{fill:var(--ink);font-size:13px;font-family:var(--sans);font-weight:600}
:where(.ar-prose) .ideal-line{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:7 5}
:where(.ar-prose) .mean-line{fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
:where(.ar-prose) .mean-dot{fill:var(--accent)}
:where(.ar-prose) .ideal-dot{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
:where(.ar-prose) .wedge{fill:var(--accent-soft)}
:where(.ar-prose) .wedge-warm{fill:var(--warm-soft)}
:where(.ar-prose) .anno{fill:var(--ink);font-size:13px}
:where(.ar-prose) .anno-accent{fill:var(--accent);font-size:13px;font-weight:500}
:where(.ar-prose) .anno-mut{fill:var(--muted);font-size:12px}
:where(.ar-prose) .leader{stroke:var(--muted);stroke-width:1}
/* draw-on animation (revealed by the layout's IntersectionObserver) */
:where(.ar-prose) .mean-line{stroke-dasharray:1600;stroke-dashoffset:1600;transition:stroke-dashoffset 1.5s ease}
:where(.ar-prose) .ideal-line{opacity:0;transition:opacity .9s ease .2s}
:where(.ar-prose) :is(.wedge,.anno,.anno-accent,.anno-mut,.leader,.mean-dot,.ideal-dot){opacity:0;transition:opacity .8s ease}
:where(.ar-prose) .revealed .ideal-line{opacity:1}
:where(.ar-prose) .revealed .mean-line{stroke-dashoffset:0}
:where(.ar-prose) .revealed .wedge{opacity:1;transition-delay:.7s}
:where(.ar-prose) .revealed :is(.mean-dot,.ideal-dot){opacity:1;transition-delay:1s}
:where(.ar-prose) .revealed :is(.anno,.anno-accent,.anno-mut,.leader){opacity:1;transition-delay:1.1s}
@media (prefers-reduced-motion:reduce),print{
  :where(.ar-prose) :is(.ideal-line,.mean-line,.wedge,.anno,.anno-accent,.anno-mut,.leader,.mean-dot,.ideal-dot){
    transition:none;stroke-dashoffset:0;opacity:1;
  }
}
/* Report tables, callouts and lists (reading-level report). Written at
   .ar-prose specificity so they beat the generic prose table/p/ul rules. */
.ar-prose .tablewrap{overflow-x:auto;margin:0 0 24px}
.ar-prose .tablewrap table{border-collapse:collapse;width:100%;min-width:34rem;margin:0;font-size:15px}
.ar-prose .tablewrap table.tight{min-width:0}
.ar-prose .tablewrap caption{
  text-align:left;padding-bottom:10px;font-family:var(--c-mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:#64748b;
}
.ar-prose .tablewrap th,.ar-prose .tablewrap td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--c-line)}
.ar-prose .tablewrap th:first-child,.ar-prose .tablewrap td:first-child{text-align:left;padding-left:0}
.ar-prose .tablewrap th:last-child,.ar-prose .tablewrap td:last-child{padding-right:0}
.ar-prose .tablewrap thead th{
  vertical-align:bottom;font-family:var(--c-mono);font-weight:500;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:#64748b;border-bottom:1px solid var(--c-ink);
}
.ar-prose .tablewrap tbody td{font-family:var(--c-mono);font-variant-numeric:tabular-nums;color:#334155}
.ar-prose .tablewrap tbody td:first-child{font-family:var(--c-sans);font-weight:500;color:var(--c-ink)}
.ar-prose .tablewrap tbody tr:last-child td{border-bottom:1px solid var(--c-ink)}
.ar-prose .tablewrap .lead-row td{background:var(--c-accent-wash)}
.ar-prose .tablewrap .lead-row td:first-child{padding-left:10px}
.ar-prose .open-tag{display:block;font-family:var(--c-mono);font-size:10.5px;font-weight:400;letter-spacing:.04em;color:var(--c-accent)}
.ar-prose .pos{color:#8a5a2b}
.ar-prose .neg{color:var(--c-accent)}
.ar-prose .muted{color:#64748b;font-weight:400}
.ar-prose p.note{font-size:15px;line-height:1.65;color:#64748b}
.ar-prose p.prompt-callout{
  padding:14px 16px;border-left:2px solid var(--c-accent);background:var(--c-band);
  font-family:var(--c-mono);font-size:14px;line-height:1.6;color:#334155;
}
.ar-prose code{font-family:var(--c-mono);font-size:.86em;background:var(--c-hair);padding:.05em .35em;border-radius:4px}
.ar-prose ul.bullets{list-style:none;padding:0}
.ar-prose ul.bullets li{position:relative;padding-left:1.35rem}
.ar-prose ul.bullets li::before{content:"·";position:absolute;left:.35rem;color:#64748b;font-weight:600}
.ar-prose .scale{display:flex;flex-wrap:wrap;margin:0 0 24px;border:1px solid var(--c-line);border-radius:10px;overflow:hidden}
.ar-prose .scale .b{
  flex:1 1 0;min-width:70px;padding:9px 10px;border-left:1px solid var(--c-line);
  text-align:center;font-family:var(--c-mono);font-size:12.5px;color:#334155;
}
.ar-prose .scale .b:first-child{border-left:0}
.ar-prose .scale .lab{display:block;margin-top:3px;font-size:10.5px;color:#64748b}