*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0e0c0b;
  --bg2: #141210;
  --bg3: #1a1714;
  --gold: oklch(72% 0.11 78);
  --gold-dim: oklch(55% 0.09 78);
  --gold-pale: oklch(72% 0.11 78 / 0.12);
  --text: oklch(92% 0.01 78);
  --text-dim: oklch(65% 0.03 78);
  --rule: oklch(72% 0.11 78 / 0.25);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

::selection { background: var(--gold); color: #000; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

input[type=range] { accent-color: var(--gold); }
input, textarea, select { outline: none; }
input::placeholder, textarea::placeholder { color: var(--text-dim); }