@font-face {
  font-family: "Departure Mono";
  src: url("fonts/DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* surface */
  --bg: #0a0a0a;
  --surface: rgba(255, 255, 255, 0.018);
  --surface-hover: rgba(255, 255, 255, 0.04);
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.22);

  /* type */
  --fg: #f2f2f2;
  --dim: #9a9a9a;
  --faint: #5c5c5c;
  --accent: #c98f55;   /* amber — interaction states only, never at rest */

  /* type — Departure Mono everywhere (only Regular exists, avoid faux bold) */
  --pixel: "Departure Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --mono: var(--pixel);
  --sans: var(--pixel);

  /* spacing scale (4px base) */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;

  /* radii */
  --r-sharp: 0;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fast: 0.15s;
  --med: 0.25s;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--pixel);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

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

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

a { color: inherit; }

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 24px 24px;
}
.bg::after {
  content: "";
  position: absolute;
  inset: -100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.08;
  mix-blend-mode: overlay;
  animation: grain 0.6s steps(6) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-12%, 8%); }
  40%  { transform: translate(9%, -14%);
  }
  60%  { transform: translate(-7%, -9%); }
  80%  { transform: translate(13%, 11%); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .bg::after { animation: none; }
}