/* Shared article presentation. Load after each article's existing styles.
   Evidence image files, chart coordinates, text and links stay unchanged. */
:root {
  color-scheme: light;
  --article-accent: #087d70;
  --article-paper: #f7f8f4;
  --article-surface: #ffffff;
  --article-ink: #18231f;
  --article-muted: rgb(24 35 31 / .7);
  --article-line: rgb(24 35 31 / .16);
  --article-line-soft: rgb(24 35 31 / .1);
  --article-tint: rgb(8 125 112 / .06);
  --article-shadow: 0 16px 48px rgb(24 35 31 / .08);
  --article-display: 72px;
  --article-heading: 40px;
  --article-component: 20px;
  --article-body: 14px;
}

html { scroll-behavior: auto !important; scroll-padding-top: 24px; }
body {
  color-scheme: light !important;
  --bg: var(--article-paper) !important;
  --panel: var(--article-surface) !important;
  --panel-2: var(--article-tint) !important;
  --text: var(--article-ink) !important;
  --muted: var(--article-muted) !important;
  --line: var(--article-line) !important;
  --line-soft: var(--article-line-soft) !important;
  --accent: var(--article-accent) !important;
  --accent-2: var(--article-accent) !important;
  --cyan: var(--article-accent) !important;
  --blue: var(--article-accent) !important;
  --lime: var(--article-accent) !important;
  --amber: var(--article-accent) !important;
  --warning: var(--article-accent) !important;
  --radius: 24px !important;
  margin: 0;
  min-width: 0 !important;
  background: var(--article-paper) !important;
  color: var(--article-ink) !important;
  font: 400 var(--article-body)/1.85 Arial, "Helvetica Neue", "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
body *, body *::before, body *::after {
  box-sizing: border-box;
  animation: none !important;
  transition: none !important;
}
body ::selection { background: rgb(8 125 112 / .18); color: var(--article-ink); }
body [hidden] { display: none !important; }

/* All four legacy template families share the same page frame. */
body :is(.site-header, main, footer, .shell) {
  width: min(1200px, calc(100% - 48px)) !important;
  max-width: 1200px !important;
  min-width: 0;
  margin-inline: auto;
}
body :is(.site-header, .topbar) {
  min-height: 80px;
  height: auto !important;
  padding-block: 24px;
  gap: 16px;
  border-bottom: 1px solid var(--article-line) !important;
}
body .brand {
  min-width: 0;
  gap: 16px !important;
  color: var(--article-ink) !important;
  font-size: var(--article-component) !important;
  line-height: 1.2;
  letter-spacing: -.035em;
}
body .brand > span { font-size: var(--article-component) !important; }
body :is(.brand-sub, .brand small, .local-badge) {
  color: var(--article-muted) !important;
  font: 400 var(--article-body)/1.6 Arial, "Helvetica Neue", "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
}
body :is(.lab-logo, .note-logo, .logo) { width: 40px; height: 40px; flex: 0 0 40px; }
body :is(.lab-logo, .note-logo, .logo) rect { fill: var(--article-ink); }
body :is(.lab-logo, .note-logo, .logo) path { stroke: var(--article-surface); }
body .brand-mark { border-color: var(--article-accent); box-shadow: none; transform: none; }
body :is(.back, .back-tool) {
  min-height: 48px;
  padding: 8px 0 !important;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px !important;
  color: var(--article-accent) !important;
  font-size: var(--article-body) !important;
  text-underline-offset: 4px;
}
body .back-tool span { margin-left: 0 !important; font-size: inherit !important; transform: none !important; }

/* Four sizes. SVG text inside retained evidence diagrams is not restyled. */
body :is(p, li, small, label, code, caption, th, td, figcaption, summary, button),
body :is(.eyebrow, .article-meta, .meta, .small, .answer-links, .quick, .downloads,
  .source-list, .footer-links, .brand-sub, .chapter-nav, .specimen-label,
  .specimen-numbers span, .specimen-scale, .specimen-footer, .measure-grid span,
  .measure-grid small, .stats span, .result span, .event-sequence > span,
  .event-sequence small) {
  font-size: var(--article-body) !important;
  line-height: 1.85 !important;
}
body :is(.eyebrow, .article-meta, .meta, .small, .brand-sub,
  .specimen-label, .specimen-numbers span, .specimen-scale, .specimen-footer,
  .measure-grid span, .measure-grid small, .stats span, .result span) {
  font-family: inherit !important;
  letter-spacing: 0 !important;
}
body :is(.hero, .article-hero) { padding: 64px 0 48px !important; max-width: none; }
body :is(.hero h1, .article-hero h1) {
  max-width: 24ch !important;
  margin: 16px 0 24px !important;
  color: var(--article-ink) !important;
  font: 600 var(--article-display)/1.06 Arial, "Helvetica Neue", "Segoe UI", sans-serif !important;
  letter-spacing: -.055em !important;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
body :is(.hero h1 em, .article-hero h1 em) {
  color: var(--article-accent) !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: normal;
}
body :is(h2, .article-section h2) {
  max-width: 30ch !important;
  margin: 0 0 24px !important;
  color: var(--article-ink) !important;
  font: 600 var(--article-heading)/1.16 Arial, "Helvetica Neue", "Segoe UI", sans-serif !important;
  letter-spacing: -.04em !important;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
body :is(h3, .article-section h3, .conditions h3, .velocity-cards h3,
  .footer-title, .footer-line, .mobile-data .data-title, .event-sequence strong) {
  color: var(--article-ink) !important;
  font: 600 var(--article-component)/1.4 Arial, "Helvetica Neue", "Segoe UI", sans-serif !important;
  letter-spacing: -.025em !important;
  overflow-wrap: anywhere;
}
body :is(.article-lead, .answer) {
  max-width: 79ch !important;
  color: var(--article-muted) !important;
  font-size: var(--article-component) !important;
  line-height: 1.6 !important;
}
body :is(.article-lead code, .answer strong) { font-size: inherit !important; }
body :is(.eyebrow, .answer strong, .finding strong) { color: var(--article-accent) !important; }
body :is(.article-meta, .meta, .small, .lead, .evidence-figure figcaption,
  .pitch-figure figcaption, .boundary-figure figcaption, .tempo-figure figcaption) {
  color: var(--article-muted) !important;
}
body :is(.article-section p, .article-section li, main > section > p, .lead) {
  max-width: 79ch !important;
  color: var(--article-muted) !important;
  overflow-wrap: anywhere;
}
body :is(.article-section, main.shell > section) {
  padding: 48px 0 !important;
  border-color: var(--article-line) !important;
  scroll-margin-top: 24px;
}
body :is(.article-section a, .source-list a, .answer-links a, .quick a,
  .downloads a, .footer-links a, .footer a) {
  color: var(--article-accent) !important;
  overflow-wrap: anywhere;
  text-underline-offset: 4px;
}
body a:hover { color: var(--article-accent) !important; }

/* Existing cards and data stay in their existing order and grids. */
body :is(.article-card, .measure-grid article, .stats article, .result article,
  .finding, .conditions article, .competitors article, .velocity-cards article,
  .tempo-cards article, .pitch-cards article, .evidence-cards article,
  .mobile-results article, .evidence-list li) {
  min-width: 0;
  padding: 24px !important;
  border: 1px solid var(--article-line) !important;
  border-radius: 12px !important;
  background: var(--article-surface) !important;
  box-shadow: none !important;
  transform: none !important;
}
body :is(.article-grid, .measure-grid, .stats, .result, .findings, .conditions,
  .velocity-cards, .tempo-cards, .pitch-cards, .evidence-cards, .mobile-results,
  .evidence-list) { gap: 16px !important; min-width: 0; }
body :is(.measure-grid strong, .stats b, .result b, .specimen-numbers strong) {
  color: var(--article-ink) !important;
  font: 600 var(--article-heading)/1.16 Arial, "Helvetica Neue", "Segoe UI", sans-serif !important;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}
body :is(.measure-grid span, .measure-grid small, .stats span, .result span,
  .finding p, .conditions p, .competitors p) { color: var(--article-muted) !important; }
body :is(.formula-box, .note) {
  padding: 24px !important;
  background: var(--article-tint) !important;
  color: var(--article-ink) !important;
  border-left: 4px solid var(--article-accent) !important;
  border-radius: 0 12px 12px 0 !important;
}
body :is(.answer-links, .quick, .downloads) { gap: 8px 16px !important; margin-top: 24px !important; }
body :is(.quick a, .downloads a) {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px !important;
  border: 1px solid var(--article-line) !important;
  border-radius: 12px !important;
  background: var(--article-surface) !important;
  font-size: var(--article-body) !important;
}
body a:is(.article-cta, .evidence-button) {
  min-height: 48px;
  padding: 8px 24px !important;
  border: 1px solid var(--article-accent);
  border-radius: 12px !important;
  background: var(--article-accent) !important;
  color: var(--article-surface) !important;
  font-size: var(--article-body) !important;
  transform: none !important;
  box-shadow: none !important;
}
body :is(.article-cta:hover, .evidence-button:hover) { color: var(--article-surface) !important; }

/* Tables own their horizontal scrolling; long data never widens the page. */
body .table-wrap {
  width: 100%; max-width: 100%; min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--article-line) !important;
  border-radius: 12px !important;
  background: var(--article-surface) !important;
}
body table { background: var(--article-surface) !important; }
body :is(th, td) { border-color: var(--article-line-soft) !important; padding: 16px !important; }
body th { background: var(--article-tint) !important; color: var(--article-ink) !important; letter-spacing: 0 !important; }
body :is(td, td code, .code, .case, .source) { color: var(--article-ink) !important; }
body :is(caption, .hash) { color: var(--article-muted) !important; }
body caption { padding: 16px !important; }
body :is(.article-section code, .code) {
  color: var(--article-ink) !important;
  background: var(--article-tint) !important;
  border-color: var(--article-line) !important;
  border-radius: 12px !important;
  overflow-wrap: anywhere;
}
body td code { background: transparent !important; }
body .code { white-space: normal; }
body audio { width: 100%; max-width: 100%; min-width: 0; color-scheme: light; }

/* Retained figures remain intact. Only their surrounding UI is themed. */
body :is(.evidence-figure, .pitch-figure, .boundary-figure, .tempo-figure,
  .velocity-figure, .flow-figure) {
  max-width: 100%; min-width: 0;
  margin: 32px 0 !important;
  padding: 16px !important;
  border: 1px solid var(--article-line) !important;
  border-radius: 24px !important;
  background: var(--article-surface) !important;
  box-shadow: none !important;
}
body :is(.evidence-figure, .pitch-figure, .boundary-figure, .tempo-figure, .velocity-figure) img { max-width: 100%; height: auto; }
body :is(.velocity-figure figcaption, .velocity-figure figcaption a) { color: var(--article-muted) !important; border-color: var(--article-line) !important; }
body .flow-figure { overflow-x: auto; }
body .flow-figure svg { transform: none !important; }

/* Velocity's measured summary and mobile alternatives use the same surfaces. */
body .hero-specimen {
  min-width: 0;
  padding: 32px !important;
  border: 1px solid var(--article-line) !important;
  border-radius: 24px !important;
  background: var(--article-surface) !important;
  color: var(--article-ink) !important;
  box-shadow: var(--article-shadow) !important;
}
body :is(.specimen-label, .specimen-footer, .specimen-plot) { border-color: var(--article-line) !important; }
body :is(.specimen-label, .specimen-numbers span, .specimen-scale, .specimen-footer) { color: var(--article-muted) !important; }
body :is(.specimen-label > span:last-child, .hero-specimen > p em, .specimen-footer a) { color: var(--article-accent) !important; }
body .hero-specimen > p { font: 400 var(--article-component)/1.6 Arial, "Helvetica Neue", "Segoe UI", sans-serif !important; }
body .specimen-plot { background: repeating-linear-gradient(to top, transparent 0 31px, var(--article-line-soft) 32px, transparent 33px) !important; }
body .specimen-plot span { background: var(--article-accent) !important; border-radius: 12px 12px 0 0; }
body .chapter-nav {
  max-width: 100%; min-width: 0;
  overflow-x: auto;
  padding: 16px 0 !important;
  border-color: var(--article-line) !important;
  background: var(--article-paper) !important;
  backdrop-filter: none;
  gap: 24px !important;
}
body :is(.chapter-nav a, .chapter-label) { color: var(--article-muted) !important; font-size: var(--article-body) !important; }
body .chapter-nav a { padding-block: 8px; }
body .chapter-nav a[aria-current="location"] { color: var(--article-accent) !important; border-color: var(--article-accent); }
body .velocity-editorial .article-section::before,
body.velocity-editorial .article-section::before {
  position: static; display: block; max-width: none;
  margin-bottom: 16px;
  color: var(--article-muted) !important;
  font: 400 var(--article-body)/1.85 Arial, "Helvetica Neue", "Segoe UI", sans-serif !important;
  letter-spacing: 0;
}
body.velocity-editorial #evidence { background: transparent !important; box-shadow: none !important; }
body :is(.mobile-events, .mobile-data) { min-width: 0; max-width: 100%; color: var(--article-ink) !important; background: var(--article-surface) !important; border-radius: 12px; }
body .mobile-events { padding: 24px !important; border: 1px solid var(--article-line); }
body :is(.mobile-events p, .mobile-events div, .event-sequence, .event-sequence p,
  .event-sequence > span, .event-sequence small) { color: var(--article-muted) !important; border-color: var(--article-line) !important; }
body :is(.mobile-events strong, .event-sequence strong) { white-space: normal !important; overflow-wrap: anywhere; color: var(--article-ink) !important; }
body .mobile-events strong { font: 600 var(--article-component)/1.4 Arial, "Helvetica Neue", "Segoe UI", sans-serif !important; }
body .mobile-data { overflow-x: auto; }
body .mobile-data :is(th, td) { padding: 16px 8px !important; white-space: normal; overflow-wrap: anywhere; }
body .mobile-data table { table-layout: fixed; min-width: 0 !important; }

body :is(.faq details, details) { border-color: var(--article-line) !important; }
body :is(.faq summary, summary) { color: var(--article-ink) !important; padding-block: 24px !important; }
body .faq summary::after { color: var(--article-accent) !important; font-size: var(--article-component) !important; transform: none !important; }
body :is(footer, .footer) { padding: 48px 0 !important; gap: 32px !important; color: var(--article-muted) !important; border-color: var(--article-line) !important; }
body :is(.footer-title em, .footer-line) { color: var(--article-ink) !important; }
body :is(.footer-links, .footer nav) { gap: 8px 24px !important; }
body :is(.footer-links a, .footer nav a) { padding-block: 8px; }
body :is(a, summary, button, .table-wrap):focus-visible { outline: 3px solid var(--article-accent) !important; outline-offset: 4px !important; }
body :is(.skip, .skip-note, .skip-link):focus { background: var(--article-ink) !important; color: var(--article-surface) !important; border-color: var(--article-accent) !important; border-radius: 12px; }

@media (max-width: 1000px) {
  body.velocity-editorial .article-hero { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  body .chapter-label { display: none; }
}
@media (max-width: 760px) {
  :root { --article-display: 48px; --article-heading: 32px; }
  body :is(.site-header, main, footer, .shell) { width: calc(100% - 48px) !important; }
  body :is(.site-header, .topbar) { align-items: flex-start; flex-wrap: wrap; padding-block: 16px; gap: 8px 16px; }
  body .brand { gap: 8px !important; }
  body :is(.brand-sub, .brand small) { max-width: 24ch; }
  body :is(.back, .back-tool) { min-height: 48px; }
  body :is(.hero, .article-hero) { padding: 32px 0 !important; }
  body :is(.hero h1, .article-hero h1) { max-width: 100% !important; }
  body :is(.hero h1, .article-hero h1) { font-size: var(--article-heading) !important; line-height: 1.16 !important; }
  body :is(.article-section, main.shell > section) { padding-block: 32px !important; }
  body :is(.article-grid, .measure-grid, .stats, .result, .findings, .conditions,
    .velocity-cards, .tempo-cards, .pitch-cards, .evidence-cards, .evidence-list) { grid-template-columns: minmax(0, 1fr) !important; }
  body :is(.article-card, .measure-grid article, .stats article, .result article,
    .finding, .conditions article, .competitors article, .velocity-cards article,
    .tempo-cards article, .pitch-cards article, .evidence-cards article,
    .mobile-results article, .evidence-list li) { padding: 24px !important; }
  body .hero-specimen { padding: 24px !important; }
  body .specimen-numbers { gap: 8px; }
  body :is(.specimen-label, .specimen-footer) { flex-wrap: wrap; gap: 8px; }
  body :is(.specimen-numbers span, .specimen-scale) { overflow-wrap: anywhere; }
  body :is(.velocity-figure, .evidence-figure, .pitch-figure, .boundary-figure, .tempo-figure, .flow-figure) { padding: 16px !important; }
  body :is(footer, .footer) { flex-direction: column; padding-block: 32px !important; }
  body .footer-links { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (prefers-reduced-motion: reduce) {
  html, body *, body *::before, body *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Legacy mobile summaries used local important sizes. Keep the shared body tier. */
body .mobile-events p, body .mobile-results p,
body .mobile-data p, body .event-sequence p {
  font-size: var(--article-body) !important;
  color: var(--article-muted) !important;
}

/* Information pages share the article system; all rules stay within legal copy. */
.legal-page {
  min-height: 0 !important;
  padding: 64px 0 48px !important;
}
.legal-copy { max-width: 79ch; }
.legal-copy .eyebrow { margin: 0 0 16px; }
.legal-copy h1 {
  max-width: 100%;
  margin: 0 0 32px !important;
  color: var(--article-ink);
  font: 600 var(--article-heading)/1.16 Arial, "Helvetica Neue", "Segoe UI", sans-serif !important;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.legal-copy h2 {
  margin: 32px 0 16px !important;
  font: 600 var(--article-component)/1.4 Arial, "Helvetica Neue", "Segoe UI", sans-serif !important;
  letter-spacing: -.025em;
}
.legal-copy :is(p, li) {
  max-width: 79ch;
  margin: 0 0 24px;
  overflow-wrap: anywhere;
}
.legal-copy a { overflow-wrap: anywhere; word-break: normal; }
.legal-copy > :last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .legal-page { padding: 32px 0 !important; }
}

/* Locally served Syne display face, shared with the homepage. */
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./fonts/syne-latin-wght.woff2") format("woff2");
}
:root { --article-display-face: "Syne", Arial, "Helvetica Neue", "Segoe UI", sans-serif; }
body :is(.hero h1, .article-hero h1, .legal-copy h1, h2),
body :is(.hero h1, .article-hero h1, .legal-copy h1, h2) * {
  font-family: var(--article-display-face) !important;
}