/* Native WordPress login, including routes provided by hidden-login plugins. */
body.login {
    --login-accent: #e85d04;
    --login-button-ink: #000;
    --login-ink: #171717;
    --login-muted: #66635f;
    --login-line: #dedcd8;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    padding: 56px 40px 56px calc(44% + 40px);
    background: #faf9f6;
    color: var(--login-ink);
    font: 400 14px/1.6 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body.login *, body.login *::before, body.login *::after { box-sizing: border-box; }

.vm-login-brand {
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    width: 44%;
    padding: clamp(32px, 4.5vw, 76px);
    overflow: hidden;
    background: #171717;
    color: #fff;
}

.vm-login-brand-copy { position: relative; z-index: 1; margin-top: clamp(32px, 5vh, 76px); text-align: center; }
body.login .vm-login-tagline { margin: 0; font: 800 clamp(48px, 5.3vw, 88px)/1.02 'Cabinet Grotesk', sans-serif; letter-spacing: -.045em; }
.vm-login-tagline span { color: var(--login-accent); }
body.login .vm-login-tagline a, body.login .vm-login-tagline a:hover { display: inline-block; color: inherit; text-decoration: none; }
body.login .vm-login-tagline a:focus-visible { outline-color: var(--login-accent); }
.vm-login-brand-footer { position: relative; z-index: 1; margin-top: auto; padding-top: 28px; color: #b8b5b0; font-size: 12px; }

/* A dimensional version of the store's E mark, drawn without extra image requests. */
.vm-login-art {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(65%, 290px, 30vh);
    aspect-ratio: 1;
    margin: 0;
    transform: translate(-50%, -50%);
}
.vm-login-art::before, .vm-login-art::after, .vm-login-art-mark {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid #41403d;
    border-radius: 22%;
    transform: translate(-50%, -50%) rotate(-12deg);
}
.vm-login-art::before { transform: translate(-39%, -55%) rotate(2deg); border-color: #30302e; }
.vm-login-art::after { transform: translate(-28%, -60%) rotate(16deg); border-color: #30302e; }
.vm-login-art-mark { z-index: 1; border: 0; background: url('../favicon.svg') center / contain no-repeat; box-shadow: 0 28px 48px #0005; }

body.login #login { position: relative; width: 420px; max-width: 100%; margin: 0; padding: 0; }
body.login #login > .wp-login-logo, body.login #login > h1 { display: none; }
.vm-login-intro { margin-bottom: 28px; }
body.login .vm-login-intro h2 { margin: 0 0 8px; font: 800 36px/1.15 'Cabinet Grotesk', sans-serif; letter-spacing: -.035em; }
body.login .vm-login-intro p { margin: 0; color: var(--login-muted); }
body.login.login-action-login .vm-login-intro, body.login.login-action-vm_register .vm-login-intro { text-align: center; }
.vm-auth-tabs { display: flex; margin-bottom: 28px; border-bottom: 2px solid var(--login-line); }
body.login .vm-auth-tabs a { flex: 1; padding: 12px; margin-bottom: -2px; border-bottom: 2px solid transparent; color: var(--login-muted); font-weight: 600; text-align: center; text-decoration: none; }
body.login .vm-auth-tabs a[aria-current='page'] { border-bottom-color: var(--login-accent); color: #a94200; }
.vm-auth-name-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }

body.login form { margin: 0; padding: 30px; border: 1px solid #e8e5e0; border-radius: 16px; background: #fff; box-shadow: 0 6px 24px #30251005; overflow: visible; font-weight: 400; }
body.login #loginform, body.login #registerform { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body.login form p { margin: 0; }
body.login label { display: inline-block; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
body.login input { font-family: inherit; }
body.login input[type='text'], body.login input[type='password'], body.login input[type='email'] {
    width: 100%;
    min-height: 50px;
    margin: 0 0 20px;
    padding: 11px 13px;
    border: 1px solid var(--login-line);
    border-radius: 8px;
    background: #fdfcfb;
    color: var(--login-ink);
    font-size: 16px;
    line-height: 1.5;
    box-shadow: none;
}
body.login input:focus { border-color: #a94200; outline: 2px solid #a94200; outline-offset: 2px; box-shadow: none; }
body.login .wp-pwd { position: relative; }
body.login .wp-pwd input { padding-right: 52px; }
body.login .button.wp-hide-pw { position: absolute; top: 0; right: 0; width: 50px; height: 50px; min-height: 0; padding: 0; border: 0; background: none; color: #66635f; box-shadow: none; }
body.login .button.wp-hide-pw .dashicons { top: 0; width: 20px; height: 20px; font-size: 20px; }
body.login #login form .forgetmenot { float: none; margin: 0 0 24px; }
body.login .forgetmenot label, body.login .pw-weak label { margin: 0; font-size: 13px; font-weight: 400; }
body.login input[type='checkbox'] { width: 18px; height: 18px; margin: 0 7px 0 0; border: 1px solid #a5a19c; border-radius: 4px; vertical-align: middle; background: #fff; box-shadow: none; }
body.login input[type='checkbox']:checked::before { margin: -2px 0 0 -3px; }
body.login .submit { clear: both; margin: 0; padding: 0; }
body.login .button.button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none;
    width: 100%;
    min-height: 50px;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--login-accent);
    color: var(--login-button-ink);
    font: 700 14px/1.5 'General Sans', sans-serif;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transition: filter .15s ease;
}
body.login .button-primary:hover { background: var(--login-accent); color: var(--login-button-ink); filter: brightness(.94); }
body.login .button-primary:disabled, body.login .button-primary[disabled] { opacity: .5; cursor: not-allowed; }
body.login a:focus-visible, body.login button:focus-visible, body.login .button:focus-visible { outline: 2px solid #a94200; outline-offset: 4px; box-shadow: none; }
body.login #nav, body.login #backtoblog { margin: 22px 0 0; padding: 0; text-align: center; font-size: 13px; }
body.login #backtoblog { margin-top: 12px; }
body.login a { color: var(--login-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.login #nav a, body.login #backtoblog a, body.login .privacy-policy-page-link a { color: var(--login-muted); text-decoration: none; }
body.login a:hover, body.login #nav a:hover, body.login #backtoblog a:hover { color: #a94200; text-decoration: underline; }
body.login .privacy-policy-page-link { margin: 24px 0 0; text-align: center; font-size: 12px; }
body.login .vm-login-credit { margin: 28px 0 0; color: var(--login-muted); font-size: 12px; text-align: center; }
body.login .vm-login-credit a { color: var(--login-accent); text-decoration: none; }
body.login .vm-login-credit a:hover { text-decoration: underline; }

body.login .message, body.login .success, body.login #login_error {
    margin: 0 0 22px;
    padding: 14px 16px;
    border: 1px solid #dedcd8;
    border-left: 3px solid #a94200;
    border-radius: 8px;
    background: #fff;
    color: var(--login-ink);
    box-shadow: none;
    overflow-wrap: anywhere;
}
body.login #login_error { border-left-color: #b42318; }
body.login .success { border-left-color: #25704a; }
body.login #login_error ul { margin: 0; padding-left: 18px; }
body.login #pass-strength-result { width: 100%; margin: -8px 0 16px; padding: 6px; border-radius: 4px; font-size: 13px; }
body.login #login .indicator-hint, body.login #login #reg_passmail { margin: 0 0 20px; color: var(--login-muted); font-size: 12px; }
body.login .pw-weak { margin: 0 0 18px; }
body.login .wp-generate-pw { float: none; margin-bottom: 12px; }
body.login .language-switcher { width: 420px; max-width: 100%; margin: 24px 0 0; text-align: center; }
body.login .language-switcher form { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 0; border: 0; background: none; box-shadow: none; }
body.login .language-switcher label { margin: 0; }
body.login .language-switcher select { max-width: 200px; min-height: 36px; border: 1px solid var(--login-line); border-radius: 6px; background-color: #fff; color: var(--login-ink); font: inherit; }
body.login .language-switcher .button { min-height: 36px; padding: 0 12px; border: 1px solid var(--login-line); border-radius: 6px; background: #fff; color: var(--login-ink); }

/* The session-expired dialog needs to fit its existing WordPress iframe. */
body.login.interim-login { min-height: 100vh; padding: 24px; }
body.interim-login .vm-login-brand { display: none; }
body.interim-login #login { margin: 0; }

@media (max-width: 900px) {
    body.login { padding: 44px 24px; }
    .vm-login-brand { display: none; }
}
@media (max-width: 480px) {
    body.login { justify-content: flex-start; padding: 36px 20px; }
    body.login .vm-login-intro h2 { font-size: 32px; }
    body.login form { padding: 24px 20px; border-radius: 12px; }
}
@media (max-height: 700px) and (min-width: 901px) {
    .vm-login-brand-copy { margin-top: 40px; }
    .vm-login-art { width: 150px; }
    body.login .vm-login-tagline { font-size: 52px; }
}
@media (max-height: 520px) and (min-width: 901px) {
    .vm-login-art { display: none; }
    .vm-login-brand-copy { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    body.login .button-primary { transition: none; }
    body.login #login { animation: none; }
}