.article-head {
  margin-top: var(--space-sm);
  padding: clamp(1.5rem, 5vw, 3.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: linear-gradient(140deg, rgba(110, 231, 191, 0.08), var(--ink-850) 48%);
}
.article-head__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--azure);
  margin-bottom: var(--space-md);
}
.article-head h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-5);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 20ch;
  text-wrap: balance;
}
.article-head__lead {
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.0625rem, 0.6vw + 0.95rem, 1.375rem);
  line-height: 1.45;
  color: var(--paper-dim);
  max-width: 48ch;
}
.article-head__byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fog-deep);
}

.article-hero { margin-block: var(--space-lg) var(--space-xl); }
.article-hero img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  background: var(--ink-800);
  border-radius: var(--radius-panel);
  border: 1px solid var(--line);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.25);
}
@media (max-width: 44rem) { .article-hero img { aspect-ratio: 3 / 2; } }
.article-hero figcaption {
  margin-top: var(--space-sm);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--line-hair);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--fog-deep);
}

/* The body column stays near 68 characters; asides step outside it. */
.article-body {
  max-width: 68ch;
  margin-inline: auto;
}

.pull-quote {
  margin-block: var(--space-xl);
  padding-left: var(--space-md);
  border-left: 2px solid var(--azure-deep);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  color: var(--paper);
  max-width: 26ch;
}
@media (min-width: 78rem) {
  /* Pulled into the left margin on wide screens: the text column keeps its
     measure and the quote genuinely interrupts the page. */
  .pull-quote {
    float: left;
    margin-left: -15rem;
    margin-right: var(--space-lg);
    width: 13rem;
    max-width: none;
    font-size: var(--step-2);
  }
}

.article-figure { margin-block: var(--space-xl); }
.article-figure img { width: 100%; background: var(--ink-800); border-radius: var(--radius-control); }
.article-figure figcaption {
  margin-top: var(--space-sm);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--line-hair);
  font-size: var(--step--1);
  color: var(--fog);
  line-height: 1.5;
}
.article-figure figcaption b { color: var(--paper-dim); font-weight: 500; }

.article-table {
  margin-block: var(--space-lg);
  font-size: var(--step--1);
}
.article-table caption {
  text-align: left;
  padding-bottom: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fog-deep);
}
.article-table th,
.article-table td {
  text-align: left;
  padding: 0.5rem var(--space-sm) 0.5rem 0;
  border-bottom: 1px solid var(--line-hair);
}
.article-table th { color: var(--fog); font-weight: 500; }
.article-table td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--paper-dim);
}

.article-foot {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line-strong);
}

.related-list { display: grid; gap: var(--space-md); }
@media (min-width: 48rem) { .related-list { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } }
.related-list a { display: block; }
.related-list img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--ink-800);
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-control);
}
.related-list h3 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.25;
}
.related-list a:hover h3 { color: var(--azure-bright); }
.related-list .related-kicker {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fog-deep);
}