:root {
  --ink: #0b0a08;
  --panel: #12100c;
  --panel-2: #16130e;
  --night: #0e1524;
  --gold: #c9a227;
  --gold-lit: #f0ce7a;
  --ember: #c9702f;
  --cream: #efe7d8;
  --stone: #9c8f7a;

  --font-display: "Cinzel", Georgia, serif;
  --font-body: "Cormorant Garamond", Georgia, serif;
  --text-body: clamp(1.125rem, 1.05rem + 0.22vw, 1.1875rem);
  --text-section: clamp(1.6rem, 3.4vw, 2.6rem);
  --text-hero: clamp(2.4rem, 7vw, 5.2rem);
  --text-eyebrow: 0.78rem;
  --text-micro: 0.62rem;

  --content-width: 75rem;
  --page-gutter: clamp(1rem, 3vw, 2rem);
  --header-height: 5.5rem;
  --hairline: rgba(201, 162, 39, 0.35);
  --hairline-strong: rgba(201, 162, 39, 0.68);
  --focus-ring: 0 0 0 2px var(--ink), 0 0 0 4px var(--gold-lit);
  --grain-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");

  color-scheme: dark;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

@media (max-width: 899px) {
  :root {
    --header-height: 4.75rem;
    --page-gutter: clamp(0.875rem, 4vw, 1.5rem);
  }
}