/* ==========================================================================
   nav.css — global .topnav (#topnav) navigation.
   header-3 port (June 2026): one continuous flex-shrink bar across every width
   — NO hamburger. Brand + tabs + Book stay visible at all sizes; the menu
   condenses (wordmark -> mark, then text -> icon-above-label) as it narrows.
   Studios opens a dropdown mega-menu (4 studios: name -> page, address -> maps).
   Structure is injected from the existing .links markup by assets/js/nav.js,
   so per-page hrefs stay correct and no page HTML changes.
   nav.css loads AFTER studio-hub.css, so the overrides below win.
   ========================================================================== */

/* ---- bar layout: brand far left, tabs+Book grouped right; only the
        brand->first-tab gap expands as the viewport grows ---- */
.topnav{ justify-content:flex-start; gap:clamp(16px,1.7vw,30px); }

/* menu items distribute as equal-gap siblings of brand + book on desktop
   (display:contents removes the wrapper box from layout) */
.nav-menu{ display:contents; }
/* only the first tab carries the auto margin -> all slack lands left of it */
.nav-item{ position:relative; margin-left:auto; }

.nav-link{
  display:inline-flex; align-items:center; gap:6px;
  font:500 clamp(11px,1.05vw,14px)/1 "Inter"; letter-spacing:clamp(.1em,.2vw,.22em);
  text-transform:uppercase; color:var(--ink-soft); text-decoration:none; white-space:nowrap;
  padding:10px clamp(7px,1vw,13px); border-radius:999px; border:1px solid transparent;
  background:transparent; cursor:pointer;
  transition:color .2s, background .2s, border-color .2s;
}
.nav-link:hover, .nav-item.open .nav-link{ color:var(--terracotta); background:rgba(26,24,22,.045); }
.nav-link .nl-ic{ display:none; width:20px; height:20px; stroke:currentColor; stroke-width:1.7;
  fill:none; stroke-linecap:round; stroke-linejoin:round; }
.nl-row{ display:inline-flex; align-items:center; gap:2px; }
.nav-link .caret{ width:9px; height:9px; margin-left:-1px; stroke:currentColor; stroke-width:2.2;
  fill:none; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease; }
.nav-item.open .nav-link .caret{ transform:rotate(180deg); }

/* ---- Book button: scales with the viewport like the brand ---- */
.topnav .book{
  flex:0 0 auto;
  padding:clamp(10px,.9vw,13px) clamp(18px,1.6vw,26px); border-radius:999px;
  background:var(--ink); color:var(--paper);
  font:500 clamp(11px,1vw,13px)/1 "Inter"; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; border:0; cursor:pointer; transition:background .2s, transform .2s;
}
.topnav .book:hover{ background:var(--terracotta); transform:translateY(-1px); }

/* ---- Studios dropdown mega-menu (NavigationMenuContent) ---- */
.nav-panel{
  position:absolute; top:calc(100% + 14px); left:50%;
  transform:translateX(-50%) translateY(6px);
  width:min(560px,86vw);
  background:var(--cream); border:1px solid var(--rule); border-radius:20px;
  box-shadow:0 30px 60px -30px rgba(26,24,22,.5), 0 2px 0 rgba(255,255,255,.4) inset;
  padding:14px; display:grid; grid-template-columns:1fr 1fr; gap:8px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .26s ease, transform .26s cubic-bezier(.22,.9,.3,1), visibility 0s linear .26s;
  z-index:61;
}
.nav-item.open .nav-panel{ opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0); transition-delay:0s; }
.nav-panel::before{ content:""; position:absolute; top:-7px; left:50%;
  transform:translateX(-50%) rotate(45deg); width:14px; height:14px; background:var(--cream);
  border-left:1px solid var(--rule); border-top:1px solid var(--rule); border-radius:3px 0 0 0; }
.np-card{ display:flex; gap:12px; align-items:flex-start; padding:13px; border-radius:14px;
  border:1px solid transparent; transition:background .2s, border-color .2s, transform .2s; }
.np-card:hover{ background:var(--paper); border-color:var(--rule); transform:translateY(-1px); }
.np-ic{ flex:0 0 auto; width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  color:var(--terracotta); background:linear-gradient(160deg,rgba(255,255,255,.75),rgba(255,255,255,.34));
  border:1px solid var(--rule); box-shadow:0 6px 14px -10px rgba(26,24,22,.5), inset 0 1px 0 rgba(255,255,255,.6); }
.np-ic svg{ width:20px; height:20px; stroke:currentColor; stroke-width:1.6; fill:none;
  stroke-linecap:round; stroke-linejoin:round; }
.np-txt{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.np-title{ font:400 18px/1.05 "Fraunces"; letter-spacing:-.01em; color:var(--ink); text-decoration:none; }
.np-card:hover .np-title{ color:var(--terracotta); }
.np-addr{ font:500 11px/1.3 "Inter"; letter-spacing:.04em; color:var(--ink-mute); text-decoration:none;
  display:inline-flex; align-items:center; gap:5px; width:fit-content; transition:color .18s; }
.np-addr:hover{ color:var(--terracotta); text-decoration:underline; text-underline-offset:3px; }
.np-addr svg{ width:12px; height:12px; stroke:currentColor; stroke-width:1.8; fill:none;
  stroke-linecap:round; stroke-linejoin:round; opacity:.7; }
.np-foot{ grid-column:1 / -1; margin-top:2px; padding:11px 13px; border-top:1px solid var(--rule);
  display:flex; align-items:center; justify-content:space-between;
  font:500 10px/1 "Inter"; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; }
.np-foot:hover{ color:var(--terracotta); }
.np-foot svg{ width:14px; height:14px; stroke:currentColor; stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; }

/* ============================ responsive shrink ============================ */
/* stage 1 — tablet: drop the wordmark to the icon mark, free the real estate */
@media (max-width:860px){
  .topnav .brand-name{ display:none; }
  .nav-link{ padding:9px clamp(6px,1.1vw,11px); }
}
/* stage 2 — phone: icon ABOVE label, stacked; compact text kept (no hamburger) */
@media (max-width:600px){
  .topnav{ padding-left:clamp(10px,3vw,16px); padding-right:clamp(10px,3vw,16px);
    gap:clamp(6px,1.6vw,12px); }
  .nav-menu{ display:flex; flex:1; gap:clamp(1px,.8vw,6px);
    justify-content:space-between; align-items:flex-start; }
  .nav-item{ margin-left:0; }
  .nav-link{ flex-direction:column; gap:4px; padding:6px 4px; letter-spacing:.05em;
    font-size:clamp(8px,2.1vw,10px); }
  .nav-link .nl-ic{ display:block; width:19px; height:19px; }
  /* caret hangs below the label without adding row height (Studios stays level) */
  .nav-link .nl-row{ position:relative; }
  .nav-link .caret{ position:absolute; top:calc(100% + 2px); left:50%;
    transform:translateX(-50%); margin-left:0; width:10px; height:10px; }
  .nav-item.open .nav-link .caret{ transform:translateX(-50%) rotate(180deg); }
  /* Studios sits at the far left on mobile — anchor the panel to the viewport's
     left edge instead of centering it (which clipped the left cards) */
  .nav-panel{ left:0; width:min(360px,92vw); transform:translateX(0) translateY(6px); }
  .nav-item.open .nav-panel{ transform:translateX(0) translateY(0); }
  .nav-panel::before{ left:32px; transform:rotate(45deg); }
}
/* CTA shortens to "Book" before it can clip the bar edge */
@media (max-width:540px){
  .topnav .book{ font-size:0; padding:9px 12px; }
  .topnav .book::after{ content:"Book"; font-size:9px; letter-spacing:.12em; }
}
/* stage 3 — small phone: tighten further, still all text */
@media (max-width:400px){
  .nav-link{ padding:6px 2px; font-size:7.8px; }
  .nav-link .nl-ic{ width:17px; height:17px; }
  .topnav{ gap:7px; }
  .topnav .book::after{ font-size:8px; }
}

@media (prefers-reduced-motion:reduce){
  .nav-link, .nav-panel, .caret{ transition-duration:.01ms !important; }
}

/* ==========================================================================
   HOME mobile-nav sheet (landing only — #mobileNav in index.html, driven by
   site.js: toggles .open, syncs --nav-h, locks scroll). These rules were
   dropped when nav.css was repurposed for the header-3 interior bar; the
   landing still ships this sheet, so they're restored here. Interior pages use
   the always-visible bar (no .nav-sheet element), so these selectors are inert
   there. The closed state (clip-path + visibility:hidden) is what keeps the
   sheet — incl. its "Explore" eyebrow — from leaking to the top-left.
   Fallbacks mirror studio-hub.css for the few vars the landing doesn't load. */
.nav-sheet{
  position:fixed;left:0;right:0;top:var(--nav-h,72px);z-index:55;
  display:flex;flex-direction:column;gap:10px;
  padding:clamp(16px,4vw,22px) clamp(16px,5vw,24px) calc(env(safe-area-inset-bottom) + 18px);
  background:var(--paper);
  border-radius:0 0 22px 22px;
  box-shadow:0 26px 54px -26px rgba(26,24,22,.5);
  max-height:calc(100dvh - var(--nav-h,72px) - 10px);
  overflow-y:auto;overscroll-behavior:contain;
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .38s cubic-bezier(.22,.9,.3,1),visibility 0s linear .38s;
}
.nav-sheet.open{clip-path:inset(0 0 0 0);visibility:visible;transition-delay:0s,0s}

.ns-list{display:flex;flex-direction:column;gap:6px}
.ns-eyebrow{
  font:600 10px/1 "Inter";letter-spacing:.28em;text-transform:uppercase;color:var(--ink-mute,#7a7064);
  padding:0 4px 2px;
}
.ns-link{
  display:flex;align-items:center;gap:15px;
  padding:11px 12px;border-radius:14px;text-decoration:none;
  border:1px solid transparent;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
  opacity:0;transform:translateY(8px);
}
.nav-sheet.open .ns-link{animation:ns-in .42s cubic-bezier(.22,.9,.3,1) forwards}
.nav-sheet.open .ns-link:nth-child(2){animation-delay:.05s}
.nav-sheet.open .ns-link:nth-child(3){animation-delay:.10s}
.nav-sheet.open .ns-link:nth-child(4){animation-delay:.15s}
.nav-sheet.open .ns-link:nth-child(5){animation-delay:.20s}
.nav-sheet.open .ns-link:nth-child(6){animation-delay:.25s}
@keyframes ns-in{to{opacity:1;transform:translateY(0)}}
.ns-link:active{transform:scale(.985)}
.ns-link:hover,.ns-link:focus-visible{background:rgba(26,24,22,.05);border-color:var(--rule,rgba(26,24,22,.12));outline:none}
.ns-ic{
  flex:0 0 auto;width:46px;height:46px;border-radius:12px;
  display:grid;place-items:center;color:var(--terracotta,#c2543d);
  background:linear-gradient(160deg,rgba(255,255,255,.7),rgba(255,255,255,.32));
  border:1px solid var(--rule,rgba(26,24,22,.12));
  box-shadow:0 6px 14px -10px rgba(26,24,22,.5),inset 0 1px 0 rgba(255,255,255,.6);
}
.ns-ic svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.ns-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ns-title{font:400 clamp(19px,5.4vw,22px)/1.05 "Fraunces";letter-spacing:-.01em;color:var(--ink)}
.ns-desc{font:400 12px/1.3 "Inter";color:var(--ink-mute,#7a7064);letter-spacing:.01em}
.ns-ext{margin-left:auto;flex:0 0 auto;color:var(--ink-mute,#7a7064);opacity:.7}
.ns-ext svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

.ns-cta{
  flex:0 0 auto;display:block;text-align:center;margin-top:4px;
  padding:16px;border-radius:999px;background:var(--ink);color:var(--paper);
  font:500 12px/1 "Inter";letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  transition:background .2s ease;
}
.ns-cta:active{background:var(--terracotta,#c2543d)}

@media (prefers-reduced-motion:reduce){
  .nav-sheet,.nav-sheet *{transition-duration:.01ms!important;animation:none!important}
  .nav-sheet.open .ns-link{opacity:1;transform:none}
}