/* Type scale: one class per Figma style (Figma page 3, "Type Scale"). Use the class, not the tag, so semantics and look stay independent.
   Sizes shown are the Figma desktop sizes at 1728px; H1, H2 and H3 scale down with the window. */
.t-h1 { font: 400 var(--fs-h1)/var(--lh-h1) var(--font-display); }                                          /* H1: 5th Avenue Regular 88 / 90 */
.t-h2 { font: var(--weight-light) var(--fs-h2)/var(--lh-h2) var(--font-text); }                             /* H2: IBM Plex Sans Light 54 / 60 */
.t-h2-display { font: 400 var(--fs-h2)/var(--lh-h2) var(--font-display); }                                  /* H2: 5th Avenue 54 / 60 */
.t-h3 { font: 400 var(--fs-h3)/var(--lh-h3) var(--font-display); }                                          /* H3: 5th Avenue 26 / 32 */
/* The 5th Avenue WEB font's built-in line spacing (ascent 1.395em, descent 0.69em) is nothing like the old desktop file's (0.75 / 0.25). Safari draws the text-selection highlight from that spacing, so on these
   headlines the highlight came out far too tall and shifted up over the lines above. Safari cannot correct a font's metrics, so the 5th Avenue headlines are simply not selectable (body copy still is).
   To make them selectable again: delete this rule, once the font's vertical metrics have been corrected. */
.t-h1, .t-h2-display, .t-h3 { -webkit-user-select: none; user-select: none; }
.t-h4 { font: var(--weight-semibold) var(--fs-h4)/var(--lh-h4) var(--font-text); }                          /* H4: IBM Plex Sans SemiBold 20 / 26 */
.t-h4-light { font: var(--weight-light) var(--fs-h4)/var(--lh-h4) var(--font-text); }                       /* H4: IBM Plex Sans Light 20 / 26 */
.t-subtitle { font: var(--weight-medium) var(--fs-subtitle)/var(--lh-subtitle) var(--font-text); }                 /* Subtitle: IBM Plex Sans Medium 18 / 28 */
.t-body-bold { font: var(--weight-semibold) var(--fs-body)/var(--lh-body) var(--font-text); }               /* Body Bold: IBM Plex Sans SemiBold 16 / 26 */
.t-body { font: var(--weight-regular) var(--fs-body)/var(--lh-body) var(--font-text); }                     /* Body: IBM Plex Sans Regular 16 / 26 */
.t-cta { font: var(--weight-bold) var(--fs-cta)/var(--lh-normal) var(--font-text); }                         /* CTA: IBM Plex Sans Bold 16 */
.t-stat { font: var(--weight-thin) var(--fs-stat)/var(--lh-normal) var(--font-text); }                           /* Number Stat: IBM Plex Sans Thin 64, auto line */

/* bold run-in words inside body text (e.g. "Pixel Dandy" starting a paragraph) */
.t-body strong { font-weight: var(--weight-semibold); }

/* Forced Title Case (every word capitalised) is only for the 5th Avenue headlines (H1 and the 5th Avenue H2, .t-h2-display) and CTAs. The IBM Plex H2 (.t-h2) and everything else shows exactly as typed. */
.t-h1, .t-h2-display, .t-cta { text-transform: capitalize; }

/* Display headlines hang slightly high without this; matches Figma's cap-height trim */
.t-h1, .t-h2, .t-h2-display, .t-h3, .t-stat { text-box: trim-both cap alphabetic; }

/* A hard return that only happens on a computer: <br class="br-desktop"> (write a space before it). On phones (<= 700px) the line flows on as one. */
@media (max-width: 700px) { br.br-desktop { display: none; } }