/* Blog — its own layout, built entirely on the shared tokens: the colours
   (--surface, --text, --text-muted, --brand, --brand-dark, --border), the
   Poppins/Inter families, the .page-panel container width (980px, reused
   verbatim by the templates), and the site link colour. No new colour values
   and no new container width. The ONE new step is .blog-dek: a standfirst has
   to sit a notch above body prose or it is just a first paragraph. */

/* Wrapper — same role as the legal pages' .policy-wrap: pad the shared
   .page-panel out from nav and footer, and let it grow. */
.blog-wrap { padding: 2.75rem 2rem 4rem; flex: 1; }

/* ── Post hero: title · dek · byline ─────────────────────────────────────── */
.blog-hero { margin: 0 0 2.25rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.blog-title {
  font-family: 'Poppins', sans-serif; font-size: 1.5rem; font-weight: 800;
  color: var(--text); line-height: 1.2; margin: 0 0 0.9rem;
}
.blog-dek {   /* the one new size: Inter, one step above body, muted */
  font-family: 'Inter', sans-serif; font-size: 1.1rem; font-weight: 400;
  color: var(--text-muted); line-height: 1.55; margin: 0 0 1.1rem;
}
.blog-byline { font-family: 'Inter', sans-serif; font-size: 0.82rem; color: #9ca3af; margin: 0; }

/* ── Prose: h2 · p · strong · em · links · figures ───────────────────────── */
.blog-prose h2 {
  font-family: 'Poppins', sans-serif; font-size: 1.15rem; font-weight: 700;
  color: var(--text); line-height: 1.3; margin: 2.25rem 0 0.6rem;
}
.blog-prose p {
  font-family: 'Inter', sans-serif; font-size: 0.98rem; color: #374151;
  line-height: 1.75; margin: 0 0 1.05rem;
}
.blog-prose strong { font-weight: 700; color: var(--text); }
.blog-prose em { font-style: italic; }
.blog-prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.blog-prose a:hover, .blog-prose a:focus-visible { color: var(--brand-dark); }

/* ── Figures (capability now; the two photos ship later as a content edit) ── */
.blog-figure { margin: 1.75rem 0; }
.blog-figure img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border); }
.blog-figcaption { font-family: 'Inter', sans-serif; font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; margin: 0.55rem 0 0; }
.blog-figcaption a { color: var(--text-muted); text-decoration: underline; }
.blog-figcaption a:hover, .blog-figcaption a:focus-visible { color: var(--brand); }

/* ── End CTA row ─────────────────────────────────────────────────────────── */
.blog-cta { margin: 2.75rem 0 0; padding-top: 1.75rem; border-top: 1px solid var(--border); }

/* ── Index: a plain stacked list, not a card grid (one item would read as a
      failed load, and a scannable list is the right form for posts). ──────── */
.blog-index-head { margin: 0 0 2rem; }
.blog-index-title { font-family: 'Poppins', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--text); margin: 0; }
.blog-list { list-style: none; margin: 0; padding: 0; }
.blog-list-item { padding: 1.5rem 0; border-top: 1px solid var(--border); }
.blog-list-item:first-child { border-top: none; padding-top: 0; }
.blog-list-item h2 { font-family: 'Poppins', sans-serif; font-size: 1.15rem; font-weight: 700; margin: 0 0 0.4rem; }
.blog-list-item h2 a { color: var(--text); text-decoration: none; }
.blog-list-item h2 a:hover, .blog-list-item h2 a:focus-visible { color: var(--brand); text-decoration: underline; }
.blog-list-date { font-family: 'Inter', sans-serif; font-size: 0.82rem; color: #9ca3af; margin: 0 0 0.5rem; }
.blog-list-excerpt { font-family: 'Inter', sans-serif; font-size: 0.94rem; color: #374151; line-height: 1.7; margin: 0; }

@media (max-width: 640px) {
  .blog-wrap { padding: 2rem 1.25rem 3rem; }
  .blog-title, .blog-index-title { font-size: 1.35rem; }
  .blog-dek { font-size: 1.02rem; }
}