/* The Union Trilogy — Spacing, layout, borders & shadow
   Corners are SQUARE everywhere (radius 0) except circular dots. No rounded cards. */
:root {
  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 30px;
  --space-7: 44px;
  --space-8: 64px;

  /* ---- Layout ---- */
  --content-max:   1180px;   /* centered content column */
  --content-pad:   44px;     /* side padding inside the column */
  --frame-strip:   30px;     /* notebook strip reserved at far left/right of viewport */
  --section-pad-y: 64px;     /* section top/bottom padding */
  --grid-gap:      22px;     /* default grid gap (range 16–30px) */
  --card-pad:      30px;     /* card padding (range 22–34px) */

  /* ---- Radius ---- */
  --radius: 0;               /* square corners — the whole system */
  --radius-dot: 999px;       /* circular dots only */

  /* ---- Borders ---- */
  --bw-hairline: 1px;
  --bw-rule:     2px;        /* red margin rule / accent rules */
  --bw-quote:    4px;        /* pull-quote left rule */
  --base-stripe: 11px;       /* fixed red base bar at viewport bottom */

  /* ---- Shadows ---- */
  --shadow-card:  0 14px 28px rgba(0,0,0,0.50);
  --shadow-cover: 0 18px 36px rgba(0,0,0,0.55);
  --shadow-tape:  0 8px 18px rgba(0,0,0,0.50);
  --shadow-lift:  0 24px 50px rgba(0,0,0,0.70);

  /* ---- Motion (subtle, physical — no flashy parallax) ---- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1); /* @kind other */
  --dur:  140ms; /* @kind other */            /* hover ~120–160ms */
}