html, body {
  height: 100%;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--void);
  overflow: hidden; /* the shell owns the viewport — no page scroll */
}

h1, h2, h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}

a {
  color: inherit;
  transition: color var(--duration-fast) ease;
}

a:hover { color: var(--accent); }

.highlight { color: var(--accent); }

em { font-style: italic; }

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

::selection {
  background-color: var(--accent);
  color: var(--void);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

kbd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 2px 6px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  color: var(--ink-dim);
}

/* Mobile: release the viewport lock and allow normal scrolling */
@media (max-width: 899px) {
  body { overflow: auto; }
}