/* ─── Blog ───
   Shared by every post page (generated by scripts/blog.mjs from
   content/blog/) and the blog index. Approved design: 16 Oct 2026. */

/* Post page */
.post { padding-top: calc(72px + var(--space-12)); }
.post__wrap { max-width: 1040px; margin: 0 auto; }

.post__crumbs {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--mute);
}
.post__crumbs a { color: var(--ink); text-decoration: none; }
.post__crumbs a:hover { color: var(--hot); }

.post__title {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: clamp(2.6rem, 1.5rem + 4.2vw, 5rem); line-height: 0.98; letter-spacing: -0.045em;
  color: var(--ink); max-width: 17ch; margin: var(--space-6) 0 var(--space-6);
}
.post__standfirst { font-size: var(--text-xl); line-height: var(--leading-normal); color: var(--mute); max-width: 40ch; }

.post__meta { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-8); }
.post__avatar {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; background: var(--ink); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 20px; letter-spacing: -0.04em;
}
.post__avatar span { color: var(--hot); }
.post__byline { display: flex; flex-direction: column; line-height: 1.3; }
.post__author { font-weight: var(--weight-semibold); color: var(--ink); }
.post__details { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--mute); }
.post__tag {
  margin-left: auto; padding: 6px 12px; background: var(--bone); border: 2px solid var(--ink); border-radius: 999px;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); text-decoration: none;
}

.post__cover {
  margin-top: var(--space-10); aspect-ratio: 16 / 6; background: var(--ink); border: 2px solid var(--ink);
  border-radius: var(--radius-xl); position: relative; display: grid; place-items: center; overflow: hidden;
}
.post__cover-label { position: absolute; top: var(--space-6); left: var(--space-6); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--blurple-bright); }
.post__cover svg { width: clamp(96px, 14vw, 180px); height: auto; }

.post__layout { display: grid; grid-template-columns: 200px minmax(0, 680px); gap: var(--space-16); margin-top: var(--space-16); }

.post__toc { position: sticky; top: calc(72px + var(--space-8)); align-self: start; }
.post__toc-title { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--mute); margin-bottom: var(--space-4); }
.post__toc ol { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--border-medium); }
.post__toc a { display: block; padding: 6px 0 6px var(--space-4); margin-left: -2px; border-left: 2px solid transparent; color: var(--mute); text-decoration: none; font-size: var(--text-sm); line-height: 1.4; }
.post__toc a:hover, .post__toc a.is-active { color: var(--ink); border-left-color: var(--hot); }

/* Article body: everything a writer can produce in the CMS editor */
.prose { font-size: 1.125rem; line-height: 1.7; color: var(--ink); }
.prose > * + * { margin-top: var(--space-6); }
.prose h2 { font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--leading-snug); letter-spacing: -0.03em; margin-top: var(--space-16); scroll-margin-top: calc(72px + var(--space-6)); }
.prose h3 { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -0.02em; margin-top: var(--space-10); }
.prose h2 + *, .prose h3 + * { margin-top: var(--space-4); }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hot); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover { color: var(--hot); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--space-2); }
.prose ul li::marker { color: var(--hot); }
.prose ol li::marker { font-family: var(--font-mono); font-weight: var(--weight-semibold); color: var(--hot); }
.prose strong { font-weight: var(--weight-semibold); }
.prose blockquote {
  margin: var(--space-12) 0; padding: var(--space-2) 0 var(--space-2) var(--space-6); border-left: 4px solid var(--hot);
  font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: -0.02em; font-weight: var(--weight-bold);
}
.prose figure { margin: var(--space-10) 0; }
.prose figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border: 2px solid var(--ink); border-radius: var(--radius-lg); background: var(--white); }
.prose figcaption { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--mute); }

.callout { background: var(--bone); border: 2px solid var(--ink); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8); }
.callout__title { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--ink); margin-bottom: var(--space-3); }
.callout ul { margin: 0; }

.post__share { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-16); padding-top: var(--space-8); border-top: 2px solid var(--border-medium); }
.post__share-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--mute); margin-right: var(--space-2); }
.post__share .btn { padding: 8px 16px; font-size: var(--text-sm); }

.author-card { display: flex; gap: var(--space-5); align-items: flex-start; margin-top: var(--space-10); padding: var(--space-6); background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius-lg); }
.author-card .post__avatar { width: 64px; height: 64px; font-size: 26px; }
.author-card__name { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl); letter-spacing: -0.02em; }
.author-card__role { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--mute); margin-top: 2px; }
.author-card__bio { margin-top: var(--space-3); color: var(--mute); font-size: var(--text-md); line-height: var(--leading-normal); }

/* Post cards: blog index and "Keep reading" */
.rc { display: flex; flex-direction: column; background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius-xl); overflow: hidden; text-decoration: none; color: var(--ink); transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out); }
.rc:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.rc__panel { min-height: 120px; background: var(--bone); border-bottom: 2px solid var(--ink); display: flex; align-items: flex-end; padding: var(--space-4) var(--space-5); }
.rc__panel-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.rc__body { padding: var(--space-5) var(--space-6) var(--space-6); flex: 1; display: flex; flex-direction: column; }
.rc__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--mute); letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: var(--space-3); }
.rc__body .card__link { color: var(--ink); margin-top: auto; padding-top: var(--space-4); }
.rc:hover .card__link { color: var(--hot); }

.read-progress { position: fixed; top: 72px; left: 0; height: 3px; width: 100%; background: var(--hot); transform-origin: 0 50%; transform: scaleX(0); z-index: 90; }

/* Cover photo on a card or post (when the writer adds one) */
.rc__panel--image { padding: 0; min-height: 0; aspect-ratio: 16 / 9; background: var(--bone); }
.rc__panel--image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post__cover--image { background: var(--bone); }
.post__cover--image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* Blog index: category filter */
.blog-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-10); }
.blog-filter a {
  padding: 8px 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); text-decoration: none;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase;
}
.blog-filter a:hover { background: var(--bone); }
.blog-filter a.is-active { background: var(--ink); color: var(--white); }
.blog-empty { padding: var(--space-10); border: 2px dashed var(--border-medium); border-radius: var(--radius-lg); color: var(--mute); text-align: center; }
.rc--featured .rc__panel--image { aspect-ratio: auto; min-height: 320px; border-right: 2px solid var(--ink); border-bottom: none; }
[data-post][hidden] { display: none; }

@media (max-width: 960px) {
  .post__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); margin-top: var(--space-10); }
  .post__toc { position: static; border: 2px solid var(--ink); border-radius: var(--radius-lg); padding: var(--space-5); background: var(--white); }
  .post__tag { margin-left: 0; }
}
@media (max-width: 600px) {
  .post__cover { aspect-ratio: 4 / 3; }
  .callout { padding: var(--space-5); }
  .author-card { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .rc { transition: none; }
  .rc:hover { transform: none; }
  .read-progress { display: none; }
}