/* ===================================================================
   Blog article pages — per-page styles (loads after css/styles.css and css/case-studies.css, which brings the
   .case-wrap / .case-cta closing band). Namespace: .post* only; tokens only. The 7 blog-<slug> pages
   (src/pages/blog-*.pug on src/partials/blog-post.pug), English only, 2026-10-18.
   =================================================================== */

/* ---- 1 . HEAD — the back link, the title, the date · read time, the banner ---- */
.post-head { padding-top: 56px; }
.post-wrap { width: min(1312px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.post-back { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.4; color: var(--text-strong); text-decoration: none; transition: color .2s ease; }
.post-back:hover { color: var(--brand); }
.post-back .icon { transform: rotate(180deg); color: var(--brand); flex: none; }
.post-title { margin: 28px 0 0; max-width: 980px; font-size: 48px; line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; color: var(--headline); text-wrap: balance; }
.post-meta { margin: 16px 0 0; font-size: 15px; line-height: 1.4; color: var(--text); }
.post-cover { margin-top: 40px; aspect-ratio: 1312 / 440; border-radius: 24px; overflow: hidden; background: #0a1128; }
.post-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- 2 . BODY — one 760px reading column; headings, paragraphs, bulleted lists, figures ---- */
.post-body { padding-block: 72px 32px; }
.post-col { max-width: 760px; margin-inline: auto; font-size: 17px; line-height: 1.65; color: var(--text); }
.post-col p { margin: 0; }
.post-col p + p { margin-top: 16px; }
.post-col b, .post-col strong { font-weight: 600; color: var(--text-strong); }
.post-col a { color: var(--text-strong); text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color .2s ease; }
.post-col a:hover { color: var(--brand); }
.post-h2 { margin: 48px 0 16px; font-size: 28px; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--headline); }
.post-h3 { margin: 28px 0 8px; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--headline); }
.post-h2, .post-h3 { text-wrap: balance; }
.post a { scroll-margin-top: 96px; }   /* a focused link scrolled into view (Shift+Tab) stays clear of the 75-px sticky navbar (css/legal.css:79) */
.post-list { margin: 12px 0 0; padding-left: 22px; }
.post-list li + li { margin-top: 6px; }
.post-list li::marker { color: var(--brand); }
.post-list--sub { margin: 8px 0 0; padding-left: 20px; }
.post-list--sub li::marker { color: var(--text); }
.post-figure { margin: 32px 0; }
.post-figure img { display: block; max-width: 100%; max-height: 560px; width: auto; height: auto; margin-inline: auto; border-radius: 16px; }
.post-col > :first-child { margin-top: 0; }
.post-col > * + p, .post-list + .post-list { margin-top: 16px; }
/* the small closing disclaimers (2 posts) */
.post-note { margin-top: 40px !important; font-size: 14px; line-height: 1.5; color: var(--text); }
/* the text-bearing diagrams (w >= 1800) take more of the row than the 760px column, centred on it */
.post-figure--wide { width: min(1100px, 100vw - 2 * var(--gutter)); margin-inline: calc((760px - min(1100px, 100vw - 2 * var(--gutter))) / 2); }
.post-figure--wide img { max-height: none; }
.post-figure--wide img[height="1800"] { max-height: 760px; }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) { .post-back, .post-col a { transition: none; } }