/* The audiojs site bar: one header for the whole site. Self-contained, it owns its colours and type, so it reads
 * the same on every page. The same file is bar.css in audiojs/audiojs.github.io (markup: scripts/bar.mjs) and
 * site/bar.css in audiojs/audio (markup: index.html): change both together. */
.site-bar {
  --bar-ink: #0d1014; --bar-paper: #edebe4; --bar-focus: #00a4b8; --bar-gutter: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 48px;
  /* the column of the pages' widest content: 1184px at most, on a 32px grid, within the gutter */
  padding-inline: calc((100% - round(down, min(1184px, 100% - 2 * var(--bar-gutter)), 32px)) / 2);
  background: var(--bar-ink); color: var(--bar-paper);
  font: 500 13px/1 'Manrope', system-ui, sans-serif; letter-spacing: 0; -webkit-font-smoothing: antialiased;
}
.site-bar a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
/* the focus ring hugs the label, not the 44px touch target, without moving it */
.site-bar a:focus-visible { outline: none; }
.site-bar a:focus-visible::after { content: ''; position: absolute; inset: 6px -6px; border: 2px solid var(--bar-focus); border-radius: 4px; }
.site-brand svg { display: block; height: 17px; width: auto; }
.site-bar nav { display: flex; align-items: center; gap: clamp(12px, 3vw, 24px); }
.site-bar nav a { opacity: .7; transition: opacity .15s; }
.site-bar nav a:hover, .site-bar nav a[aria-current] { opacity: 1; }
.site-bar nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.site-gh svg { display: block; width: 18px; height: 18px; }
@media (min-width: 40rem) { .site-bar { --bar-gutter: 40px; } }
/* narrow screens: the GitHub mark goes first (it is a link away), then the bar tightens */
@media (max-width: 419px) { .site-bar .site-gh { display: none; } }
@media (max-width: 359px) { .site-bar { gap: 12px; padding-inline: 16px; font-size: 12px; } .site-brand svg { height: 15px; } .site-bar nav { gap: 10px; } }