/* Bear Park — the spacing scale (7 Jul 2026).
   Every step derives from --gut, the page-wide locked side margin, so side
   margins, column gaps and internal air all breathe on the same slope as the
   viewport changes. Loaded on every page before the page's own styles.

   The two largest steps carry a px floor (so mobile rhythm doesn't collapse
   with the 20px gutter) and a vh cap (so short-wide laptops don't get
   endless sections). Micro spacing under ~16px stays hand-set in components;
   the scale governs everything above it.

   Documented in docs/design-system.md §3 — new pages build from these. */
:root {
  --gut: clamp(15px, 2.625vw, 48px);
  --s-025: calc(var(--gut) * 0.25);                 /* 13 / 16 / 5px   micro: label -> value        */
  --s-05:  calc(var(--gut) * 0.5);                  /* 25 / 32 / 10px  inside components            */
  --s-075: calc(var(--gut) * 0.75);                 /* 38 / 48 / 15px  eyebrow gaps, tight columns  */
  --s-1:   var(--gut);                              /* 50 / 64 / 20px  element gaps, figure insets  */
  --s-15:  max(40px, calc(var(--gut) * 1.5));       /* 76 / 96 / 40px  grid gaps, block gaps        */
  --s-2:   max(56px, calc(var(--gut) * 2));         /* 101 / 128 / 56px  section padding, big gaps  */
  --s-3:   min(max(84px, calc(var(--gut) * 3)), 20vh);  /* hero-adjacent rhythm                     */
  --s-4:   min(max(112px, calc(var(--gut) * 4)), 26vh); /* the biggest breathing room               */

  /* ---- easing tokens (8 Jul 2026, from the motion reference audit) ----
     One place for the site's curves; per-file beziers migrate to these
     opportunistically. --ease is the signature arrival curve used across
     reveals, cards and the curtain's off-move; --ease-io is the curtain's
     leave. Documented in docs/design-system.md §5. */
  --ease:              cubic-bezier(.22, 1, .36, 1);
  --ease-io:           cubic-bezier(.7, 0, .3, 1);
  --ease-out-quart:    cubic-bezier(.165, .84, .44, 1);
  --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
  --ease-out-expo:     cubic-bezier(.19, 1, .22, 1);
}

/* MOBILE LAYER (9 Jul 2026): the px floors on the big steps compact so
   sections sit closer on a phone - denser rhythm, same slope. */
@media (max-width: 820px) {
  :root {
    --s-15: max(32px, calc(var(--gut) * 1.5));
    --s-2:  max(42px, calc(var(--gut) * 2));
    --s-3:  min(max(60px, calc(var(--gut) * 3)), 16vh);
    --s-4:  min(max(76px, calc(var(--gut) * 4)), 20vh);
  }
}