/* Blog pages share the homepage's paper, cobalt, and typefaces. */
html { scroll-behavior: auto; }
.post-page { width: min(100% - 48px, 780px); padding-top: 24px; }
.post-nav, .post-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.post-nav { padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.post-nav a, .post-footer a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.95rem; font-weight: 500; }
.post-nav a:hover, .post-footer a:hover { color: var(--accent); }
.post-header { padding: 40px 0 24px; }
.post-header h1 { max-width: 14ch; font-size: clamp(2.25rem, 5.5vw, 3.75rem); line-height: 1.03; margin-bottom: 0; }
.post-cover { width: 100%; height: auto; }
.post-body { max-width: 640px; margin: 36px auto 0; font-size: 1.1rem; line-height: 1.72; }
.post-body p { color: var(--ink-2); margin-bottom: 20px; }
.post-body strong { color: #0e0f12; font-weight: 600; }
.post-body em { font-style: italic; }
.post-body a, .post-fallback a { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; overflow-wrap: anywhere; }
.post-body a:hover, .post-fallback a:hover { color: var(--accent); }
.post-body h2 { margin: 52px 0 20px; font-size: clamp(1.625rem, 3.6vw, 2.125rem); line-height: 1.12; scroll-margin-top: 24px; }
.post-body .heading-anchor { color: var(--accent); font-size: 0.65em; font-weight: 500; text-decoration: none; vertical-align: middle; }
.post-body .article-figure { margin: 28px 0; }
.post-body .article-figure a { display: block; cursor: zoom-in; }
.post-body .article-figure img { width: 100%; height: auto; }
.post-body .article-figure figcaption { margin-top: 8px; color: var(--ink-2); font-size: 0.82rem; line-height: 1.6; }
.post-body .markdown-error { color: #0e0f12; }
.post-body .source-reference { font-size: 0.7em; line-height: 0; vertical-align: super; }
.post-body .source-reference a { padding: 0 0.15em; color: var(--accent); font-weight: 600; text-decoration: none; }
.post-body .source-notes { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule); }
.post-body .source-notes h2 { margin: 0 0 20px; font-size: 1.5rem; }
.post-body .source-notes ol { list-style: decimal; padding-left: 1.5em; font-size: 0.9rem; line-height: 1.7; color: var(--ink-2); }
.post-body .source-notes li { padding: 6px 0; scroll-margin-top: 24px; }
.post-body .source-notes li:target { background: #eaedf9; }
.post-body .source-backlink { display: inline-block; margin-left: 0.75em; font-size: 0.8rem; }
.post-fallback { max-width: 640px; margin: 24px auto; }
.post-footer { border-top: 3px solid #0e0f12; margin-top: 48px; padding: 20px 0 48px; }

/* The listing reuses the homepage's writing rows. */
.blog-index-header { padding: 40px 0 24px; }
.blog-index-header h1 { font-size: clamp(2.2rem, 5vw, 3rem); margin-bottom: 0; }
.blog-list .card h2 { font-size: 1.25rem; font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 8px; transition: color 0.15s; }
.blog-list .card p { font-size: 0.95rem; }
.blog-list .card:hover h2 { color: var(--accent); }

/* Markdown articles keep a wide title and video, with a readable body measure. */
.markdown-body { max-width: none; margin-top: 0; }
.markdown-body > :not(.article-header):not(.article-video) { max-width: 640px; margin-left: auto; margin-right: auto; }
.article-header { padding: 40px 0 24px; margin-bottom: 32px; border-bottom: 1px solid var(--rule); }
.article-header h1 { max-width: 20ch; font-size: clamp(2.25rem, 5.5vw, 3.75rem); line-height: 1.03; margin-bottom: 0; }
.post-body .article-deck { max-width: 640px; font-size: 1rem; line-height: 1.6; margin: 16px 0 0; }
.article-video { margin: 0 0 32px; }
.article-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.post-body h3, .post-body h4 { font-family: var(--display); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin: 32px 0 16px; scroll-margin-top: 24px; }
.post-body h3 { font-size: 1.5rem; }
.post-body h4 { font-size: 1.2rem; }
.post-body ul, .post-body ol { margin-bottom: 20px; padding-left: 1.5em; color: var(--ink-2); }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li + li { margin-top: 8px; }
.post-body blockquote { margin: 32px 0; padding: 20px 24px; background: #edede9; }
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.86em; }
.post-body :not(pre) > code { padding: 2px 5px; background: #e9e9e5; color: #0e0f12; overflow-wrap: anywhere; }
.post-body pre { margin: 28px 0; padding: 20px; overflow-x: auto; border: 1px solid var(--rule); background: #f0f0ec; color: #0e0f12; font-size: 0.84rem; line-height: 1.65; tab-size: 4; }
.post-body pre code { font-size: inherit; }
.post-body .table-wrap { overflow-x: auto; margin-top: 28px; margin-bottom: 32px; border: 1px solid var(--rule); }
.post-body table { width: 100%; border-collapse: collapse; font-size: 0.9rem; line-height: 1.6; }
.post-body th, .post-body td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.post-body th { background: #edede9; color: #0e0f12; font-weight: 600; }
.post-body td { color: var(--ink-2); }
.post-body tr:last-child td { border-bottom: 0; }
.post-body hr { margin: 40px 0; border: 0; border-top: 1px solid var(--rule); }

@media (max-width: 600px) {
    .post-page { width: calc(100% - 36px); padding-top: 12px; }
    .post-header, .article-header, .blog-index-header { padding: 28px 0 20px; }
    .post-body { margin-top: 28px; font-size: 1.03rem; line-height: 1.7; }
    .markdown-body { margin-top: 0; }
    .article-header { margin-bottom: 28px; }
    .post-body h2 { margin-top: 40px; }
    .post-body .article-figure { margin: 24px 0; }
    .post-body .article-figure figcaption { font-size: 0.82rem; }
    .post-body pre { padding: 16px; font-size: 0.78rem; }
    .post-body table { min-width: 580px; }
    .post-footer { margin-top: 40px; }
}

@media print {
    body { background: white; }
    .post-page { width: 100%; padding: 0; }
    .post-nav, .post-footer, .heading-anchor { display: none; }
    .post-header, .article-header { padding-top: 0; }
    .post-body { font-size: 11pt; }
    .article-figure, h2 { break-inside: avoid; }
    h2 { break-after: avoid; }
}