:root {
    color-scheme: light;
    --alpine-paper: #f6f7f2;
    --alpine-forest: #1c352d;
    --alpine-orange: #ad4320;
    --alpine-line: #cbd3c9;
    --alpine-sans: Aptos, "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

body.login {
    position: relative;
    display: flex;
    flex-flow: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    height: auto;
    padding-inline-start: 47%;
    margin: 0;
    box-sizing: border-box;
    background: var(--alpine-paper);
    color: var(--alpine-forest);
    font-family: var(--alpine-sans);
}

.alpine-signin-cover {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 47%;
    box-sizing: border-box;
    display: flex;
    align-items: end;
    padding: clamp(30px, 4.5vw, 76px);
    background: linear-gradient(0deg, #0c252aef, #15383a66 39%, transparent 72%),
        url("images/resort-forest.webp") center / cover, #2d474c;
}

.alpine-signin-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
    color: #fffdf3;
    text-decoration: none;
}

.alpine-signin-brand:hover {color: #fff;}
.alpine-signin-seal {
    display: grid;
    width: 66px;
    height: 66px;
    padding: 4px;
    border-radius: 50%;
    background: #fffdf4;
    place-items: center;
}
.alpine-signin-seal img {display: block; width: 100%; height: 100%; object-fit: contain;}
.alpine-signin-wordmark {display: grid; gap: 8px;}
.alpine-signin-wordmark small {
    color: #fff4da;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.alpine-signin-wordmark strong {
    color: #fffdf4;
    font: normal clamp(42px, 4.7vw, 82px)/1.02 Georgia, "Times New Roman", serif;
    letter-spacing: -.055em;
}

.login #login {width: min(366px, calc(100% - 68px)); padding: 48px 0 26px; margin: 0 auto;}
.login .wp-login-logo {display: none;}
.alpine-signin-heading {
    margin: 0 0 26px;
    font: normal clamp(36px, 3.5vw, 53px)/1.09 Georgia, "Times New Roman", serif;
    color: var(--alpine-forest);
    letter-spacing: -.055em;
}
.alpine-signin-heading::before {
    display: block;
    width: 32px;
    height: 3px;
    margin-bottom: 18px;
    background: #cc7448;
    content: "";
}
.login #login form {
    box-sizing: border-box;
    margin: 18px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}
.login #login form label {font-size: 14px; font-weight: 600; color: #344b3c;}
.login #login form .input {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    margin: 6px 0 17px;
    padding: 9px 12px;
    border: 1px solid #aab9ac;
    border-radius: 7px;
    background: #fffefa;
    color: #183528;
    font: 16px/1.45 var(--alpine-sans);
}
.login #login form .password-input {padding-inline-end: 44px;}
.login #login .wp-pwd {position: relative;}
.login #login .wp-hide-pw {inset-block-start: 7px; height: 45px; color: #47624e;}
.login #login form .forgetmenot {float: none; margin: 0 0 18px;}
.login #login .forgetmenot label {font-size: 14px; font-weight: 400;}
.login #login #rememberme {border-color: #94a392; border-radius: 3px;}
.login #login .submit {float: none; margin: 0;}
.login #login .button-primary {
    box-sizing: border-box;
    float: none;
    width: 100%;
    min-height: 46px;
    padding: 8px 18px;
    border: 1px solid #9a3f21;
    border-radius: 7px;
    background: var(--alpine-orange);
    color: #fff;
    box-shadow: none;
    font: 650 15px var(--alpine-sans);
    text-shadow: none;
}
.login #login .button-primary:hover {background: #913718;}
.login #login .button-primary:disabled {opacity: .65;}
.login #login #nav, .login #login #backtoblog {padding: 0; font-size: 14px; line-height: 1.6;}
.login #login #nav {margin: 19px 0 0;}
.login #login #backtoblog {margin: 25px 0 0; padding-top: 17px; border-top: 1px solid var(--alpine-line);}
.login #login #nav a, .login #login #backtoblog a {color: #385740; text-decoration: underline; text-underline-offset: 3px;}
.login #login #backtoblog span {margin-inline-end: 4px;}
.login #login .alpine-invite-help {display:block;color:#56675a;line-height:1.55;}
.login #login .notice {box-shadow: none; border-radius: 0 6px 6px 0; font-family: var(--alpine-sans);}
.login :is(a, input, button, select):focus-visible {outline: 3px solid #d37037; outline-offset: 3px;}
.login .language-switcher {margin: 0 auto 20px;}

@media (max-width: 700px) {
    body.login {justify-content: start; padding-inline-start: 0;}
    .alpine-signin-cover {
        position: static;
        width: 100%;
        min-height: clamp(126px, 23vw, 175px);
        padding: 20px max(22px, calc((100% - 390px) / 2));
        background-image: linear-gradient(90deg, #102c31dd, #16333b84 54%, #173c473d), url("images/alpine-hero-mobile.webp");
        background-position: center, center 43%;
    }
    .alpine-signin-brand {flex-direction: row; align-items: center; gap: 13px;}
    .alpine-signin-seal {width: 44px; height: 44px; padding: 3px;}
    .alpine-signin-wordmark {gap: 4px;}
    .alpine-signin-wordmark small {font-size: 8px; letter-spacing: .12em;}
    .alpine-signin-wordmark strong {font-size: 34px;}
    .login #login {width: min(390px, calc(100% - 44px)); padding: 32px 0 22px;}
    .alpine-signin-heading {font-size: 35px; margin-bottom: 20px;}
    .alpine-signin-heading::before {margin-bottom: 12px;}
}

body.login.interim-login {padding-inline-start: 0;}
.interim-login .alpine-signin-cover {display: none;}