/* ==========================================================================
   MERIDIAN — Navigation (lives in the persistent shell, never unmounts)
   ========================================================================== */

/* The bar keeps a constant box. Condensing is a translate of the row plus a
   fade-in of the backdrop layer — no animated padding, so no layout on scroll. */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem var(--edge);
  pointer-events: none;
  transform: translate3d(0, var(--nav-shift, 0), 0);
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.nav > *{ pointer-events: auto; }

.nav::before{
  content: "";
  position: absolute;
  inset: -.55rem 0 -.55rem 0;
  background: var(--linen-82);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  box-shadow: 0 1px 0 var(--obsidian-08),
              0 .7rem 2rem -1.4rem var(--obsidian-18);
  opacity: 0;
  transition: opacity var(--dur-slow) ease;
  pointer-events: none;
}

.nav.is-condensed{ --nav-shift: -.55rem; }
.nav.is-condensed::before{ opacity: 1; }

/* ---- wordmark ---------------------------------------------------------- */

.nav__mark{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .28em;
  color: var(--obsidian);
}
.nav__mark-rule{
  display: block;
  width: 1.5rem;
  height: 1px;
  background: var(--cobalt);
  transform-origin: left center;
  transform: scaleX(var(--mark-rule, 1));
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.nav__mark:hover .nav__mark-rule{ --mark-rule: 1.6; }

/* ---- links ------------------------------------------------------------- */

.nav__links{
  position: relative;
  display: flex;
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
}

.nav__link{
  position: relative;
  padding: .35rem 0;
  font-size: var(--t-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--obsidian-62);
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.nav__link:hover,
.nav__link[aria-current="page"]{ color: var(--obsidian); }

/* Underline grows from the left on hover; the active page keeps it. */
.nav__link::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.nav__link:hover::after{ transform: scaleX(1); transform-origin: left center; }
.nav__link[aria-current="page"]::after{ display: none; }

/* The travelling dot. JS FLIPs it between links on route change. */
.nav__dot{
  position: absolute;
  bottom: -.35rem;
  left: 0;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--cobalt);
  opacity: 0;
  transform: translate3d(var(--dot-x, 0), 0, 0);
  transition: transform var(--dur-slow) var(--ease-out-expo),
              opacity var(--dur-fast) ease;
  pointer-events: none;
}
.nav__dot.is-visible{ opacity: 1; }

/* ---- mobile ------------------------------------------------------------ */

.nav__burger{
  display: none;
  width: 2.5rem; height: 2.5rem;
  margin-right: -.6rem;
  place-items: center;
  cursor: pointer;
}
.nav__burger-bars{
  position: relative;
  display: block;
  width: 20px; height: 1px;
  background: var(--obsidian);
}
.nav__burger-bars::before,
.nav__burger-bars::after{
  content: "";
  position: absolute;
  left: 0;
  width: 100%; height: 1px;
  background: var(--obsidian);
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.nav__burger-bars::before{ transform: translateY(-6px); }
.nav__burger-bars::after{ transform: translateY(6px); }

.nav__burger[aria-expanded="true"] .nav__burger-bars{ background: transparent; }
.nav__burger[aria-expanded="true"] .nav__burger-bars::before{ transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] .nav__burger-bars::after{ transform: rotate(-45deg); }

.nav-sheet{
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-s);
  padding: var(--edge);
  background: var(--linen-97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-slow) var(--ease-out-expo);
  visibility: hidden;
}
.nav-sheet.is-open{ clip-path: inset(0 0 0 0); visibility: visible; }

.nav-sheet__link{
  font-family: var(--serif);
  font-size: var(--t-h2);
  line-height: 1.3;
  color: var(--obsidian);
  border-bottom: 1px solid var(--obsidian-08);
  padding-bottom: var(--gap-xs);
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity var(--dur-mid) var(--ease-out-quart),
              transform var(--dur-slow) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.nav-sheet.is-open .nav-sheet__link{ opacity: 1; transform: none; }
.nav-sheet__link[aria-current="page"]{ color: var(--cobalt); }

.nav-sheet__meta{
  margin-top: var(--gap-s);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--obsidian-62);
}

@media (max-width: 720px){
  .nav__links{ display: none; }
  .nav__burger{ display: grid; }
}
@media (min-width: 721px){
  .nav-sheet{ display: none; }
}

/* ---- the standing tag -------------------------------------------------- */

.standing-tag{
  position: fixed;
  left: clamp(1rem, 2vw, 1.4rem);
  bottom: .9rem;
  z-index: var(--z-nav);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  color: var(--obsidian-62);
  pointer-events: none;
  padding: .46rem .74rem;
  background: var(--linen-78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius);
}
@media (max-width: 560px){ .standing-tag{ display: none; } }