/* ═══════════════════════════════════════════════════════════════
   NAV — shared by every page.
   style.css imports this; the index, which carries the rest of its
   system inline, links it directly. One nav, one place to fix it.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════ NAV — the index's spec header ═══════════ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  height: calc(var(--nav-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(var(--gutter), calc((100% - var(--frame)) / 2 + var(--gutter))) 0;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(243, 239, 230, 0.9);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}
/* The bar is its own sheet of the same paper. */
nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: var(--paper-alpha);
  background: var(--paper-tex) 0 0 / var(--paper-size) var(--paper-size) repeat;
}
/* An ink rule draws across once the page moves. */
nav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform 0.8s var(--ease-out);
}
nav.scrolled::after { transform: none; }
/* iOS 26 Safari tints the status bar from a solid fixed header, but a blurred one
   makes it show the page through instead, so the phone bar is plain paper. */
@media (max-width: 760px) { nav { background: var(--cream); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Homepage-only reveal, kept for any page that opts in. Keyboard focus brings it back regardless. */
nav.nav-reveal { transition: transform 0.45s var(--ease-spring), opacity 0.25s var(--ease-out); }
nav.nav-reveal.nav-hidden:not(:focus-within) { transform: translate3d(0, -100%, 0); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { nav.nav-reveal.nav-hidden:not(:focus-within) { transform: none; } }

/* The wordmark and links are set in the display face, at heading width, so the
   bar reads as part of the page's type rather than a separate UI strip. */
.nav-logo {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s1) 0;
  font: 550 var(--t-h3)/1 var(--grotesk); font-stretch: 85%; letter-spacing: var(--tr-heading); color: var(--ink);
  text-decoration: none; white-space: nowrap;
}
/* The licence rides on the name's baseline a step down, so the name leads.
   Hovering the home link draws the nav's highlight bar under it. */
.nav-cred { position: relative; isolation: isolate; font-size: var(--t-body); letter-spacing: var(--tr-text); color: var(--ink-2); }
.nav-cred::after {
  content: ''; position: absolute; z-index: -1; left: 0.3em; right: -0.3em; bottom: 0.16em; height: 0.42em;
  background: var(--ochre); transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease-spring);
}
.nav-logo:hover .nav-cred, .nav-logo:focus-visible .nav-cred { color: var(--ink); }
.nav-logo:hover .nav-cred::after, .nav-logo:focus-visible .nav-cred::after { transform: scaleX(1); }
.nav-logo img { width: 2rem; height: 2rem; border-radius: 5px; flex: none; transition: transform 0.4s var(--ease-spring); }
.nav-logo:hover img { transform: scale(1.06); }
.nav-logo:active img { transform: scale(0.94); }

.nav-links { display: flex; gap: var(--s3); align-items: center; }
.nav-links--lg { font-size: var(--t-ui); }
.nav-link {
  position: relative; isolation: isolate;
  font: 550 var(--t-body)/1 var(--grotesk); font-stretch: 85%; letter-spacing: var(--tr-text); color: var(--ink-2);
  text-decoration: none; padding: var(--s2) 0;
}
/* The highlight bar (.hl) drawn under the link you're about to choose: it
   starts a little into the word, cuts the letters below mid-height and runs
   past the end. It grows from the left on hover; the current page is marked
   by ink colour alone, so the bar only ever means "this one, next". */
.nav-link::after {
  content: ''; position: absolute; z-index: -1; left: 0.3em; right: -0.3em; bottom: calc(var(--s2) + 0.12em); height: 0.42em;
  background: var(--ochre); transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease-spring);
}
.nav-link:hover, .nav-link:focus-visible, .nav-link[aria-current] { color: var(--ink); }
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }
.nav-link:active::after { transform: scaleX(1.06); }
.nav-link:active { opacity: 0.6; }

/* ── MOBILE MENU ──
   /nav.js inserts .nav-toggle and adds .has-toggle; without JS the links stay inline. */
.nav-toggle { display: none; }

@media (max-width: 640px) {
  nav.has-toggle .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 44px; padding: 0 11px; margin-right: -11px;
    background: none; border: 0; cursor: pointer; color: var(--ink);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.25s var(--ease-spring);
  }
  nav.has-toggle .nav-toggle:hover  { color: var(--forest); }
  nav.has-toggle .nav-toggle:active { transform: scale(0.9); }

  .nav-toggle__bar {
    display: block; width: 100%; height: 1.5px; background: currentColor;
    transition: transform 0.45s var(--ease-spring);
  }
  nav.is-open .nav-toggle__bar:first-child { transform: translateY(3.75px) rotate(45deg); }
  nav.is-open .nav-toggle__bar:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

  nav.has-toggle .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0 !important;
    padding: 0 var(--gutter) var(--s2);
    background: var(--cream);
    border-top: 1px solid var(--ink);
    box-shadow: var(--shadow-2);
    opacity: 0; transform: translateY(-0.5rem);
    visibility: hidden; pointer-events: none;
    transition: opacity 0.2s var(--ease-out), transform 0.35s var(--ease-spring), visibility 0s linear 0.35s;
  }
  nav.is-open .nav-links {
    opacity: 1; transform: none; visibility: visible; pointer-events: auto;
    transition: opacity 0.2s var(--ease-out), transform 0.35s var(--ease-spring), visibility 0s;
  }
  nav.has-toggle .nav-link { display: block; padding: 1rem 0; border-top: 1px solid var(--rule); }
  nav.has-toggle .nav-link:first-child { border-top: none; }
  nav.has-toggle .nav-link::after { display: none; }
  nav.has-toggle .nav-link[aria-current] { color: var(--forest); }

  html.nav-menu-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-toggle, .nav-toggle__bar, nav.has-toggle .nav-links { transition: none !important; }
}