/* News listing and accepted article-detail composition. */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.news-card { display: flex; min-width: 0; flex-direction: column; padding-top: 1.4rem; border-top: 1px solid currentColor; }
.news-card__index { display: block; margin-bottom: 1.5rem; font-size: .8rem; }
.news-card h3 { max-width: 22ch; font-size: 1.35rem; line-height: 1.4; }
.news-card p { margin-top: 1rem; font-size: .95rem; }
.news-card .text-link { align-self: flex-start; margin-top: auto; padding-top: 1.5rem; }

.article-header { max-width: 850px; }
.article-header h1 { max-width: 22ch; }
.article-summary { margin-top: 1.5rem; }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: 2rem; font-size: .8125rem; }
.breadcrumbs a { font-weight: 600; }
.article-body { max-width: 850px; margin-inline: auto; }
.article-body .prose { max-width: 65ch; }
.prose p { line-height: 1.85; }
.prose h2 { margin-top: 2.75rem; font-size: 1.55rem; line-height: 1.4; }
.prose .article-section-meta { margin-top: .65rem; color: var(--color-muted); font-size: .82rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.article-references { display: grid; gap: 1rem; margin-top: 1.5rem; padding-left: 1.25rem; }
.article-references li { padding-left: .35rem; line-height: 1.7; }
.article-references a { overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 4px; }
.article-return { border-top: var(--border); }

@media (max-width: 760px) {
  .news-grid { grid-template-columns: 1fr; gap: 2rem; }
  .news-card { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: .5rem 1rem; }
  .news-card > * { min-width: 0; }
  .news-card__index { margin: 0; padding-top: .3rem; }
  .news-card h3, .news-card p, .news-card .text-link { grid-column: 2; max-width: 100%; }
  .news-card p { margin-top: .5rem; }
  .news-card .text-link { margin-top: .5rem; padding-top: 0; }
}

@media (max-width: 580px) {
  .article-header h1 { font-size: 2rem; }
  .prose h2 { font-size: 1.35rem; }
}