/* Blog pages share the site palette, header, and saved theme preference. */
.blog-index, .blog-post { max-width: 860px; padding-top: clamp(2.5rem, 7vw, 5rem); }
.blog-index .page-header, .blog-post .page-header { margin-bottom: 2.5rem; }
.blog-list { list-style: none; margin: 0; padding: 0; }
.blog-list li { border-top: 1px solid var(--line); padding: 2rem 0; }
.blog-list h2 { margin: .5rem 0 1rem; }
.blog-list time, .blog-updated { color: var(--fg-quiet); font-family: var(--font-mono); font-size: .85rem; }
.blog-empty { border-top: 1px solid var(--line); padding-top: 2rem; color: var(--fg-soft); }
.blog-back { margin-bottom: 2rem; }
.blog-post h1 { overflow-wrap: anywhere; }
.blog-hero { display: block; width: 100%; height: auto; margin: 0 0 2.5rem; border-radius: 6px; }
.blog-body { overflow-wrap: anywhere; }
.blog-body p, .blog-body li { line-height: 1.8; }
.blog-body h2 { margin: 2.5rem 0 1rem; }
.blog-body h3 { margin: 2rem 0 1rem; }
.blog-body blockquote { margin: 2rem 0; padding: .5rem 1.5rem; border-left: 2px solid var(--accent); color: var(--fg-soft); }
.blog-body pre { overflow-x: auto; padding: 1rem; }
.blog-body pre code { padding: 0; border: 0; background: none; }
.blog-body table { display: block; overflow-x: auto; border-collapse: collapse; }
.blog-body th, .blog-body td { border: 1px solid var(--line); padding: .5rem .75rem; }
.blog-body img { display: block; margin: 2rem auto; }
.blog-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }