/* Blog-only styles. Uses the site variables from /styles/global.css (with fallbacks). */
.blog { width: 100%; }
.blog-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 48px; font-family: var(--mono); font-size: 14px; }
.post-header,
.post-body,
.post-meta { max-width: 46rem; margin-inline: auto; }
.blog-header h1 { font-size: clamp(36px, 6vw, 64px); }
.post-header h1 { font-size: clamp(32px, 5vw, 56px); overflow-wrap: anywhere; }
.post-summary { margin: 0 0 36px; }
.post-summary h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 6px; }
.post-summary h2 a { color: var(--ink); }
.post-summary p { margin: 4px 0; }
.post-date, .post-meta { font-family: var(--mono); font-size: 14px; color: var(--muted); }
.post-meta { border-top: 2px dashed var(--line); margin-top: 48px; padding-top: 12px; }
.post-body { overflow-wrap: break-word; }
.post-body h2 { font-size: clamp(24px, 3vw, 34px); margin-top: 1.6em; }
.post-body h3 { margin-top: 1.4em; }
.post-body img, .post-body video { max-width: 100%; height: auto; display: block; margin: 1em 0; }
.post-body iframe { max-width: 100%; aspect-ratio: 16 / 9; height: auto; width: 100%; }
.post-body pre { overflow-x: auto; background: var(--terminal, #101411); color: var(--terminal-text, #d7ffd9); padding: 14px; font-size: 14px; }
.post-body code { font-family: var(--mono); font-size: .9em; }
.post-body blockquote { border-left: 4px solid var(--line); margin: 1em 0; padding: 0 0 0 1em; color: #302d29; }
.post-body table { border-collapse: collapse; display: block; overflow-x: auto; }
.post-body th, .post-body td { border: 1px solid var(--line); padding: 4px 8px; }
.paginator { display: flex; flex-wrap: wrap; gap: 12px; font-family: var(--mono); margin-top: 32px; }
.term-list { columns: 2 220px; font-family: var(--mono); font-size: 15px; }
.archive-year h2 { margin-top: 1.2em; }
.archive-year ul { font-family: var(--mono); font-size: 15px; }
.archive-year time { color: var(--muted); }