@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/assets/fonts/SpaceGrotesk-Variable.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/assets/fonts/HankenGrotesk-Variable.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/assets/fonts/JetBrainsMono-Variable.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

/* #88 — the site header, shared by every page.
 *
 * One stylesheet rather than a copy per page: the point of a nav bar is that
 * it is the same bar, and two that merely look alike drift the first time one
 * is edited. The markup is duplicated because static HTML has no templating,
 * which is cheap at two or three pages and worth revisiting at six.
 *
 * It sits above the Flutter app on the main page too, so the app's own links
 * are in the DOM where a crawler can see them — the canvas gives it nothing.
 */
:root {
  --ink: #1f1b18;
  --muted: #6e665e;
  --line: rgba(31, 27, 24, 0.12);
  --bg: #f5f0e8;
  --surface: #fff;
  --accent: #219ebc;
  --honey: #ffb703;
  --honey-deep: #e5a300;
  --nav-height: 52px;
}

.nav {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  height: var(--nav-height);
  display: flex;
  align-items: center;
}

.nav-inner {
  /* Full width, not a centred column: the brand belongs against the left edge
     of the window rather than indented to line up with a text column that only
     one of these pages has. */
  width: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font: 15px/1.4 "Hanken Grotesk", system-ui, sans-serif;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand-area {
  display: flex;
  align-items: baseline;
  gap: 18px;
  min-width: 0;
}

.brand-blot {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--honey);
  color: #14110e;
  font: 700 12px/1 "JetBrains Mono", monospace;
  box-shadow: 0 1px 3px rgba(20, 17, 14, 0.35);
}

.brand-accent { color: var(--honey-deep); }

.tagline {
  color: var(--muted);
  font: 12px/1.4 "JetBrains Mono", monospace;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.nav-links { display: flex; align-items: center; gap: 18px; }
.nav-links a { color: var(--accent); text-decoration: none; }
.nav-links a:hover { text-decoration: underline; }
.nav-links a[aria-current] { color: var(--muted); text-decoration: none; cursor: default; }

.nav-actions { display: flex; align-items: center; gap: 28px; }
.auth-nav { position: relative; }
.auth-nav-button {
  min-width: 40px;
  height: 36px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: 500 14px/1 "Space Grotesk", system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.auth-nav-button:hover { border-color: var(--muted); }
.auth-nav-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.auth-nav-link { box-sizing: border-box; }
.auth-user-icon { width: 20px; height: 20px; fill: currentColor; }
.auth-menu {
  position: absolute;
  z-index: 10;
  top: 42px;
  right: 0;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(20, 17, 14, 0.12);
}
.auth-email { display: block; padding: 8px 10px; color: var(--muted); font-size: 12px; }
.auth-menu button {
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: 14px/1.4 "Hanken Grotesk", system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.auth-menu button:hover { background: #ece6dc; }

@media (max-width: 700px) {
  .tagline { display: none; }
  .nav-actions { gap: 14px; }
  .nav-links { gap: 12px; }
}

/* The app fills whatever the header leaves. `dvh` rather than `vh` so a mobile
 * browser's collapsing address bar does not leave the fretboard cropped. */
#app {
  height: calc(100dvh - var(--nav-height));
  width: 100%;
}