/* ARQ — the header. One file, one truth.
   Every page links this and nothing else styles the nav, so a change here
   lands on all nine pages at once. Before this file the markup and the CSS
   were copied into each page and had already drifted into three versions.

   The colour tokens (--bone, --signal-bright, --glass) come from the page
   itself; every page declares the same set. Only Claude's orange lives here,
   because the header is the only place that uses it. */

:root{--claude:#D97757}

/* floating glass bar */
nav{position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:50;
    display:flex;align-items:center;justify-content:space-between;gap:clamp(1rem,3vw,2.2rem);
    padding:.7rem 1.2rem;border-radius:16px;width:min(94vw,860px);
    background:rgba(17,16,17,.55);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
    border:1px solid rgba(237,234,228,.09);box-shadow:0 12px 40px rgba(0,0,0,.4)}
nav img{height:26px;display:block}
nav .links{display:flex;gap:1.3rem;font-family:'MonaM',monospace;font-size:.56rem;
           letter-spacing:.14em;text-transform:uppercase}
nav .links a{opacity:.55;transition:opacity .2s,color .2s;padding:.4rem 0;cursor:pointer;white-space:nowrap}
nav .links a:hover{opacity:1;color:var(--signal-bright)}

/* where you are now — bone at full strength, no second accent */
nav .links a.here{opacity:1;color:var(--bone)}

/* the one coloured label. It is a product, not a section, so it keeps
   Claude's orange on hover and while you are inside the cluster. */
nav .links a.claude,nav .links a.claude:hover{opacity:1;color:var(--claude)}

/* Five labels still need tightening to clear a phone, but they all stay:
   the header only carries real destinations now, so there is nothing left
   that would be safe to hide. */
@media (max-width:980px){
  nav{padding:.55rem .8rem;gap:.7rem;width:96vw}
  nav img{height:20px}
  nav .links{gap:.72rem;font-size:.48rem;letter-spacing:.1em}
  nav .links a{padding:.3rem 0}
}
/* DTC Strategies made it five, and five no longer clears a 375px phone at the
   size above — the row ran to 364px inside a 360px bar. This notch buys the
   room back and now starts at 460px, because the squeeze begins well before
   the smallest phones. */
@media (max-width:460px){
  nav{padding:.5rem .7rem;gap:.55rem}
  nav .links{gap:.55rem;font-size:.45rem;letter-spacing:.07em}
}
/* And one more for a 320px screen, where the bar is only 307px wide. A notch
   rather than a hidden item — including the logo, which is the one element
   that costs 40px and says the same thing at 18px. */
@media (max-width:380px){
  nav{padding:.45rem .5rem;gap:.35rem}
  nav img{height:18px}
  nav .links{gap:.34rem;font-size:.4rem;letter-spacing:.02em}
}