/* KIX type system.
   Display = Archivo at expanded width, caps, tight tracking. Never lowercase.
   Body    = Instrument Sans, sentence case.
   Mono    = JetBrains Mono, caps, wide tracking, for eyebrows / labels / metadata.
*/
:root {
  --kx-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --kx-font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --kx-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* wdth axis for display type */
  --kx-display-width: 118; /* @kind other */
  /* wordmark and lockups — short strings, never reflowed */
  --kx-display-width-max: 125; /* @kind other */
  /* Hero axis. The hero is the one place three maxima collide: the largest size in the
     system, full expansion, and an unbreakable 10-character word (XPONENTIAL). Measured,
     it needs 8.3x its font-size at wdth 125 — 433px at the 52px clamp floor, against 327px
     of usable width at a 375px viewport.
     Ink keeps the SCALE and trades the WIDTH AXIS: oversized heavy caps are the brutalist
     signal, and a variable display face exists precisely so type can be set to its column.
     Shrinking instead would put the hero within 6px of --kx-size-d2 and collapse the
     hierarchy. Steps below are measured to fit XPONENTIAL from 320px up, with margin. */
  --kx-display-width-hero: 125; /* @kind other */

  --kx-weight-regular: 400;
  --kx-weight-medium: 500;
  --kx-weight-bold: 700;
  --kx-weight-black: 900;

  /* display scale (clamped, desktop -> 390px mobile) */
  --kx-size-hero: clamp(3.25rem, 11vw, 9rem);
  --kx-size-d1: clamp(2.5rem, 7vw, 5.25rem);
  --kx-size-d2: clamp(2rem, 5vw, 3.5rem);
  --kx-size-d3: clamp(1.5rem, 3.4vw, 2.25rem);
  --kx-size-d4: 1.375rem;

  /* body scale */
  --kx-size-lead: clamp(1.0625rem, 1.6vw, 1.3125rem);
  --kx-size-body: 1rem;
  --kx-size-body-sm: 0.9375rem;
  --kx-size-caption: 0.8125rem;

  /* mono scale */
  --kx-size-label: 0.75rem;
  --kx-size-label-sm: 0.6875rem;

  --kx-leading-display: 0.92;
  --kx-leading-tight: 1.1;
  --kx-leading-body: 1.55;
  --kx-leading-loose: 1.7;

  --kx-track-display: -0.03em;
  --kx-track-hero: -0.04em;
  --kx-track-body: 0em;
  --kx-track-label: 0.16em;
  --kx-track-label-wide: 0.24em;
}

/* Hero width-axis steps. Each is measured against the longest unbreakable hero word so the
   hero never exceeds its column; the hero is the only display string in the system that
   needs this (every other one fits at wdth 125 down to 390px). 820px matches the system's
   mobile breakpoint. */
@media (max-width: 820px) { :root { --kx-display-width-hero: 100; /* @kind other */ } }
@media (max-width: 480px) { :root { --kx-display-width-hero: 85; /* @kind other */ } }
@media (max-width: 360px) { :root { --kx-display-width-hero: 70; /* @kind other */ } }

/* Display axis steps, for the d1-d4 scale. Measured against the longest unbreakable word in
   the NARROWEST container it is set in — which is not the page: GOALKEEPING at --kx-size-d2
   sits in a card column 66px narrower than the gutter width, and at wdth 118 it overran that
   column by 38px at 375px. A string can breach its own box while the document still reports
   no horizontal scroll, so these have to be measured per element, not per page. */
@media (max-width: 480px) { :root { --kx-display-width: 92; /* @kind other */ } }
@media (max-width: 360px) { :root { --kx-display-width: 72; /* @kind other */ } }