/* =====================================================================
   error.css : styles used only by 404.html.
   Load AFTER site.css.
   ===================================================================== */

.hero { max-width: 520px; }

.logo {
  width: clamp(72px, 16vw, 92px);
  margin-bottom: 22px;
  filter: drop-shadow(0 0 24px rgba(10, 139, 255, 0.35));
}

/* The big "404" with a blue gradient fill */
.code {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(4.5rem, 20vw, 8rem);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--blue), var(--blue-deep) 60%, #3a4a66);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

h1 {
  margin: 14px 0 0;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(1.35rem, 4.5vw, 1.8rem);
  letter-spacing: -0.015em;
}

.rule { margin: 22px auto 20px; }

p {
  margin: 0 0 30px;
  color: var(--muted);
  font-size: 1.02rem;
}