:root {
    --ink: #0b1d3a;          /* deep navy */
    --ink-soft: #1a2f52;
    --paper: #fafbfd;         /* off-white */
    --paper-2: #eef2f8;       /* cool gray-blue */
    --paper-3: #e2e9f3;
    --accent: #ff6a3d;        /* warm coral accent (sparingly) */
    --blue: #2956d6;          /* primary blue */
    --blue-light: #5a83e8;
    --blue-pale: #d8e3fa;
    --line: rgba(11, 29, 58, 0.12);
    --line-strong: rgba(11, 29, 58, 0.28);
    --muted: #4a5773;
    --serif: 'Fraunces', Georgia, serif;
    --sans: 'Inter Tight', -apple-system, sans-serif;
    --mono: 'JetBrains Mono', 'Courier New', monospace;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;
  }

  /* Subtle dot grid background */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(11,29,58,0.07) 1px, transparent 0);
    background-size: 28px 28px;
  }

  .container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 2;
  }