/* Design tokens, reset and typography. */
:root {
  color-scheme: dark;
  --bg: #10100f;
  --panel: #1c1b19;
  --line: #46423c;
  --cream: #f2e9dc;
  --muted: #aaa399;
  --gold: #f1cb8c;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: #111110; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--cream);
  font: 15px/1.5 Inter, system-ui, -apple-system, Arial, sans-serif;
}

/* A fixed layer, so the gradient always fills the window whatever the page height. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 10%, #2b2823, #111110 65%);
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

h1 { font-size: clamp(30px, 5vw, 48px); line-height: 1.12; letter-spacing: -1.6px; margin: 8px 0 12px; }
h2 { font-size: 26px; letter-spacing: -.7px; margin: 0 0 7px; }
h3 { font-size: 20px; margin: 0 0 12px; }
p { color: var(--muted); }

.eyebrow { color: var(--gold); letter-spacing: 2px; font-size: 11px; font-weight: 800; }
.lead { margin: 0 0 25px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.note { font-size: 12px; line-height: 1.55; color: #aaa197; }
.status { min-height: 25px; color: #e3bf85; font-size: 13px; }