/* ————————————————————————————————————————
   sonARe — the menu, one bar for every page
   loaded last on each page so it wins over older page styles.
   name on the left, the rooms in one order (inbetween · playground ·
   about · collabs), the sound switch last where a page has sound.
   values are written out (with the page's own tokens as first choice)
   because the pages do not share one stylesheet.
———————————————————————————————————————— */

.menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: 52px;
  padding: 0 24px;
  box-sizing: border-box;
  background: #000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* the toggle sits outside the scrolling list — it never drifts off-screen */
.menu > .snd { flex: none; }

.menu-mark {
  font-family: "Switzer", "Helvetica Neue", -apple-system, sans-serif;
  font-weight: 300;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: none;
  color: var(--porcelain, #eaedef);
  text-decoration: none;
}
.menu-mark .ar { font-weight: 400; }

.menu-rooms {
  display: flex;
  margin-left: auto;
  gap: clamp(16px, 3vw, 30px);
  overflow-x: auto;
  min-width: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.menu-rooms::-webkit-scrollbar { display: none; }
.menu-rooms a {
  white-space: nowrap;
  flex: none;
  font-family: "Fragment Mono", "SF Mono", ui-monospace, monospace;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--porcelain-faint, rgba(234, 237, 239, 0.5));
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 150ms linear, border-color 150ms linear;
}
.menu-rooms a:hover { color: var(--porcelain, #eaedef); }
.menu-rooms a.here {
  color: var(--porcelain, #eaedef);
  border-bottom-color: var(--porcelain-dim, rgba(234, 237, 239, 0.6));
}

/* the two full-screen rooms: same bar, but the picture runs behind it and
   a press on the bar's empty space still reaches the room */
.menu--over {
  background: transparent;
  border-bottom-color: transparent; /* the room draws its own hairline (.brand-bar) */
  pointer-events: none;
}
.menu--over a,
.menu--over button { pointer-events: auto; }
.menu--over .menu-mark,
.menu--over .menu-rooms a { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75); }

/* phones: the switch keeps its three bars and drops its word, so all four rooms fit */
@media (max-width: 480px) {
  .menu { padding: 0 16px; gap: 12px; }
  .menu-mark { font-size: 19px; }
  .menu-rooms { gap: 12px; }
  .menu-rooms a { font-size: 10px; letter-spacing: 0.05em; }
  .menu .snd { padding: 6px 9px; gap: 0; }
  .menu .snd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* narrow phones: a little tighter, so nothing is cut off down to 360px */
@media (max-width: 400px) {
  .menu { gap: 10px; }
  .menu-mark { font-size: 17px; }
  .menu-rooms { gap: 9px; }
  .menu-rooms a { font-size: 9.5px; letter-spacing: 0.02em; }
}