/* ===========================================================================
   RD8 — Base layer
   ---------------------------------------------------------------------------
   Light, opt-in element defaults + heading helpers. RD8 is dark-first, so the
   canvas defaults to near-black. Apply `.rd8-prose` for sensible rich-text
   spacing, or use the heading helper classes directly.
   =========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--surface-canvas);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Display headings: Oswald, uppercase, clipped gradient fill ---------- */
.rd8-display,
.rd8-h1,
.rd8-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-heading);
  margin: 0;
  background-image: var(--text-heading-fill);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.rd8-display { font-size: var(--text-display); line-height: var(--leading-tight); }
.rd8-h1 { font-size: var(--text-h1); }
.rd8-h2 { font-size: var(--text-h2); }

/* green-tipped variant used on subpage headers */
.rd8-h1.is-green,
.rd8-h2.is-green,
.rd8-display.is-green { background-image: var(--text-heading-fill-green); }

/* the single italic serif accent word inside a heading */
.rd8-accent {
  font-family: var(--font-serif-accent);
  font-style: italic;
  font-weight: var(--weight-medium);
  text-transform: none;
}

.rd8-h3 {
  font-family: var(--font-body);
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: var(--leading-heading);
  color: var(--text-primary);
  margin: 0;
}
.rd8-h4 {
  font-family: var(--font-body);
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  margin: 0;
}

/* General Sans sub-heads */
.rd8-h5 {
  font-family: var(--font-brand);
  font-size: var(--text-h5);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  margin: 0;
}

/* uppercase mono/Oswald eyebrow */
.rd8-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--rd8-green-bright);
  margin: 0;
}

.rd8-lead {
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.rd8-mono { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--rd8-green-bright); }

::selection { background: var(--rd8-green-bright); color: var(--neutral-black); }