:root{
  /* colour */
  --bg:          #0A0A0A;
  --bg-raised:   #121212;                 /* cards, form fields */
  --fg:          #F4F3F0;                 /* primary text */
  --fg-dim:      #A8A8A1;                 /* body copy */
  --fg-mute:     #78786F;                 /* labels, metadata */
  --line:        rgba(255,255,255,.09);   /* hairlines */
  --line-strong: rgba(255,255,255,.18);   /* hover borders */
  --scrim:       rgba(10,10,10,.55);      /* under hero text only */

  /* type */
  --font-sans: 'Inter Tight', system-ui, sans-serif;
  --font-display: 'Old London', var(--font-sans);
  --font-serif: 'EB Garamond', Georgia, serif;   /* hero tagline — medieval warmth, legible */

  --step--1: clamp(13px, .8vw, 14px);     /* mono labels */
  --step-0:  clamp(15px, 1vw, 17px);      /* body */
  --step-1:  clamp(18px, 1.6vw, 22px);    /* lead paragraphs */
  --step-2:  clamp(22px, 2.4vw, 30px);    /* spec values, row titles */
  --step-3:  clamp(26px, 3.9vw, 52px);    /* section headings */
  --step-4:  clamp(38px, 7.2vw, 104px);   /* hero */
  --step-5:  clamp(40px, 11vw, 150px);    /* footer wordmark */

  /* rhythm */
  --pad:     clamp(20px, 4vw, 72px);      /* page gutter */
  --section: clamp(70px, 11vh, 140px);    /* vertical section padding */
  --gap:     14px;                        /* grid gap, everywhere */
  --max:     1360px;
  --radius:  14px;                        /* media blocks only */

  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .6s;
}