/* Blog index and posts. Colors, fonts, radii and shadows come from tokens.css and
   site.css; this file only sets long-form measure, rhythm and a few blog-only
   layouts. Code-block colors reuse the values from guides.css. */

.blog-wrap { max-width: 780px; }

/* ---------- Header ---------- */
.blog-head { padding-bottom: 8px; }
.blog-head .lede { max-width: none; }
.blog-crumbs {
    font-family: "JetBrains Mono", monospace;
    font-size: .8rem;
    color: var(--muted);
    margin-bottom: 18px;
}
.blog-crumbs span { margin: 0 6px; }
.blog-meta {
    font-family: "JetBrains Mono", monospace;
    font-size: .82rem;
    color: var(--muted);
    margin-top: 16px;
}
.blog-meta span { margin: 0 4px; }
.blog-feed-link { margin-top: 16px; font-weight: 600; }

/* ---------- Index ---------- */
.blog-index { padding-top: 40px; }
.blog-list { list-style: none; display: grid; gap: 22px; }
.blog-card { transition: box-shadow .18s ease; }
.blog-card:hover { box-shadow: var(--shadow); }
.blog-card .blog-meta { margin: 0 0 10px; }
.blog-card h2 { font-size: 1.5rem; margin: 0 0 10px; }
.blog-card h2 a { color: var(--heading); }
.blog-card p { color: var(--muted); margin-bottom: 14px; }
.blog-more { font-weight: 600; }

/* ---------- Post body ---------- */
.blog-post > .wrap { padding-top: 40px; }
.blog-prose { font-size: 1.07rem; line-height: 1.75; color: var(--ink); }
.blog-prose > * + * { margin-top: 1.1em; }
.blog-prose h2 { font-size: 1.75rem; margin-top: 2.1em; margin-bottom: -.2em; }
.blog-prose h3 { font-size: 1.25rem; margin-top: 1.7em; margin-bottom: -.35em; }
.blog-prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.blog-prose strong { color: var(--heading); }
.blog-prose ul, .blog-prose ol { padding-left: 1.4em; }
.blog-prose li + li { margin-top: .45em; }
.blog-prose li::marker { color: var(--pink-deep); }

.blog-prose code {
    font-family: "JetBrains Mono", monospace;
    font-size: .86em;
    background: var(--blue-soft);
    color: var(--ink);
    padding: 2px 6px;
    border-radius: 4px;
}
.blog-prose pre {
    background: var(--navy);
    color: #cfe0ff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 18px;
    overflow-x: auto;
    font-size: .88rem;
    line-height: 1.6;
}
.blog-prose pre code { background: none; color: inherit; padding: 0; font-size: inherit; border-radius: 0; }
.blog-prose pre .k { color: #7fd1ff; }
.blog-prose pre .s { color: var(--pink-soft); }
.blog-prose pre .c { color: #6b7a9e; }

.blog-prose .notice { margin-bottom: 0; line-height: 1.65; }
.blog-prose .table-wrap { font-size: .95rem; }
.blog-prose .table td, .blog-prose .table th { vertical-align: top; }
.blog-prose .table code { white-space: nowrap; }
.blog-prose .pill { vertical-align: middle; margin-left: 4px; }

/* ---------- After the post ---------- */
.blog-cta { margin-top: 56px; }
.blog-cta h2 { font-size: 1.5rem; margin-bottom: 10px; }
.blog-cta p { color: var(--muted); margin-bottom: 20px; }
.blog-cta-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.blog-more-posts { margin-top: 44px; }
.blog-more-posts h2 { font-size: 1.3rem; margin-bottom: 12px; }
.blog-more-posts ul { list-style: none; display: grid; gap: 8px; }
.blog-more-posts a { font-weight: 600; }

@media (max-width: 600px) {
    .blog-prose { font-size: 1rem; }
    .blog-prose h2 { font-size: 1.45rem; }
    .blog-cta-btns .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .blog-card { transition: none; }
}