/*
 * Two systems: an editorial display face pushed to extreme scale, and a
 * monospace face for every piece of technical metadata (dates, locations,
 * report numbers, captions). The contrast between the two is the signature
 * Za Report treatment -- keep it, don't soften it.
 */

.mono {
  font-family: var(--zr-font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--zr-muted);
}

h1, h2, h3, h4 {
  font-family: var(--zr-font-display);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.display-huge {
  font-size: clamp(3rem, 4vw + 2rem, 8.5rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
}

.display-large {
  font-size: clamp(2.25rem, 3vw + 1.25rem, 5rem);
  line-height: 0.94;
  letter-spacing: -0.015em;
}

.display-medium {
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2.5rem);
}

p {
  max-width: 62ch;
}

/* Readable article body: Action Text renders here (or inside .trix-content). */
.report__body,
.trix-content {
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
  line-height: 1.7;
  color: var(--zr-text);
}

.report__body > *,
.trix-content > * {
  max-width: 68ch;
}

.report__body p,
.trix-content p {
  margin-block: 1.5em;
}

.report__body h2,
.trix-content h2 {
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2.25rem);
  margin-block: 1.75em 0.75em;
}

.report__body h3,
.trix-content h3 {
  font-size: clamp(1.25rem, 1vw + 0.875rem, 1.625rem);
  margin-block: 1.5em 0.5em;
}

.report__body blockquote,
.trix-content blockquote {
  font-size: clamp(1.375rem, 1vw + 1.125rem, 1.875rem);
  font-weight: 700;
  line-height: 1.3;
  border-left: 2px solid var(--zr-accent);
  padding-left: 1.25em;
  margin-block: 2em;
  max-width: 56ch;
}

.report__body figure,
.trix-content figure {
  margin-block: 2.5em;
  max-width: none;
}

.report__body figcaption,
.trix-content figcaption {
  font-family: var(--zr-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--zr-muted);
  margin-top: 0.75em;
}

.report__body a,
.trix-content a {
  color: var(--zr-accent);
  text-underline-offset: 0.2em;
  text-decoration: underline;
}

::selection {
  background: var(--zr-accent);
  color: var(--zr-bg);
}