/* ─────────────────────────────────────────────────────────────
   AntHill bake-off · SHARED CRAFT TOKENS
   Locked so type sizes never drift big/small across versions.
   Every design links this and builds from --step-* / --s-*.
   Source: .docs/2026-06-24-craft-dossier.md §1
   ───────────────────────────────────────────────────────────── */

:root {
  /* Fluid modular type scale — rem-based (zoom-safe), min @360px → max @1440px.
     Body floor 16px, ceiling 18px. Hero commits to drama (≈4:1 vs body). */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.89rem);  /* small / captions  13–14px */
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);  /* BODY  16 → 18px           */
  --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.50rem);  /* lead / h4                 */
  --step-2:  clamp(1.44rem, 1.25rem + 0.95vw, 2.00rem);  /* h3                        */
  --step-3:  clamp(1.73rem, 1.40rem + 1.65vw, 2.67rem);  /* h2                        */
  --step-4:  clamp(2.07rem, 1.55rem + 2.60vw, 3.56rem);  /* h1 (standard)             */
  --step-5:  clamp(2.49rem, 1.60rem + 4.45vw, 4.74rem);  /* hero h1                   */
  --step-6:  clamp(2.99rem, 1.30rem + 8.40vw, 7.00rem);  /* poster / display          */
  /* Display directions may override --step-6 locally up to ~16vw — deliberate only. */

  /* Line-height inverts with size — never 1.5 on a 5rem headline. */
  --lh-display: 1.05;
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.55;

  /* 8pt spacing scale — all padding/margin/gap snaps to this, no magic numbers. */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-8: 3rem;    --s-10: 4rem;
  --s-12: 6rem;   --s-16: 8rem;   --s-20: 10rem;  /* section rhythm: 96–160px */

  /* Layout backbone */
  --measure: 68ch;          /* body line-length cap (60–72ch) */
  --container: 1280px;
  --gutter: clamp(1.5rem, 4vw, 2rem);

  font-optical-sizing: auto;
}

/* Micro-typography utilities (opt-in). */
.tabular { font-variant-numeric: tabular-nums; }
.eyebrow, .label {
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.measure { max-width: var(--measure); }

/* Reusable film-grain overlay — resolution-independent feTurbulence as a
   data-URI. Add <div class="grain"></div> once; tune --grain-opacity/blend
   per design (light .04–.08, dark .05–.12). stitchTiles avoids seams. */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  opacity: var(--grain-opacity, 0.05);
  mix-blend-mode: var(--grain-blend, overlay);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}