/*
 * The type scale, as classes.
 *
 * Fraunces speaks for the brand; Hanken Grotesk does the work. The italic of
 * Fraunces is the "handwriting" — it signs captions and nothing else pretends
 * to be handwritten.
 */

/* ---- Display and headings --------------------------------------------- */

.t-hero {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.t-title {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.t-headline {
  font-family: var(--font-display);
  font-size: var(--text-headline);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

/* ---- Body -------------------------------------------------------------- */

.t-body-lg {
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
}

.t-body {
  font-size: var(--text-body);
  line-height: var(--leading-normal);
}

.t-fine {
  font-size: var(--text-fine);
  line-height: var(--leading-normal);
}

/* ---- The signature: a caption written in the margin -------------------- */

.t-caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--soft-ink);
}

/* ---- The eyebrow: a stamp, not a chip ---------------------------------- */

.t-label {
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--soft-ink);
}

/* ---- Colour and emphasis modifiers ------------------------------------- */

.t-soft {
  color: var(--soft-ink);
}

.t-gold {
  color: var(--gold);
}

.t-center {
  text-align: center;
}

/* Constrains prose to a comfortable measure and centres it in the column. */
.t-measure {
  max-width: var(--measure);
}

.t-measure--center {
  max-width: 34ch;
  margin-inline: auto;
}