.login-body { font-synthesis: none; }
.login-body--photographic { position: relative; isolation: isolate; background: var(--surface); }
.login-body--photographic .login-page { grid-template-rows: 1fr; place-items: center; width: 50%; padding: var(--space-6); }
.login-background { position: fixed; inset: 0 0 0 50%; z-index: -1; background: var(--surface); }
.login-photo { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s ease; }
.login-photo.is-active { opacity: 1; }
.login-photo__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.login-photo__credit { position: absolute; z-index: 1; left: var(--space-6); bottom: var(--space-6); padding: var(--space-2); color: var(--ink); background: var(--surface); font-size: var(--text-meta); font-weight: 400; line-height: var(--line-meta); }
.login-body--photographic .login-brand { display: block; margin-bottom: var(--space-8); color: var(--accent); }
.login-body--photographic .login-panel { width: 100%; color: var(--ink); }
.login-body--photographic .login-header { margin-bottom: var(--space-2); }
.login-body--photographic .login-panel h1 { font-weight: 600; letter-spacing: var(--tracking-ui); }
.login-body--photographic .login-description { margin-bottom: var(--space-4); }
.login-body--photographic .privacy-footer { width: 50%; }
@media (max-width: 700px) {
  .login-body--photographic .login-page, .login-body--photographic .privacy-footer { width: 100%; background: var(--surface); }
  .login-background { position: relative; inset: auto; z-index: 0; min-height: 40vh; width: 100%; }
  .login-body--photographic .login-page { display: flex; flex-direction: column; gap: var(--space-6); }
}
@media (prefers-reduced-motion: reduce) { .login-photo { transition: none; } }