/* 31UP QR — branded sign-in (wp-login.php) */
@font-face { font-family: "Bricolage Grotesque"; font-weight: 200 800; font-display: swap; src: url(../fonts/bricolage-grotesque-latin-wght.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 400; font-display: swap; src: url(../fonts/instrument-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 600; font-display: swap; src: url(../fonts/instrument-sans-latin-600-normal.woff2) format("woff2"); }
body.login { background: #eef3f8; color: #0b1a3a; font-family: "Instrument Sans", system-ui, sans-serif; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); min-height: 100vh; }
.qr31t-login-side { background: #0b1a3a; color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 8vw; grid-row: 1 / span 5; }
.qr31t-login-logo { width: min(420px, 100%); height: auto; display: block; }
.qr31t-login-side::after { content: ""; display: block; height: 4px; width: 120px; margin-top: 30px; border-radius: 4px; background: linear-gradient(90deg, #1673ff, #14c8e8 55%, #b5e61d); }
.qr31t-login-side p { font: 800 clamp(30px, 3.6vw, 52px)/1.02 "Bricolage Grotesque", sans-serif; letter-spacing: -0.03em; max-width: 13ch; margin: 28px 0 0; }
#login { grid-column: 2; width: auto; max-width: 400px; padding: 9vh 28px 40px; margin: 0 auto; }
.login h1 a { display: block; text-decoration: none; width: 220px; height: 52px; text-indent: -9999px; overflow: hidden; margin: 0 0 22px; background-size: contain; background-position: left center; background-repeat: no-repeat; }
.login h1 a:focus { box-shadow: none; outline: 3px solid var(--brand); }
.login form { border: 0; border-radius: 18px; box-shadow: 0 14px 40px rgba(11,26,58,.1); padding: 26px 24px; margin-top: 0; }
.login label { font-weight: 600; font-size: 14px; color: #0b1a3a; }
.login input[type=text], .login input[type=password], .login input[type=email] { border: 1.5px solid #cfd3e0; border-radius: 12px; padding: 8px 12px; font-size: 17px; box-shadow: none; }
.login input[type=text]:focus, .login input[type=password]:focus, .login input[type=email]:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(22,115,255,.18); }
.wp-core-ui .button-primary { color: #fff; background: var(--brand); border-color: var(--brand); border-radius: 12px; min-height: 44px; padding: 0 22px; font-weight: 600; font-size: 16px; box-shadow: none; text-shadow: none; }
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus { background: var(--brand); border-color: var(--brand); filter: brightness(.93); }
.login #nav, .login #backtoblog { padding: 0 4px; }
.login #nav a, .login #backtoblog a { color: #0b1a3a; font-weight: 600; }
.login .message, .login .notice, .login #login_error { border-radius: 12px; border-left-color: var(--brand); }
.login .language-switcher { grid-column: 2; }
.login .privacy-policy-page-link { grid-column: 2; }
@media (max-width: 820px) {
  body.login { display: block; }
  .qr31t-login-side { padding: 28px 24px; flex-direction: row; align-items: center; gap: 16px; }
  .qr31t-login-side p { font-size: 20px; margin: 0; max-width: none; }
  .qr31t-login-logo { width: 150px; flex: none; }
  .qr31t-login-side::after { display: none; }
  #login { padding-top: 28px; }
}