@font-face {
  font-family: "Frank Ruhl Libre Var";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../assets/fonts/frank-ruhl-libre-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader Var";
  font-style: normal;
  font-weight: 200 800;
  font-display: optional;
  src: url("../assets/fonts/newsreader-latin-opsz-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader Var";
  font-style: italic;
  font-weight: 200 800;
  font-display: optional;
  src: url("../assets/fonts/newsreader-latin-opsz-wght-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Spline Sans Mono Var";
  font-style: normal;
  font-weight: 300 700;
  font-display: optional;
  src: url("../assets/fonts/spline-sans-mono-latin-wght-normal.woff2") format("woff2");
}

:root {
  --paper: #f2ede3;
  --bone: #e8e2d5;
  --ink: #14181e;
  --ink-soft: #20262d;
  --slate: #5b6470;
  --slate-line: rgba(91, 100, 112, .34); 
  --slate-soft: rgba(91, 100, 112, .55); 
  --sage: #7c8975;
  --sage-soft: #b5beae;
  --oxide: #8A2B2E;        
  --oxide-bright: #CE6A66; 
  --fault: var(--oxide);              
  --fault-bright: var(--oxide-bright);
  --verdigris: #2c5a52;        
  --verdigris-bright: #5b9e8d; 
  --brass: #b19052;
  --blue: #315f9f;
  --white: #fffaf0;

  --line: rgba(20, 24, 30, .16);
  --line-strong: rgba(20, 24, 30, .34);
  --line-light: rgba(242, 237, 227, .18);

  --serif: "Newsreader Var", Georgia, "Times New Roman", serif;
  --display: "Frank Ruhl Libre Var", Georgia, "Times New Roman", serif; 
  --sans: "Segoe UI", Arial, sans-serif;
  --mono: "Spline Sans Mono Var", Consolas, "Courier New", monospace;

  --max: 1260px;
  --page-x: clamp(18px, 4.8vw, 72px);

  
  --progress: 0%;
  --hero-y: 0;            
  --hero-px: 0;          
  --hero-py: 0;          
  --cursor-x: 50vw;
  --cursor-y: 50vh;

  
  --plate-ratio: 16 / 9;
}