.page-header {
  background: #05070b;
  color: #e8eef4;
}
body:has(> .hero) > .page-header {
  margin-inline: -20px;
}
.page-navigation {
  max-width: 1104px;
  margin: auto;
  padding: 12px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font: 500 16px/1.5 system-ui, sans-serif;
}
.page-navigation .page-brand {
  margin-right: auto;
  padding: 8px 16px 8px 0;
  font: 14px/1.5 monospace;
}
.page-navigation a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #e8eef4;
  text-decoration: none;
}
.page-navigation a[aria-current="page"] {
  background: #e8eef4;
  color: #08090a;
}
.page-navigation a:hover { text-decoration: underline; }
.page-navigation a:focus-visible {
  outline: 2px solid #e8eef4;
  outline-offset: 3px;
}
@media (max-width: 480px) {
  .page-navigation .page-brand { flex-basis: 100%; padding: 0; }
}