/* ============================================================
   layout/nav.css — Sticky top navigation / tab bar.
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:7000;height:var(--nav);
  display:flex;align-items:center;justify-content:center;gap:clamp(4px,1.4vw,16px);
  background:rgba(243,239,230,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
/* small square separators framing every tab */
.nav-sep{
  flex:0 0 auto;
  align-self:center;
  color:var(--gold);
  opacity:.35;
  font-size:clamp(.42rem,1.4vw,.54rem);
  line-height:1;
  cursor:default;
  user-select:none;
  transition:opacity .2s ease,transform .2s ease;
}
.nav-sep:hover{opacity:.82;transform:scale(1.6);}
.nav-sep:active{opacity:.95;transform:scale(1.3);}
.nav button{
  background:none;border:none;cursor:pointer;font-family:var(--ui);font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;font-size:clamp(.52rem,2.4vw,.7rem);
  color:var(--ink-soft);padding:.4rem 0;position:relative;white-space:nowrap;transition:color .25s;
}
.nav button::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--gold);transform:scaleX(0);transition:transform .3s;
}
.nav button:hover{color:var(--ink);}
.nav button.active{color:var(--ink);}
.nav button.active::after{transform:scaleX(1);}

/* Five tabs must fit narrow phones without clipping the last label:
   tighten the gap/font/tracking and swap "More to Follow" for "More". */
.nav button .nav-mini{display:none;}
@media(max-width:560px){
  .nav{
    gap:clamp(2px,1vw,6px);padding:0 4px;
    /* centred while the five tabs fit; if a very narrow phone overflows,
       "safe center" keeps Home visible at the start and the row scrolls
       rather than clipping the last tab. */
    justify-content:safe center;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .nav::-webkit-scrollbar{display:none;}
  .nav button{font-size:clamp(.48rem,2.3vw,.62rem);letter-spacing:.04em;flex:0 0 auto;}
  .nav button .nav-long{display:none;}
  .nav button .nav-mini{display:inline;}
  .nav-sep{font-size:clamp(.38rem,1.3vw,.48rem);}
}