*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: sans-serif;
  background: var(--bg-page);
  padding: 1rem;
}

body {
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--bg-surface);
  color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: serif;
  color: var(--brand);
  margin: 1rem 0;
}

a { color: var(--brand); }

hr {
  border: none;
  border-top: 1px solid var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;        /* critical: prevents line breaks */
}

.nav-title {
  margin: 0;
  white-space: nowrap;      /* prevents text from wrapping */
}

.nav-links a.active {
  font-weight: 700;
  border-bottom: 2px solid var(--brand);
  padding-bottom: 2px;
}