/* Additions for blog index and single-post pages. Uses the same theme tokens
   as site.css, so light/dark and brand colours stay consistent. */

.breadcrumb {
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.breadcrumb a:hover { color: var(--sky-deep); text-decoration: underline; text-underline-offset: 4px; }

.post-meta {
  margin-top: 1rem;
  font-size: .875rem;
  color: var(--muted-foreground);
}

.post-hero {
  margin-top: 2.5rem;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-top: 1px solid var(--border);
}

.post-standfirst {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

.post-body { margin-top: 2.5rem; font-size: 1.0625rem; line-height: 1.75; }
.post-body > * + * { margin-top: 1.5rem; }
.post-body h2 { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.25; margin-top: 3rem; letter-spacing: -.015em; }
.post-body h3 { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.3; margin-top: 2.5rem; letter-spacing: -.015em; }
.post-body h4 { font-family: var(--font-display); font-size: 1.125rem; margin-top: 2rem; }
.post-body p  { color: var(--muted-foreground); }
.post-body strong { color: var(--foreground); font-weight: 600; }
.post-body a { color: var(--sky-deep); text-decoration: underline; text-underline-offset: 4px; }
.post-body ul, .post-body ol { padding-left: 1.5rem; color: var(--muted-foreground); }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li + li { margin-top: .5rem; }
.post-body img { width: 100%; height: auto; margin-block: 2rem; }
.post-body figure { margin-block: 2rem; }
.post-body figcaption { margin-top: .75rem; font-size: .8125rem; color: var(--muted-foreground); }
.post-body blockquote {
  border-left: 2px solid var(--sky-deep);
  padding-left: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.6;
}
.post-body pre {
  background: var(--muted);
  padding: 1.25rem;
  overflow-x: auto;
  font-size: .875rem;
  line-height: 1.6;
}
.post-body code { background: var(--muted); padding: .1em .35em; font-size: .9em; }
.post-body pre code { background: none; padding: 0; }
.post-body hr { margin-block: 2.5rem; border-top: 1px solid var(--border); }
.post-body table { width: 100%; font-size: .9375rem; }
.post-body th, .post-body td { border: 1px solid var(--border); padding: .625rem .875rem; text-align: left; }
.post-body th { font-weight: 600; background: var(--muted); }

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 3.5rem;
  font-size: .875rem;
}
.pagination a, .pagination span {
  min-width: 2.5rem;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  text-align: center;
}
.pagination a:hover { border-color: var(--foreground); }
.pagination .is-current { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }