/* Red Earth — mobile navigation
   Shared by all six pages. The toggle and panel are built by menu.js from each page's
   own nav.main links, so this never falls out of sync with the header markup.
   Above 960px nothing here applies: the inline nav is visible and the toggle is hidden. */

.nav-toggle{ display:none; }
.nav-panel{ display:none; }

@media(max-width:960px){
  header.site nav.main{ gap:14px; }

  .nav-toggle{
    display:grid; place-content:center; gap:5px;
    width:46px; height:46px; flex:0 0 auto;
    background:transparent; border:1px solid var(--line-on-dark); border-radius:3px;
    cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent;
    transition:border-color .15s, background .15s;
  }
  .nav-toggle span{ display:block; width:19px; height:1.5px; background:var(--sand); transition:transform .22s ease, opacity .18s ease; }
  .nav-toggle:hover{ border-color:var(--terra-lift); }
  .nav-toggle:focus-visible{ outline:2px solid var(--terra-lift); outline-offset:2px; }
  header.site.nav-open .nav-toggle{ border-color:var(--terra-lift); background:rgba(226,123,100,.09); }
  header.site.nav-open .nav-toggle span:first-child{ transform:translateY(3.25px) rotate(45deg); }
  header.site.nav-open .nav-toggle span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

  .nav-panel{
    position:absolute; top:100%; left:0; right:0;
    background:var(--char-2); border-top:2px solid var(--terra);
    border-bottom:1px solid var(--line-on-dark);
    display:grid; overflow:hidden;
    max-height:0; opacity:0; visibility:hidden;
    transition:max-height .3s ease, opacity .2s ease, visibility .3s;
  }
  header.site.nav-open .nav-panel{ max-height:min(70vh,420px); opacity:1; visibility:visible; }

  .nav-panel a{
    display:flex; align-items:center; min-height:58px;
    padding:0 clamp(20px,5vw,40px);
    font-family:var(--sans); font-weight:600; font-size:19px; letter-spacing:-.02em;
    color:var(--sand); text-decoration:none;
    border-top:1px solid var(--line-on-dark);
    position:relative; transition:color .15s, background .15s;
  }
  .nav-panel a:first-child{ border-top:0; }
  .nav-panel a::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
    background:var(--terra-lift); transform:scaleY(0); transform-origin:top;
    transition:transform .18s ease;
  }
  .nav-panel a:hover,.nav-panel a:focus-visible{ color:var(--paper); background:rgba(247,243,237,.035); outline:none; }
  .nav-panel a:hover::before,.nav-panel a:focus-visible::before{ transform:scaleY(1); }
  .nav-panel a.here{ color:var(--terra-lift); }
  .nav-panel a.here::before{ transform:scaleY(1); }
}

@media(prefers-reduced-motion:reduce){
  .nav-panel,.nav-toggle span,.nav-panel a,.nav-panel a::before{ transition:none; }
}