/* ============================================================
   Members login screen
   ============================================================ */

.login-body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background:
    radial-gradient(120% 90% at 50% -10%, #32435f 0%, var(--color-navy) 45%, var(--color-navy-deep) 100%);
}

.login { width: 100%; display: grid; place-items: center; }

.login__card {
  width: min(100%, 420px);
  background: var(--color-surface-2);
  border: 1px solid var(--color-surface-line);
  border-top: 4px solid var(--color-gold);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 5vw, 2.75rem);
  box-shadow: var(--shadow-lift);
  text-align: center;
}

.login__home {
  display: inline-block; margin-bottom: var(--space-6);
  font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none;
}
.login__home:hover { color: var(--color-gold-deep); }

.login__ornament { width: 54px; color: var(--color-gold); margin: 0 auto var(--space-4); }
.login__eyebrow {
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  font-size: var(--text-xs); color: var(--color-gold-deep); font-weight: 700; margin: 0 0 var(--space-1);
}
.login__card h1 { font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.login__lead { color: var(--color-text-muted); margin: 0 0 var(--space-6); font-size: var(--text-sm); }

.login__form { text-align: left; display: grid; gap: var(--space-4); }
.field { display: grid; gap: var(--space-1); }
.field label {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-muted); font-weight: 700;
}
.field input {
  font: inherit; width: 100%; color: var(--color-text); background: #fff;
  border: 1.5px solid var(--color-surface-line); border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.field input:hover { border-color: var(--color-gold-soft); }
.field input:focus-visible {
  outline: none; border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.22);
}

.btn-gold {
  font: inherit; font-weight: 700; cursor: pointer;
  color: var(--color-navy-deep);
  background: linear-gradient(var(--color-gold-soft), var(--color-gold));
  border: 0; border-radius: 999px; padding: 0.8rem 1rem;
  transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(201, 162, 74, 0.35); }
.btn-gold:active { transform: translateY(0); }

.login__notice {
  background: #fbf6e8; border: 1px solid #ecd9a6; color: #7a5f1c;
  padding: var(--space-3); border-radius: var(--radius); font-size: var(--text-sm); margin: 0;
}
.login__error {
  margin: 0; color: #a12b2b; background: #fbeaea; border: 1px solid #ecc2c2;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius); font-size: var(--text-sm);
}
.login__note { margin: var(--space-6) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }