/* ============================================================
   Auth screens (sign in / register / passwords) — artboard 05.
   Dark harbor-ink aside (560px at full width) + fog main with
   one centered white bordered card. The aside ground is the
   fixed neutral --ink, so its companion slate text tints are
   literal hex (they are ink-derived, never accent-derived).
   ============================================================ */

.auth-wrap{ min-height:100vh; display:grid; grid-template-columns: clamp(420px, 39vw, 560px) 1fr; }
@media (max-width:860px){ .auth-wrap{ grid-template-columns:1fr; } }

/* ---- Dark aside: brand top, pitch centered, quote pinned bottom ---- */
.auth-aside{
  background:var(--ink); padding:48px 56px;
  display:flex; flex-direction:column;
}
@media (max-width:860px){ .auth-aside{ display:none; } }
.auth-spacer{ flex:1 1 0; }

.auth-brand{ display:flex; align-items:center; gap:10px; }
.auth-brand svg{ flex-shrink:0; }
.auth-brand .word{
  font-family:var(--serif); font-size:21px; font-weight:600;
  letter-spacing:-0.01em; line-height:26px; color:#FFFFFF;
}

.auth-pitch{ display:flex; flex-direction:column; gap:22px; max-width:448px; }
.auth-pitch h2{
  margin:0; font-family:var(--serif); font-size:40px; font-weight:500;
  letter-spacing:-0.015em; line-height:48px; color:#FFFFFF;
}
.auth-pitch p{ margin:0; font-family:var(--sans); font-size:15px; line-height:23px; color:#9DB2C2; }

.auth-quote{
  margin:0; border-top:1px solid #2C3E4C; padding-top:24px;
  display:flex; flex-direction:column; gap:12px;
}
.auth-quote blockquote{
  margin:0; font-family:var(--serif); font-style:italic;
  font-size:16px; line-height:24px; color:#C8D6E0;
}
.auth-quote figcaption{
  font-family:var(--mono); font-size:11px; letter-spacing:0.12em;
  line-height:14px; color:#7A8E9C; text-transform:uppercase;
}

/* ---- Fog main: one centered bordered card (no shadow, radius 12) ---- */
.auth-main{ display:flex; align-items:center; justify-content:center; padding:48px 24px; }
.auth-card{
  width:100%; max-width:400px;
  background:var(--surface); border:1px solid var(--rule-2);
  border-radius:var(--radius-lg); padding:36px;
}
.auth-card .head{ margin-bottom:22px; }
.auth-card h1{
  font-family:var(--serif); font-size:28px; font-weight:500;
  letter-spacing:-0.015em; line-height:34px; margin:0 0 6px;
}
.auth-card .sub{ font-size:13.5px; line-height:18px; color:var(--ink-3); margin:0; }
.auth-card .sub strong{ font-weight:600; color:var(--ink-2); }

.auth-card .field{ margin-bottom:22px; }
.auth-card .input{ height:38px; padding:0 12px; font-size:13.5px; border-radius:7px; }
/* PASSWORD caps label row with the right-aligned "Forgot?" link. */
.auth-card .label-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.auth-card .label-row label{ margin-bottom:0; }
.auth-card .label-row .forgot{ font-size:12px; font-weight:500; line-height:16px; color:var(--accent); }
.auth-card .label-row .forgot:hover{ color:var(--accent-ink); }

.auth-card .btn.primary{
  width:100%; justify-content:center; height:40px;
  font-size:14px; border-radius:8px;
}
.auth-card .alt{ margin:22px 0 0; font-size:12.5px; line-height:16px; color:var(--ink-3); text-align:center; }
.auth-card .alt a{ color:var(--accent); font-weight:500; }
.auth-card .errors{
  background:var(--bad-soft); color:var(--bad-ink); border:1px solid var(--bad);
  border-radius:6px; padding:10px 12px; font-size:12.5px; margin-bottom:22px;
}
.auth-card .errors ul{ margin:4px 0 0; padding-left:18px; }