/* Blog pages: /blog/ and every post under it.
   Shared here so a post page carries only its content. How to add a post: BLOG.md. */

.blog-wrap { max-width: 720px; margin: 0 auto; padding: 3rem 1.25rem 4rem; }
.blog-wrap h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.15; margin: 0 0 .75rem; }
.blog-meta { color: #6b7280; font-size: .875rem; margin-bottom: 2.5rem; }
.blog-body { font-size: 1.0625rem; line-height: 1.75; }
.blog-body h2 { margin: 2.5rem 0 .75rem; font-size: 1.5rem; }
.blog-body h3 { margin: 2rem 0 .5rem; font-size: 1.2rem; }
.blog-body p, .blog-body ul, .blog-body ol { margin: 0 0 1.25rem; }
/* The marketing stylesheet does `ul, ol { list-style: none }` globally, which
   is right for its nav and feature grids and wrong for prose: a markdown
   bullet list rendered as unindented plain lines. Restored inside .blog-body
   only, so nothing else on the site is affected. */
.blog-body ul { list-style: disc; padding-left: 1.4rem; }
.blog-body ol { list-style: decimal; padding-left: 1.4rem; }
.blog-body li { margin: 0 0 .4rem; }
.blog-body li::marker { color: #9ca3af; }
.blog-body img { max-width: 100%; height: auto; border-radius: 10px; }
.blog-body pre { overflow-x: auto; padding: 1rem; border-radius: 10px; background: #16191a; color: #e5e7eb; }
.blog-body code { font-size: .9em; }
.blog-body blockquote { margin: 0 0 1.25rem; padding-left: 1rem; border-left: 3px solid #d1d5db; color: #4b5563; }
.post-card { display: block; padding: 1.5rem 0; border-bottom: 1px solid #e5e7eb; text-decoration: none; color: inherit; }
.post-card:hover h2 { text-decoration: underline; }
.post-card h2 { margin: 0 0 .35rem; font-size: 1.25rem; }
.post-card p { margin: 0; color: #4b5563; }
.blog-simple-header { border-bottom: 1px solid #e5e7eb; }
.blog-simple-header .inner { max-width: 720px; margin: 0 auto; padding: 1rem 1.25rem; display: flex; align-items: center; gap: .5rem; }
.blog-simple-header a { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: inherit; font-weight: 700; }