/* ─────────────────────────────────────────────────────────────────
   RESET & ROOT — v2 (Code Drop 1)
   Fixes: C1, C7, I8, P6, P10
───────────────────────────────────────────────────────────────── */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  :root {
    /* ── Colours: Light mode ── */
    --bg:           #F5F4EF;
    --bg-alt:       #EDECEA;
    --surface:      #E8E7E1;
    --text:         #0E0E0E;
    --text-muted:   #6B6B6B;
    --text-faint:   #A0A0A0;
    --border:       rgba(14,14,14,0.08);
    --border-hover: rgba(14,14,14,0.18);
    --accent:       #C8FF00;
    --accent-dark:  #9ECC00;
    --card-bg:      #EDECEA;
    --card-shadow:  rgba(14,14,14,0.08);
  
    /* ── Typography ── */
    --font-sans:  'Cabinet Grotesk', sans-serif;
    --font-serif: 'Instrument Serif', serif;
    --font-mono:  'JetBrains Mono', monospace;
  
    /* ── Spacing ── */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 8rem;
  
    /* ── Type scale ── */
    /* ── Type scale ── */
    --fs-xs:   0.72rem;   /* was 0.65 — minimum legible label size */
    --fs-sm:   0.875rem;  /* was 0.8 */
    --fs-base: 1rem;
    --fs-md:   1.2rem;
    --fs-lg:   1.8rem;
    --fs-xl:   clamp(2.5rem, 5vw, 4rem);
    --fs-2xl:  clamp(4rem, 9vw, 8rem);
    --fs-hero: clamp(4.25rem, 9.5vw, 9.5rem);

    /* ── Section rhythm ── */
    --space-xs:      0.5rem;
    --space-sm:      1rem;
    --space-md:      2rem;
    --space-lg:      4rem;
    --space-xl:      8rem;
    --space-section: clamp(6rem, 10vw, 10rem); /* breathable between sections */
  
    /* ── Easing ── */
    --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 0.25s;
    --dur-base: 0.5s;
    --dur-slow: 0.9s;
  
    /* ── Layout ── */
    --max-w:  1400px;
    --gutter: 3rem;
    --nav-h:  72px;
  }
  
  /* ── Dark mode ── */
  [data-theme="dark"] {
    --bg:           #0A0A0A;
    --bg-alt:       #111111;
    --surface:      #1A1A1A;
    --text:         #F0EFE9;
    --text-muted:   #888888;
    --text-faint:   #555555;
    --border:       rgba(240,239,233,0.07);
    --border-hover: rgba(240,239,233,0.16);
    --card-bg:      #141414;
    --card-shadow:  rgba(0,0,0,0.35);
    --accent:       #C8FF00;
    --accent-dark:  #9ECC00;
  }
  
  html {
    font-size: 16px;
    scroll-behavior: auto;
    -webkit-text-size-adjust: 100%;
  }
  
  body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.5s var(--ease-soft),
                color 0.5s var(--ease-soft);
  }
  
  /* ── C1 FIX: cursor:none only for mouse users ── */
  @media (pointer: fine) {
    body { cursor: none; }
    a, button { cursor: none; }
  }
  
  /* ── Scrollbar ── */
  ::-webkit-scrollbar { width: 4px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
  }
  
  /* ── Selection ── */
  ::selection {
    background: var(--accent);
    color: #0E0E0E;
  }
  
  /* ── Focus (keyboard nav) ── */
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 4px;
  }
  
  img, video { max-width: 100%; display: block; }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  /* cursor:none only on pointer:fine (part of C1 fix) */
  @media (pointer: fine) {
    a { cursor: none; }
  }
  
  ul, ol { list-style: none; }
  
  button {
    background: none;
    border: none;
    font-family: inherit;
    color: inherit;
  }
  
  /* ── Utility ── */
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  
  .container {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--gutter);
  }
  
  .noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9000;
    opacity: 0.032;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
  }
  
  /* ── Reduced motion ── */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
  
  /* ── Responsive gutters ── */
  @media (max-width: 1024px) { :root { --gutter: 2rem; } }
  @media (max-width: 640px)  { :root { --gutter: 1.25rem; --nav-h: 60px; } }

  /* Premium gutters on large screens */
@media (min-width: 1280px) { :root { --gutter: 3.5rem; } }
@media (min-width: 1536px) { :root { --gutter: 4.5rem; } }
@media (min-width: 1920px) { :root { --gutter: 6rem; } }