.article-layout {
  max-width: 1210px !important;
  display: grid;
  grid-template-columns: minmax(0, 810px) 330px;
  gap: 34px;
  align-items: start;
}
.article-layout .article-shell { max-width: none; margin: 0; padding: 0; }
.article-layout .article-cover { width: 100%; aspect-ratio: 1200/630; object-fit: cover; border-radius: 18px; }
.article-sidebar { position: sticky; top: 92px; display: grid; gap: 16px; }
.article-sidebar > nav,
.article-sidebar > section { padding: 21px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: 0 12px 34px rgba(42, 27, 85, .055); }
.article-sidebar small { color: var(--purple); font-size: 10px; font-weight: 850; letter-spacing: .13em; }
.article-sidebar h2 { margin: 7px 0 13px; font: 750 20px Manrope; }
.article-toc ol { margin: 0; padding: 0; display: grid; gap: 3px; list-style: none; counter-reset: toc; }
.article-toc li { counter-increment: toc; }
.article-toc a { padding: 9px 0; display: grid; grid-template-columns: 26px 1fr; gap: 6px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.45; text-decoration: none; }
.article-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--purple); font-size: 9px; font-weight: 850; }
.article-toc a:hover { color: var(--purple); }
.article-side-cta { background: linear-gradient(145deg, rgba(123, 66, 255, .1), rgba(7, 141, 245, .07)) !important; }
.article-side-cta p { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.article-side-cta > a,
.article-side-related .more-link { color: var(--purple); font-size: 12px; font-weight: 850; text-decoration: none; }
.article-side-related > a:not(.more-link) { padding: 11px 0; display: grid; grid-template-columns: 88px 1fr; gap: 11px; align-items: center; border-top: 1px solid var(--line); color: var(--ink); font-size: 12px; font-weight: 750; line-height: 1.42; text-decoration: none; }
.article-side-related img { width: 88px; height: 58px; object-fit: cover; border-radius: 9px; }
.article-side-related .more-link { display: inline-block; margin-top: 12px; }
.article-layout .review-note { margin-bottom: 22px; }
.article-layout .article-cta div { display: flex; gap: 8px; flex-wrap: wrap; }
.article-layout .article-cta .secondary { border: 1px solid rgba(111, 59, 232, .25); background: #fff; color: var(--purple); }
.article-layout .prose h2,
.article-layout .prose h3 { scroll-margin-top: 105px; }
@media (max-width: 1020px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { position: static; grid-template-columns: 1fr 1fr; }
  .article-toc { grid-column: 1/-1; }
  .article-toc ol { grid-template-columns: 1fr 1fr; gap: 0 18px; }
}
@media (max-width: 650px) {
  .article-layout { padding-inline: 12px; }
  .article-sidebar { grid-template-columns: 1fr; }
  .article-toc { grid-column: auto; }
  .article-toc ol { grid-template-columns: 1fr; }
  .article-layout .article-cover { border-radius: 13px; }
}
