/* ==========================================================================
   SoftVerx typography — four voices, strict jobs.

   display   Bricolage Grotesque   headlines that hold a hero on their own.
                                   Variable: opsz + wdth + wght are used, not
                                   decoration. Tight optical tracking.
   body      Geist                 everything that explains.
   mono      Geist Mono            figures only: coordinates, confidence,
                                   chart ticks, tabular data. Never prose,
                                   never a section label.
   editorial Instrument Serif      pull-quotes and case-study openers only.
                                   One per page. High contrast, never body.
   ========================================================================== */

:root {
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --font-editorial: "IBM Plex Serif", "Iowan Old Style", Georgia, serif;
  /* Print only. Mode B document body — see tokens/print.css. */
  --font-doc: "Source Serif 4", "Charter", "Iowan Old Style", Georgia, serif;

  /* --- Scale. Desktop values; the block below compresses for phones. ------
     Each step ships size / line-height / tracking / weight together so a
     heading can never be assembled half-right. */

  --t-mega: 5.75rem;          /* 92px — hero only, one per page             */
  --t-mega-lh: 0.9; /* @kind other */
  --t-mega-tr: -0.05em; /* @kind other */
  --t-mega-wg: 620; /* @kind other */

  --t-display: 4rem;          /* 64px — page openers                        */
  --t-display-lh: 0.98; /* @kind other */
  --t-display-tr: -0.042em; /* @kind other */
  --t-display-wg: 600; /* @kind other */

  --t-h1: 2.875rem;           /* 46px                                       */
  --t-h1-lh: 1.06; /* @kind other */
  --t-h1-tr: -0.034em; /* @kind other */
  --t-h1-wg: 600; /* @kind other */

  --t-h2: 2.125rem;           /* 34px — section headlines                   */
  --t-h2-lh: 1.14; /* @kind other */
  --t-h2-tr: -0.026em; /* @kind other */
  --t-h2-wg: 600; /* @kind other */

  --t-h2-sm: 1.5625rem;        /* 25px — panel and sheet headings             */
  --t-h2-sm-lh: 1.16; /* @kind other */
  --t-h2-sm-tr: -0.022em; /* @kind other */

  --t-h3: 1.3125rem;          /* 21px — card titles. Display floor.         */
  --t-h3-lh: 1.3; /* @kind other */
  --t-h3-tr: -0.016em; /* @kind other */
  --t-h3-wg: 600; /* @kind other */

  --t-quote: 2rem;            /* 32px — editorial serif pull-quote          */
  --t-quote-lh: 1.24; /* @kind other */
  --t-quote-tr: -0.012em; /* @kind other */

  --t-lead: 1.1875rem;        /* 19px — section leads                       */
  --t-lead-lh: 1.6; /* @kind other */
  --t-lead-tr: -0.008em; /* @kind other */

  --t-body: 1rem;             /* 16px                                       */
  --t-body-lh: 1.65; /* @kind other */
  --t-body-tr: -0.006em; /* @kind other */

  --t-small: 0.875rem;        /* 14px                                       */
  --t-small-lh: 1.6; /* @kind other */

  --t-micro: 0.8125rem;       /* 13px — mono labels, chart ticks            */
  --t-micro-lh: 1.5; /* @kind other */

  --t-caption: 0.78125rem;    /* 12.5px — confidence figures, print marks.
                                 Absolute floor on screen.                  */
  --t-caption-lh: 1.45; /* @kind other */
  --t-caption-tr: 0.005em; /* @kind other */

  --t-eyebrow: 0.8125rem;     /* 13px — the detection label                 */
  --t-eyebrow-lh: 1.35; /* @kind other */
  --t-eyebrow-tr: 0.015em; /* @kind other */

  /* --- Optical-size rules -----------------------------------------------
     Bricolage's `opsz` axis is driven from the size it is set at, so large
     type gets the tighter apertures and thinner joins it was drawn for. */
  --opsz-mega: 96; /* @kind other */
  --opsz-display: 72; /* @kind other */
  --opsz-h1: 48; /* @kind other */
  --opsz-h2: 36; /* @kind other */
  --opsz-h3: 20; /* @kind other */
  /* `wdth` narrows a touch at hero sizes so long headlines hold one line. */
  --wdth-hero: 96; /* @kind other */
  --wdth-default: 100; /* @kind other */
}

/* --- 390px phone compression -----------------------------------------------
   The top three steps compress hard; body and below do not move at all —
   shrinking reading text on a phone is the wrong lever. Tracking loosens
   slightly as size drops so the display face keeps its counters open. */
@media (max-width: 480px) {
  :root {
    --t-mega: 2.75rem;        /* 44px */
    --t-mega-lh: 0.96; /* @kind other */
    --t-mega-tr: -0.038em;
    --t-display: 2.375rem;    /* 38px */
    --t-display-lh: 1.02; /* @kind other */
    --t-display-tr: -0.032em;
    --t-h1: 2rem;             /* 32px */
    --t-h1-tr: -0.028em;
    --t-h2: 1.625rem;         /* 26px */
    --t-h2-sm: 1.375rem;      /* 22px */
    --t-h2-tr: -0.022em;
    --t-quote: 1.5rem;        /* 24px */
    --t-lead: 1.0625rem;      /* 17px */
    --opsz-mega: 56; /* @kind other */
    --opsz-display: 44; /* @kind other */
    --opsz-h1: 36; /* @kind other */
    --opsz-h2: 28; /* @kind other */
    --wdth-hero: 100; /* @kind other */
  }
}

/* --- Type classes ---------------------------------------------------------
   Utility-thin on purpose: the components use these, so a size change lands
   in one place. */
.sx-mega,
.sx-display,
.sx-h1,
.sx-h2,
.sx-h3 {
  font-family: var(--font-display);
  color: var(--text-strong);
  text-wrap: balance;
  margin: 0;
}
.sx-mega {
  font-size: var(--t-mega);
  line-height: var(--t-mega-lh);
  letter-spacing: var(--t-mega-tr);
  font-weight: var(--t-mega-wg);
  font-variation-settings: "opsz" var(--opsz-mega), "wdth" var(--wdth-hero);
}
.sx-display {
  font-size: var(--t-display);
  line-height: var(--t-display-lh);
  letter-spacing: var(--t-display-tr);
  font-weight: var(--t-display-wg);
  font-variation-settings: "opsz" var(--opsz-display), "wdth" var(--wdth-hero);
}
.sx-h1 {
  font-size: var(--t-h1);
  line-height: var(--t-h1-lh);
  letter-spacing: var(--t-h1-tr);
  font-weight: var(--t-h1-wg);
  font-variation-settings: "opsz" var(--opsz-h1);
}
.sx-h2 {
  font-size: var(--t-h2);
  line-height: var(--t-h2-lh);
  letter-spacing: var(--t-h2-tr);
  font-weight: var(--t-h2-wg);
  font-variation-settings: "opsz" var(--opsz-h2);
}
.sx-h3 {
  font-size: var(--t-h3);
  line-height: var(--t-h3-lh);
  letter-spacing: var(--t-h3-tr);
  font-weight: var(--t-h3-wg);
  font-variation-settings: "opsz" var(--opsz-h3);
}
.sx-quote {
  font-family: var(--font-editorial);
  font-size: var(--t-quote);
  line-height: var(--t-quote-lh);
  letter-spacing: var(--t-quote-tr);
  color: var(--text-strong);
  text-wrap: pretty;
  margin: 0;
}
.sx-lead {
  font-size: var(--t-lead);
  line-height: var(--t-lead-lh);
  letter-spacing: var(--t-lead-tr);
  color: var(--text-body);
  text-wrap: pretty;
  margin: 0;
}
.sx-body {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-tr);
  color: var(--text-body);
  text-wrap: pretty;
  margin: 0;
}
.sx-small {
  font-size: var(--t-small);
  line-height: var(--t-small-lh);
  text-wrap: pretty;
  margin: 0;
}
.sx-micro {
  font-family: var(--font-body);
  font-size: var(--t-micro);
  line-height: var(--t-micro-lh);
  margin: 0;
}
.sx-caption {
  font-family: var(--font-body);
  font-size: var(--t-caption);
  line-height: var(--t-caption-lh);
  letter-spacing: var(--t-caption-tr);
  margin: 0;
}
/* The detection label. A solid tag, the way an annotated frame labels a box —
   the device is drawn, never typed as [ ] punctuation. Sentence case. */
.sx-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  line-height: var(--t-eyebrow-lh);
  letter-spacing: var(--t-eyebrow-tr);
  font-weight: 500;
  color: var(--sx-accent-ink);
  background: var(--sx-accent);
  padding: 3px 9px;
  border-radius: 2px;
  margin: 0;
}
/* Quiet variant: no fill, a short leader rule instead. For dense pages and
   any surface already carrying an Annotate frame. */
.sx-eyebrow--quiet {
  background: none;
  color: var(--text-accent);
  padding: 0;
}
.sx-eyebrow--quiet::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  background: currentColor;
  vertical-align: 0.32em;
  margin-right: 9px;
}
.sx-num {
  font-variant-numeric: tabular-nums;
}