/* Fernando Kylas Brand System. typography.css
   Rules only: the reasoning is in the repository, at lab/publication-engine/platform/design-system/css/typography.css.
   Nothing else is altered. No value, selector or declaration differs
   from source. See publications/brand-system/build/assemble.py. */
.fk-display {
  font-family: var(--fk-font-display);
  font-weight: var(--fk-display-weight);
  font-size: var(--fk-display-size);
  line-height: var(--fk-display-lh);
  letter-spacing: var(--fk-display-track);
  color: var(--fk-text-primary);
  text-wrap: balance;
}

.fk-report-title {
  font-family: var(--fk-font-display);
  font-weight: var(--fk-report-title-weight);
  font-size: var(--fk-report-title-size);
  line-height: var(--fk-report-title-lh);
  letter-spacing: var(--fk-report-title-track);
  color: var(--fk-text-primary);
  text-wrap: balance;
}

.fk-report-subtitle {
  font-family: var(--fk-font-text);
  font-weight: var(--fk-lead-weight);
  font-size: var(--fk-lead-size);
  line-height: var(--fk-lead-lh);
  letter-spacing: var(--fk-lead-track);
  color: var(--fk-text-secondary);
  max-width: var(--fk-measure-lead);
  text-wrap: pretty;
}

.fk-section-title {
  font-family: var(--fk-font-display);
  font-weight: var(--fk-section-title-weight);
  font-size: var(--fk-section-title-size);
  line-height: var(--fk-section-title-lh);
  letter-spacing: var(--fk-section-title-track);
  color: var(--fk-text-primary);
  text-wrap: balance;
}

.fk-subsection-title {
  font-family: var(--fk-font-text);
  font-weight: var(--fk-subsection-weight);
  font-size: var(--fk-subsection-size);
  line-height: var(--fk-subsection-lh);
  letter-spacing: var(--fk-subsection-track);
  color: var(--fk-text-primary);
}

.fk-card-title {
  font-family: var(--fk-font-text);
  font-weight: var(--fk-card-title-weight);
  font-size: var(--fk-card-title-size);
  line-height: var(--fk-card-title-lh);
  letter-spacing: var(--fk-card-title-track);
  color: var(--fk-text-primary);
}

.fk-quote {
  font-family: var(--fk-font-display);
  font-weight: var(--fk-quote-weight);
  font-size: var(--fk-quote-size);
  line-height: var(--fk-quote-lh);
  letter-spacing: var(--fk-quote-track);
  color: var(--fk-text-primary);
  max-width: var(--fk-measure-wide);
  hanging-punctuation: first;
  text-wrap: pretty;
}

.fk-lead {
  font-family: var(--fk-font-text);
  font-weight: var(--fk-lead-weight);
  font-size: var(--fk-lead-size);
  line-height: var(--fk-lead-lh);
  letter-spacing: var(--fk-lead-track);
  color: var(--fk-text-secondary);
  max-width: var(--fk-measure-lead);
  text-wrap: pretty;
}
.fk-body-l {
  font-size: var(--fk-body-l-size);
  line-height: var(--fk-body-l-lh);
  letter-spacing: var(--fk-body-l-track);
  font-weight: var(--fk-body-l-weight);
  max-width: var(--fk-measure);
}
.fk-body {
  font-size: var(--fk-body-size);
  line-height: var(--fk-body-lh);
  letter-spacing: var(--fk-body-track);
  font-weight: var(--fk-body-weight);
  max-width: var(--fk-measure);
}
.fk-body-s {
  font-size: var(--fk-body-s-size);
  line-height: var(--fk-body-s-lh);
  letter-spacing: var(--fk-body-s-track);
  font-weight: var(--fk-body-s-weight);
}

.fk-caption {
  font-size: var(--fk-caption-size);
  line-height: var(--fk-caption-lh);
  letter-spacing: var(--fk-caption-track);
  font-weight: var(--fk-caption-weight);
  color: var(--fk-text-tertiary);
}
.fk-metadata {
  font-size: var(--fk-caption-size);
  line-height: var(--fk-caption-lh);
  letter-spacing: 0.006em;
  font-weight: var(--fk-caption-weight);
  color: var(--fk-text-tertiary);
}
.fk-footnote {
  font-size: var(--fk-footnote-size);
  line-height: var(--fk-footnote-lh);
  letter-spacing: var(--fk-footnote-track);
  font-weight: var(--fk-footnote-weight);
  color: var(--fk-text-tertiary);
}
.fk-label {
  display: inline-block;
  font-family: var(--fk-font-text);
  font-size: var(--fk-label-size);
  line-height: var(--fk-label-lh);
  letter-spacing: var(--fk-label-track);
  font-weight: var(--fk-label-weight);
  text-transform: uppercase;
  color: var(--fk-text-tertiary);
}

.fk-metric-value {
  font-family: var(--fk-font-text);
  font-weight: var(--fk-metric-weight);
  font-size: var(--fk-metric-size);
  line-height: var(--fk-metric-lh);
  letter-spacing: var(--fk-metric-track);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--fk-text-primary);
}
.fk-metric-value--lg {
  font-size: var(--fk-metric-lg-size);
  line-height: var(--fk-metric-lg-lh);
  letter-spacing: var(--fk-metric-lg-track);
}
.fk-metric-label {
  font-family: var(--fk-font-text);
  font-size: var(--fk-label-size);
  line-height: var(--fk-label-lh);
  letter-spacing: var(--fk-label-track);
  font-weight: var(--fk-label-weight);
  text-transform: uppercase;
  color: var(--fk-text-tertiary);
}

.fk-text-secondary { color: var(--fk-text-secondary); }
.fk-text-tertiary  { color: var(--fk-text-tertiary); }
.fk-text-primary   { color: var(--fk-text-primary); }

.fk-optical { margin-left: -0.022em; }

.fk-reading        { --fk-measure-context: var(--fk-measure);      max-width: var(--fk-measure-context); }
.fk-reading--lead  { --fk-measure-context: var(--fk-measure-lead); max-width: var(--fk-measure-context); }
.fk-reading--wide  { --fk-measure-context: var(--fk-measure-wide); max-width: var(--fk-measure-context); }

.fk-reading--full  { --fk-measure-context: none; }

.fk-prose { --fk-measure-context: var(--fk-measure); max-width: var(--fk-measure-context); }

:is(.fk-prose, .fk-flow) > * + * { margin-top: var(--fk-flow); }
:is(.fk-prose, .fk-flow) > * + :is(h2, h3, h4, .fk-section-title, .fk-subsection-title, .fk-card-title) {
  margin-top: var(--fk-space-8);
}

:is(.fk-prose, .fk-flow) :is(h2, h3, h4) + * { margin-top: var(--fk-heading-gap); }
:is(.fk-prose, .fk-flow) :is(ul, ol) { margin-top: var(--fk-flow); }

@media (max-width: 1024px) {
  :root {
    --fk-display-size:       3.25rem;
    --fk-report-title-size:  2.5rem;
    --fk-section-title-size: 2rem;
    --fk-metric-lg-size:     3.5rem;
  }
}

@media (max-width: 768px) {
  :root {
    --fk-display-size:       2.75rem;
    --fk-display-track:      -0.022em;
    --fk-report-title-size:  2.25rem;
    --fk-report-title-track: -0.016em;
    --fk-section-title-size: 1.75rem;
    --fk-section-title-track:-0.012em;
    --fk-quote-size:         1.625rem;
    --fk-metric-size:        2.5rem;
    --fk-metric-lg-size:     3rem;
  }

  .fk-optical { margin-left: 0; }
}

@media (max-width: 480px) {
  :root {
    --fk-display-size:       2.25rem;
    --fk-report-title-size:  1.875rem;
    --fk-report-title-track: -0.012em;
    --fk-section-title-size: 1.5rem;
    --fk-section-title-track:-0.006em;
    --fk-lead-size:          1.1875rem;
    --fk-quote-size:         1.5rem;
  }
}