/* ═══════════════════════════════════════════════════
   SECTION: related — up to three posts under an article

   The cards themselves are .art-sm from articles.css, borrowed through the
   section registry. Only the frame and the heading live here.

   The row keeps three columns even when it carries one or two cards, so a
   short row reads as "there were only two" rather than stretching a single
   card across the page and pretending to be a feature.
═══════════════════════════════════════════════════ */

#related {
  background: var(--c-bg-2);
  border-top: 1px solid var(--c-border);
  padding: var(--sp-section) 0;
}

.related-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.related-h2 {
  font-family: var(--f-display);
  font-size: var(--fs-600);
  font-weight: var(--fw-extrabold);
  letter-spacing: -.025em;
  color: var(--c-text-1);
  margin-bottom: var(--sp-8);
}

/* The cards sit on --c-bg-3 by default, which is nearly the section's own
   --c-bg-2 here. Lifting the border keeps their edges visible. */
.related-grid .art-sm { border-color: var(--c-border-hover) }

@media (max-width: 900px) {
  .related-grid { grid-template-columns: 1fr 1fr }
}

@media (max-width: 640px) {
  .related-inner { padding: 0 var(--sp-6) }
  .related-grid { grid-template-columns: 1fr }
}