/* ═══════════════════════════════════════════════════
   BASE — reset, document, grain, container
═══════════════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
  /* Anchor targets stop below the sticky header instead of underneath it.
     Applies to both link jumps and scrollIntoView(). */
  scroll-padding-top: var(--nav-h);
}

/* Lenis does its own easing, and two easings on one scroll fight: the page
   jumps, then glides.

   The hook is Lenis's own class, not one of ours. Lenis strips /lenis(-\w+)?/
   from the root className on every update, which silently ate a custom
   `has-lenis` and left `has-` behind — the rule never matched and both easings
   ran at once. Its own class is added when it starts and removed when it is
   destroyed, so a failed load or a reduced-motion preference leaves the native
   behaviour above untouched by itself. */
html.lenis {
  scroll-behavior: auto;
}

/* Freezes the page behind the open mobile menu. overscroll-behavior stops
   the gesture chaining through to the document once the panel hits its end. */
body.nav-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--c-bg);
  color: var(--c-text-2);
  font-family: var(--f-body);
  font-size: var(--fs-300);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Film grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

/* ── SCROLLBAR ──
   Transparent track, brand-blue thumb. Declared twice on purpose: the
   standard properties cover Firefox and current Chrome, the -webkit-
   pseudo-elements cover Safari and older Chrome and are the only way to
   control the thumb's shape. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--c-accent) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb {
  background: var(--c-accent);
  border-radius: var(--r-pill);
  /* A transparent border with background-clip insets the thumb, so it reads
     as a floating pill rather than a bar wedged against the edge. */
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--c-accent); background-clip: content-box }
::-webkit-scrollbar-corner { background: transparent }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.section-sep { width: 100%; height: 1px; background: var(--c-border) }

@media (max-width: 768px) {
  .container { padding: 0 var(--sp-6) }
}