:root {
    --navire-ink: #0c1a1e;
    --navire-teal: #2e7076;
    --navire-gold: #c9a227;
    --navire-cream: #f4e9d1;
}

body.login {
    background: var(--navire-ink);
    color: var(--navire-ink);
}

body.login::before {
    content: "La Vigie veille.\A Le Navire est prêt.";
    white-space: pre;
    position: fixed;
    left: 7vw;
    top: 32vh;
    color: #fff;
    font: 700 clamp(34px, 4vw, 62px)/1.08 Georgia, serif;
}

#login {
    width: 420px;
    margin: 0 7vw 0 auto;
    padding: 7vh 0 0;
}

.login h1 a {
    display: none;
}

.navire-login-intro {
    background: var(--navire-cream);
    padding: 36px 38px 0;
    border-radius: 22px 22px 0 0;
}

.navire-login-intro span {
    color: var(--navire-teal);
    font-weight: 800;
    letter-spacing: .12em;
}

.navire-login-intro h1 {
    margin: 18px 0 8px;
    text-align: left;
    font: 700 34px/1.05 Georgia, serif;
}

.navire-login-intro h1 strong {
    color: var(--navire-gold);
}

.navire-login-intro p {
    margin: 0;
    color: #667477;
}

.login form {
    margin-top: 0;
    padding: 28px 38px 36px;
    background: var(--navire-cream);
    border: 0;
    border-radius: 0 0 22px 22px;
    box-shadow: none;
}

.login form .input {
    border: 1px solid #d8e0de;
    border-radius: 10px;
    background: #fff;
}

.wp-core-ui .button-primary {
    width: 100%;
    min-height: 48px;
    margin-top: 18px;
    border: 0;
    border-radius: 10px;
    background: var(--navire-gold);
    color: var(--navire-ink);
    font-weight: 800;
}

.login #nav,
.login #backtoblog,
.login .privacy-policy-page-link {
    text-align: center;
}

.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a {
    color: #b8c5c6;
}

@media (max-width: 850px) {
    body.login::before { display: none; }
    #login { width: min(88vw, 420px); margin: auto; padding-top: 5vh; }
}