/* One nav for the Room.

   The pages had grown five different ones: 20px Oswald caps on Film and Music,
   14px Inter title-case on Artists and Punch, Barlow caps at 17px and 21px
   elsewhere. Moving between them visibly halved the header, which is what this
   fixes. The Film treatment wins because it is the one that reads right.

   They also listed different destinations -- Artists offered no Gallery and no
   Scenes -- so the link list is now identical everywhere too. Every page carries
   nav[aria-label="The Room"], so one selector reaches all of them without any
   page needing to know about this file.

   Loaded last, so it settles the argument with each page's own rules. The font
   shorthand is !important on purpose: several pages set it from a more specific
   selector than this one can be. */

/* Layout is desktop-only on purpose. On phones each page already decided how its
   header works -- Film shows a full-width row, the Room pages hand navigation to
   the menu button -- and overriding that pushed the row outside fixed-height
   headers and onto a link on Punch. Only the type scale is shared down there. */
@media (min-width: 901px) {
  nav[aria-label="The Room"] {
    /* Deliberately NOT !important. Several pages hide this row on phones and hand
       navigation to the menu button instead; their headers are fixed-height, so
       forcing the row back in made it spill past the header and, on Punch, land on
       top of a link. Phones keep each page's intended header; the menu button is
       on every one of them and reaches all eight destinations. */
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(14px, 2.1vw, 34px);
    /* Seven items will not fit a phone: let the row slide instead of wrapping
       into a second line or pushing the page sideways. */
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  nav[aria-label="The Room"]::-webkit-scrollbar { display: none; }
}

nav[aria-label="The Room"] a {
  font: 400 20px/1.4 Oswald, "Barlow Condensed", sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: normal !important;
  padding: 13px 0;
  white-space: nowrap;
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  /* v7/v8 (2026-09-28, launch audit F01): the row STAYS on phones, on every page.
     Film and Music always showed it; Artists and Scenes hid theirs and handed
     navigation to the menu, so moving between sections made the row vanish.
     It wraps under the wordmark as a full-width scrolling strip -- the same
     shape Film's own stylesheet gives it. */
  header:has(> nav[aria-label="The Room"]),
  .shell-header:has(> nav[aria-label="The Room"]) { flex-wrap: wrap; padding-bottom: 0 !important; min-height: 0 !important; height: auto !important; row-gap: 0; }
  .shell-header:has(> nav[aria-label="The Room"]) { padding-top: 14px; }
  .shell-header:has(> nav[aria-label="The Room"]) .shell-menu { display: none; }
  .shell-nav a.current:after { display: none; }
  nav[aria-label="The Room"] {
    display: flex !important; order: 99; flex: 1 0 100%; width: 100%; max-width: 100%; justify-content: flex-start !important;
    align-items: center; gap: 18px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 0; padding: 0;
  }
  nav[aria-label="The Room"]::-webkit-scrollbar { display: none; }
  nav[aria-label="The Room"] a { font-size: 18px !important; padding: 12px 0; }
}

/* v6 (2026-09-27): one tab colour everywhere -- Punch's header set its own grey. Element+attribute
   selector (0,1,2) beats a page's .site-nav a (0,1,1) without !important. */
nav[aria-label="The Room"] a { color: #eeeae3; transition: color .18s; }
nav[aria-label="The Room"] a:hover, nav[aria-label="The Room"] a:focus-visible { color: #ff796a; }