/*
 * rung3.css — shared site stylesheet
 * Canonical classes applied across all Rung3.ai pages.
 * Add new shared rules here; apply per-page via <link rel="stylesheet" href="rung3.css">
 */

/*
 * sub / Lede
 * Hero sub-paragraph. JetBrains Mono, 0.96rem (~16px at 17px body), text-dim.
 * Use margin inline to control spacing between paragraphs.
 * Use color inline to override for accent paragraphs (e.g. color:var(--rung3)).
 */
p.sub,
.phead p.sub,
.phead .sub {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.96rem !important;
  line-height: 1.7 !important;
  color: var(--text-dim) !important;
  max-width: none;
  margin: 0;
}

/*
 * Hero-to-first-section spacing
 * .phead already carries 1.5rem of bottom padding. The canonical
 * section-to-section gap is 3rem, set via .section-label{margin-top:3rem}.
 * Applied naively, the first section after the hero gets 1.5rem + 3rem = 4.5rem,
 * visibly larger than every other section gap on the page. This rule corrects
 * just that first transition back down to the canonical 3rem total.
 *
 * Two page structures exist site-wide: header followed directly by <section>,
 * and header followed by a wrapping <div class="wrap"> that contains the
 * sections. `section:first-of-type` correctly resolves to the first section
 * in either case, since it is scoped to siblings within whichever element
 * is its immediate parent (main-col directly, or the wrap div).
 */
.main-col section:first-of-type .section-label,
.main-col section:first-of-type .rung-callout:first-child,
.main-col section:first-of-type .qa-intro {
  margin-top: 1.5rem !important;
}

/*
 * h1Medium
 * Primary hero headline. DM Serif Display, scales clamp(1.9rem → 3.2rem).
 * Apply colour emphasis to key phrases via:
 *   <span style="color:var(--rung1)">…</span>   teal   — the reversal / the asset
 *   <span style="color:var(--rung2)">…</span>   amber  — the punchline / the payoff
 */
.h1Medium {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0;
}

/* ── Canonical site footer ─────────────────────────────────────────────── */
footer.sitefooter {
  border-top: 1px solid var(--border);
  margin-top: 4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
footer.sitefooter div {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 2rem 1.5rem calc(240px + 5rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
@media (max-width: 900px) {
  footer.sitefooter div {
    padding-left: 1.5rem;
  }
}