:root {
  --brand-black: #000000;
  --brand-accent: #ffffff;
  --brand-white: #ffffff;
  --container-max: 1100px;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fs-base: 16px;
  --fs-h1: clamp(2rem, 1.6rem + 2.5vw, 3.2rem);
  --fs-h2: clamp(1.25rem, 1.15rem + 1.2vw, 1.6rem);
  --line-headings: 1.1;
  --line-body: 1.6;
}

/* Base typographic rules */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: #eef6ff;
  line-height: var(--line-body);
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); color: var(--brand-accent); margin: 0 0 .6rem; }
h1 { font-size: var(--fs-h1); line-height: var(--line-headings); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.2; font-weight: var(--fw-semibold); color: var(--brand-accent); }

/* Hero headings (largest) */
.hero h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: var(--line-headings);
  color: #000000;
}

/* Standard page & pane H1 */
main h1,
.page h1,
.pane-detail h1 {
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.4rem);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.pane-media h2 { margin: 0 0 8px; font-size: var(--fs-h2); font-weight: var(--fw-semibold); color: var(--brand-accent); }
.slide .pane-text h2 { font-size: var(--fs-h2); margin-bottom: 10px; font-weight: var(--fw-semibold); color: var(--brand-accent); }

/* Pane card headings */
.pane h1,
.pane h2 {
  font-family: var(--font-sans);
  color: var(--brand-accent);
}

.pane-summary {
  font-size: 1rem;
  line-height: 1.5;
  color: #d6e6f2;
}

/* Global consistency enforcement */
h1, h2, h3 {
  color: var(--brand-accent);
}

body {
  background-color: #000;
  color: #eef6ff;
}