/* ==========================================================================
   BASE — resets, typography defaults, global element rules
   ========================================================================== */

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; border: none; background: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p{ margin: 0; }

/* paper grain — subtle, static, non-AI-glossy */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* accessible focus ring everywhere */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline: 2.5px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

/* skip link — off-screen until focused */
.skip-link{
  position: fixed;
  top: -80px;
  left: 16px;
  z-index: 6000;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  transition: top .2s var(--ease-out);
}
.skip-link:focus-visible{ top: 12px; }

::selection{
  background: var(--banana-soft);
  color: var(--ink);
}