/* Spacing & layout.
   The site is fluid-first: nearly every outer measure is a clamp() so a phone and a
   4K monitor get the same composition. Fixed steps are used inside cards and panels. */

:root {
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 14px;
  --space-6: 16px;
  --space-7: 18px;
  --space-8: 20px;
  --space-9: 22px;
  --space-10: 26px;
  --space-12: 32px;
  --space-14: 40px;
  --space-16: 48px;
  --space-20: 64px;

  /* fluid rhythm — copied verbatim from production */
  --gutter-x: clamp(20px, 5vw, 48px); /* @kind spacing */
  --gutter-x-wide: clamp(20px, 5vw, 64px); /* @kind spacing */
  --gutter-y: clamp(70px, 9vh, 110px); /* @kind spacing */
  --gutter-y-bottom: clamp(80px, 9vh, 120px); /* @kind spacing */
  --mark-inset-y: clamp(14px, 2.4vw, 26px); /* @kind spacing */
  --mark-inset-x: clamp(14px, 2.6vw, 32px); /* @kind spacing */
  --section-gap: clamp(40px, 6vw, 72px); /* @kind spacing */
  --hero-gap: clamp(48px, 7vw, 84px); /* @kind spacing */
  --stack-gap: clamp(20px, 3.4vh, 40px); /* @kind spacing */

  /* card interiors */
  --card-pad: 26px 26px 24px; /* @kind spacing */
  --card-pad-reader: clamp(32px, 6vw, 64px); /* @kind spacing */
  --card-gap: 20px; /* @kind spacing */
  --panel-pad: 26px 22px;

  /* containers */
  --measure-page: 1180px; /* @kind spacing */
  --measure-reader: 760px; /* @kind spacing */
  --measure-prose: 680px; /* @kind spacing */
  --measure-card-min: 460px; /* @kind spacing */
  --measure-deck: 1500px; /* @kind spacing */
  --panel-width: 296px; /* @kind spacing */
  --phone-width: 420px; /* @kind spacing */
  --phone-height: 860px; /* @kind spacing */

  /* controls */
  --control-h: 42px; /* @kind spacing */
  --control-h-lg: 48px; /* @kind spacing */
  --tap-min: 44px; /* @kind spacing */
}