:root{
    --f8-login-bg:#050709;
    --f8-login-panel:#0f151b;
    --f8-login-line:#31404d;
    --f8-login-ink:#f2f5f7;
    --f8-login-muted:#9ba8b3;
    --f8-login-accent:#c7a35a;
    --f8-login-accent-2:#e2bf7a;
    --f8-login-font:"Space Grotesk","Avenir Next","Segoe UI",sans-serif;
}

body.login{
    background:
        radial-gradient(circle at 15% -5%, rgba(199,163,90,0.16), transparent 22rem),
        linear-gradient(180deg, #06090d 0%, #040608 100%);
    color:var(--f8-login-ink);
    font-family:var(--f8-login-font);
}

body.login #login{
    width:min(25rem, calc(100vw - 2.5rem));
    padding:3.5rem 0 0;
}

body.login h1{
    margin:0 0 1.1rem;
}

body.login h1 a{
    background:none !important;
    width:auto;
    height:auto;
    margin:0;
    text-indent:0;
    overflow:visible;
    color:var(--f8-login-ink);
    text-decoration:none;
    /* The platform supplies an accessible name while FABRIC8 supplies the
       visible mark below.  Suppressing only the rendered source text avoids
       the former FABRIC8FABRIC8 duplicate without changing authentication. */
    font-size:0;
}

body.login h1 a::before{
    content:"FABRIC8";
    display:block;
    font-size:1.55rem;
    font-weight:620;
    letter-spacing:0.06em;
}

body.login form{
    margin-top:0;
    padding:1.35rem;
    border:1px solid var(--f8-login-line);
    border-radius:1rem;
    background:linear-gradient(160deg, #0f151b 0%, #111922 100%);
    box-shadow:0 22px 45px rgba(0,0,0,0.42);
}

body.login label,
body.login .forgetmenot,
body.login #nav,
body.login #backtoblog{
    color:var(--f8-login-muted);
}

body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"]{
    border:1px solid var(--f8-login-line);
    border-radius:0.65rem;
    background:#0a1015;
    color:var(--f8-login-ink);
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus{
    border-color:var(--f8-login-accent);
    box-shadow:0 0 0 1px var(--f8-login-accent);
}

body.login .button-primary{
    border-color:var(--f8-login-accent);
    background:var(--f8-login-accent);
    color:#111418;
    text-shadow:none;
    box-shadow:none;
}

body.login .button-primary:hover{
    border-color:var(--f8-login-accent-2);
    background:var(--f8-login-accent-2);
    color:#0d1013;
}

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

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

body.login .language-switcher{
    display:none;
}