/* Type roles. Last updated: September 11, 2026.
   Shared by the website and guidelines specimens. Palette remains in colors_and_type.css.
   H1–H4 name visual styles; use semantic HTML heading levels for the document outline. */
:root {
  --kl-type-lead-size: clamp(18px, calc(16px + .625vw), 24px);
  --kl-type-lead-weight: var(--kl-fw-light);
  --kl-type-lead-line: var(--kl-lh-body);
  --kl-type-text-lg-size: var(--kl-type-lead-size);
  --kl-type-text-lg-weight: var(--kl-type-lead-weight);
  --kl-type-text-lg-line: var(--kl-type-lead-line);
  --kl-type-h1-size: clamp(48px, 11vw, 131px);
  --kl-type-h1-weight: var(--kl-fw-semibold);
  --kl-type-h1-line: var(--kl-lh-tight);
  --kl-type-h1-tracking: 0;
  --kl-type-h2-size: clamp(22px, 2.4vw, 30px);
  --kl-type-h2-weight: var(--kl-fw-bold);
  --kl-type-h2-line: var(--kl-lh-body);
  --kl-type-h2-tracking: 0;
  --kl-type-h4-size: clamp(14px, 1.4vw, 18px);
  --kl-type-h4-weight: var(--kl-fw-bold);
  --kl-type-h4-line: var(--kl-lh-summary);
  --kl-type-h4-tracking: var(--kl-ls-summary);
  --kl-type-body-size: var(--kl-type-body);
  --kl-type-body-weight: var(--kl-fw-light);
  --kl-type-body-line: var(--kl-lh-body);
  --kl-type-body-tracking: 0;
  --kl-type-text-sm-size: var(--kl-type-label);
  --kl-type-text-sm-weight: var(--kl-fw-light);
  --kl-type-text-sm-line: var(--kl-lh-body);
  --kl-type-text-sm-tracking: 0;
  --kl-type-text-md-size: var(--kl-type-body);
  --kl-type-text-md-weight: var(--kl-fw-light);
  --kl-type-text-md-line: var(--kl-lh-body);
  --kl-type-text-md-tracking: 0;
  --kl-type-meta-size: var(--kl-type-footer);
  --kl-type-meta-weight: var(--kl-fw-bold);
  --kl-type-meta-line: var(--kl-lh-body);
  --kl-type-meta-tracking: var(--kl-ls-summary);
  --kl-type-button-size: var(--kl-type-label);
  --kl-type-button-weight: var(--kl-fw-bold);
  --kl-type-button-line: var(--kl-lh-label);
  --kl-type-button-tracking: var(--kl-ls-label);
  --kl-type-menu-size: var(--kl-type-label);
  --kl-type-menu-weight: var(--kl-fw-bold);
  --kl-type-menu-line: var(--kl-lh-label);
  --kl-type-menu-tracking: var(--kl-ls-label);
  --kl-type-eyebrow-size: clamp(14px, 1.6vw, 20px);
  --kl-type-eyebrow-weight: var(--kl-fw-heavy);
  --kl-type-eyebrow-line: var(--kl-lh-body);
  --kl-type-eyebrow-tracking: var(--kl-ls-label);
}

.type-h1, .hero__title {
  font-family: var(--kl-font);
  font-size: var(--kl-type-h1-size);
  font-weight: var(--kl-type-h1-weight);
  line-height: var(--kl-type-h1-line);
  letter-spacing: var(--kl-type-h1-tracking);
  text-transform: uppercase;
}

.type-h2, .section-heading {
  font-family: var(--kl-font);
  font-size: var(--kl-type-h2-size);
  font-weight: var(--kl-type-h2-weight);
  line-height: var(--kl-type-h2-line);
  letter-spacing: var(--kl-type-h2-tracking);
  text-transform: uppercase;
}


.type-h4, .credit summary {
  font-family: var(--kl-font);
  font-size: var(--kl-type-h4-size);
  font-weight: var(--kl-type-h4-weight);
  line-height: var(--kl-type-h4-line);
  letter-spacing: var(--kl-type-h4-tracking);
  text-transform: uppercase;
}


.type-body, body, .about__body p, .credit__content, .contact-block p:not(.contact-block__title) {
  font-family: var(--kl-font);
  font-size: var(--kl-type-body-size);
  font-weight: var(--kl-type-body-weight);
  line-height: var(--kl-type-body-line);
  letter-spacing: var(--kl-type-body-tracking);
  text-transform: none;
}

.type-text-sm {
  font-family: var(--kl-font);
  font-size: var(--kl-type-text-sm-size);
  font-weight: var(--kl-type-text-sm-weight);
  line-height: var(--kl-type-text-sm-line);
  letter-spacing: var(--kl-type-text-sm-tracking);
  text-transform: none;
}

.type-text-md {
  font-family: var(--kl-font);
  font-size: var(--kl-type-text-md-size);
  font-weight: var(--kl-type-text-md-weight);
  line-height: var(--kl-type-text-md-line);
  letter-spacing: var(--kl-type-text-md-tracking);
  text-transform: none;
}


.type-meta, .site-footer p {
  font-family: var(--kl-font);
  font-size: var(--kl-type-meta-size);
  font-weight: var(--kl-type-meta-weight);
  line-height: var(--kl-type-meta-line);
  letter-spacing: var(--kl-type-meta-tracking);
  text-transform: uppercase;
}

.type-button, .btn {
  font-family: var(--kl-font);
  font-size: var(--kl-type-button-size);
  font-weight: var(--kl-type-button-weight);
  line-height: var(--kl-type-button-line);
  letter-spacing: var(--kl-type-button-tracking);
  text-transform: uppercase;
}

.type-menu, .site-nav__list a {
  font-family: var(--kl-font);
  font-size: var(--kl-type-menu-size);
  font-weight: var(--kl-type-menu-weight);
  line-height: var(--kl-type-menu-line);
  letter-spacing: var(--kl-type-menu-tracking);
  text-transform: uppercase;
}

.type-eyebrow, .hero__eyebrow {
  font-family: var(--kl-font);
  font-size: var(--kl-type-eyebrow-size);
  font-weight: var(--kl-type-eyebrow-weight);
  line-height: var(--kl-type-eyebrow-line);
  letter-spacing: var(--kl-type-eyebrow-tracking);
  text-transform: uppercase;
}

/* Lead and Text LG are aliases; homepage About retains Body. */
.type-lead, .type-text-lg {
  font-family:var(--kl-font); font-size:var(--kl-type-lead-size);
  font-weight:var(--kl-type-lead-weight); line-height:var(--kl-type-lead-line);
  letter-spacing:0; text-transform:none;
}