/* Cleancraft — blog article + hub list (added 2026-09-25).
   Extends .prose (service.css) and .blog-topics (style.css) for long-form posts.
   Loaded ONLY by /blog and /blog/{slug}; no existing page links it.
   Tokens only — no raw hex/px/ms beyond hairline-safe values. */

/* ── article body ── */
.post { max-width: 68ch; margin-inline: auto; }
.post > :first-child { margin-top: 0; }
.post h2 { font-size: var(--t-lg); margin-top: var(--s-12); }
.post h3 { font-size: var(--t-md); font-weight: 500; margin-top: var(--s-8); }
.post h2 + p, .post h3 + p { margin-top: var(--s-3); }
.post p { margin-top: var(--s-4); color: var(--c-body); line-height: 1.8; max-width: none; }
.post ul, .post ol { margin: var(--s-4) 0 0; padding-left: 1.3em; color: var(--c-body); line-height: 1.75; }
.post li + li { margin-top: var(--s-2); }
.post li::marker { color: var(--c-mint-deep); }
.post strong { color: var(--c-ink); font-weight: 500; }
.post a:not(.btn) { color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-border); text-underline-offset: 3px; transition: text-decoration-color var(--d-fast); }
.post a:not(.btn):hover { text-decoration-color: var(--c-ink); }
.post .answer { font-family: var(--font-display); font-size: var(--t-md); line-height: 1.6; color: var(--c-ink); padding-block: var(--s-6); border-block: var(--hair); }
.post .btn { margin-top: var(--s-2); }
.post .table-wrap { overflow-x: auto; margin-top: var(--s-6); border: var(--hair); }
.post table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 32rem; }
.post th, .post td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: top; border-bottom: var(--hair); color: var(--c-body); }
.post thead th { background: var(--c-cream-deep); color: var(--c-ink); font-weight: 400; }
.post tr:last-child td { border-bottom: 0; }

/* ── byline under the hero title ── */
.post-byline { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track); }

/* ── hub list: .blog-topics cells become links ── */
.blog-topics--live li { padding: 0; }
.blog-topics--live a { display: flex; flex-direction: column; gap: var(--s-3); height: 100%; padding: clamp(24px, 2.4vw, 36px); color: inherit; }
.blog-topics__d { font-family: var(--font-body); font-size: var(--t-sm); line-height: 1.6; color: var(--c-body); max-width: none; }
.blog-topics__more { font-family: var(--font-body); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track); color: var(--c-ink); margin-top: auto; }