/* Spacing, radii, layout. 4px base. Twelve columns, wide gutters,
   contained max-width. Project cards span 4, so three sit across. */
:root{
  --sp-0:0; /* @kind spacing */
  --sp-1:2px;--sp-2:4px;--sp-3:8px;--sp-4:12px;--sp-5:16px;--sp-6:24px;
  --sp-7:32px;--sp-8:48px;--sp-9:64px;--sp-10:96px;--sp-11:128px;--sp-12:192px;

  /* radii — soft 4px on surfaces, pills for tags and buttons. Nothing rounder. */
  --r-xs:2px;--r-sm:4px;--r-md:4px;--r-lg:6px;--r-xl:8px;--r-pill:999px;

  /* the master grid */
  --page-max:1440px; /* @kind spacing */
  --page-gutter:clamp(24px,5vw,96px); /* @kind spacing */
  --grid-cols:12; /* @kind other */
  --grid-gap:clamp(24px,2.6vw,48px); /* @kind spacing */
  --card-span:4; /* @kind spacing */

  --section-gap:clamp(80px,9vw,168px); /* @kind spacing */
  --band-gap:clamp(48px,6vw,104px); /* @kind spacing */
  --hit-min:44px; /* @kind spacing */
}