/* Page-scoped styles extracted from blog.html. */

/* =====================================================================
   /blog.html page-scoped styles (class prefix bl-). Tokens from
   site-tokens.css only; shared components (.container, .container-narrow,
   .band, .section-head, .eyebrow, .lede) from site.css. Zero em-dashes /
   en-dashes in this CSS. Token repair from the carried en-blog.css:
   --face-display / --face-ui -> --font-sans; --face-mono -> --font-mono;
   --lucy-blue -> --blue; --r-card -> --r-lg; --paper-deep -> --bg-cream;
   --ink-faint(border use) -> --line.
   ===================================================================== */

/* Hero */
.bl-index-hero { padding-block: var(--s-9) var(--s-7); }
.bl-index-hero .container { display: grid; gap: var(--s-7); }
@media (min-width: 980px) {
  .bl-index-hero .container { grid-template-columns: minmax(0, 1.42fr) minmax(300px, 0.58fr); align-items: start; }
}
.bl-index-hero-copy { display: grid; gap: var(--s-4); align-content: start; }
.bl-index-hero h1 { margin: 0; }
.bl-index-hero .lede { max-width: 68ch; margin: 0; }

/* Purpose card */
.bl-purpose-card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-6); display: grid; gap: var(--s-4); box-shadow: var(--shadow-card);
}
.bl-bp-label {
  font-family: var(--font-mono); font-size: var(--fs-12); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--blue);
}
.bl-bp-row { display: grid; gap: 6px; padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.bl-bp-row:first-of-type { border-top: 0; }
.bl-bp-stage {
  font-family: var(--font-mono); font-size: var(--fs-12); font-weight: var(--weight-medium);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
}
.bl-bp-text { margin: 0; font-size: var(--fs-16); line-height: var(--lh-default); color: var(--ink); }

/* AEO grid framing */
.bl-aeo-framing { margin-top: var(--s-4); max-width: 64ch; }
.bl-aeo-framing p { font-size: var(--fs-18); color: var(--ink-muted); line-height: var(--lh-body); margin: 0; }

/* AEO 3x4 grid */
.bl-aeo-header { display: grid; grid-template-columns: 140px repeat(3, 1fr); gap: var(--s-2); margin-top: var(--s-6); margin-bottom: var(--s-1); }
.bl-aeo-hcell { font-family: var(--font-mono); font-size: var(--fs-12); font-weight: var(--weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); padding: var(--s-2) var(--s-3); }
.bl-aeo-row { display: grid; grid-template-columns: 140px repeat(3, 1fr); gap: var(--s-2); margin-bottom: var(--s-2); align-items: stretch; }
.bl-aeo-rowlabel { display: flex; align-items: flex-start; padding-top: var(--s-4); }
.bl-aeo-rowlabel-inner { font-family: var(--font-mono); font-size: var(--fs-12); font-weight: var(--weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.bl-aeo-card { border: 1px solid var(--line); background: var(--bg); border-radius: var(--r-md); padding: var(--s-5) var(--s-5) var(--s-4); display: grid; gap: var(--s-2); align-content: start; text-decoration: none; color: inherit; transition: border-color var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease); }
.bl-aeo-card:hover { border-color: var(--blue); box-shadow: var(--shadow-card); }
.bl-ac-stage { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.bl-aeo-card h3 { font-size: var(--fs-18); font-weight: var(--weight-semibold); color: var(--ink); line-height: var(--lh-snug); margin: 0; }
.bl-aeo-card p { font-size: var(--fs-14); color: var(--ink-soft); line-height: var(--lh-default); margin: 0; }
.bl-ac-arrow { font-size: var(--fs-13); color: var(--blue); font-weight: var(--weight-semibold); margin-top: var(--s-1); }
@media (max-width: 880px) {
  .bl-aeo-header { display: none; }
  .bl-aeo-row { grid-template-columns: 1fr; gap: var(--s-3); }
  .bl-aeo-rowlabel { padding-top: 0; padding-bottom: var(--s-1); border-bottom: 1px solid var(--line); }
  .bl-ac-stage { display: none; }
}

/* Cross-page nav strip */
.bl-navstrip { margin-top: var(--s-7); padding: var(--s-5) 0; border-top: 1px solid var(--line); font-size: var(--fs-14); color: var(--ink-soft); }
.bl-navstrip a { color: var(--blue); font-weight: var(--weight-semibold); }
.bl-navstrip a:hover { text-decoration: underline; }

/* Latest posts */
.bl-footnote { font-size: var(--fs-14); color: var(--ink-soft); max-width: var(--measure-prose); margin: var(--s-3) 0 0; }
.bl-post-strip { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.bl-post-card { border: 1px solid var(--line); background: var(--bg); border-radius: var(--r-md); padding: var(--s-5) var(--s-6); display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: center; text-decoration: none; color: inherit; transition: border-color var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease); }
.bl-post-card:hover { border-color: var(--blue); box-shadow: var(--shadow-card); }
.bl-pc-body { display: grid; gap: var(--s-1); }
.bl-post-card h3 { font-size: var(--fs-20); font-weight: var(--weight-semibold); color: var(--ink); margin: 0; }
.bl-post-card p { font-size: var(--fs-14); color: var(--ink-soft); margin: 0; line-height: var(--lh-default); }
.bl-pc-tag { display: inline-block; justify-self: start; font-family: var(--font-mono); font-size: var(--fs-12); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); background: var(--bg-cream); border-radius: var(--r-sm); padding: 3px 8px; margin-top: var(--s-2); }
.bl-pc-arrow { font-family: var(--font-mono); font-size: var(--fs-20); color: var(--blue); font-weight: var(--weight-semibold); }
@media (max-width: 640px) {
  .bl-post-card { grid-template-columns: 1fr; }
  .bl-pc-arrow { display: none; }
}

/* FAQ (static Q&A blocks, not disclosure) */
.bl-faq { border-top: 1px solid var(--line); }
.bl-faq-item { border-bottom: 1px solid var(--line); padding: var(--s-5) 0; }
.bl-faq-item h3 { font-size: var(--fs-18); font-weight: var(--weight-semibold); color: var(--ink); margin: 0 0 var(--s-3); }
.bl-faq-response { font-size: var(--fs-16); color: var(--ink-muted); line-height: var(--lh-body); max-width: var(--measure-prose); }