/*!
 * Minimum B — 前台样式
 * 设计令牌在 theme.json，这里只做排版精修与组件。
 */

/* =========================================================================
   1. 设计令牌
   -------------------------------------------------------------------------
   --mt-*  供本文件使用
   --wp--* 覆盖 WordPress 由 theme.json 生成的颜色，
           这样"全局样式"输出的样式在深色模式下也会跟着变。
   ====================================================================== */

:root {
	--mt-bg: #ffffff;
	--mt-fg: #111111;
	--mt-muted: #8a8780;
	--mt-line: #e6e4df;
	--mt-chip: #f3f1ec;
	/* 行宽必须用 rem，不能用 em。
	   em 是按"元素自己的字号"解析的 —— 同一条 34em 规则，落在 h1 上
	   （1.7 倍字号）会变成 924px，落在 13.5px 的导语上只剩 459px，
	   于是标题、导语、页脚各自被居中到不同的宽度，全站对不齐。
	   rem 只认根字号，所有元素量出来都是同一个数。 */
	--mt-measure: 34rem;
	--mt-ease: cubic-bezier(.22, .61, .36, 1);

	/* —— 列表行的悬停反馈 ——
	   首页 / 归档 / 搜索里，鼠标停在一行上时，标题向右让开一点，
	   同时日期由灰转实。只有一个旋钮，嫌不够明显就调大它。 */
	--mt-nudge: 5px;

	/* 归档页每行左侧留给"日"的那一格。比首页的 96px 窄 —— 首页左边放的是
	   完整的 2026.06.03，归档页的月份已经在分组标题上了，只剩两位数。 */
	--mt-arc-gutter: 44px;
}

/* 未指定主题时跟随系统 */
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) {
		--mt-bg: #141413;
		--mt-fg: #e8e6e1;
		--mt-muted: #8f8d87;
		--mt-line: #2b2b29;
		--mt-chip: #1f1f1e;
	}
}

/* 手动指定 */
html[data-theme="dark"] {
	--mt-bg: #141413;
	--mt-fg: #e8e6e1;
	--mt-muted: #8f8d87;
	--mt-line: #2b2b29;
	--mt-chip: #1f1f1e;
}

/* 把 WordPress 预设色接到当前主题上 */
html[data-theme="dark"],
html[data-theme="light"] {
	--wp--preset--color--base: var(--mt-bg);
	--wp--preset--color--contrast: var(--mt-fg);
	--wp--preset--color--muted: var(--mt-muted);
	--wp--preset--color--line: var(--mt-line);
	--wp--preset--color--chip: var(--mt-chip);
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) {
		--wp--preset--color--base: var(--mt-bg);
		--wp--preset--color--contrast: var(--mt-fg);
		--wp--preset--color--muted: var(--mt-muted);
		--wp--preset--color--line: var(--mt-line);
		--wp--preset--color--chip: var(--mt-chip);
	}
}

/* 声明原生控件的配色方案。
   不声明的话，就算页面是深色，浏览器仍按浅色渲染 checkbox、滚动条、
   textarea 右下角的拖拽角标 —— 深色页面上会凭空冒出一个亮白方块。
   这三条要和上面几组变量一一对应，漏掉哪条哪条就回到浅色。 */
:root {
	color-scheme: light;
}

html[data-theme="dark"] {
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) {
		color-scheme: dark;
	}
}

/* =========================================================================
   2. 基础
   ====================================================================== */

html {
	-webkit-text-size-adjust: 100%;
}

body {
	background: var(--mt-bg);
	color: var(--mt-fg);
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monaco,
		"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", monospace;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background-color .18s ease, color .18s ease;
}

/* 正文区域统一行宽 */
.mt-header-in,
.mt-footer,
.wp-block-post-content,
.wp-block-group.is-layout-constrained > * {
	max-width: var(--mt-measure);
}

.wp-site-blocks {
	overflow-x: clip;
}

::selection {
	background: var(--mt-fg);
	color: var(--mt-bg);
}

:focus-visible {
	outline: 2px solid var(--mt-muted);
	outline-offset: 2px;
	border-radius: 2px;
}

/* =========================================================================
   3. 头部与导航
   ====================================================================== */

.mt-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--mt-bg);
	border-bottom: 1px solid var(--mt-line);
	padding: 18px 24px;
}

.mt-header .mt-header-in {
	display: flex;
	align-items: baseline;
	gap: 20px;
	width: 100%;
	margin: 0 auto;
}

.mt-header .wp-block-site-title {
	margin: 0;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: .01em;
	white-space: nowrap;
}

.mt-header .wp-block-site-title a {
	color: var(--mt-fg);
	text-decoration: none;
}

.mt-header .mt-nav {
	display: flex;
	align-items: baseline;
	gap: 18px;
	margin-left: auto;
}

.mt-header .wp-block-navigation__container,
.mt-header .wp-block-navigation {
	display: flex;
	align-items: baseline;
	gap: 18px;
}

/* -------------------------------------------------------------------------
   导航项的着色 —— 类名为什么写了不止一遍
   -------------------------------------------------------------------------
   WordPress 自己有一条：
     .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
       { color: inherit }
   优先级 (0,3,0)。原来这里写的是 ".mt-header .wp-block-navigation a"，
   (0,2,1)，被它顶掉 —— 于是导航项不是按我们给的颜色走，而是继承上一层，
   也就是 body 的颜色。

   浅色模式下 body 本就是深色字，所以看不出问题；换到深色模式，
   body 一变成浅色字（或者反过来），导航就整条糊掉、几乎看不见。
   把类名重复一次拿到 (0,4,0)，才真正压得住它。
   ---------------------------------------------------------------------- */
.mt-header .wp-block-navigation .wp-block-navigation-item__content,
.mt-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content,
.mt-header .wp-block-navigation a {
	color: var(--mt-muted);
	font-size: 13.5px;
	text-decoration: none;
	transition: color .18s ease;
}

.mt-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.mt-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.mt-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.mt-header .wp-block-navigation a:hover,
.mt-header .wp-block-navigation a:focus-visible,
.mt-header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var(--mt-fg);
}

/* 深浅色开关（由 theme.js 注入） */
.mt-toggle {
	font: inherit;
	font-size: 12px;
	line-height: 1.7;
	background: none;
	border: 1px solid var(--mt-line);
	color: var(--mt-muted);
	border-radius: 999px;
	padding: 2px 11px;
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease;
}

.mt-toggle:hover {
	color: var(--mt-fg);
	border-color: var(--mt-muted);
}

/* =========================================================================
   4. 文章列表
   ====================================================================== */

.mt-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 选择器加上 .wp-block-group 是为了压过 WordPress 的 .is-layout-flow */
.wp-block-group.mt-row {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 16px;
	align-items: baseline;
	padding: 11px 0;
}

.mt-row .wp-block-post-date {
	color: var(--mt-muted);
	font-size: 12.5px;
	letter-spacing: .03em;
	transition: color .24s ease;
}

.mt-row .wp-block-post-title {
	margin: 0;
	font-size: 15.5px;
	font-weight: 400;
	line-height: 1.7;
	min-width: 0;   /* 格子里装长标题时不要撑破栅格 */
}

/* 标题占满整格 —— 所以可点的区域是整块，而不只是文字那几个字。
   上一版这里是 flex 容器，为了让行尾标记用 margin-left:auto 推到最右；
   标记去掉之后它就没用了。顺带一件好事：标题不再需要给标记让位，
   拿回了原先预留的 56px，一行能多站约 6 个汉字。 */
.mt-row .wp-block-post-title a {
	display: block;
	color: var(--mt-fg);
	text-decoration: none;
	transition: transform .24s var(--mt-ease);
}

/* -------------------------------------------------------------------------
   列表末尾那一行 —— 通向全部文章
   -------------------------------------------------------------------------
   它复用列表自己的网格：左列还是年份，右列换成一个动作。
   所以它读起来不是"一个查看更多按钮"，而是列表的最后一行。
   内容和数字由 functions.php 里的 mt_inject_more() 生成。
   ---------------------------------------------------------------------- */

.wp-block-group.mt-more {
	margin-top: 8px;
	padding-top: 17px;
	border-top: 1px solid var(--mt-line);
}

.mt-more .mt-more-link {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 16px;
	align-items: baseline;
	color: var(--mt-muted);
	text-decoration: none;
	transition: color .18s ease;
}

.mt-more .mt-more-link:hover,
.mt-more .mt-more-link:focus-visible {
	color: var(--mt-fg);
}

.mt-more .mt-more-years {
	font-size: 12.5px;
	letter-spacing: .03em;
	transition: color .24s ease;
}

.mt-more .mt-more-text {
	display: block;
	font-size: 15.5px;
	line-height: 1.7;
	min-width: 0;
	transition: transform .24s var(--mt-ease);
}

/* -------------------------------------------------------------------------
   首页入场 —— 纯 CSS 错峰，一行都不等太久
   -------------------------------------------------------------------------
   8 行按顺序交出来，每行晚 70ms；最后一行的总延迟也不到半秒。
   零脚本：没有 intersection、没有观察器，禁用 JavaScript 也照常。

   不要这个效果的话，整块删掉就行，别的地方不依赖它。

   最后一条规则是给"减少动效"用户准备的：宁可一次全出现，
   也不要看一串迟到的东西。
   ---------------------------------------------------------------------- */

.mt-foyer .mt-list > li {
	animation: mt-row-in .46s var(--mt-ease) both;
}

.mt-foyer .mt-list > li:nth-child(1) { animation-delay: 0ms; }
.mt-foyer .mt-list > li:nth-child(2) { animation-delay: 70ms; }
.mt-foyer .mt-list > li:nth-child(3) { animation-delay: 140ms; }
.mt-foyer .mt-list > li:nth-child(4) { animation-delay: 210ms; }
.mt-foyer .mt-list > li:nth-child(5) { animation-delay: 280ms; }
.mt-foyer .mt-list > li:nth-child(6) { animation-delay: 350ms; }
.mt-foyer .mt-list > li:nth-child(7) { animation-delay: 420ms; }
.mt-foyer .mt-list > li:nth-child(8) { animation-delay: 490ms; }

@keyframes mt-row-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mt-foyer .mt-list > li {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* =========================================================================
   5. 页面标题与元信息
   ====================================================================== */

.mt-page-title {
	font-size: 1.7em;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 .55em;
}

.mt-lede {
	color: var(--mt-muted);
	font-size: 13.5px;
	letter-spacing: .02em;
	margin: 0 0 34px;
}

/* "上次更新 N 天前" 由 functions.php 生成，不折行 */
.mt-lede .mt-ago {
	white-space: nowrap;
}

.wp-block-group.mt-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: baseline;
	color: var(--mt-muted);
	font-size: 12.5px;
	letter-spacing: .06em;
	/* 只写「下边距」，绝不要用 margin 缩写。
	   WordPress 把子块居中靠的是 .is-layout-constrained > * 上的
	   margin-left/right:auto，而那条规则写在 :where() 里（优先级为 0）。
	   这里一旦用 margin 缩写加 !important，就会把它的左右边距一起覆盖成 0，
	   元信息行会被甩到容器的 padding 边 —— 日期和阅读时长就是这么跑到最左边去的。
	   左右交给 WordPress 自己居中。 */
	margin-bottom: 3em !important;
}

.mt-post-meta .wp-block-post-date {
	color: var(--mt-muted);
	font-size: 12.5px;
}

.mt-read {
	margin: 0 !important;
}

/* =========================================================================
   6. 正文
   ====================================================================== */

.wp-block-post-content p,
.mt-content p {
	margin: 0 0 1.5em;
}

.wp-block-post-content > h2,
.wp-block-post-content > h3 {
	margin-top: 2.3em;
}

.wp-block-post-content img {
	max-width: 100%;
	height: auto;
}

.wp-block-post-content blockquote {
	margin: 1.8em 0;
	padding: 0 0 0 1.1em;
	border-left: 2px solid var(--mt-line);
	color: var(--mt-muted);
	font-style: normal;
}

.wp-block-post-content hr {
	border: 0;
	border-top: 1px solid var(--mt-line);
	margin: 2.6em 0;
}

.wp-block-post-content code {
	background: var(--mt-chip);
	padding: .12em .38em;
	border-radius: 3px;
	font-size: .92em;
}

.wp-block-post-content pre {
	background: var(--mt-chip);
	padding: 1em 1.15em;
	border-radius: 6px;
	overflow: auto;
	font-size: .9em;
	line-height: 1.7;
}

.wp-block-post-content pre code {
	background: none;
	padding: 0;
}

/* =========================================================================
   7. 链接动效 —— 正文行内链接：悬停时右侧滑出一枚箭头
   -------------------------------------------------------------------------
   原来是"下划线自左向右展开"。现在换成同一个动作的另一种收尾：
   文字右侧滑出一枚箭头，跟着文字走。线没有了。

   适用范围只有一处：正文里的行内链接。列表行（首页 / 归档 / 搜索）的
   行尾标记是另一套，见本节末 —— 两者的需求不同，所以刻意分开写：
     行内链接  = "我在这儿"，跟着文字走就行；
     列表行尾  = 要立成一根柱，必须定宽、右对齐。

   为什么用字形 → 而不是拼 SVG／用伪元素画箭头：
     1. 这个站是等宽字体打底，→ 在等宽字里占满一格，天生对得齐；
     2. 一行 CSS 就够。不引图标字体、不引 SVG、不引脚本，守住"不臃肿"；
     3. 颜色走 currentColor，深色模式自动变浅色 —— 不会像原来写死的
        #999 / black 那样，在深色底上糊成一根看不见的线。

   动作是怎么做出来的：箭头是一个 width:0 → .96em 的 inline-block，
   用 overflow:hidden 把它裁在盒子里，再用 text-align:right 让字形贴住
   盒子右缘。展开时看起来是"从文字背后推出来"，而不是凭空冒出来。
   宽度变化会带着后面几个字轻轻右移 —— 幅度不到一个字符，这正是要的
   手感，不会引起换行抖动。

   可访问性：:focus-visible 与 :hover 同等对待，键盘 Tab 过来一样看得见。
   ====================================================================== */

/* —— 正文链接：去掉下划线，反馈交给箭头 —— */
.wp-block-post-content a:not(.wp-block-button__link),
.mt-content a:not(.wp-block-button__link) {
	color: inherit;
	text-decoration: none;
}

/* —— 箭头的公共形状（仅正文行内链接）—— */
.wp-block-post-content a:not(.wp-block-button__link)::after,
.mt-content a:not(.wp-block-button__link)::after,
.mt-arrow::after,
.hvr-underline-from-left::after {
	content: "→";
	display: inline-block;
	width: 0;
	overflow: hidden;
	text-align: right;
	white-space: nowrap;
	font-size: .92em;
	line-height: 1;
	vertical-align: .06em;
	color: currentColor;
	opacity: 0;
	transform: translateX(-.34em);
	pointer-events: none;
	transition:
		width .34s var(--mt-ease),
		transform .34s var(--mt-ease),
		opacity .16s ease .02s;
}

/* —— 触发态：悬停 / 键盘聚焦 —— */
.wp-block-post-content a:not(.wp-block-button__link):hover::after,
.wp-block-post-content a:not(.wp-block-button__link):focus-visible::after,
.mt-content a:not(.wp-block-button__link):hover::after,
.mt-content a:not(.wp-block-button__link):focus-visible::after,
.mt-arrow:hover::after,
.mt-arrow:focus-visible::after,
.hvr-underline-from-left:hover::after,
.hvr-underline-from-left:focus-visible::after {
	width: .96em;
	opacity: .55;
	transform: translateX(0);
}

/* 包着图片的链接不挂箭头。:has() 在旧浏览器不支持时，这条规则会被整条
   丢掉，结果只是图片链接多挂一枚箭头 —— 不影响可用性，所以敢这么写。 */
.mt-content a:has(img)::after,
.wp-block-post-content a:has(img)::after {
	content: none;
}

/* -------------------------------------------------------------------------
   7b. 列表行的悬停反馈 —— 行尾不再挂标记
   -------------------------------------------------------------------------
   行尾曾经挂过「引线 + →」。去掉它的理由不是不好看，是它重复：
   标题从 1 个字到 20 个字都有，八行排下来，右端就是八组一模一样的
   形状，而它们想说的只有一件事 —— 这里能点。

   现在行尾什么都不放。反馈改成两条原地发生的信号：
     · 标题向右让开 --mt-nudge
     · 日期由灰转实

   两条都不占横向空间，所以标题拿回了原先给标记预留的 56px 宽度。
   位移用 transform 而不是 margin：不触发重排，挪的只是绘图层。

   代价说明白：全站再没有一处静态的「可点」视觉线索了。（你原来的
   主题里正文链接静止时也和普通文字一样。）正文行内链接的箭头保留着，
   所以站上还留着一处会动的提示 —— 那一处跟着文字走，正好合适。
   ---------------------------------------------------------------------- */

/* 日期由灰转实。末行那一行的年份不用单独写 —— 它继承
   .mt-more-link:hover 的颜色，本来就会跟着变。 */
.mt-row:hover .wp-block-post-date {
	color: var(--mt-fg);
}

/* 悬停与键盘焦点同等对待：Tab 过来时，标题一样让开。 */
.mt-row:hover .wp-block-post-title a,
.mt-row .wp-block-post-title a:focus-visible,
.mt-more .mt-more-link:hover .mt-more-text,
.mt-more .mt-more-link:focus-visible .mt-more-text {
	transform: translateX(var(--mt-nudge));
}

.mt-row:has(.wp-block-post-title a:focus-visible) .wp-block-post-date {
	color: var(--mt-fg);
}

/* 你原来的两个类：旧名字保留，行为换成箭头，老草稿里写了也不会变回下划线 */
.mt-arrow,
.hvr-underline-from-left {
	display: inline-block;
	vertical-align: baseline;
}

/* 悬停划掉 —— 原样保留，颜色升级为 currentColor */
.strike-through {
	position: relative;
	display: inline-block;
}

.strike-through::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: .52em;
	width: 100%;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .5s ease-in-out;
}

.strike-through:hover::before {
	transform: scaleX(1);
}

/* =========================================================================
   8. 图片、图集、灯箱
   -------------------------------------------------------------------------
   灯箱是 WordPress 原生能力（图片区块的"点击放大"）。
   这里只改外观，不接管行为——不额外增加脚本体积。
   ====================================================================== */

.wp-block-image {
	margin: 0 0 1.5em;
}

.wp-block-image figcaption,
.wp-block-gallery figcaption,
.wp-element-caption {
	color: var(--mt-muted);
	font-size: 12.5px;
	text-align: center;
	margin-top: .7em;
	line-height: 1.6;
}

.wp-block-gallery {
	display: grid;
	gap: 10px;
	margin: 0 0 1.5em;
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
	margin: 0;
}

.wp-block-gallery.has-nested-images {
	gap: 10px;
}

/* 可放大的图片给出光标提示 */
.wp-lightbox-container img {
	cursor: zoom-in;
}

/* 缩放按钮：做成右下角一个克制的小标记 */
.wp-lightbox-container .lightbox-trigger {
	background: var(--mt-bg);
	border: 1px solid var(--mt-line);
	border-radius: 4px;
	color: var(--mt-muted);
	cursor: pointer;
	opacity: .85;
	transition: opacity .18s ease, color .18s ease;
}

.wp-lightbox-container .lightbox-trigger:hover {
	opacity: 1;
	color: var(--mt-fg);
}

.wp-lightbox-container .lightbox-trigger svg {
	fill: currentColor;
}

/* 灯箱遮罩 */
.wp-lightbox-overlay {
	background: rgba(10, 10, 10, .94) !important;
}

.wp-lightbox-overlay .scrim {
	background: transparent !important;
}

.wp-lightbox-overlay .lightbox-image-container img,
.wp-lightbox-overlay figure img {
	border-radius: 4px;
}

.wp-lightbox-overlay figcaption,
.wp-lightbox-overlay .wp-element-caption {
	color: #b9b7b1;
}

.wp-lightbox-overlay .close-button {
	color: #e8e6e1;
	background: transparent;
	border: 0;
	opacity: .65;
	transition: opacity .18s ease;
}

.wp-lightbox-overlay .close-button:hover {
	opacity: 1;
}

/* =========================================================================
   9. 标签
   ====================================================================== */

.wp-block-group.mt-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2.6em;
}

.mt-chips .wp-block-post-terms__separator {
	display: none;
}

.mt-chips a {
	display: inline-block;
	font-size: 12.5px;
	line-height: 1.7;
	border: 1px solid var(--mt-line);
	border-radius: 999px;
	padding: 3px 11px;
	color: var(--mt-muted);
	text-decoration: none;
	transition: color .18s ease, border-color .18s ease;
}

.mt-chips a:hover {
	color: var(--mt-fg);
	border-color: var(--mt-muted);
}

/* =========================================================================
   10. 上一篇 / 下一篇
   ====================================================================== */

.wp-block-group.mt-pn {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	margin-top: 3.2em !important;
	padding-top: 1.5em;
	border-top: 1px solid var(--mt-line);
	font-size: 13px;
}

.mt-pn .post-navigation-link-next {
	margin-left: auto;
	text-align: right;
}

.mt-pn a {
	color: var(--mt-muted);
	text-decoration: none;
	transition: color .18s ease;
}

.mt-pn a:hover {
	color: var(--mt-fg);
}

/* =========================================================================
   11. 页脚
   ====================================================================== */

.wp-block-group.mt-footer {
	margin: 0 auto;
	padding: 28px 24px 56px;
	border-top: 1px solid var(--mt-line);
	color: var(--mt-muted);
	font-size: 12.5px;
	letter-spacing: .03em;
	line-height: 1.9;
	text-align: left;
}

.mt-footer p {
	margin: 0;
}

.mt-footer a {
	color: var(--mt-muted);
	text-decoration: none;
	transition: color .18s ease;
}

.mt-footer a:hover {
	color: var(--mt-fg);
}

/* =========================================================================
   12. 回到顶部（由 theme.js 注入）
   ====================================================================== */

.mt-top {
	position: fixed;
	right: 26px;
	bottom: 26px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mt-bg);
	color: var(--mt-muted);
	border: 1px solid var(--mt-line);
	border-radius: 50%;
	font: inherit;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity .22s ease, visibility .22s ease, color .18s ease;
	z-index: 15;
}

.mt-top.is-on {
	opacity: .9;
	visibility: visible;
}

.mt-top:hover {
	color: var(--mt-fg);
}

/* =========================================================================
   13. 归档页
   -------------------------------------------------------------------------
   形状是这样来的：
     · 一年一段。年份在左，右边一根细线拉到头，末端是这一年的篇数 ——
       和第 4 节 mt-more 顶上那根线是同一种语气，整站只有这一种分隔方式；
     · 每个月一行小字（链到月归档），后面跟着当月篇数；
     · 每篇一行：左格放"日"，右格放标题。

   年份、月份、日、标题都从同一条竖线起排（月与日靠 --mt-arc-gutter 对齐），
   所以整页扫下来是一条整齐的栏，而不是四个各自缩进的块。

   悬停反馈和首页完全一致 —— 标题右移 --mt-nudge、日期由灰转实。
   用的是第 7b 节那套旋钮，这里只是把归档页自己的类名接上去。

   没有入场动画：首页 8 行错峰出现是好看的，这页 25 行加上去就变成
   一场拖延。安静地直接出现，才配得上"归档"这两个字。
   ====================================================================== */

.mt-arc-lede {
	margin-bottom: 26px;
}

.mt-arc {
	margin: 0;
}

.mt-arc-year + .mt-arc-year {
	margin-top: 44px;
}

/* —— 年份行 —— */
.mt-arc-year-h {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 6px;
	font-size: 1em;
	font-weight: 400;
}

.mt-arc-year-num {
	font-size: 1.22em;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--mt-fg);
}

/* 1px 的线，在文字的中腰上穿过去 */
.mt-arc-rule {
	flex: 1;
	align-self: center;
	height: 1px;
	background: var(--mt-line);
}

.mt-arc-year-n {
	font-size: 12.5px;
	letter-spacing: .03em;
	color: var(--mt-muted);
}

/* —— 月份行 —— */
.mt-arc-month {
	margin-top: 18px;
}

.mt-arc-month-h {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 2px;
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: .04em;
}

.mt-arc-month-a {
	color: var(--mt-muted);
	text-decoration: none;
	transition: color .18s ease;
}

.mt-arc-month-a:hover,
.mt-arc-month-a:focus-visible {
	color: var(--mt-fg);
}

.mt-arc-month-n {
	font-size: 11.5px;
	color: var(--mt-muted);
	opacity: .6;
}

/* —— 逐篇 —— */
.mt-arc-list {
	margin: 0;
}

.mt-arc-row {
	display: grid;
	grid-template-columns: var(--mt-arc-gutter) 1fr;
	gap: 16px;
	align-items: baseline;
	padding: 5px 0;
}

.mt-arc-day {
	color: var(--mt-muted);
	font-size: 12.5px;
	letter-spacing: .03em;
	transition: color .24s ease;
}

/* 标题占满整格，可点区域是整块而不只是那几个字 */
.mt-arc-a {
	display: block;
	min-width: 0;
	color: var(--mt-fg);
	font-size: 15.5px;
	line-height: 1.7;
	text-decoration: none;
	transition: transform .24s var(--mt-ease);
}

.mt-arc-row:hover .mt-arc-day,
.mt-arc-row:has(.mt-arc-a:focus-visible) .mt-arc-day {
	color: var(--mt-fg);
}

.mt-arc-row:hover .mt-arc-a,
.mt-arc-a:focus-visible {
	transform: translateX(var(--mt-nudge));
}

/* =========================================================================
   14. 评论
   -------------------------------------------------------------------------
   结构由 core/comments 区块产出，这里只负责排版。
   小标题那行（评论 ────── N 条）由 functions.php 注入，
   用的是归档页年份行同一套视觉，让两处看着像一家的。
   ====================================================================== */

.mt-comments {
	margin-top: 4.5em;
}

/* —— 小标题行 —— */
.mt-cm-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 26px;
}

.mt-cm-h {
	margin: 0;
	font-size: 1.22em;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--mt-fg);
}

.mt-cm-rule {
	flex: 1;
	align-self: center;
	height: 1px;
	background: var(--mt-line);
}

.mt-cm-n {
	font-size: 12.5px;
	letter-spacing: .03em;
	color: var(--mt-muted);
}

/* —— 列表骨架 ——
   区块默认给 <ol> 加了序号和缩进，这里全部清掉，
   层级只靠缩进表达，不加边框。 */
.mt-comments ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mt-comments li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 平级之间靠留白分开，不画分隔线 —— 这个站的评论量很小，
   画线只会把版面切碎。 */
.mt-comments li + li {
	margin-top: 26px;
}

/* 嵌套回复：往右让一格，用一根极淡的引线兜住，避免深层嵌套看不出归属。
   引线只在这里出现，列表行尾一如既往不加任何标记。 */
.mt-comments li ol {
	margin-top: 20px;
	padding-left: 18px;
	border-left: 1px solid var(--mt-line);
}

/* —— 单条评论 —— */
.mt-comment-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
}

.mt-comment-head .wp-block-comment-author-name {
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--mt-fg);
}

.mt-comment-head .wp-block-comment-author-name a {
	color: inherit;
	text-decoration: none;
}

.mt-comment-head .wp-block-comment-author-name a:hover {
	color: var(--mt-muted);
}

.mt-comment-head .wp-block-comment-date {
	font-size: 11.5px;
	letter-spacing: .05em;
	color: var(--mt-muted);
	white-space: nowrap;
}

.mt-comment-head .wp-block-comment-date a {
	color: inherit;
	text-decoration: none;
}

/* 作者本人回的那几条，名字后面缀一枚安静的小字。
   这个站上温会亲自回访客，得一眼看出哪几条是他写的。
   bypostauthor 是 WordPress 自己按「评论作者 == 文章作者」加的类，
   不用另写 PHP。只加文字，不加框、不加底色 —— 多一个形状反而显得小气。 */
.mt-comments li.bypostauthor .wp-block-comment-author-name::after {
	content: "博主";
	margin-left: 7px;
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: .1em;
	color: var(--mt-muted);
}

.mt-comment .wp-block-comment-content {
	margin-top: 7px;
	font-size: 15px;
	line-height: 1.8;
	color: var(--mt-fg);
}

.mt-comment .wp-block-comment-content p {
	margin: 0 0 .9em;
}

.mt-comment .wp-block-comment-content p:last-child {
	margin-bottom: 0;
}

/* 评论者的位置。跟日期、阅读时长同一套次要文字，
   不引图标 —— 等宽字站里多一个 SVG 就多一处对不齐的地方。 */
.mt-cm-from {
	margin-top: 8px;
	font-size: 11.5px;
	letter-spacing: .05em;
	color: var(--mt-muted);
}

.mt-comment .comment-reply-link {
	display: inline-block;
	margin-top: 9px;
	font-size: 12px;
	letter-spacing: .03em;
	color: var(--mt-muted);
	text-decoration: none;
	transition: color .18s ease;
}

.mt-comment .comment-reply-link:hover,
.mt-comment .comment-reply-link:focus-visible {
	color: var(--mt-fg);
}

/* —— 表单 —— */
.mt-comments .wp-block-post-comments-form {
	margin-top: 44px;
}

/* 与归档页的「月份行」同级：小、灰、字距略开 */
.comment-reply-title {
	margin: 0 0 16px;
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: .06em;
	color: var(--mt-muted);
}

/* 点「回复」后标题变成「回复给 X ✕取消回复」。
   区块样式会给那个 <small> 套上 medium 字号，比标题本身还大 ——
   选择器加上 .mt-comments 前缀才压得住它（那边是 (0,2,0)）。 */
.mt-comments .comment-reply-title small {
	margin-left: 10px;
	font-size: 11.5px;
}

.comment-reply-title a {
	color: var(--mt-muted);
	text-decoration: none;
	transition: color .18s ease;
}

.comment-reply-title a:hover,
.comment-reply-title a:focus-visible {
	color: var(--mt-fg);
}

.comment-form {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px 22px;
	font-size: 13.5px;
}

.comment-form p {
	margin: 0;
}

.comment-form .comment-notes,
.comment-form .logged-in-as,
.comment-form .comment-form-comment,
.comment-form .form-submit,
.comment-form .comment-form-cookies-consent,
.comment-form .comment-reply-title {
	grid-column: 1 / -1;
}

.comment-form .comment-notes,
.comment-form .logged-in-as {
	font-size: 12px;
	letter-spacing: .03em;
	color: var(--mt-muted);
	margin-bottom: 2px;
}

.comment-form .comment-notes a,
.comment-form .logged-in-as a {
	color: var(--mt-muted);
}

/* 带 .mt-comments 前缀是为了压过区块自带的那条
   `.wp-block-post-comments-form .comment-form-author label{...}`（优先级 0,2,1）——
   它会给三个字段的标签加 .25em 的下边距，比这里要的 6px 紧。 */
.mt-comments .comment-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 11.5px;
	letter-spacing: .06em;
	color: var(--mt-muted);
}

.comment-form .required {
	color: var(--mt-fg);
}

/* 浏览器记住昵称的那个勾选项：一行小字，别占三列 */
.mt-comments .comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 9px;
}

.mt-comments .comment-form .comment-form-cookies-consent input[type="checkbox"] {
	flex: none;
	margin: 5px 0 0;
	accent-color: var(--mt-fg);
}

.mt-comments .comment-form .comment-form-cookies-consent label {
	display: inline;
	margin: 0;
	font-size: 12px;
	line-height: 1.7;
	letter-spacing: .03em;
	color: var(--mt-muted);
	cursor: pointer;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
	width: 100%;
	padding: 7px 0;
	border: 0;
	border-bottom: 1px solid var(--mt-line);
	background: transparent;
	color: var(--mt-fg);
	font: inherit;
	font-size: 14px;
	line-height: 1.6;
	transition: border-color .18s ease;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus {
	outline: none;
	border-bottom-color: var(--mt-fg);
}

/* 多行框给个完整的细框 —— 只有下边线的话，输入多行字会看着无处着落 */
.comment-form textarea {
	width: 100%;
	min-height: 108px;
	padding: 11px 13px;
	border: 1px solid var(--mt-line);
	border-radius: 2px;
	background: transparent;
	color: var(--mt-fg);
	font: inherit;
	font-size: 14px;
	line-height: 1.75;
	resize: vertical;
	transition: border-color .18s ease;
}

.comment-form textarea:focus {
	outline: none;
	border-color: var(--mt-fg);
}

/* 提交按钮沿用标签胶囊的质感 */
.comment-form .form-submit {
	margin-top: 4px;
}

.comment-form input[type="submit"] {
	font: inherit;
	font-size: 12.5px;
	letter-spacing: .06em;
	padding: 7px 20px;
	border: 1px solid var(--mt-line);
	border-radius: 999px;
	background: transparent;
	color: var(--mt-muted);
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease;
}

.comment-form input[type="submit"]:hover,
.comment-form input[type="submit"]:focus-visible {
	color: var(--mt-fg);
	border-color: var(--mt-muted);
}

/* 点「回复」后，WordPress 会把整个 #respond 挪进评论列表。
   注意它插在 <li> 的**外面** —— 是 <ol> 的直接子节点（与那条 li 平级），
   所以选择器要写 ol，写成 li .comment-form 是命中不了的。
   落进列表后是窄栏，三列排不开，改成一列；上边距也收紧一点。 */
.mt-comments ol .comment-respond {
	margin-top: 20px;
}

.mt-comments ol .comment-form {
	grid-template-columns: 1fr;
}

/* =========================================================================
   15. 响应式
   ====================================================================== */

@media (max-width: 880px) {
	body {
		font-size: 15px;
		line-height: 1.8;
	}

	.mt-header {
		padding: 14px 20px;
	}

	.mt-header .mt-header-in {
		gap: 12px;
	}

	.mt-header .mt-nav {
		gap: 14px;
	}

	/* 这里的选择器要和第 3 节那条基础规则同级，否则会被它压住 ——
	   基础规则是 (0,4,0)，原来这条只有 (0,2,1)，手机上字号根本改不动。 */
	.mt-header .wp-block-navigation .wp-block-navigation-item__content,
	.mt-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content,
	.mt-header .wp-block-navigation a {
		font-size: 13px;
	}

	/* 注意：这里必须写成 .wp-block-group.mt-row，跟第 4 节的写法一致。
	   只写 .mt-row 的话优先级（0,1,0）低于基础规则（0,2,0），
	   整条规则会被静默作废 —— 手机上日期和标题就不会堆叠。 */
	.wp-block-group.mt-row {
		grid-template-columns: 1fr;
		gap: 2px;
		padding: 12px 0;
	}

	.mt-row .wp-block-post-date {
		font-size: 12px;
	}

	/* 末尾那一行也跟着堆叠，但要留住"还是同一张清单"的样子 */
	.mt-more .mt-more-link {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.mt-more .mt-more-years {
		font-size: 12px;
	}

	/* 归档页：左边那一格收窄。日只有两位数，不用给 44px。 */
	:root {
		--mt-arc-gutter: 32px;
	}

	.mt-arc-year + .mt-arc-year {
		margin-top: 34px;
	}

	.mt-arc-a {
		font-size: 14.5px;
	}

	/* 评论：昵称 / 邮箱 / 网站 三列排不下，改成竖排。
	   选择器与第 14 节的基础规则同名同优先级，靠"后到者胜"生效。 */
	.comment-form {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.mt-comments {
		margin-top: 3.4em;
	}

	.mt-comment .wp-block-comment-content {
		font-size: 14.5px;
	}

	/* 缩进收窄，深层嵌套在小屏上才不至于被挤成一条 */
	.mt-comments li ol {
		padding-left: 13px;
	}

	.wp-block-group.mt-footer {
		padding: 24px 20px 48px;
	}

	.mt-top {
		right: 16px;
		bottom: 16px;
	}
}

/* 很窄的屏幕上，导航换行而不是溢出 */
@media (max-width: 560px) {
	.mt-header .mt-header-in {
		flex-wrap: wrap;
	}

	/* 兜底：WordPress 会自己给导航生成 flex 布局类，那套类我在本地
	   看不到，所以这里补一条优先级更高的规则，确保 4 项在极窄屏上
	   换行而不是顶出屏幕。header 里已写 overlayMenu:"never"，
	   所以手机上不会变成汉堡按钮，只会换行。 */
	.mt-header .wp-block-navigation__container {
		flex-wrap: wrap;
		justify-content: flex-end;
		row-gap: 2px;
	}
}

/* =========================================================================
   16. 尊重"减少动效"偏好
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}