@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-latin-opsz-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-latin-opsz-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #ffffff;
  --ink: #111111;
  --stet-red: #d7261e;
  --pencil: #6b6b6b;
  --rule: #e6e6e6;
  --offcut: #f4f1ea;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --content: 1248px;
  --gutter: 96px;
  --section-y: 104px;
  --sticky-bar-h: 77px; /* 12 + 52 button + 12 + 1 border, excluding the safe area */
}

@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --section-y: 56px;
  }
}