html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* The focus ring moved to tokens.css — the template's white-then-blue double ring
   vanishes against the navy masthead, and the colour belongs with the palette. */

/* The three rules below are one recipe, and only work together: the footer is lifted out of flow and
   pinned to the bottom of the document, and the body reserves exactly its height so nothing hides
   underneath. Removing any one of them silently breaks the other two. */
html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  line-height: 60px;
  white-space: nowrap;
}