/* Shared navigation: the calm, indexed control bar from the new home page. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border: 0;
  box-shadow: none;
  background: #f0ecdf;
  color: #243031;
}

.site-header::after { display: none; }

.site-nav {
  width: calc(100% - 92px);
  min-height: 92px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  border-bottom: 1px solid rgb(36 48 49 / 0.17);
}

.brand {
  grid-column: 1;
  min-height: 0;
  gap: 0.65rem;
  color: #243031;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 1.08rem;
  letter-spacing: -0.05em;
  text-transform: lowercase;
}

.brand-mark { width: 36px; height: 36px; flex-basis: 36px; border-radius: 50%; box-shadow: none; }
.brand-text { font-family: "Space Grotesk", Arial, sans-serif; font-size: 1.08rem; letter-spacing: -0.05em; }

.nav-menu { grid-column: 2; height: auto; gap: 0.35rem; }

.nav-menu a {
  min-width: 0;
  min-height: 0;
  padding: 0.45rem 0.58rem;
  border: 1px solid transparent;
  border-radius: 0;
  border-bottom: 1px solid transparent;
  color: #243031;
  font-size: 0.68rem;
  line-height: 1;
  letter-spacing: 0.07em;
  opacity: 0.68;
  transition: border-color 180ms ease, color 180ms ease, opacity 180ms ease;
}

.nav-menu a::after { display: none; }

.nav-menu a:hover,
.nav-menu a[aria-current="page"] {
  border-color: #ff6420;
  color: #243031;
  background: transparent;
  opacity: 1;
}

.nav-live {
  grid-column: 3;
  justify-self: end;
  color: rgb(36 48 49 / 0.64);
  font: 500 0.68rem/1 "DM Mono", monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

@media (min-width: 681px) and (max-width: 900px) {
  .site-nav { min-height: 76px; }
}

@media (max-width: 680px) {
  .site-nav { width: calc(100% - 32px); min-height: 72px; grid-template-columns: 1fr auto; gap: 0.75rem; }
  .nav-live { display: none; }
  .nav-toggle { grid-column: 2; display: block; width: 44px; height: 44px; border-color: rgb(36 48 49 / 0.26); color: #243031; }
  .nav-menu { inset: calc(env(safe-area-inset-top) + 72px) 16px auto; grid-column: auto; gap: 0; border-color: rgb(36 48 49 / 0.17); background: #f0ecdf; }
  .nav-menu a { min-height: 48px; border: 0; border-bottom: 1px solid rgb(36 48 49 / 0.17); }
  .nav-menu a:hover,
  .nav-menu a[aria-current="page"] { border: 1px solid #ff6420; background: transparent; }
}