:root {
  --bg: #0b1420;
  --panel: #121b28;
  --panel-raised: #17222f;
  --line: #22304a;
  --amber: #c98f4a;
  --amber-dim: #8a6636;
  --cyan: #5fb0c4;
  --paper: #eef0e6;
  --text: #d7dde6;
  --text-muted: #7d93b0;
  --radius: 4px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, sans-serif;
}

h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; margin: 0; }

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

.mono {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 49;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.25) 0px, rgba(0,0,0,0.25) 1px, transparent 1px, transparent 3px);
}

/* Shared nav: both links always boxed; the current page's box is filled. */
.nav-links a, .nav-links .nav-current {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
  text-decoration: none;
  border: 1px solid var(--amber-dim);
  padding: 6px 12px;
  border-radius: var(--radius);
  margin-left: 8px;
  color: var(--amber);
}

.nav-links a:hover { background: rgba(201, 143, 74, 0.1); }

.nav-links .nav-current {
  background: var(--amber);
  color: #16120a;
}