@font-face {
  font-family: "Amburn Display";
  src: url("/assets/fonts/anton-latin-400-normal.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Amburn Console";
  src: url("/assets/fonts/courier-prime-latin-400-normal.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Amburn Console";
  src: url("/assets/fonts/courier-prime-latin-700-normal.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Amburn Console";
  src: url("/assets/fonts/courier-prime-latin-700-normal.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 900;
}

/* Mobile operating systems do not consistently ship the desktop display and
   console fonts. Capability detection keeps the existing desktop typography
   byte-for-byte equivalent, even when a desktop window is made narrow. */
@media (hover: none) and (pointer: coarse) {
  :root {
    --console-font: "Amburn Console", "Courier New", monospace;
    --display-font: "Amburn Display", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  }

  #page-title,
  .error-code {
    font-synthesis: none;
    font-weight: 400;
  }
}

/* Phone-sized, touch-first viewports only. These overrides leave desktop
   rendering and desktop responsive previews unchanged. */
@media (max-width: 760px) and (hover: none) and (pointer: coarse) {
  .hero {
    min-height: auto;
    align-content: start;
    padding-bottom: clamp(34px, 9vw, 48px);
    padding-inline: clamp(15px, 5vw, 28px);
  }

  #page-title {
    min-width: 0;
    max-width: 100%;
    font-size: clamp(58px, 22vw, 116px);
    text-shadow:
      2px 2px 0 var(--pink),
      4px 4px 0 var(--orange),
      6px 6px 0 var(--lime),
      8px 8px 0 var(--ink);
  }

  .hero-subtitle {
    align-self: start;
    min-width: 0;
    width: 100%;
    margin-top: clamp(28px, 7vw, 38px);
    padding: clamp(12px, 3.8vw, 15px) clamp(13px, 4vw, 18px);
    line-height: 1.4;
  }

  html.crt-on[data-crt-scope="page"] .hero {
    padding-inline: clamp(13px, 4.2vw, 22px);
  }

  html.crt-on[data-crt-scope="page"] #page-title {
    font-size: clamp(52px, 20vw, 106px);
  }

  /* The page-level CRT treatment remains; only the redundant per-glyph RGB
     filter is removed where Android compositing produces line artifacts. */
  html.crt-on #page-title.crt-phosphor {
    filter: none;
  }
}