.articles-hero {
  padding: calc(var(--header-h) + 76px) 0 68px;
  background: var(--color-navy);
  color: #fff;
}
.articles-hero .eyebrow { color: var(--color-gold-soft); }
.articles-hero .eyebrow::before { background: var(--color-gold-soft); }
.articles-hero h1 { color: #fff; max-width: 13ch; }
.articles-hero .lede { color: rgba(255,255,255,.72); max-width: 62ch; }
.articles-section { padding-block: clamp(68px, 8vw, 112px); }
.articles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.article-card { background: #fff; border: 1px solid var(--color-line); display: flex; flex-direction: column; min-height: 100%; }
.article-card__image { aspect-ratio: 16/9; width: 100%; object-fit: cover; background: #E9E7E0; }
.article-card__body { padding: 26px; display: flex; flex: 1; flex-direction: column; }
.article-card__meta { color: var(--color-gold); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.article-card h2 { font-size: var(--step-2); margin-top: 12px; }
.article-card p { color: var(--color-graphite-soft); }
.article-card__link { color: var(--color-navy); font-weight: 700; margin-top: auto; }
.articles-empty { padding: 42px; border: 1px solid var(--color-line); background: #fff; text-align: center; }
.article-page { padding: calc(var(--header-h) + 72px) 0 96px; }
.article-page__header, .article-page__content { max-width: 780px; margin-inline: auto; }
.article-page__header { margin-bottom: 38px; }
.article-page__header h1 { font-size: clamp(2.4rem, 5vw, 4.5rem); }
.article-page__cover { width: min(980px, 100%); max-height: 560px; object-fit: cover; margin: 0 auto 48px; }
.article-page__content { font-size: 1.08rem; }
.article-page__content h2, .article-page__content h3 { margin-top: 1.6em; }
.article-page__content a { color: var(--color-navy-soft); text-decoration: underline; }
.article-page__content blockquote { border-left: 4px solid var(--color-gold); margin: 1.6em 0; padding: 8px 0 8px 22px; color: var(--color-graphite-soft); }
.article-page__back { display: inline-block; margin-bottom: 28px; color: var(--color-gold); font-weight: 700; }
@media (max-width: 900px) { .articles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .articles-grid { grid-template-columns: 1fr; } .articles-hero { padding-top: calc(var(--header-h) + 52px); } }