@media (max-width: 820px) {
  .topbar {
    overflow: hidden;
  }

  .nav {
    min-height: 68px;
    height: auto;
    padding: 10px 0 8px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .brand {
    width: max-content;
    max-width: 100%;
  }

  .navlinks {
    display: flex !important;
    width: 100%;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 2px;
    scroll-snap-type: x proximity;
  }

  .navlinks::-webkit-scrollbar {
    display: none;
  }

  .navlinks a {
    flex: 0 0 auto;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 999px;
    background: rgba(255,255,255,.025);
    color: #b8b4ad;
    font-size: .76rem;
    font-weight: 760;
    scroll-snap-align: start;
  }

  .navlinks a[aria-current="page"] {
    color: #080808;
    background: #efede6;
    border-color: #efede6;
  }
}

@media (max-width: 430px) {
  .nav {
    padding-top: 9px;
  }

  .navlinks a {
    min-height: 34px;
    padding: 0 11px;
    font-size: .72rem;
  }
}