/* Blog — the knowledge hub (build-pages.mjs, content/blog/*.md), on top of
   page.css. /blog/ is a board of article cards; an article keeps the page
   template's 38/62 grid and adds what long reading needs: the full title in
   type under a short flap line, a byline, notes, tables, a closing brief card
   and three more articles. */

/* ---- list: the article cards ---- */
.bl-list { padding: clamp(56px, 8vh, 96px) clamp(20px, 5vw, 48px) clamp(80px, 12vh, 140px); }
.bl-grid {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1240px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.bl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bl-grid > li { display: flex; }
.bl-card {
  flex: 1; display: flex; flex-direction: column; gap: 14px;
  padding: clamp(22px, 2.6vw, 34px); border-radius: 12px;
  background: var(--sc-surface); color: var(--sc-ink); text-decoration: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1);
  transition: box-shadow 220ms var(--sc-ease-out), transform 300ms var(--sc-ease-out);
}
.bl-card:hover, .bl-card:focus-visible { box-shadow: 0 0 0 1px rgba(255,255,255,.4); transform: translateY(-2px); }
.bl-card__top {
  display: flex; gap: 12px; align-items: center;
  font: 500 11px/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.bl-card__n { color: var(--sc-ink); }
.bl-card__t { margin: 0; font: 600 clamp(1.25rem, 2vw, 1.7rem)/1.08 var(--sc-font-display); text-transform: uppercase; letter-spacing: .01em; }
.bl-grid--3 .bl-card__t { font-size: clamp(1.05rem, 1.4vw, 1.25rem); }
.bl-card__d { margin: 0; font: 400 15px/1.6 var(--sc-font-text); color: var(--sc-ink-soft); max-width: 52ch; }
.bl-card__meta {
  margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(242,242,242,.1);
  display: flex; align-items: center; gap: 6px;
  font: 500 12px/1 var(--sc-font-text); letter-spacing: .06em; color: var(--sc-ink-soft);
}
.bl-card__go { margin-left: auto; font-size: 16px; color: var(--sc-ink); transition: transform 220ms var(--sc-ease-out); }
.bl-card:hover .bl-card__go { transform: translateX(4px); }

/* ---- article hero: a short flap line, then the title in type ---- */
.bl-board { display: flex; flex-direction: column; gap: .18em; margin-bottom: 26px; }
.bl-board [data-flap] { font-size: clamp(1.1rem, 2.6vw, 2rem); }
.bl-board [data-flap] .flap-cell { width: .86em; margin: 0 .04em; }
.bl-title {
  margin: 0; max-width: 22ch;
  font: 600 clamp(2rem, 4.6vw, 3.9rem)/1.02 var(--sc-font-display); text-transform: uppercase; letter-spacing: .005em; color: var(--sc-ink);
}
.bl-meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 32px 0 0; padding-top: 16px;
  border-top: 1px solid rgba(242,242,242,.14);
  font: 500 12px/1.4 var(--sc-font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.bl-meta > :first-child { color: var(--sc-ink); }

/* ---- prose additions ---- */
.bl-prose li strong { color: var(--sc-ink); font-weight: 500; }
.bl-prose p em, .bl-prose li em { font-style: italic; }
.bl-note {
  margin: 28px 0 !important; padding: 20px 0 20px 22px; border-left: 2px solid var(--sc-accent);
  font: 600 clamp(1.1rem, 1.5vw, 1.35rem)/1.3 var(--sc-font-display) !important; text-transform: uppercase; letter-spacing: .01em;
  color: var(--sc-ink) !important;
}
.bl-table { margin: 24px 0 32px; overflow-x: auto; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.1); background: var(--sc-surface); }
.bl-table:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.bl-table table { width: 100%; min-width: 560px; border-collapse: collapse; font: 400 14px/1.5 var(--sc-font-text); color: var(--sc-ink-soft); }
.bl-table th, .bl-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(242,242,242,.08); }
.bl-table thead th {
  font: 500 11px/1.3 var(--sc-font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink);
  border-bottom-color: rgba(242,242,242,.2);
}
.bl-table tbody th { font-weight: 500; color: var(--sc-ink); }
.bl-table tr:last-child > * { border-bottom: 0; }

/* the closing brief card */
.bl-end {
  margin: clamp(48px, 7vh, 72px) 0 0; padding: clamp(24px, 3vw, 36px); border-radius: 12px;
  background: var(--sc-surface); box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}
.bl-end p { margin: 0 0 18px; }
.bl-end .bl-end__k { font: 600 clamp(1.3rem, 2vw, 1.7rem)/1.05 var(--sc-font-display); text-transform: uppercase; color: var(--sc-ink); margin-bottom: 12px; }
.bl-end .bl-end__cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
/* the pills keep their own colors, not the prose link underline */
.pg-prose .bl-end__cta a.bp-pill--accent { color: var(--sc-accent-ink); border: 0; }
.pg-prose .bl-end__cta a.bp-pill--outline { color: var(--sc-ink); border: 1px solid rgba(242,242,242,.28); }

/* ---- more articles ---- */
.bl-more { max-width: 1240px; margin: 0 auto; padding: clamp(24px, 4vh, 48px) clamp(20px, 5vw, 48px) clamp(80px, 12vh, 140px); box-sizing: content-box; }
.bl-more .bl-grid { max-width: none; }

@media (max-width: 960px) {
  .bl-grid, .bl-grid--3 { grid-template-columns: 1fr; }
}