/* ── .article-body ────────────────────────────────────────────────────────────
   The reading layout. Deliberately the calmest surface in the system: no
   gradients, no texture, no accent fills. Signal appears only in links, the
   blockquote tick and inline code. Measure is capped at ~70 characters; every child
   opts out of the measure explicitly (figures, code, tables go wider).
   ─────────────────────────────────────────────────────────────────────────── */

.article-body {
  --flow: var(--space-lg);
  color: var(--text-body);
  font-size: var(--step-body-lg);
  line-height: var(--lh-reading);
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    min(var(--measure-reading), 100%)
    minmax(0, 1fr);
}

.article-body > * {
  grid-column: 2;
  min-width: 0;
}

.article-body > * + * {
  margin-top: var(--flow);
}

/* Wide children break the measure symmetrically. */
.article-body > figure,
.article-body > .article-wide,
.article-body > pre,
.article-body > .code-block,
.article-body > .table-scroll {
  grid-column: 1 / -1;
  width: min(var(--container), 100%);
  margin-inline: auto;
}

.article-body > h2 {
  font-size: var(--step-h2);
  scroll-margin-top: 100px; /* clears the sticky masthead on anchor jumps */
  margin-top: calc(var(--space-2xl) + var(--space-xs));
  padding-top: var(--space-md);
  border-top: var(--border-width) solid var(--border-hairline);
  letter-spacing: var(--track-heading);
}

.article-body > h3 {
  font-size: var(--step-h3);
  scroll-margin-top: 100px;
  margin-top: var(--space-xl);
}

.article-body > h4 {
  font-size: var(--step-h4);
  margin-top: var(--space-lg);
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.article-body > h2 + p,
.article-body > h3 + p,
.article-body > h4 + p {
  margin-top: var(--space-sm);
}

/* Opening paragraph: slightly larger, sets the tone. */
.article-body > p.article-lede {
  font-size: 1.3125rem;
  line-height: 1.62;
  color: var(--text-primary);
  font-weight: var(--weight-light);
}

.article-body strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.article-body em {
  font-style: italic;
}

.article-body a {
  color: var(--text-signal);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--signal) 45%, transparent);
}
.article-body a:hover {
  text-decoration-color: var(--signal);
}

.article-body ul,
.article-body ol {
  margin: 0;
  padding-left: 1.35em;
}
.article-body li + li {
  margin-top: var(--space-xs);
}
.article-body li::marker {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.article-body :not(pre) > code {
  font-size: 0.86em;
  padding: 0.15em 0.4em;
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
  border: var(--border-width) solid var(--border-hairline);
  color: var(--text-primary);
}

.article-body blockquote {
  margin: 0;
  padding: var(--space-xs) 0 var(--space-xs) var(--space-lg);
  border-left: var(--border-width-thick) solid var(--signal);
  font-size: 1.25rem;
  line-height: 1.55;
  font-weight: var(--weight-light);
  color: var(--text-primary);
}
.article-body blockquote p + p {
  margin-top: var(--space-sm);
}
.article-body blockquote cite {
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-style: normal;
  color: var(--text-muted);
}

.article-body figure {
  margin: 0;
}
.article-body figcaption {
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: var(--measure-reading);
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step-small);
}
.article-body th,
.article-body td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-width) solid var(--border-hairline);
  vertical-align: top;
}
.article-body th {
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}
.article-body td {
  color: var(--text-body);
}

/* Section divider: three perforations, the dot-matrix motif at rest. */
.article-divider {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  padding-block: var(--space-xl);
}
.article-divider span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-strong);
}
.article-divider span:nth-child(2) {
  background: var(--signal);
}