/* Design tokens v1.0 (2026-09-16), copied from portfolio/brand/tokens.css; comment edited only to drop the studio name and an em dash per the site build's non-negotiable rules, values unchanged. */
:root {
  /* colour */
  --ink: #0E0E0F;  --paper: #F5F6F7;  --white: #FFFFFF;
  --blue: #5FA2D8; /* Brand Blue: mark, display on ink, fills. Never small text on light. */
  --blue-deep: #2A6FA8; /* interactive blue on light: links, buttons */
  --gray: #D2D5DA; --graphite: #3A3D42; --muted: #5F6774;
  --error: #B3261E;
  /* type */
  --font-display: "Briller", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Good Headline Pro", "Archivo Expanded", "Helvetica Neue", Arial, sans-serif;
  --fs-display: 64px; --lh-display: 1.0;  --ls-display: -0.01em;
  --fs-h1: 44px;      --lh-h1: 1.05;      --ls-h1: -0.005em;
  --fs-h2: 30px;      --lh-h2: 1.1;
  --fs-label: 14px;   --lh-label: 1.2;    --ls-label: 0.10em;
  --fs-h3: 20px;      --lh-h3: 1.25;
  --fs-body: 16px;    --lh-body: 1.55;
  --fs-small: 14px;   --lh-small: 1.5;
  --fs-caption: 12px; --lh-caption: 1.4;  --ls-caption: 0.01em;
  --measure: 640px;
  /* space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  /* layout */
  --content-max: 1200px; --gutter: 24px; --margin-mobile: 24px; --margin-desktop: 64px;
  --radius: 0; --radius-frame: 12px;
  --rule: 1px solid var(--ink);
  --motion: 150ms ease-out;
}
/* text styles (BRAND.md §05) */
.t-display { font: 900 var(--fs-display)/var(--lh-display) var(--font-display); letter-spacing: var(--ls-display); }
.t-h1      { font: 900 var(--fs-h1)/var(--lh-h1) var(--font-display); letter-spacing: var(--ls-h1); }
.t-h2      { font: 900 var(--fs-h2)/var(--lh-h2) var(--font-display); }
.t-label   { font: 900 var(--fs-label)/var(--lh-label) var(--font-display); letter-spacing: var(--ls-label); text-transform: uppercase; }
.t-h3      { font: 900 var(--fs-h3)/var(--lh-h3) var(--font-text); }
.t-body    { font: 400 var(--fs-body)/var(--lh-body) var(--font-text); }
.t-small   { font: 400 var(--fs-small)/var(--lh-small) var(--font-text); }
.t-caption { font: 400 var(--fs-caption)/var(--lh-caption) var(--font-text); letter-spacing: var(--ls-caption); color: var(--muted); }
.t-role    { font: 900 var(--fs-body)/var(--lh-body) var(--font-text); }
@media (max-width: 719px) {
  :root { --fs-display: 44px; --fs-h1: 30px; --fs-h2: 24px; }
}
@media (prefers-reduced-motion: reduce) { :root { --motion: 0ms; } }