.not-found-page {
  background: var(--paper-50);
  color: var(--ink-900);
}

.not-found-canvas {
  margin: 0;
}

/* 404 uses the navy band hero, just taller so it fills the screen above the footer. */
.page-hero--not-found {
  min-height: 78svh;
}

.not-found {
  width: 100%;
  text-align: center;
  padding-block: clamp(3rem, 10svh, 6rem);
}

.not-found__code {
  margin: 0;
  color: var(--teal-300);
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 8rem);
  letter-spacing: 0.02em;
  line-height: 1;
}

.not-found h1 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: 0.02em;
  margin: 0.2em 0 0.5em;
}

@media (max-width: 720px) {
  .not-found h1 {
    font-size: clamp(1.9rem, 7vw, 2.2rem);
  }
}

.not-found__copy {
  max-width: 40ch;
  margin: 0 auto 1.75em;
  color: #45505e;
}