/* Sign-in page in the public site's identity: obsidian, antique gold, ivory.
   Loaded after app.css and scoped to body.auth, so the application itself is untouched. */

body.auth {
  --a-obsidian: #0A0A0B;
  --a-charcoal: #111113;
  --a-gold: #B08D57;
  --a-gold-hi: #CDAE74;
  --a-ivory: #EDE6D8;
  --a-dim: rgba(237, 230, 216, .68);
  --a-silver: #9B9A97;
  --a-line: rgba(237, 230, 216, .14);
  background: var(--a-obsidian);
  color: var(--a-ivory);
}

body.auth .auth-aside { background: var(--a-obsidian); }
body.auth .auth-film { position: absolute; inset: 0; overflow: hidden; }
body.auth .auth-film img, body.auth .auth-film video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  animation: auth-drift 34s ease-in-out infinite alternate;
}
@keyframes auth-drift { from { transform: scale(1.02); } to { transform: scale(1.12); } }
body.auth .auth-aside-veil {
  background:
    radial-gradient(120% 90% at 30% 40%, transparent 0%, rgba(10, 10, 11, .6) 75%, rgba(10, 10, 11, .92) 100%),
    linear-gradient(180deg, rgba(10, 10, 11, .65) 0%, rgba(10, 10, 11, .15) 35%, rgba(10, 10, 11, .9) 100%);
}
body.auth .auth-mark { background: none; border: 0; color: var(--a-gold-hi); }
body.auth .auth-brand-name { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .42em; text-transform: uppercase; color: var(--a-ivory); }
body.auth .auth-aside .auth-brand-sub { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--a-silver); }
body.auth .auth-quote {
  font-family: 'Bodoni Moda', 'Newsreader', Georgia, serif; font-weight: 500;
  font-size: clamp(2.6rem, 4.6vw, 4.6rem); line-height: .92; letter-spacing: -.02em;
  text-transform: uppercase; color: var(--a-ivory);
}
body.auth .auth-quote em { font-weight: 400; color: var(--a-gold-hi); }
body.auth .auth-rule { display: block; width: 110px; height: 1px; margin: 26px 0 24px; background: linear-gradient(90deg, var(--a-gold-hi), #7A5F35); }
body.auth .auth-points svg { color: var(--a-gold-hi); }
body.auth .auth-points span { color: var(--a-dim); }
body.auth .auth-aside-foot { color: var(--a-silver); font-family: 'IBM Plex Mono', monospace; letter-spacing: .06em; }

body.auth .auth-main { background: var(--a-charcoal); border-inline-start: 1px solid var(--a-line); }
body.auth .auth-head h1 { font-family: 'Bodoni Moda', 'Newsreader', Georgia, serif; font-weight: 400; font-size: 44px; letter-spacing: -.015em; color: var(--a-ivory); }
body.auth .auth-head p { color: var(--a-dim); }
body.auth .auth-fields .label { font: 500 10.5px/1.4 'Archivo', sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--a-gold-hi); }
body.auth .auth-fields .input {
  background: rgba(10, 10, 11, .6); color: var(--a-ivory);
  border: 1px solid var(--a-line); border-radius: 0; padding: 13px 14px;
}
body.auth .auth-fields .input::placeholder { color: rgba(237, 230, 216, .35); }
body.auth .auth-fields .input:focus { border-color: var(--a-gold-hi); box-shadow: 0 0 0 1px rgba(205, 174, 116, .25); outline: none; }
body.auth .auth-fields .input:-webkit-autofill { -webkit-text-fill-color: var(--a-ivory); -webkit-box-shadow: 0 0 0 40px #141416 inset; caret-color: var(--a-ivory); }
body.auth .btn-primary {
  background: var(--a-gold); border-color: var(--a-gold); color: var(--a-obsidian);
  border-radius: 0; font: 600 12px/1 'Archivo', sans-serif; letter-spacing: .22em; text-transform: uppercase;
}
body.auth .btn-primary:hover { background: var(--a-gold-hi); border-color: var(--a-gold-hi); }
body.auth .alert.error { border-radius: 0; }
body.auth .auth-foot { border-top-color: var(--a-line); }
body.auth .auth-foot a, body.auth .auth-demo-note, body.auth .auth-demo-note a { color: var(--a-silver); }
body.auth .auth-foot a:hover { color: var(--a-gold-hi); }
body.auth .auth-brand-sm .auth-brand-name { color: var(--a-ivory); }

@media (prefers-reduced-motion: reduce) {
  body.auth .auth-film video { display: none; }
  body.auth .auth-film img { animation: none; }
}