/* Typekit — the type system for the site. Nothing outside this file sets a font family,
   size, weight, line height or tracking. Everything else applies a t- class, or reads a
   token from here when it cannot (canvas text, for instance).

   The scale has one rule behind it: tracking tightens as size grows. Whyte Inktrap is an
   inktrap display face and wants to be set close at large sizes; Diatype is a grotesque
   that holds at text sizes and needs less help. That is why nothing here is a round
   number pulled from a chart — each value is what the two faces actually want. */

:root{
  --font-display:"ABC Whyte Inktrap","ABC Favorit",Arial,Helvetica,sans-serif;
  --font-text:"ABC Diatype","ABC Favorit",Arial,Helvetica,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Canvas has no cascade, so text drawn there reads this shorthand instead of a class. At 24px
     rather than 14 the diverging/converging readout is the second thing on the page you notice,
     which is the point of it: it is what teaches the band's model, and it only ever appears under
     a pointer that has just done the thing it names. It stays in Diatype — it is a live readout,
     not a heading, and the display face would make it an announcement. */
  --t-canvas-label:500 24px/1 "ABC Diatype",Arial,Helvetica,sans-serif;
}

/* Display — Whyte Inktrap Medium. The only weight of it the site uses. */
/* Bigger than anything the site sets in normal reading, because the opening screen is one
   sentence and nothing else; tracking tightens again at that size, as it does all the way up. */
.t-boot{font-family:var(--font-display);font-weight:500;font-size:clamp(15px,5.3vw,34px);line-height:1.1;letter-spacing:-.036em}
.t-display{font-family:var(--font-display);font-weight:500;font-size:clamp(28px,4.2vw,42px);line-height:1.08;letter-spacing:-.045em}
/* Fluid for the same reason t-display is: a fixed 32px meant the length of the homepage's
   sentence decided how wide its card had to be, which is the layout taking orders from the
   copy. 32px from 1440 up, easing to 26px by 840. */
.t-title{font-family:var(--font-display);font-weight:500;font-size:clamp(26px,1vw + 17.6px,32px);line-height:1.22;letter-spacing:-.05em}
.t-heading{font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1.2;letter-spacing:-.04em}
.t-sub{font-family:var(--font-display);font-weight:500;font-size:19px;line-height:1.25;letter-spacing:-.035em}

/* Text — Diatype. Medium for interface copy, Regular where there is enough of it to read. */
.t-body{font-family:var(--font-text);font-weight:500;font-size:16px;line-height:1.25;letter-spacing:-.04em}
.t-read{font-family:var(--font-text);font-weight:400;font-size:15px;line-height:1.45;letter-spacing:-.02em}
.t-small{font-family:var(--font-text);font-weight:500;font-size:14px;line-height:1.35;letter-spacing:-.03em}
.t-micro{font-family:var(--font-text);font-weight:500;font-size:12px;line-height:1.25;letter-spacing:-.04em}
/* The one place tracking opens rather than tightens: small caps need the air. */
.t-eyebrow{font-family:var(--font-text);font-weight:500;font-size:12px;line-height:1.2;letter-spacing:.06em;text-transform:uppercase}
.t-mono{font-family:var(--font-mono);font-size:.88em;letter-spacing:0}

/* Two modifiers, because they are type decisions rather than layout ones. */
.t-measure{max-width:62ch}
.t-balance{text-wrap:balance}