/* self-hosted faces (paths relative to /assets) */
@font-face{font-family:'Inter';font-weight:400;src:url('fonts/inter/Inter-Regular.otf') format('opentype');font-display:swap;}
@font-face{font-family:'Inter';font-weight:500;src:url('fonts/inter/Inter-Medium.otf') format('opentype');font-display:swap;}
@font-face{font-family:'Inter';font-weight:600;src:url('fonts/inter/Inter-SemiBold.otf') format('opentype');font-display:swap;}
@font-face{font-family:'Inter Display';font-weight:300;src:url('fonts/inter/InterDisplay-Light.otf') format('opentype');font-display:swap;}
@font-face{font-family:'Inter Display';font-weight:500;src:url('fonts/inter/InterDisplay-Medium.otf') format('opentype');font-display:swap;}
@font-face{font-family:'Inter Display';font-weight:600;src:url('fonts/inter/InterDisplay-SemiBold.otf') format('opentype');font-display:swap;}
@font-face{font-family:'Cormorant Garamond';font-weight:500;src:url('fonts/cormorant-garamond/CormorantGaramond-Medium.ttf') format('truetype');font-display:swap;}
@font-face{font-family:'Cormorant Garamond';font-weight:600;src:url('fonts/cormorant-garamond/CormorantGaramond-SemiBold.ttf') format('truetype');font-display:swap;}
@font-face{font-family:'JetBrains Mono';font-weight:400;src:url('fonts/jetbrains-mono/JetBrainsMono-Regular.ttf') format('truetype');font-display:swap;}
@font-face{font-family:'JetBrains Mono';font-weight:500;src:url('fonts/jetbrains-mono/JetBrainsMono-Medium.ttf') format('truetype');font-display:swap;}

/* ============================================================================
   OKOA · okoa-type.css — THE canonical type system (design-system layer).
   ----------------------------------------------------------------------------
   Hard rule: if a text treatment is not one of the classes below, it may not
   be used. Every page links this file and styles text ONLY with these classes.
   Scan (12 pages) before this existed: 70 font-sizes, 22 letter-spacings — this
   collapses them to 10 sizes, 4 faces, 4 weights, 6 tracking steps.
   Lint: tests/lint-type.mjs fails the build on any off-system font declaration.
   ============================================================================ */
:root {
  /* ---- the four faces (only these) ---- */
  --okoa-serif: 'Cormorant Garamond', Georgia, serif;   /* display walls + pull-quotes */
  --okoa-sans:  'Inter', 'Helvetica Neue', Arial, sans-serif;  /* body */
  --okoa-disp:  'Inter Display', 'Inter', sans-serif;   /* UI sub-heads, leads, steps */
  --okoa-mono:  'JetBrains Mono', ui-monospace, monospace;     /* labels, data, index */

  /* ---- the size scale (only these 10 steps) ---- */
  --t-display-xl: clamp(2.6rem, 1.6rem + 3.6vw, 5rem);
  --t-display-l:  clamp(2rem,   1.4rem + 2.6vw, 3.4rem);
  --t-display-m:  clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  --t-title:      clamp(1.3rem, 1.05rem + 1vw, 1.9rem);
  --t-lead:       clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  --t-body:       1.0625rem;   /* 17px */
  --t-body-sm:    0.9375rem;   /* 15px */
  --t-fine:       0.8125rem;   /* 13px */
  --t-label:      0.72rem;
  --t-label-sm:   0.66rem;
  --t-micro:      0.6rem;

  /* ---- tracking (only these 6) ---- */
  --tr-tight: -0.02em;  --tr-snug: -0.01em;  --tr-normal: 0;
  --tr-wide: 0.06em;    --tr-caps: 0.12em;   --tr-caps-wide: 0.18em;

  /* ---- weights (ceiling 600) ---- */
  --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600;

  /* ---- measurement contexts (invisible layout metrics, not visible text roles) ----
     R6: shipped case-study canon leaves `.body` in browser-default measurement context
     so `60ch` resolves before visible `.t-*` descendants apply brand fonts. These tokens
     name that context explicitly; body-font-guard.mjs ensures no visible text uses it. */
  --okoa-measure-case-study-default-font-family: Times, "Times New Roman", serif;
  --okoa-measure-case-study-default-font-size: 16px;
  --okoa-measure-case-study-default-line-height: normal;
  --okoa-measure-case-study-body-font-family: "Times New Roman", Times, serif;
  --okoa-measure-case-study-body-font-size: 16px;
  --okoa-measure-case-study-body-line-height: normal;
}

/* ============================================================================
   ROLE CLASSES — the complete, closed set. Use exactly one per text element.
   ============================================================================ */

/* serif display walls */
.t-display-xl { font-family: var(--okoa-serif); font-weight: var(--w-medium); font-size: var(--t-display-xl); line-height: 1.0;  letter-spacing: var(--tr-tight); }
.t-display-l  { font-family: var(--okoa-serif); font-weight: var(--w-medium); font-size: var(--t-display-l);  line-height: 1.04; letter-spacing: var(--tr-tight); }
.t-display-m  { font-family: var(--okoa-serif); font-weight: var(--w-medium); font-size: var(--t-display-m);  line-height: 1.06; letter-spacing: var(--tr-snug); }
.t-quote      { font-family: var(--okoa-serif); font-weight: var(--w-medium); font-size: var(--t-display-m);  line-height: 1.16; letter-spacing: var(--tr-snug); }

/* sans / display UI */
.t-title  { font-family: var(--okoa-disp); font-weight: var(--w-semibold); font-size: var(--t-title); line-height: 1.15; letter-spacing: var(--tr-snug); }
.t-subhead{ font-family: var(--okoa-disp); font-weight: var(--w-semibold); font-size: var(--t-body);  line-height: 1.3;  letter-spacing: var(--tr-snug); }
.t-lead   { font-family: var(--okoa-disp); font-weight: var(--w-light);    font-size: var(--t-lead);  line-height: 1.5;  letter-spacing: var(--tr-normal); }

/* body */
.t-body    { font-family: var(--okoa-sans); font-weight: var(--w-regular); font-size: var(--t-body);    line-height: 1.6;  letter-spacing: var(--tr-normal); }
.t-body-sm { font-family: var(--okoa-sans); font-weight: var(--w-regular); font-size: var(--t-body-sm); line-height: 1.55; letter-spacing: var(--tr-normal); }
.t-fine    { font-family: var(--okoa-sans); font-weight: var(--w-regular); font-size: var(--t-fine);    line-height: 1.5;  letter-spacing: var(--tr-normal); }
.t-body-strong { font-family: var(--okoa-sans); font-weight: var(--w-medium); font-size: var(--t-body); line-height: 1.6; letter-spacing: var(--tr-normal); }

/* mono — labels, kickers, data, the index spine */
.t-label    { font-family: var(--okoa-mono); font-weight: var(--w-medium);  font-size: var(--t-label);    line-height: 1.2; letter-spacing: var(--tr-caps);      text-transform: uppercase; }
.t-label-sm { font-family: var(--okoa-mono); font-weight: var(--w-medium);  font-size: var(--t-label-sm); line-height: 1.2; letter-spacing: var(--tr-caps);      text-transform: uppercase; }
.t-micro    { font-family: var(--okoa-mono); font-weight: var(--w-medium);  font-size: var(--t-micro);    line-height: 1.2; letter-spacing: var(--tr-caps-wide); text-transform: uppercase; }
.t-data     { font-family: var(--okoa-mono); font-weight: var(--w-medium);  font-size: var(--t-body-sm);  line-height: 1.4; letter-spacing: var(--tr-wide); font-variant-numeric: tabular-nums; }
.t-data-lg  { font-family: var(--okoa-mono); font-weight: var(--w-medium);  font-size: var(--t-title);    line-height: 1.1; letter-spacing: var(--tr-snug); font-variant-numeric: tabular-nums; }

/* the one allowed accent: a coral period/emphasis inside a wall */
.t-accent { color: var(--okoa-semantic-border-accent); font-style: normal; }