/* Blog post: long-form reading layout */
.post { max-width: 42rem; }
.post-head { padding-bottom: var(--space-card); border-bottom: 1px solid var(--line); }
.post-head .label a { transition: color var(--duration-quick); }
.post-head .label a:hover { color: var(--accent-ink); }
.post-head h1 { margin-top: 16px; font-family: var(--font-serif); font-size: var(--fs-48); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; }
.post-head .lead { margin-top: 20px; max-width: none; font-family: var(--font-serif); font-size: var(--fs-24); font-style: italic; line-height: 1.45; }

.post-body { margin-top: var(--space-card); font-family: var(--font-serif); font-size: var(--fs-20); line-height: 1.65; }
.post-body > * + * { margin-top: 1.25em; }
.post-body h2 { margin-top: 2em; font-size: var(--fs-32); font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; }
.post-body h3 { margin-top: 1.75em; font-size: var(--fs-24); font-weight: 600; }
.post-body h2 + *, .post-body h3 + * { margin-top: 0.75em; }
.post-body strong { font-weight: 600; color: var(--text); }
.post-body a { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color var(--duration-quick); }
.post-body a:hover { text-decoration-thickness: 2px; }
.post-body ul, .post-body ol { display: grid; gap: 0.6em; padding-left: 1.5em; }
.post-body ul li { position: relative; }
.post-body ul li::before { content: ""; position: absolute; left: -1.1em; top: 0.8em; width: 8px; height: 1px; background: var(--accent); }
.post-body ol { list-style: decimal; }
.post-body ol li::marker { color: var(--muted); font-family: var(--font-mono); font-size: 0.85em; }
.post-body blockquote { margin: 1.75em 0 0; padding-left: 20px; border-left: 2px solid var(--accent); color: var(--muted); }
.post-body code { font-family: var(--font-mono); font-size: 0.8em; padding: 1px 6px; border-radius: 5px; background: var(--chip-bg); }
.post-body img { max-width: 100%; height: auto; border-radius: var(--radius-l); }

@media (max-width: 640px) { .post-head h1 { font-size: var(--fs-40); } .post-head .lead { font-size: var(--fs-20); } .post-body { font-size: var(--fs-18); } .post-body h2 { font-size: var(--fs-28); } }

.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-card); padding-top: 24px; border-top: 1px solid var(--line); }