/* =========================================================================
   ZWARTBAERD — CHROME
   Navigation, mobile panel, foliation mark.        Vol. IV §4
   Required to render the frontispiece; not part of any section.

   The cart mark is absent — Vol. V A2. Column 12 is empty.
   The nav item is DE WAREN, not HET ASSORTIMENT — Vol. V A3.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1 · THE BAR
   Ground matches the section beneath it at page top. Not sticky on the
   way down — a book has no floating header.
   ------------------------------------------------------------------------- */

.nav {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 20;
  height: var(--nav-height-sm);
  display: flex;
  align-items: center;
}

@media (min-width: 64rem) {
  .nav { height: var(--nav-height); }
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
}

/* Returns on upward scroll, on an opaque ground. Dormant until there is
   page below the frontispiece.                              Vol. IV §4.1 */
.nav[data-returned] {
  position: fixed;
  transform: translateY(-100%);
  animation: nav-return var(--nav-return) cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes nav-return {
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nav[data-returned] { animation: none; transform: none; }
}

.nav__rule {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: var(--rule-hairline);
  background: var(--rule);
}


/* -------------------------------------------------------------------------
   2 · WORDMARK LOCKUP — left, column 1
   ------------------------------------------------------------------------- */

.nav__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--text);
}

.nav__mark svg { width: 2rem; height: 2rem; }

.nav__mark-text {
  font-family: var(--face-display);
  font-variant-caps: small-caps;
  font-feature-settings: var(--smallcaps);
  font-size: 1.25rem;
  letter-spacing: var(--tr-smallcap);
  line-height: 1;
}


/* -------------------------------------------------------------------------
   3 · ITEMS — right-aligned, ending column 11
   ------------------------------------------------------------------------- */

.nav__list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--sp-6);
}

@media (min-width: 64rem) {
  /* Five items fit on one line at every desktop width, so link padding is
     the approved 12px. flex-wrap is retained as inert resilience: Vol. IV
     §4.1's wireframe draws the list wrapping, so it is approved behaviour
     if a future label ever makes it necessary. */
  .nav__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 0;
  }
  .nav__toggle { display: none; }
  /* Column 12 stays empty. Vol. XI §13.1 — it will look like a mistake
     and someone will fill it. It is the outer margin of a book. */
  .nav__list { margin-inline-end: 6.375rem; }
}

.nav__link {
  display: inline-block;
  padding-block: var(--sp-3);
  font-family: var(--face-display);
  font-variant-caps: small-caps;
  font-feature-settings: var(--smallcaps);
  font-size: var(--t-label);
  letter-spacing: var(--tr-smallcap);
  color: var(--text-quiet);
  text-decoration: none;
  position: relative;
}

/* Hover is a material change, not a colour swap: the keyline draws
   left→right. Vol. IV §15.2 */
.nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: var(--sp-2);
  inset-inline-start: 0;
  width: 100%;
  height: var(--rule-hairline);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-ink);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after { transform: scaleX(1); }


/* -------------------------------------------------------------------------
   4 · MENU CONTROL — a word, not a mark                    Vol. X §1.2
   MENU/SLUITEN in 13px small caps measure ~44px. They fit, they need no
   accessible name because they are the accessible name, and a hamburger
   would be the most contemporary object on the page.
   ------------------------------------------------------------------------- */

.nav__toggle {
  background: none;
  border: 0;
  padding: var(--sp-3) 0;
  min-height: var(--tap-min);
  font-family: var(--face-display);
  font-variant-caps: small-caps;
  font-feature-settings: var(--smallcaps);
  font-size: var(--t-label);
  letter-spacing: var(--tr-smallcap);
  color: var(--accent);
  cursor: pointer;
}


/* -------------------------------------------------------------------------
   5 · MOBILE PANEL                                        Vol. IV §4.2
   A full-page panel, not a drawer. No scrim, no slide-over, no page
   visible beneath. Pages are opaque sheets.
   ------------------------------------------------------------------------- */

.panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  flex-direction: column;
  padding: var(--sp-4) var(--page-margin) var(--sp-8);
  overflow-y: auto;
}

.panel[data-open] { display: flex; }

@media (min-width: 64rem) {
  .panel[data-open] { display: none; }
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--nav-height-sm);
}

.panel__fleuron {
  align-self: center;
  margin-block: var(--sp-7) var(--sp-6);
  width: 1.5rem;
  color: var(--text-quiet);
}

.panel__list { list-style: none; margin: 0; padding: 0; }

.panel__list li + li { border-block-start: var(--rule-hairline) solid var(--rule); }

.panel__link {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  font-family: var(--face-display);
  font-variant-caps: small-caps;
  font-feature-settings: var(--smallcaps);
  font-size: 1rem;
  letter-spacing: var(--tr-smallcap);
  color: var(--text);
  text-decoration: none;
}

.panel__foot {
  margin-block-start: auto;
  padding-block-start: var(--sp-7);
  font-size: var(--t-caption);
  font-style: italic;
  color: var(--text-quiet);
}
.panel__foot span { display: block; }


/* -------------------------------------------------------------------------
   6 · FOLIATION MARK                                      Vol. IV §4.3
   A printer's gathering letter, not a progress bar. Fixed on desktop;
   static at the foot of each section on mobile — Vol. VI Finding 5,
   which is both the fix for a contradiction and the more authentic
   treatment.
   ------------------------------------------------------------------------- */

.foliation {
  font-family: var(--face-display);
  font-variant-caps: small-caps;
  font-feature-settings: var(--smallcaps);
  font-size: var(--t-label);
  letter-spacing: var(--tr-smallcap);
  color: var(--text-quiet);
  opacity: var(--foliation-alpha);
  pointer-events: none;
  user-select: none;
}

/* Mobile: static, at the foot of the section it belongs to. */
.foliation--section {
  display: block;
  text-align: end;
  margin-block-start: var(--sp-5);
}

/* Desktop: fixed, bottom outer corner, 24px from each edge. */
@media (min-width: 64rem) {
  .foliation--section { display: none; }

  .foliation--fixed {
    display: block;
    position: fixed;
    inset-block-end: 1.5rem;
    inset-inline-end: 1.5rem;
    z-index: 15;
    transition: opacity var(--motion-ink);
  }
  .foliation--fixed[data-scrolling] { opacity: var(--foliation-alpha-active); }
}

.foliation--fixed { display: none; }