.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.login-card {
  width: min(440px, 100%);
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px;
  background: var(--cream);
  color: var(--navy);
  border: 3px solid var(--cream);
  box-shadow: 8px 8px 0 var(--red);
}
.login-card .brand { margin-bottom: 12px; }
.login-card .display { font-size: clamp(40px, 9vw, 56px); }
.login-card .btn-primary { align-self: flex-start; min-height: 48px; }
.login-card :focus-visible { outline-color: var(--red); }
.login-error { margin: 0; min-height: 1.4em; color: var(--red-dark); font-weight: 700; }