.login {
    background: var(--paper);
    color: var(--ink);
    font: var(--base-size)/1.55 var(--body-font);
}

.login #login {
    box-sizing: border-box;
    width: min(100% - 32px, 460px);
    padding: clamp(24px, 7vh, 64px) 0 0;
}

.login #login h1 a {
    display: block;
    width: fit-content;
    max-width: 100%;
    height: auto;
    margin: 0 auto 24px;
    padding: 4px;
    background: none;
    color: var(--heading);
    font: 800 clamp(26px, 6vw, 34px)/1.15 var(--body-font);
    text-indent: 0;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.login #login h1 img {
    display: block;
    width: var(--logo-width);
    max-width: 100%;
    max-height: 112px;
    height: auto;
    object-fit: contain;
}

.login #login form {
    padding: clamp(18px, 6vw, 30px);
    background: var(--card-bg);
    color: var(--card-text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
}

.login #login form label {
    font-size: 0.94em;
    font-weight: 650;
}

.login #login form .input,
.login #login form input[type="text"],
.login #login form input[type="password"] {
    min-height: 46px;
    padding: 9px 12px;
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    font: max(16px, 1em)/1.45 var(--body-font);
}

.login #login form .wp-pwd .input {
    padding-inline-end: 48px;
}

.login #login .button.wp-hide-pw {
    height: 46px;
    color: var(--link);
}

.login #login .button-primary {
    min-height: 44px;
    padding-inline: 18px;
    border: 1px solid transparent;
    border-radius: var(--button-radius);
    background: var(--brand);
    color: var(--button-text);
    font: 750 0.94em/1.4 var(--body-font);
}

.login #login .button-primary:hover {
    background: var(--button-hover);
}

.login #login #nav a,
.login #login #backtoblog a,
.login #login .privacy-policy-link {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.login #login .message,
.login #login .notice {
    background: var(--notice-bg);
    color: var(--notice-text);
    border-inline-start-color: var(--notice-border);
}

.login #login #login_error,
.login #login .notice-error {
    border-inline-start-color: #b32d2e;
}

.login #login :is(a, input, button, select):focus-visible,
.login #language-switcher :is(select, input):focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    box-shadow: none;
}

@media (max-width: 480px) {
    .login #login h1 img {
        width: var(--logo-mobile-width);
    }

    .login #login form .forgetmenot,
    .login #login form .submit .button-primary {
        float: none;
    }

    .login #login form .submit .button-primary {
        width: 100%;
        margin-top: 10px;
    }
}