/* MAGMA — spacing & layout tokens. */
:root{
  --space-4:4px;
  --space-6:6px;
  --space-8:8px;
  --space-10:10px;
  --space-12:12px;
  --space-14:14px;
  --space-16:16px;
  --space-18:18px;
  --space-20:20px;
  --space-22:22px;   /* the signature gap: image ⇄ copy, card ⇄ caption */
  --space-24:24px;
  --space-25:25px;
  --space-28:28px;   /* page gutter                                     */
  --space-32:32px;
  --space-38:38px;
  --space-40:40px;
  --space-44:44px;
  --space-56:56px;
  --space-64:64px;
  --space-72:72px;
  --space-104:104px; /* highlight row: content ⇄ description columns    */

  /* Layout — desktop base is 1280. 1440 is recorded only as the Figma canvas
     the design was drawn on; every band below is that canvas scaled to 1280. */
  --layout-canvas:1440px;      /* @kind spacing */
  --layout-base:1280px;        /* @kind spacing */
  --layout-gutter:clamp(16px,3.2vw,28px); /* @kind spacing */
  /* Full-bleed bars (masthead, footer) use this as padding-inline so their
     background spans the viewport while the content stays on the 1280 grid. */
  --layout-rail:max(var(--layout-gutter),calc((100% - var(--layout-content)) / 2 + var(--layout-gutter))); /* @kind spacing */
  --layout-content:1280px;     /* @kind spacing */
  --layout-inset-col:1280px;   /* @kind spacing */
  --layout-inset:clamp(24px,13.4vw,171px); /* @kind spacing */
  --layout-column:736px;       /* @kind spacing */
  --layout-media:649px;        /* @kind spacing */
  --layout-aside:288px;        /* @kind spacing */
  --layout-card:418px;         /* @kind spacing */

  /* Vertical rhythm — four steps, and nothing between them. Every top-level
     section opens on --rhythm-section; blocks inside a section use --rhythm-block;
     rows inside a block use --rhythm-row; label-to-thing gaps use --rhythm-tight.
     The 24 hand-tuned clamps this replaces were the main reason the pages felt
     unrelated to each other. */
  --rhythm-section:clamp(72px,11.3vw,144px); /* @kind spacing */
  --rhythm-block:clamp(56px,7.5vw,96px);     /* @kind spacing */
  --rhythm-row:clamp(40px,5vw,64px);         /* @kind spacing */
  --rhythm-tight:clamp(24px,2.8vw,36px);     /* @kind spacing */
}