.header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  padding-block: 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.header-left, .header-right {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px 18px;
}
/* The left side gives way: the brand stays, the navigation scrolls sideways (one row always). */
.header-left { flex: 1 1 auto; min-width: 0; }
.header-right { flex: 0 0 auto; }
.header-left > .brand { flex: 0 0 auto; }

/* Narrow screens: brand and the right side share the first row, the navigation gets its own
   (still one row, scrolling sideways). */
@media (max-width: 900px) {
  .header { flex-wrap: wrap; }
  .header-left { display: contents; }
  .header-left > .brand { order: 1; }
  .header-right { order: 2; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  .header-left > .nav { order: 3; flex: 1 1 100%; }
}