/* Blog: the one chronological shape. Reverse-date list, single-column posts with a
   prominent date. The category/tag line (.terms) and backlinks come from base.css. */

.blog-list { max-width: 44rem; margin: 0; padding: 2.5rem 1.5rem; }

.post-row { margin: 1.6rem 0; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.post-row h2 { font-size: 1.2rem; margin: 0.2rem 0 0.15rem; }
.post-row h2 a { text-decoration: none; }
/* Date sits below the title: muted (not the link colour) and lighter, so it doesn't read as clickable. */
.post-row time { display: block; margin: 0 0 0.5rem; color: var(--muted); font-size: 0.78rem; font-weight: 400; font-family: var(--font-ui); }
.post-row p { margin: 0; }
.post-row .read-more { display: inline-block; margin-top: 0.4rem; font-size: 0.85rem; font-family: var(--font-ui); }

/* Pager under the list: newer on the left, older on the right, count in the middle.
   The middle stays centred because both sides are equal-width flex items. */
.pager {
  display: flex; align-items: baseline; gap: 1rem;
  margin: 2.2rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-ui); font-size: 0.88rem;
}
.pager-side { flex: 1 1 0; }
.pager-right { text-align: right; }
.pager-count { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.pager a { text-decoration: none; font-weight: 600; }
.pager a:hover { text-decoration: underline; }

/* Single post — the date leads, above the title, to stress the chronology. The width and
   padding come from .entry in base.css, which wraps the post and its side column. */
.post-date {
  margin: 0 0 0.35rem; font-family: var(--font-ui);
  font-size: 1.05rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--muted);
}
.post h1 { margin-bottom: 1.4rem; }