/*!
 * Rankrix Theme — Typography
 *
 * Body-content typography. All sizes use clamp() so they scale smoothly
 * from 320 px to 4K without breakpoint snaps (per project rule).
 * The chrome (header / footer / mega-menu) has its own discrete ladder
 * lifted verbatim from production — not modified here.
 */

/* ============================================================================
 * HEADINGS
 * Tight tracking, semi-bold weight, slightly looser line-height as size
 * grows. The hero size is reserved for one element per page (the H1 of
 * the landing block); other H1s on interior pages use --rx-text-3xl.
 * ============================================================================ */

h1, .rx-h1 {
  font-family: var(--rx-font-display);
  font-size: var(--rx-text-4xl);
  font-weight: var(--rx-weight-bold);
  line-height: var(--rx-leading-tight);
  letter-spacing: var(--rx-tracking-tight);
}

h2, .rx-h2 {
  font-family: var(--rx-font-display);
  font-size: var(--rx-text-3xl);
  font-weight: var(--rx-weight-bold);
  line-height: var(--rx-leading-tight);
  letter-spacing: var(--rx-tracking-tight);
}

h3, .rx-h3 {
  font-family: var(--rx-font-display);
  font-size: var(--rx-text-2xl);
  font-weight: var(--rx-weight-semi);
  line-height: var(--rx-leading-snug);
  letter-spacing: var(--rx-tracking-snug);
}

h4, .rx-h4 {
  font-family: var(--rx-font-display);
  font-size: var(--rx-text-xl);
  font-weight: var(--rx-weight-semi);
  line-height: var(--rx-leading-snug);
  letter-spacing: var(--rx-tracking-snug);
}

h5, .rx-h5 {
  font-family: var(--rx-font-display);
  font-size: var(--rx-text-lg);
  font-weight: var(--rx-weight-medium);
  line-height: var(--rx-leading-snug);
}

h6, .rx-h6 {
  font-family: var(--rx-font-display);
  font-size: var(--rx-text-base);
  font-weight: var(--rx-weight-medium);
  line-height: var(--rx-leading-snug);
}

/* Hero modifier — only on landing-block H1s. */
.rx-hero-title {
  font-size: var(--rx-text-hero);
  letter-spacing: -0.025em;
}

/* ============================================================================
 * BODY PROSE
 * Line-length capped at --rx-prose-measure (75ch) per the project rule.
 * Apply .rx-prose to article bodies; let containers handle the cap so
 * paragraphs that sit in narrower columns aren't forced wider.
 * ============================================================================ */

p, .rx-p {
  font-size: var(--rx-text-base);
  line-height: var(--rx-leading-normal);
  margin-block-end: var(--rx-space-4);
}

p:last-child, .rx-p:last-child {
  margin-block-end: 0;
}

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

.rx-prose > * + * {
  margin-block-start: var(--rx-space-4);
}

.rx-prose h2,
.rx-prose h3 {
  margin-block-start: var(--rx-space-8);
  margin-block-end: var(--rx-space-3);
}

/* Eyebrows — small uppercase labels above headings, brand-blue tinted. */
.rx-eyebrow {
  display: inline-block;
  font-family: var(--rx-font-mono);
  font-size: var(--rx-text-xs);
  font-weight: var(--rx-weight-semi);
  letter-spacing: var(--rx-tracking-mono);
  text-transform: uppercase;
  color: var(--rx-accent-soft);
  margin-block-end: var(--rx-space-2);
}

/* Lead — slightly larger paragraph for opening lines / introductions. */
.rx-lead {
  font-size: var(--rx-text-lg);
  line-height: var(--rx-leading-normal);
  color: var(--rx-text-muted);
}

/* ============================================================================
 * INLINE TYPE
 * ============================================================================ */

small, .rx-small {
  font-size: var(--rx-text-sm);
  color: var(--rx-text-muted);
}

strong, b, .rx-strong {
  font-weight: var(--rx-weight-semi);
  color: var(--rx-text);
}

em, i, .rx-em {
  font-style: italic;
}

mark, .rx-mark {
  background: hsla(213 90% 50% / 0.25);
  color: var(--rx-text);
  padding: 0 0.2em;
  border-radius: var(--rx-radius-px);
}

code, kbd, samp, pre,
.rx-mono {
  font-family: var(--rx-font-mono);
  font-size: 0.92em;
}

code, kbd, samp {
  padding: 0.15em 0.4em;
  background: var(--rx-surface);
  border: 1px solid var(--rx-border);
  border-radius: var(--rx-radius-px);
}

pre {
  padding: var(--rx-space-4);
  background: var(--rx-surface);
  border: 1px solid var(--rx-border);
  border-radius: var(--rx-radius-md);
  overflow-x: auto;
  line-height: var(--rx-leading-snug);
}
pre code {
  padding: 0;
  background: transparent;
  border: 0;
}

/* ============================================================================
 * QUOTES
 * ============================================================================ */

blockquote, .rx-quote {
  position: relative;
  padding-inline-start: var(--rx-space-5);
  border-inline-start: 2px solid var(--rx-accent);
  font-size: var(--rx-text-lg);
  line-height: var(--rx-leading-snug);
  color: var(--rx-text-muted);
  font-style: italic;
}

blockquote cite, .rx-quote-cite {
  display: block;
  margin-block-start: var(--rx-space-2);
  font-size: var(--rx-text-sm);
  font-style: normal;
  color: var(--rx-text-dim);
}

/* ============================================================================
 * LISTS (in prose context)
 * ============================================================================ */

.rx-prose ul,
.rx-prose ol {
  padding-inline-start: var(--rx-space-5);
}

.rx-prose li + li {
  margin-block-start: var(--rx-space-2);
}