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

html, body { margin: 0; padding: 0; }

html {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: var(--leading-normal);
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, oklch(72% 0.18 50 / 0.07), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 30%, oklch(72% 0.17 295 / 0.05), transparent 60%),
    var(--color-bg);
  background-attachment: fixed;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
}

h1 { font-size: var(--text-hero); font-weight: 600; letter-spacing: -0.025em; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p { margin: 0 0 var(--space-4); }
p, li { color: var(--color-text); }

.muted { color: var(--color-text-muted); }
.dim { color: var(--color-text-dim); }

code, .mono { font-family: var(--font-mono); }

a {
  color: var(--color-accent-strong);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--duration-fast);
}
a:hover { color: var(--color-accent); }

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

ul, ol { padding-left: 1.4rem; margin: 0 0 var(--space-4); }
li { margin-bottom: var(--space-2); }

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

.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-6);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 2vw, 2rem);
}

@media (max-width: 880px) {
  .app { grid-template-columns: 1fr; padding: 0 1rem; }
  .sidebar { display: none; }
}

.sidebar {
  position: sticky;
  top: var(--space-5);
  align-self: start;
  padding-top: var(--space-7);
  font-size: var(--text-sm);
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

.sidebar nav { display: flex; flex-direction: column; gap: var(--space-1); }

.sidebar a {
  color: var(--color-text-muted);
  border: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.sidebar a:hover { background: var(--color-surface); color: var(--color-text); }
.sidebar a.is-current { color: var(--color-accent); background: var(--color-accent-soft); }

.sidebar-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-dim);
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}

main { padding: var(--space-4) 0 var(--space-section); }

section.chapter {
  padding: var(--space-section) 0;
  border-bottom: 1px solid var(--color-border);
}
section.chapter:last-child { border-bottom: none; }

.chapter-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 56ch;
  margin-bottom: var(--space-6);
  line-height: var(--leading-normal);
}

.term {
  font-weight: 600;
  color: var(--color-accent-strong);
  font-family: var(--font-mono);
  font-size: 0.95em;
}
.term-th {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 0.9em;
}

.callout {
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-base);
}
.callout.warn { border-left-color: var(--color-put); }
.callout.note { border-left-color: var(--color-cyan); }

.callout-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.callout.warn .callout-title { color: var(--color-put); }
.callout.note .callout-title { color: var(--color-cyan); }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  margin: var(--space-5) 0;
}