:root {
  --base: #10201A;
  --base2: #152820;
  --panel: #1A3227;
  --panel2: #1E3A2D;
  --pine: #2E9B84;
  --pine-deep: #0F6B5F;
  --sand: #E0AC52;
  --sand-deep: #C4892C;
  --bone: #ECE6D6;
  --bone-dim: #9BA595;
  --line: rgba(236, 230, 214, 0.13);
  --nav-h: 64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--base);
  color: var(--bone);
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { margin: 0 auto; padding: 0 24px; }

.topo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
}

.topo svg { width: 100%; height: 100%; }

.topo path {
  fill: none;
  stroke: var(--pine);
  stroke-width: 1;
  opacity: .12;
}

main { position: relative; z-index: 1; }

.eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--pine);
  margin-bottom: 20px;
}

.lede { color: var(--bone); opacity: .9; }

.ridge { display: block; width: 100%; }

.ridge path {
  fill: none;
  stroke: var(--sand);
  stroke-width: 1.5;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
  }
}