:root{--bg:#f5f0e8;--white:#fffdf9;--ink:#1a1714;--muted:#4a4540;--border:#d4cfc5;--red:#c13a2a;--red-hover:#a83224;--body:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;--display:"Space Grotesk",var(--body);--mono:"JetBrains Mono",ui-monospace,monospace}
*{box-sizing:border-box}
body.login{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--body)}
body.login #login{width:min(1000px,calc(100% - 48px));padding:6vh 0 36px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto auto auto auto auto auto}
body.login h1{grid-column:1/-1;grid-row:1;margin:0 0 32px;padding:0 0 26px;border-bottom:1px solid var(--border)}
body.login h1 a{background:url('images/serif-logo.png') no-repeat left center;background-size:contain;width:180px;height:40px;margin:0;text-indent:-9999px;padding:0;mix-blend-mode:multiply}
.serif-login-intro{grid-column:1;grid-row:2/7;margin:0;padding:44px;background:var(--ink);color:#fff8ef;display:flex;flex-direction:column;justify-content:center;border:1px solid var(--ink)}
.serif-login-kicker{margin:0 0 24px;color:#f47b68;font:600 12px/1.4 var(--mono);letter-spacing:.08em}
.serif-login-intro h2{margin:0 0 20px;font:700 clamp(36px,4.1vw,50px)/1 var(--display);letter-spacing:-.05em;text-wrap:balance}
.serif-login-intro p:last-child{margin:0;color:#c7beb3;font-size:16px;max-width:30ch}
body.login form{grid-column:2;grid-row:3;margin:0;padding:36px;border:0;border-left:1px solid var(--border);border-right:1px solid var(--border);border-top:1px solid var(--border);border-radius:0;background:var(--white);box-shadow:none}
body.login label{margin-bottom:8px;color:var(--muted);font:600 12px/1.5 var(--mono)}
body.login .input{min-height:48px;border:1px solid var(--border);border-radius:0;background:var(--bg);color:var(--ink);font:400 18px/1.5 var(--body);padding:10px 13px;box-shadow:none}
body.login .forgetmenot label{font:400 14px/1.5 var(--body)}
body.login input[type=checkbox]{accent-color:var(--red);border-color:var(--border);border-radius:0}
body.login .button-primary{min-height:48px;padding:10px 20px;border:1px solid var(--red);border-radius:0;background:var(--red);color:white;font:700 14px/1.5 var(--body);box-shadow:none;text-shadow:none}
body.login .button-primary:hover,body.login .button-primary:focus{border-color:var(--red-hover);background:var(--red-hover);color:white}
body.login .button.wp-hide-pw{min-width:44px;min-height:48px;top:0;right:0;color:var(--muted)}
body.login a{color:var(--muted)}
body.login a:hover{color:var(--red)}
body.login a:focus-visible,body.login input:focus-visible,body.login button:focus-visible{outline:3px solid var(--red-hover);outline-offset:3px}
body.login #nav,body.login #backtoblog{grid-column:2;margin:0;padding:12px 36px;border-left:1px solid var(--border);border-right:1px solid var(--border);background:var(--white);font-size:14px}
body.login #nav{grid-row:4}
body.login #backtoblog{grid-row:5;padding-bottom:30px;border-bottom:1px solid var(--border)}
body.login #login_error,body.login .message,body.login .success{grid-column:2;grid-row:2;margin:0;padding:18px 30px;border:1px solid var(--border);border-left:4px solid var(--red);background:var(--white);box-shadow:none;font-size:14px}
body.login .language-switcher{display:none}
@media(max-width:720px){body.login #login{width:calc(100% - 32px);padding:28px 0;display:flex;flex-direction:column}body.login h1{margin:0 0 22px;padding-bottom:22px}body.login h1 a{width:155px;height:34px}.serif-login-intro{padding:26px 24px}.serif-login-kicker{margin-bottom:16px}.serif-login-intro h2{font-size:36px;max-width:15ch}.serif-login-intro p:last-child{max-width:40ch;font-size:15px}body.login form{padding:26px 24px}body.login #nav,body.login #backtoblog{padding:12px 24px}body.login #backtoblog{padding-bottom:24px}body.login #login_error,body.login .message,body.login .success{padding:16px 20px}}
/* Keep the native form and context panel aligned, including WP error/reset notices. */
@media(min-width:721px){
  .serif-login-intro{grid-row:2/5}
  body.login form{grid-row:2}
  body.login #nav{grid-row:3}
  body.login #backtoblog{grid-row:4}
  body.login #login:has(#login_error,.message,.success) .serif-login-intro{grid-row:2/6}
  body.login #login:has(#login_error,.message,.success) form{grid-row:3}
  body.login #login:has(#login_error,.message,.success) #nav{grid-row:4}
  body.login #login:has(#login_error,.message,.success) #backtoblog{grid-row:5}
}