/* Local & Private: tokens, fonts and rules shared by the hero and landing pages. */

@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/newsreader-roman.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300 600; font-display: swap; src: url('../fonts/newsreader-italic.woff2') format('woff2'); }

:root {
  --ink: #1d1f15;
  --ink-deep: #15160f;
  --ink-soft: #24261a;
  --olive: #4a4f26;
  --cream: #f1ece0;
  --cream-70: rgba(241, 236, 224, .7);
  --cream-60: rgba(241, 236, 224, .6);
  --amber: #e8b65a;
  --copper: #a8743f;
  --slate: #2b2b2d;

  --serif: 'Newsreader', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(20px, 5vw, 64px);

  /* Velvet curtain folds, reused on the hero and the olive sections. */
  --curtain: repeating-linear-gradient(90deg,
    rgba(20, 22, 10, .42) 0, rgba(255, 240, 190, .05) 22px, rgba(20, 22, 10, .18) 41px,
    rgba(20, 22, 10, .5) 58px, rgba(255, 240, 190, .03) 77px, rgba(20, 22, 10, .34) 96px);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}