.page-hero {
  padding-block: 5rem 5.5rem;
  background:
    radial-gradient(circle at top left, rgba(166, 9, 61, 0.16), transparent 55%),
    radial-gradient(circle at bottom right, rgba(245, 130, 32, 0.22), transparent 55%),
    var(--color-page-hero-bg);
  color: var(--color-surface);
}

.page-hero-inner {
  display: flex;
  flex-direction: column;
}

.page-hero h1 {
  margin: 0 0 1.25rem;
  font-size: 2.6rem;
}

.page-hero p {
  margin: 0 0 1.75rem;
  font-size: 1rem;
  color: rgba(249, 250, 251, 0.9);
}

.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.archive-empty {
  max-width: var(--layout-max-width);
  margin: 2rem auto;
  padding-inline: var(--space-xl);
}