/* /login and /signup: photography, a readable account panel and explicit availability. */

.auth-page { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 100px); padding-block: 48px 96px; align-items: center; }
.auth-story { position: relative; height: 700px; border-radius: 24px; overflow: hidden; }
.auth-story > img { height: 100%; width: 100%; object-fit: cover; object-position: 68% center; }
.auth-story::after { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(transparent, #0a0813e0); pointer-events: none; }
.auth-story > div { position: absolute; bottom: 40px; left: 36px; right: 28px; color: #fff; z-index: 1; }
.auth-story span { font-size: 11px; letter-spacing: 1.2px; }
.auth-story p { font-size: clamp(40px, 4.4vw, 64px); line-height: 1.06; letter-spacing: -.045em; margin-top: 20px; }
.auth-story em { color: var(--lime); font-style: normal; }

.auth-card { min-width: 0; max-width: 480px; }
.auth-card > .section-index { font-size: 11px; }
.auth-card h1 { font-size: clamp(42px, 4vw, 60px); letter-spacing: -.045em; line-height: 1.08; margin-top: 24px; text-wrap: balance; }
.auth-card > p { color: var(--muted); font-size: 17px; line-height: 1.7; margin-top: 24px; max-width: 46ch; }
.auth-providers { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.auth-app { margin-top: 24px; }
.provider-button { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 58px; padding: 15px 20px; border-radius: 8px; font-size: 16px; font-weight: 500; transition: background .2s, border-color .2s, transform .2s; }
.provider-button svg { flex-shrink: 0; }
.provider-apple { background: var(--ink); color: var(--inverse); }
.provider-google { border: 1px solid var(--muted); color: var(--ink); }
.provider-button:disabled { cursor: not-allowed; }
@media (hover: hover) {
  a.provider-apple:hover { background: color-mix(in srgb, var(--ink) 88%, var(--paper)); }
  a.provider-google:hover { background: var(--surface); }
}
a.provider-button:active { transform: translateY(1px); }

.auth-card > .auth-availability { font-size: 14px; line-height: 1.7; margin-top: 20px; border-left: 2px solid var(--accent-text); padding: 14px 16px; background: var(--surface); }
.auth-card > .auth-privacy { font-size: 13px; line-height: 1.8; margin-top: 22px; }
.auth-error { margin-top: 24px; padding: 14px 16px; border-left: 2px solid var(--error); background: var(--surface); font-size: 14px; line-height: 1.7; }
.auth-error > p + p { margin-top: 6px; }
.auth-error .auth-error-code { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.auth-error a { text-decoration: underline; text-underline-offset: 3px; }
.auth-privacy a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.auth-secondary { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 28px; }
.auth-secondary p { font-size: 14px; line-height: 1.7; color: var(--muted); }
.auth-secondary p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; margin-left: 6px; }
.auth-secondary > .text-link { font-size: 14px; margin-top: 16px; }

@media (max-width: 1100px) {
  .auth-page { gap: 40px; }
  .auth-story { height: 660px; }
  .auth-story > div { left: 28px; bottom: 32px; }
  .auth-story p { font-size: 46px; }
}

@media (max-width: 700px) {
  .auth-page { grid-template-columns: 1fr; padding-block: 40px 64px; gap: 48px; }
  .auth-card { max-width: 540px; width: 100%; justify-self: center; }
  .auth-story { grid-row: 2; height: 380px; border-radius: 20px; }
  .auth-story > div { bottom: 28px; left: 26px; right: 22px; }
  .auth-story p { font-size: clamp(38px, 10vw, 56px); }
  .auth-card h1 { font-size: clamp(42px, 10.5vw, 60px); }
  .auth-card > p { font-size: 16px; }
  .auth-card > .auth-availability { font-size: 14px; }
  .auth-card > .auth-privacy { font-size: 13px; }
}