body {
      margin: 0;
      padding: 0;
      background-color: #F1F4EE; /* Sage white background */
      overflow: hidden;
      font-family: sans-serif;
    }
    canvas {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
    }
    /* --- NAVBAR --- */
    .site-header {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10;
      display: grid;
      grid-template-columns: 1fr auto 1fr; /* keeps the links truly centered */
      align-items: center;
      /* Same left margin as the particle word: 8% of the screen, min 24px */
      padding: calc(1.75rem + env(safe-area-inset-top, 0px)) max(24px, 8vw) 1.75rem;
      font-family: "Exo 2", system-ui, sans-serif;
      color: #1F4D2B;
    }
    .logo {
      justify-self: start;
      display: inline-flex;
      color: inherit;
      transition: color 0.2s;
    }
    .logo svg {
      height: 26px; /* width follows automatically from the viewBox */
      width: auto;
    }
    .logo:hover {
      color: #D96C1E; /* orange accent */
    }
    .site-nav {
      display: flex;
      gap: 2.5rem;
    }
    .site-nav a {
      color: inherit;
      text-decoration: none;
      font-weight: 500;
      font-size: 0.95rem;
      padding: 0.5rem 0; /* bigger tap target without changing the look */
      border-bottom: 1px solid transparent;
    }
    .site-nav a:hover,
    .site-nav a[aria-current="page"] {
      border-bottom-color: currentColor;
    }
    .resume-btn {
      justify-self: end;
      color: inherit;
      text-decoration: none;
      font-weight: 500;
      font-size: 0.9rem;
      border: 1px solid currentColor;
      border-radius: 999px;
      padding: 0.45rem 1.1rem;
      transition: background-color 0.2s, color 0.2s;
    }
    .resume-btn:hover {
      background-color: #1F4D2B;
      color: #F1F4EE;
    }
    a:focus-visible {
      outline: 2px solid #1F4D2B;
      outline-offset: 4px;
    }

    /* On phones: logo + resume on top, links on their own row */
    @media (max-width: 640px) {
      .site-header {
        grid-template-columns: 1fr auto;
        row-gap: 1rem;
      }
      .site-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        gap: 1.5rem;
      }
    }