:root {
  --p-bg: #0e0e0f; --p-surface: #17171a; --p-ink: #f1ebe0; --p-muted: #a49d92;
  --p-accent: #d8341f; --p-accent-ink: #ffffff; --p-action: #d8341f; --p-action-ink: #ffffff;
  --p-inv-bg: #f1ebe0; --p-inv-surface: #dfd9cf; --p-inv-ink: #0e0e0f; --p-inv-muted: #595855;
  --p-inv-accent: #d8341f; --p-inv-accent-ink: #ffffff; --p-inv-action: #d8341f; --p-inv-action-ink: #ffffff;
  /* the client's choice: Jersey 15, a bold pixel face for headings (the lofi voxel art), Geist for everything people read */
  --font-display: "Jersey 15", "Geist", system-ui, sans-serif;
  --font-text: "Geist", system-ui, sans-serif;
  --font-mono: "Jersey 15", ui-monospace, monospace;
  --display-weight: 400;
  --display-tracking: 0em;
  --display-tracking-xl: -0.005em;
}

/* controls in the studio's pixel face: buttons and the bar's words, uppercase and spaced, one height everywhere */
:root { --btn-h: 48px; }
.btn { font: 400 19px/1 var(--font-display); letter-spacing: .07em; text-transform: uppercase; }
.nav__actions .btn { font-size: 18px; }
.nav__link { font: 400 18px/1 var(--font-display); letter-spacing: .09em; text-transform: uppercase; }
.nav__link::before, .nav__link[aria-current="page"]::after { background: var(--p-accent); border-radius: 0; }
@media (max-width: 639px) { .nav:not(.is-open) .nav__actions .btn { font-size: 16px; } }
/* phones: the closed bar is the name and the menu button; the hero's own button is right under it, and the open menu keeps this one */
@media (max-width: 479px) { .nav:not(.is-open) .nav__actions { display: none; } .nav:not(.is-open) .nav__actions + .nav__toggle { margin-left: auto; } }
/* the bar is clear while the page is at its top (Nav.jsx sets data-top), solid as soon as it is used or the page moves */
.nav { transition: background-color 240ms var(--ease), border-color 240ms var(--ease); }
.nav[data-top]:not(:hover, :focus-within, .is-open) { background-color: transparent; border-bottom-color: transparent; }