/* article.css: reading layout shared by blog posts, research articles and their index pages. Loaded after hub.css (research also loads legal.css for the in-page index).
   Measure about 68 characters, generous leading, flat boxes, hairlines. Tokens only. */

/* ---- Article hero ---- */
.a-hero { padding-block: clamp(32px, 4vw, 56px) clamp(32px, 4vw, 64px); }
.a-h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--step-3); line-height: 1.08; letter-spacing: -0.03em; max-width: 30ch; text-wrap: balance; }
.a-hero .c-label { margin-bottom: var(--space-3); }
.a-intro { margin-top: var(--space-5); color: var(--text-dim); font-size: var(--step-1); line-height: 1.5; max-width: 52ch; }
.a-meta { display: flex; flex-wrap: wrap; gap: 4px var(--space-5); margin-top: var(--space-5); color: var(--text-dim); font-weight: 600; font-size: 0.9375rem; }
.a-meta li + li { position: relative; }
.a-meta li + li::before { content: ""; position: absolute; left: calc(var(--space-5) / -2); top: 0.3em; bottom: 0.3em; width: 1px; background: var(--line-strong); }
.a-h1--wide { max-width: 24ch; }
.ph .c-hero__h1.a-h1--wide { font-size: var(--step-4); }
@media (min-width: 1000px) { .a-h1 { font-size: clamp(2.25rem, 1.4rem + 2vw, 3.25rem); } }

/* ---- Layout: index on the left (research), reading column ---- */
.a-sec { padding-block: clamp(40px, 5vw, 80px) clamp(56px, 7vw, 112px); }
.a-wrap { display: grid; gap: var(--space-6); }
@media (min-width: 1000px) {
  .a-wrap { grid-template-columns: 17rem minmax(0, 1fr); gap: var(--space-9); align-items: start; }
  .a-wrap--single { grid-template-columns: minmax(0, 1fr); }
  .a-wrap--single .a-prose { margin-inline: auto; }
}
.a-tocta { margin-top: var(--space-5); }

/* ---- Prose ---- */
.a-prose { max-width: 68ch; min-width: 0; font-size: var(--step-0); }
@media (min-width: 1000px) { .a-prose { font-size: 1.125rem; } }
.a-prose > :first-child { margin-top: 0; }
.a-prose p, .a-prose li { line-height: 1.75; }
.a-prose p { margin-bottom: 1.25em; color: var(--text); }
.a-prose h2 { font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.02em; margin: 2.2em 0 0.7em; scroll-margin-top: calc(var(--nav-h) + 16px); }
.a-prose h3 { font-size: var(--step-1); line-height: 1.25; letter-spacing: -0.015em; margin: 1.8em 0 0.5em; }
.a-prose h4 { font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 var(--space-3); }
.a-prose ul, .a-prose ol { margin: 0 0 1.25em; padding-left: 1.4em; list-style: disc; }
.a-prose ol { list-style: decimal; }
.a-prose li { margin-bottom: 0.5em; padding-left: 4px; }
.a-prose li::marker { color: var(--text-faint); }
.a-prose a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; font-weight: 600; overflow-wrap: anywhere; }
.a-prose a:hover { color: var(--brand-strong); }
.a-prose em { font-style: italic; }
.a-prose strong { font-weight: 700; }

/* Pull quote */
.a-prose .pullquote, .a-prose blockquote { margin: 2em 0; padding: 0 0 0 var(--space-5); border-left: 3px solid var(--text); }
.a-prose .pullquote p, .a-prose blockquote p { font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); line-height: 1.35; letter-spacing: -0.015em; margin: 0; color: var(--text); }

/* Callout, info and case boxes */
.a-prose .article-callout, .a-prose .info-box, .a-prose .case-box { margin: 2em 0; padding: var(--space-5); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.a-prose .article-callout p, .a-prose .info-box p, .a-prose .case-box p { margin: 0; font-size: 1rem; line-height: 1.65; }
.a-prose .article-callout p + p, .a-prose .info-box p + p { margin-top: var(--space-3); }

/* Stats */
.a-prose .stat-block { display: grid; grid-template-columns: minmax(0, 1fr); margin: 2.2em 0; border-top: 1px solid var(--text); }
.a-prose .stat-item { padding: var(--space-5) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 720px) {
  .a-prose .stat-block { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .a-prose .stat-item { border-bottom: 0; padding: var(--space-5) var(--space-4) var(--space-5) 0; }
  .a-prose .stat-item + .stat-item { border-left: 1px solid var(--line); padding-left: var(--space-4); }
}
.a-prose .stat-num { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--step-3); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-bottom: var(--space-2); }
.a-prose .stat-label { display: block; color: var(--text-dim); font-size: 0.9375rem; line-height: 1.45; }

/* Tables */
.a-prose table { width: 100%; margin: 2em 0; border-collapse: collapse; font-size: 0.9375rem; }
.a-prose th, .a-prose td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); line-height: 1.45; }
.a-prose thead th { font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); border-bottom: 1px solid var(--text); }
@media (max-width: 719px) {
  .a-prose table, .a-prose tbody { display: block; }
  .a-prose thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  .a-prose tr { display: grid; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .a-prose td { display: block; padding: 0; border: 0; }
  .a-prose tr > td:first-child { font-weight: 700; font-size: 1rem; }
  .a-prose td[data-label]:not(:first-child)::before { content: attr(data-label) ": "; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
}
.a-prose .risk-high { font-weight: 700; color: var(--danger); }
.a-prose .risk-med { font-weight: 700; color: var(--text); }
.a-prose .risk-low { font-weight: 600; color: var(--text-dim); }

/* References */
.a-prose .references, .a-prose .refs-section { margin-top: 3em; padding-top: var(--space-5); border-top: 1px solid var(--text); }
.a-prose .references h2, .a-prose .refs-section h2 { margin-top: 0; font-size: var(--step-1); }
.a-prose .references ol, .a-prose .refs-list { font-size: 0.9375rem; color: var(--text-dim); }
.a-prose .references li, .a-prose .refs-list li { line-height: 1.6; margin-bottom: 0.7em; overflow-wrap: anywhere; }

/* Further reading */
.a-prose .further-reading { margin-top: 3em; padding-top: var(--space-5); border-top: 1px solid var(--text); }
.a-prose .further-reading h2 { margin-top: 0; font-size: var(--step-1); }
.a-prose .fr-grid { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
@media (min-width: 720px) { .a-prose .fr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); } }
.a-prose a.fr-card { display: block; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); font-weight: 400; }
.a-prose a.fr-card:hover .fr-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.a-prose .fr-cat { font-family: var(--font-display); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; }
.a-prose .fr-title { font-size: 1rem; line-height: 1.4; font-weight: 600; }
.a-prose .further-reading > ul { font-size: 1rem; }

/* ---- Lists ending an article ---- */
.a-all { margin-top: var(--space-6); }
.sec--alt .lst { border-top-color: var(--text); }