/* The only page the signed-out ever see: the old OT wallpaper and the way in. Nothing else. */
* { box-sizing: border-box; }
body.login {
  margin: 0;
  min-height: 100vh;
  background: #000 url("/static/img/bg.jpg") center / cover no-repeat;
  font-family: var(--body);
}
/* Pinned under the ONLYTAMS logo, which sits at x 70%, y 62% of the 1920x1080 wallpaper.
   With cover + center the image is max(100vw, 177.78vh) wide, max(56.25vw, 100vh) tall. */
.login-box {
  position: absolute;
  left: calc(50% + 0.198 * max(100vw, 177.78vh));
  top: calc(50% + 0.16 * max(56.25vw, 100vh));
  transform: translateX(-50%);
  width: min(22rem, calc(100% - 32px));
  display: flex; flex-direction: column; gap: 0.7rem;
}
.login-btn, .dev-login input {
  display: block; width: 100%;
  text-align: center;
  font-family: var(--display); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9rem;
  color: #f0f0f2;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(255, 20, 147, 0.7);
  padding: 0.75rem 1rem;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.login-btn:hover { background: rgba(255, 20, 147, 0.25); border-color: #ff1493; }
.dev-login input { text-transform: none; }

/* phones: the photo crops to Tam, buttons sit at the bottom */
@media (max-width: 700px) {
  body.login { background-position: 22% center; }
  .login-box { left: 50%; top: auto; bottom: 10vh; }
}