/* ==========================================================================
   Nav + chapter index (v3). Both recolour to the field underneath them:
   core.js sets data-on="paper|paper-2|flood|deep|abyss" from the section in view.
   ========================================================================== */

.nav {
  --n-fg: #0a0a0b;
  --n-fg-2: #3d424c;
  --n-bg: rgba(246, 246, 247, 0.86);
  --n-line: rgba(10, 10, 11, 0.1);
  --n-btn-bg: #0a0a0b;
  --n-btn-fg: #f6f6f7;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  color: var(--n-fg);
  transition:
    background-color var(--dur-2) ease,
    box-shadow var(--dur-2) ease,
    color var(--dur-2) ease;
}
.nav[data-on="paper-2"] { --n-bg: rgba(236, 236, 239, 0.88); }
.nav[data-on="flood"] {
  --n-fg: #ffffff;
  --n-fg-2: #0b0d10;
  --n-bg: rgba(255, 61, 113, 0.92);
  --n-line: rgba(255, 255, 255, 0.28);
  --n-btn-bg: #ffffff;
  --n-btn-fg: #0b0d10;
}
.nav[data-on="deep"] {
  --n-fg: #ffffff;
  --n-fg-2: #d1d5db;
  --n-bg: rgba(18, 20, 25, 0.9);
  --n-line: rgba(229, 231, 235, 0.16);
  --n-btn-bg: #ff3d71;
  --n-btn-fg: #0b0d10;
}
.nav[data-on="abyss"] {
  --n-fg: #f3f4f6;
  --n-fg-2: #c4c8d0;
  --n-bg: rgba(11, 13, 16, 0.86);
  --n-line: rgba(229, 231, 235, 0.13);
  --n-btn-bg: #ff3d71;
  --n-btn-fg: #0b0d10;
}

.nav.is-scrolled {
  background: var(--n-bg);
  box-shadow: inset 0 -1px 0 var(--n-line);
}
/* Over the film the bar is clear: the film is its own backdrop. Mid-wipe the links sit
   over dark film and blue at once, so they go white until the field settles. */
html.mf-hero-film .nav.is-scrolled:not(.is-open) {
  background: transparent;
  box-shadow: none;
}
html.mf-hero-film .nav[data-on="flood"]:not(.is-open) { --n-fg-2: #ffffff; }

/* Blur only over static fields; never over the moving film. Never while the menu is open either: a
   backdrop-filter makes the nav the containing block of the fixed .nav-sheet, which then shrank to
   the 64 px bar (the menu opened invisibly once the page was scrolled). The open sheet is opaque. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html:not(.mf-hero-film) .nav.is-scrolled:not(.is-open) {
    -webkit-backdrop-filter: blur(0.875rem);
    backdrop-filter: blur(0.875rem);
  }
}

.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  flex: none;
  color: var(--n-fg);
}
/* The Olsaar logo: the wordmark on wide screens, the o_ mark when the nav is compact.
   Its colours follow the field under the nav (--lg-*, as in tokens.css). */
.nav-logo { display: block; height: 1.125rem; aspect-ratio: 1736.5 / 178; }
.nav-logo-m { display: none; height: 1.375rem; aspect-ratio: 311 / 140; }
.nav[data-on="flood"] { --lg-1: #ffffff; --lg-2: #ffffff; --lg-3: #0a0a0b; }
.nav[data-on="deep"],
.nav[data-on="abyss"] { --lg-1: #ffffff; --lg-2: #9ca3af; --lg-3: #ff3d71; }
.nav.is-open { --lg-1: #0a0a0b; --lg-2: #6b7280; --lg-3: #ff3d71; }

/* Current chapter chip: "02 · The path of a post". Mobile + compact widths. */
.nav-chapter {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.8438rem;
  font-weight: 600;
  color: var(--n-fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-chapter b { color: var(--n-fg); font-weight: 640; }
.nav-chapter:empty { display: none !important; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.nav-links a {
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  font-weight: 560;
  color: var(--n-fg-2);
  transition: color var(--dur-1) ease;
}
.nav-links a:hover,
.nav-links a[aria-current="true"] { color: var(--n-fg); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}
.nav .btn-primary { background-color: var(--n-btn-bg); color: var(--n-btn-fg); }
.nav .btn-primary:hover { background-color: var(--n-btn-bg); }
.nav[data-on="paper"] .btn-ghost,
/* The nav isn't inside a themed field, so its button shadows follow the field under it (data-on). */
.nav[data-on="flood"] { --btn-sh: var(--sh-wine); --btn-sh-hover: var(--sh-wine-hover); --toggle-sh: var(--sh-wine); }
.nav[data-on="deep"],
.nav[data-on="abyss"] { --btn-sh: var(--sh-dark); --btn-sh-hover: var(--sh-dark-hover); --toggle-sh: var(--sh-dark-soft); }
.nav.is-open { --btn-sh: var(--sh-ink); --btn-sh-hover: var(--sh-ink-hover); --toggle-sh: var(--sh-ink-soft); }

/* Menu (compact widths): a white "Menu" pill with a + that turns into × while the menu is open
   (the label reads "Close" then). Same four-layer depth as the secondary buttons. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  height: 2.375rem;
  padding: 0 0.875rem 0 1rem;
  border-radius: var(--r-pill);
  background: #ffffff;
  color: #0a0a0b;
  font-size: 0.9062rem;
  font-weight: 620;
  letter-spacing: -0.005em;
  line-height: 1;
  box-shadow: var(--toggle-sh, var(--sh-ink-soft));
  cursor: pointer;
  transition: box-shadow var(--dur-1) ease, transform var(--dur-1) ease;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle:active { transform: scale(0.97); }
.nav-toggle-t { min-width: 2.3em; text-align: left; }
.nav-toggle-i {
  position: relative;
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 0.45s var(--ease-tide);
}
.nav-toggle-i::before,
.nav-toggle-i::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 0.1094rem;
  margin-top: -0.0547rem;
  border-radius: 1px;
  background: currentColor;
}
.nav-toggle-i::after { transform: rotate(90deg); }
.nav.is-open .nav-toggle-i { transform: rotate(135deg); }

.nav-sheet {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  background: #f6f6f7;
  color: #0a0a0b;
  padding-top: 1.25rem;
  overflow-y: auto;
}
.nav-sheet-links { display: flex; flex-direction: column; padding-bottom: 2rem; }
.nav-sheet-links a:not(.btn) {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  padding: 1.125rem 0;
  font-size: 1.625rem;
  font-weight: 620;
  font-stretch: 120%;
  letter-spacing: -0.03em;
  color: #0a0a0b;
  border-bottom: 1px solid rgba(10, 10, 11, 0.11);
}
/* the chapter number, small and grey, in a fixed column so the names line up */
.nav-sheet-n {
  flex: none;
  width: 1.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0;
  color: #61687a;
  transform: translateY(-0.2rem);
}
.nav-sheet-cta { width: 100%; margin-top: 1.75rem; }
/* opening: the links rise in one after another (no motion under reduced motion: base.css) */
@keyframes nav-sheet-in { from { opacity: 0; transform: translateY(0.75rem); } }
.nav.is-open .nav-sheet-links > * { animation: nav-sheet-in 0.5s var(--ease-out) both; }
.nav.is-open .nav-sheet-links > :nth-child(2) { animation-delay: 25ms; }
.nav.is-open .nav-sheet-links > :nth-child(3) { animation-delay: 50ms; }
.nav.is-open .nav-sheet-links > :nth-child(4) { animation-delay: 75ms; }
.nav.is-open .nav-sheet-links > :nth-child(5) { animation-delay: 100ms; }
.nav.is-open .nav-sheet-links > :nth-child(6) { animation-delay: 125ms; }
.nav.is-open .nav-sheet-links > :nth-child(7) { animation-delay: 150ms; }
.nav.is-open .nav-sheet-links > :nth-child(8) { animation-delay: 175ms; }
.nav.is-open .nav-sheet-links > :nth-child(9) { animation-delay: 200ms; }
.nav.is-open .nav-sheet-links > :nth-child(10) { animation-delay: 225ms; }
.nav.is-open .nav-sheet-links > :nth-child(11) { animation-delay: 250ms; }
.nav.is-open .nav-sheet-links > :nth-child(12) { animation-delay: 275ms; }
.nav.is-open {
  background: #f6f6f7;
  --n-fg: #0a0a0b;
  --n-fg-2: #3d424c;
  --n-line: rgba(10, 10, 11, 0.2);
  --n-btn-bg: #0a0a0b;
  --n-btn-fg: #f6f6f7;
}

@media (max-width: 1000px) {
  .nav-inner { gap: 0.75rem; }
  .nav-links,
  .nav-call,
  .nav-login { display: none; }
  .nav-chapter { display: inline-flex; margin-left: 0.25rem; flex: 1 1 auto; }
  .nav-logo { display: none; }
  .nav-logo-m { display: block; }
  .nav-actions { margin-left: auto; }
  .nav-toggle { display: inline-flex; }
}

/* Phones: give the chapter chip the room it needs to read in full. */
@media (max-width: 430px) {
  .nav-inner { gap: 0.625rem; }
  .nav-chapter { margin-left: 0; gap: 0.375rem; font-size: 0.8125rem; letter-spacing: -0.01em; }
  .nav-actions { gap: 0.375rem; }
  .nav .btn-sm { padding: 0 0.8125rem; font-size: 0.875rem; }
  .nav-toggle { height: 2.375rem; padding: 0 0.75rem 0 0.875rem; }
}

/* ---------- Chapter index (wide desktop, right edge) ---------- */

.chapters {
  --c-fg: #0a0a0b;
  --c-fg-2: rgba(10, 10, 11, 0.5);
  position: fixed;
  right: clamp(0.75rem, 1.6vw, 1.75rem);
  top: 50%;
  z-index: 90;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  gap: 2px;
  transition: opacity var(--dur-2) ease;
}
.chapters[data-on="flood"] { --c-fg: #ffffff; --c-fg-2: rgba(11, 13, 16, 0.62); }
.chapters[data-on="deep"],
.chapters[data-on="abyss"] { --c-fg: #ffffff; --c-fg-2: rgba(229, 231, 235, 0.55); }
.chapters.is-hidden { opacity: 0; pointer-events: none; }

.chapters a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;
  padding: 0.3125rem 0;
  font-size: 0.7812rem;
  font-weight: 600;
  line-height: 1;
  color: var(--c-fg-2);
  transition: color var(--dur-1) ease;
}
.chapters a .lbl {
  opacity: 0;
  transform: translateX(0.375rem);
  transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
  white-space: nowrap;
}
.chapters a::after {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.8125rem;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.55;
  transition: height var(--dur-2) var(--ease-out), opacity var(--dur-1) ease;
}
.chapters:hover a .lbl,
.chapters a:focus-visible .lbl,
.chapters a[aria-current="true"] .lbl { opacity: 1; transform: none; }
.chapters a:hover,
.chapters a[aria-current="true"] { color: var(--c-fg); }
.chapters a[aria-current="true"]::after { height: 1.375rem; opacity: 1; }

@media (min-width: 1500px) {
  .chapters { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .nav.is-open .nav-sheet-links > * { animation: none; }
}

/* Narrow phones: the Menu pill needs the room, and a chapter name cut to "02 The dashb" looks broken;
   the open menu lists every chapter anyway. */
@media (max-width: 440px) {
  .nav-chapter { display: none !important; }
}