.article-header { height: auto; min-height: 76px; flex-wrap: wrap; padding-block: 16px; }
.article-header nav { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; }
.article-header nav a { text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.article-header [aria-current] { color: var(--blue); }
.article-intro { padding: 64px 0 40px; border-bottom: 1px solid var(--line); }
.article-intro h1 { font-size: var(--step-4); max-width: 950px; }
.article-intro .lede { max-width: 720px; }
.article-eyebrow, .article-meta { color: var(--muted); font-size: .875rem; }
.article-eyebrow { color: var(--blue); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.article-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); gap: 28px; padding-block: 40px 72px; }
.article-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; }
.article-card h2 { font-size: var(--step-2); }
.article-cover { width: 100%; height: auto; border-radius: var(--r-sm); margin-bottom: 24px; }
.article-card h2 a { color: inherit; text-decoration: none; }
.article-card h2 a:hover { color: var(--blue); }
.article-body { max-width: 760px; padding-block: 40px 64px; }
.article-body h2 { font-size: var(--step-2); margin: 40px 0 16px; scroll-margin-top: 100px; }
.article-body p, .article-body li { line-height: 1.85; }
.article-summary, .article-toc { padding: 24px; background: var(--paper); border-radius: var(--r-lg); margin-bottom: 28px; }
.article-summary p { margin-bottom: 0; }
.article-toc ol { padding-left: 24px; margin-bottom: 0; }
.article-cta { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 40px; }
@media(max-width:600px) { .article-intro { padding-top: 36px; } .article-header nav { margin-left: 0; width: 100%; gap: 16px; } }