/* Design tokens taken from the business card: matte black, crimson, silver. */
:root {
  --ink: #0b0b0c;
  --ink-2: #121214;
  --ink-3: #1b1b1e;
  --line: rgba(232, 232, 232, 0.12);
  --red: #c4161f;
  --red-deep: #8f0e15;
  --red-bright: #e0222c;
  --silver: #d7d7da;
  --steel: #9a9aa2;
  --white: #f6f6f4;

  --font-display: "Raleway", "Montserrat", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 6px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --header-h: 72px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Film grain, generated, no image files. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Fine scratches like the worn card surface. */
  --scratches:
    repeating-linear-gradient(112deg, transparent 0 46px, rgba(255, 255, 255, 0.025) 46px 47px, transparent 47px 120px),
    repeating-linear-gradient(68deg, transparent 0 80px, rgba(255, 255, 255, 0.018) 80px 81px, transparent 81px 190px);
}