:root {
  /* palette */
  --ink: #0b0b0c;
  --ink-2: #131315;
  --paper: #f2f0ec;
  --paper-dim: #c9c6c0;
  --signal: #ff2e00;
  --hairline: rgba(242, 240, 236, 0.14);
  --hairline-ink: rgba(11, 11, 12, 0.16);

  /* type */
  --font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  /* layout */
  --gutter: clamp(1.25rem, 3vw, 2.75rem);
  --section-gap: clamp(7rem, 16vh, 12rem);
  --nav-h: 64px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.9s;

  /* z scale: content < grain < nav < preloader < cursor */
  --z-grain: 80;
  --z-nav: 100;
  --z-preloader: 200;
  --z-cursor: 300;
}