/* base.css — CSS custom properties, reset, global body/link styles, reveal-on-scroll utility, paper-grain texture */

  :root {
    --board: #ece4d3;
    --board-2: #e2d8c2;
    --paper: #fffdf7;
    --ink: #2b2620;
    --ink-soft: #6b6255;
    --line: #d8cdb4;
    --yellow: #f3d35e;
    --yellow-ink: #6b5610;
    --pink: #f0a8ab;
    --pink-ink: #7a2f34;
    --sage: #a9c2a0;
    --sage-ink: #35502f;
    --sky: #9dc3d6;
    --sky-ink: #1f4a5c;
    --marker: #ff6f59;
    --sans-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", sans-serif;
    --hand-jp: "Hiragino Maru Gothic ProN", "Yu Gothic UI", var(--sans-jp);
    --ease: cubic-bezier(.16, 1, .3, 1);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  /* nav is sticky at 75px tall; anchor targets need this or the nav bar
     covers their top few lines when jumped to directly (most visible now
     that #cta has a dark background the white nav clips visibly across) */
  #proof, #pricing, #faq, #cta { scroll-margin-top: 75px; }
  body {
    background: var(--paper); color: var(--ink-soft);
    font-family: var(--sans-jp); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  a:focus-visible, button:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible {
    outline: 2.5px solid var(--marker); outline-offset: 3px; border-radius: 2px;
  }
  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
  section { position: relative; }

  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

  /* subtle paper grain via layered radial dots, not a gradient mesh */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
    background-image: radial-gradient(rgba(43,38,32,.05) .9px, transparent .9px);
    background-size: 14px 14px;
  }