/* Insights: article and list pages, and the same look inside the CMS editor. Uses the site's own tokens.css; nothing here
   repeats a colour or a font. Scoped to .article-body (article text) and .insights-list (the list page). */
.article-head h1 { font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.15; max-width: 22ch; }
.article-head .byline { margin-top: var(--space-4); color: var(--muted); font-size: 1rem; }
.article-head .tags { margin-top: var(--space-2); color: var(--muted); font-size: .95rem; }
.crumbs a { color: var(--accent); }
h1.margin { color: var(--accent); } /* the list page's "Insights" label: the 1 heading of its page, styled like the site's h2.margin */

.article-body > * + * { margin-top: var(--space-5); }
.article-body h2 { font-size: 1.6rem; line-height: 1.25; margin-top: var(--space-7); }
.article-body h3 { font: 700 1.2rem/1.35 var(--font-body); margin-top: var(--space-6); }
.article-body h2 + *, .article-body h3 + * { margin-top: var(--space-3); }
.article-body ul, .article-body ol { padding-left: 1.4em; }
.article-body li + li { margin-top: var(--space-2); }
.article-body a { color: var(--accent); }
.article-body a.btn { color: var(--button-fg); text-decoration: none; }
.article-body img { max-width: 100%; height: auto; display: block; }
.article-body img[data-pending-upload] { min-height: 3rem; background: color-mix(in srgb, var(--ink) 8%, transparent); border: 1px dashed var(--muted); }
.article-body hr { border: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.article-body blockquote { margin-inline: 0; padding: var(--space-2) var(--space-5); border-left: 3px solid var(--spot); color: var(--muted); font-family: var(--font-display); }
.article-body aside.callout { background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-left: 4px solid var(--accent); padding: var(--space-4) var(--space-5); border-radius: var(--radius); }
.article-body aside.callout > * + * { margin-top: var(--space-3); }
.article-body p.source { font-size: .9rem; color: var(--muted); }
.article-body figure { margin-inline: 0; }
.article-body figcaption { font-size: .9rem; color: var(--muted); padding-top: 6px; }
.article-body figure.chart { border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); padding: var(--space-4); background: var(--surface); }

/* Tables scroll sideways inside the article only; the page never does. */
.table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.article-body table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: 1rem; line-height: 1.45; }
.article-body th, .article-body td { border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); padding: 8px 12px; text-align: left; vertical-align: top; }
.article-body th { background: color-mix(in srgb, var(--ink) 7%, var(--surface)); font-weight: 700; }
.article-body td.num, .article-body th.num { text-align: right; font-variant-numeric: tabular-nums; }
.article-body caption { text-align: left; font-size: .9rem; color: var(--muted); padding-bottom: 6px; }

.insights-list { list-style: none; margin: 0; padding: 0; }
.insights-list li { padding: var(--space-5) 0; border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); }
.insights-list li:first-child { border-top: 0; padding-top: 0; }
.insights-list a.title { font: 400 1.35rem/1.3 var(--font-display); color: var(--ink); text-decoration: none; }
.insights-list a.title:hover { color: var(--accent); text-decoration: underline; }
.insights-list p { margin-top: var(--space-2); }
.insights-list .meta { color: var(--muted); font-size: .95rem; }

/* Charts and cards drawn as SVG take their colours from the site's tokens, so they match the page. */
.article-body figure.chart svg { display: block; width: 100%; height: auto; max-width: 40rem; color: var(--ink); --nf-chart-1: var(--accent); --nf-chart-2: var(--spot); --nf-chart-3: var(--muted); --nf-chart-4: var(--ink); --nf-chart-5: color-mix(in srgb, var(--accent) 55%, var(--surface)); --nf-chart-6: color-mix(in srgb, var(--spot) 55%, var(--surface)); }
.article-body figure.ai-picture img { display: block; max-width: 100%; height: auto; }