/* ============================================================
 * login.html — auth screen
 * ============================================================ */

.login-section {
  min-height: calc(100dvh - var(--header-height));
  display: grid;
  place-items: center;
  padding: var(--space-12) var(--gutter);
  background: var(--ga-cream);
}

.login-card {
  width: 100%;
  max-width: 440px;
  background: var(--ga-white);
  border-radius: var(--radius-2xl);
  padding: clamp(32px, 5vw, 56px);
  box-shadow: var(--shadow-elevated);
}

.login-card__title {
  font-family: var(--ga-display-font);
  font-weight: var(--weight-black);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  margin-bottom: var(--space-3);
}
.login-card__title em {
  display: inline-block;
  font-style: normal;
  background: var(--ga-lime);
  padding: 0 0.18em;
  margin: 0 0.04em 0 -0.06em;
  border-radius: var(--radius-xs);
  line-height: 1;
}

.login-card__sub {
  font-size: var(--text-base);
  color: var(--ga-graphite);
  margin-bottom: var(--space-8);
  text-transform: lowercase;
}

.login-card__error {
  background: rgba(225, 29, 44, 0.08);
  color: var(--ga-error);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  text-transform: lowercase;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.login-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.login-form__label {
  font-size: var(--text-2xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ga-mute);
}
.login-form__field input {
  height: var(--input-height);
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--ga-line);
  background: var(--ga-card);
  font: inherit;
  color: var(--ga-black);
  transition: border var(--duration-fast) var(--ease-out-expo),
              background var(--duration-fast) var(--ease-out-expo);
}
.login-form__field input:focus {
  outline: none;
  border-color: var(--ga-black);
  background: var(--ga-white);
}
.login-form__submit {
  margin-top: var(--space-4);
}

.login-card__hint {
  margin-top: var(--space-8);
  text-align: center;
}