/* ── Blog styles — layered on site.css, nothing here touches other pages.
   The blog wears the site's own anatomy (page-hero + prose, same as the
   guide pages); this file only adds what site.css lacks: the card grid,
   the byline, and the post CTA box. Restyled 2026-08-25 on her call
   ("make it match"). */

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 34px 0 44px; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } }

.post-card { border: 1.5px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; background: var(--white); box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: box-shadow .15s ease, transform .15s ease; text-decoration: none; color: inherit; }
.post-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
/* Her branded square graphics ARE the card art — show the whole square,
   never crop the words (2026-08-26, True_North_Blog_Images). */
.post-thumb { aspect-ratio: 1 / 1; background: var(--cream-2); border-bottom: 1px solid var(--line); }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-body { padding: 16px 17px 18px; display: flex; flex-direction: column; flex: 1; }
.pc-body .cat { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--medium); font-weight: 700; }
.pc-body h3 { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; color: var(--deep); margin: 6px 0 8px; line-height: 1.25; }
.pc-body p { font-size: .85rem; color: var(--ink-2); flex: 1; margin: 0; }
.pc-body .read { margin-top: 12px; font-size: .82rem; font-weight: 700; color: var(--medium); }

/* single post — everything else comes from .page-hero and .prose */
.post-byline { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.post-byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--line-strong); }
.post-byline .who { font-size: .88rem; line-height: 1.5; }
.post-byline .who b { color: var(--deep); }
.post-byline .who span { color: var(--ink-2); }
.prose p.lead { color: var(--ink); font-size: 1.12rem; font-weight: 500; }
.post-cta { background: var(--soft-green); border: 1.5px solid var(--line-strong); border-left: 3px solid var(--medium); border-radius: var(--radius); padding: 24px 26px; margin-top: 32px; text-align: center; }
.post-cta p { font-size: 1rem; color: var(--deep); margin: 0 0 14px; font-weight: 500; }
.post-cta a.btn-solid { color: var(--white); }
.post-signoff { font-size: .85rem; color: var(--ink-2); margin-top: 22px; font-style: italic; }
.post-backlink { display: inline-block; margin: 26px 0 0; font-size: .88rem; font-weight: 700; color: var(--medium); text-decoration: none; }