/* ============================================================
   Altered.Works — Membership / auth surfaces
   Shared by subscribe, signin, signup, account.
   ============================================================ */

/* ---- Centered auth shell ---- */
.auth-wrap {
  min-height: calc(100vh - 64px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.auth-aside {
  background: var(--inverse-bg);
  color: var(--inverse-ink);
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 5vw, 4.5rem);
  display: flex; flex-direction: column; justify-content: space-between;
}
.auth-aside .altered { position: absolute; inset: 0; z-index: 0; opacity: 0.5; }
.auth-aside .altered::before { background: linear-gradient(160deg, oklch(0.20 0.018 250 / 0.85) 0%, oklch(0.20 0.018 250 / 0.55) 50%, oklch(0.42 0.045 162 / 0.30) 100%); }
.auth-aside > * { position: relative; z-index: 1; }
.auth-aside .lockup { display: flex; align-items: center; gap: 0.65rem; }
.auth-aside .lockup .ap-mark { color: var(--inverse-ink); }
.auth-aside .lockup .ap-mark svg { width: 24px; height: 19px; }
.auth-aside .lockup .wordmark { color: var(--inverse-ink); font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; }
.auth-aside .pitch h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.75rem); color: var(--inverse-ink); letter-spacing: -0.02em; line-height: 1.08; margin-bottom: 1.1rem; text-wrap: balance; }
.auth-aside .pitch h2 .alt { color: var(--signal-on-dark); font-family: var(--serif); font-style: italic; font-weight: 500; }
.auth-aside .pitch p { font-family: var(--serif); font-size: var(--fs-body); line-height: 1.6; color: var(--inverse-muted); max-width: 42ch; }
.auth-aside .aside-foot { font-family: var(--mono); font-size: var(--fs-meta); color: var(--inverse-muted); }

.auth-main {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter);
}
.auth-card { width: 100%; max-width: 420px; }
.auth-card .eyebrow { margin-bottom: 1rem; }
.auth-card h1 { font-family: var(--display); font-weight: 700; font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 0.75rem; }
.auth-card .sub { font-family: var(--serif); font-size: var(--fs-body); color: var(--ink-2); margin-bottom: 2rem; line-height: 1.5; }
.auth-card .sub a { color: var(--signal-strong); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Form fields ---- */
.field-group { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-family: var(--grotesk); font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.field input {
  width: 100%; padding: 0.9rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  font-family: var(--grotesk); font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease-out-quart);
}
.field input::placeholder { color: var(--muted); }
.field input:focus-visible { outline: 2px solid var(--signal); border-color: var(--signal); }
.field .hint { font-family: var(--serif); font-size: var(--fs-small); color: var(--muted); }
.field-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.field-row a { font-family: var(--mono); font-size: var(--fs-meta); color: var(--signal-strong); text-decoration: underline; text-underline-offset: 2px; }

.auth-card .btn-block { width: 100%; justify-content: center; padding-block: 1rem; }

/* ---- SSO buttons ---- */
.sso-row { display: grid; gap: 0.6rem; margin-bottom: 1.5rem; }
.sso-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--ink);
  font-family: var(--grotesk); font-size: var(--fs-small); font-weight: 500;
  transition: border-color var(--dur-fast) var(--ease-out-quart), background var(--dur-fast) var(--ease-out-quart);
}
.sso-btn:hover { border-color: var(--ink); background: var(--surface); }
.sso-btn svg { width: 18px; height: 18px; }

.divider { display: flex; align-items: center; gap: 1rem; margin-block: 1.5rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.divider span { font-family: var(--mono); font-size: var(--fs-meta); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

.auth-fine { font-family: var(--serif); font-size: var(--fs-small); color: var(--muted); line-height: 1.5; margin-top: 1.5rem; }
.auth-fine a { color: var(--signal-strong); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Back link ---- */
.auth-back { font-family: var(--mono); font-size: var(--fs-meta); color: var(--muted); display: inline-flex; gap: 0.4rem; align-items: center; margin-bottom: 2rem; transition: color var(--dur-fast) var(--ease-out-quart); }
.auth-back:hover { color: var(--signal-strong); }

@media (max-width: 860px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-main { min-height: calc(100vh - 64px); }
}