.page-header { border-bottom: 1px solid var(--line); background: var(--mist); }
.page-header .breadcrumbs { padding-top: var(--s-4); }
.page-header__inner { max-width: var(--measure); padding-block: var(--s-4) var(--s-7); }
.page-header__title { font-size: var(--step-3); }
.page-header__standfirst { font-size: var(--step-1); color: var(--ink-soft); margin-top: var(--s-4); }
.page-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-firm);
}
.page-header__meta dt {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.page-header__meta dd { margin: 0; font-size: var(--step-0); color: var(--ink); }
@media (max-width: 620px) { .page-header__meta { gap: var(--s-4); } }

/* With imagery, the header becomes a two column band. */
.page-header--media .container {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--s-7);
  align-items: center;
}
.page-header--media .breadcrumbs { grid-column: 1 / -1; }
.page-header--media .page-header__inner { padding-bottom: var(--s-7); }
.page-header__media img,
.page-header__media .img-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
@media (max-width: 860px) {
  .page-header--media .container { grid-template-columns: 1fr; gap: var(--s-5); }
  .page-header--media .page-header__inner { padding-bottom: 0; }
  .page-header--media { padding-bottom: var(--s-6); }
}