.blog-main { display: block; min-height: 0; width: 100%; max-width: 780px; margin: 0 auto; padding: 80px 0 100px; }
.blog-title { font-size: clamp(36px, 6vw, 64px); margin: 22px 0 32px; line-height: 1.12; overflow-wrap: anywhere; }
.empty-state, .post-excerpt { color: var(--muted); line-height: 1.7; }
.post-list { margin-top: 42px; }
.post-card { padding: 28px 0; border-top: 1px solid var(--line); }
.post-card h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 400; line-height: 1.3; margin: 12px 0; }
.post-card a, .footer a { color: inherit; text-decoration: none; }
.post-card a:hover { color: var(--accent); }
.post-card p { color: var(--muted); line-height: 1.7; margin-bottom: 0; }
time { color: var(--muted); font: 12px ui-monospace, monospace; }
.back-link { display: inline-block; color: var(--accent); font-size: 14px; text-decoration: none; margin-bottom: 36px; }
.prose { font-size: 18px; line-height: 1.8; overflow-wrap: anywhere; }
.prose h2, .prose h3 { font-weight: 500; line-height: 1.3; margin-top: 2em; }
.prose a { color: var(--accent); text-underline-offset: 4px; }
.prose blockquote { margin: 2em 0; padding: 8px 0 8px 24px; border-left: 2px solid var(--accent); color: var(--muted); }
.prose pre { padding: 20px; overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; }
.prose code { font-family: ui-monospace, monospace; }
.prose img, .blog-article img { max-width: 100%; height: auto; border-radius: 6px; }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.prose th, .prose td { padding: 10px 16px; border: 1px solid var(--line); text-align: left; }
@media (max-width: 760px) { .blog-main { padding: 48px 0 64px; } .prose { font-size: 16px; } }