/* ══ the sticky page index clears the bar instead of sliding under it ══
      nav.top is 109px and sticky, so a TOC pinned at 6rem (96px) tucked its
      own heading behind the bar and, being transparent, let the page text
      show through it on the way past. Pin below the bar, give it a ground, and cap it so a sixteen-item index can never fill the viewport. ══ */
html[data-palette]{ --navh:109px; }
/* stacked layouts have no column to pin to */
/* ══ the burger ══
      nav-mobile.js draws bone bars inside a bone-edged disc. On the amber bar
      that is roughly 1.4:1 — the control was there and unreadable. A teal disc
      carries the accent and gives the bars a ground they read on. ══ */
html[data-palette] .nav-toggle, html[data-palette] .nav-toggle.floating{ background:var(--teal) !important; border:1px solid rgba(10,37,48,.20) !important; box-shadow:0 6px 16px -8px rgba(10,37,48,.5) !important; }
html[data-palette] .nav-toggle:hover, html[data-palette] .nav-toggle.floating:hover{ background:var(--teal) !important; border-color:rgba(10,37,48,.38) !important; }
html[data-palette] .nav-toggle .bar, html[data-palette] .nav-toggle.floating .bar{ background:var(--ink) !important; height:2px !important; border-radius:2px !important; }
/* ══ the drawer ══ a bone mark on a white panel is not a mark */
html[data-palette] .mobile-nav-head .logo-link img{ height:30px; }
html[data-palette] .mobile-nav-link{ color:var(--ink); }
html[data-palette] .mobile-nav-link[style*="FFB300"], html[data-palette] .mobile-nav-link[style*="ffb300"]{ color:var(--ink); }
/* hover, focus and current stay ink — the band and the teal rule carry the
   state, so no teal letterforms on a light ground */
html[data-palette] .mobile-nav-link:hover, html[data-palette] .mobile-nav-link:focus, html[data-palette] .mobile-nav-link:focus-visible, html[data-palette] .mobile-nav-link:active, html[data-palette] .mobile-nav-link.active{ color:var(--ink) !important; background:var(--band) !important; box-shadow:inset 3px 0 0 var(--teal) !important; }