:root {
	--login-navy: #153957;
	--login-ink: #24313d;
	--login-muted: #6e7882;
	--login-line: #e4dfd5;
	--login-paper: #f7f5f0;
	--login-gold: #a86417;
}

body.login {
	display: grid;
	align-content: center;
	min-height: 100vh;
	background: var(--login-paper);
	color: var(--login-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
}

#login {
	width: min(420px, calc(100% - 32px));
	padding: 32px 0;
}

.login h1 a {
	width: auto;
	height: auto;
	margin-bottom: 28px;
	background: none;
	color: var(--login-navy);
	font-family: Georgia, "Songti SC", serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	text-indent: 0;
}

.login h1 a::after {
	display: block;
	margin-top: 5px;
	color: var(--login-gold);
	content: "深度内容";
	font-family: sans-serif;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.18em;
}

.brand-login-intro {
	margin: 0 0 14px;
	color: var(--login-muted);
	text-align: center;
}

.login form {
	padding: 32px;
	border: 1px solid var(--login-line);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 18px 50px rgba(21, 57, 87, 0.08);
}

.login label {
	color: var(--login-ink);
	font-size: 13px;
	font-weight: 600;
}

.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	min-height: 46px;
	border-color: var(--login-line);
	border-radius: 8px;
	box-shadow: none;
	font-size: 15px;
}

.login input:focus {
	border-color: var(--login-navy);
	box-shadow: 0 0 0 1px var(--login-navy);
}

.wp-core-ui .button-primary {
	min-height: 42px;
	padding: 0 22px;
	border: 0;
	border-radius: 22px;
	background: var(--login-navy);
	font-weight: 600;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
	background: #0c2942;
}

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

.login .privacy-policy-page-link a,
.login #nav a,
.login #backtoblog a {
	color: var(--login-muted);
	text-decoration: none;
}

.login .message,
.login .notice,
.login [id="login_error"] {
	border-left-color: var(--login-gold);
	border-radius: 8px;
}

@media (max-width: 480px) {

	body.login {
		align-content: start;
	}

	#login {
		padding-top: 40px;
	}

	.login form {
		padding: 24px;
	}
}