@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400 500;
}

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400 600;
}

:root {
  --color-midnight: #061521;
  --color-midnight-rgb: 6 21 33;
  --color-navy: #0B2232;
  --color-navy-rgb: 11 34 50;
  --color-pearl: #F1F2EE;
  --color-pearl-rgb: 241 242 238;
  --color-mist: #CAD1D3;
  --color-ink: #0B1821;
  --color-copper: #B2724F;
  --color-copper-light: #D59A76;
  --color-copper-dark: #9A5738;
  --color-line-dark: rgb(202 209 211 / 0.24);
  --color-line-light: rgb(11 24 33 / 0.2);

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Manrope", Arial, sans-serif;

  --content-max: 110rem;
  --reading-max: 46rem;
  --space-gutter: clamp(1.25rem, 4vw, 5rem);
  --space-section: clamp(5.5rem, 10vw, 10rem);
  --space-section-tight: clamp(4rem, 7vw, 7rem);
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;

  --size-display: clamp(4.4rem, 9.5vw, 10.5rem);
  --size-h1: clamp(3.8rem, 8vw, 8.5rem);
  --size-h2: clamp(3.15rem, 6vw, 6.5rem);
  --size-h3: clamp(2.1rem, 3vw, 3.6rem);
  --size-body-large: clamp(1.05rem, 1.4vw, 1.35rem);

  --motion-fast: 180ms;
  --motion-medium: 420ms;
  --motion-slow: 900ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --layer-base: 0;
  --layer-content: 2;
  --layer-header: 20;
  --layer-menu: 30;
  --layer-skip: 100;
}