/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 4.2
Tested up to: 7.1
Requires at least: 4.7
Requires PHP: 5.2.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-patterns

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Normalize
2.0 Accessibility
3.0 Alignments
4.0 Clearings
5.0 Typography
6.0 Forms
7.0 Formatting
8.0 Lists
9.0 Tables
10.0 Links
11.0 Featured Image Hover
12.0 Navigation
13.0 Layout
   13.1 Header
   13.2 Front Page
   13.3 Regular Content
   13.4 Posts
   13.5 Pages
   13.6 Footer
14.0 Comments
15.0 Widgets
16.0 Media
   16.1 Galleries
17.0 Customizer
18.0 SVGs Fallbacks
19.0 Media Queries
20.0 Print
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 Normalize
Styles based on Normalize v5.0.0 @link https://github.com/necolas/normalize.css
--------------------------------------------------------------*/

html {
	font-family: sans-serif;
	line-height: 1.15;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
}

article,
aside,
footer,
header,
nav,
section {
	display: block;
}

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

figcaption,
figure,
main {
	display: block;
}

figure {
	margin: 1em 0;
}

hr {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

a {
	background-color: transparent;
	-webkit-text-decoration-skip: objects;
}

a:active,
a:hover {
	outline-width: 0;
}

abbr[title] {
	border-bottom: 1px #767676 dotted;
	text-decoration: none;
}

b,
strong {
	font-weight: inherit;
}

b,
strong {
	font-weight: 700;
}

code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

dfn {
	font-style: italic;
}

mark {
	background-color: #eee;
	color: #222;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

audio,
video {
	display: inline-block;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

img {
	border-style: none;
}

svg:not(:root) {
	overflow: hidden;
}

button,
input,
optgroup,
select,
textarea {
	font-family: sans-serif;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

button,
input {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

fieldset {
	border: 1px solid #bbb;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}

legend {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

progress {
	display: inline-block;
	vertical-align: baseline;
}

textarea {
	overflow: auto;
}

[type="checkbox"],
[type="radio"] {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

details,
menu {
	display: block;
}

summary {
	display: list-item;
}

canvas {
	display: inline-block;
}

template {
	display: none;
}

[hidden] {
	display: none;
}

/*--------------------------------------------------------------
2.0 Accessibility
--------------------------------------------------------------*/

/* Text meant only for screen readers. */

.screen-reader-text {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
	word-wrap: normal !important;
	word-break: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

/*--------------------------------------------------------------
3.0 Alignments
--------------------------------------------------------------*/

.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*--------------------------------------------------------------
4.0 Clearings
--------------------------------------------------------------*/

.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.entry-footer:before,
.entry-footer:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after,
.nav-links:before,
.nav-links:after,
.pagination:before,
.pagination:after,
.comment-author:before,
.comment-author:after,
.widget-area:before,
.widget-area:after,
.widget:before,
.widget:after,
.comment-meta:before,
.comment-meta:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after,
.entry-content:after,
.entry-footer:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after,
.nav-links:after,
.pagination:after,
.comment-author:after,
.widget-area:after,
.widget:after,
.comment-meta:after {
	clear: both;
}

/*--------------------------------------------------------------
5.0 Typography
--------------------------------------------------------------*/

/* 字体栈改用 DUX 主题的系统 UI 字体栈。原声明是自托管的 Libre Franklin，
   它只有拉丁字符，中文会掉到浏览器默认字体，中英文观感割裂；
   现在由系统字体渲染两端：macOS 的 -apple-system 落到苹方，
   Windows 由 Microsoft Yahei 接管中英文，其余按平台依次回退。
   注意：下方「Typography for Chinese Font」的 html[lang^="zh-"] /
   html[lang="zh-CN"] body 规则特异性更高，会把这里盖掉，已同步替换。 */
body,
button,
input,
select,
textarea {
	color: #333;
	font-family: -apple-system, BlinkMacSystemFont, "Microsoft Yahei", MiSans, "HarmonyOS Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 15px;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.66;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	line-height: 1.4;
	margin: 0 0 0.75em;
	padding: 1.5em 0 0;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
	padding-top: 0;
}

h1 {
	font-size: 24px;
	font-size: 1.5rem;
	font-weight: 300;
}

h2,
.home.blog .entry-title {
	color: #666;
	font-size: 20px;
	font-size: 1.25rem;
	font-weight: 300;
}

h3 {
	color: #333;
	font-size: 18px;
	font-size: 1.125rem;
	font-weight: 300;
}

h4 {
	color: #333;
	font-size: 16px;
	font-size: 1rem;
	font-weight: 800;
}

h5 {
	color: #767676;
	font-size: 13px;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

h6 {
	color: #333;
	font-size: 15px;
	font-size: 0.9375rem;
	font-weight: 800;
}

p {
	margin: 0 0 1.5em;
	padding: 0;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	color: #666;
	font-size: 18px;
	font-size: 1.125rem;
	font-style: italic;
	line-height: 1.7;
	margin: 0;
	overflow: hidden;
	padding: 0;
}

blockquote cite {
	display: block;
	font-style: normal;
	font-weight: 600;
	margin-top: 0.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 15px;
	font-size: 0.9375rem;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #eee;
	text-decoration: none;
}

big {
	font-size: 125%;
}

blockquote {
	quotes: "" "";
}

q {
	quotes: "“" "”" "‘" "’";
}

blockquote:before,
blockquote:after {
	content: "";
}

:focus {
	outline: none;
}

/* Typography for Arabic Font */

html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea,
html[lang="ary"] body,
html[lang="ary"] button,
html[lang="ary"] input,
html[lang="ary"] select,
html[lang="ary"] textarea,
html[lang="azb"] body,
html[lang="azb"] button,
html[lang="azb"] input,
html[lang="azb"] select,
html[lang="azb"] textarea,
html[lang^="fa-"] body,
html[lang^="fa-"] button,
html[lang^="fa-"] input,
html[lang^="fa-"] select,
html[lang^="fa-"] textarea,
html[lang="haz"] body,
html[lang="haz"] button,
html[lang="haz"] input,
html[lang="haz"] select,
html[lang="haz"] textarea,
html[lang="ps"] body,
html[lang="ps"] button,
html[lang="ps"] input,
html[lang="ps"] select,
html[lang="ps"] textarea,
html[lang="ur"] body,
html[lang="ur"] button,
html[lang="ur"] input,
html[lang="ur"] select,
html[lang="ur"] textarea {
	font-family: Tahoma, Arial, sans-serif;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ary"] h1,
html[lang="ary"] h2,
html[lang="ary"] h3,
html[lang="ary"] h4,
html[lang="ary"] h5,
html[lang="ary"] h6,
html[lang="azb"] h1,
html[lang="azb"] h2,
html[lang="azb"] h3,
html[lang="azb"] h4,
html[lang="azb"] h5,
html[lang="azb"] h6,
html[lang^="fa-"] h1,
html[lang^="fa-"] h2,
html[lang^="fa-"] h3,
html[lang^="fa-"] h4,
html[lang^="fa-"] h5,
html[lang^="fa-"] h6,
html[lang="haz"] h1,
html[lang="haz"] h2,
html[lang="haz"] h3,
html[lang="haz"] h4,
html[lang="haz"] h5,
html[lang="haz"] h6,
html[lang="ps"] h1,
html[lang="ps"] h2,
html[lang="ps"] h3,
html[lang="ps"] h4,
html[lang="ps"] h5,
html[lang="ps"] h6,
html[lang="ur"] h1,
html[lang="ur"] h2,
html[lang="ur"] h3,
html[lang="ur"] h4,
html[lang="ur"] h5,
html[lang="ur"] h6 {
	font-weight: 700;
}

/* Typography for Chinese Font */

html[lang^="zh-"] body,
html[lang^="zh-"] button,
html[lang^="zh-"] input,
html[lang^="zh-"] select,
html[lang^="zh-"] textarea {
	font-family: -apple-system, BlinkMacSystemFont, "Microsoft Yahei", MiSans, "HarmonyOS Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

html[lang="zh-CN"] body,
html[lang="zh-CN"] button,
html[lang="zh-CN"] input,
html[lang="zh-CN"] select,
html[lang="zh-CN"] textarea {
	font-family: -apple-system, BlinkMacSystemFont, "Microsoft Yahei", MiSans, "HarmonyOS Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

html[lang^="zh-"] h1,
html[lang^="zh-"] h2,
html[lang^="zh-"] h3,
html[lang^="zh-"] h4,
html[lang^="zh-"] h5,
html[lang^="zh-"] h6 {
	font-weight: 700;
}

/* Typography for Cyrillic Font */

html[lang="bg-BG"] body,
html[lang="bg-BG"] button,
html[lang="bg-BG"] input,
html[lang="bg-BG"] select,
html[lang="bg-BG"] textarea,
html[lang="ru-RU"] body,
html[lang="ru-RU"] button,
html[lang="ru-RU"] input,
html[lang="ru-RU"] select,
html[lang="ru-RU"] textarea,
html[lang="uk"] body,
html[lang="uk"] button,
html[lang="uk"] input,
html[lang="uk"] select,
html[lang="uk"] textarea {
	font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
}

html[lang="bg-BG"] h1,
html[lang="bg-BG"] h2,
html[lang="bg-BG"] h3,
html[lang="bg-BG"] h4,
html[lang="bg-BG"] h5,
html[lang="bg-BG"] h6,
html[lang="ru-RU"] h1,
html[lang="ru-RU"] h2,
html[lang="ru-RU"] h3,
html[lang="ru-RU"] h4,
html[lang="ru-RU"] h5,
html[lang="ru-RU"] h6,
html[lang="uk"] h1,
html[lang="uk"] h2,
html[lang="uk"] h3,
html[lang="uk"] h4,
html[lang="uk"] h5,
html[lang="uk"] h6 {
	font-weight: 700;
	line-height: 1.2;
}

/* Typography for Devanagari Font */

html[lang="bn-BD"] body,
html[lang="bn-BD"] button,
html[lang="bn-BD"] input,
html[lang="bn-BD"] select,
html[lang="bn-BD"] textarea,
html[lang="hi-IN"] body,
html[lang="hi-IN"] button,
html[lang="hi-IN"] input,
html[lang="hi-IN"] select,
html[lang="hi-IN"] textarea,
html[lang="mr-IN"] body,
html[lang="mr-IN"] button,
html[lang="mr-IN"] input,
html[lang="mr-IN"] select,
html[lang="mr-IN"] textarea {
	font-family: Arial, sans-serif;
}

html[lang="bn-BD"] h1,
html[lang="bn-BD"] h2,
html[lang="bn-BD"] h3,
html[lang="bn-BD"] h4,
html[lang="bn-BD"] h5,
html[lang="bn-BD"] h6,
html[lang="hi-IN"] h1,
html[lang="hi-IN"] h2,
html[lang="hi-IN"] h3,
html[lang="hi-IN"] h4,
html[lang="hi-IN"] h5,
html[lang="hi-IN"] h6,
html[lang="mr-IN"] h1,
html[lang="mr-IN"] h2,
html[lang="mr-IN"] h3,
html[lang="mr-IN"] h4,
html[lang="mr-IN"] h5,
html[lang="mr-IN"] h6 {
	font-weight: 700;
}

/* Typography for Greek Font */

html[lang="el"] body,
html[lang="el"] button,
html[lang="el"] input,
html[lang="el"] select,
html[lang="el"] textarea {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html[lang="el"] h1,
html[lang="el"] h2,
html[lang="el"] h3,
html[lang="el"] h4,
html[lang="el"] h5,
html[lang="el"] h6 {
	font-weight: 700;
	line-height: 1.3;
}

/* Typography for Gujarati Font */

html[lang="gu-IN"] body,
html[lang="gu-IN"] button,
html[lang="gu-IN"] input,
html[lang="gu-IN"] select,
html[lang="gu-IN"] textarea {
	font-family: Arial, sans-serif;
}

html[lang="gu-IN"] h1,
html[lang="gu-IN"] h2,
html[lang="gu-IN"] h3,
html[lang="gu-IN"] h4,
html[lang="gu-IN"] h5,
html[lang="gu-IN"] h6 {
	font-weight: 700;
}

/* Typography for Hebrew Font */

html[lang="he-IL"] body,
html[lang="he-IL"] button,
html[lang="he-IL"] input,
html[lang="he-IL"] select,
html[lang="he-IL"] textarea {
	font-family: "Arial Hebrew", Arial, sans-serif;
}

html[lang="he-IL"] h1,
html[lang="he-IL"] h2,
html[lang="he-IL"] h3,
html[lang="he-IL"] h4,
html[lang="he-IL"] h5,
html[lang="he-IL"] h6 {
	font-weight: 700;
}

/* Typography for Japanese Font */

html[lang="ja"] body,
html[lang="ja"] button,
html[lang="ja"] input,
html[lang="ja"] select,
html[lang="ja"] textarea {
	font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
}

html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3,
html[lang="ja"] h4,
html[lang="ja"] h5,
html[lang="ja"] h6 {
	font-weight: 700;
}

/* Typography for Korean font */

html[lang="ko-KR"] body,
html[lang="ko-KR"] button,
html[lang="ko-KR"] input,
html[lang="ko-KR"] select,
html[lang="ko-KR"] textarea {
	font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", Dotum, sans-serif;
}

html[lang="ko-KR"] h1,
html[lang="ko-KR"] h2,
html[lang="ko-KR"] h3,
html[lang="ko-KR"] h4,
html[lang="ko-KR"] h5,
html[lang="ko-KR"] h6 {
	font-weight: 600;
}

/* Typography for Thai Font */

html[lang="th"] h1,
html[lang="th"] h2,
html[lang="th"] h3,
html[lang="th"] h4,
html[lang="th"] h5,
html[lang="th"] h6 {
	line-height: 1.65;
	font-family: "Sukhumvit Set", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html[lang="th"] body,
html[lang="th"] button,
html[lang="th"] input,
html[lang="th"] select,
html[lang="th"] textarea {
	line-height: 1.8;
	font-family: "Sukhumvit Set", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Remove letter-spacing for all non-latin alphabets */

html[lang="ar"] *,
html[lang="ary"] *,
html[lang="azb"] *,
html[lang^="fa-"] *,
html[lang="haz"] *,
html[lang="ps"] *,
html[lang="ur"] *,
html[lang^="zh-"] *,
html[lang="bg-BG"] *,
html[lang="ru-RU"] *,
html[lang="uk"] *,
html[lang="bn-BD"] *,
html[lang="hi-IN"] *,
html[lang="mr-IN"] *,
html[lang="el"] *,
html[lang="gu-IN"] *,
html[lang="he-IL"] *,
html[lang="ja"] *,
html[lang="ko-KR"] *,
html[lang="th"] * {
	letter-spacing: 0 !important;
}

/*--------------------------------------------------------------
6.0 Forms
--------------------------------------------------------------*/

label {
	color: #333;
	display: block;
	font-weight: 800;
	margin-bottom: 0.5em;
}

fieldset {
	margin-bottom: 1em;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	background: #fff;
	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
	border: 1px solid #bbb;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	display: block;
	padding: 0.7em;
	width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #222;
	border-color: #333;
}

select {
	border: 1px solid #bbb;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	height: 3em;
	max-width: 100%;
}

input[type="radio"]:focus,
input[type="checkbox"]:focus {
	outline: thin dotted #333;
}

input[type="radio"],
input[type="checkbox"] {
	margin-right: 0.5em;
}

input[type="radio"] + label,
input[type="checkbox"] + label {
	font-weight: 400;
}

button,
input[type="button"],
input[type="submit"] {
	background-color: #222;
	border: 0;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	-webkit-box-shadow: none;
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1;
	padding: 1em 2em;
	text-shadow: none;
	-webkit-transition: background 0.2s;
	transition: background 0.2s;
}

input + button,
input + input[type="button"],
input + input[type="submit"] {
	padding: 0.75em 2em;
}

button.secondary,
input[type="reset"],
input[type="button"].secondary,
input[type="reset"].secondary,
input[type="submit"].secondary {
	background-color: #ddd;
	color: #222;
}

:not( .mejs-button ) > button:hover,
:not( .mejs-button ) > button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
	background: #767676;
}

button.secondary:hover,
button.secondary:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="button"].secondary:hover,
input[type="button"].secondary:focus,
input[type="reset"].secondary:hover,
input[type="reset"].secondary:focus,
input[type="submit"].secondary:hover,
input[type="submit"].secondary:focus {
	background: #bbb;
}

/* Placeholder text color -- selectors need to be separate to work. */
::-webkit-input-placeholder {
	color: #333;
	font-family: -apple-system, BlinkMacSystemFont, "Microsoft Yahei", MiSans, "HarmonyOS Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

:-moz-placeholder {
	color: #333;
	font-family: -apple-system, BlinkMacSystemFont, "Microsoft Yahei", MiSans, "HarmonyOS Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

::-moz-placeholder {
	color: #333;
	font-family: -apple-system, BlinkMacSystemFont, "Microsoft Yahei", MiSans, "HarmonyOS Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	opacity: 1;
	/* Since FF19 lowers the opacity of the placeholder by default */
}

:-ms-input-placeholder {
	color: #333;
	font-family: -apple-system, BlinkMacSystemFont, "Microsoft Yahei", MiSans, "HarmonyOS Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/*--------------------------------------------------------------
7.0 Formatting
--------------------------------------------------------------*/

hr {
	background-color: #bbb;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
8.0 Lists
--------------------------------------------------------------*/

ul,
ol {
	margin: 0 0 1.5em;
	padding: 0;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/*--------------------------------------------------------------
9.0 Tables
--------------------------------------------------------------*/

table {
	border-collapse: collapse;
	margin: 0 0 1.5em;
	width: 100%;
}

thead th {
	border-bottom: 2px solid #bbb;
	padding-bottom: 0.5em;
}

th {
	padding: 0.4em;
	text-align: left;
}

tr {
	border-bottom: 1px solid #eee;
}

td {
	padding: 0.4em;
}

th,
td,
th:first-child,
td:first-child {
	padding-left: 0;
}

th:last-child,
td:last-child {
	padding-right: 0;
}

/*--------------------------------------------------------------
10.0 Links
--------------------------------------------------------------*/

a {
	color: #222;
	text-decoration: none;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	color: var(--tb--main, #007bff);
	outline: 0;
}

/* Hover effects */

.entry-content a,
.entry-summary a,
.comment-content a,
.widget a,
.site-footer .widget-area a,
.posts-navigation a,
.widget_authors a strong {
	/* 主题用 box-shadow 画「下划线」，不是 text-decoration（所以针对
	   text-decoration 的修法全都无效）。全局要求链接不要下划线，这里置空。 */
	-webkit-box-shadow: none;
	box-shadow: none;
	-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
}

.entry-title a,
.entry-meta a,
.page-links a,
.page-links a .page-number,
.entry-footer a,
.entry-footer .cat-links a,
.entry-footer .tags-links a,
.edit-link a,
.post-navigation a,
.logged-in-as a,
.comment-navigation a,
.comment-metadata a,
.comment-metadata a.comment-edit-link,
.comment-reply-link,
a .nav-title,
.pagination a,
.comments-pagination a,
.site-info a,
.widget .widget-title a,
.widget ul li a,
.site-footer .widget-area ul li a,
.site-footer .widget-area ul li a {
	/* 同上：这是静止态的白色「下划线」，白底上看不见，hover 时才显形 */
	-webkit-box-shadow: none;
	box-shadow: none;
	text-decoration: none;
	-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
}

.entry-content a:focus,
.entry-content a:hover,
.entry-summary a:focus,
.entry-summary a:hover,
.comment-content a:focus,
.comment-content a:hover,
.widget a:focus,
.widget a:hover,
.site-footer .widget-area a:focus,
.site-footer .widget-area a:hover,
.posts-navigation a:focus,
.posts-navigation a:hover,
.comment-metadata a:focus,
.comment-metadata a:hover,
.comment-metadata a.comment-edit-link:focus,
.comment-metadata a.comment-edit-link:hover,
.comment-reply-link:focus,
.comment-reply-link:hover,
.widget_authors a:focus strong,
.widget_authors a:hover strong,
.entry-title a:focus,
.entry-title a:hover,
.entry-meta a:focus,
.entry-meta a:hover,
.page-links a:focus .page-number,
.page-links a:hover .page-number,
.entry-footer a:focus,
.entry-footer a:hover,
.entry-footer .cat-links a:focus,
.entry-footer .cat-links a:hover,
.entry-footer .tags-links a:focus,
.entry-footer .tags-links a:hover,
.post-navigation a:focus,
.post-navigation a:hover,
.pagination a:not(.prev):not(.next):focus,
.pagination a:not(.prev):not(.next):hover,
.comments-pagination a:not(.prev):not(.next):focus,
.comments-pagination a:not(.prev):not(.next):hover,
.logged-in-as a:focus,
.logged-in-as a:hover,
a:focus .nav-title,
a:hover .nav-title,
.edit-link a:focus,
.edit-link a:hover,
.site-info a:focus,
.site-info a:hover,
.widget .widget-title a:focus,
.widget .widget-title a:hover,
.widget ul li a:focus,
.widget ul li a:hover {
	color: var(--tb--main, #007bff);
	/* 就是这条：hover/focus 时把「下划线」换成 0 3px 0 的黑色实线，
	   标题一悬停就出现一条线。全局要求无下划线，置空。 */
	-webkit-box-shadow: none;
	box-shadow: none;
}

/* Fixes linked images */
.entry-content a img,
.comment-content a img,
.widget a img {
	-webkit-box-shadow: 0 0 0 8px #fff;
	box-shadow: 0 0 0 8px #fff;
}

.post-navigation a:focus .icon,
.post-navigation a:hover .icon {
	color: #222;
}

/*--------------------------------------------------------------
11.0 Featured Image Hover
--------------------------------------------------------------*/

.post-thumbnail {
	margin-bottom: 1em;
}

.post-thumbnail a img {
	-webkit-backface-visibility: hidden;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
}

.post-thumbnail a:hover img,
.post-thumbnail a:focus img {
	opacity: 0.7;
}

/*--------------------------------------------------------------
12.0 Navigation
--------------------------------------------------------------*/

.navigation-top {
	background: #fff;
	border-bottom: 1px solid #eee;
	border-top: 1px solid #eee;
	font-size: 16px;
	font-size: 1rem;
	position: relative;
}

.navigation-top .wrap {
	max-width: 1000px;
	padding: 0;
}

/* 插件定制：只作用于一、二级下拉以外的「顶部一级菜单项」，并改用变量。
   原为 .navigation-top a { color: #222 }，硬编码且不随明暗模式变，
   暗色模式下深底（--tb--white = #14181b）配 #222 几乎看不见。
   收窄而不写成 .navigation-top .main-navigation a，是为了不波及下拉子菜单
   （子菜单底色是主题写死的 #fff，暗色下仍是白底，若把它的文字也改成
   暗色变量反而看不清）；特异性（0,2,4）也高于 functions.php 里那条兜底的
   html.darking a（0,1,2）。 */
.navigation-top .main-navigation > div > ul > li > a {
	color: var(--tb--base, #333);
	font-weight: 600;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
}

/* 当前菜单项：改用主题色高亮（亮 #fff 底与暗 #14181b 底上都清晰）。
   原来是写死的灰 #767676，暗色下对比只有约 4:1、发灰发闷。 */
.navigation-top .main-navigation > div > ul > .current-menu-item > a,
.navigation-top .main-navigation > div > ul > .current_page_item > a {
	color: var(--tb--main, #007bff);
}

/* 一级项的悬停/聚焦：必须显式写一条。
   上面基础规则的特异性（0,2,4）已高于主题的 .main-navigation a:hover（0,2,2），
   不补这条的话悬停色会被基础色压住、点上去没有反馈。
   （设过「菜单项颜色」的项另由 #menu-item-<id> 的 ID 选择器接管，不受影响。） */
.navigation-top .main-navigation > div > ul > li > a:hover,
.navigation-top .main-navigation > div > ul > li > a:focus {
	color: var(--tb--main, #007bff);
}

.main-navigation {
	clear: both;
	display: block;
}

.main-navigation ul {
	background: #fff;
	list-style: none;
	margin: 0;
	padding: 0 1.5em;
	text-align: left;
}

/* Hide the menu on small screens when JavaScript is available.
 * It only works with JavaScript.
 */

.js .main-navigation ul,
.main-navigation .menu-item-has-children > a > .icon,
.main-navigation .page_item_has_children > a > .icon,
.main-navigation ul a > .icon {
	display: none;
}

.main-navigation > div > ul {
	border-top: 1px solid #eee;
	padding: 0.75em 1.695em;
}

.js .main-navigation.toggled-on > div > ul {
	display: block;
}

.main-navigation ul ul {
	padding: 0 0 0 1.5em;
}

.main-navigation ul ul.toggled-on {
	display: block;
}

.main-navigation ul ul a {
	letter-spacing: 0;
	padding: 0.4em 0;
	position: relative;
	text-transform: none;
}

.main-navigation li {
	border-bottom: 1px solid #eee;
	position: relative;
}

.main-navigation li li,
.main-navigation li:last-child {
	border: 0;
}

.main-navigation a {
	display: block;
	padding: 0.5em 0;
	text-decoration: none;
}

.main-navigation a:hover {
	color: var(--tb--main, #007bff);
}

/* Menu toggle */

.menu-toggle {
	background-color: transparent;
	border: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	color: #222;
	display: none;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1.5;
	margin: 1px auto 2px;
	padding: 1em;
	text-shadow: none;
}

/* Display the menu toggle when JavaScript is available. */

.js .menu-toggle {
	display: block;
}

.main-navigation.toggled-on ul.nav-menu {
	display: block;
}

.menu-toggle:hover,
.menu-toggle:focus {
	background-color: transparent;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.menu-toggle:focus {
	outline: thin solid;
}

.menu-toggle .icon {
	margin-right: 0.5em;
	top: -2px;
}

.toggled-on .menu-toggle .icon-bars,
.menu-toggle .icon-close {
	display: none;
}

.toggled-on .menu-toggle .icon-close {
	display: inline-block;
}

/* Dropdown Toggle */

.dropdown-toggle {
	background-color: transparent;
	border: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	color: #222;
	display: block;
	font-size: 16px;
	right: -0.5em;
	line-height: 1.5;
	margin: 0 auto;
	padding: 0.5em;
	position: absolute;
	text-shadow: none;
	top: 0;
}

.dropdown-toggle:hover,
.dropdown-toggle:focus {
	background: transparent;
}

.dropdown-toggle:focus {
	outline: thin dotted;
}

.dropdown-toggle.toggled-on .icon {
	-ms-transform: rotate(-180deg); /* IE 9 */
	-webkit-transform: rotate(-180deg); /* Chrome, Safari, Opera */
	transform: rotate(-180deg);
}

/*--------------------------------------------------------------
13.0 Layout
--------------------------------------------------------------*/

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*,
*:before,
*:after {
	/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

body {
	/* 页面底：亮色 #f4f4f4、暗色 #14181b（都由 --tb--bdbg 决定），
	   与容器的白底拉开层次。原为写死的 #fff（WordPress 自定义背景色的兜底），
	   现在统一交给变量，改色只动 functions.php 里那两行变量。 */
	background: var(--tb--bdbg, #f4f4f4);
}

#page {
	position: relative;
	word-wrap: break-word;
}

.wrap {
	margin-left: auto;
	margin-right: auto;
	max-width: 700px;
	padding-left: 2em;
	padding-right: 2em;
}

.wrap:after {
	clear: both;
	content: "";
	display: block;
}

/* 插件定制：内容列做成卡片（白底 + 1px 边框 + 圆角）。
   子文档页 #primary 里同时装着左侧文档树（.doc-sidebar，float:left）
   和正文（.content），加这道边框后两者被框成一块整体。
   display: flow-root：让 #primary 自己成为 BFC 收住内部浮动，
   否则文档树比正文高时会从边框里溢出来；不用 overflow:hidden，
   否则会变成滚动容器、把文档树的 position:sticky 锁死。
   （.has-sidebar 时 #primary 本身是浮动元素，已是 BFC，此声明无副作用。） */
#primary {
	background: var(--tb--white, #fff);
	border: 1px solid var(--tb--line, #e0e0e0);
	border-radius: 6px;
	padding: 1em;
	display: flow-root;
}

/*--------------------------------------------------------------
13.1 Header
--------------------------------------------------------------*/

#masthead .wrap {
	position: relative;
}

.site-header {
	background-color: #fafafa;
	position: relative;
}

/* Site branding */

.site-branding {
	padding: 1em 0;
	position: relative;
	-webkit-transition: margin-bottom 0.2s;
	transition: margin-bottom 0.2s;
	z-index: 3;
}

.site-branding a {
	text-decoration: none;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
}

.site-branding a:hover,
.site-branding a:focus {
	opacity: 0.7;
}

.site-title {
	clear: none;
	font-size: 24px;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.08em;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

.site-title,
.site-title a {
	color: #222;
	opacity: 1; /* Prevent opacity from changing during selective refreshes in the customize preview */
}

body.has-header-image .site-title,
body.has-header-video .site-title,
body.has-header-image .site-title a,
body.has-header-video .site-title a {
	color: #fff;
}

.site-description {
	color: #666;
	font-size: 13px;
	font-size: 0.8125rem;
	margin-bottom: 0;
}

body.has-header-image .site-description,
body.has-header-video .site-description {
	color: #fff;
	opacity: 0.8;
}

.custom-logo-link {
	display: inline-block;
	padding-right: 1em;
	vertical-align: middle;
	width: auto;
}

.custom-logo-link img {
	display: inline-block;
	max-height: 80px;
	width: auto;
}

body.home.title-tagline-hidden.has-header-image .custom-logo-link img,
body.home.title-tagline-hidden.has-header-video .custom-logo-link img {
	max-height: 200px;
	max-width: 100%;
}

.custom-logo-link a:hover,
.custom-logo-link a:focus {
	opacity: 0.9;
}

body:not(.title-tagline-hidden) .site-branding-text {
	display: inline-block;
	max-width: 100%;
	vertical-align: middle;
}

.custom-header {
	position: relative;
}

.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
	display: table;
	height: 300px;
	height: 75vh;
	width: 100%;
}

.custom-header-media {
	bottom: 0;
	left: 0;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}

.custom-header-media:before {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.3+75 */
	background: -moz-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	bottom: 0;
	content: "";
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	right: 0;
	z-index: 2;
}

.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe {
	position: fixed;
	height: auto;
	left: 50%;
	max-width: 1000%;
	min-height: 100%;
	min-width: 100%;
	min-width: 100vw; /* vw prevents 1px gap on left that 100% has */
	width: auto;
	top: 50%;
	padding-bottom: 1px; /* Prevent header from extending beyond the footer */
	-ms-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.wp-custom-header .wp-custom-header-video-button { /* Specificity prevents .color-dark button overrides */
	background-color: rgba(34, 34, 34, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.6);
	color: rgba(255, 255, 255, 0.6);
	height: 45px;
	overflow: hidden;
	padding: 0;
	position: fixed;
	right: 30px;
	top: 30px;
	-webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
	width: 45px;
}

.wp-custom-header .wp-custom-header-video-button:hover,
.wp-custom-header .wp-custom-header-video-button:focus { /* Specificity prevents .color-dark button overrides */
	border-color: rgba(255, 255, 255, 0.8);
	background-color: rgba(34, 34, 34, 0.8);
	color: #fff;
}

.admin-bar .wp-custom-header-video-button {
	top: 62px;
}

.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
	bottom: 0;
	position: absolute;
	top: auto;
	-ms-transform: translateX(-50%) translateY(0);
	-moz-transform: translateX(-50%) translateY(0);
	-webkit-transform: translateX(-50%) translateY(0);
	transform: translateX(-50%) translateY(0);
}

/* For browsers that support 'object-fit' */
@supports ( object-fit: cover ) {
	.has-header-image .custom-header-media img,
	.has-header-video .custom-header-media video,
	.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
		height: 100%;
		left: 0;
		-o-object-fit: cover;
		object-fit: cover;
		top: 0;
		-ms-transform: none;
		-moz-transform: none;
		-webkit-transform: none;
		transform: none;
		width: 100%;
	}
}

/* Hides div in Customizer preview when header images or videos change. */

body:not(.has-header-image):not(.has-header-video) .custom-header-media {
	display: none;
}

.has-header-image.twentyseventeen-front-page .site-branding,
.has-header-video.twentyseventeen-front-page .site-branding,
.has-header-image.home.blog .site-branding,
.has-header-video.home.blog .site-branding {
	display: table-cell;
	height: 100%;
	vertical-align: bottom;
}

/*--------------------------------------------------------------
13.2 Front Page
--------------------------------------------------------------*/

.twentyseventeen-front-page .site-content {
	padding: 0;
}

.twentyseventeen-panel {
	overflow: hidden;
	position: relative;
}

.panel-image {
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	position: relative;
}

.panel-image:before {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.3+100 */ /* FF3.6-15 */
	background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%); /* Chrome10-25,Safari5.1-6 */
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.3)));
	background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	bottom: 0;
	content: "";
	left: 0;
	right: 0;
	position: absolute;
	top: 100px;
}

.twentyseventeen-front-page article:not(.has-post-thumbnail):not(:first-child) {
	border-top: 1px solid #ddd;
}

.panel-content {
	position: relative;
}

.panel-content .wrap {
	padding-bottom: 0.5em;
	padding-top: 1.75em;
}

/* Panel edit link */

.twentyseventeen-panel .edit-link {
	display: block;
	margin: 0.3em 0 0;
}

.twentyseventeen-panel .entry-header .edit-link {
	font-size: 14px;
	font-size: 0.875rem;
}

/* Front Page - Recent Posts */

.twentyseventeen-front-page .panel-content .recent-posts article {
	border: 0;
	color: #333;
	margin-bottom: 3em;
}

.recent-posts .entry-header {
	margin-bottom: 1.2em;
}

.page .panel-content .recent-posts .entry-title {
	font-size: 20px;
	font-size: 1.25rem;
	font-weight: 300;
	letter-spacing: 0;
	text-transform: none;
}

.twentyseventeen-panel .recent-posts .entry-header .edit-link {
	color: #222;
	display: inline-block;
	font-size: 11px;
	font-size: 0.6875rem;
	margin-left: 1em;
}

/*--------------------------------------------------------------
13.3 Regular Content
--------------------------------------------------------------*/

.site-content-contain {
	/* 同上：这里是页面底的第二块（正文区容器），走同一个变量 */
	background-color: var(--tb--bdbg, #f4f4f4);
	position: relative;
}

.site-content {
	padding: 1em 0 0;
}

/*--------------------------------------------------------------
13.4 Posts
--------------------------------------------------------------*/

/* Post Landing Page */

.sticky {
	position: relative;
}

.post:not(.sticky) .icon-thumb-tack {
	display: none;
}

.sticky .icon-thumb-tack {
	display: block;
	height: 18px;
	left: -1.5em;
	position: absolute;
	top: 1.65em;
	width: 20px;
}

.page .panel-content .entry-title,
.page-title,
body.page:not(.twentyseventeen-front-page) .entry-title {
	color: #222;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.entry-header .entry-title {
	margin-bottom: 0.25em;
}

.entry-title a {
	color: #333;
	text-decoration: none;
	margin-left: -2px;
}

.entry-title:not(:first-child) {
	padding-top: 0;
}

.entry-meta {
	color: #767676;
	font-size: 11px;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.1818em;
	padding-bottom: 0.25em;
	text-transform: uppercase;
}

.entry-meta a {
	color: #767676;
}

.byline,
.updated:not(.published) {
	display: none;
}

.single .byline,
.group-blog .byline {
	display: inline;
}

.pagination,
.comments-pagination {
	border-top: 1px solid #eee;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 800;
	padding: 2em 0 3em;
	text-align: center;
}

.pagination .icon,
.comments-pagination .icon {
	width: 0.666666666em;
	height: 0.666666666em;
}

.comments-pagination {
	border: 0;
}

.page-numbers {
	display: none;
	padding: 0.5em 0.75em;
}

.page-numbers.current {
	color: #767676;
	display: inline-block;
}

.page-numbers.current .screen-reader-text {
	clip-path: none;
	height: auto;
	overflow: auto;
	position: relative !important;
	width: auto;
}

.prev.page-numbers,
.next.page-numbers {
	background-color: #ddd;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	display: inline-block;
	font-size: 24px;
	font-size: 1.5rem;
	line-height: 1;
	padding: 0.25em 0.5em 0.4em;
}

.prev.page-numbers,
.next.page-numbers {
	-webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
}

.prev.page-numbers:focus,
.prev.page-numbers:hover,
.next.page-numbers:focus,
.next.page-numbers:hover {
	background-color: #767676;
	color: #fff;
}

.prev.page-numbers {
	float: left;
}

.next.page-numbers {
	float: right;
}

/* Aligned blockquotes */

.entry-content blockquote.alignleft,
.entry-content blockquote.alignright {
	color: #666;
	font-size: 13px;
	font-size: 0.8125rem;
	width: 48%;
}

/* Blog landing, search, archives */

.blog .site-main > article,
.archive .site-main > article,
.search .site-main > article {
	padding-bottom: 2em;
}

body:not(.twentyseventeen-front-page) .entry-header {
	padding: 1em 0;
}

body:not(.twentyseventeen-front-page) .entry-header,
body:not(.twentyseventeen-front-page) .entry-content,
body:not(.twentyseventeen-front-page) #comments {
	margin-left: auto;
	margin-right: auto;
}

body:not(.twentyseventeen-front-page) .entry-header {
	padding-top: 0;
}

.blog .entry-meta a.post-edit-link,
.archive .entry-meta a.post-edit-link,
.search .entry-meta a.post-edit-link {
	color: #222;
	display: inline-block;
	margin-left: 1em;
	white-space: nowrap;
}

.search .page .entry-meta a.post-edit-link {
	margin-left: 0;
	white-space: nowrap;
}

.taxonomy-description {
	color: #666;
	font-size: 13px;
	font-size: 0.8125rem;
}

/* More tag */

.entry-content .more-link:before {
	content: "";
	display: block;
	margin-top: 1.5em;
}

/* Single Post */

.single-post:not(.has-sidebar) #primary,
.page.page-one-column:not(.twentyseventeen-front-page) #primary,
.archive.page-one-column:not(.has-sidebar) .page-header,
.archive.page-one-column:not(.has-sidebar) #primary {
	margin-left: auto;
	margin-right: auto;
	max-width: 740px;
}

.page-links {
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 800;
	padding: 2em 0 3em;
}

.page-links .page-number {
	color: #767676;
	display: inline-block;
	padding: 0.5em 1em;
}

.page-links a {
	display: inline-block;
}

.page-links a .page-number {
	color: #222;
}

/* Entry footer */

.entry-footer {
	border-bottom: 1px solid #eee;
	border-top: 1px solid #eee;
	margin-top: 2em;
	padding: 2em 0;
}

.entry-footer .cat-links,
.entry-footer .tags-links {
	display: block;
	font-size: 11px;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.1818em;
	padding-left: 2.5em;
	position: relative;
	text-transform: uppercase;
}

.entry-footer .cat-links + .tags-links {
	margin-top: 1em;
}

.entry-footer .cat-links a,
.entry-footer .tags-links a {
	color: #333;
}

.entry-footer .cat-links .icon,
.entry-footer .tags-links .icon {
	color: #767676;
	left: 0;
	margin-right: 0.5em;
	position: absolute;
	top: 2px;
}

.entry-footer .edit-link {
	display: inline-block;
}

.entry-footer .edit-link a.post-edit-link {
	background-color: #222;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	-webkit-box-shadow: none;
	box-shadow: none;
	color: #fff;
	display: inline-block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 800;
	margin-top: 2em;
	padding: 0.7em 2em;
	-webkit-transition: background-color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out;
	white-space: nowrap;
}

.entry-footer .edit-link a.post-edit-link:hover,
.entry-footer .edit-link a.post-edit-link:focus {
	background-color: #767676;
}

/* Post Formats */

.blog .format-status .entry-title,
.archive .format-status .entry-title,
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
	display: none;
}

.format-quote blockquote {
	color: #333;
	font-size: 20px;
	font-size: 1.25rem;
	font-weight: 300;
	overflow: visible;
	position: relative;
}

.format-quote blockquote .icon {
	display: block;
	height: 20px;
	left: -1.25em;
	position: absolute;
	top: 0.4em;
	-webkit-transform: scale(-1, 1);
	-ms-transform: scale(-1, 1);
	transform: scale(-1, 1);
	width: 20px;
}

/* Post Navigation */

.post-navigation {
	font-weight: 800;
	margin: 3em 0;
}

.post-navigation .nav-links {
	padding: 1em 0;
}

.nav-subtitle {
	background: transparent;
	color: #767676;
	display: block;
	font-size: 11px;
	font-size: 0.6875rem;
	letter-spacing: 0.1818em;
	margin-bottom: 1em;
	text-transform: uppercase;
}

.nav-title {
	color: #333;
	font-size: 15px;
	font-size: 0.9375rem;
}

.post-navigation .nav-next {
	margin-top: 1.5em;
}

.nav-links .nav-previous .nav-title .nav-title-icon-wrapper {
	margin-right: 0.5em;
}

.nav-links .nav-next .nav-title .nav-title-icon-wrapper {
	margin-left: 0.5em;
}

/*--------------------------------------------------------------
13.5 Pages
--------------------------------------------------------------*/

.page-header {
	padding-bottom: 2em;
}

.page .entry-header .edit-link {
	font-size: 14px;
	font-size: 0.875rem;
}

.search .page .entry-header .edit-link {
	font-size: 11px;
	font-size: 0.6875rem;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

.page:not(.home) #content {
	padding-bottom: 1.5em;
}

/* 404 page */

.error404 .page-content {
	padding-bottom: 4em;
}

.error404 .page-content .search-form,
.search .page-content .search-form {
	margin-bottom: 3em;
}

/*--------------------------------------------------------------
13.6 Footer
--------------------------------------------------------------*/

.site-footer {
	border-top: 1px solid #eee;
}

.site-footer .wrap {
	padding-bottom: 1.5em;
	padding-top: 2em;
}

/* Footer widgets */

.site-footer .widget-area {
	padding-bottom: 2em;
	padding-top: 2em;
}

/* Social nav */

.social-navigation {
	font-size: 16px;
	font-size: 1rem;
	margin-bottom: 1em;
}

.social-navigation ul {
	list-style: none;
	margin-bottom: 0;
	margin-left: 0;
}

.social-navigation li {
	display: inline;
}

.social-navigation a {
	background-color: #767676;
	-webkit-border-radius: 40px;
	border-radius: 40px;
	color: #fff;
	display: inline-block;
	height: 40px;
	margin: 0 1em 0.5em 0;
	text-align: center;
	width: 40px;
}

.social-navigation a:hover,
.social-navigation a:focus {
	background-color: #333;
}

.social-navigation .icon {
	height: 16px;
	top: 12px;
	width: 16px;
	vertical-align: top;
}

/* Site info */

.site-info {
	font-size: 14px;
	font-size: 0.875rem;
	margin-bottom: 1em;
}

.site-info a {
	color: #666;
}

.site-info .sep {
	margin: 0;
	display: block;
	visibility: hidden;
	height: 0;
	width: 100%;
}

.site-info span[role=separator] {
	padding: 0 0.2em 0 0.4em;
}

.site-info span[role=separator]::before {
	content: '\002f';
}

/*--------------------------------------------------------------
14.0 Comments
--------------------------------------------------------------*/

#comments {
	clear: both;
	padding: 2em 0 0.5em;
}

.comments-title {
	font-size: 20px;
	font-size: 1.25rem;
	margin-bottom: 1.5em;
}

.comment-list,
.comment-list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-list li:before {
	display: none;
}

.comment-body {
	margin-left: 65px;
}

.comment-author {
	font-size: 16px;
	font-size: 1rem;
	margin-bottom: 0.4em;
	position: relative;
	z-index: 2;
}

.comment-author .avatar {
	height: 50px;
	left: -65px;
	position: absolute;
	width: 50px;
}

.comment-author .says {
	display: none;
}

.comment-meta {
	margin-bottom: 1.5em;
}

.comment-metadata {
	color: #767676;
	font-size: 10px;
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.1818em;
	text-transform: uppercase;
}

.comment-metadata a {
	color: #767676;
}

.comment-metadata a.comment-edit-link {
	color: #222;
	margin-left: 1em;
}

.comment-body {
	color: #333;
	font-size: 14px;
	font-size: 0.875rem;
	margin-bottom: 4em;
}

.comment-reply-link {
	font-weight: 800;
	position: relative;
}

.comment-reply-link .icon {
	color: #222;
	left: -2em;
	height: 1em;
	position: absolute;
	top: 0;
	width: 1em;
}

.comment-reply-title small {
	margin-left: 0.5em;
}

.children .comment-author .avatar {
	height: 30px;
	left: -45px;
	width: 30px;
}

.bypostauthor > .comment-body > .comment-meta > .comment-author .avatar {
	border: 1px solid #333;
	padding: 2px;
}

.no-comments,
.comment-awaiting-moderation {
	color: #767676;
	font-size: 14px;
	font-size: 0.875rem;
	font-style: italic;
}

.comments-pagination {
	margin: 2em 0 3em;
}

.form-submit {
	text-align: right;
}

.comment-form #wp-comment-cookies-consent {
	margin: 0 10px 0 0;
}

.comment-form .comment-form-cookies-consent label {
	display: inline;
}

/*--------------------------------------------------------------
15.0 Widgets
--------------------------------------------------------------*/

/* 插件定制：主题小工具栏（#secondary）做成卡片，
   与 #primary / .doc-sidebar / 首页卡片的视觉语言保持一致。
   左右加内边距，文字不贴边框。 */
#secondary {
	padding: 1em 1.5em 2em;
	background: var(--tb--white, #fff);
	border: 1px solid var(--tb--line, #e0e0e0);
	border-radius: 6px;
}

.widget {
	padding-bottom: 3em;
}

h2.widget-title {
	color: #222;
	font-size: 13px;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.1818em;
	margin-bottom: 1.5em;
	text-transform: uppercase;
}

.widget-title a {
	color: inherit;
}

/* widget forms */

.widget select {
	width: 100%;
}


/* widget lists */

.widget ul {
	list-style: none;
	margin: 0;
}

.widget ul li,
.widget ol li {
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
	padding: 0.5em 0;
}

.widget:not(.widget_tag_cloud) ul li + li {
	margin-top: -1px;
}

.widget ul li ul {
	margin: 0 0 -1px;
	padding: 0;
	position: relative;
}

.widget ul li li {
	border: 0;
	padding-left: 24px;
	padding-left: 1.5rem;
}

/* Widget lists of links */

.widget_top-posts ul li ul,
.widget_rss_links ul li ul,
.widget-grofile ul.grofile-links li ul,
.widget_pages ul li ul,
.widget_meta ul li ul {
	bottom: 0;
}

.widget_nav_menu ul li li,
.widget_top-posts ul li,
.widget_top-posts ul li li,
.widget_rss_links ul li,
.widget_rss_links ul li li,
.widget-grofile ul.grofile-links li,
.widget-grofile ul.grofile-links li li {
	padding-bottom: 0.25em;
	padding-top: 0.25em;
}

.widget_rss ul li {
	padding-bottom: 1em;
	padding-top: 1em;
}

/* Widget markup */

.widget .post-date,
.widget .rss-date {
	font-size: 0.81em;
}

/* Text widget */

.widget_text {
	word-wrap: break-word;
}

.widget_text ul {
	list-style: disc;
	margin: 0 0 1.5em 1.5em;
}

.widget_text ol {
	list-style: decimal;
}

.widget_text ul li,
.widget_text ol li {
	border: none;
}

.widget_text ul li:last-child,
.widget_text ol li:last-child {
	padding-bottom: 0;
}

.widget_text ul li ul {
	margin: 0 0 0 1.5em;
}

.widget_text ul li li {
	padding-left: 0;
	padding-right: 0;
}

.widget_text ol li {
	list-style-position: inside;
}

.widget_text ol li + li {
	margin-top: -1px;
}

/* RSS Widget */

.widget_rss .widget-title .rsswidget:first-child:not(.rss-widget-title) {
	float: right;
}

.widget_rss .widget-title .rsswidget:first-child:hover {
	background-color: transparent;
}

.widget_rss .widget-title .rsswidget:first-child img {
	display: block;
}

.widget_rss ul li {
	padding: 2.125em 0;
}

.widget_rss ul li:first-child {
	border-top: none;
	padding-top: 0;
}

.widget_rss li .rsswidget {
	font-size: 22px;
	font-size: 1.375rem;
	font-weight: 300;
	line-height: 1.4;
}

.widget_rss .rss-date,
.widget_rss li cite {
	color: #767676;
	display: block;
	font-size: 10px;
	font-size: 0.625rem;
	font-style: normal;
	font-weight: 800;
	letter-spacing: 0.18em;
	line-height: 1.5;
	text-transform: uppercase;
}

.widget_rss .rss-date {
	margin: 0.5em 0 1.5em;
	padding: 0;
}

.widget_rss .rssSummary {
	margin-bottom: 0.5em;
}

/* Contact Info Widget */

.widget_contact_info .contact-map {
	margin-bottom: 0.5em;
}

/* Gravatar */

.widget-grofile h4 {
	font-size: 16px;
	font-size: 1rem;
	margin-bottom: 0;
}

/* Recent Comments */

.widget_recent_comments table,
.widget_recent_comments th,
.widget_recent_comments td {
	border: 0;
}

/* Recent Posts widget */

.widget_recent_entries .post-date {
	display: block;
}

/* Search */

.search-form {
	position: relative;
}

.search-form .search-submit {
	bottom: 3px;
	padding: 0.5em 1em;
	position: absolute;
	right: 3px;
	top: 3px;
}

.search-form .search-submit .icon {
	height: 24px;
	top: -2px;
	width: 24px;
}

/* Tag cloud widget */

.tagcloud ul li {
	float: left;
	border-top: 0;
	border-bottom: 0;
	padding: 0;
	margin: 4px 4px 0 0;
}

.tagcloud,
.widget_tag_cloud,
.wp_widget_tag_cloud {
	line-height: 1.5;
}

.widget .tagcloud a,
.widget.widget_tag_cloud a,
.wp_widget_tag_cloud a {
	border: 1px solid #ddd;
	-webkit-box-shadow: none;
	box-shadow: none;
	display: block;
	padding: 4px 10px 5px;
	position: relative;
	-webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
	width: auto;
	word-wrap: break-word;
	z-index: 0;
}

.widget .tagcloud a:hover,
.widget .tagcloud a:focus,
.widget.widget_tag_cloud a:hover,
.widget.widget_tag_cloud a:focus,
.wp_widget_tag_cloud a:hover,
.wp_widget_tag_cloud a:focus {
	border-color: #bbb;
	-webkit-box-shadow: none;
	box-shadow: none;
	text-decoration: none;
}

/* Calendar widget */

.widget_calendar .wp-calendar-table {
	margin-bottom: 0;
}

.widget_calendar .wp-calendar-nav {
	display: table;
	width: 100%;
	margin: 0 0 1.5em;
	padding: 0.4em 0;
}

.widget_calendar .wp-calendar-nav span {
	display: table-cell;
}

.widget_calendar .wp-calendar-nav-prev,
.widget_calendar .wp-calendar-nav-next {
	width: 40%;
}

.widget_calendar th,
.widget_calendar td,
.widget_calendar .wp-calendar-nav span {
	text-align: center;
}

.widget_calendar tfoot td {
	border: 0;
}

/* Gallery widget */

.gallery-columns-5 .gallery-caption,
.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
	display: none;
}

/*--------------------------------------------------------------
16.0 Media
--------------------------------------------------------------*/

img,
video {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}

img.alignleft,
img.alignright {
	float: none;
	margin: 0;
}

.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

audio:focus,
video:focus {
	outline: thin dotted;
}

/* Make sure embeds and iframes fit their containers. */

embed,
iframe,
object {
	margin-bottom: 1.5em;
	max-width: 100%;
}

/* Remove bottom on embeds that wrapped in paragraphs via wpautop. */

p > embed:only-child,
p > iframe:only-child,
p > object:only-child {
	margin-bottom: 0;
}

.wp-caption,
.gallery-caption {
	color: #666;
	font-size: 13px;
	font-size: 0.8125rem;
	font-style: italic;
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

/* Media Elements */

.mejs-container {
	margin-bottom: 1.5em;
}

/* Audio Player */

.mejs-controls a.mejs-horizontal-volume-slider,
.mejs-controls a.mejs-horizontal-volume-slider:focus,
.mejs-controls a.mejs-horizontal-volume-slider:hover {
	background: transparent;
	border: 0;
}

/* Playlist Color Overrides: Light */

.site-content .wp-playlist-light {
	border-color: #eee;
	color: #222;
}

.site-content .wp-playlist-light .wp-playlist-current-item .wp-playlist-item-album {
	color: #333;
}

.site-content .wp-playlist-light .wp-playlist-current-item .wp-playlist-item-artist {
	color: #767676;
}

.site-content .wp-playlist-light .wp-playlist-item {
	border-bottom: 1px dotted #eee;
	-webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
}

.site-content .wp-playlist-light .wp-playlist-item:hover,
.site-content .wp-playlist-light .wp-playlist-item:focus {
	border-bottom-color: rgba(0, 0, 0, 0);
	background-color: #767676;
	color: #fff;
}

.site-content .wp-playlist-light a.wp-playlist-caption:hover,
.site-content .wp-playlist-light .wp-playlist-item:hover a,
.site-content .wp-playlist-light .wp-playlist-item:focus a {
	color: #fff;
}

/* Playlist Color Overrides: Dark */

.site-content .wp-playlist-dark {
	background: #222;
	border-color: #333;
}

.site-content .wp-playlist-dark .mejs-container .mejs-controls {
	background-color: #333;
}

.site-content .wp-playlist-dark .wp-playlist-caption {
	color: #fff;
}

.site-content .wp-playlist-dark .wp-playlist-current-item .wp-playlist-item-album {
	color: #eee;
}

.site-content .wp-playlist-dark .wp-playlist-current-item .wp-playlist-item-artist {
	color: #aaa;
}

.site-content .wp-playlist-dark .wp-playlist-playing {
	background-color: #333;
}

.site-content .wp-playlist-dark .wp-playlist-item {
	border-bottom: 1px dotted #555;
	-webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
}

.site-content .wp-playlist-dark .wp-playlist-item:hover,
.site-content .wp-playlist-dark .wp-playlist-item:focus {
	border-bottom-color: rgba(0, 0, 0, 0);
	background-color: #aaa;
	color: #222;
}

.site-content .wp-playlist-dark a.wp-playlist-caption:hover,
.site-content .wp-playlist-dark .wp-playlist-item:hover a,
.site-content .wp-playlist-dark .wp-playlist-item:focus a {
	color: #222;
}

/* Playlist Style Overrides */

.site-content .wp-playlist {
	padding: 0.625em 0.625em 0.3125em;
}

.site-content .wp-playlist-current-item .wp-playlist-item-title {
	font-weight: 700;
}

.site-content .wp-playlist-current-item .wp-playlist-item-album {
	font-style: normal;
}

.site-content .wp-playlist-current-item .wp-playlist-item-artist {
	font-size: 10px;
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.1818em;
	text-transform: uppercase;
}

.site-content .wp-playlist-item {
	padding: 0 0.3125em;
	cursor: pointer;
}

.site-content .wp-playlist-item:last-of-type {
	border-bottom: none;
}

.site-content .wp-playlist-item a {
	padding: 0.3125em 0;
	border-bottom: none;
}

.site-content .wp-playlist-item a,
.site-content .wp-playlist-item a:focus,
.site-content .wp-playlist-item a:hover {
	-webkit-box-shadow: none;
	box-shadow: none;
	background: transparent;
}

.site-content .wp-playlist-item-length {
	top: 5px;
}

/* SVG Icons base styles */

.icon {
	display: inline-block;
	fill: currentColor;
	height: 1em;
	position: relative; /* Align more nicely with capital letters */
	top: -0.0625em;
	vertical-align: middle;
	width: 1em;
}

/*--------------------------------------------------------------
16.1 Galleries
--------------------------------------------------------------*/

.gallery-item {
	display: inline-block;
	text-align: left;
	vertical-align: top;
	margin: 0 0 1.5em;
	padding: 0 1em 0 0;
	width: 50%;
}

.gallery-columns-1 .gallery-item {
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-item a,
.gallery-item a:hover,
.gallery-item a:focus,
.widget-area .gallery-item a,
.widget-area .gallery-item a:hover,
.widget-area .gallery-item a:focus {
	-webkit-box-shadow: none;
	box-shadow: none;
	background: none;
	display: inline-block;
	max-width: 100%;
}

.gallery-item a img {
	display: block;
	-webkit-transition: -webkit-filter 0.2s ease-in;
	transition: -webkit-filter 0.2s ease-in;
	transition: filter 0.2s ease-in;
	transition: filter 0.2s ease-in, -webkit-filter 0.2s ease-in;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.gallery-item a:hover img,
.gallery-item a:focus img {
	-webkit-filter: opacity(60%);
	filter: opacity(60%);
}

.gallery-caption {
	display: block;
	text-align: left;
	padding: 0 10px 0 0;
	margin-bottom: 0;
}

/*--------------------------------------------------------------
17.0 Customizer
--------------------------------------------------------------*/

.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:after {
	border: 2px dashed #0085ba; /* Matches visible edit shortcuts. */
	bottom: 1em;
	content: "";
	display: block;
	left: 1em;
	position: absolute;
	right: 1em;
	top: 1em;
	z-index: 1;
}

.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel .panel-content {
	z-index: 2; /* Prevent :after from preventing interactions within the section */
}

/* Used for placeholder text */
.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel .twentyseventeen-panel-title {
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 1px;
	padding: 3em;
	text-transform: uppercase;
	text-align: center;
}

/* Show borders on the custom page panels only when the front page sections are being edited */
.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(1):after {
	border: none;
}

.twentyseventeen-front-page.twentyseventeen-customizer #primary article.panel-placeholder {
	border: 0;
}

/* Add some space around the visual edit shortcut buttons. */
.twentyseventeen-panel > .customize-partial-edit-shortcut > button {
	top: 30px;
	left: 30px;
}

/* Ensure that placeholder icons are visible. */
.twentyseventeen-panel .customize-partial-edit-shortcut-hidden:before {
	visibility: visible;
}

/*--------------------------------------------------------------
18.0 SVGs Fallbacks
--------------------------------------------------------------*/

.svg-fallback {
	display: none;
}

.no-svg .svg-fallback {
	display: inline-block;
}

.no-svg .dropdown-toggle {
	padding: 0.5em 0 0;
	right: 0;
	text-align: center;
	width: 2em;
}

.no-svg .dropdown-toggle .svg-fallback.icon-angle-down {
	font-size: 20px;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1;
	-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
	-ms-transform: rotate(180deg); /* IE 9 */
	transform: rotate(180deg);
}

.no-svg .dropdown-toggle.toggled-on .svg-fallback.icon-angle-down {
	-webkit-transform: rotate(0); /* Chrome, Safari, Opera */
	-ms-transform: rotate(0); /* IE 9 */
	transform: rotate(0);
}

.no-svg .dropdown-toggle .svg-fallback.icon-angle-down:before {
	content: "\005E";
}

/* Social Menu fallbacks */

.no-svg .social-navigation a {
	background: transparent;
	color: #222;
	height: auto;
	width: auto;
}

/* Show screen reader text in some cases */

.no-svg .next.page-numbers .screen-reader-text,
.no-svg .prev.page-numbers .screen-reader-text,
.no-svg .social-navigation li a .screen-reader-text,
.no-svg .search-submit .screen-reader-text {
	clip-path: none;
	font-size: 16px;
	font-size: 1rem;
	font-weight: 400;
	height: auto;
	position: relative !important; /* overrides previous !important styles */
	width: auto;
}

/*--------------------------------------------------------------
19.0 Media Queries
--------------------------------------------------------------*/

/* Adjust positioning of edit shortcuts, override style in customize-preview.css */
@media screen and (min-width: 320px) {

	body.customize-partial-edit-shortcuts-shown .site-header .site-title {
		padding-left: 0;
	}
}

@media screen and (min-width: 480px) {

	/* Typography */

	body,
	button,
	input,
	select,
	textarea {
		font-size: 18px;
		font-size: 1.125rem;
	}

	h1 {
		font-size: 30px;
		font-size: 1.875rem;
	}

	h2,
	.home.blog .entry-title,
	.page .panel-content .recent-posts .entry-title {
		font-size: 26px;
		font-size: 1.625rem;
	}

	h3 {
		font-size: 22px;
		font-size: 1.375rem;
	}

	h4 {
		font-size: 18px;
		font-size: 1.125rem;
	}

	h5 {
		font-size: 13px;
		font-size: 0.8125rem;
	}

	h6 {
		font-size: 16px;
		font-size: 1rem;
	}

	.entry-content blockquote.alignleft,
	.entry-content blockquote.alignright {
		font-size: 14px;
		font-size: 0.875rem;
	}

	/* Fix image alignment */
	img.alignleft {
		float: left;
		margin-right: 1.5em;
	}

	img.alignright {
		float: right;
		margin-left: 1.5em;
	}

	/* Site Branding */

	.site-branding {
		padding: 3em 0;
	}

	/* Front Page */

	.panel-content .wrap {
		padding-bottom: 2em;
		padding-top: 3.5em;
	}

	.page-one-column .panel-content .wrap {
		max-width: 740px;
	}

	.panel-content .entry-header {
		margin-bottom: 4.5em;
	}

	.panel-content .recent-posts .entry-header {
		margin-bottom: 0;
	}

	/* Blog Index, Archive, Search */

	.taxonomy-description {
		font-size: 14px;
		font-size: 0.875rem;
	}

	.page-numbers.current {
		font-size: 16px;
		font-size: 1rem;
	}

	/* Site Footer */

	.site-footer {
		font-size: 16px;
		font-size: 1rem;
	}

	/* Gallery Columns */

	.gallery-item {
		max-width: 25%;
	}

	.gallery-columns-1 .gallery-item {
		max-width: 100%;
	}

	.gallery-columns-2 .gallery-item {
		max-width: 50%;
	}

	.gallery-columns-3 .gallery-item {
		max-width: 33.33%;
	}

	.gallery-columns-4 .gallery-item {
		max-width: 25%;
	}
}

/* 低于 1024（移动端模式）：.wrap 去掉内外边距、铺满整屏。
   基类的 .wrap 是 margin:auto + max-width:700px + 左右 padding:2em，
   平板/手机上会白白空掉两侧。上下留白另由 .site-content、
   .site-footer .wrap、.panel-content .wrap 各自控制，这里不碰。 */
@media screen and (max-width: 1024px) {
	.wrap {
		margin-left: 0;
		margin-right: 0;
		max-width: none;
		padding-left: 0;
		padding-right: 0;
	}
}

/* 桌面布局起点 = 64.0625em（1025px）。移动端块是 max-width:1024px，
   两者严丝合缝互补、不重叠；「≤1024 走移动端」就是靠这一对边界实现的。
   原先写 64em（1024px）会与移动端在恰好 1024px 时同时命中。
   与 DUX 对照后的由来：
   DUX 的 @media(max-width:1024px) 块做的就是「收起侧栏、内容变整宽」，
   doc 插件自带的响应式规则（主题内 assets/css/doc-home.css L331 起把
   1025–1360 / 769–1024 / ≤768 分成三档，注释写明「侧边栏隐藏（1024px）」）
   也是按 1024 为界写的。主题停在 768 会让 769–1024 区间仍是两栏，
   与插件那三档的前提不符。 */
@media screen and (min-width: 1025px) {
	html {
		scroll-padding-top: calc( var(--wp-admin--admin-bar--height, 0px) + 72px );
	}

	/* Typography */

	body,
	button,
	input,
	select,
	textarea {
		font-size: 16px;
		font-size: 1rem;
		line-height: 1.5;
	}

	.entry-content blockquote.alignleft,
	.entry-content blockquote.alignright {
		font-size: 13px;
		font-size: 0.8125rem;
	}

	/* Layout */

	/* 容器上限由插件后台「管理 → 主题设置」注入，这里保留主题原值 */
	.wrap {
		max-width: 1000px;
		padding-left: 3em;
		padding-right: 3em;
	}

	/* 插件定制：右侧栏改为左侧栏。
	   DOM 顺序是 #primary 在前、#secondary 在后，因此让 #primary 右浮动、
	   #secondary 左浮动，二者落在同一行即呈现「左栏 + 左正文」。

	   间距：小工具栏与主栏之间固定 20px 缝。主栏宽度不动（仍是
	   calc(100% - min(320px,32%) - 4%)），省下的宽度全部补给小工具栏，
	   于是两栏相加刚好是 100% - 20px，浮到同一行时自动空出 20px。 */
	.has-sidebar:not(.error404) #primary {
		float: right;
		width: calc(100% - min(320px, 32%) - 4%);
	}

	/* #primary / #secondary 都是卡片（见上方布局段的基础规则），
	   桌面端给足内边距，文字不贴边框。 */
	#primary {
		padding: 1.5em;
	}

	.has-sidebar #secondary {
		float: left;
		/* 基础规则给的是 1em，卡片化后顶部也要留白，否则首个
		   小工具标题会贴住上边框 */
		padding-top: 1.5em;
		/* 原来的 4% 间距在 1139px 容器下约 46px，改成固定 20px 后
		   多出的宽度归小工具栏（320px → 约 346px） */
		width: calc(min(320px, 32%) + 4% - 20px);
	}

	.error404 #primary {
		float: none;
	}

	/* Site Branding */

	.site-branding {
		margin-bottom: 0;
	}

	.has-header-image.twentyseventeen-front-page .site-branding,
	.has-header-video.twentyseventeen-front-page .site-branding,
	.has-header-image.home.blog .site-branding,
	.has-header-video.home.blog .site-branding {
		bottom: 0;
		display: block;
		left: 0;
		height: auto;
		padding-top: 0;
		position: absolute;
		width: 100%;
	}

	.has-header-image.twentyseventeen-front-page .custom-header,
	.has-header-video.twentyseventeen-front-page .custom-header,
	.has-header-image.home.blog .custom-header,
	.has-header-video.home.blog .custom-header {
		display: block;
		height: auto;
	}

	.custom-header-media {
		height: 165px;
		position: relative;
	}

	.twentyseventeen-front-page.has-header-image .custom-header-media,
	.twentyseventeen-front-page.has-header-video .custom-header-media,
	.home.blog.has-header-image .custom-header-media,
	.home.blog.has-header-video .custom-header-media {
		height: 0;
		position: relative;
	}

	.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media,
	.has-header-video:not(.twentyseventeen-front-page):not(.home) .custom-header-media {
		bottom: 0;
		height: auto;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
	}

	.custom-logo-link {
		padding-right: 2em;
	}

	.custom-logo-link img,
	body.home.title-tagline-hidden.has-header-image .custom-logo-link img,
	body.home.title-tagline-hidden.has-header-video .custom-logo-link img {
		max-width: 350px;
	}

	.title-tagline-hidden.home.has-header-image .custom-logo-link img,
	.title-tagline-hidden.home.has-header-video .custom-logo-link img {
		max-height: 200px;
	}

	.site-title {
		font-size: 36px;
		font-size: 2.25rem;
	}

	.site-description {
		font-size: 16px;
		font-size: 1rem;
	}

	/* Navigation */

	.navigation-top {
		bottom: 0;
		font-size: 14px;
		font-size: 0.875rem;
		left: 0;
		position: absolute;
		right: 0;
		width: 100%;
		z-index: 3;
	}

	.navigation-top .wrap {
		/* 宽度由插件后台「主题设置」注入，与正文容器保持一致 */
		/* The font size is 14px here and we need 50px padding in ems */
		padding: 0.75em 3.4166666666667em;
	}

	.navigation-top nav {
		margin-left: -1.25em;
	}

	.site-navigation-fixed.navigation-top {
		bottom: auto;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		z-index: 1000;
	}

	.admin-bar .site-navigation-fixed.navigation-top {
		top: 32px;
	}

	/* Main Navigation */

	.js .menu-toggle,
	.js .dropdown-toggle {
		display: none;
	}

	.main-navigation {
		width: auto;
	}

	.js .main-navigation ul,
	.js .main-navigation ul ul,
	.js .main-navigation > div > ul {
		display: block;
	}

	.main-navigation ul {
		background: transparent;
		padding: 0;
	}

	.main-navigation > div > ul {
		border: 0;
		margin-bottom: 0;
		padding: 0;
	}

	.main-navigation li {
		border: 0;
		display: inline-block;
	}

	.main-navigation li li {
		display: block;
	}

	.main-navigation a {
		padding: 1em 1.25em;
	}

	.main-navigation ul ul {
		background: #fff;
		border: 1px solid #bbb;
		left: -999em;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 99999;
	}

	.main-navigation ul li.menu-item-has-children:before,
	.main-navigation ul li.menu-item-has-children:after,
	.main-navigation ul li.page_item_has_children:before,
	.main-navigation ul li.page_item_has_children:after {
		border-style: solid;
		border-width: 0 6px 6px;
		content: "";
		display: none;
		height: 0;
		position: absolute;
		right: 1em;
		bottom: -1px;
		width: 0;
		z-index: 100000;
	}

	.main-navigation ul li.menu-item-has-children.focus:before,
	.main-navigation ul li.menu-item-has-children:hover:before,
	.main-navigation ul li.menu-item-has-children.focus:after,
	.main-navigation ul li.menu-item-has-children:hover:after,
	.main-navigation ul li.page_item_has_children.focus:before,
	.main-navigation ul li.page_item_has_children:hover:before,
	.main-navigation ul li.page_item_has_children.focus:after,
	.main-navigation ul li.page_item_has_children:hover:after {
		display: block;
	}

	.main-navigation ul li.menu-item-has-children:before,
	.main-navigation ul li.page_item_has_children:before {
		border-color: transparent transparent #bbb;
		bottom: 0;
	}

	.main-navigation ul li.menu-item-has-children:after,
	.main-navigation ul li.page_item_has_children:after {
		border-color: transparent transparent #fff;
	}

	.main-navigation ul ul li:hover > ul,
	.main-navigation ul ul li.focus > ul {
		left: 100%;
		right: auto;
	}

	.main-navigation ul ul a {
		padding: 0.75em 1.25em;
		width: 16em;
	}

	.main-navigation li li {
		-webkit-transition: background-color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out;
	}

	.main-navigation li li:hover,
	.main-navigation li li.focus {
		background: #767676;
	}

	.main-navigation li li a {
		-webkit-transition: color 0.3s ease-in-out;
		transition: color 0.3s ease-in-out;
	}

	.main-navigation li li.focus > a,
	.main-navigation li li:focus > a,
	.main-navigation li li:hover > a,
	.main-navigation li li a:hover,
	.main-navigation li li a:focus,
	.main-navigation li li.current_page_item a:hover,
	.main-navigation li li.current-menu-item a:hover,
	.main-navigation li li.current_page_item a:focus,
	.main-navigation li li.current-menu-item a:focus {
		color: #fff;
	}

	.main-navigation ul li:hover > ul,
	.main-navigation ul li.focus > ul {
		left: 0.5em;
		right: auto;
	}

	.main-navigation .menu-item-has-children > a > .icon,
	.main-navigation .page_item_has_children > a > .icon {
		display: inline;
		left: 5px;
		position: relative;
		top: -1px;
	}

	.main-navigation ul ul .menu-item-has-children > a > .icon,
	.main-navigation ul ul .page_item_has_children > a > .icon {
		margin-top: -9px;
		left: auto;
		position: absolute;
		right: 1em;
		top: 50%;
		-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
		-ms-transform: rotate(-90deg); /* IE 9 */
		transform: rotate(-90deg);
	}

	.main-navigation ul ul ul {
		left: -999em;
		margin-top: -1px;
		top: 0;
	}

	.main-navigation ul ul li.menu-item-has-children.focus:before,
	.main-navigation ul ul li.menu-item-has-children:hover:before,
	.main-navigation ul ul li.menu-item-has-children.focus:after,
	.main-navigation ul ul li.menu-item-has-children:hover:after,
	.main-navigation ul ul li.page_item_has_children.focus:before,
	.main-navigation ul ul li.page_item_has_children:hover:before,
	.main-navigation ul ul li.page_item_has_children.focus:after,
	.main-navigation ul ul li.page_item_has_children:hover:after {
		display: none;
	}

	/* Front Page */

	.twentyseventeen-front-page.has-header-image .site-branding,
	.twentyseventeen-front-page.has-header-video .site-branding,
	.home.blog.has-header-image .site-branding,
	.home.blog.has-header-video .site-branding {
		margin-bottom: 70px;
	}

	.twentyseventeen-front-page.has-header-image .custom-header-media,
	.twentyseventeen-front-page.has-header-video .custom-header-media,
	.home.blog.has-header-image .custom-header-media,
	.home.blog.has-header-video .custom-header-media {
		height: 1200px;
		height: 100vh;
		max-height: 100%;
		overflow: hidden;
	}

	.twentyseventeen-front-page.has-header-image .custom-header-media:before,
	.twentyseventeen-front-page.has-header-video .custom-header-media:before,
	.home.blog.has-header-image .custom-header-media:before,
	.home.blog.has-header-video .custom-header-media:before {
		height: 33%;
	}

	.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
	.admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
	.admin-bar.home.blog.has-header-image .custom-header-media,
	.admin-bar.home.blog.has-header-video .custom-header-media {
		height: calc(100vh - 32px);
	}

	.panel-content .wrap {
		padding-bottom: 4.5em;
		padding-top: 6em;
	}

	.panel-image {
		height: 100vh;
		max-height: 1200px;
	}

	/* With panel images 100% of the screen height, we're going to fix the background image where supported to create a parallax-like effect. */
	.background-fixed .panel-image {
		background-attachment: fixed;
	}

	@supports ( -webkit-touch-callout: none ) {
		/* Image scrolls with the content in iOS Safari. */
		.background-fixed .panel-image {
			background-attachment: scroll;
		}
	}

	.page-two-column .panel-content .entry-header {
		float: left;
		width: 36%;
	}

	.page-two-column .panel-content .entry-content {
		float: right;
		width: 58%;
	}

	/* Front Page - Recent Posts */

	.page-two-column .panel-content .recent-posts {
		clear: right;
		float: right;
		width: 58%;
	}

	.panel-content .recent-posts article {
		margin-bottom: 4em;
	}

	.panel-content .recent-posts .entry-header,
	.page-two-column #primary .panel-content .recent-posts .entry-header,
	.panel-content .recent-posts .entry-content,
	.page-two-column #primary .panel-content .recent-posts .entry-content {
		float: none;
		width: 100%;
	}

	.twentyseventeen-front-page .panel-content .recent-posts .entry-header {
		margin-bottom: 1.5em;
	}

	.page .panel-content .recent-posts .entry-title {
		font-size: 26px;
		font-size: 1.625rem;
	}

	/* Posts */

	.site-content {
		padding: 1em 0 0;
	}

	.single-post .entry-title,
	.page .entry-title {
		font-size: 26px;
		font-size: 1.625rem;
	}

	.comments-pagination,
	.post-navigation {
		clear: both;
	}

	.post-navigation .nav-previous {
		float: left;
		width: 50%;
	}

	.post-navigation .nav-next {
		float: right;
		text-align: right;
		width: 50%;
	}

	.nav-next,
	.post-navigation .nav-next {
		margin-top: 0;
	}

	/* Blog, archive, search */

	.sticky .icon-thumb-tack {
		height: 23px;
		left: -2.5em;
		top: 1.5em;
		width: 32px;
	}

	body:not(.has-sidebar):not(.page-one-column) .page-header,
	body.has-sidebar.error404 #primary .page-header,
	body.page-two-column:not(.archive) #primary .entry-header,
	body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
		float: left;
		width: 36%;
	}

	.blog:not(.has-sidebar) #primary article,
	.archive:not(.page-one-column):not(.has-sidebar) #primary article,
	.search:not(.has-sidebar) #primary article,
	.error404:not(.has-sidebar) #primary .page-content,
	.error404.has-sidebar #primary .page-content,
	body.page-two-column:not(.archive) #primary .entry-content,
	body.page-two-column #comments {
		float: right;
		width: 58%;
	}

	.blog .site-main > article,
	.archive .site-main > article,
	.search .site-main > article {
		padding-bottom: 4em;
	}

	.navigation.pagination {
		clear: both;
		float: right;
		width: 58%;
	}

	.has-sidebar .navigation.pagination,
	.archive.page-one-column:not(.has-sidebar) .navigation.pagination {
		float: none;
		width: 100%;
	}

	.entry-footer {
		display: table;
		width: 100%;
	}

	.entry-footer .cat-tags-links {
		display: table-cell;
		vertical-align: middle;
		width: 100%;
	}

	.entry-footer .edit-link {
		display: table-cell;
		text-align: right;
		vertical-align: middle;
	}

	.entry-footer .edit-link a.post-edit-link {
		margin-top: 0;
		margin-left: 1em;
	}

	/* Entry content */

	/* without sidebar */

	:not(.has-sidebar) .entry-content blockquote.alignleft {
		margin-left: -17.5%;
		width: 48%;
	}

	:not(.has-sidebar) .entry-content blockquote.alignright {
		margin-right: -17.5%;
		width: 48%;
	}

	/* with sidebar */

	.has-sidebar .entry-content blockquote.alignleft {
		margin-left: 0;
		width: 34%;
	}

	.has-sidebar .entry-content blockquote.alignright {
		margin-right: 0;
		width: 34%;
	}

	.has-sidebar #primary .entry-content blockquote.alignright.below-entry-meta {
		margin-right: -72.5%;
		width: 62%;
	}

	/* blog and archive */

	.blog:not(.has-sidebar) .entry-content blockquote.alignleft,
	.twentyseventeen-front-page.page-two-column .entry-content blockquote.alignleft,
	.archive:not(.has-sidebar) .entry-content blockquote.alignleft,
	.page-two-column .entry-content blockquote.alignleft {
		margin-left: -72.5%;
		width: 62%;
	}

	.blog:not(.has-sidebar) .entry-content blockquote.alignright,
	.twentyseventeen-front-page.page-two-column .entry-content blockquote.alignright,
	.archive:not(.has-sidebar) .entry-content blockquote.alignright,
	.page-two-column .entry-content blockquote.alignright {
		margin-right: 0;
		width: 36%;
	}

	/* Post formats */

	.format-quote blockquote .icon {
		left: -1.5em;
	}

	/* Pages */

	.page.page-one-column .entry-header,
	.twentyseventeen-front-page.page-one-column .entry-header,
	.archive.page-one-column:not(.has-sidebar) .page-header {
		margin-bottom: 4em;
	}

	.page:not(.home) #content {
		padding-bottom: 3.25em;
	}

	/* 404 page */

	.error404 .page-content {
		padding-bottom: 9em;
	}

	/* Comments */

	#comments {
		padding-top: 5em;
	}

	.comments-title {
		margin-bottom: 2.5em;
	}

	ol.children .children {
		padding-left: 2em;
	}

	/* Posts pagination */

	.nav-links .nav-title {
		position: relative;
	}

	.nav-title-icon-wrapper {
		position: absolute;
		text-align: center;
		width: 2em;
	}

	.nav-links .nav-previous .nav-title .nav-title-icon-wrapper {
		left: -2em;
	}

	.nav-links .nav-next .nav-title .nav-title-icon-wrapper {
		right: -2em;
	}

	/* Secondary */

	#secondary {
		font-size: 14px;
		font-size: 0.875rem;
		line-height: 1.6;
	}

	/* Widgets */

	h2.widget-title {
		font-size: 11px;
		font-size: 0.6875rem;
		margin-bottom: 2em;
	}

	/* Footer */

	.site-footer {
		font-size: 14px;
		font-size: 0.875rem;
		line-height: 1.6;
		margin-top: 3em;
	}

	.site-footer .widget-column.footer-widget-1 {
		float: left;
		width: 36%;
	}

	.site-footer .widget-column.footer-widget-2 {
		float: right;
		width: 58%;
	}

	.social-navigation {
		clear: left;
		float: left;
		margin-bottom: 0;
		width: 36%;
	}

	.site-info {
		float: left;
		padding: 0.7em 0 0;
		width: 58%;
	}

	.social-navigation + .site-info {
		margin-left: 6%;
	}

	.site-info .sep {
		margin: 0 0.5em;
		display: inline;
		visibility: visible;
		height: auto;
		width: auto;
	}

	/* Gallery Columns */

	.gallery-columns-5 .gallery-item {
		max-width: 20%;
	}

	.gallery-columns-6 .gallery-item {
		max-width: 16.66%;
	}

	.gallery-columns-7 .gallery-item {
		max-width: 14.28%;
	}

	.gallery-columns-8 .gallery-item {
		max-width: 12.5%;
	}

	.gallery-columns-9 .gallery-item {
		max-width: 11.11%;
	}
}

@media screen and ( min-width: 1072px ) {

	/* Layout */

	/* Navigation */
	.navigation-top .wrap {
		padding: 0.75em 2em;
	}

	.navigation-top nav {
		margin-left: 0;
	}

	/* Sticky posts */

	.sticky .icon-thumb-tack {
		font-size: 32px;
		font-size: 2rem;
		height: 22px;
		left: -1.25em;
		top: 0.75em;
		width: 32px;
	}

	/* Pagination */

	.page-numbers {
		display: inline-block;
	}

	.page-numbers.current {
		font-size: 15px;
		font-size: 0.9375rem;
	}

	.page-numbers.current .screen-reader-text {
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute !important;
		width: 1px;
	}

	/* Comments */

	.comment-body {
		margin-left: 0;
	}
}

@media screen and ( min-width: 1264px ) {

	.has-sidebar .entry-content blockquote.alignleft {
		margin-left: -20%;
	}

	.blog:not(.has-sidebar) .entry-content blockquote.alignright,
	.archive:not(.has-sidebar) .entry-content blockquote.alignright,
	.page-two-column .entry-content blockquote.alignright,
	.twentyseventeen-front-page .entry-content blockquote.alignright {
		margin-right: -20%;
	}
}

@media screen and ( max-width: 782px ) and ( min-width: 768px ) {

	.admin-bar .site-navigation-fixed.navigation-top,
	.admin-bar .site-navigation-hidden.navigation-top {
		top: 46px;
	}
}

/*--------------------------------------------------------------
19.6 插件定制：页眉带高度可调 + 首页与内页一致
--------------------------------------------------------------*/

/* 一、让首页（page-doc-home.php）的页眉结构与内页等价。
   首页是静态首页，主题给它加 .twentyseventeen-front-page，于是命中
   「整屏页眉大图」规则：移动端 .custom-header 高 75vh、桌面端
   .custom-header-media 高 100vh，且 .site-branding 被绝对定位到页眉底部，
   页眉因此远高于内页；内页则是 .custom-header 由文档流中的 .site-branding
   撑开、大图只作绝对定位背景铺满。这里把首页逐条改回与内页相同的结构。
   选择器统一用 body.home.page-template-page-doc-home 提高特异性（0,4,1），
   以压过主题在 1687 / 1801 / 3508 / 3521 / 3534 处的
   .has-header-image.twentyseventeen-front-page 规则。 */

/* 1. 页眉容器回到普通块级、由内容撑高（覆盖主题的 display:table + 75vh） */
body.home.page-template-page-doc-home.has-header-image .custom-header,
body.home.page-template-page-doc-home.has-header-video .custom-header {
	display: block;
	height: auto;
}

/* 2. 品牌区回到文档流，且必须保持普通 block。
   关键：global.js 的 adjustHeaderHeight() 在首页把菜单条高度（72px）写成
   .site-branding 的 margin-bottom，这个外边距必须能塌陷穿透 .custom-header
   才计入 #masthead（内页则由 JS 写在 .custom-header 上）。一旦 .site-branding
   建立新的块格式化上下文（display:flex/grid、overflow 非 visible 等），塌陷
   就被阻断，#masthead 会少掉 72px，首页即与内页不一致。因此定高只能靠
   min-height，垂直居中交给下面媒体块里 .wrap 的绝对定位，绝不能给
   .site-branding 加 flex。 */
body.home.page-template-page-doc-home.has-header-image .site-branding,
body.home.page-template-page-doc-home.has-header-video .site-branding {
	bottom: auto;
	display: block;
	height: auto;
	left: auto;
	margin-bottom: 0;
	position: relative;
	right: auto;
	top: auto;
	width: auto;
}

/* 3. 背景媒体层绝对定位铺满整条页眉带（与内页一致） */
body.home.page-template-page-doc-home.has-header-image .custom-header-media,
body.home.page-template-page-doc-home.has-header-video .custom-header-media {
	bottom: 0;
	height: auto;
	left: 0;
	max-height: none;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 0;
}

body.home.page-template-page-doc-home.has-header-image .custom-header-media:before,
body.home.page-template-page-doc-home.has-header-video .custom-header-media:before {
	height: 100%;
}

/* 4. 背景图：主题给所有页面设了 position:fixed + top/left:50% +
   translate(-50%,-50%)（L1721），内页再由 L1766 覆盖成 position:absolute。
   首页没有这层覆盖，图片仍以「视口」为基准盒居中，而 object-fit:cover 的
   缩放比例取决于基准盒尺寸，取景位置便与内页不同。这里补上同一条
   position:absolute；其余属性（height/width:100%、object-fit:cover、
   transform:none）来自 L1778 的 @supports 规则，本来就同时命中首页与内页，
   于是两者的图片裁切完全一致。 */
body.home.page-template-page-doc-home.has-header-image .custom-header-media img,
body.home.page-template-page-doc-home.has-header-video .custom-header-media video {
	position: absolute;
}

/* 二、桌面端页眉带高度：由主题设置 --doc-header-height 控制，默认 165px。
   改动前的高度由 .site-branding 的 padding: 3em 0（L3353，48+48）加上标题
   两行约 69px 撑出，正好 165px，无法单独调整。做法：
     - .site-branding 保持普通 block，只清掉上下内边距、用 min-height 定高。
       用 min-height 而非 height，标题换行时带子能跟着长高，不会顶出文字。
     - 垂直居中交给 .site-branding > .wrap 绝对定位：它脱离文档流后不再撑高
       .site-branding，父级高度就等于 min-height；left/right:0 撑满，再由
       .wrap 自带的 max-width + margin:auto 水平居中，top:50% +
       translateY(-50%) 垂直居中。这样既不必给 .site-branding 加 flex
       （会阻断上面第 2 条的外边距塌陷），也不会让 .wrap 因交叉轴 auto
       外边距被压成 fit-content、把标题挤到中间。
   两组选择器特异性分别为 (0,4,1) 与 (0,3,1)，都压过主题对首页
   .site-branding 的规则；两组声明完全相同，保证首页与内页逐项一致。 */
@media screen and (min-width: 1025px) {
	body.home.page-template-page-doc-home.has-header-image .site-branding,
	body.home.page-template-page-doc-home.has-header-video .site-branding,
	body.has-header-image:not(.home) .site-branding,
	body.has-header-video:not(.home) .site-branding {
		min-height: var(--doc-header-height, 165px);
		padding-bottom: 0;
		padding-top: 0;
	}

	/* 这里必须带 #masthead：主题在 L1585 有 `#masthead .wrap { position: relative }`，ID 特异性 (1,1,0)，
	   普通 class 选择器（哪怕 (0,4,1)）都压不过它；用同样含 ID 的 #masthead .site-branding > .wrap (1,2,0) 才能覆盖，
	   使 .wrap 真正绝对定位、脱离文档流。规则同时命中首页与内页。 */
	#masthead .site-branding > .wrap {
		left: 0;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}
}

/* 注意：不要动 .navigation-top 的定位。桌面端主题对所有页面（含内页）都是
   position:absolute; bottom:0（L3579），菜单条靠 #masthead 内的预留空间落位。
   该预留空间由主题 JS global.js 的 adjustHeaderHeight() 提供：首页把它作为
   .site-branding 的 margin-bottom、内页作为 .custom-header 的 margin-bottom，
   取值都等于菜单条高度（72px），所以两页始终预留出同样的空间。 */

/* 三、移动端（视口 <1024px）：不显示页眉大图与站点标题，导航栏正中显示 Logo。
   移动端主题会把页眉做成整屏大图（首页 .custom-header 高 75vh L1692、
   .custom-header-media 高 100vh L3836），并把 .site-branding 绝对定位到大图
   底部。这里把整条 .custom-header 隐藏——大图与站点标题/副标题一并去掉。
   用 #masthead 提高特异性（1,1,0），压过主题在 1687 / 1801 处的
   .has-header-image.twentyseventeen-front-page 规则。
   隐藏后菜单不会错位：移动端 .navigation-top 是普通文档流里的
   position: relative（L1342），而且 global.js 的 adjustHeaderHeight() 在
   菜单按钮可见（即移动端）时会把 .custom-header 与 .site-branding 的
   margin-bottom 都清零，本来就没有预留空间要照顾。

   移动端 Logo 由 header.php 注入到 .navigation-top 内（.doc-nav-logo），
   与 .custom-header 是两个独立节点，隐藏页眉不会连带隐藏它。 */

/* 导航栏 Logo：由 header.php 注入到 .navigation-top 的 .wrap 里。
   默认不显示，由下面两段媒体查询分别接管桌面端与移动端。 */
.doc-nav-logo {
	display: none;
}

/* Logo 的明暗两版：默认用亮色那张，html.darking（暗色模式）时与暗色那张互换。
   关键：隐藏亮色那条必须挂在 .doc-nav-logo-has-dark 上——只有后台两版都设置时
   header.php 才会加这个类。否则「只设了亮色版」时，暗色模式下亮色被藏、
   暗色又不存在，Logo 会整个空白。
   选择器带 img.doc-nav-logo-img-*，压过「.doc-nav-logo img { display: block }」
   那条尺寸规则，否则 display 会被它顶回 block。 */
.doc-nav-logo img.doc-nav-logo-img-dark {
	display: none;
}

html.darking .doc-nav-logo-has-dark img.doc-nav-logo-img-light {
	display: none;
}

html.darking .doc-nav-logo-has-dark img.doc-nav-logo-img-dark {
	display: block;
}

/* 桌面端（≥1025px）：Logo 显示在导航栏最左边，菜单紧随其后。
   .wrap 是绝对定位顶栏里那层居中的容器，把它变成 flex 行，
   Logo 便落在导航栏最左，菜单跟在它右边。 */
@media screen and (min-width: 1025px) {
	.navigation-top .wrap {
		align-items: center;
		display: flex;
		/* 左边距固定 2em：写死在这里，不再随主题其它媒体查询
		   （0.75em 3.4167em / 0.75em 2em）而变。 */
		padding-left: 2em;
	}

	.doc-nav-logo {
		display: block;
		/* 宽度自动：容器只占 Logo 本身宽度，不拉伸，菜单紧接其后 */
		flex: 0 0 auto;
		margin-right: 1.5em;
	}

	.doc-nav-logo img {
		display: block;
		max-height: 40px;
		width: auto;
	}

	.doc-nav-logo-text {
		color: var(--tb--base);
		display: block;
		font-size: 18px;
		font-weight: 600;
		line-height: 1.2;
		white-space: nowrap;
	}

	/* 主题给导航的 -1.25em 是为了让首项文字贴容器左缘；现在左边多了 Logo，
	   这个负外边距会把菜单拽到 Logo 上，归零。 */
	.navigation-top nav {
		margin-left: 0;
	}
}

/* 移动端抽屉遮罩：桌面端完全不渲染，避免在页眉里留下一个空块。 */
.doc-nav-mask {
	display: none;
}

/* 全局：链接的四种状态一律不要下划线。
   浏览器 UA 默认就给所有链接加下划线——主题样式里从没声明过 text-decoration，
   所以下划线是它带进来的，作者侧写一条 none 就能盖掉。
   插件里另有几处 :hover 显式加过下划线（doc-style / doc-home / doc-tree），
   已各自改成 none；否则悬停时仍会冒出来。
   加 !important 是兜底：这条是「任何地方都不许有下划线」的硬要求，
   不希望以后新增的某条链接规则又把它顶掉。 */
a,
a:link,
a:visited,
a:hover,
a:active,
a:focus {
	text-decoration: none !important;
}

/* 链接悬停统一走主题色（全局默认）。
   更具体的选择器不受影响：文章页相邻导航卡片悬停是「主题色底 + 白字」、
   标签云悬停只降不透明度、文档树条目悬停本身就用主题色，
   它们的优先级都高于这条 a:hover。 */
a:hover {
	color: var(--tb--main, #007bff);
}

/* 标签云字号：要调整只改这一个数字。
   WordPress 原本会把字号写成行内 style，已由 functions.php 里的
   twentyseventeen_strip_tag_cloud_inline_font_size() 摘掉，
   标签链接上也不再带 font-size，全部从这个容器的 12px 继承下去。 */
.tagcloud,
.widget_tag_cloud,
.wp_widget_tag_cloud {
	font-size: 12px;
}

/* 彩色标签云：实底彩色小块 + 白字，颜色按标签先后循环 8 色。

   原先主题给的是灰色描边小方框（.widget .tagcloud a，style.css L2818 一带）。
   这里：去掉描边（写 border: 0，宽度归零后主题 :hover 里那条 border-color:#bbb
   就没有可见效果）、铺彩色底、文字转白。
   hover 只压暗一点（opacity），不回到主色——前面已要求标签云与主题色无关。
   暗色模式下这 8 个颜色都是中深饱和度，白字和色块在深底上都站得住。 */
.widget .tagcloud a,
.widget.widget_tag_cloud a,
.wp_widget_tag_cloud a,
#primary .doc-root-tags a {
	border: 0;
	border-radius: 3px;
	color: #fff;
	padding: 5px 10px;
}

.widget .tagcloud a:hover,
.widget .tagcloud a:focus,
.widget.widget_tag_cloud a:hover,
.widget.widget_tag_cloud a:focus,
.wp_widget_tag_cloud a:hover,
.wp_widget_tag_cloud a:focus,
#primary .doc-root-tags a:hover,
#primary .doc-root-tags a:focus {
	border: 0;
	color: #fff;
	opacity: 0.85;
}

/* 8 色循环：由先后顺序决定每个标签的颜色。
   小工具标签云按 li 的顺序，根文档正文末尾的标签（#primary .doc-root-tags
   是平铺的 <a>）按 a 的顺序，两者共用这一份调色板。 */
#primary .doc-root-tags a:nth-child(8n+1),
.widget .tagcloud li:nth-child(8n+1) a,
.widget_tag_cloud li:nth-child(8n+1) a,
.wp_widget_tag_cloud li:nth-child(8n+1) a {
	background-color: #e74c3c;
}

#primary .doc-root-tags a:nth-child(8n+2),
.widget .tagcloud li:nth-child(8n+2) a,
.widget_tag_cloud li:nth-child(8n+2) a,
.wp_widget_tag_cloud li:nth-child(8n+2) a {
	background-color: #e67e22;
}

#primary .doc-root-tags a:nth-child(8n+3),
.widget .tagcloud li:nth-child(8n+3) a,
.widget_tag_cloud li:nth-child(8n+3) a,
.wp_widget_tag_cloud li:nth-child(8n+3) a {
	background-color: #d35400;
}

#primary .doc-root-tags a:nth-child(8n+4),
.widget .tagcloud li:nth-child(8n+4) a,
.widget_tag_cloud li:nth-child(8n+4) a,
.wp_widget_tag_cloud li:nth-child(8n+4) a {
	background-color: #1e8449;
}

#primary .doc-root-tags a:nth-child(8n+5),
.widget .tagcloud li:nth-child(8n+5) a,
.widget_tag_cloud li:nth-child(8n+5) a,
.wp_widget_tag_cloud li:nth-child(8n+5) a {
	background-color: #16a085;
}

#primary .doc-root-tags a:nth-child(8n+6),
.widget .tagcloud li:nth-child(8n+6) a,
.widget_tag_cloud li:nth-child(8n+6) a,
.wp_widget_tag_cloud li:nth-child(8n+6) a {
	background-color: #2980b9;
}

#primary .doc-root-tags a:nth-child(8n+7),
.widget .tagcloud li:nth-child(8n+7) a,
.widget_tag_cloud li:nth-child(8n+7) a,
.wp_widget_tag_cloud li:nth-child(8n+7) a {
	background-color: #8e44ad;
}

#primary .doc-root-tags a:nth-child(8n+8),
.widget .tagcloud li:nth-child(8n+8) a,
.widget_tag_cloud li:nth-child(8n+8) a,
.wp_widget_tag_cloud li:nth-child(8n+8) a {
	background-color: #c0392b;
}

/* 触摸端点击高亮重置。
   内置浏览器（微信 / 各类应用内 WebView）点链接会刷一层灰底，有的刷在父级 li 上、
   有的点完还一直留着，看着像「点完卡住不动了」。DUX 对这几个元素也做了同样的重置：
   input,textarea,button,a{-webkit-tap-highlight-color:rgba(0,0,0,0)} */
input,
textarea,
button,
a {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media screen and (max-width: 1024px) {

	/* 一、这条断点下不显示页眉大图与站点标题（改为顶栏正中放 Logo，见第四节） */
	#masthead .custom-header {
		display: none;
	}

	/* 二、吸顶白色顶栏，高 50px（参考 DUX 移动端顶栏）。
	   固定于视口顶部后脱离文档流，用 #page 的上内边距让出等高空间，
	   内容才不会被压到顶栏下面。#page 本身是 position:relative（L1547），
	   第七节打开抽屉时也靠它右移。 */
	.navigation-top {
		border-bottom: 1px solid #eee;
		border-top: 0;
		height: 50px;
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		transition: left .3s ease;
		z-index: 99998;
	}

	#page {
		padding-top: 50px;
		transition: left .3s ease;
	}

	/* 已登录时让开顶部管理栏：默认高 32px，≤782px 时核心切到 46px（见文末）。
	   阈值必须跟核心一致——核心 admin-bar.css 写的是 @media (max-width: 782px)，
	   早先这里按 767px 写，导致 768～782px（含 iPad 竖屏 768px）这段仍按 32px
	   让位，顶栏被管理栏压住 14px，抽屉菜单与 ✕ 一并错位。 */
	body.admin-bar .navigation-top {
		top: 32px;
	}
	body.admin-bar #page {
		padding-top: 82px;
	}
	/* 抽屉（一级菜单 ul）是 top:0 的全高覆盖层，上内边距 60px 原本只按
	   50px 顶栏让位；登录后管理栏又占 32px，这里补上，否则第一个菜单项
	   会被顶栏压住（46px 档见文末 782px 块）。60 + 32 = 92。 */
	body.admin-bar .navigation-top .main-navigation > div > ul {
		padding-top: 92px;
	}

	/* 三、汉堡按钮移到顶栏最左：绝对定位并收缩为内容宽度。
	   参考 DUX：只留图标、隐藏主题自带的 “Menu” 文字（font-size:0 作用于按钮内的
	   纯文本节点，图标单独给字号，1em 才不会被一起缩没）。
	   color 走变量：暗色模式下 --tb--base 自动变浅，否则 #222 会消失在深色底上。 */
	.navigation-top .menu-toggle {
		/* WebKit 系内核（iOS Safari、以及各种 WebKit 内核的内置浏览器）会给
		   <button> 套一层原生按钮外观（push-button），按下/聚焦时渲染成灰色底。
		   这层是 appearance 画的，不是 background-color——只写 transparent 压不掉，
		   必须显式去掉 appearance，否则点过之后灰色会一直留着，
		   直到点页面别处让它失焦才恢复。 */
		-webkit-appearance: none;
		appearance: none;
		background-color: transparent;
		border: 0;
		color: var(--tb--base);
		font-size: 0;
		height: 50px;
		left: 0;
		line-height: 50px;
		margin: 0;
		padding: 0 20px;
		position: absolute;
		text-align: left;
		top: 0;
		transition: left .3s ease;
		width: auto;
		/* 必须高过抽屉的 z-index:100000。抽屉（.main-navigation > div > ul）
		   本身就是 .navigation-top 的后代，而顶栏是 fixed + z-index，早已自成
		   层叠上下文——所以「顶栏整体 100001 > 遮罩 99999」这套根层级的比较
		   管不到它内部：抽屉 100000 与这个按钮是同层叠上下文里的兄弟，
		   100000 比原来的 2 大，抽屉那层不透明背景一直把 ✕ 压在底下，
		   这就是左上角从来见不到 ✕ 的原因。 */
		z-index: 100001;
	}

	/* 再把交互态的背景/阴影/描边一并钉死：主题虽然也写过 transparent，
	   但那是有可能被其它来源盖掉的；这里用自己的选择器再兜一层。
	   outline 那条是重点——主题给 .menu-toggle:focus 配了 outline: thin solid，
	   点完按钮保持聚焦时就会出现一圈方框，和刚才那块灰底同属「点完卡着」的观感。 */
	.navigation-top .menu-toggle:hover,
	.navigation-top .menu-toggle:focus,
	.navigation-top .menu-toggle:active {
		background-color: transparent;
		border: 0;
		box-shadow: none;
		outline: none;
	}

	.navigation-top .menu-toggle .icon {
		font-size: 18px;
		margin-right: 0;
	}

	/* 四、顶栏正中：Logo（未上传时为站点标题文字）。
	   顶栏高度固定 50px。Logo 的绝对定位以 .wrap 为参照（主题
	   #masthead .wrap 是 position:relative，比 .navigation-top 更近），
	   而 .wrap 的高度由内容撑开、不等于顶栏高度，写 top:50% 会上下偏移。
	   顶栏没有内边距、.wrap 也是 padding:0，两者顶边重合，
	   因此直接取顶栏高度的一半 25px 作为垂直中线。 */
	.doc-nav-logo {
		color: var(--tb--base);
		display: block;
		left: 50%;
		max-width: 50%;
		position: absolute;
		text-align: center;
		top: 25px;
		transform: translate(-50%, -50%);
		z-index: 2;
	}

	.doc-nav-logo img {
		display: block;
		margin: 0 auto;
		max-height: 30px;
		max-width: 100%;
		width: auto;
	}

	.doc-nav-logo-text {
		display: block;
		font-size: 18px;
		font-weight: 600;
		line-height: 1.2;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* 五、抽屉本体就是主题的一级菜单 ul（.main-navigation > div > ul）。
	   必须始终 display:block，用 translateX(-100%) 移出屏幕左侧，
	   打开时滑回 0；若沿用主题的 display:none 就没有滑入过渡。
	   选择器带 .navigation-top 前缀以压过主题的 .js .main-navigation ul。 */
	.navigation-top .main-navigation > div > ul {
		background: var(--tb--white);
		bottom: 0;
		box-sizing: border-box;
		display: block;
		left: 0;
		overflow-x: hidden;
		overflow-y: auto;
		padding: 60px 0 24px;
		position: fixed;
		top: 0;
		transform: translateX(-100%);
		transition: transform .3s ease;
		/* 与打开时整页右移的距离取同一个值，窄屏下两者始终对齐不露缝 */
		width: min(260px, 80vw);
		z-index: 100000;
	}

	.navigation-top .main-navigation.toggled-on > div > ul {
		transform: translateX(0);
	}

	/* 抽屉内的菜单项排版：条目只用上下边框分隔，不铺背景色。
	   隔行取「每条一条下边框 + 首行一条上边框」，比每条都写上边框少一半线，
	   相邻两条不会叠成 2px 的粗线。
	   tap-highlight 是内置浏览器（微信/应用内 WebView 等）点链接时刷的那层灰底，
	   显式关掉，避免个别浏览器点一下整行就变底色。 */
	.navigation-top .main-navigation > div > ul li {
		border-bottom: 1px solid var(--tb--line);
	}

	.navigation-top .main-navigation > div > ul li:first-child {
		border-top: 1px solid var(--tb--line);
	}

	.navigation-top .main-navigation > div > ul a {
		color: var(--tb--base);
		display: block;
		font-size: 15px;
		font-weight: 600;
		padding: 12px 20px;
	}

	/* 兜底一：把抽屉范围内所有元素的高亮一起关掉（含 li / ul / div / button / svg）。
	   上一轮只在 a 上重置，漏了 li——部分内置浏览器（微信 X5/TBS 一类）不认 a 上的
	   重置，而是把高亮刷在最近的块级祖先 li 上，整行就成了灰底。 */
	.navigation-top .main-navigation,
	.navigation-top .main-navigation * {
		-webkit-tap-highlight-color: transparent;
	}

	/* 兜底二：移动端点过的元素会一直保留 :hover / :focus，个别内核还会自己给
	   :active / :focus 补一层底色。抽屉条目本身不需要任何底色，
	   这里把 li 和 a 的各种交互态显式声明成透明，堵掉「点完还留一块灰」。
	   故意不碰 ul —— 子菜单那块底色是设计要的。 */
	.navigation-top .main-navigation > div > ul li:hover,
	.navigation-top .main-navigation > div > ul li:focus,
	.navigation-top .main-navigation > div > ul li:active,
	.navigation-top .main-navigation > div > ul li.focus,
	.navigation-top .main-navigation > div > ul a:focus,
	.navigation-top .main-navigation > div > ul a:active {
		background-color: transparent;
	}

	/* 文字统一用正文文字色（--tb--base：亮色 #333、暗色 #ccc），
	   不跟着链接色走，亮暗模式切换时自动跟着变。
	   当前项也不再单独着色——主题那条 .navigation-top .current-menu-item > a
	   给的是写死的 #767676，特异性低于上面这条，被覆盖掉，不会打回灰字。
	   鼠标经过时才上主题色（DUX 的 .m-navbar li:hover>a 同款）；
	   主题给 .navigation-top a 配了 transition: color .2s，过渡直接用现成的。 */
	.navigation-top .main-navigation > div > ul a:hover {
		color: var(--tb--main, #007bff);
	}

	/* 子菜单：手风琴，默认收起（主题已实现 .sub-menu.toggled-on 才显示） */
	.navigation-top .main-navigation > div > ul ul {
		background: var(--tb--tint);
		padding: 0;
	}

	.navigation-top .main-navigation > div > ul ul a {
		font-size: 13px;
		font-weight: 400;
		padding: 10px 20px 10px 40px;
	}

	.navigation-top .main-navigation > div > ul ul ul a {
		padding-left: 60px;
	}

	/* 子菜单开合按钮（主题插入的 .dropdown-toggle）贴到行右端 */
	.navigation-top .main-navigation > div > ul .dropdown-toggle {
		color: var(--tb--base);
		height: 45px;
		line-height: 45px;
		padding: 0 20px;
		right: 0;
		top: 0;
	}

	/* 六、遮罩：铺满视口，压在内容之上；顶栏打开时抬到它上面（第七节） */
	.doc-nav-mask {
		background-color: rgba(0, 0, 0, .5);
		bottom: 0;
		display: block;
		left: 0;
		opacity: 0;
		position: fixed;
		right: 0;
		top: 0;
		transition: opacity .3s ease, visibility .3s ease;
		visibility: hidden;
		z-index: 99999;
	}

	body.doc-nav-open .doc-nav-mask {
		opacity: 1;
		visibility: visible;
	}

	/* 第七节：打开状态——整页与顶栏一起右移 260px，露出抽屉（DUX 的推挤效果）。
	   用 left 而非 transform：transform 会让 fixed 后代改以 #page 为基准盒，
	   顶栏与抽屉的定位会一起错位。
	   顶栏抬到 z-index:100001 以高于遮罩，使顶栏本身不被压暗、汉堡仍可点击关闭。 */
	body.doc-nav-open {
		overflow: hidden;
	}

	body.doc-nav-open #page {
		left: min(260px, 80vw);
	}

	body.doc-nav-open .navigation-top {
		left: min(260px, 80vw);
		z-index: 100001;
	}

	/* 顶栏右移会把里面的汉堡按钮一起带走，这里反向补偿同一距离，
	   让 ✕ 始终钉在视口最左——也就是抽屉的左上角（DUX 同款），
	   而不是飘到抽屉右缘、跟着内容一起跑。两边同为 .3s 的 left 过渡，
	   合成后按钮在视口里看起来是静止的。 */
	body.doc-nav-open .navigation-top .menu-toggle {
		left: calc(-1 * min(260px, 80vw));
	}
}

/* 管理栏在窄屏下高 46px：阈值取核心 admin-bar.css 的口径（≤782px），
   把顶栏与让位空间一并下移（46 + 50 = 96）。 */
@media screen and (max-width: 782px) {
	body.admin-bar .navigation-top {
		top: 46px;
	}
	body.admin-bar #page {
		padding-top: 96px;
	}
	/* 抽屉上内边距：60 + 46 = 106 */
	body.admin-bar .navigation-top .main-navigation > div > ul {
		padding-top: 106px;
	}
}

/*--------------------------------------------------------------
19.7 插件定制：内容页头部细线 + 侧栏小工具随动
--------------------------------------------------------------*/

/* 内容页：标题 → 归档信息 → 正文，归档信息与正文之间一条细线。
   线加在现有的头部容器上（文档页 .article-header、文章 / 页面 .entry-header），
   不新增包裹容器。
   作用域限定在内容页：列表条目里的 .entry-header（content-doc-excerpt.php）
   与归档页的 .entry-header 都不受影响。
   线色不用 --tb--line：它在亮/暗两档下都太淡（#f3f3f3 / #1d2025，
   衬在卡片底色上几乎看不见），这里要给一条真看得见的分隔线——
   亮色用 #e0e0e0（与站内卡片边框的兜底色一致），暗色另给一个中灰。
   页面那条 4em 的 margin-bottom 来自主题，特异性更高，此处不与之相争。 */
.article-header,
body.single .entry-header,
body.page .entry-header {
	border-bottom: 1px solid #e0e0e0;
	margin-bottom: 1.5em;
	padding-bottom: 1em;
}

html.darking .article-header,
html.darking body.single .entry-header,
html.darking body.page .entry-header {
	border-bottom-color: #333a42;
}

/* 二、侧栏小工具随动：桌面端两栏布局下，小工具栏跟着正文滚动。
   吸附的基准盒是 .wrap（自带 :after 清浮动，比小工具栏高），
   祖先链上也没有 overflow:hidden，因此能正常吸附。
   top 取 80px，与文档内容页的 TOC 列同款，正好让开滚动后固定在
   顶部的导航条（.site-navigation-fixed 高约 72px）。
   ≤1024px 是单栏布局、小工具栏排在正文下方，不做吸附。 */
@media screen and (min-width: 1025px) {
	.has-sidebar #secondary {
		position: sticky;
		top: 80px;
	}
}

/*--------------------------------------------------------------
19.8 插件定制：评论头像位
--------------------------------------------------------------*/

/* 主题的评论区给头像留了一条 65px 的左边距（.comment-body 的 margin-left，
   头像本身绝对定位在 .comment-author 左侧 -65px 处，正好落在这条边距里）。
   但主题在 ≥67em 会把这条边距归零，让头像悬到评论区外面——在原主题里
   评论区左边是页面空白，悬出来正好；本站把侧栏改到了左侧，头像会压到
   侧栏卡片上、与评论文字脱节。
   这里在各宽度下都保留这条边距，头像回到自己的 65px 位里。 */
@media screen and (min-width: 1072px) {
	.comment-body {
		margin-left: 65px;
	}
}

/*--------------------------------------------------------------
19.9 插件定制：头像取 Logo 的左侧正方形
--------------------------------------------------------------*/

/* 头像已统一换成站点 Logo（见 functions.php 的 doc_seventeen_logo_avatar）。
   Logo 是宽版（约 4:1），方形头像框里按「填满框 + 左对齐」裁切，
   于是只露出左侧那块正方形区域，不会被压扁变形。
   尺寸由各处的 width / height 决定（评论 50px、回复 30px、后台栏 26px…），
   这里只管裁切方式，所以用通用的 .avatar。 */
.avatar {
	object-fit: cover;
	object-position: left center;
}

/*--------------------------------------------------------------
19.10 插件定制：文章页「上一篇 / 下一篇」复刻文库同款
--------------------------------------------------------------*/

/* 视觉数值与文库那套（doc-tree.css 的 .doc-nav-*）一一对应：
   两张等宽卡片、小号灰标签 + 两行截断标题，悬停整块翻主题色并轻微上浮，
   箭头从卡片内缘滑入；只有一侧时另一侧留白、卡片宽度不跳；≤600px 纵向堆叠。
   文库页是 PHP 生成的 .doc-nav-* 结构，文章页用的是主题 .post-navigation 结构，
   因此这里把同一套视觉映射到主题的类名上。改文库那套时记得同步这里。 */
.post-navigation {
	font-weight: 400;
}

.post-navigation .nav-links {
	display: flex;
	align-items: stretch;
	gap: 20px;
	padding: 0;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
	float: none;
	width: auto;
	margin-top: 0;
	flex: 1;
}

.post-navigation .nav-links a {
	display: block;
	position: relative;
	min-height: 70px;
	padding: 15px 20px;
	background: var(--tb--tint, #fbfbfb);
	border: 1px solid var(--tb--line, #f3f3f3);
	border-radius: 6px;
	color: var(--tb--base, #333);
	transition: all 0.2s ease;
}

.post-navigation .nav-links a:hover,
.post-navigation .nav-links a:focus {
	background: var(--tb--main, #007bff);
	border-color: var(--tb--main, #007bff);
	color: var(--tb--white, #fff);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 115, 170, 0.15);
}

/* 标签：小号灰字；悬停转半透明白 */
.post-navigation .nav-links .nav-subtitle {
	margin-bottom: 5px;
	font-size: 12px;
	letter-spacing: 0.5px;
	color: var(--tb--gray, #999);
}

.post-navigation .nav-links a:hover .nav-subtitle,
.post-navigation .nav-links a:focus .nav-subtitle {
	color: rgba(255, 255, 255, 0.8);
}

/* 标题：两行截断，颜色跟随卡片。
   只用 -webkit-box + -webkit-line-clamp（与文库那套一致）：
   再补标准 line-clamp 会把 display 顶成 flow-root，截断反而失效。
   position 归位，让箭头以卡片为参照。 */
.post-navigation .nav-title {
	display: -webkit-box;
	overflow: hidden;
	position: static;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: inherit;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.post-navigation .nav-links a:hover .nav-title,
.post-navigation .nav-links a:focus .nav-title {
	color: inherit;
}

/* 箭头（主题输出的 SVG 图标）：默认透明贴内缘，悬停滑入并转白。
   选择器带上 .nav-links 与 .nav-title 是为了压过主题那条
   .nav-links .nav-previous .nav-title .nav-title-icon-wrapper { left: -2em }。 */
.post-navigation .nav-links .nav-title-icon-wrapper {
	position: absolute;
	top: 50%;
	width: auto;
	margin: 0;
	font-size: 20px;
	color: var(--tb--main, #007bff);
	opacity: 0;
	transform: translateY(-50%);
	transition: all 0.2s ease;
}

.post-navigation .nav-links .nav-previous .nav-title .nav-title-icon-wrapper {
	left: 15px;
	right: auto;
}

.post-navigation .nav-links .nav-next .nav-title .nav-title-icon-wrapper {
	right: 15px;
	left: auto;
}

.post-navigation .nav-links a:hover .nav-title-icon-wrapper,
.post-navigation .nav-links a:focus .nav-title-icon-wrapper {
	opacity: 1;
}

/* 箭头本体是 SVG，主题另有 .post-navigation a:hover .icon { color: #222 } 直接作用在它身上，
   所以颜色要落到 .icon 上（走主题色变量，与文库那套一致） */
.post-navigation .nav-links a:hover .nav-title-icon-wrapper .icon,
.post-navigation .nav-links a:focus .nav-title-icon-wrapper .icon {
	color: var(--tb--white, #fff);
}

.post-navigation .nav-links .nav-previous a:hover .nav-title .nav-title-icon-wrapper {
	left: 20px;
}

.post-navigation .nav-links .nav-next a:hover .nav-title .nav-title-icon-wrapper {
	right: 20px;
}

/* 只有一侧时：另一侧留白，卡片维持一半宽度
   （文库那边是用 .doc-nav-placeholder 占位达到同样效果） */
.post-navigation .nav-links > div:only-child {
	max-width: calc(50% - 10px);
}

.post-navigation .nav-previous:only-child {
	margin-right: auto;
}

.post-navigation .nav-next:only-child {
	margin-left: auto;
}

/* ≤600px：纵向堆叠，标题放宽到三行（与文库一致） */
@media screen and (max-width: 600px) {
	.post-navigation .nav-links {
		flex-direction: column;
		gap: 10px;
	}

	.post-navigation .nav-links > div:only-child {
		max-width: none;
	}

	.post-navigation .nav-title {
		-webkit-line-clamp: 3;
	}
}

/*--------------------------------------------------------------
19.11 插件定制：单个菜单项自定义颜色
--------------------------------------------------------------*/

/* 用法：外观 → 菜单 → 右上「屏幕选项」勾上「CSS 类」，给需要变色的菜单项
   填下面对应的类名即可（桌面菜单与移动抽屉渲染的是同一个菜单，一套类名通用）。
   这里刻意把 :hover / :focus 一起写上：否则悬停时会掉回全局的主题色
   （a:hover 那条），单项颜色就「一闪就没了」。 */

/* ① 定义好的一条：高亮为主题色。菜单项填 nav-color-main */
.navigation-top .main-navigation li.nav-color-main > a,
.navigation-top .main-navigation li.nav-color-main > a:hover,
.navigation-top .main-navigation li.nav-color-main > a:focus {
	color: var(--tb--main, #007bff);
}

/* ② 想给某项用别的颜色，照抄一段、换个类名与色值即可，例如：
.navigation-top .main-navigation li.nav-color-red > a,
.navigation-top .main-navigation li.nav-color-red > a:hover,
.navigation-top .main-navigation li.nav-color-red > a:focus {
	color: #e5484d;
}
*/

/*--------------------------------------------------------------
20.0 Print
--------------------------------------------------------------*/

@media print {

	/* Hide elements */

	form,
	button,
	input,
	select,
	textarea,
	.navigation-top,
	.social-navigation,
	#secondary,
	.content-bottom-widgets,
	.header-image,
	.panel-image-prop,
	.icon-thumb-tack,
	.page-links,
	.edit-link,
	.post-navigation,
	.pagination.navigation,
	.comments-pagination,
	.comment-respond,
	.comment-edit-link,
	.comment-reply-link,
	.comment-metadata .edit-link,
	.pingback .edit-link,
	.site-footer aside.widget-area,
	.site-info {
		display: none !important;
	}

	.entry-footer,
	#comments,
	.site-footer {
		border: 0;
	}

	/* Font sizes */

	body {
		font-size: 12pt;
	}

	h1 {
		font-size: 24pt;
	}

	h2 {
		font-size: 22pt;
	}

	h3 {
		font-size: 17pt;
	}

	h4 {
		font-size: 12pt;
	}

	h5 {
		font-size: 11pt;
	}

	h6 {
		font-size: 12pt;
	}

	.page .panel-content .entry-title,
	.page-title,
	body.page:not(.twentyseventeen-front-page) .entry-title {
		font-size: 10pt;
	}

	/* Layout */

	.wrap {
		padding-left: 5% !important;
		padding-right: 5% !important;
		max-width: none;
	}

	/* Site Branding */

	.site-header {
		background: transparent;
		padding: 0;
	}

	.custom-header-media {
		padding: 0;
	}

	.twentyseventeen-front-page.has-header-image .site-branding,
	.twentyseventeen-front-page.has-header-video .site-branding,
	.home.blog.has-header-image .site-branding,
	.home.blog.has-header-video .site-branding {
		position: relative;
	}

	.site-branding {
		margin-top: 0;
		margin-bottom: 1.75em !important; /* override styles added by JavaScript */
	}

	.site-title {
		font-size: 25pt;
	}

	.site-description {
		font-size: 12pt;
		opacity: 1;
	}

	/* Posts */

	.entry-meta {
		font-size: 9pt;
	}

	/* Colors */

	body,
	.site {
		background: none !important; /* Brute force since user agents all print differently. */
	}

	body,
	a,
	.site-title a,
	.twentyseventeen-front-page.has-header-image .site-title,
	.twentyseventeen-front-page.has-header-video .site-title,
	.twentyseventeen-front-page.has-header-image .site-title a,
	.twentyseventeen-front-page.has-header-video .site-title a {
		color: #222 !important; /* Make sure color schemes don't affect to print */
	}

	h2,
	h5,
	blockquote,
	.site-description,
	.twentyseventeen-front-page.has-header-image .site-description,
	.twentyseventeen-front-page.has-header-video .site-description,
	.entry-meta,
	.entry-meta a {
		color: #777 !important; /* Make sure color schemes don't affect to print */
	}

	.entry-content blockquote.alignleft,
	.entry-content blockquote.alignright {
		font-size: 11pt;
		width: 34%;
	}

	.site-footer {
		padding: 0;
	}
}