.auth {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.auth-art { position: relative; overflow: hidden; background: #000; }
.auth-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; }
/* What the app is, set large over the picture, on a scrim so it reads on any frame. */
.auth-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .85), rgb(0 0 0 / 0) 55%); }
.auth-line { position: absolute; left: 40px; right: 40px; bottom: 64px; z-index: 1; display: grid; gap: 12px; color: #fff; }
.auth-line p { margin: 0; max-width: 14ch; font: 800 clamp(40px, 4.4vw, 64px)/.98 var(--display); font-stretch: 88%; letter-spacing: -0.02em; }
.auth-line span { color: #d4d4d4; font-size: 16px; }
.auth-art .credit {
  position: absolute; left: 40px; bottom: 22px; z-index: 1;
  color: #bdbdbd;
  font-size: 12px;
}
.auth-art .credit a { color: inherit; }

.auth-side {
  display: flex;
  flex-direction: column;
  padding: 28px 32px;
  background: var(--bg);
}

.auth-main {
  flex: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 32px 0;
  text-align: center;
}
#status { display: grid; justify-items: center; gap: 14px; }
#status:empty { display: none; }

.auth-main h1 {
  margin: 0;
  font: 800 34px/1.05 var(--display);
  font-stretch: 88%;
  letter-spacing: -0.01em;
}
.auth-main p { margin: 0; max-width: 40ch; color: var(--text-2); }

.auth-foot { color: var(--text-2); font-size: 13px; text-align: center; }
.auth-foot a { color: var(--text); }

@media (max-width: 860px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-art { display: none; }
  .auth-side { padding: 20px 16px; }
}