/* Shared dark navigation on every page. */
.home-page { --home-header-height: 76px; }
.header {
  background: var(--dark);
  background: color-mix(in srgb, var(--dark) 90%, transparent);
  color: var(--bg);
  border-bottom: 1px solid color-mix(in srgb, var(--bg) 9%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.header-inner { min-height: 76px; }
.brand-logo,
.footer-logo { display: block; width: 190px; height: auto; }
.header .name,
.footer .footer-name { flex: none; }
.header .name-caption { color: var(--line); opacity: .8; }
.header nav > a:not(.button) { opacity: .76; transition: opacity .25s; }
.header nav > a:not(.button):hover,
.header nav > a[aria-current] { opacity: 1; }
.header nav > a:not(.button)::after { display: none; }
.header nav .button {
  background: var(--bg);
  border-color: var(--bg);
  color: var(--dark);
}
.header nav .button:hover {
  background: var(--surface);
  border-color: var(--surface);
}
.home-page .hero-copy { padding-top: calc(var(--home-header-height) + 100px); }

@media (max-width: 1023px) {
  .home-page .hero-copy { padding-top: calc(var(--home-header-height) + 74px); }
}
@media (max-width: 800px) {
  .header:has(nav.open) { background: var(--dark); }
  .header .menu-toggle { border-color: color-mix(in srgb, var(--bg) 22%, transparent); }
  .header nav > a:not(.button) { border-color: color-mix(in srgb, var(--bg) 12%, transparent); }
}
@media (max-width: 560px) {
  .brand-logo,
  .footer-logo { width: 166px; }
  .home-page .hero-copy { padding-top: calc(var(--home-header-height) + 60px); }
}