/* The shared navigation, on a page that has its own chrome.

   dj.html is a studio, not a document. It sets its own palette in
   dj-brand.css and does not load brand.css, so the nav arrives with every
   custom property it needs undefined and renders as unstyled black text on
   black. This maps the studio's variables onto the ones the nav expects,
   and carries the handful of nav rules that live in brand.css.

   It is a translation layer, not a second design. If the nav changes shape
   in brand.css it changes here too, which is the cost of the studio having
   its own skin, and cheaper than the studio having its own menu. */
.nav {
  --void: var(--bg-deep, #060807);
  --soot: var(--panel-deep, #0D100E);
  --cream: var(--text-main, #F3E7D8);
  --cream-dim: var(--text-dim, #8A9790);
  --cream-faint: color-mix(in srgb, var(--text-dim, #8A9790) 78%, transparent);
  --accent: var(--amber, #E08A3C);
  --penny: var(--amber, #E08A3C);
  --hair: var(--edge, #2E4038);
  --hair-soft: color-mix(in srgb, var(--edge, #2E4038) 70%, transparent);
  --gutter: clamp(14px, 3vw, 34px);
  --display: Cinzel, serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --body: Inter, system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 160ms;
}
.drawer, .finder { --void: var(--bg-deep, #060807); }

.nav {
  /* fixed, and inset to all four sides, exactly as brand.css has it.
     This said sticky, and on this page that is not a cosmetic difference.
     dj.html makes body a centred flex column so the workstation can sit in
     the middle of a wide screen, and a sticky element is an ordinary flex
     item: it shrank to its content and centred itself, 179px in from the
     left and 363px narrower than the same bar on every other page. Site
     chrome must not be laid out by the page it happens to sit on.

     This file exists to carry the nav rules that live in brand.css. Carrying
     a different one is the whole bug. */
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  display: flex; align-items: center; gap: 12px;
  /* 13px, the same as brand.css. At 10 the bar was eleven pixels shorter
     than the identical bar on every other page. */
  padding: 13px clamp(14px, 3vw, 34px);
  background: color-mix(in srgb, var(--bg-deep, #060807) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--edge, #2E4038);
}
.nav-brand {
  display: flex; align-items: center; gap: 9px; text-decoration: none;
  color: var(--text-main, #F3E7D8); flex-shrink: 0;
}
.nav-brand img { border-radius: 50%; }
.nav-brand span {
  font: 700 15px/1 Cinzel, serif; letter-spacing: .04em;
}
.nav-brand span b { color: var(--amber, #E08A3C); font-weight: 700; }
.nav-links {
  display: none; gap: 2px; align-items: center; margin-left: auto;
  padding: 3px; border: 1px solid var(--edge, #2E4038); border-radius: 999px;
  background: color-mix(in srgb, var(--panel-deep, #0D100E) 76%, transparent);
}
/* 900, which is what brand.css actually resolves to: it says 1040 in the
   nav block and then 900 again in the menu block further down, and the later
   rule wins. Matching the number it prints rather than the number it says. */
@media (min-width: 900px) { .nav-links { display: flex; } }

/* The pills themselves, which this file never carried. Without them the links
   fell back to browser defaults: plain boxes, no letterspacing, and no way at
   all to see which section you were in, because nothing styled aria-current.
   site.js marks the current page on every page; only this one could not show
   it. */
.nav-links a {
  position: relative; padding: 7px 10px;
  font: 500 9.5px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .13em; text-transform: uppercase;
  color: color-mix(in srgb, var(--text-dim, #8A9790) 78%, transparent);
  border: 1px solid transparent; border-radius: 999px; text-decoration: none;
  transition: color 160ms, background 160ms, border-color 160ms;
}
.nav-links a:hover {
  color: var(--text-main, #F3E7D8);
  background: rgba(255, 255, 255, .045);
  border-color: color-mix(in srgb, var(--edge, #2E4038) 70%, transparent);
}
.nav-links a[aria-current="page"] {
  color: var(--text-main, #F3E7D8);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--amber, #E08A3C) 17%, transparent),
    rgba(255, 255, 255, .035));
  border-color: color-mix(in srgb, var(--amber, #E08A3C) 42%, transparent);
}
.nav-links a[data-soon="true"]::before {
  content: 'SOON'; margin-right: 5px; font-size: 7px; letter-spacing: .12em;
  color: var(--amber, #E08A3C); opacity: .85; vertical-align: 1px;
}
@media (min-width: 900px) and (max-width: 1180px) {
  .nav-links a { padding-inline: 8px; font-size: 8.8px; letter-spacing: .1em; }
}

/* ---------------------------------------------------------------------
   The category tabs and the panels they open.

   None of this was here, and it is what "the nav looks weird on the DJ page"
   actually was. The bar is six buttons, and with no rule for them they fell
   all the way back to the browser's own control styling: Arial at 13.3px on a
   light grey background with a two pixel black border, twenty one pixels
   tall, in the middle of a black studio. Every other page drew the same
   buttons as pill shaped monospace in the brand's colours at thirty six
   pixels.

   The dropdown had no rule either, so opening one would have put an unstyled
   white panel over the workstation.
   --------------------------------------------------------------------- */
.nav-item { position: relative; display: block; }

.nav-tab {
  /* Separate properties rather than the font shorthand, because the
     shorthand resets line-height to normal and brand.css lets it inherit.
     That one difference made the tab 29px tall here and 36px everywhere
     else: the same pill, sitting seven pixels shorter, in a bar of the same
     height. */
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 500;
  /* The studio sets a tighter line-height on body than the document pages do,
     and the tab inherits it, so it needs stating to land on the same 36px. */
  line-height: 1.6;
  letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--text-dim, #8A9790) 78%, transparent);
  background: transparent; border: 1px solid transparent; border-radius: 999px;
  padding: 8px 13px; cursor: pointer; white-space: nowrap;
  transition: color 160ms, background 160ms, border-color 160ms;
}
.nav-tab:hover,
.nav-tab[aria-expanded="true"] {
  color: var(--text-main, #F3E7D8);
  background: rgba(255, 255, 255, .06);
  border-color: color-mix(in srgb, var(--edge, #2E4038) 70%, transparent);
}
/* The section you are in stays marked while you read a page inside it, which
   is the difference between a menu and a breadcrumb. */
.nav-tab[data-section="true"] {
  color: var(--text-main, #F3E7D8);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--amber, #E08A3C) 17%, transparent),
    rgba(255, 255, 255, .035));
  border-color: color-mix(in srgb, var(--amber, #E08A3C) 42%, transparent);
}
.nav-tab:focus-visible {
  outline: 2px solid var(--text-main, #F3E7D8); outline-offset: 2px;
}

.nav-menu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 340px); z-index: 60;
  background: color-mix(in srgb, var(--panel-deep, #0D100E) 97%, transparent);
  border: 1px solid var(--edge, #2E4038); border-radius: 10px;
  padding: 12px; box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .95);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.nav-menu-blurb {
  margin: 0 0 9px; padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--edge, #2E4038) 70%, transparent);
  font: 9.5px/1.4 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber, #E08A3C);
}
.nav-menu-list { display: grid; gap: 1px; }
.nav-menu a {
  display: grid; gap: 1px; padding: 8px 9px; border-radius: 6px;
  text-decoration: none; border: 1px solid transparent;
}
.nav-menu a b {
  font: 600 13.5px/1.3 Inter, system-ui, sans-serif;
  color: var(--text-main, #F3E7D8); letter-spacing: 0;
}
.nav-menu a small {
  font: 11.5px/1.4 Inter, system-ui, sans-serif;
  color: var(--text-dim, #8A9790); letter-spacing: 0;
}
.nav-menu a:hover {
  background: rgba(255, 255, 255, .05);
  border-color: color-mix(in srgb, var(--edge, #2E4038) 70%, transparent);
}
.nav-menu a:hover b,
.nav-menu a[aria-current="page"] b { color: var(--amber, #E08A3C); }
.nav-menu a[data-soon="true"] b::after {
  content: 'SOON'; margin-left: 7px;
  font: 7.5px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .14em; color: var(--amber, #E08A3C); vertical-align: 2px;
}
.nav-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
@media (min-width: 900px) { .nav-tools { margin-left: 0; } }
.icon-btn {
  min-width: 34px; height: 34px; display: inline-flex; align-items: center;
  justify-content: center; gap: 6px;
  border: 1px solid var(--edge, #2E4038); border-radius: 3px;
  background: transparent; color: var(--text-main, #F3E7D8); cursor: pointer;
}
.icon-btn:hover { border-color: var(--amber, #E08A3C); color: var(--amber, #E08A3C); }
.btn.btn-sm.btn-solid {
  display: inline-flex; align-items: center; padding: 8px 13px;
  font: 600 11px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  color: #0D100E; background: var(--amber, #E08A3C); border-radius: 3px;
}
.drawer {
  position: fixed; inset: 0; z-index: 950; display: block;
  background: color-mix(in srgb, var(--bg-deep, #060807) 97%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: 76px clamp(14px, 3vw, 34px) 48px;
  transform: translateY(-100%); transition: transform .55s cubic-bezier(.2, .8, .2, 1);
  overflow-y: auto; overscroll-behavior: contain;
  color: var(--text-main, #F3E7D8);
}
.drawer[data-open="true"] { transform: translateY(0); }
.drawer-in {
  max-width: 1200px; margin: 0 auto; display: grid;
  gap: clamp(20px, 3vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  align-items: start;
}
.drawer a { text-decoration: none; color: var(--text-main, #F3E7D8); }
.drawer-close { position: fixed; top: 16px; right: clamp(14px, 3vw, 34px); z-index: 2; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The studio does not load brand.css, so it never got the rules that drop
   the Oath button and the Find label on a narrow screen. Without them the
   tools row ran 61px past the viewport and the studio scrolled sideways. */
@media (max-width: 560px) {
  .nav-oath { display: none; }
  .find-btn i { display: none; }
}
@media (max-width: 400px) { .burger i { display: none; } }
.nav { min-width: 0; }
.nav-brand { min-width: 0; }
.nav-brand span { white-space: nowrap; }
@media (max-width: 430px) { .nav-brand span { display: none; } }

/* A closed drawer is out of the document's way, not merely moved. Translated
   off screen it still answers a tap in the area it used to occupy, which on
   the DJ page means an invisible menu over the instrument. */
.drawer[data-open="false"] { visibility: hidden; pointer-events: none; }
.drawer[data-open="true"]  { visibility: visible; pointer-events: auto; }

/* ---------------------------------------------------------------------
   The menu itself: the button that opens it and everything inside it.

   The bar was fixed last time and the drawer was not, because the drawer
   only shows once you click, and a rule that is missing behind a click is
   a rule nobody sees until a user finds it.

   Three separate omissions, and the first one explains the other two.

   brand.css line 131 carries "button, input, select, textarea { font:
   inherit }". A browser does not let a form control inherit the page font
   on its own; the user agent stylesheet hands every button Arial at
   13.3px and that is that. Every page that loads brand.css gets the reset
   and nobody ever notices it is doing anything. The studio does not load
   brand.css, so its Menu button was drawing in Arial in the middle of a
   black instrument.

   Inherit is the wrong repair here though. On this page inherit means the
   studio's monospace, which is not the brand's nav font either. So the
   nav names its own type rather than borrowing whatever the host page
   happens to use. That is the whole job of this stylesheet.

   Then the drawer internals, which had no rules at all. The markup is a
   list of <details> elements, so with nothing styling them the browser
   drew its own disclosure triangles, set every link in the studio's
   16px monospace, and left the group separators and the pill borders off
   entirely. Same failure as the category tabs: an unstyled control falls
   back to something, and what it falls back to is never the brand.
   --------------------------------------------------------------------- */
/* :where() so this whole selector counts as zero specificity. A reset that
   outranks the rules it is resetting is not a reset, it is a bug waiting:
   plain ".nav button" would beat ".nav-tab" and put the category tabs back
   into Inter, undoing the fix that went in with them. */
:where(.nav, .drawer) :where(button, input) {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px; color: inherit;
}
.icon-btn { font-size: 13px; }
.find-btn i, .burger i {
  font: 9.5px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .14em; text-transform: uppercase; font-style: normal;
}

/* The burger and the pill row overlap between 900 and 1040, which is what
   brand.css does too. Matching the behaviour rather than tidying it, so
   the two stylesheets cannot drift apart again. Without this the studio
   showed the full pill row and a Menu button at the same time at every
   width, which no other page does. */
.burger { display: grid; }
@media (min-width: 1040px) { .burger { display: none; } }

.drawer a {
  font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  font-size: clamp(16px, 3.6vw, 19px); font-weight: 700;
  color: var(--text-main, #F3E7D8); text-decoration: none;
  padding: 9px 0; min-height: 44px;
  border-bottom: 1px solid color-mix(in srgb, var(--amber, #E08A3C) 13%, transparent);
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.drawer a:hover, .drawer a[aria-current="page"] { color: var(--amber, #E08A3C); }
.drawer a:focus-visible {
  outline: 2px solid var(--text-main, #F3E7D8); outline-offset: 2px;
}

.drawer-quick { grid-column: 1 / -1; }
.drawer-quick h2, .drawer-contact h2 {
  font: 9.5px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--amber, #E08A3C); margin: 0 0 9px; padding-bottom: 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--amber, #E08A3C) 26%, transparent);
}
.drawer-quick > div { display: flex; flex-wrap: wrap; gap: 7px; }
.drawer-quick a {
  border: 1px solid color-mix(in srgb, var(--amber, #E08A3C) 26%, transparent);
  border-radius: 999px; padding: 8px 14px;
  font: 600 13px/1.2 Inter, system-ui, sans-serif; letter-spacing: 0;
  color: var(--text-main, #F3E7D8); min-height: 0;
}
.drawer-quick a:hover {
  border-color: var(--amber, #E08A3C); color: var(--amber, #E08A3C);
}

.drawer-group {
  border-bottom: 1px solid color-mix(in srgb, var(--amber, #E08A3C) 13%, transparent);
}
/* list-style: none is what removes the triangle in most browsers. Safari
   wants the -webkit pseudo element as well, and leaving it out is how you
   get a marker on one browser and not the others. */
.drawer-group summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline;
  gap: 9px; padding: 13px 0; min-height: 44px;
}
.drawer-group summary::-webkit-details-marker { display: none; }
.drawer-group summary b {
  font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  font-size: clamp(17px, 3.6vw, 20px); font-weight: 700;
  color: var(--text-main, #F3E7D8); letter-spacing: 0;
}
.drawer-group summary small {
  font: 11.5px/1.4 Inter, system-ui, sans-serif; letter-spacing: 0;
  color: var(--text-dim, #8A9790);
}
.drawer-group summary span {
  margin-left: auto;
  font: 10px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .14em; color: var(--amber, #E08A3C); opacity: .75;
}
.drawer-group[open] summary b { color: var(--amber, #E08A3C); }

.drawer-items { display: grid; gap: 1px; padding: 0 0 12px; }
.drawer-items a {
  display: grid; gap: 1px; padding: 9px 10px; border-radius: 6px;
  border-bottom: 0; min-height: 44px; align-content: center;
}
.drawer-items a b {
  font: 600 14.5px/1.3 Inter, system-ui, sans-serif; letter-spacing: 0;
  color: var(--text-main, #F3E7D8);
}
.drawer-items a small {
  font: 12px/1.4 Inter, system-ui, sans-serif; letter-spacing: 0;
  color: var(--text-dim, #8A9790);
}
.drawer-items a:hover { background: rgba(255, 255, 255, .04); }
.drawer-items a:hover b,
.drawer-items a[aria-current="page"] b { color: var(--amber, #E08A3C); }
.drawer-items a[data-soon="true"] b::after {
  content: 'SOON'; margin-left: 7px;
  font: 7.5px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .14em; color: var(--amber, #E08A3C); vertical-align: 2px;
}

.drawer-contact { grid-column: 1 / -1; }
.drawer-contact a { font: 600 14px/1.4 Inter, system-ui, sans-serif; letter-spacing: 0; }