:root {
  --bg: #0a0a0a;
  --fg: #ededed;
  --fg-80: rgba(237, 237, 237, 0.8);
  --fg-60: rgba(237, 237, 237, 0.6);
  --fg-50: rgba(237, 237, 237, 0.5);
  --fg-40: rgba(237, 237, 237, 0.4);
  --fg-20: rgba(237, 237, 237, 0.2);
  --fg-10: rgba(237, 237, 237, 0.1);
  --coffee: #c8a27a;
  --coffee-ink: #1a1207;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(255, 255, 255, 0.15); }

a { color: inherit; }

p { margin: 0; }

.eyebrow {
  margin: 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-50);
}

.quiet-link {
  font-size: 0.875rem;
  color: var(--fg-40);
  text-decoration: none;
  transition: color 0.15s;
}
.quiet-link:hover { color: var(--fg-80); }

@media (min-width: 640px) {
  .eyebrow { font-size: 0.75rem; letter-spacing: 0.2em; }
}