@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@300;400;500;600;700;800&family=Roboto+Mono:wght@400;500;700&display=swap');

:root {
  --ink: #0a0e14;
  --wine: #1a0f12;
  --wine-deep: #10090b;
  --gold: #fdb912;
  --red: #a32638;
  --paper: #e8e4dc;
  --muted: rgba(232, 228, 220, .58);
  --line: rgba(255, 255, 255, .1);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Inter, Arial, sans-serif;
  --display: Anton, Impact, sans-serif;
  --mono: 'Roboto Mono', Consolas, monospace;
}

body { background: var(--ink); color: var(--paper); font: 400 16px/1.65 var(--sans); }
h1, h2, h3 { color: var(--paper); }
.eyebrow { display: block; margin-bottom: 9px; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .18em; line-height: 1.3; text-transform: uppercase; }
.section-title { font: 400 clamp(38px, 6vw, 76px)/.92 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.section-lead { color: var(--muted); font-size: 17px; font-weight: 300; max-width: 65ch; }
.mono { font-family: var(--mono); }

/* The condensed display face visually exceeds a sub-1 line box. Keep every heading
   in its own box so labels and wrapped lines cannot touch or overlap. */
h1, h2, h3 { line-height: 1.18 !important; }