/* Base reset and typography. */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

h2 { font-size: clamp(26px, 3.4vw, 36px); }
h3 { font-size: 18px; }

p { color: var(--text-muted); }

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

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

ol, ul { list-style: none; }

code {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 0.92em;
}

.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 500;
}

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

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

/* Scroll reveal — active only when js/reveal.js tags the body, so content
   stays fully visible without JavaScript. Opacity/transform only. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.js-reveal [data-reveal="1"] { transition-delay: 70ms; }
.js-reveal [data-reveal="2"] { transition-delay: 140ms; }
.js-reveal [data-reveal="3"] { transition-delay: 210ms; }

.js-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}