/* Shared navigation stays compact without reducing touch targets. */
.site-header { background: var(--brand-strong); border-bottom-width: 1px; box-shadow: none; }
.site-header .container { gap: 1rem; min-height: 4.5rem; }
.site-header nav { margin-inline-start: auto; }
.site-header nav a { font-size: 1rem; border-radius: .3rem; }
.site-header nav a.active { box-shadow: none; }
.brand-icon { border-radius: .3rem; box-shadow: none; }
.brand-kicker { color: #becfc9; }

@media (max-width: 64rem) {
  .site-header { position: static; }
  .site-header .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem 16px;
    padding-block: .65rem .5rem;
  }
  .brand { grid-column: 1; grid-row: 1; gap: .6rem; }
  .brand-name { font-size: 1rem; }
  .brand-kicker { font-size: .6875rem; }
  .brand-icon { width: 2.5rem; height: 2.5rem; }
  .site-header nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 5rem), 1fr));
    width: 100%;
    margin: 0;
    padding-top: .5rem;
    border-top: 1px solid #45615a;
  }
  .site-header nav a { justify-content: center; padding: .4rem .2rem; min-width: 0; text-align: center; white-space: normal; }
  .access-menu { grid-column: 2; grid-row: 1; }
  .access-trigger { width: 44px; min-height: 44px; padding: 0; }
  .access-trigger > span:not(.access-avatar) { display: none; }
  .access-avatar { width: 28px; height: 28px; }
  .access-flyout { width: min(24rem, calc(100vw - 2rem)); max-height: calc(100dvh - 6rem); }
}

@media (max-width: 30rem) {
  .brand-icon { display: none; }
  .brand-copy { overflow-wrap: normal; }
}

@media print { .demo-banner { display: none; } }