/* ============================================================
   Sansoif — Blog (.bl-*)
   Same warm surfaces as the legal kit: cream page head, white
   cards on paper, hairline borders, soft diffuse shadows. The
   article column reuses --container-text so a post reads at the
   same measure as the legal pages.
   ============================================================ */

/* ---------- Page head (index + article) ---------- */

.bl-pagehead {
  background: var(--bg-tint);
  border-bottom: 1px solid var(--border);
  padding: clamp(40px, 6vw, 76px) clamp(16px, 4vw, 48px) clamp(28px, 4vw, 44px);
}
.bl-pagehead-inner { max-width: var(--container); margin: 0 auto; }
.bl-pagehead h1 {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: clamp(2.2rem, 5vw, 3.75rem);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  max-width: 22ch;
}
.bl-pagehead > .bl-pagehead-inner > p {
  margin: var(--space-4) 0 0;
  color: var(--text-muted); font-size: var(--fs-lg); max-width: 60ch;
}

/* Kicker above the article title, and the date on each card. */
.bl-meta {
  margin: 0;
  font-family: var(--font-text); font-weight: var(--fw-bold);
  font-size: var(--fs-2xs); line-height: 1;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--text-faint);
}

.bl-back {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-weight: var(--fw-semibold); font-size: var(--fs-sm);
  color: var(--text-muted);
}
.bl-back:hover { color: var(--ink-accent); }
.bl-back::before { content: "←"; }

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

.bl-list {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) clamp(16px, 4vw, 48px) clamp(56px, 8vw, 96px);
  display: grid; gap: var(--space-5);
}
@media (min-width: 900px) {
  .bl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bl-card {
  display: grid; gap: var(--space-3); align-content: start;
  padding: clamp(20px, 3vw, 28px);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.bl-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.bl-card h2 {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: var(--lh-snug); letter-spacing: var(--ls-tight);
}
.bl-card:hover h2 { color: var(--ink-accent); }
.bl-card p { margin: 0; color: var(--text-body); line-height: var(--lh-relaxed); }

.bl-empty {
  grid-column: 1 / -1;
  margin: 0; padding: var(--space-10);
  text-align: center; color: var(--text-muted);
  background: var(--surface-card);
  border: var(--border-width) dashed var(--border-hairline);
  border-radius: var(--radius-md);
}

/* ---------- Article ---------- */

.bl-article {
  /* box-sizing is border-box, so the horizontal padding has to be added on top
     of the text measure — otherwise the body column ends up narrower than the
     page head above it and the two left edges don't line up. */
  max-width: calc(var(--container-text) + 2 * clamp(16px, 4vw, 48px));
  min-width: 0;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 60px) clamp(16px, 4vw, 48px) clamp(64px, 9vw, 112px);
}
.bl-article > * + * { margin-top: var(--space-5); }
.bl-article p, .bl-article li { color: var(--ink-body); line-height: var(--lh-relaxed); }

.bl-article h2 {
  margin: var(--space-12) 0 0;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
}
.bl-article h3 {
  margin: var(--space-10) 0 0;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: var(--lh-snug);
}
.bl-article a {
  color: var(--ink-accent); font-weight: var(--fw-semibold);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.bl-article a:hover { text-decoration-thickness: 2px; }
.bl-article ul, .bl-article ol { padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.bl-article strong { color: var(--ink); font-weight: var(--fw-bold); }

.bl-article blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-left: 3px solid var(--brand);
  color: var(--text-muted); font-size: var(--fs-lg);
}
.bl-article code {
  font-family: var(--font-mono); font-size: 0.9em;
  padding: 1px 6px; border-radius: var(--radius-xs);
  background: var(--bg-tint); border: 1px solid var(--border);
}
.bl-article pre {
  overflow-x: auto; padding: var(--space-5);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-xs);
}
.bl-article pre code { padding: 0; border: 0; background: none; white-space: pre; }
.bl-article img {
  margin-inline: auto;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.bl-article figcaption {
  margin-top: var(--space-3);
  text-align: center; font-size: var(--fs-sm); color: var(--text-faint);
}
.bl-article hr {
  border: 0; border-top: 1px solid var(--border); margin: var(--space-12) 0;
}

/* On an article, the head shares the body's measure so the title, the lede and
   the first paragraph all start on the same left edge. The index keeps the wide
   container, which is what its two-column card grid needs. */
.bl-pagehead--narrow .bl-pagehead-inner { max-width: var(--container-text); }