.articles-main { padding: 58px 0 120px; }
.articles-hero { padding-bottom: 64px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; align-items: end; border-bottom: 1px solid var(--line); }
.articles-hero h1 { font-size: clamp(52px, 7vw, 88px); }
.articles-hero-copy { color: var(--muted); font-size: 18px; }
.article-list { padding-top: 56px; }
.article-card { display: grid; grid-template-columns: 190px 1fr auto; gap: 36px; align-items: center; padding: 36px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; box-shadow: 0 15px 50px rgba(35,45,39,.06); }
.article-card:hover { border-color: var(--orange); transform: translateY(-2px); }
.article-card-label { color: var(--orange-dark); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.article-card h2 { margin: 0 0 12px; font-size: clamp(28px, 4vw, 44px); }
.article-card p { margin: 0; color: var(--muted); }
.article-card-action { color: var(--orange-dark); font-weight: 800; white-space: nowrap; }
.article-main { width: min(880px, calc(100% - 40px)); padding: 58px 0 120px; }
.article-header { padding-bottom: 48px; border-bottom: 1px solid var(--line); }
.article-header h1 { font-size: clamp(43px, 6vw, 72px); }
.article-meta { margin: 26px 0 0; color: var(--muted); font-size: 14px; }
.article-body { padding-top: 54px; font-size: 18px; line-height: 1.75; }
.article-body > p, .article-body > ul, .article-body > ol, .article-body > blockquote, .article-body > .table-wrap { max-width: 760px; margin-inline: auto; }
.article-body h2 { margin: 70px auto 24px; max-width: 760px; font-size: clamp(30px, 4vw, 46px); }
.article-body h3 { margin: 45px auto 18px; max-width: 760px; font-size: 27px; }
.article-body ul, .article-body ol { padding-left: 28px; }
.article-body blockquote { margin-top: 28px; margin-bottom: 28px; padding: 20px 24px; background: #e8eee4; border-left: 4px solid var(--orange); border-radius: 0 14px 14px 0; }
.article-body blockquote p { margin: 0; }
.table-wrap { overflow-x: auto; }
.article-body table { width: 100%; border-collapse: collapse; background: var(--paper); font-size: 15px; }
.article-body th, .article-body td { padding: 14px 16px; border: 1px solid var(--line); text-align: left; }
.article-body th { background: var(--green); color: white; }
.article-back { margin-top: 70px; padding-top: 30px; border-top: 1px solid var(--line); }
@media (max-width: 900px) {
  .articles-hero { grid-template-columns: 1fr; gap: 24px; }
  .article-card { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 560px) {
  .articles-main, .article-main { width: min(100% - 28px, 880px); padding-top: 38px; }
  .article-card { padding: 24px 20px; }
  .article-body { font-size: 17px; }
}