/* VANE — mobile primary nav (hamburger + dropdown)
   Progressive enhancement: styles only engage once vane-nav.js
   adds `.js-nav` to <header class="nav">. No JS = unchanged nav. */

.nav-burger{display:none}

@media(max-width:720px){

  /* burger button (injected by JS) */
  header.nav.js-nav .nav-burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:36px;height:36px;margin-left:auto;padding:7px;
    background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  header.nav.js-nav .nav-burger span{
    display:block;width:100%;height:1.5px;background:var(--ink,#141312);
    transition:transform .3s ease,opacity .2s ease;transform-origin:center;
  }
  header.nav.js-nav.open .nav-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  header.nav.js-nav.open .nav-burger span:nth-child(2){opacity:0}
  header.nav.js-nav.open .nav-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

  /* collapse the link row into a dropdown panel */
  header.nav.js-nav .nav-links{
    position:absolute;top:100%;left:0;right:0;z-index:20;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(255,255,255,.985);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line,#ECEAE5);
    box-shadow:0 18px 40px -22px rgba(0,0,0,.28);
    padding:2px 24px 14px;
    max-height:0;overflow:hidden;opacity:0;pointer-events:none;
    transition:max-height .34s cubic-bezier(.4,0,.2,1),opacity .22s ease;
  }
  header.nav.js-nav.open .nav-links{
    max-height:84vh;overflow:auto;opacity:1;pointer-events:auto;
  }
  header.nav.js-nav .nav-links a{
    font-size:14px!important;letter-spacing:.14em!important;
    padding:14px 2px!important;width:100%;
    border-bottom:1px solid rgba(20,19,18,.07);color:var(--ink,#141312);
  }
  header.nav.js-nav .nav-links a:last-child{border-bottom:0}
  /* items hidden on small screens should reappear inside the menu */
  header.nav.js-nav .nl-collection{display:block!important}
}