/* --- Editorial display: Cormorant needs optical sizing help at large sizes --- */
.display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: var(--leading-tight);
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.display-md { font-size: var(--step-4); }
.display-sm { font-size: var(--step-3); font-weight: 400; }

.display em {
  font-style: italic;
  color: var(--paper-dim);
}

/* --- Section headings: small, tracked, structural. Not display type. --- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fog);
}

.eyebrow--accent { color: var(--azure); }

.section-rule {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  border-top: none;
  padding-top: 0;
  margin-bottom: var(--space-lg);
}
.section-rule > .eyebrow {
  flex: none;
  font-family: var(--font-ui);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--paper);
}
.section-rule::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  flex: none;
  border-radius: 50%;
  background: var(--azure);
  box-shadow: 0 0 0 5px rgba(110, 231, 191, 0.09);
}
.section-rule > .section-rule__note {
  margin-left: auto;
  min-width: 0;
  font-size: var(--step--1);
  color: var(--fog-deep);
  text-align: right;
  overflow-wrap: anywhere;
}

/* --- Body copy --- */
.prose {
  max-width: var(--measure);
  font-size: var(--step-1);
  line-height: var(--leading-body);
  color: var(--paper-dim);
}
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 400;
  line-height: var(--leading-snug);
  color: var(--paper);
  margin-top: 2em;
}
.prose h3 {
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--paper);
  margin-top: 1.8em;
}
.prose strong { color: var(--paper); font-weight: 600; }
.prose a {
  color: var(--azure-bright);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--azure-deep);
  transition: text-decoration-color var(--dur-fast);
}
.prose a:hover { text-decoration-color: var(--azure-bright); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: none; }
.prose ul > li { position: relative; }
.prose ul > li::before {
  content: "";
  position: absolute;
  left: -1.05em; top: 0.72em;
  width: 4px; height: 1px;
  background: var(--azure-deep);
}
.prose ol { list-style: decimal; }
.prose ol > li::marker { color: var(--fog-deep); font-family: var(--font-mono); font-size: 0.85em; }
.prose li + li { margin-top: 0.45em; }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--azure-bright);
  background: var(--ink-800);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}

/* --- Numeric data. Tabular figures everywhere a value can change. --- */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}

.lead {
  font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.3125rem);
  line-height: 1.5;
  color: var(--paper-dim);
  max-width: 54ch;
}

.text-fog { color: var(--fog); }