*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Text selection: our colours, inverted, instead of the browser's blue: the page colour on the site grey #3f3f3f (and the ink on a light grey on the dark sections).
   Gradient titles have a clear text fill, so the selected letters get a solid fill while they are selected. */
::selection { background: var(--color-headline); color: var(--color-bg); -webkit-text-fill-color: var(--color-bg); }   /* the site grey #3f3f3f, not the near-black ink */
.cs-section--dark ::selection { background: var(--color-type-sample); color: var(--color-ink); -webkit-text-fill-color: var(--color-ink); }