@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;1,6..96,400;1,6..96,500&family=Inter:wght@400;500;600&display=swap");

:root {
  --ink: #0a0a0a;
  --ink-2: #141312;
  --line: rgba(255, 255, 255, 0.14);
  --text: #f4f1ec;
  --muted: rgba(244, 241, 236, 0.62);
  --faint: rgba(244, 241, 236, 0.38);
  --cream: #f1ebe0;
  --orange: #ff9b00;
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }

.caps {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.serif { font-family: var(--serif); font-weight: 400; }
em { font-style: italic; }

/* Warm projector beam from the top left. */
.beam {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at -10% -15%, rgba(255, 214, 160, 0.16), rgba(255, 190, 120, 0.05) 38%, transparent 62%),
    radial-gradient(60% 50% at 0% 0%, rgba(255, 226, 186, 0.10), transparent 60%);
}
.grain {
  position: fixed;
  inset: -50%;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}