/* ==========================================================================
   Blog — long-form reading on the same phosphor tube.

   Blog pages are static documents: no main.js, no data-anim, no agent. They
   reuse theme.css (tokens, type, buttons, CRT overlays) and layout.css
   (.site-head, .site-foot, .wrap), and this file adds only what an article
   needs. The CSP forbids inline styles, so everything lives here.
   ========================================================================== */

/* The header is fixed; an article has no full-height hero to duck under it. */
.post {
  max-width: 46rem;
  padding-top: 7.5rem;
  padding-bottom: 4rem;
}

/* On blog pages the nav is two links, so it fits on mobile too. */
.site-nav--always { display: flex; }

.post__meta {
  font-size: var(--step--1);
  color: var(--fg-faint);
  letter-spacing: 0.08em;
  margin-bottom: 2.5rem;
}

.post h1 { font-size: var(--step-3); margin-bottom: 0.35em; }

.post article > p { color: var(--fg); }

/* The pull quote — the hook of the whole piece. */
.post blockquote {
  margin: 2rem 0;
  padding: 1.1rem 1.4rem;
  border-left: 2px solid var(--amber);
  background: var(--bg-panel);
  font-size: var(--step-1);
  color: var(--amber);
  max-width: var(--measure);
}

.post blockquote p { margin: 0; color: inherit; max-width: none; }

.post ul {
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
  max-width: var(--measure);
}

.post ul li {
  padding-left: 1.4rem;
  position: relative;
  margin-bottom: 0.4rem;
}

.post ul li::before { content: "▸"; position: absolute; left: 0; color: var(--cyan); }

/* The funnel exit: one honest panel, one button. */
.post__cta {
  margin-top: 3rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--rule-bright);
  border-radius: var(--radius);
  background: var(--bg-panel);
  position: relative;
}

.post__cta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--amber-dim);
}

.post__cta p { color: var(--fg-mute); }

/* --- Index ---------------------------------------------------------------- */

.post-list { display: grid; gap: 1rem; margin-top: 2rem; }

.post-card {
  display: block;
  background: var(--bg-panel);
  border: var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  color: var(--fg);
  transition: border-color var(--speed) var(--ease);
}

.post-card:hover { border-color: var(--amber-dim); color: var(--fg); }

.post-card h2 { font-size: var(--step-1); margin-bottom: 0.3em; }
.post-card p { color: var(--fg-mute); margin-bottom: 0.75em; }

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: var(--step--1);
  color: var(--fg-faint);
}

/* Language cross-link, on cards and at the end of a post. */
.post__lang {
  margin-top: 2rem;
  font-size: var(--step--1);
  color: var(--fg-faint);
}