.article-hero { padding: clamp(58px, 8vw, 108px) 5vw 72px; background: #000; color: #fff; }
.article-hero-inner { max-width: 1080px; margin: 0 auto; }
.article-hero h1 { max-width: 980px; font-size: clamp(38px, 5.5vw, 68px); }
.article-deck { max-width: 790px; margin: 26px 0 0; color: #cbd7d6; font-size: clamp(18px, 2vw, 23px); }
.article-meta { margin: 24px 0 0; color: #99aaa8; font-size: 14px; }
.article-layout { max-width: 1180px; margin: 0 auto; padding: clamp(60px, 8vw, 110px) 5vw; display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: clamp(50px, 8vw, 100px); align-items: start; }
.article-body { max-width: 760px; }
.article-body h2 { margin: 64px 0 20px; font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -.03em; }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { margin: 36px 0 12px; font-size: 24px; line-height: 1.2; }
.article-body p, .article-body li { color: #4f5961; font-size: 18px; line-height: 1.72; }
.article-body ul, .article-body ol { padding-left: 24px; }
.article-body li { margin: 10px 0; }
.article-body strong { color: #111; }
.article-body figure { margin: 42px 0; }
.article-body figure img { width: 100%; height: auto; display: block; border-radius: 14px; }
.article-body figcaption { margin-top: 12px; color: #68737b; font-size: 14px; }
.article-callout { margin: 38px 0; padding: 26px 28px; border-left: 5px solid var(--teal); background: #eef1f2; }
.article-callout p { margin: 0; color: #253033; }
.article-table { width: 100%; margin: 32px 0; border-collapse: collapse; font-size: 16px; }
.article-table th, .article-table td { padding: 15px; border: 1px solid #d9dde0; text-align: left; vertical-align: top; }
.article-table th { background: #111; color: #fff; }
.article-table td { color: #4f5961; }
.article-aside { position: sticky; top: 24px; padding: 28px; border-radius: 14px; background: #000; color: #fff; }
.article-aside h2 { margin: 0 0 14px; font-size: 26px; }
.article-aside p { color: #b9c7c6; }
.article-aside ul { padding: 0; list-style: none; }
.article-aside li { padding: 11px 0; border-bottom: 1px solid #303a3a; }
.article-aside a:not(.button) { color: #fff; text-underline-offset: 4px; }
.article-aside .button { width: 100%; margin-top: 18px; text-align: center; }
.article-related { padding: 70px 5vw; background: #eef1f2; }
.article-related-inner { max-width: 1080px; margin: 0 auto; }
.article-related h2 { margin: 0 0 24px; font-size: clamp(30px, 4vw, 44px); }
.article-related a { font-weight: 800; text-underline-offset: 4px; }
@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-aside { position: static; }
}
@media (max-width: 620px) {
  .article-body p, .article-body li { font-size: 17px; }
  .article-table { display: block; overflow-x: auto; }
}