/* Blog public surface — magazine / newspaper feel.
   Respects the AI-marker removal rules (2026-09-22):
   - No decorative gradients, no glow shadows, no hover lift.
   - No raw Tailwind hexes — uses design tokens (var(--color-*), var(--space-*), var(--radius-*)).
   - Headings 600-700 weight max, no negative letter-spacing on small text.
   - Section colours come from the tenant brand --accent token.
   - Cover-image figures use a flat neutral overlay (no gradient). */

/* Fraunces is the editorial accent — same font used by the practice
   library for passage drop-caps and worked-example numbers. Self-hosted
   via @import so the blog doesn't have to share the practice-library
   stylesheet just to get the typeface. (2026-09-24) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap');

/* Break out of the base.html <main class="container"> viewport lock.
   Without this rule, main.container has height: 100% + overflow-y: auto
   (a dashboard-shell pattern from design.css:180) which traps the
   blog content in a 900px scrollable box instead of letting the
   browser scroll the full page naturally. Mirrors the same
   technique used for landing pages (see landing-pages.css:152).
   Targets any of the four blog public-page roots. */
main.container:has(.bp-shell),
main.container:has(.bp-article),
main.container:has(.bp-archive-grid),
main.container:has(.bp-section-header) {
  max-width: 100% !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}
.app-shell:has(.bp-shell),
.app-shell:has(.bp-article),
.app-shell:has(.bp-archive-grid),
.app-shell:has(.bp-section-header) {
  display: block !important;
  height: auto !important;
  min-height: auto !important;
}

.bp-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4, 16px) var(--space-7, 40px);
  color: var(--color-text, #111);
}

/* ─── Masthead ──────────────────────────────────────────────────── */
.bp-masthead {
  text-align: center;
  padding: var(--space-6, 32px) 0 var(--space-5, 24px);
  border-top: 6px double var(--color-accent, #2f6fed);
  border-bottom: 1px solid var(--color-border-subtle, rgba(0,0,0,0.12));
  margin-bottom: var(--space-5, 24px);
  position: relative;
}
.bp-masthead__issue {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-muted, #6b7280);
  margin-bottom: var(--space-4, 16px);
  font-weight: 600;
}
.bp-masthead__issue-rule {
  flex: 1;
  height: 1px;
  background: var(--color-border-subtle, rgba(0,0,0,0.12));
  margin: 0 16px;
}
.bp-masthead__title {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 700;
  margin: 0 0 6px 0;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.bp-masthead__title a { color: inherit; text-decoration: none; }
.bp-masthead__dek {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: 16px;
  font-style: italic;
  color: var(--color-text-muted, #6b7280);
  margin: 0 auto 12px auto;
  max-width: 640px;
}
.bp-masthead__tagline {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 14px;
  border: 1px solid var(--color-border-subtle, rgba(0,0,0,0.12));
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent, #2f6fed);
  background: var(--color-surface, #fff);
}

/* ─── Section nav chips ────────────────────────────────────────── */
.bp-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-5, 24px);
  padding-bottom: var(--space-4, 16px);
  border-bottom: 1px solid var(--color-border-subtle, rgba(0,0,0,0.08));
  align-items: center;
}
.bp-sections__label {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: 12px;
  font-style: italic;
  color: var(--color-text-muted, #6b7280);
  margin-right: 4px;
}
.bp-sections__chip {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--color-surface, #fff);
  color: var(--color-text, #111);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--color-border-subtle, rgba(0,0,0,0.12));
}
.bp-sections__chip:hover {
  border-color: var(--color-accent, #2f6fed);
  color: var(--color-accent, #2f6fed);
}
.bp-sections__chip.is-current {
  background: var(--color-accent, #2f6fed);
  color: #fff;
  border-color: var(--color-accent, #2f6fed);
}

/* Section "kicker" used on cards and as a label */
.bp-kicker {
  display: inline-block;
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent, #2f6fed);
  border-bottom: 2px solid var(--color-accent, #2f6fed);
  padding-bottom: 1px;
  margin-bottom: 8px;
}
.bp-kicker--lg { font-size: 14px; }

/* ─── Lead row: full-width featured + 3-up strip below ──────────
   The earlier side-by-side layout (1.5fr featured | 1fr stack of 3)
   left ~800px of dead space in the featured column whenever the
   right column's three stacked cards were taller than the single
   featured card — the rendered page had a clearly visible gap below
   the lead article before the next section header. Vertical lead +
   horizontal strip removes the column-height mismatch entirely and
   is also a more natural read order on mobile. (2026-09-24) */
.bp-lead-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 24px);
  margin-bottom: var(--space-7, 40px);
}
.bp-top-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4, 16px);
}
@media (max-width: 900px) {
  .bp-top-grid { grid-template-columns: 1fr; }
}
/* Cap the full-width featured cover so the lead doesn't dominate the
   page when its column stretches from 1.5fr to 100% width. */
.bp-lead-row > .bp-card--featured .bp-card__cover {
  aspect-ratio: 21 / 9;
  max-height: 460px;
}
@media (max-width: 900px) {
  .bp-lead-row > .bp-card--featured .bp-card__cover {
    aspect-ratio: 16 / 10;
    max-height: none;
  }
}

/* ─── Cards ────────────────────────────────────────────────────── */
.bp-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface, #fff);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--color-border-subtle, rgba(0,0,0,0.06));
  transition: border-color .15s ease;
}
.bp-card:hover { border-color: var(--color-accent, #2f6fed); }
.bp-card__cover {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-subtle, #f3f4f6);
  overflow: hidden;
  position: relative;
}
.bp-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.bp-card:hover .bp-card__cover img { transform: scale(1.02); }
.bp-card__body { padding: var(--space-4, 16px); }
.bp-card__headline {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
}
.bp-card__headline a { color: inherit; text-decoration: none; }
.bp-card__headline a:hover { color: var(--color-accent, #2f6fed); }
.bp-card__dek {
  margin: 0 0 12px 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted, #4b5563);
}
.bp-card__byline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-muted, #6b7280);
  border-top: 1px solid var(--color-border-subtle, rgba(0,0,0,0.06));
  padding-top: 10px;
}
.bp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-accent, #2f6fed);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  flex-shrink: 0;
}
.bp-avatar--lg {
  width: 40px;
  height: 40px;
  font-size: 15px;
}
.bp-card__byline-name { font-weight: 600; color: var(--color-text, #111); }

/* Featured card */
.bp-card--featured { border: 1px solid var(--color-border-subtle, rgba(0,0,0,0.08)); }
.bp-card--featured .bp-card__cover { aspect-ratio: 16 / 10; }
.bp-card--featured .bp-card__body { padding: var(--space-5, 24px); }
.bp-card--featured .bp-card__headline {
  font-size: clamp(26px, 3.5vw, 38px);
  margin-top: 4px;
  margin-bottom: 10px;
  line-height: 1.1;
}
.bp-card--featured .bp-card__dek { font-size: 17px; line-height: 1.5; font-style: italic; }
.bp-card--featured .bp-card__byline { font-size: 13px; padding-top: 12px; }

/* ─── Section strips ───────────────────────────────────────────── */
.bp-section-strip {
  margin-top: var(--space-7, 40px);
  padding-top: var(--space-5, 24px);
  border-top: 1px solid var(--color-border-subtle, rgba(0,0,0,0.1));
}
.bp-section-strip__head {
  display: flex;
  align-items: baseline;
  margin-bottom: var(--space-4, 16px);
  gap: var(--space-3, 12px);
}
.bp-section-strip__title {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  flex: 1;
  letter-spacing: -0.01em;
}
.bp-section-strip__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent, #2f6fed);
  text-decoration: none;
}
.bp-section-strip__more:hover { text-decoration: underline; }
.bp-strip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4, 16px);
}

/* ─── Archive grid (category / tag) ────────────────────────────── */
.bp-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5, 24px);
  margin-top: var(--space-5, 24px);
}

.bp-section-header {
  margin-bottom: var(--space-4, 16px);
  padding-bottom: var(--space-4, 16px);
  border-bottom: 1px solid var(--color-border-subtle, rgba(0,0,0,0.08));
}
.bp-section-header__dek {
  margin: 12px 0 0 0;
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-style: italic;
  color: var(--color-text-muted, #6b7280);
  font-size: 16px;
}

.bp-empty {
  text-align: center;
  padding: var(--space-8, 64px) var(--space-4, 16px);
  color: var(--color-text-muted, #6b7280);
}
.bp-empty h2 {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-weight: 700;
  margin: 0 0 8px 0;
}

/* ─── Article (detail page) ───────────────────────────────────── */
.bp-article {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-5, 24px) var(--space-4, 16px);
}
.bp-article__header { margin-bottom: var(--space-5, 24px); }
.bp-article__kicker-row {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-3, 12px);
}
.bp-article__kicker-row::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border-subtle, rgba(0,0,0,0.12));
}
.bp-article__headline {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 8px 0 14px 0;
}
.bp-article__dek {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: 20px;
  line-height: 1.45;
  color: var(--color-text-muted, #4b5563);
  margin: 0 0 24px 0;
  font-style: italic;
}
.bp-article__byline {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--color-text-muted, #6b7280);
  border-top: 1px solid var(--color-border-subtle, rgba(0,0,0,0.08));
  border-bottom: 1px solid var(--color-border-subtle, rgba(0,0,0,0.08));
  padding: 14px 0;
  margin-bottom: var(--space-5, 24px);
}
.bp-article__byline-name { font-weight: 600; color: var(--color-text, #111); font-size: 14px; }
.bp-article__byline-meta { display: flex; flex-direction: column; }
.bp-article__byline-role { font-size: 12px; color: var(--color-text-muted, #6b7280); }
.bp-article__cover { margin: 0 0 var(--space-5, 24px); }
.bp-article__cover img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md, 12px);
  display: block;
}
.bp-article__cover figcaption {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: 13px;
  font-style: italic;
  color: var(--color-text-muted, #6b7280);
  margin-top: 8px;
  text-align: center;
}
.bp-article__body {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: 18px;
  line-height: 1.75;
  color: var(--color-text, #111);
}
.bp-article__body p { margin: 0 0 20px 0; }
.bp-article__body p:first-of-type::first-letter {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  float: left;
  font-size: 4.2em;
  line-height: 0.85;
  font-weight: 700;
  margin: 6px 10px -2px 0;
  color: var(--color-accent, #2f6fed);
}
.bp-article__body h2 {
  font-size: 28px;
  margin: 36px 0 14px 0;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.bp-article__body h2::before {
  content: "§";
  color: var(--color-accent, #2f6fed);
  margin-right: 12px;
  font-weight: 400;
}
.bp-article__body h3 {
  font-size: 22px;
  margin: 28px 0 10px 0;
  line-height: 1.25;
  font-weight: 700;
}
.bp-article__body blockquote {
  border-left: 4px solid var(--color-accent, #2f6fed);
  padding: 8px 0 8px 24px;
  margin: 32px 0;
  font-size: 22px;
  line-height: 1.5;
  font-style: italic;
  color: var(--color-text, #1f2937);
  font-weight: 400;
}
.bp-article__body blockquote p { margin-bottom: 8px; }
.bp-article__body ul, .bp-article__body ol {
  margin: 0 0 20px 0;
  padding-left: 24px;
}
.bp-article__body li { margin-bottom: 8px; }
.bp-article__body li::marker {
  color: var(--color-accent, #2f6fed);
  font-weight: 700;
}
.bp-article__body a {
  color: var(--color-accent, #2f6fed);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.bp-article__body a:hover {
  text-decoration-thickness: 2px;
}
.bp-article__body img {
  max-width: 100%;
  border-radius: var(--radius-md, 12px);
  display: block;
  margin: 24px auto;
}

/* "Key takeaways" callout box */
.bp-callout {
  margin: 32px 0;
  padding: var(--space-4, 16px) var(--space-5, 24px);
  background: var(--color-bg-subtle, #f6f7fb);
  border-left: 4px solid var(--color-accent, #2f6fed);
  border-radius: 0 var(--radius-md, 12px) var(--radius-md, 12px) 0;
}
.bp-callout__label {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent, #2f6fed);
  margin: 0 0 8px 0;
}
.bp-callout__body {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text, #111);
}
.bp-callout__body p { margin: 0 0 8px 0; }
.bp-callout__body ul { margin: 0; padding-left: 20px; }
.bp-callout__body li { margin-bottom: 4px; }

.bp-article__tags {
  margin-top: var(--space-5, 24px);
  padding-top: var(--space-4, 16px);
  border-top: 1px solid var(--color-border-subtle, rgba(0,0,0,0.08));
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.bp-article__tags-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--color-text-muted, #6b7280);
  margin-right: 6px;
}
.bp-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--color-surface, #fff);
  font-size: 12px;
  color: var(--color-text, #374151);
  text-decoration: none;
  border: 1px solid var(--color-border-subtle, rgba(0,0,0,0.12));
}
.bp-tag:hover {
  border-color: var(--color-accent, #2f6fed);
  color: var(--color-accent, #2f6fed);
}

/* ─── Continue reading ─────────────────────────────────────────── */
.bp-related {
  max-width: 1200px;
  margin: var(--space-7, 40px) auto 0;
  padding: 0 var(--space-4, 16px);
}
.bp-related__title {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 var(--space-4, 16px) 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border-subtle, rgba(0,0,0,0.1));
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.bp-related__title small {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  color: var(--color-text-muted, #6b7280);
  letter-spacing: 0;
  text-transform: none;
}
.bp-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4, 16px);
}

.bp-pagination {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: var(--space-6, 32px);
  padding-top: var(--space-4, 16px);
  border-top: 1px solid var(--color-border-subtle, rgba(0,0,0,0.08));
}
.bp-pagination a, .bp-pagination span {
  padding: 6px 12px;
  border: 1px solid var(--color-border-subtle, rgba(0,0,0,0.12));
  border-radius: 6px;
  font-size: 13px;
  text-decoration: none;
  color: inherit;
}
.bp-pagination .is-current {
  background: var(--color-accent, #2f6fed);
  color: #fff;
  border-color: var(--color-accent, #2f6fed);
}

.bp-feed-link {
  margin-top: var(--space-7, 40px);
  padding-top: var(--space-4, 16px);
  border-top: 1px solid var(--color-border-subtle, rgba(0,0,0,0.08));
  text-align: center;
}
.bp-feed-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--color-surface, #fff);
  color: var(--color-text, #111);
  text-decoration: none;
  font-size: 13px;
  border: 1px solid var(--color-border-subtle, rgba(0,0,0,0.12));
}
.bp-feed-link a:hover {
  border-color: var(--color-accent, #2f6fed);
  color: var(--color-accent, #2f6fed);
}

/* ─── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .bp-article__body { font-size: 17px; line-height: 1.7; }
  .bp-article__body p:first-of-type::first-letter {
    font-size: 3.4em;
    margin: 4px 8px -2px 0;
  }
  .bp-card__headline { font-size: 19px; }
  .bp-card--featured .bp-card__headline { font-size: 26px; }
  .bp-masthead__issue { flex-direction: column; gap: 6px; }
  .bp-masthead__issue-rule { display: none; }
}