/* 4px base grid. Section rhythm is deliberately large — the brand manual asks for
   generous reserve margins around the mark and around graphic blocks. */
:root{
  --space-0:0;--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;
  --space-20:80px;--space-24:96px;--space-32:128px;--space-40:160px;

  --gutter:24px;
  --container-sm:720px;--container-md:960px;--container-lg:1200px;--container-xl:1360px;
  --section-y:var(--space-32);
  --section-y-tight:var(--space-20);

  /* clear space reserve around the logo = 1× the mark's stem width */
  --logo-clearspace:0.34em;
  --control-h-sm:32px;--control-h-md:40px;--control-h-lg:48px;
}