body.login {
  background: #faf8f2;
  color: #243220;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: clamp(32px, 6vh, 72px) clamp(28px, 8vw, 140px);
}

body.login::before {
  content: "";
  position: fixed;
  inset: 0 48% 0 0;
  background: #deded3 url("login-hero.webp") center / cover;
  pointer-events: none;
}

.login #login {
  position: relative;
  width: min(400px, 100%);
  padding: 0;
  margin: 0;
}

.login h1 a {
  background: url("logo.webp") left center / contain no-repeat;
  width: 200px;
  height: 68px;
  margin: 0 0 28px;
}

.articoli-login-intro {
  margin-bottom: 24px;
}

.articoli-login-intro p:first-child {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.articoli-login-intro h1 {
  font:
    400 clamp(28px, 4vw, 43px) / 1.1 Georgia,
    serif;
  letter-spacing: -0.035em;
  text-align: left;
  margin: 10px 0;
}

.login form {
  background: #fff;
  color: #243220;
  border: 1px solid #deded3;
  box-shadow: none;
  margin-top: 0;
  padding: 24px;
}

.login .button-primary {
  background: #243220;
  border-color: #243220;
}

.login .button-primary:hover,
.login .button-primary:focus {
  background: #37482f;
  border-color: #37482f;
}

.login input:focus {
  border-color: #37482f;
  box-shadow: 0 0 0 1px #37482f;
}

.login #nav,
.login #backtoblog {
  padding: 0;
  margin: 16px 0 0;
}

.login #nav a,
.login #backtoblog a,
.login .button.wp-hide-pw {
  color: #243220;
}

.login .language-switcher {
  width: min(400px, 100%);
  margin: 20px 0 0;
  text-align: left;
}

@media (max-width: 1000px) {
  body.login {
    align-items: center;
    padding: 32px 24px;
  }

  body.login::before {
    display: none;
  }
}