/* =================================================================
   typography.css — TYPE SYSTEM

   Classes, not element selectors. `.fb-h1` on a <h2> is fine and
   often correct: heading level is document structure, visual size is
   design. Keeping them independent means the redesign never has to
   choose between looking right and being accessible.
   ================================================================= */

/* -----------------------------------------------------------------
   HEADINGS
   ----------------------------------------------------------------- */
.fb-h1,.fb-h2,.fb-h3,.fb-h4{
  font-family:var(--fb-font-display);
  color:var(--fb-secondary);
  margin:0;
  text-wrap:balance;          /* stops one-word orphan lines */
}

.fb-h1{
  font-variation-settings:var(--fb-vf-display);
  font-weight:var(--fb-weight-black);
  font-size:var(--fb-text-3xl);
  line-height:var(--fb-leading-tight);
  letter-spacing:var(--fb-tracking-tight);
}
.fb-h2{
  font-variation-settings:var(--fb-vf-display);
  font-weight:var(--fb-weight-black);
  font-size:var(--fb-text-2xl);
  line-height:var(--fb-leading-tight);
  letter-spacing:-.02em;
}
.fb-h3{
  font-variation-settings:var(--fb-vf-heading);
  font-weight:var(--fb-weight-bold);
  font-size:var(--fb-text-lg);
  line-height:var(--fb-leading-snug);
  letter-spacing:-.015em;
}
.fb-h4{
  font-variation-settings:var(--fb-vf-heading);
  font-weight:var(--fb-weight-bold);
  font-size:var(--fb-text-md);
  line-height:var(--fb-leading-snug);
}

/* -----------------------------------------------------------------
   BODY
   ----------------------------------------------------------------- */
.fb-body,.fb-body-lg,.fb-body-sm{
  font-family:var(--fb-font-body);
  color:var(--fb-text);
  margin:0;
}
.fb-body-lg{font-size:var(--fb-text-md);line-height:var(--fb-leading-normal);font-weight:var(--fb-weight-medium)}
.fb-body{font-size:var(--fb-text-base);line-height:var(--fb-leading-normal)}
.fb-body-sm{font-size:14.5px;line-height:var(--fb-leading-normal)}

.fb-lead{                       /* the sentence under a headline */
  font-family:var(--fb-font-body);
  font-size:var(--fb-text-md);
  font-weight:var(--fb-weight-semi);
  line-height:var(--fb-leading-normal);
  color:var(--fb-secondary);
  margin:0;
  opacity:.85;
}

/* -----------------------------------------------------------------
   SMALL PRINT
   ----------------------------------------------------------------- */
.fb-small{
  font-family:var(--fb-font-body);
  font-size:var(--fb-text-sm);
  line-height:var(--fb-leading-normal);
  color:var(--fb-text-muted);
  margin:0;
}
.fb-caption{
  font-family:var(--fb-font-body);
  font-size:var(--fb-text-xs);
  line-height:var(--fb-leading-snug);
  color:var(--fb-text-subtle);
  margin:0;
}
.fb-fine{                       /* legal / disclaimer */
  font-family:var(--fb-font-body);
  font-size:var(--fb-text-2xs);
  line-height:var(--fb-leading-relaxed);
  color:var(--fb-secondary);
  opacity:.75;
  margin:0;
}

/* -----------------------------------------------------------------
   LABELS + EYEBROWS — the mono, uppercase, letterspaced style used
   for step labels, section kickers and unit captions.
   ----------------------------------------------------------------- */
.fb-label{
  font-family:var(--fb-font-body);
  font-size:var(--fb-text-base);
  font-weight:var(--fb-weight-bold);
  line-height:var(--fb-leading-snug);
  color:var(--fb-text);
  display:block;
  margin:0;
}
.fb-eyebrow{
  font-family:var(--fb-font-mono);
  font-size:var(--fb-text-3xs);
  font-weight:var(--fb-weight-semi);
  letter-spacing:var(--fb-tracking-caps);
  text-transform:uppercase;
  color:var(--fb-secondary);
  opacity:.85;
  margin:0;
}

/* -----------------------------------------------------------------
   METRIC NUMBERS
   Tabular figures so a counting animation doesn't make the layout
   jitter as digit widths change.
   ----------------------------------------------------------------- */
.fb-metric,.fb-metric-lg,.fb-metric-sm{
  font-family:var(--fb-font-mono);
  font-variant-numeric:tabular-nums;
  font-weight:var(--fb-weight-semi);
  letter-spacing:-.02em;
  line-height:1.05;
  color:var(--fb-text);
  display:block;
}
.fb-metric-lg{font-size:var(--fb-text-metric)}
.fb-metric{font-size:25px}
.fb-metric-sm{font-size:var(--fb-text-md)}

.fb-metric-unit{                /* the "/100" or "°F" after a number */
  font-family:var(--fb-font-mono);
  font-size:.55em;
  font-weight:var(--fb-weight-regular);
  color:var(--fb-text-muted);
  letter-spacing:0;
}

/* value colour by meaning */
.fb-metric-primary{color:var(--fb-primary-active)}
.fb-metric-accent{color:var(--fb-accent)}
.fb-metric-success{color:var(--fb-success)}
.fb-metric-warning{color:var(--fb-warning-strong)}
.fb-metric-danger{color:var(--fb-danger)}

/* -----------------------------------------------------------------
   DISPLAY EXTRAS
   ----------------------------------------------------------------- */
.fb-script{                     /* the handwritten accent line */
  font-family:var(--fb-font-hand);
  font-size:30px;
  font-weight:var(--fb-weight-bold);
  color:var(--fb-secondary);
  margin:0;
}
.fb-highlight{color:var(--fb-primary-active)}    /* inline emphasis in a headline */

/* -----------------------------------------------------------------
   TEXT UTILITIES
   ----------------------------------------------------------------- */
.fb-text-center{text-align:center}
.fb-text-left{text-align:left}
.fb-text-right{text-align:right}
.fb-text-muted{color:var(--fb-text-muted)}
.fb-text-subtle{color:var(--fb-text-subtle)}
.fb-text-inverse{color:var(--fb-text-inverse)}
.fb-text-primary{color:var(--fb-primary-active)}
.fb-text-secondary{color:var(--fb-secondary)}
.fb-text-success{color:var(--fb-success-strong)}
.fb-text-warning{color:var(--fb-warning-strong)}
.fb-text-danger{color:var(--fb-danger-strong)}
.fb-nowrap{white-space:nowrap}
.fb-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}