a { color: inherit; text-decoration: none; }
a:hover { color: var(--paper); }

.page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* ── radial glow ── */
.glow {
  position: absolute;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224,64,16,.18), transparent 65%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  pointer-events: none;
}

/* ── 404 numeral ── */
.numeral {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(120px, 22vw, 220px);
  letter-spacing: -0.07em;
  line-height: 1;
  color: var(--ink-800);
  position: relative;
  user-select: none;
}

/* each digit gets a subtle build animation */
.numeral span { display: inline-block; }
.numeral span:nth-child(1) { animation: drop .7s cubic-bezier(.22,1,.36,1) both; }
.numeral span:nth-child(2) { animation: drop .7s .12s cubic-bezier(.22,1,.36,1) both; }
.numeral span:nth-child(3) { animation: drop .7s .24s cubic-bezier(.22,1,.36,1) both; }

@keyframes drop {
  from { opacity: 0; transform: translateY(-40px) scale(.88); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* the "4" digits get the brand colour on hover — easter egg */
.numeral span { transition: color .2s; cursor: default; }
.numeral span:nth-child(1):hover,
.numeral span:nth-child(3):hover { color: var(--brand-500); }
.numeral span:nth-child(2):hover { color: var(--ink-600); }

/* ── copy ── */
.copy {
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: rise .7s .44s cubic-bezier(.22,1,.36,1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.copy h1 {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  color: var(--paper);
}

.copy p {
  font-size: 16px;
  color: var(--ink-400);
  line-height: 1.6;
}

.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}


/* ── footer ── */
footer {
  text-align: center;
  padding: 24px 32px;
  border-top: 1px solid rgba(255,255,255,.06);
}
footer p {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-700);
}