/* menu.css — the masthead navigation.
   Above the sidenote breakpoint the section links sit as squared chips
   on the masthead line: the heading serif, hairline border, no toggle.
   The page the reader is on carries the accent border and text, which
   is the only state the nav has. Below that breakpoint the page is a
   single column — no note channel, no TOC rail — and the chips stand
   down with the rest of the apparatus. The brand alone remains. */

.menu-inline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-width: 0;
}

.menu-inline a {
  font-family: var(--serif);
  font-size: 0.8rem;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--rule);
  padding: 0.4em 0.85em;
  white-space: nowrap;
}

.menu-inline a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.menu-inline a[aria-current="page"] {
  color: var(--accent);
  border-color: var(--accent);
}

/* Same cut as sidenotes and the TOC rail: once the margins collapse,
   only the main column remains, and the masthead chips go with them. */
@media (max-width: 1151px) {
  .menu-inline {
    display: none;
  }
}