*,
*::before,
*::after { box-sizing: border-box; }

/* The hero ellipse runs past the viewport edge on purpose. */
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: var(--lh-sans);
  /* Figma's "Regular" DM Sans instance is the 14pt optical size. */
  font-variation-settings: "opsz" 14;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
canvas { display: block; }

.page {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

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