.login-page { background: var(--home-background); }
.login-page .site-header { background: #0e1519; }
.login-page .page-shell { width: 100%; padding: 0; }
.login-page .messages { padding: 16px var(--home-gutter); margin: 0; }
.login-journey { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); align-items: center; gap: clamp(40px, 6vw, 110px); flex: 1; min-height: 0; padding: 48px var(--home-gutter); }
.login-landmarks { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(0deg, #12110f 0%, rgb(18 17 15 / 88%) 13%, transparent 65%), linear-gradient(90deg, rgb(18 17 15 / 12%) 35%, #12110f 85%), url("../img/ui/login-landmarks.jpg"); background-size: cover; background-position: center, center, left center; }
.login-story { align-self: end; min-width: 0; padding-top: 220px; }
.login-story h1 { margin: 14px 0 18px; font: 400 clamp(2rem, 3.3vw, 3.4rem)/1.08 Georgia, "Times New Roman", serif; letter-spacing: -.04em; text-wrap: balance; }
.login-story h1 em { color: var(--home-accent); font-weight: 400; }
.login-story > p:not(.home-kicker) { margin: 10px 0 0; font-size: 1rem; }
.login-story > .login-description { max-width: 510px; color: var(--home-muted); font-size: .95rem; line-height: 1.8; }
.login-page .login-form { display: grid; gap: 18px; width: 100%; padding: clamp(22px, 2.2vw, 30px); background: rgb(28 27 23 / 96%); border-color: #655b4c; box-shadow: 0 24px 80px rgb(0 0 0 / 25%); }
.login-form .eyebrow { margin: 0; font-size: .65rem; }
.login-form h2 { margin: -6px 0 0; font: 400 clamp(1.75rem, 2.5vw, 2.2rem)/1.12 Georgia, "Times New Roman", serif; letter-spacing: -.035em; }
.login-form-intro { margin: -12px 0 4px; color: var(--home-muted); font-size: .95rem; }
.login-page .login-form .button { width: 100%; justify-content: space-between; margin-top: 6px; }
.login-invite-note { margin: 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--home-muted); text-align: center; font-size: .8rem; line-height: 1.8; }
.login-form .form-errors { padding: 12px; background: #432927; border-left: 3px solid var(--danger); font-size: .9rem; }
.login-form .errorlist { margin: 0; padding-left: 16px; }
.login-page .home-footer { padding: 20px var(--home-gutter); margin: 0; }

@media (max-width: 1000px) {
  .login-journey { gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); padding-block: 48px; }
  .login-story h1 { font-size: clamp(2rem, 3.5vw, 2.6rem); }
}

@media (max-width: 760px) {
  .login-journey { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 24px; padding: 0 var(--home-gutter) 40px; }
  .login-landmarks { bottom: auto; height: 540px; background-size: cover; background-position: center, center, 35% top; background-image: linear-gradient(0deg, #12110f 0%, rgb(18 17 15 / 92%) 25%, transparent 90%), url("../img/ui/login-landmarks.jpg"); }
  .login-story { padding-top: 160px; }
  .login-story h1 { font-size: clamp(2rem, 6vw, 2.6rem); }
  .login-story .home-kicker { font-size: .65rem; }
  .login-page .login-form { max-width: 480px; justify-self: center; }
  .login-page .home-footer { flex-direction: column; gap: 8px; }
}