/* Global reset and elements shared by every layout. */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

a { color: var(--purple); text-decoration: none; }
a:hover { color: var(--purple-deep); }

[hidden] { display: none !important; }

/* Keyboard focus is always visible. Dark sections switch the colour to yellow. */
:is(a, button, select, summary):focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.flash {
  padding: var(--space-14) var(--gutter);
  text-align: center;
  color: var(--white);
}

.flash--notice { background: var(--status-paid); }
.flash--alert { background: var(--error-field); } /* white on --status-due is 4.4:1, below AA */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}