/* ============ SPACING / RADIUS / BORDER / MOTION ============ */
:root{
  /* Spacing scale (4px base) */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;
  --sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:128px;

  /* Radius — app-like cards use generous rounding */
  --r-sm:8px;
  --r-md:16px;
  --r-lg:24px;      /* video / thumbnail cards */
  --r-xl:32px;      /* hero media, large panels */
  --r-pill:999px;

  /* Border widths — thin hairline dividers structure layouts */
  --bw-hair:1px;
  --bw-strong:2px;

  /* Layout */
  --page-max:1440px;
  --page-gutter:clamp(20px,5vw,72px); /* @kind spacing */

  /* Motion */
  --ease-out:cubic-bezier(.2,.7,.2,1); /* @kind other */
  --ease-in-out:cubic-bezier(.65,0,.35,1); /* @kind other */
  --dur-fast:120ms; /* @kind other */
  --dur:220ms; /* @kind other */
  --dur-slow:420ms; /* @kind other */

  /* Shadow — minimal; brand relies on borders, not elevation */
  --shadow-card:0 18px 40px rgba(0,0,0,.45);
  --shadow-photo:0 10px 30px rgba(0,0,0,.35);
}