.article-hero {
  padding: 64px 0 48px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(224, 122, 58, .14), transparent 50%),
    var(--bg-soft);
}
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  color: #6f7f91;
  font-size: .74rem;
}
.breadcrumbs a:hover { color: var(--copper-2); }
.article-hero h1 {
  max-width: 900px;
  margin: 14px 0 18px;
  font-family: var(--display);
  font-size: clamp(2.1rem, 5vw, 3.8rem);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -.04em;
}
.article-deck { max-width: 760px; color: var(--muted); font-size: 1.04rem; }
.article-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 22px; color: #6f7f91; font-size: .75rem; }
.article-meta a { color: var(--copper-2); }
.article-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 760px);
  gap: 48px;
  align-items: start;
  padding-block: 56px 92px;
}
.article-body { font-size: 1rem; color: #c5d0db; }
.article-body > p:first-child { font-size: 1.12rem; color: var(--ink); }
.article-body h2 {
  margin: 42px 0 14px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -.03em;
}
.article-body h3 { margin: 28px 0 10px; color: var(--ink); font-size: 1.12rem; }
.article-body p { margin-bottom: 18px; }
.article-body ul, .article-body ol { margin: 0 0 22px; padding-left: 22px; }
.article-body li { margin-bottom: 8px; }
.article-body a {
  color: var(--copper-2);
  font-weight: 750;
  text-decoration: underline;
  text-decoration-color: rgba(224, 122, 58, .4);
  text-underline-offset: 3px;
}
.article-body strong { color: var(--ink); }
.article-callout {
  margin: 26px 0;
  padding: 20px 22px;
  border: 1px solid rgba(224, 122, 58, .28);
  border-left: 3px solid var(--copper);
  border-radius: 4px;
  background: rgba(224, 122, 58, .08);
}
.article-callout b { display: block; margin-bottom: 5px; color: var(--copper-2); }
.article-table { width: 100%; margin: 22px 0; border-collapse: collapse; font-size: .84rem; }
.article-table th, .article-table td { padding: 12px 14px; border: 1px solid var(--line); text-align: left; }
.article-table th { color: var(--ink); background: rgba(224, 122, 58, .12); }
.article-table td { color: #c5d0db; }
.article-sidebar { position: sticky; top: 92px; display: grid; gap: 14px; order: -1; }
.side-box {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.side-box h2 { margin: 0 0 12px; font-size: .9rem; }
.side-box p, .side-box li { color: var(--muted); font-size: .73rem; }
.side-box ul { margin: 0; padding-left: 17px; }
.side-box li { margin-bottom: 7px; }
.related-link { display: block; margin-top: 12px; color: var(--copper-2); font-size: .75rem; font-weight: 750; }
@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; gap: 32px; }
  .article-sidebar { position: static; order: 0; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .article-hero { padding: 48px 0 36px; }
  .article-layout { padding-block: 40px 68px; }
  .article-sidebar { grid-template-columns: 1fr; }
  .article-body { font-size: .94rem; }
  .article-table { display: block; overflow-x: auto; }
}