/* K12 Notes 博客文章样式 · 与 style.css 共用变量 */

.blog-article{max-width:720px}
.blog-article h1{font-size:1.8rem;font-weight:700;line-height:1.4;margin-bottom:8px}
.blog-article .meta{color:var(--muted);font-size:.88rem;margin-bottom:32px}
.blog-article .lead{
  font-size:1.05rem;line-height:1.85;color:var(--fg);
  padding:18px 22px;margin:24px 0 36px;
  background:var(--card-bg);
  border-left:3px solid var(--english);
  border-radius:6px;
}
.blog-article h2{
  font-size:1.32rem;font-weight:600;
  margin:48px 0 16px;letter-spacing:.01em;
  padding-bottom:6px;border-bottom:1px solid var(--border);
}
.blog-article h3{
  font-size:1.08rem;font-weight:600;
  margin:32px 0 14px;color:var(--fg);
}
.blog-article p{
  font-size:.98rem;line-height:1.95;
  margin-bottom:18px;
}
.blog-article table{
  width:100%;border-collapse:collapse;
  margin:24px 0;font-size:.92rem;
  background:var(--card-bg);
  border-radius:8px;overflow:hidden;
  box-shadow:var(--card-shadow);
}
.blog-article table th,
.blog-article table td{
  padding:10px 14px;
  border:1px solid var(--border);
  text-align:left;vertical-align:top;
}
.blog-article table th{
  background:var(--bg);font-weight:600;
  font-size:.88rem;letter-spacing:.02em;
}
.blog-article table td{line-height:1.7}
.blog-article .article-meta{
  margin-top:48px;padding-top:24px;
  border-top:1px solid var(--border);
  font-size:.85rem;color:var(--muted);
  line-height:1.7;font-style:italic;
}
.blog-article .read-next{
  margin-top:24px;padding:16px 20px;
  background:var(--card-bg);border:1px solid var(--border);
  border-radius:8px;font-size:.88rem;
  text-align:center;color:var(--muted);
}
.blog-article .read-next a{
  color:var(--english);text-decoration:none;
  font-weight:600;margin:0 4px;
}
.blog-article .read-next a:hover{text-decoration:underline}

/* 文章中的 figure / SVG */
.blog-article figure{
  margin:32px 0;text-align:center;
}
.blog-article figure svg{
  max-width:100%;height:auto;
}
.blog-article figcaption{
  margin-top:12px;font-size:.85rem;color:var(--muted);
  font-style:italic;
}

@media(max-width:560px){
  .blog-article h1{font-size:1.5rem}
  .blog-article h2{font-size:1.18rem}
  .blog-article table{font-size:.85rem}
  .blog-article table th,
  .blog-article table td{padding:8px 10px}
}