
.article-hero { padding: 9rem 0 3.5rem; }
.article-hero .hero-content { max-width: 1000px; }
.article-title { font-size: clamp(1.9rem, 3.3vw, 3.2rem); line-height: 1.5; letter-spacing: .015em; }
.article-hero .hero-text { max-width: 780px; line-height: 1.9; margin-bottom: 1.5rem; }
.article-hero + .section { padding: 3rem 0 6rem; }
.markdown-body { line-height: 1.95; }
.article-card { min-width: 0; }
.table-scroll { max-width: 100%; overflow-x: auto; margin: 1.5rem 0; border: 1px solid #e5e7eb; }
.markdown-body table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: .875rem; line-height: 1.7; }
.markdown-body caption { padding: 14px; text-align: left; font-weight: 700; color: #374151; }
.markdown-body th, .markdown-body td { padding: 12px; border: 1px solid #e5e7eb; text-align: left; vertical-align: top; }
.markdown-body thead th { background: #f3f4f6; }
.markdown-body tbody th { width: 24%; font-weight: 600; }
.markdown-body tbody tr:nth-child(even) { background: #fafafa; }
.table-scroll:focus-visible { outline: 2px solid #7c3aed; outline-offset: 3px; }
.markdown-body h2 { font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.6; border-bottom: 1px solid #e5e7eb; padding-bottom: .75rem; margin-top: 3.25rem; }
.markdown-body h3 { line-height: 1.6; font-size: 1.2rem; }
.markdown-body h2, .markdown-body h3 { scroll-margin-top: 110px; }
.article-aside { position: static; }
.article-toc .toc-list { gap: .9rem; }
.toc-link { font-size: .875rem; }
.mobile-toc { display: none; }
@media(min-width:1024px) { .article-toc { max-height: none; } }
@media(max-width:1023px) {
  .mobile-toc { display: block; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid #e5e7eb; }
  .mobile-toc summary { cursor: pointer; font-weight: 700; }
  .mobile-toc .toc-list { padding-top: 1rem; }
  .article-toc { display: none; }
}
@media(max-width:600px) {
  .nav-inner { padding: 18px 0; }
  .nav-links { gap: 15px; font-size: .75rem; }
  .site-nav .container { padding-left: 18px; padding-right: 18px; }
  .site-nav .logo { height: 26px; }
  .article-hero { padding: 7rem 0 2rem; }
  .container { padding-left: 18px; padding-right: 18px; }
  .article-card { padding: 24px 20px; }
  .article-hero + .section { padding-top: 1.5rem; }
  .article-title { font-size: 1.9rem; }
  .hero-text { font-size: 1rem; }
  .markdown-body { font-size: 1rem; }
  .post-meta-row { font-size: .8rem; }
}
