/* Shared by every page. Layout and colour live in each page's inline styles, as on the design canvas. */

/* Latin subsets of the Google Fonts variable fonts, served from this site (SIL OFL 1.1, see fonts/). */
@font-face {
  font-family: Fredoka;
  src: url(/fonts/fredoka-latin.woff2) format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Nunito;
  src: url(/fonts/nunito-latin.woff2) format("woff2");
  font-weight: 200 1000;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #F3F7F4; }
a { color: #C8402B; }
a:hover { color: #9E2F1E; }
.nav a { color: #1E2A3A; text-decoration: none; }
.nav a:hover { color: #C8402B; }
:focus-visible { outline: 3px solid #C8402B; outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: 24px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 10;
  background: #1E2A3A; color: #FFFFFF; font-weight: 700; border-radius: 12px; padding: 12px 18px;
}
.skip:focus { top: 16px; color: #FFFFFF; }

/* The hero phone is 311px wide: shrink it on the narrowest phones so it isn't clipped. */
@media (max-width: 359px) {
  .phone { zoom: 0.86; }
}