/* ==========================================================================
   TYPE SCALE — Web Style Guide v1, page 04
   Display/overlay styles are uppercased in CSS; write real sentences in the DOM.
   ========================================================================== */

/* Display */
.display-xl { font-family: var(--font-sans); font-size: 96px; line-height: 86px; font-weight: 900; letter-spacing: -0.01em; text-transform: uppercase; }
.display    { font-family: var(--font-sans); font-size: 64px; line-height: 58px; font-weight: 900; letter-spacing: -0.01em; text-transform: uppercase; }
.display-sm { font-family: var(--font-sans); font-size: 40px; line-height: 38px; font-weight: 900; text-transform: uppercase; }

/* Headings */
.heading-lg { font-family: var(--font-sans); font-size: 32px; line-height: 36px; font-weight: 700; }
.heading    { font-family: var(--font-sans); font-size: 24px; line-height: 28px; font-weight: 700; }
.heading-sm { font-family: var(--font-sans); font-size: 19px; line-height: 24px; font-weight: 700; }

/* Text */
.body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 400; }
.body    { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }
.eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.button  { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

/* Overlay */
.overlay-title { font-family: var(--font-sans); font-size: 56px; line-height: 50px; font-weight: 900; text-transform: uppercase; }
.overlay-line  { font-family: var(--font-sans); font-size: 44px; line-height: 46px; font-weight: 400; }

/* Condensed */
.condensed-display { font-family: var(--font-condensed); font-size: 64px; line-height: 58px; font-weight: 900; text-transform: uppercase; }
.condensed-heading { font-family: var(--font-condensed); font-size: 28px; line-height: 30px; font-weight: 700; }

/* Display type steps down on narrow screens. Ratios from the scale are preserved. */
@media (max-width: 900px) {
  .display-xl { font-size: 64px; line-height: 58px; }
  .display    { font-size: 48px; line-height: 44px; }
}
@media (max-width: 560px) {
  .display-xl { font-size: 48px; line-height: 44px; }
  .display    { font-size: 36px; line-height: 34px; }
  .display-sm { font-size: 30px; line-height: 30px; }
  .overlay-title { font-size: 36px; line-height: 34px; }
}