/* Blog-specific styles, layered on top of site.css */
.article-main { padding: 48px 0 96px; background: var(--brand-white); }
.article-body { max-width: 760px; }
.article-body .eyebrow { color: var(--brand-red); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; margin: 0 0 12px; }
.article-body h1 { font-size: 38px; line-height: 1.18; margin: 0 0 16px; }
.article-lead { font-size: 18px; color: var(--muted); margin: 0 0 12px; }
.article-byline { font-size: 14px; color: var(--muted); margin: 0 0 28px; font-weight: 500; }
.article-hero { margin: 0 0 32px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.article-hero img { width: 100%; height: auto; display: block; }
.article-prose p, .article-prose .copy { font-size: 17px; line-height: 1.7; margin: 0 0 18px; }
.article-prose h2 { font-size: 24px; margin: 32px 0 12px; }
.article-prose h3 { font-size: 19px; margin: 24px 0 10px; }
.article-prose a { color: var(--brand-red); text-decoration: underline; }
.article-prose ul, .article-prose ol { margin: 0 0 18px; padding-left: 24px; }
.article-prose li { font-size: 17px; line-height: 1.7; margin: 0 0 8px; }
.article-rule { border: 0; border-top: 1px solid var(--line); margin: 36px 0 18px; }
.article-source { font-size: 14px; color: var(--muted); margin: 0 0 6px; }
.article-photo-credit { font-size: 12px; color: var(--muted); margin: 0 0 32px; }
.article-cta { background: var(--surface); border-radius: var(--radius-lg); padding: 28px; margin: 32px 0 0; text-align: center; }
.article-cta h3 { margin: 0 0 8px; font-size: 20px; }
.article-cta p { margin: 0 0 18px; color: var(--muted); }

/* Index */
.blog-hero h1 { letter-spacing: 0.02em; }
.blog-row { display: grid; grid-template-columns: 280px 1fr; gap: 24px; padding: 22px; margin: 0 0 18px; align-items: center; }
.blog-row-image img { width: 100%; height: 180px; object-fit: cover; border-radius: var(--radius-md); }
.blog-row-body h2 { font-size: 22px; margin: 6px 0 10px; }
.blog-row-body h2 a { color: var(--brand-ink); }
.blog-row-body h2 a:hover { color: var(--brand-red); }
.blog-row-body .eyebrow { color: var(--muted); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 720px) {
  .blog-row { grid-template-columns: 1fr; }
  .blog-row-image img { height: 220px; }
  .article-body h1 { font-size: 30px; }
}