:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:28px;--space-8:32px;--space-9:40px;--space-10:48px;--space-12:64px;--space-14:80px;--space-16:100px;--space-20:140px;--space-24:180px;
/* Layout */
--container:1320px;/* @kind spacing */
--gutter:clamp(16px,2.6vw,32px);/* @kind spacing */   /* outer page margin — 16px min on phones */
--hero-inset:clamp(8px,1.2vw,16px);/* @kind spacing */ /* bleed panels (hero, hosts, final) */
--section-y:clamp(80px,12vw,140px);/* @kind spacing */
--section-y-lg:clamp(100px,14vw,180px);/* @kind spacing */
--card-pad:clamp(24px,3vw,40px);/* @kind spacing */
--grid-gap:clamp(12px,1.4vw,20px);/* @kind spacing */
--space-head:clamp(36px,5vw,64px);/* @kind spacing */ /* section head → content */
--space-block:clamp(64px,9vw,120px);/* @kind spacing */ /* between blocks inside a section */
--space-stack:clamp(18px,2vw,24px);/* @kind spacing */ /* inside text stacks */
--measure:62ch;/* @kind spacing */ /* max line length for body copy */
--measure-narrow:36ch;/* @kind spacing */
/* Radii */
/* Nested radius rule: inner = outer − padding (card 28 / pad 10 → media 18) */
--r-xs:8px;--r-sm:14px;--r-md:18px;--r-media:24px;--r-card:28px;--r-pill:999px;
/* Elevation — the system is mostly flat */
--shadow-nav:0 1px 0 rgba(20,18,14,.04),0 8px 30px rgba(20,18,14,.08);
--shadow-float:0 12px 40px rgba(8,26,14,.22);
--shadow-none:none;
--blur-glass:blur(16px);/* @kind other */
/* Sizes */
--target-min:44px;/* @kind spacing */ /* every tap target */--control-h:48px;/* @kind spacing */--control-h-sm:40px;/* @kind spacing */--control-h-lg:56px;/* @kind spacing */
--ticker-h:clamp(72px,9vw,112px);/* @kind spacing */
/* Breakpoints (reference): 810px, 1200px */
}