.blog-posts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-posts li {
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}

.blog-posts li:first-child { border-top: 1px solid var(--border); }
.blog-post-date { color: var(--text-muted); font-size: 0.8rem; }
.blog-post-title { font-size: 0.9rem; font-weight: 500; margin: 3px 0 4px; }
.blog-post-title a { color: var(--text-main); }
.blog-post-title a:hover { color: var(--accent); }
.blog-post-description { font-size: 0.82rem; margin: 0; }
.blog-post-tags { color: var(--text-muted); font-size: 0.75rem; margin: 6px 0 0; }
.blog-view-all { font-size: 0.88rem; margin: 18px 0 0; text-align: right; }

.blog-post { margin-bottom: 34px; }
.blog-post li { color: var(--text-dim); margin-bottom: 5px; }
.blog-post h2 { margin: 2em 0 0.5em; }
.blog-post h3 { margin: 1.5em 0 0.4em; font-size: 1rem; }
.blog-post pre { overflow-x: auto; padding: 16px; border: 1px solid var(--border); border-radius: 7px; background: var(--card-bg); }
.blog-post code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.blog-post :not(pre) > code { padding: 0.15em 0.35em; border-radius: 4px; background: var(--card-bg); }
.blog-post blockquote { border-left: 2px solid var(--accent); margin-left: 0; padding-left: 18px; color: var(--text-dim); }
.blog-post img { max-width: 100%; height: auto; }