/* Design tokens, reset and base typography */

:root{
  --paper:#EDEBE4;
  --paper-2:#E2E0D7;
  --ink:#14170F;
  --green:#22301F;
  --sage:#7E8A72;
  --orange:#D4551F;
  --signal:#E9F03A;
  --rec:#E0362B;
  --blue:#2B37D6;
  --mono:'JetBrains Mono','Courier New',monospace;
  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{text-decoration:none;color:inherit}

.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:8;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;opacity:.4;
}