/* The top bar and ≡ menu for every page except the home page, which inlines
   its own copy of these rules (index.html). Same markup and rules, so moving
   between pages changes the content and nothing above it. Change one, change
   both. Behaviour: /nav.js. Light theme and the toggle: /theme.css, /theme.js. */
.bar {
  position: sticky; top: 0; z-index: 50;
  border-bottom: var(--rule);
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.bar-in {
  max-width: 66rem; margin: 0 auto; padding: 0 var(--pad); min-height: 50px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem;
}
.wm {
  display: inline-flex; align-items: center; gap: 0.7rem; justify-self: start;
  font-family: var(--sans); font-size: 15px; letter-spacing: 0.06em; color: var(--bright);
  border-bottom: 0;
}
.wm b { font-weight: 500; }
.bar-nav { display: flex; gap: 1.25rem; }
.bar-nav a {
  font-family: var(--sans); font-size: 14px; color: var(--mid);
  border-bottom: 0; padding: 0.35rem 0; transition: color 180ms ease;
}
.bar-nav a:hover, .bar-nav a[aria-current] { color: var(--bright); }
.bar-end { justify-self: end; display: flex; align-items: center; gap: 1.25rem; }
.bar-cta {
  display: inline-flex; align-items: center; height: 34px; padding: 0 15px;
  font-family: var(--sans); font-size: 14px; font-weight: 500; white-space: nowrap;
  color: var(--ground); background: var(--accent); border-bottom: 0; border-radius: 2px;
  transition: background 180ms ease;
}
.bar-cta:hover { background: color-mix(in srgb, var(--accent) 82%, var(--bright)); }

.gspin { display: inline-grid; grid-template-columns: repeat(5, 1fr); flex: 0 0 auto; }
.gspin i { background: var(--line-hi); border-radius: 1px; }
.gspin[data-mark] { width: 29px; height: 29px; gap: 1px; }

.menu-btn {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  width: 48px; height: 48px; margin-right: -12px; justify-self: end;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--text);
}
.menu-btn i { display: block; width: 22px; height: 1.5px; background: currentColor; }
.menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.menu-x { display: inline-flex; gap: 0; }
.menu-x i { position: absolute; }
.menu-x i:first-child { transform: rotate(45deg); }
.menu-x i:last-child { transform: rotate(-45deg); }
.menu {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; background: var(--ground);
  opacity: 0; visibility: hidden;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}
.menu.open { opacity: 1; visibility: visible; transition: opacity 300ms ease; }
.menu-top {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 50px; padding: 0 var(--pad); border-bottom: var(--rule);
}
.menu-top .menu-btn { position: relative; }
.menu-body {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2rem var(--pad) calc(2rem + env(safe-area-inset-bottom, 0px));
}
.menu-body a {
  display: flex; align-items: center; min-height: 48px; padding: 0 1rem;
  font-family: var(--sans); font-size: 30px; letter-spacing: -0.02em; color: var(--text); border-bottom: 0;
  transition: color 180ms ease;
}
.menu-body a:hover, .menu-body a[aria-current] { color: var(--bright); }

/* Re-measured 2026-10-12 after How / Fit / Standing left the bar (five links,
   1.25rem apart): the bar holds one 50px line down to a 748px window (coarse
   pointer; 744px fine) and breaks below that, so the menu takes over at 48rem
   (768px), ~16px above, so a late-loading font cannot tip the bar into a wrap.
   Keep the same value in the matchMedia in /nav.js. */
@media (max-width: 48rem) {
  .js .bar { position: relative; }
  .js .bar-in { grid-template-columns: 1fr auto; }
  .js .bar-nav, .js .bar-end { display: none; }
  .js .bar .menu-btn { display: inline-flex; }
  .no-js .bar-in { display: flex; flex-wrap: wrap; padding-block: 0.65rem; }
}
@media (pointer: coarse) {
  .bar-nav a { padding: 0.7rem 0.625rem; }
  .bar-nav { gap: 0; }
  .bar-end { gap: 0.25rem; }
}

/* ---------- footer: copied from index.html (change one, change both) ---------- */
footer {
  border-top: var(--rule); margin-top: 2rem; padding: 2.5rem 0 4rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: baseline;
}
footer p, footer a {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dim); margin: 0;
}
footer a { border-bottom: 0; }
footer a:hover, footer a[aria-current] { color: var(--mid); }

/* the lockup mark, as index.html: sized in em so it tracks the text beside it */
.mark-sm {
  display: inline-block; width: 1.55em; height: 1.55em; vertical-align: -0.42em;
  margin-right: 0.5em; color: var(--accent);
}
.mark-sm svg { width: 100%; height: 100%; display: block; }