/*
 * The type scale.
 *
 * The previous scale ran 52 / 20 / 17 / 16 / 14 / 13 / 10. Six of those seven
 * steps sat within a few pixels of each other, so nothing announced itself as
 * more important than anything else and the page read flat no matter what was
 * on it. This one is a major third, anchored on a 15px body, and the gaps are
 * wide enough to be seen rather than measured.
 *
 * There is no uppercase label class. Small caps above a heading is the most
 * common tell of a page nobody designed, and every place one stood here is
 * carried by size and colour instead.
 */

.t-display {
  font-size: 64px;
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.t-title {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.022em;
}

.t-subtitle {
  font-size: 20px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.012em;
}

.t-lead {
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.t-body {
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
}

.t-small {
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
}

.t-micro {
  font-size: 11px;
  line-height: 1.45;
  font-weight: 400;
}

/* Anything numeric is mono, so digits line up between rows and a price cannot
   change width as it ticks. */
.t-num {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.t-num-sm {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* Prose sets its own measure: past about 70 characters the eye loses the
   start of the next line. */
.t-measure {
  max-width: 62ch;
}

@media (max-width: 900px) {
  .t-display {
    font-size: 42px;
    letter-spacing: -0.03em;
  }
  .t-title {
    font-size: 24px;
  }
  .t-subtitle {
    font-size: 17px;
  }
}