@charset "utf-8";

.articleBox {
	margin: 0 0 2em 0;
}

.articleBox h2 {
	font-size: 1.25em;
	font-weight: 500;
	line-height: 1.3em;
	margin-bottom: 0.375em;
}

.articleBox a {
	text-decoration: none;
}

.time-spec {
	font-size: 0.875em;
	color: #757575;
	margin-bottom: 0.5em;
}

.articleBox p {
	font-size: 0.875em;
	font-weight: 300;
}

/* article */

article {
	margin:0 0 2em 0;
	padding:0 0;
}

/* article page title (post.title) — largest, above all content headings */
.article-title {
	font-size: 1.75em;
	font-weight: 600;
	line-height: 1.2em;
	margin-bottom: 0.5em;
}

article h2 {
	font-size: 1.125em;
	font-weight: 600;
	line-height: 1.3em;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

article span {
	font-size: 0.875em;
	margin-bottom: 0.5em;
}

.post-desc {
	font-size: 0.875em;
	font-weight: 300;
	color: #757575;
	margin-bottom: 1em;
}

article p {
	font-size: 1em;
	line-height: 1.7;
	margin-bottom: 0.875em;
}

/* article body — markdown-rendered content headings */

.article-body h1 {
	font-size: 1.375em;
	font-weight: 600;
	line-height: 1.3em;
	margin-top: 1.75em;
	margin-bottom: 0.5em;
}

.article-body h2 {
	font-size: 1.125em;
	font-weight: 600;
	line-height: 1.3em;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

.article-body h3 {
	font-size: 1em;
	font-weight: 600;
	line-height: 1.4em;
	margin-top: 1.25em;
	margin-bottom: 0.375em;
}

.article-body h4 {
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.4em;
	margin-top: 1em;
	margin-bottom: 0.25em;
}

/* links */
.article-body a {
	color: #002FA7;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* inline code */
.article-body code {
	font-family: "SF Mono", "Cascadia Code", "Consolas", monospace;
	font-size: 0.875em;
	background: #F5F5F5;
	border: 1px solid #E0E0E0;
	border-radius: 3px;
	padding: 0.1em 0.35em;
}

/* code block */
.article-body pre {
	font-family: "SF Mono", "Cascadia Code", "Consolas", monospace;
	font-size: 0.875em;
	background: #F5F5F5;
	border: 1px solid #E0E0E0;
	border-radius: 4px;
	padding: 1em;
	overflow-x: auto;
	margin-bottom: 1em;
	line-height: 1.5;
}

.article-body pre code {
	background: none;
	border: none;
	padding: 0;
	font-size: 1em;
}

/* images — !important overrides inline style="width:...; height:..." from editor */
.article-body img {
	max-width: 100% !important;
	height: auto !important;
}

/* blockquote */
.article-body blockquote {
	border-left: 3px solid #E0E0E0;
	margin: 1em 0;
	padding: 0.25em 0 0.25em 1em;
	color: #757575;
}

/* article list*/

.list {
	padding: 0;
	clear: both;
	overflow: hidden;
	height: auto;
}

.list ol {
	font-size: 0.75em;
	font-weight: 400;
	color: #BDBDBD;
	display: block;
	list-style-type: decimal;
	margin: 0;
	padding: 0;
}

.list li {
	display: block;
	padding: 0.5em 0 0.5em 0;
}

.list li a {
	font-size: 1em;
	text-decoration-line: none;
}

.list li span {
	font-size: 0.875em;
	color: #757575;
}

/* Posts list*/

#plist {
	margin-top: 2em;

}

.plist-item {
	margin: 0;
	padding: 0.25em 0 0.75em 0;
	clear: both;
	overflow: hidden;
	height: auto;
}

.plist-date {
	font-size: 0.75em;
	color: #757575;
}

.plist-item h3 {
	font-size: 0.875em;
	font-weight: 500;
	color: #212121;
	margin-bottom: 0.375em;
}

.plist-item p {
	font-size: 0.875em;
}

/* 分页*/

.pagination {
	padding: 10px 0;
}

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

.comments-section {
	margin-top: 3em;
	padding-top: 1.5em;
	border-top: 1px solid #E0E0E0;
}

.comments-section > h3 {
	font-size: 0.75em;
	font-weight: 500;
	color: #757575;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 1.5em;
}

/* success / info message after submit */
.comment-message {
	font-size: 0.875em;
	line-height: 1.5em;
	padding: 0.625em 0.875em;
	margin-bottom: 1.25em;
	border-left: 3px solid #212121;
	background: #F5F5F5;
	color: #212121;
}

/* individual comment */
.comment {
	padding: 1em 0;
	border-bottom: 1px solid #F5F5F5;
}

.comment-meta {
	display: flex;
	align-items: baseline;
	gap: 0.75em;
	margin-bottom: 0.375em;
}

.comment-meta strong {
	font-size: 0.875em;
	font-weight: 500;
	color: #212121;
}

.comment-date {
	font-size: 0.75em;
	color: #757575;
}

.comment-body {
	font-size: 0.9375em;
	line-height: 1.65em;
	color: #212121;
}

.comment-body p {
	font-size: 1em;
	margin-bottom: 0.5em;
}

.no-comments {
	font-size: 0.875em;
	color: #757575;
	padding: 0.5em 0 1em;
}

/* comment form */

.comment-form {
	margin-top: 2em;
	padding-top: 1.5em;
	border-top: 1px solid #E0E0E0;
}

.comment-form h4 {
	font-size: 0.75em;
	font-weight: 500;
	color: #757575;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 1em;
}

.form-field {
	margin-bottom: 1em;
}

.form-field label {
	display: block;
	font-size: 0.75em;
	color: #757575;
	margin-bottom: 0.375em;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="url"],
.form-field textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 0.9375em;
	color: #212121;
	background: #fff;
	border: 1px solid #E0E0E0;
	border-radius: 3px;
	padding: 0.5em 0.625em;
	outline: none;
	-webkit-appearance: none;
	transition: border-color 0.15s;
}

.form-field input:focus-visible,
.form-field textarea:focus-visible {
	border-color: #002FA7;
	outline: 2px solid #002FA7;
	outline-offset: 0;
}

.form-field textarea {
	min-height: 6em;
	resize: vertical;
	line-height: 1.6em;
}

.form-field .errorlist {
	list-style: none;
	margin: 0.375em 0 0;
	padding: 0;
}

.form-field .errorlist li {
	font-size: 0.75em;
	color: #B00020;
}

.comment-form button[type="submit"] {
	font-family: inherit;
	font-size: 0.875em;
	font-weight: 500;
	color: #fff;
	background: #212121;
	border: none;
	border-radius: 3px;
	padding: 0.75em 1.5em;
	min-height: 2.75rem;
	cursor: pointer;
}

.comment-form button[type="submit"]:hover {
	background: #424242;
}

/* ---- Dark mode ---- */

@media (prefers-color-scheme: dark) {
	.time-spec, .post-desc, .comment-date,
	.form-field label, .no-comments,
	.comments-section > h3, .comment-form h4,
	.plist-date, .list li span { color: #9E9E9E; }

	.plist-item h3, .plist-item h3 a { color: #E0E0E0; }

	.article-body blockquote {
		border-left-color: #424242;
		color: #9E9E9E;
	}

	.article-body code,
	.article-body pre {
		background: #1E1E1E;
		border-color: #424242;
		color: #E0E0E0;
	}

	.article-body a { color: #6B9FFF; }

	.comments-section,
	.comment-form { border-top-color: #424242; }
	.comment { border-bottom-color: #2C2C2C; }

	.form-field input[type="text"],
	.form-field input[type="email"],
	.form-field input[type="url"],
	.form-field textarea {
		background: #1A1A1A;
		border-color: #424242;
		color: #E0E0E0;
	}

	.form-field input:focus-visible,
	.form-field textarea:focus-visible { border-color: #6B9FFF; outline-color: #6B9FFF; }

	.comment-form button[type="submit"] {
		background: #E0E0E0;
		color: #121212;
	}

	.comment-form button[type="submit"]:hover {
		background: #BDBDBD;
	}

	.comment-message {
		background: #1E1E1E;
		border-left-color: #E0E0E0;
		color: #E0E0E0;
	}

	.comment-meta strong,
	.comment-body { color: #E0E0E0; }
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
	.form-field input[type="text"],
	.form-field input[type="email"],
	.form-field input[type="url"],
	.form-field textarea { transition: none; }
}