/* --- 2. RESET & GLOBAL --- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; background: var(--bg); color: var(--txt);
  font-family: var(--sans); font-size: var(--step-0); line-height: 1.6;
  transition: background 0.3s, color 0.3s;
}

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

/* Focus States (Accessibility) */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Skip Link */
.skip-link {
  position: absolute; top: -100px; left: 0; background: var(--accent); color: white;
  padding: 1rem; z-index: 999; text-decoration: none; font-weight: bold;
}
.skip-link:focus { top: 0; }

/* Noise Texture */
@media (prefers-reduced-motion: no-preference) {
  body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 500; opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  }
}