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

html {
  scroll-behavior: smooth;
  /* Paints the canvas — the strip a device reveals when it stretches past the
     end of the document. Matching the footer makes any such strip read as a
     continuation of the footer instead of detached dead space.
     Uses the token, not a hex, so html.a11y-high-contrast (which redefines
     --color-charcoal to #000) carries over automatically.
     body keeps its own --color-offwhite background and paints over this
     everywhere the document actually reaches. */
  background-color: var(--color-charcoal);
}

/* Blocks the iOS/Android rubber-band scroll past the end of the page.
   Safe here in a way the reverted overflow-x fix was not: overscroll-behavior
   does NOT create a scroll container, so it cannot trap vertical scrolling.
   Side effect to be aware of: also disables pull-to-refresh on Android Chrome. */
html,
body {
  overscroll-behavior-y: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
a {
  overflow-wrap: break-word;
}

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}