/* ==========================================================================
   Blitz — Insights blog layer. Loaded ONLY on /blog/ pages, after site.css.
   Tailwind Play CDN ships no Typography plugin, so long-form article prose is
   styled here (scoped to .article-prose). Matches site.css conventions:
   hardcoded warm-light tokens — page #FAF8F4 · text #1A1A1A · muted #5A5A54 ·
   faint #6E6D65 · accent #E0531F (dark #C2461A) · subtle #E7E1D6 · surface #F3EFE8.
   Fonts: "Inter Tight" (display) · Inter (body) · "Instrument Serif" (quote).
   ========================================================================== */

/* ---- article prose: vertical rhythm via the lobotomized-owl, then overrides ---- */
.article-prose { color: #5A5A54; font-size: 1.125rem; line-height: 1.75; }
.article-prose > * + * { margin-top: 1.25rem; }
.article-prose p { color: #5A5A54; }
.article-prose .lead { font-size: 1.3rem; line-height: 1.6; color: #3A3A36; }

.article-prose h2 {
  font-family: "Inter Tight", Inter, sans-serif; font-weight: 700; color: #1A1A1A;
  font-size: clamp(1.5rem, 2.2vw + 1rem, 1.95rem); line-height: 1.2;
  letter-spacing: -.01em; margin-top: 2.75rem;
}
.article-prose h3 {
  font-family: "Inter Tight", Inter, sans-serif; font-weight: 700; color: #1A1A1A;
  font-size: 1.25rem; line-height: 1.3; margin-top: 1.85rem;
}
.article-prose h2 + p, .article-prose h3 + p { margin-top: .65rem; }

.article-prose a {
  color: #C2461A; text-decoration: none; font-weight: 500;
  border-bottom: 1px solid rgba(224,83,31,.3); transition: border-color .2s ease;
}
.article-prose a:hover { border-bottom-color: #E0531F; }
.article-prose strong { color: #1A1A1A; font-weight: 600; }

.article-prose ul, .article-prose ol { padding-left: 1.4rem; }
.article-prose ul { list-style: disc; }
.article-prose ol { list-style: decimal; }
.article-prose li { margin-top: .5rem; padding-left: .25rem; }
.article-prose li::marker { color: #E0531F; }

/* ---- pull quote ---- */
.blog-quote {
  margin: 2.4rem 0; padding: .15rem 0 .15rem 1.5rem; border-left: 3px solid #E0531F;
  font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: clamp(1.4rem, 1.4vw + 1rem, 1.85rem); line-height: 1.4; color: #1A1A1A;
}

/* ---- key-facts aside ---- */
.blog-keyfacts {
  margin: 2.4rem 0; background: #F3EFE8; border: 1px solid #E7E1D6;
  border-radius: 18px; padding: 1.4rem 1.7rem;
}
.blog-keyfacts h3 {
  font-family: "Inter Tight", Inter, sans-serif; font-weight: 700; color: #1A1A1A;
  font-size: 1.05rem; margin: 0 0 .7rem;
}
.blog-keyfacts ul { margin: 0; padding-left: 1.2rem; list-style: disc; }
.blog-keyfacts li { margin-top: .45rem; color: #5A5A54; }
.blog-keyfacts li::marker { color: #E0531F; }

/* ---- tag pills ---- */
.blog-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.5rem; }
.blog-tag {
  font: 600 12px "Inter Tight", Inter, sans-serif; color: #C2461A;
  background: rgba(224,83,31,.08); border: 1px solid rgba(224,83,31,.2);
  border-radius: 9999px; padding: 5px 12px;
}