.error {
  /* centered, breathable, looks good even if nav is sticky */
  min-height: min(70vh, 680px);
  padding: var(--space-7) var(--space-4);
  display: grid;
  grid-auto-rows: min-content;
  justify-items: center;
  gap: var(--space-3);
  text-align: center;
}
/* tighten vertically on small screens */
@media (max-width: 520px) {
    .error { gap: var(--space-2); }
}

.error .kicker {
  color: var(--accent);
}

.error h1 {
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-huge);
  margin: var(--space-1) 0 var(--space-1);
}

.error p.max-read {
  max-width: 62ch;
}

.error .btn + .btn {
  margin-left: var(--space-2);
}

.error-illus {
  width: calc(2.5 * var(--font-size-hugge)); /* need to comfortably fit 500 */
  height: calc(2.5 * var(--font-size-hugge));
  border-radius: 999px;
  background: var(--accent-muted-bg);
  border: 2px solid var(--accent-muted-border);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-2);
  color: var(--accent);
  font-weight: var(--font-weight-black);
  font-family: var(--font-sans);
  user-select: none;
}

/* If you want big code numerals inside the badge, add data-code="404" or "500" on the .error section */
.error[data-code="400"] .error-illus::after { content: "400"; font-size: var(--font-size-hugge); }
.error[data-code="401"] .error-illus::after { content: "401"; font-size: var(--font-size-hugge); }
.error[data-code="403"] .error-illus::after { content: "403"; font-size: var(--font-size-hugge); }
.error[data-code="404"] .error-illus::after { content: "404"; font-size: var(--font-size-hugge); }
.error[data-code="405"] .error-illus::after { content: "405"; font-size: var(--font-size-hugge); }
.error[data-code="406"] .error-illus::after { content: "406"; font-size: var(--font-size-hugge); }
.error[data-code="409"] .error-illus::after { content: "409"; font-size: var(--font-size-hugge); }
.error[data-code="410"] .error-illus::after { content: "410"; font-size: var(--font-size-hugge); }
.error[data-code="413"] .error-illus::after { content: "413"; font-size: var(--font-size-hugge); }
.error[data-code="500"] .error-illus::after { content: "500"; font-size: var(--font-size-hugge); }

.error a { text-decoration: none; }