/*
  AWR, Atherton · Cover Story: a motor-magazine feature. Paper, ink, masthead red.
  Ported from the approved demo (demo/site/css/style.css). The demo's names are kept so site.css reads as it did.
*/
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/anton-latin.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/newsreader-latin.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400 500; font-display: swap; src: url("/assets/fonts/newsreader-italic-latin.woff2") format("woff2"); }

:root {
  --paper: #EFEEEA;
  --paper-2: #E2E0D9;
  --ink: #121211;
  --ink-2: #1C1B19;
  --ink-soft: #55534E;
  --red: #C01A13;        /* on paper (4.5:1 on --paper) */
  --red-lit: #FF5A4E;    /* on ink */
  --line: rgba(18, 18, 17, .22);
  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --gutter: clamp(16px, 4vw, 64px);
  --section: clamp(56px, 8vw, 120px);
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* the starter's names, pointed at this palette */
  --font-body: var(--serif);
  --font-display: var(--display);
  --color-bg: var(--paper);
  --color-text: var(--ink);
  --color-accent: var(--red);
  --color-focus: var(--red);
  --touch-target: 44px;
}