/* The landing page's type system (landing.html and usage/landing.html only; the shared pages
   keep next.css). Seven sizes, each with one role, so a level reads at a glance: label 12,
   UI 14, body 16, then lead, subhead, headline and display, fluid from a 390px phone to a
   1440px desktop. Hanken Grotesk sets every role but code; its figures are lining and
   tabular at every weight (each digit 0.56em wide), so columns of numbers align with no
   feature switched on. It has no optical-size axis, so tracking steps with size instead:
   tighter as the type grows, open on small labels. Code (house tickers, the tagline chips,
   the market board) is IBM Plex Mono at one weight, the file the app already serves, in
   place of whatever monospace the visitor's system had. It is not preloaded: a preload
   delayed first paint on a slow connection, while the late swap measured no layout shift
   (the tape starts below the fold and the chips keep their line). docs/brand.md, "Type". */
@font-face {
  /* One weight for code on the landing: the face covers every requested weight with its 500
     outlines, so a bold request never draws a synthesised bold. */
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/static/ibm-plex-mono-500.woff2?v=01d28544') format('woff2');
}
:root {
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  /* Sizes. */
  --fs-label: 0.75rem;                                       /* 12: kickers, captions, codes */
  --fs-ui: 0.875rem;                                         /* 14: controls, figure labels */
  --fs-body: 1rem;                                           /* 16: reading */
  --fs-lead: clamp(1.0625rem, 0.993rem + 0.286vw, 1.25rem);  /* 17 to 20: standfirsts */
  --fs-h3: clamp(1.25rem, 1.1575rem + 0.381vw, 1.5rem);      /* 20 to 24: subheads */
  --fs-h2: clamp(1.875rem, 1.504rem + 1.524vw, 2.875rem);    /* 30 to 46: headlines, key figures */
  --fs-display: clamp(2.5rem, 2.036rem + 1.905vw, 3.75rem);  /* 40 to 60: the hero and the close */
  /* Leading: tight for display, generous for reading. */
  --lh-display: 1.04;
  --lh-h2: 1.08;
  --lh-h3: 1.2;
  --lh-figure: 1;
  --lh-lead: 1.5;
  --lh-body: 1.6;
  --lh-ui: 1.45;
  --lh-label: 1.35;
  /* Tracking, in place of optical sizes. */
  --tr-display: -0.034em;
  --tr-h2: -0.025em;
  --tr-figure: -0.03em;
  --tr-h3: -0.012em;
  --tr-label: 0.01em;
  /* Measures: about 65 characters of body, 50 of lead, 85 of small caption. */
  --measure: 70ch;
  --measure-lead: 52ch;
  --measure-caption: 90ch;
}

body { font-size: var(--fs-body); line-height: var(--lh-body); font-variant-numeric: lining-nums tabular-nums; }
:is(h1, h2, h3) { text-wrap: balance; }
:is(p, li, figcaption, dd) { text-wrap: pretty; }
:is(figcaption, .hf-basis) { text-wrap: balance; }

/* Roles that next.css defines for every page, set to this scale here. */
.display { font-size: var(--fs-display); font-weight: 600; line-height: var(--lh-display); letter-spacing: var(--tr-display); }
.headline { font-size: var(--fs-h2); font-weight: 500; line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
.standfirst { max-width: var(--measure-lead); font-size: var(--fs-lead); font-weight: 300; line-height: var(--lh-lead); }
.kicker { padding: 0.4rem 0.75rem; font-size: var(--fs-label); font-weight: 600; line-height: var(--lh-label); letter-spacing: var(--tr-label); }
.small { font-size: var(--fs-label); }

/* Links in running text: a thin underline set below the descenders, full strength on hover. */
main a:not([class]) { text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
main a:not([class]):hover { text-decoration-color: currentColor; }