/* The menu: light, always visible, no lines. The current section is marked by the pilcrow alone. */
html[data-menu="top"] .mt-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); }
html[data-menu="top"] .mt-link,
html[data-menu="top"] .mt-blink {
  display: inline-block; padding-block: 10px; line-height: 1.5; white-space: nowrap;
  font-size: clamp(1rem, 1.35vw, 1.125rem); color: var(--graphite); text-decoration: none;
  transition: color 160ms ease, transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
/* the mark keeps its place on every label, so nothing shifts when the current section changes */
html[data-menu="top"] .mt-mark { opacity: 0; transition: opacity 160ms ease; }
html[data-menu="top"] [aria-current="location"] { color: var(--ink); }
html[data-menu="top"] [aria-current="location"] .mt-mark { opacity: 1; }
html[data-menu="top"] .mt-link:active, html[data-menu="top"] .mt-blink:active { color: var(--ink); transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { html[data-menu="top"] .mt-link:hover { color: var(--ink); } }
/* desktop: the line types itself in once, red, then settles to ink */
html[data-menu="top"] .mt-typing .mt-ch { opacity: 0; }
html[data-menu="top"] .mt-typing .mt-ch.on { opacity: 1; color: var(--red); transition: color 260ms ease; }
html[data-menu="top"] .mt-typing.mt-settled .mt-ch.on { color: inherit; }
html[data-menu="top"] .mt-bar { display: none; }

/* ---------- phones: a light bar at the bottom, within the thumb's reach ---------- */
@media (max-width: 760px) {
  html[data-menu="top"] .mt-nav { display: none; }
  html[data-menu="top"] .mt-bar {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 2px;
    position: fixed; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; margin-inline: auto;
    width: fit-content; max-width: calc(100vw - 16px); z-index: 30;
    padding: 4px 6px; border-radius: 24px;
    background: rgba(246, 246, 243, 0.82);
    -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 6px 24px rgba(20, 20, 20, 0.12), 0 1px 2px rgba(20, 20, 20, 0.06);
    transition: opacity 140ms ease;
  }
  html[data-menu="top"] .mt-blink { font-size: 0.9375rem; padding: 0 clamp(7px, 2.6vw, 12px); line-height: 44px; }
  /* the bar floats over the page: the footer, the last lines and keyboard focus are never hidden under it */
  html[data-menu="top"] .site-footer { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
  html[data-menu="top"] { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  html.switching[data-menu="top"] .mt-bar { opacity: 0; }
}
@media (max-width: 360px) { html[data-menu="top"] .mt-blink { font-size: 0.875rem; } }

@media (prefers-reduced-transparency: reduce) {
  html[data-menu="top"] .mt-bar { background: var(--paper) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-menu="top"] .mt-link, html[data-menu="top"] .mt-blink, html[data-menu="top"] .mt-mark { transition: none; }
  html[data-menu="top"] .mt-link:active, html[data-menu="top"] .mt-blink:active { transform: none; }
}