@font-face {
  font-family: Manrope;
  src: url('./fonts/manrope-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  color: #28203e;
  font: 500 15px/1.5 Manrope, sans-serif;
  background:
    radial-gradient(ellipse at 0% 24%, #efe7fb 0%, transparent 52%),
    radial-gradient(ellipse at 98% 46%, #ece2fa 0%, transparent 55%),
    linear-gradient(155deg, #fcfafc 25%, #faf5fa 100%);
}

.login-header { padding: 24px clamp(22px, 5vw, 72px); }
.brand { color: inherit; text-decoration: none; font-size: 19px; font-weight: 800; }

.login-main {
  width: min(100% - 44px, 420px);
  margin: clamp(42px, 12vh, 122px) auto 0;
  padding-bottom: 40px;
  text-align: center;
}

.login-kicker {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .25em;
  text-transform: uppercase;
}

.login-main h1 {
  margin: 0;
  font-size: clamp(48px, 6vw, 68px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.055em;
}

.login-description { margin: 16px 0 22px; color: #524765; font-size: 14px; }
.login-main form { display: grid; gap: 12px; width: min(100%, 292px); margin: auto; }
.login-main label { display: grid; gap: 4px; text-align: left; font-size: 13px; font-weight: 700; }
.login-main input, .login-main button { font: inherit; border-radius: 9px; min-height: 42px; }
.login-main input { width: 100%; padding: 7px 11px; border: 1px solid #d4c8e2; background: #ffffffad; color: inherit; }
.login-main button {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  padding: 7px 22px;
  border: 0;
  background: #513d80;
  color: white;
  font-weight: 750;
  cursor: pointer;
}
.login-main button:hover { background: #43316e; }
.login-main button svg { width: 16px; height: 16px; }
.form-error { margin: 0; color: #8c244a; font-size: 13px; text-align: left; }
:where(a, input, button):focus-visible { outline: 2px solid #6d54a0; outline-offset: 3px; }