/* ============================================================================
 * BASE — reset, body, typography, links, selection
 * ==========================================================================*/

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  overflow-x: hidden;
}

/* Belt-and-braces guard: nothing should ever exceed the viewport horizontally.
   Without this, an unexpected wide element forces the browser to zoom out on mobile,
   making the whole layout look "desktop-shaped" on a phone. */
img, svg, video { max-width: 100%; height: auto; }

::selection { background: var(--teal); color: #04241F; }

a      { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.mono  { font-family: var(--font-mono); }

/* Generic reveal animation — applied to anything tagged `.reveal` */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.2, .7, .2, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}