.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--space-8) var(--space-6);
}

.masthead { text-align: center; }
.masthead .wordmark { font-size: clamp(var(--text-4xl), 6vw, var(--text-5xl)); }
.masthead .rule { margin: var(--space-4) auto 0; }

.login-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) 0;
}

.login-card { width: 100%; max-width: 420px; padding: var(--space-12) var(--space-10); }
.login-card .eyebrow { margin-bottom: var(--space-3); }
.login-card .card-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 400; letter-spacing: var(--tracking-snug); line-height: var(--leading-tight); margin-bottom: var(--space-2); }
.login-card .card-subtitle { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-8); }

.login-card .form-group { margin-bottom: var(--space-5); }
.login-card .btn { margin-top: var(--space-2); }

.colophon-footer { text-align: center; }

@media (max-width: 480px) {
  .login-card { padding: var(--space-10) var(--space-6); }
}