/* Blog list and article pages. Colours and type come from site.css. */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.post-card { display: flex; flex-direction: column; gap: 12px; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: #FFFFFF; }
.post-card:hover { border-color: var(--navy); }
.post-card h2 { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.post-card h2 a { color: var(--heading); text-decoration: none; }
.post-card h2 a:hover { color: var(--navy); }
.post-card h2 a:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 4px; }
.post-card p { margin: 0; color: var(--muted); }
.post-card .link { margin-top: auto; align-self: flex-start; }
.post-meta { margin: 0; font-size: 14px; font-weight: 500; color: var(--navy); letter-spacing: 0.01em; }
.page-hero .post-meta { color: var(--navy-soft); margin-bottom: 12px; }
.blog-status { color: var(--muted); }

.article { max-width: 44rem; margin: 0 auto; font-size: 17px; line-height: 1.75; color: var(--ink); }
.article h2 { font-size: 28px; line-height: 1.25; font-weight: 500; letter-spacing: -0.015em; margin: 2em 0 0.6em; color: var(--heading); text-wrap: balance; }
.article h3, .article h4 { font-size: 21px; line-height: 1.3; font-weight: 600; margin: 1.6em 0 0.5em; color: var(--heading); }
.article p { margin: 0 0 1.1em; }
.article ul, .article ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.article li { margin: 0.35em 0; }
.article a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.article a:hover { color: var(--navy-hover); }
.article blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--navy); color: var(--muted); }
.article figure { margin: 1.8em 0; }
.article img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); }
.article figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
.article hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }
.article > :first-child { margin-top: 0; }
.article-back { max-width: 44rem; margin: 40px auto 0; padding-top: 24px; border-top: 1px solid var(--line); }

.loading { color: var(--muted); }
.loading::after { content: ""; display: inline-block; width: 1em; height: 1em; margin-left: 10px; vertical-align: -2px; border: 2px solid var(--line); border-top-color: var(--navy); border-radius: 50%; animation: blog-spin 0.8s linear infinite; }
@keyframes blog-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loading::after { animation: none; } }
@media (max-width: 760px) {
  .post-card { padding: 24px; }
  .article { font-size: 16px; }
  .article h2 { font-size: 24px; }
}
.eyebrow-link { color: inherit; text-decoration: none; }
.eyebrow-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.article a.btn { color: #FFFFFF; text-decoration: none; }
.article a.btn-ghost { color: var(--navy); }
.page-hero .loading { color: rgba(255, 255, 255, 0.78); }
.post-card { overflow: hidden; }
.post-cover { display: block; margin: -32px -32px 8px; border-bottom: 1px solid var(--line); }
.post-cover img, .post-hero-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #0A0B10; }
.post-hero-cover { margin: 0 0 2.2em; }
.post-hero-cover img { border-radius: var(--radius); }
@media (max-width: 760px) { .post-cover { margin: -24px -24px 8px; } }