.f12 .f12-section-header {
  font-family: var(--f12-font-family-sans);
  font-weight: var(--f12-font-weight-bold);
  color: var(--f12-color-text-muted);
}

.f12 .f12-section-header.f12-eyebrow {
  font-size: var(--f12-font-size-sm);
  text-transform: uppercase;
  letter-spacing: var(--f12-letter-spacing-editorial);
}

.f12 :is(.f12-eyebrow, .f12-eyebrow--section, .f12-eyebrow--card, .f12-eyebrow--group) {
  font-family: var(--f12-font-family-sans);
  font-size: var(--f12-font-size-xs);
  font-weight: var(--f12-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--f12-letter-spacing-caps);
  line-height: var(--f12-line-height-tight);
  color: var(--f12-color-text-muted);
}

.f12 .f12-eyebrow--section {
  font-size: var(--f12-font-size-2xs);
  color: var(--f12-color-brand-editorial);
  letter-spacing: var(--f12-letter-spacing-editorial);
}

.f12 .f12-eyebrow--card {
  font-size: var(--f12-font-size-2xs);
  letter-spacing: var(--f12-letter-spacing-editorial);
  color: var(--f12-color-brand-editorial);
}

.f12 .f12-eyebrow--group {
  font-family: var(--f12-font-family-sans);
  font-size: var(--f12-font-size-2xs);
  color: var(--f12-color-text-muted);
  font-weight: var(--f12-font-weight-bold);
  letter-spacing: var(--f12-letter-spacing-caps);
  text-transform: uppercase;
  line-height: var(--f12-line-height-tight);
}

.f12 .f12-eyebrow--accent {
  color: var(--f12-color-brand-editorial);
}

.f12 .f12-eyebrow--muted {
  color: var(--f12-color-text-muted);
}

.f12 .f12-eyebrow--on-dark {
  color: var(--f12-text-style-hero-excerpt-color);
}

.f12 .f12-on-dark {
  --f12-color-text-heading: var(--f12-color-text-on-dark);
  --f12-color-text-primary: var(--f12-color-text-on-dark);
  --f12-color-text-muted: rgba(255, 255, 255, 0.9);
  --f12-color-border-subtle: var(--f12-color-border-on-dark);
}

.f12 .f12-on-dark .f12-title {
  color: var(--f12-color-text-heading);
}

.f12 .f12-title {
  font-family: var(--f12-font-family-sans);
  color: var(--f12-color-text-heading);
  font-weight: var(--f12-font-weight-bold);
  letter-spacing: var(--f12-letter-spacing-tight);
  line-height: var(--f12-line-height-tight);
}

.f12 .f12-title--sm {
  font-size: var(--f12-text-style-heading-sm-size);
  line-height: var(--f12-text-style-heading-sm-line-height);
  font-weight: var(--f12-text-style-heading-sm-font-weight);
  letter-spacing: var(--f12-text-style-heading-sm-letter-spacing);
}

.f12 .f12-title--md {
  font-size: var(--f12-text-style-heading-md-size);
  line-height: var(--f12-text-style-heading-md-line-height);
  font-weight: var(--f12-text-style-heading-md-font-weight);
  letter-spacing: var(--f12-text-style-heading-md-letter-spacing);
}

.f12 .f12-title--lg {
  font-size: var(--f12-text-style-heading-lg-size);
  line-height: var(--f12-text-style-heading-lg-line-height);
  font-weight: var(--f12-text-style-heading-lg-font-weight);
  letter-spacing: var(--f12-text-style-heading-lg-letter-spacing);
}

.f12 .f12-title--xl {
  font-size: var(--f12-text-style-heading-xl-size);
  line-height: var(--f12-text-style-heading-xl-line-height);
  font-weight: var(--f12-text-style-heading-xl-font-weight);
  letter-spacing: var(--f12-text-style-heading-xl-letter-spacing);
}

.f12 .f12-body {
  font-family: var(--f12-font-family-sans);
  font-size: var(--f12-text-style-body-md-size);
  font-weight: var(--f12-text-style-body-md-font-weight);
  line-height: var(--f12-text-style-body-md-line-height);
  color: var(--f12-color-text-primary);
}

.f12 .f12-body--sm {
  font-size: var(--f12-text-style-body-sm-size);
  font-weight: var(--f12-text-style-body-sm-font-weight);
  line-height: var(--f12-text-style-body-sm-line-height);
}

.f12 .f12-body--muted {
  color: var(--f12-text-style-body-muted-color);
}

.f12 .f12-body--hero {
  font-size: var(--f12-text-style-hero-excerpt-size);
  line-height: var(--f12-text-style-hero-excerpt-line-height);
}

.f12 .f12-on-dark .f12-body--hero {
  color: var(--f12-text-style-hero-excerpt-color);
}

.f12 h2.f12-share-dialog__title {
  font-family: var(--f12-font-family-sans);
  font-size: var(--f12-text-style-heading-sm-size);
  font-weight: var(--f12-text-style-heading-sm-font-weight);
  line-height: var(--f12-text-style-heading-sm-line-height);
  letter-spacing: var(--f12-text-style-heading-sm-letter-spacing);
  color: var(--f12-color-text-heading);
}

.f12 input.f12-share-dialog__url-input {
  font-family: var(--f12-font-family-sans);
  font-size: var(--f12-text-style-body-sm-size);
  font-weight: var(--f12-text-style-body-sm-font-weight);
  line-height: var(--f12-text-style-body-sm-line-height);
  color: var(--f12-color-text-primary);
}