/* ═══ RESET + BASE ═══ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
html { scroll-behavior: smooth; }

/* Respect users who ask for reduced motion: disable smooth scroll,
   transitions, animations, and any scroll-reveal transforms. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-sans);
  /* Body copy sits over busy photo backgrounds; 400/14px reads far better than
     the old 300/13px, which receded into the imagery. Headers stay 300 (display). */
  font-weight: 400;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

a     { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
p    { margin: 0 0 1em; max-width: 62ch; }
h1, h2, h3, h4 { font-weight: 300; margin: 0; }

/* ── Typography utilities ── */
.mono {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
}
.mono.dim   { color: var(--fg-muted); }
.mono.accent { color: var(--accent); }

.eyebrow {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

.display {
  font-family: var(--f-display);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.01em;
}

/* ── Utilities ── */
.rule      { height: 1px; background: var(--rule); }
.rule-soft { height: 1px; background: var(--rule-soft); }

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

::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

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