@layer base {
  /* Propshaft rewrites these URLs to the fonts' fingerprinted paths. Syne is
     trimmed to weights 400-700: the site doesn't use its ultra-wide 800.
     DM Sans is trimmed to the weights the site uses, 300-600, so its
     boldest text is 600 */
  @font-face {
    font-family: "Syne";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/syne-latin-f394e374.woff2") format("woff2");
  }

  @font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("/assets/dm-sans-latin-66a3fcda.woff2") format("woff2");
  }

  html {
    /* Keeps a focused element clear of the sticky header */
    scroll-padding-top: calc(var(--header-height) + 16px);
  }

  body {
    background: var(--color-page);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.6;
  }

  /* An even vignette, as on the booth: the page's ground darkens a little,
     gradually from near the middle of the screen towards its edges, most in
     its corners, and stays put as the page scrolls.
     It's behind the content, which keeps its own colours. axe leaves out a
     fixed layer, and measures text against the page's own colour; that's
     safe, as the vignette never makes the ground darker than the hero's
     grey, which every text colour's contrast is measured on, and in dark
     only raises the contrast */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse at 50% 45%, transparent 30%, var(--color-vignette));
    pointer-events: none;
  }

  /* "pretty" keeps a short last word, such as "touch.", off a line of its
     own, where the browser supports it */
  h1 {
    font-family: var(--font-display);
    font-size: 50px;
    font-weight: 700;
    line-height: var(--line-height-heading-large);
    letter-spacing: var(--letter-spacing-heading);
    text-wrap: pretty;
    margin-bottom: 22px;
  }

  h1 em {
    font-style: normal;
    color: var(--color-text-faint);
  }

  h2,
  h3 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-heading);
    line-height: var(--line-height-heading);
    text-wrap: pretty;
  }

  a {
    color: var(--color-quantum-text);
  }

  /* The accent's text colour, as the green and gold themselves are under
     the 3:1 a focus outline needs on the light ground */
  :focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
  }

  .skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 200;
    padding: 8px 16px;
    border-radius: var(--radius);
    background: var(--color-text);
    color: var(--color-page);
    font-weight: 500;
    text-decoration: none;
    transform: translateY(-200%);
  }

  .skip-link:focus {
    transform: none;
  }

  @media (max-width: 768px) {
    h1 {
      font-size: clamp(28px, 8vw, 56px);
    }
  }

  @media (max-width: 480px) {
    h1 {
      font-size: clamp(24px, 9vw, 40px);
    }
  }

  /* Every heading fits a 360 px phone, which bin/check-accessibility checks.
     On anything narrower, a long word may wrap rather than run off the side */
  @media (max-width: 359px) {
    h1 {
      overflow-wrap: break-word;
    }
  }
}