.c-menubar {
  grid-row: 1;
  position: relative;
  z-index: var(--z-menubar);
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--bar-h);
  padding-inline: var(--space-xs);
  background: var(--panel);
  border-bottom: var(--bw) solid var(--line);
  font-size: var(--text-sm);
  user-select: none;
}
.c-menubar__brand {
  color: var(--text-bright);
  font-weight: var(--fw-bold);
  /* The gap between the wordmark and the first nav item is this right padding plus that item's
     own left padding, which is why the value is written as a sum rather than as one step. */
  padding-inline: var(--space-sm) calc(var(--space-md) * 2 + var(--space-sm));
  letter-spacing: var(--tracking-wide);
}
.c-menubar__brand-mark { color: var(--accent); }
/* The group wraps a toggle and its dropdown and is what the absolutely positioned panel hangs
   from, so a dropdown moved out of one lands against the bar instead of under its item. */
.c-menubar__group { position: relative; display: inline-flex; align-items: center; height: 100%; }
.c-menubar__item {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding-inline: var(--space-sm);
  color: var(--text);
  cursor: pointer;
  background: none; border: 0;
  font: inherit;
}
.c-menubar__item:hover,
.c-menubar__item.is-open { background: var(--panel-hi); color: var(--text-bright); }
/* The layout marks the current page's item with is-current, and its group's title too, so a
   closed dropdown still says the page is inside it. */
.c-menubar__item { position: relative; }
.c-menubar__item.is-current { color: var(--accent); font-weight: var(--fw-bold); }
.c-menubar__item.is-current .c-menubar__key { color: var(--accent); }
.c-menubar__key { color: var(--accent); }
.c-menubar__item:hover .c-menubar__key { color: var(--accent-bright); }
.c-menubar__spacer { flex: 1; }

/* The overflow toggle is off until the narrow breakpoint below turns it on, and it never takes
   is-current: its menu holds every page, so it would light on all of them and the cue would stop
   meaning anything. Its dots are three U+2022 bullets rather than an ellipsis, whose dots hang on
   the baseline — centring the element leaves them low, and correcting that costs a
   font-dependent nudge, where a bullet is defined at mid-height and centres on the font's own
   metrics. */
.c-menubar__group--overflow { display: none; }
.c-menubar__item--dots {
  padding-inline: var(--space-sm);
  font-size: 1.25em;
  line-height: 1;
  letter-spacing: 0.1em;
  text-indent: 0.1em;       /* letter-spacing trails the last dot; this re-centres the group */
}

/* Narrow screens carry no nav items in the bar: the mark at the left edge, the wordmark centred,
   the overflow menu at the right holding the whole nav. The wordmark is taken out of flow and
   centred on the bar rather than laid out between the two, which is what keeps it centred as
   either side changes width; it stays inside the brand link, so tapping it still goes home. */
@media (max-width: 40rem) {
  .c-menubar { overflow: visible; padding-inline: 0; }
  .c-menubar__brand { padding-inline: var(--space-xs) var(--space-sm); }
  .c-menubar__brand-name {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .c-menubar__item:not(.c-menubar__item--dots) { display: none; }
  .c-menubar__group--overflow { display: inline-flex; }

  .c-menubar__group--overflow .c-dropdown {
    width: 66.667vw;
    min-width: 0;         /* the panel's 24ch floor is measured in this doubled type and overruns */
    font-size: 2em;
  }
  .c-menubar__group--overflow .c-dropdown__item {
    padding-block: var(--space-xs);
  }
}