/* ============================================================
   BASE — design tokens, reset, typography, global utilities
   ============================================================ */

@layer base {

  :root {
    /* Colour tokens */
    --c-bg:        #f5f3ef;
    --c-bg-alt:    #eeeae3;
    --c-ink:       #0d0d0d;
    --c-ink-muted: #6b6762;
    --c-accent:    #2563eb;
    --c-accent-dk: #1d4ed8;
    --c-border:    #dedad3;
    --c-surface:   #fafaf8;

    /* Spacing scale */
    --sp-1:  clamp(0.5rem,  1vw,  0.75rem);
    --sp-2:  clamp(1rem,    2vw,  1.5rem);
    --sp-3:  clamp(1.5rem,  3vw,  2.5rem);
    --sp-4:  clamp(1.5rem,  3vw,  3rem);
    --sp-5:  clamp(2rem,    4vw,  4rem);
    --sp-6:  clamp(2.5rem,  5vw,  5rem);

    /* Type scale */
    --fs-eyebrow: 0.7rem;
    --fs-sm:      clamp(0.85rem, 1vw, 0.95rem);
    --fs-base:    clamp(1rem,    1.1vw, 1.05rem);
    --fs-md:      clamp(1.1rem,  1.5vw, 1.25rem);
    --fs-lg:      clamp(1.4rem,  2.5vw, 2rem);
    --fs-xl:      clamp(2rem,    4vw,   3.5rem);
    --fs-display: clamp(3.5rem,  8vw,   7.5rem);

    /* Misc */
    --radius-sm:  4px;
    --radius-md:  10px;
    --radius-lg:  18px;
    --transition: 0.35s ease;
    --sidebar-w:  clamp(220px, 22vw, 300px);
  }

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

  html {
    scroll-behavior: smooth;
    font-size: 100%;
  }

  body {
    background-color: var(--c-bg);
    color: var(--c-ink);
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 400;
    font-size: var(--fs-base);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
  }

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

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

  ul, ol {
    list-style: none;
  }

  /* Typography */
  h1, h2, h3, h4 {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.02em;
  }

  /* Eyebrow label utility */
  .eyebrow {
    display: inline-block;
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--c-ink-muted);
  }

  /* Focus visible */
  :focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  [hidden] { display: none !important; }

  /* Scrollbar */
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: var(--c-bg); }
  ::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 3px; }

  /* Layout: sidebar + content */
  .site-wrapper {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
  }

  @media (max-width: 768px) {
    .site-wrapper {
      grid-template-columns: 1fr;
    }
  }

}

/* ── Film grain overlay ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  mix-blend-mode: multiply;
}

/* ── Cursor overrides ── */
* { cursor: default; }
a, button, label, select,
[role="button"], [tabindex]:not([tabindex="-1"]) { cursor: pointer; }
input, textarea { cursor: text; }