*, *::before, *::after {
  box-sizing: border-box;
  margin-top: 0;
  -webkit-text-size-adjust: 100%;
}

:root {
  font-size: 1rem;
  line-height: var(--line-height-base);
  text-rendering: optimizeLegibility;

  font-family: "Signika", sans-serif;
  font-optical-sizing: auto;
  font-variation-settings: "GRAD" 0;

  --ratio: 1.5;
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));

  --foreground-color: #362c2c;
  --link-color: #000;
  --background-color: #fafafa;
  --accent-color: #00aaff;

  --line-height-base: 1.5;
  --line-height-heading: 1.2;
  --line-height-body: 1.6;

  --font-family-mono: ui-monospace, monospace;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-regular: 400;
  --font-weight-light: 300;
  --font-weight-thin: 200;

  --opacity-muted: 0.6;
  --opacity-subtle: 0.55;
  --border-width: 1px;
  --border-color: rgba(54, 44, 44, 0.15);
  --code-bg: rgba(54, 44, 44, 0.07);
  --code-font-size: 1em;
  --code-padding: 0.1em 0.3em;
  --radius: 2px;
}

body {
  color: var(--foreground-color);
  background-color: var(--background-color);
  margin: 0;
}

a {
  color: var(--link-color);
}

.signika-700 { font-weight: var(--font-weight-bold); }
.signika-400 { font-weight: var(--font-weight-regular); }
.signika-200 { font-weight: var(--font-weight-thin); }