/* Page-scoped styles extracted from blog-predicting-the-future.html. */

/* =====================================================================
   Blog post page-scoped styles (SHARED block, copied per post template).
   Class prefix bl-. Tokens from site-tokens.css only; shared components
   (.container, .lede) come from site.css. Zero em-dashes / en-dashes here.
   Token repair (carried old page CSS -> new chrome tokens; enumerated in
   PROGRESS-carryover-2.md): --face-display / --face-ui / --face-body ->
   --font-sans; --face-mono / --mono -> --font-mono; --lucy-blue -> --blue;
   --lucy-blue-deep -> --blue-deep; --lucy-blue-soft -> --blue-soft;
   --r-card -> --r-lg; --paper / --paper-deep / --paper-warm -> --bg-cream;
   --paper-soft -> --blue-soft; --rule / --rule-soft -> --line;
   --ink-faint(border use) -> --line; --ink-50 -> --ink-soft;
   --gutter-d -> --gutter.
   ===================================================================== */
.bl-wrap { max-width: 760px; margin-inline: auto; }

/* Hero */
.bl-post-hero { padding-block: var(--s-9) var(--s-6); }
.bl-post-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s-4);
}
.bl-post-hero h1 { margin: 0 0 var(--s-4); }
.bl-post-hero .lede { max-width: 60ch; margin: 0; }

/* Body prose */
.bl-post-body { padding-block: var(--s-4) var(--s-9); }
.bl-prose > p { font-size: var(--fs-18); line-height: 1.7; color: var(--ink-muted); margin: 0 0 var(--s-4); max-width: 66ch; }
.bl-prose h2 { margin: var(--s-8) 0 var(--s-4); }
.bl-prose h3 { margin: var(--s-6) 0 var(--s-3); }
.bl-prose strong { color: var(--ink); font-weight: var(--weight-semibold); }
.bl-prose em { color: var(--ink); font-style: italic; }
.bl-prose a { color: var(--blue-deep); text-decoration: underline; text-decoration-color: var(--blue-soft); text-underline-offset: 3px; }
.bl-prose a:hover { color: var(--blue); text-decoration-color: var(--blue); }
.bl-prose ul, .bl-prose ol { font-size: var(--fs-18); line-height: 1.7; color: var(--ink-muted); padding-left: 1.3em; margin: 0 0 var(--s-4); max-width: 66ch; }
.bl-prose li { margin-bottom: var(--s-2); }
.bl-prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }
.bl-prose sup { font-size: 0.7em; }

/* Tables (trust-architecture post) */
.bl-table-wrap { overflow-x: auto; margin: var(--s-6) 0; -webkit-overflow-scrolling: touch; }
.bl-prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; min-width: 560px; }
.bl-prose thead { background: var(--bg-cream); }
.bl-prose th, .bl-prose td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.bl-prose th { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); font-weight: var(--weight-medium); }
.bl-prose tr:last-child td { border-bottom: 0; }

/* Diagram placeholders (trust-architecture post) */
.bl-diagram { margin: var(--s-6) 0; }
.bl-diagram-ph {
  display: flex; align-items: center; justify-content: center;
  min-height: 160px; padding: var(--s-6) var(--s-5);
  background: var(--bg-cream); border: 1px dashed var(--line);
  border-radius: var(--r-md); color: var(--ink-soft);
  font-family: var(--font-mono); font-size: var(--fs-13);
  text-align: center; letter-spacing: 0.02em;
}

/* Backlink */
.bl-backlink { margin-top: var(--s-7); }
.bl-backlink a { font-family: var(--font-mono); font-size: var(--fs-14); }