/* typography.css — editorial type system
 *
 * Three families:
 *   --serif (Newsreader)    display, page masthead, section heads
 *   --sans  (Switzer)       UI labels, navigation, meta
 *   --mono  (JetBrains)     IDs, data, code, numerals in tables
 *
 * Editorial hallmarks: tracked small caps, drop caps, generous
 * leading on prose, distinctive numerals.
 */

/* ============ Display + section heads (serif) ============ */

.masthead {
  font-family: var(--serif);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: -0.015em;
  color: var(--tx-1);
}
.masthead .dot {
  color: var(--acc);
  font-weight: 400;
}

.h1 {
  font-family: var(--serif);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  color: var(--tx-1);
}

.h2 {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--tx-1);
}

/* ============ Section eyebrows (tracked small caps) ============ */

.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--track-smcp);
  text-transform: uppercase;
  color: var(--tx-3);
  font-feature-settings: "ss01" 1;
}

/* ============ Body prose ============ */

.prose {
  max-width: var(--measure);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--tx-1);
}
.prose p + p {
  margin-top: var(--sp-4);
}
.prose strong {
  color: var(--tx-1);
  font-weight: 600;
}
.prose em {
  color: var(--tx-1);
  font-style: italic;
}

/* ============ Drop cap (editorial hallmark) ============ */

.prose.with-drop-cap > p:first-of-type::first-letter {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 4.6em;
  line-height: 0.85;
  float: left;
  padding: 6px 12px 0 0;
  margin-top: 4px;
  color: var(--acc);
}

/* ============ Mono (data, IDs, numerals) ============ */

.mono {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--track-mono);
  font-feature-settings: "tnum" 1, "ss01" 1;
  color: var(--tx-2);
}

.num {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: var(--track-mono);
}

/* ============ Meta (page sub-meta line) ============ */

.meta {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--tx-3);
  letter-spacing: var(--track-mono);
}
.meta .sep {
  margin: 0 var(--sp-3);
  color: var(--tx-4);
}