@font-face {
  font-family: 'Mona Sans';
  src: url('./fonts/mona-sans.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
:root {
  /* Maria's palette. These five are the only literal colours in the stylesheets. */
  --paper: #f7f0e5;
  --terracotta: #cf541c;
  --butter: #fae3b0;
  --sky: #7ea5dc;
  --bark: #673c33;
  /* The site is printed in one ink on a pale paper, both taken from Maria's sky. Every other shade is mixed from these. */
  --palette-paper: color-mix(in oklab, color-mix(in oklab, var(--paper) 55%, white) 94%, var(--sky));
  --palette-ink: oklch(from var(--sky) .56 .15 h);
  --palette-text: color-mix(in oklab, black 86%, var(--paper));
  --ink-pressed: color-mix(in oklab, var(--palette-ink) 80%, var(--palette-text));
  --selection: color-mix(in oklab, var(--palette-ink) 30%, var(--palette-paper));
  --muted: color-mix(in oklab, var(--palette-text) 70%, var(--palette-paper));
  --line: color-mix(in oklab, var(--palette-text) 28%, var(--palette-paper));
  --field: color-mix(in oklab, var(--palette-paper) 40%, white);
  --field-border: color-mix(in oklab, var(--palette-text) 60%, var(--palette-paper));
  --danger: color-mix(in oklab, var(--terracotta) 62%, black);
  --overlay: color-mix(in oklab, var(--palette-text) 35%, transparent);
  /* Answer colours: butter = coming, sky tint = not answered, bark tint = declined. */
  --sky-tint: color-mix(in oklab, var(--palette-paper) 70%, var(--sky));
  --bark-tint: color-mix(in oklab, var(--palette-paper) 88%, var(--bark));
  --cover-ink: oklch(from var(--sky) .87 .07 h);
  --cover-scrim: color-mix(in oklab, oklch(from var(--sky) .3 .1 h) 55%, transparent);
  /* Jämtland's flag has its own colours; they appear only in the pennant beside the place. */
  --jamtland-blue: #416d9e;
  --jamtland-green: #42765b;
  --jamtland-white: white;
  --face: 'Mona Sans', 'Helvetica Neue', Arial, sans-serif;
  --weight-hairline: 280;
  --weight-regular: 420;
  --weight-bold: 640;
  --weight-heavy: 900;
  --text-label: .8125rem;
  --text-small: .875rem;
  --text-body: 1.0625rem;
  --text-action: 1.25rem;
  --text-lead: clamp(1.3125rem, 5.4cqi, 1.75rem);
  --text-title: clamp(1.75rem, 8vw, 3rem);
  --text-way: clamp(1.75rem, 7cqi, 2.5rem);
  --text-list: clamp(1.875rem, 9cqi, 3.5rem);
  --text-headline: clamp(2.25rem, 10.5cqi, 4.25rem);
  --text-numeral: clamp(3.75rem, 17cqi, 7.5rem);
  --leading-display: .86;
  --leading-list: 1.05;
  --leading-heading: 1.15;
  --leading-lead: 1.32;
  --leading-text: 1.5;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --field-gap: var(--space-6);
  --label-gap: var(--space-2);
  --page-margin: 20px;
  --page-width: 1200px;
  --page-column: 32rem;
  --page-bleed: min(0px, calc(var(--page-width) / 2 - 50vw));
  --track-lane: 48px;
  --track-lane-centre: 24px;
  --track-gutter: 12px;
  --track-pen: 1.8px;
  --track-gauge: 7px;
  --track-start: 7rem;
  --rule: 2px;
  --radius-round: 50%;
  --control-height: 48px;
  --touch-target: 44px;
  --focus-ring: 2px solid var(--palette-text);
  --focus-offset: 3px;
  --feedback-duration: 140ms;
  --step-duration: 180ms;
  --pressed-scale: .98;
}
@media (min-width: 960px) {
  :root {
    --page-margin: 48px;
    --track-lane: 96px;
    --track-lane-centre: 48px;
    --track-gutter: 48px;
    --track-pen: 2.2px;
    --track-start: 10rem;
  }
}