:root {
  /* Two families only. Serif carries voice, sans carries structure. */
  --kb-font-voice: "Source Serif 4", Georgia, "Times New Roman", serif;
  --kb-font-structure: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Five-step scale only. The px values are the design system spec at desktop;
     the clamp lower bounds keep long headlines inside the first viewport on
     small screens without introducing a sixth step. */
  --kb-size-label: 12px;
  --kb-size-body: 17px;
  --kb-size-lead: clamp(19px, 1.4vw + 14px, 22px);
  --kb-size-section: clamp(30px, 3.2vw + 12px, 40px);
  --kb-size-page: clamp(40px, 6.4vw + 8px, 72px);

  /* Display sits tight. Body stays comfortable. */
  --kb-leading-page: 1.05;
  --kb-leading-section: 1.15;
  --kb-leading-lead: 1.45;
  --kb-leading-body: 1.65;

  --kb-track-label: 0.14em;

  /* The serif is never bolded. These are the only weights in use. */
  --kb-weight-voice-light: 300;
  --kb-weight-voice-regular: 400;
  --kb-weight-structure: 500;
  --kb-weight-structure-strong: 600;
}

.kb-page,
.kb-page p,
.kb-page li {
  font-family: var(--kb-font-voice);
  font-size: var(--kb-size-body);
  font-weight: var(--kb-weight-voice-regular);
  line-height: var(--kb-leading-body);
  color: var(--kb-text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.kb-page h1,
.kb-page h2,
.kb-page h3,
.kb-page h4 {
  font-family: var(--kb-font-voice);
  font-weight: var(--kb-weight-voice-light);
  color: var(--kb-text-body);
  margin: 0;
  text-wrap: balance;
}

.kb-page h1 {
  font-size: var(--kb-size-page);
  line-height: var(--kb-leading-page);
}

.kb-page h2 {
  font-size: var(--kb-size-section);
  line-height: var(--kb-leading-section);
}

.kb-page h3 {
  font-size: var(--kb-size-lead);
  line-height: var(--kb-leading-lead);
}

/* The lead paragraph under a title. */
.kb-lead {
  font-size: var(--kb-size-lead);
  line-height: var(--kb-leading-lead);
  color: var(--kb-text-soft);
  max-width: var(--kb-measure-prose);
  text-wrap: pretty;
}

/* Letterspaced uppercase labels are the only uppercase on the site,
   and the only place letterspacing is used. */
.kb-label,
.kb-eyebrow {
  font-family: var(--kb-font-structure);
  font-size: var(--kb-size-label);
  font-weight: var(--kb-weight-structure-strong);
  letter-spacing: var(--kb-track-label);
  text-transform: uppercase;
  color: var(--kb-text-secondary);
  margin: 0;
}

/* The eyebrow carries a short bronze rule. Rationed to one per three sections. */
.kb-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--kb-space-sm);
  color: var(--kb-accent);
}

.kb-eyebrow::before {
  content: "";
  inline-size: 24px;
  block-size: 1px;
  background: var(--kb-accent);
  flex: none;
}

/* Nav, captions, specifications and buttons take the sans. */
.kb-structure {
  font-family: var(--kb-font-structure);
  font-weight: var(--kb-weight-structure);
}

/* Prose measure keeps a line near 65 characters. */
.kb-prose {
  max-width: var(--kb-measure-prose);
}

.kb-prose > * + * {
  margin-block-start: var(--kb-space-md);
}