@font-face {
  font-family: Literata;
  src: url("fonts/literata-roman.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

body.login {
  background: #faf7f4;
  color: #1f1b16;
  font-family: Literata, Georgia, serif;
}

body.login #login {
  width: min(calc(100% - 2.5rem), 26rem);
  padding: clamp(2rem, 7vh, 5rem) 0 2rem;
}

body.login #login h1 a {
  background: none;
  width: auto;
  height: auto;
  margin: 0 0 2rem;
  text-indent: 0;
  font-size: clamp(2rem, 7vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.15;
}

body.login form {
  background: transparent;
  border: 0;
  border-top: 1px solid #88847e;
  box-shadow: none;
  padding: 1.5rem 0;
}

body.login label {
  font-size: 1rem;
  line-height: 1.55;
}

body.login input,
body.login .button {
  font-family: inherit;
}

body.login form .input {
  box-sizing: border-box;
  min-height: 2.75rem;
  padding: .5rem .65rem;
  background: #fffdfa;
  border-color: #88847e;
  border-radius: 0;
  color: #1f1b16;
  font-size: 1.125rem;
}

body.login .button-primary {
  min-height: 2.75rem;
  padding: .45rem 1.25rem;
  border-radius: 0;
  font-size: 1rem;
  box-shadow: none;
}

body.login :is(a, button, input):focus-visible {
  outline: 2px solid var(--mx-login-accent, #10504d);
  outline-offset: 3px;
}

body.login :is(.message, .notice, .success, #login_error) {
  background: #fffdfa;
  box-shadow: none;
}

body.login :is(#nav, #backtoblog) {
  padding: 0;
  font-size: .9375rem;
  line-height: 1.6;
}

body.login :is(#nav, #backtoblog) a {
  color: var(--mx-login-accent, #10504d);
}

body.login .mx-login-marketing {
  margin: .25rem 0 1.25rem;
}

body.login .mx-login-marketing label {
  font-size: .9375rem;
}

body.login.interim-login #login {
  padding-top: 1rem;
}