@font-face {
  font-family: Poppins;
  src: url('/assets/poppins-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Poppins;
  src: url('/assets/poppins-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
.login-page {
  background: radial-gradient(ellipse at 20% 25%, #f6b7bd55, transparent 56%), var(--paper);
  font-family: Poppins, sans-serif;
}
.login-shell {
  width: min(100% - 2rem, 57rem);
  margin: clamp(1.25rem, 7vw, 5rem) auto;
}
.login-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.login-brand img {
  display: block;
  width: 5rem;
  height: 5rem;
  object-fit: contain;
}
.login-brand span {
  font-size: .85rem;
  color: var(--wine);
}
.login-card {
  display: grid;
  border: 1px solid var(--pink);
  border-radius: 1rem;
  overflow: hidden;
  background: white;
  box-shadow: 0 1.25rem 3.25rem #70122c18;
}
.login-intro, .login-form {
  padding: clamp(1.25rem, 5vw, 3.25rem);
}
.login-intro {
  background: var(--wine);
  color: white;
}
.login-intro h1 {
  color: white;
  margin: .3em 0;
  font-size: clamp(2.65rem, 6vw, 4.6rem);
}
.login-intro .eyebrow {
  color: var(--pink);
}
.login-intro p:last-child {
  max-width: 29ch;
  margin-bottom: 0;
}
.login-form button {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 1.3rem;
}
.login-error {
  padding: .55rem .7rem;
  border-inline-start: 3px solid var(--wine);
  background: var(--control-hover);
  color: var(--wine);
  font-size: .88rem;
}
@media (min-width: 720px) {
  .login-card { grid-template-columns: 1.05fr 1fr; }
  .login-intro { align-content: center; }
}