/* ============================================================
   BARE — the nav. One module, used by every page.

   Nothing about this bar is allowed to come from a page-level
   token, because index.html and the inner pages load different
   Typekit kits and each used to carry its own .nav rules. The
   font stacks below are written out in full for that reason.
   If you are changing the nav, change it here and nowhere else.
   ============================================================ */

:root{
  --nav-mono:'Space Mono',ui-monospace,Menlo,monospace;
  --nav-label:'modulator-text-vf','ModulatorTextLocal','Anton',sans-serif;
  /* The bar sits above every section and animation but below the film (#stage 200),
     the loader (300) and every transition (#wipe 150, #fly 350, #gate 500). Keeping
     it under those means the mark is covered by them automatically, instead of
     depending on a class being toggled at the right moment. */
  --nav-z:140;
  --nav-h:92px;
  --nav-pad:6vw;
  --nav-accent:#FF6F52;
}

/* ---- the bar ---- */
.nav{
  /* !important because two other sheets still put the bar in the ordinary flow:
     css/pages.css has `main,.nav,.foot{position:relative;z-index:1}` and css/work.css
     has `body>*:not(...){position:relative;z-index:1}`. Both out-specify a plain .nav,
     so on the case study pages the bar was landing at z-index 1, level with the page
     content, which is why the mark disappeared behind the artwork. */
  position:fixed!important;top:0;left:0;right:0;z-index:var(--nav-z)!important;
  display:flex;align-items:center;justify-content:space-between;
  padding:28px var(--nav-pad);height:var(--nav-h);box-sizing:border-box;
  mix-blend-mode:normal;transition:opacity .5s;
}
/* The bar used to run on mix-blend-mode:difference so the links stayed legible
   over the light About section. That also blended the MARK with whatever was
   painted under it, and in the hero that is the spinning instrument SVG, which
   punched grey holes through the logo. A child cannot opt out of a parent's
   blend, and blending the children instead does not work either: a blend only
   sees the backdrop inside its own stacking context, and .nav is one (fixed +
   z-index), so the links had nothing to blend against and went white on white.
   So: no blend at all. index.html's mark() toggles .onlight on the bar for any
   panel carrying .light, and the whole bar takes its colour from that. Every
   internal page measures below luminance 5 behind the bar at every scroll
   position, so they never need the toggle. */
.nav{color:#fff}
.nav.onlight{color:#111}
.nav .brand svg *{fill:currentColor}
/* during the hero film the whole bar goes, the mark included: it used to be held
   back deliberately, which left the logo sitting over the film */
.nav.hide > *{opacity:0;pointer-events:none}
.nav a{color:inherit;text-decoration:none}

/* ---- the mark. `.brand` wraps an svg on the homepage, `.logo`
       is the anchor itself on the inner pages: both land at 26px ---- */
.nav .brand{display:flex;align-items:center}
.nav .brand .logo{height:26px;width:auto;display:block}
.nav > a.logo{display:block;width:105px;height:auto;color:inherit}
.nav > a.logo svg{display:block;width:100%;height:auto}
.nav > a.logo svg *{fill:currentColor}

/* ---- the links ---- */
.nav ul{
  display:flex;gap:38px;list-style:none;margin:0;padding:0;
  font-family:var(--nav-mono)!important;
  font-variation-settings:normal!important;
  font-size:12px!important;font-weight:400!important;
  letter-spacing:.2em!important;text-transform:uppercase;
}
.nav ul a{opacity:.75;transition:opacity .3s,color .3s}
.nav ul a:hover{opacity:1}
.nav ul a.on{opacity:1;color:var(--nav-accent)}
.nav ul li.fl a b,.nav ul li.fl a em{display:none}
.nav ul li.panelhead{display:none}
li.m-only{display:none}

/* ---- the sound control ---- */
.nav .snd{display:flex;align-items:center;gap:8px;margin-left:38px;opacity:.75;cursor:pointer}
.nav .snd:hover{opacity:1}
.nav .snd #sndLbl{display:inline-block;min-width:7.2em}
.nav .snd .bars{display:flex;align-items:flex-end;gap:2px;height:10px}
.nav .snd .bars i{display:block;width:2px;height:3px;background:currentColor;transform-origin:50% 100%}
.nav .snd.on .bars i{animation:eq .9s ease-in-out infinite alternate}
.nav .snd .bars i:nth-child(2){animation-delay:.2s}
.nav .snd .bars i:nth-child(3){animation-delay:.45s}
.nav .snd .bars i:nth-child(4){animation-delay:.1s}
@keyframes eq{from{height:3px}to{height:10px}}

/* ---- burger ---- */
.burger{display:none;background:none;border:0;width:36px;height:30px;position:relative;cursor:pointer;color:inherit}
.burger span{position:absolute;left:6px;right:6px;height:1px;background:currentColor;top:11px;transition:transform .3s}
.burger span+span{top:18px}
.nav.open .burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav.open .burger span+span{transform:translateY(-3.5px) rotate(-45deg)}

.nav-contact{
  display:flex;flex-direction:column;gap:6px;
  font-family:var(--nav-mono)!important;font-size:12px!important;
  letter-spacing:.04em!important;text-transform:none!important;color:#8a8a8a;
}

/* ============================================================
   phones: the menu becomes the lift panel
   ============================================================ */
@media (max-width:900px){
  .nav{padding:22px var(--nav-pad);height:76px;mix-blend-mode:normal;
    background:linear-gradient(rgba(10,10,10,.85),rgba(10,10,10,0))}
  /* !important because .nav itself is z-index:var(--nav-z)!important (140), which
     otherwise wins here and leaves the open menu stuck at 140, under anything
     above it. The menu computed 140 while open until this was added. */
  .nav.open{background:transparent;mix-blend-mode:normal;z-index:460!important}
  .burger{display:block}
  .nav .brand,.nav .logo,.burger{position:relative;z-index:3}
  .nav .snd{display:none}

  .nav ul{
    display:grid!important;grid-template-columns:1fr 1fr;gap:10px;align-content:start;
    position:fixed;inset:0;z-index:1;margin:0;
    padding:calc(var(--navh,76px) + 3vh) 6vw 5vh;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    background:#0a0a0a url('../assets/bg/lift-steel.webp') center/calc(100vw / 6) repeat;
    box-shadow:inset 0 0 0 100vmax rgba(10,10,10,.55);
    opacity:0;visibility:hidden;transform:translateY(-3vh);
    transition:opacity .35s ease,transform .5s cubic-bezier(.2,.8,.2,1),visibility 0s .5s;
  }
  .nav.open ul{opacity:1!important;visibility:visible!important;transform:none!important;
    transition:opacity .35s ease,transform .5s cubic-bezier(.2,.8,.2,1),visibility 0s 0s}
  /* The hero-exit timeline animates `.nav > :not(.brand)` to opacity 0, which writes an
     INLINE opacity onto the burger and the menu. On a phone that exit is scrub-driven, so
     swiping up and down in the hero can leave the inline value part way down or at 0 -
     and an inline style beats a stylesheet rule. The menu then opened correctly (class on,
     z-index 460, hit-testable) while computing opacity 0, which reads as "it opens but is
     behind everything". These !important rules make an OPEN menu unconditionally visible
     whatever an animation left behind. `.nav.hide` is excluded so the film still hides the
     bar. */
  .nav:not(.hide) .burger{opacity:1!important}
  .nav.open ul li{opacity:1!important;transform:none!important}

  .nav ul li{border-bottom:0!important;padding:0!important;opacity:0;transform:translateY(12px);
    transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
  .nav.open ul li{opacity:1;transform:none}
  .nav.open ul li:nth-child(1){transition-delay:.05s}
  .nav.open ul li:nth-child(2){transition-delay:.09s}
  .nav.open ul li:nth-child(3){transition-delay:.13s}
  .nav.open ul li:nth-child(4){transition-delay:.17s}
  .nav.open ul li:nth-child(5){transition-delay:.21s}
  .nav.open ul li:nth-child(6){transition-delay:.25s}
  .nav.open ul li:nth-child(7){transition-delay:.29s}
  .nav.open ul li:nth-child(8){transition-delay:.33s}
  .nav.open ul li:nth-child(9){transition-delay:.37s}
  .nav.open ul li:nth-child(10){transition-delay:.41s}
  .nav.open ul li:nth-child(11){transition-delay:.45s}

  .nav ul li.m-only{display:block}
  .nav ul li.panelhead{display:flex!important;grid-column:1/-1;justify-content:space-between;
    font-family:var(--nav-label);font-variation-settings:'wdth' 150;font-size:9.5px;
    letter-spacing:.22em;text-transform:uppercase;color:#7a7a7a;
    padding:0 0 10px!important;border-bottom:1px solid #2a2a2a!important;margin-bottom:6px}

  .nav ul li.fl a{display:flex;flex-direction:column;justify-content:flex-end;gap:5px;height:92px;
    box-sizing:border-box;padding:12px 14px 13px;border:1px solid #3a3a3a;background:rgba(10,10,10,.55);
    color:#fff;text-decoration:none;opacity:1;position:relative;transition:border-color .3s,background .3s}
  .nav ul li.fl a b{display:block;position:absolute;left:14px;top:11px;font-family:var(--nav-mono);
    font-weight:400;font-size:9.5px;letter-spacing:.12em;color:#6a6a6a;transition:color .3s}
  .nav ul li.fl a span{display:block;font-family:var(--nav-label);font-variation-settings:'wdth' 150;
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.1;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav ul li.fl a em{display:block;font-style:normal;font-family:var(--nav-mono);font-size:9.5px;
    letter-spacing:.04em;color:#7a7a7a;margin:0;text-transform:none;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav ul li.fl a::after{content:'';position:absolute;right:12px;top:12px;width:5px;height:5px;
    border-radius:50%;background:#2a2a2a;transition:background .3s,box-shadow .3s}
  .nav ul li.fl a.on,.nav ul li.fl a:active{border-color:var(--nav-accent)}
  .nav ul li.fl a.on b,.nav ul li.fl a:active b{color:var(--nav-accent)}
  .nav ul li.fl a.on::after,.nav ul li.fl a:active::after{background:var(--nav-accent);
    box-shadow:0 0 8px 2px rgba(255,111,82,.5)}

  .nav ul li.snd{display:none}
  .nav ul li.nav-contact{display:flex;flex-direction:column;gap:6px;grid-column:1/-1;margin-top:14px;
    padding-top:14px!important;border-top:1px solid #2a2a2a!important;
    font-family:var(--nav-mono)!important;font-size:12px!important;letter-spacing:.04em!important;
    text-transform:none!important;color:#8a8a8a}
  .nav ul li.nav-contact .op{font-family:var(--nav-label);font-variation-settings:'wdth' 150;
    font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:#7a7a7a;margin-bottom:4px}
  .nav ul li.nav-contact a{color:#fff;opacity:1}

  body.menu-open{position:fixed;left:0;right:0;overflow:hidden}
}