/* Shared editorial system, measured from the AI Supervisor publication.
   Scoped to blog pages, including the two older generated announcements.
   Surface colors come from surfaces.css; route sheets cannot change the scale. */
body.blog-site :is(.article-masthead, .article-breadcrumb-bar, .blog-index-hero) {
  background: var(--ui-surface);
}

body.blog-site .article-masthead { padding-block: clamp(48px, 5vw, 64px); }
body.blog-site .article-title {
  font-family: var(--font);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.022em;
  text-wrap: balance;
}
body.blog-site .article-dek {
  margin-top: 12px;
  color: var(--ui-muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-wrap: pretty;
}
body.blog-site .article-cover-media > img { display: block; width: 100%; height: auto; }
body.blog-site .article-body {
  --article-flow-text: 16px;
  --article-flow-heading: 16px;
  --article-flow-block: 48px;
  --article-flow-subsection: 32px;
  --article-flow-section: 48px;
  font-size: 18px;
  line-height: 1.58;
}
body.blog-site .article-body h2,
body.blog-site :is(.blog-section-head, .article-end-head, .closer) h2 {
  font-size: clamp(24px, 2.2vw, 28px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.018em;
  text-wrap: balance;
}
body.blog-site .article-body h3 {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}

/* One figure surface for charts, diagrams and images. Keep labels as HTML
   where possible; nested tables use the canvas inset below. */
:where(body.blog-site .editorial-figure) { margin: 0; }
body.blog-site .article-body :is(.editorial-figure, .article-figure, .cqc-figure) {
  padding: 32px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: var(--ui-surface);
  color: var(--ui-ink);
  min-width: 0;
}
body.blog-site .article-body :is(.editorial-figure-title, .cqc-figure-title) {
  margin: 0;
  color: var(--ui-ink);
  font-family: var(--font);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
}
body.blog-site .article-body :is(.editorial-figure-description, .cqc-figure-sub) {
  margin: 8px 0 0;
  color: var(--ui-muted);
  font-size: 14px;
  line-height: 1.6;
}
body.blog-site .article-body .editorial-figure-note {
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--ui-active);
  color: var(--ui-muted);
  font-size: 14px;
  line-height: 1.6;
  text-wrap: pretty;
}
body.blog-site .editorial-table {
  margin-top: 24px;
  padding: 16px 24px;
  border: 1px solid var(--ui-active);
  border-radius: 10px;
  background: var(--ui-canvas);
  min-width: 0;
}
body.blog-site .editorial-table-scroll { overflow-x: auto; scrollbar-width: thin; }
body.blog-site .editorial-table table {
  width: 100%;
  border-collapse: collapse;
  color: var(--ui-ink);
  font-size: 14px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  text-align: left;
}
body.blog-site .editorial-table :is(th, td) { padding: 12px; vertical-align: top; border-bottom: 1px solid var(--ui-active); }
body.blog-site .editorial-table th { font-weight: 500; }
body.blog-site .editorial-table caption { padding: 0 12px 12px; color: var(--ui-ink); font-size: 16px; font-weight: 500; text-align: left; }
body.blog-site .editorial-table thead th { color: var(--ui-muted); }
body.blog-site .editorial-table tbody tr:last-child > * { border-bottom: 0; }
body.blog-site .editorial-table-scroll:focus-visible { outline: 2px solid var(--ui-ink); outline-offset: 4px; border-radius: 4px; }
body.blog-site :is(.cqc-chart, .cqc-legend) { font-family: var(--font); font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  body.blog-site .article-masthead { padding-block: 32px 48px; }
  body.blog-site .article-body { --article-flow-block: 32px; }
  body.blog-site .article-body :is(.editorial-figure, .article-figure, .cqc-figure) { padding: 16px; }
  body.blog-site .editorial-table { padding: 12px 16px; }
}
@media (max-width: 360px) {
  body.blog-site .article-title { font-size: 36px; }
}