/* ── Design tokens, reset, typography base ─────────────────────────── */

:root {
  /* well depth — warm blacks and sediment strata */
  --ink-0: #0c0a07;
  --ink-1: #110e0a;
  --ink-2: #171309;
  --ink-3: #1c1710;
  --line: #2c2517;
  --line-soft: #221c12;

  /* bone & ash — text */
  --bone: #ece2cd;
  --bone-dim: #b3a78c;
  --muted: #8b8068;

  /* hot iron */
  --ember: #ff9e3a;
  --ember-hot: #ff7a18;
  --ember-soft: #ffd9a8;

  /* water at the bottom */
  --water: #8fd8d0;
  --water-deep: #0a1413;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --rail-w: 72px;
  --maxw: 1180px;
  --pad: clamp(1.25rem, 4vw, 3rem);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--bone);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.06;
  margin: 0;
  color: var(--bone);
  text-wrap: balance;
}

h2 {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  letter-spacing: -0.015em;
}

h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--ember);
}

#dno h2 em { color: var(--water); }

h3 {
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  font-weight: 540;
}

p { margin: 0; }

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 2px;
}

strong { font-weight: 600; color: var(--bone); }

ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; }

.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.amber { color: var(--ember); }
.water-c { color: var(--water); }

::selection {
  background: var(--ember);
  color: var(--ink-0);
}

.skip {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--ember);
  color: var(--ink-0);
  border-radius: 4px;
  transition: top 0.2s;
}

.skip:focus { top: 1rem; }

/* screen readers only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* full-page grain — old-print atmosphere */
.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%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");
}