/* base.css — reset, html/body defaults, ::selection, focus ring, element resets, scrollbar/caret surfaces */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    /* author display values must never resurrect a hidden element */
    [hidden] { display: none !important; }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 6rem;
      /* proximity: sections settle to top edge only when already close — mandatory would trap scrolling inside the tall #projects section */
      scroll-snap-type: y proximity;
      overflow-x: clip;
    }

    /* snap targets: each section settles flush at viewport top; hero needs no margin cancel — it sits at document 0, scroll clamps there anyway */
    .hero,
    #projects,
    #stack,
    #about,
    #contact {
      scroll-snap-align: start;
    }

    #projects,
    #stack,
    #about,
    #contact {
      /* cancel the global 6rem anchor inset so sections land flush at viewport top (applies to both the nav link and snap) */
      scroll-margin-top: -6rem;
    }

    body {
      background: var(--bg);
      color: var(--ink);
      font-family: var(--font-display);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      /* blueprint paper under everything below the hero — same 44px recipe as
         .hero::after. Static scrolling fallback; motion.css swaps it for a
         fixed parallax sheet when scroll-driven animations are supported */
      background-image:
        linear-gradient(rgba(122, 162, 247, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(122, 162, 247, 0.07) 1px, transparent 1px);
      background-size: 44px 44px;
    }

    /* theme transition — background snaps instantly (crossfading dark<->light
       reads as muddy gray), text/border/shadow still crossfade;
       motion.css collapses this for prefers-reduced-motion: reduce */
    *, *::before, *::after {
      transition: box-shadow 0.25s ease-in-out, outline-color 0.25s ease-in-out;
    }

    ::selection { background: var(--magenta); color: #16161e; }

    a { color: inherit; text-decoration: none; }
    button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

    /* custom Bibata cursors (recoloured Tokyo Night) — default arrow + pointer hand.
       SVGs declare 24x24 intrinsic size (viewBox 256x256, so art scales to fit:
       Chromium renders SVG cursors at intrinsic size, Firefox caps at 32px).
       Hotspots are viewBox-space Bibata config values scaled by 24/256.
       Per-theme sets come from the --cursor-* tokens (dark default, light override). */
    html, body { cursor: var(--cursor-default); }
    a, button, [role="button"], [tabindex], summary, select, label,
    .project, .filter-pill, .btn-more, .theme-toggle {
      cursor: var(--cursor-pointer) !important;
    }

    /* kill the mobile default tap highlight (the translucent blue-gray flash that
       fills the tapped element); visible focus is handled by :focus-visible */
    a, button, [role="button"], [tabindex] {
      -webkit-tap-highlight-color: transparent;
    }

    :focus-visible {
      outline: 2px solid var(--neon);
      outline-offset: 3px;
      border-radius: 4px;
    }

    /* ---------- browser surfaces carry the palette too ---------- */
    body { caret-color: var(--neon); }
    html { scrollbar-width: thin; scrollbar-color: #292e42 var(--bg); }
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb {
      background: #292e42;
      border-radius: 999px;
      border: 2px solid var(--bg);
    }
    ::-webkit-scrollbar-thumb:hover { background: #3b4261; }

    /* ---------- light theme browser surfaces ---------- */
    html[data-theme="light"] { scrollbar-color: #b8bdd6 var(--bg); }
    [data-theme="light"] ::-webkit-scrollbar-thumb { background: #b8bdd6; }
    [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #a3a9c9; }
    [data-theme="light"] ::selection { color: #ffffff; }