:root {
  /* Text in Archivo at its normal width, which stays sturdy on a 1080p
     screen, and times in the mono, so they line up like a board. */
  --font-text: archivo, system-ui, sans-serif;
  --font-time: "IBM Plex Mono", ui-monospace, monospace;

  /* Titles, day names and controls narrow to this width of the same font. */
  --stretch-display: 80%;
}

html {
  font-family: var(--font-text);
  line-height: 1.45;
}

body {
  background: var(--surface);
  color: var(--text);
}

main {
  max-inline-size: 64rem;
  margin-inline: auto;
  padding: var(--gutter);
}

a {
  color: var(--accent);
  text-underline-offset: 0.2em;
}

h1,
h2,
h3 {
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* What the board sets narrow: headings, controls and the way around the site;
   reading text keeps the full width. */
h1,
h2,
h3,
button,
.button {
  font-stretch: var(--stretch-display);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}