:root {
  --pearl: #F9F7F3;
  --pearl-2: #F1ECE4;
  --ink: #1F0F12;
  --text: #4A3A3C;
  --muted: #6B5A5C;
  --maroon: #370E14;
  --maroon-2: #5A1622;
  --gold: #C9A25E;
  --gold-light: #D9B87A;
  --gold-ink: #7A5B24;
  --line: #E4DACB;
  --on-maroon: #EFE6DA;
  --on-maroon-muted: #C9B9AE;

  --f-display: "Cormorant Garamond", Georgia, serif;
  --f-sans: "Jost", system-ui, sans-serif;
  --f-arabic: "Amiri", "Noto Naskh Arabic", serif;

  --fs-display: clamp(2.6rem, 1.6rem + 4.2vw, 5rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --fs-h3: clamp(1.4rem, 1.2rem + .6vw, 1.75rem);
  --fs-lead: clamp(1.05rem, 1rem + .3vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;
  --fs-label: .75rem;
  --fs-btn: .8125rem;

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --section: clamp(5rem, 10vw, 9rem);
  --header-h: 64px;
  --container: min(100% - 2.5rem, 1240px);
  --container-wide: min(100% - 2.5rem, 1440px);
  --radius: 0;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-zoom: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 1024px) { :root { --header-h: 72px; } }