/* ============================================================
   ЭТО / ETO STUDIO — SPACING & LAYOUT TOKENS
   Fluid, viewport-driven rhythm. The site breathes with clamp()
   so a band looks right at 360px and at 2560px.
   ============================================================ */

:root {
  /* ---- Static step scale (4px base) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Fluid spacing (the real workhorses) ---- */
  --pad-page-x:    clamp(20px, 5vw, 80px);    /* horizontal page gutter */
  --pad-section-y: clamp(36px, 9vh, 100px);   /* vertical section rhythm */
  --pad-band:      clamp(24px, 2.6vw, 44px);  /* inside a direction band */
  --gap-head:      clamp(36px, 5vw, 72px);    /* head → content */
  --gap-cases:     clamp(18px, 2vw, 28px);    /* between case cards */
  --pad-card:      clamp(22px, 3vw, 46px);    /* inside a media card */

  /* ---- Heights ---- */
  --band-min:  clamp(300px, 32vw, 440px); /* @kind spacing */
  --card-min:  clamp(440px, 46vw, 640px); /* @kind spacing */
  --nav-h:     58px;

  /* ---- Measure (max line lengths) ---- */
  --measure-tight: 14ch;
  --measure-copy:  42ch;
  --measure-lead:  46ch;
  --measure-wide:  48ch;

  /* ---- Borders & radius ---- */
  --border-hair:   1px solid var(--line);
  --border-strong: 2px solid var(--fg);
  --radius:        0px;   /* the studio is hard-edged. nothing rounds. */
}