@charset "UTF-8";
/*!
 * Mooto · pages.css
 * 页面区块样式：首屏 / 故事 / 花语 / 精工 / 作品 / 收费 / 动态 / 预约
 *              关于页 / 作品页 / 收费页 / 动态页 / 联系页
 *              案例详情 / 归档 / 搜索 / 404
 *
 * ★ 原站把这一整段（含 4 份重复的 .booking、4 份重复的响应式覆盖）
 *   分别内联进每个页面。这里合并为唯一一份，重复定义全部消除。
 */

/* ============================================================
   1. 通用「页首」（关于/收费/动态/联系/作品共用一套基类）
   ============================================================ */
/* ★ 下内边距收住了（原来是 40~110px）。
   访客原话：正文与头部之间的距离有点高、空白很多。那一段是**两头都在给**的结果 ——
   页首下最多 110px，紧接的正文块上还有 clamp(30px,5vh,60px) ~ clamp(70px,10vh,150px)。
   页首这边收住，只留「把内容兜住」的量；页首**里面**另外有一条全站统一的面包屑
   （.crumbs，页首首行），它的下边距也会吃掉一点。 */
.page-hero {
	padding-top: calc(var(--nav-h) + clamp(60px, 9vh, 110px));
	padding-bottom: clamp(32px, 4.6vh, 56px);
	text-align: center;
}

/* ★ min-height 去掉了（访客原话：正文与头部之间的距离有点高、空白很多）。
   它原本是「页首占满大半屏」那个设计的遗产 —— 撑高是为了给底下的大图留版面。
   可内页页首本来就没几句话，撑满之后上下全是空（关于页 72vh、收费页 66vh）。
   这和首屏那个 min-height:100vh 是同一类遗留，本轮一起收掉了。
   ★ --tall 与 --mid 现在只保留**类名**（块模板与 page-hero 的 schema 里还写着它，
     改名要同步改 4 个 .html），高度上不再有区别。 */
.page-hero--tall,
.page-hero--mid { padding-bottom: clamp(32px, 4.6vh, 56px); }

/* ★ --bare：页首只有面包屑（施工工艺页在用）。
   页面名由正文区块自己的大标题承担，所以三层「给标题让位」的下内边距
   全收掉 —— 不收的话，面包屑下面会白留 100px 才到区块标题。 */
.page-hero--bare,
.page-hero--bare .page-hero__inner { padding-bottom: 0; }

.page-hero__inner { padding: clamp(20px, 3vh, 40px) var(--pad) clamp(20px, 3vh, 40px); }

.page-hero__sub {
	font-size: 12px;
	letter-spacing: .44em;
	margin-right: -.44em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: clamp(26px, 4vh, 44px);
}

.page-hero__title {
	font-family: var(--serif);
	font-size: clamp(32px, 5.6vw, 78px);
	font-weight: 400;
	line-height: 1.38;
	letter-spacing: .14em;
	margin-right: -.14em;
	margin-bottom: clamp(28px, 4.5vh, 48px);
}

.page-hero__desc {
	font-size: 13.5px;
	line-height: 2.3;
	letter-spacing: .08em;
	color: var(--soft);
	max-width: 620px;
	margin: 0 auto;
	text-align: left;
}

/* ★ 现在**全站没有页面在用**这个 class 了 —— 唯一带页首大图的是关于页，
   那张已按访客要求删掉（page-guanyu.html 与 page-guanyu.php 都不再传 image）。
   样式仍然保留：page-hero 组件（template-parts/sections/page-hero.php）还支持
   image 参数，收费页 / 动态页 / 联系页将来要加页首大图可以直接用。 */
.page-hero__media {
	width: min(1200px, 100%);
	margin: 0 auto;
	aspect-ratio: 21/9;
	border-radius: var(--radius-lg);
}

.page-hero__note {
	font-size: 13px;
	line-height: 2.1;
	letter-spacing: .08em;
	color: var(--soft);
	max-width: 780px;
	margin: 0 auto;
	padding: 0 var(--pad);
	text-align: left;
}

/* ============================================================
   2. 首页首屏（hero）
   ============================================================ */
.hero {
	padding-top: calc(var(--nav-h) + 8px);
	display: flex;
	flex-direction: column;
}

/* ★ 首屏配图删掉之后，这一块是 .hero 的**唯一**子元素。
   ★ 这里曾经是 `min-height: 100vh` + `flex: 1` 垂直居中 —— 那是「首屏占满一屏」
     那个设计的遗产（撑满一屏是为了给底下那张大图留版面）。配图删掉后，
     一屏里只剩一行大字与一行标语，再撑满一屏就只剩空了。
   ★ 现按访客要求改成**内容自适应**：高度由内容 + 上下留白决定，
     手机与桌面都落在**半屏左右**，不再霸屏 —— 第一眼就能看见下面的「花语」。
   ★ 关于上下留白为什么"下 > 上"（初看很反直觉）：
     .hero 的 padding-top 里有 `--nav-h`（桌面 118px / 手机 80px），
     而导航是 `position: fixed` —— 这一段的**绝大部分是被导航盖住的，看不见**。
     它算在盒子里，却不产生任何视觉留白。所以要让内容在**肉眼可见的那块区域**
     （导航底 → .hero 底）里居中，.hero__head 的下内边距就必须大于上内边距，
     差值约等于这段被盖住的高度。★ 只按盒子居中、不看导航，内容会明显偏下。
   ★ 想微调首屏高度，只改下面这一条 clamp（垂直内边距）。
     **不要**去恢复 min-height —— 那会把空又找回来。 */
.hero__head {
	flex: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	/* ★★ 这一版（收窄后）是访客**确认保留**的值 —— 别再还原成旧值。
	 *   访客的原话：「我说的意思是刚刚你做的留白高度就行啊」。
	 *   （中间他把口径说成「原有版式高度节奏挺好的、留白先不动」，我据此还原了一次；
	 *     下一句他更正：要的就是收窄后的那版。教训 —— 「先不动」这类话要立刻追问一句
	 *     "是指保持现状，还是指还原成改动前"，不要自己选一种理解往下做。）
	 *
	 *   对照：旧值 clamp(64..158)/clamp(70..172) → .hero 手机 426px（半屏）
	 *         现值 clamp(24..48)/clamp(32..64)   → .hero 手机 281px（1/3 屏）
	 *   现值下首屏露出「花语 · 品牌精神」418 → 563px，第一眼就能看到下面的花语区。
	 *   ★ 想再紧/再松只动这一条；**不要**去恢复 min-height（会凭空多出一屏空）。 */
	padding: clamp(24px, 4.2vh, 48px) var(--pad) clamp(32px, 5.6vh, 64px);
}

.hero__brand {
	position: relative;
	width: min(70%, 300px);
	height: clamp(60px, 8.5vh, 90px);
	margin: 0 auto clamp(16px, 2.4vh, 26px);

	/* ★★ 首屏动画时间轴 —— 全部收在这一处，改一个数就能整体挪。
	 *
	 *   访客的口径（2026-10-07）：「茉棠两个字现在是写入开场，换成蹦跳入场」。
	 *   原来那套是 handwrite-in —— clip-path 从右往左揭开 + 模糊，像被人写出来。
	 *   现在换成**逐字蹦跳**：两个字先后从上方落下，落地压扁再弹两下站定。
	 *
	 *   时间轴（n = 字数，默认 2）：
	 *     --hw-gap  .22s  ── 起跑
	 *     --hw-step .17s  ── 逐字间隔（第 i 个字再晚 i×这一步）
	 *     --hw-dur  1.05s ── 单个字的蹦跳时长（落 → 压扁 → 弹 → 再弹 → 站定）
	 *     --hw-hold .22s  ── 全部落定后静默一拍，让"站住"这个动作被看见
	 *     ─────────────────────────────────────────────
	 *     --hw-exit = gap + step×(n−1) + dur + hold = .22+.17+1.05+.22 = 1.66s
	 *
	 *   ★ 交接时刻只有 --hw-exit 一个：字**化开**与花**长出来**都在这一瞬间起跑，
	 *     是交叉淡出/淡入 —— 没有一帧是"屏幕上什么都没有"的空窗。
	 *     （访客上一轮的原话：「写完之后就马上出现转动的花」。）
	 *   ★ 想再快/再慢只动这四个数；**不要**去改 .hero__handwrite 的延迟，
	 *     它引用的就是 --hw-exit。
	 */
	--hw-gap: .22s;
	--hw-step: .17s;
	--hw-dur: 1.05s;
	--hw-hold: .22s;
	--hw-n: 2;   /* PHP 按实际字数覆盖（见 template-parts/sections/hero-word.php） */
	--hw-exit: calc(var(--hw-gap) + var(--hw-step) * (var(--hw-n) - 1) + var(--hw-dur) + var(--hw-hold));
}

.hero__handwrite {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--serif);
	font-size: clamp(32px, 4.4vw, 54px);
	font-weight: 400;
	letter-spacing: .1em;
	color: var(--fg);
	white-space: nowrap;
	/* 只负责**退场**：落定之后化开、缩小、糊掉，同一时刻花在它位置上长出来。 */
	animation: hw-dissolve 1s cubic-bezier(.4, 0, .7, 1) var(--hw-exit) forwards;
}

/* 逐字蹦跳。★ 每个字一个 span（由 hero-word.php 切开），靠 --hw-i 错开起跑。
 *   transform-origin 取底线：压扁/拉长要"贴在地上"发生，否则看起来像在缩放图片。 */
.hero__hchar {
	display: inline-block;
	transform-origin: 50% 100%;
	animation: hw-bounce var(--hw-dur) cubic-bezier(.3, .72, .36, 1) both;
	animation-delay: calc(var(--hw-gap) + var(--hw-i) * var(--hw-step));
}

@keyframes hw-bounce {
	0%   { transform: translateY(-58%) scale(.86);      opacity: 0; }
	16%  { transform: translateY(0) scale(1.08, .86);   opacity: 1; }  /* 落地：压扁 */
	30%  { transform: translateY(-26%) scale(.95, 1.07); }             /* 弹起：拉长 */
	45%  { transform: translateY(0) scale(1.05, .95); }                /* 再落 */
	58%  { transform: translateY(-10%) scale(.985, 1.02); }            /* 再弹 */
	70%  { transform: translateY(0) scale(1.02, .985); }
	82%  { transform: translateY(-3%) scale(1, 1); }
	100% { transform: translateY(0) scale(1);           opacity: 1; }
}

@keyframes hw-dissolve {
	0%   { transform: scale(1);   filter: blur(0);   opacity: 1; }
	100% { transform: scale(.42); filter: blur(10px); opacity: 0; }
}

.hero__bloom {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	/* ★ 延迟 = 同一根时间轴的 --hw-exit（见 .hero__brand 上方那张表）。
	   字化开的瞬间花同时在它位置上长出来，两者是交叉淡出/淡入。 */
	animation: bloom-appear 1.2s var(--ease-soft) var(--hw-exit) forwards;
}

@keyframes bloom-appear {
	0%   { opacity: 0; transform: scale(.2); }
	55%  { opacity: 1; transform: scale(1.06); }
	100% { opacity: 1; transform: scale(1); }
}

.hero__bloom-spin { width: clamp(42px, 5.2vw, 62px); height: clamp(42px, 5.2vw, 62px); animation: spin 44s linear infinite; }
.hero__bloom svg { width: 100%; height: 100%; overflow: visible; }

.hero__bloom::before {
	content: '';
	position: absolute;
	width: clamp(60px, 7.5vw, 88px);
	height: clamp(60px, 7.5vw, 88px);
	border-radius: 50%;
	border: 1px solid rgba(10, 10, 10, .06);
	animation: halo 7s ease-in-out infinite;
	pointer-events: none;
}

.petal {
	fill: none;
	stroke: #0a0a0a;
	stroke-width: .7;
	stroke-linecap: round;
	transform-origin: 50px 50px;
	animation: breathe 5.4s ease-in-out infinite;
}

.core { fill: #0a0a0a; opacity: .82; }

.petals > g:nth-child(1) .petal { animation-delay: 0s; }
.petals > g:nth-child(2) .petal { animation-delay: .4s; }
.petals > g:nth-child(3) .petal { animation-delay: .8s; }
.petals > g:nth-child(4) .petal { animation-delay: 1.2s; }
.petals > g:nth-child(5) .petal { animation-delay: 1.6s; }
.petals > g:nth-child(6) .petal { animation-delay: 2s; }
.petals > g:nth-child(7) .petal { animation-delay: 2.4s; }
.petals > g:nth-child(8) .petal { animation-delay: 2.8s; }

@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes halo { 0%, 100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.08); opacity: .25; } }

.hero__slogan {
	font-family: var(--serif);
	font-size: clamp(13px, 1.3vw, 17px);
	letter-spacing: .46em;
	margin-right: -.46em;
	color: var(--soft);
}

/* ★ 当前首页里**没有这个元素** —— 首屏配图已按访客要求删掉
   （template-parts/sections/hero.php 与 templates/front-page.html 两边都删了）。
   这几行留着是为了将来想加回来时零成本：把 hero.php 里那段 mooto_media()
   恢复即可。
   ★ 移动端原本还有一条 `.hero__media { margin-bottom: 给 tabbar 留位 }`，
   已随这次删除一并清掉；恢复配图时记得把它放回第 17 段那个 900px 断点里。 */
.hero__media {
	flex: 1;
	margin: 0 var(--pad);
	min-height: 52vh;
	max-height: 78vh;
	border-radius: var(--radius-lg);
}

/* ============================================================
   3. 首页 · 关于（story）
   ============================================================ */
.story { background: var(--bg); text-align: center; padding: var(--section-y) var(--pad); }
.story__kicker { margin-bottom: clamp(36px, 5vh, 56px); }

.story__slogan {
	font-family: var(--serif);
	font-size: clamp(24px, 3.6vw, 50px);
	font-weight: 400;
	line-height: 1.95;
	letter-spacing: .14em;
	margin-right: -.14em;
	max-width: 1100px;
	margin: 0 auto clamp(56px, 9vh, 110px);
}

.story__text {
	font-size: 14px;
	line-height: 2.45;
	letter-spacing: .08em;
	color: var(--soft);
	max-width: 780px;
	margin: 0 auto clamp(70px, 11vh, 140px);
	text-align: left;
}

.story__media { width: min(1080px, 100%); margin: 0 auto; aspect-ratio: 16/9; border-radius: var(--radius-lg); }

/* ============================================================
   4. 首页 · 花语（bloom）
   ============================================================ */
.bloom-edit { padding: clamp(70px, 10vh, 140px) var(--pad) clamp(90px, 14vh, 200px); background: var(--bg); }
.bloom-edit__head { text-align: center; margin-bottom: clamp(70px, 11vh, 140px); }

.bloom-edit__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 80px);
	max-width: 1500px;
	margin: 0 auto;
	align-items: start;
}

.bloom-edit__col { display: flex; flex-direction: column; }
.bloom-edit__col--left { padding-top: clamp(0px, 7vh, 120px); }

/* 花语区 · 「大字 + 右侧注音」那一行的容器。
   ★ 位置定稿：拼音在字的**右侧**、与字垂直居中（用户定的形态 ——
     「正常拼音要么标在字上面、要么标在右面」）。前两版分别是字下面（错）
     和字上面（用户不要），这一版才是右面并排。
   ★ 用 flex，不用「绝对定位 / 负 margin」：字和音各自是独立文本块，
     让它们在同一行里各按自己的字号排、中间由 gap 拉开；以后改字号不用重算偏移。
   ★ 三词的间距挂在这一层（不挂在字上）：字现在被包进了 flex 行，
     它自己的 margin-bottom 会去撑高整行的高度，挂这里才管得到「整行 → 三词」的距离。 */
.bloom-edit__charline {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.15vw, 17px);
	margin-bottom: clamp(20px, 2.8vh, 32px);
}

.bloom-edit__char {
	font-family: var(--serif);
	font-size: clamp(46px, 6vw, 92px);
	line-height: 1;
	letter-spacing: .1em;
	margin-right: -.1em;
}

/* 花语区 · 大字**右侧**的注音（mò / táng）。
   ★ 位置：拼音并排在字的右边、与字垂直居中（位置逻辑在 .bloom-edit__charline 上）。
   ★ 颜色**与大字同色**（--fg），不再用 --soft。它存在的理由只有一条：有人不认识
     这两个字。最早那版标在字下面、字号也小，当时必须自己争对比度，所以用 --soft；
     改成并排 + 22px 之后它已经是被注视的第二主体，再留一个浅灰就和 92px 的「茉」
     分成了两个墨色 —— 同一个词的两半不该有两个颜色。同色之后「茉 mò」读成
     一个整体（用户提的「保持一致」就是这件事），对比度也不再是问题。
   ★ 字号 clamp(18px, 1.5vw, 22px)：用户明确要求「不要太小」。并排之后拼音是被注视的
     第二主体（不再是大字底下的小注），太小就白标了。桌面落到 22px、手机 18px。
     比更早那版（13~15px）整整大一档，与 92px 大字、11px 三词也都还站得住。
   ★ 字距 .16em（更早一版给过 .26em，实测把「mò」拆成了「m ò」—— 两个字母的
     音节经不起那么大的字距，收到 .16em 才读成一个词）。
   ★ 这里刻意**不写** margin-right / margin-bottom：右边与下面的距离统一由
     .bloom-edit__charline 的 gap 和 margin-bottom 管，自己再留 margin 只会让
     间距变成两处相加、改一处不生效。
   ★ 字体跟大字同族（--serif）：注音和它标注的那个字是同一层「词头」，
     而下面那行三词是另一层「标签」，用 sans 与它分开。 */
.bloom-edit__py {
	font-family: var(--serif);
	font-size: clamp(18px, 1.5vw, 22px);
	line-height: 1;
	letter-spacing: .16em;
	color: var(--fg);
}

/* 三词标签（纯粹 · 细腻 · 忠贞）。颜色从 --muted（.42）提到 --soft（.6）：
   注音改成与大字同色之后，这一列里就只剩它一个还停在 .42，成了孤零零的第三档灰
   （同列还有说明文用 --soft）。收到 .6 之后整列只剩**两级墨色** ——
   主体（大字 + 注音，--fg 黑）+ 辅助（三词 + 说明文，--soft 灰），层级反而更清楚。
   顺带也是可读性的修正：11px 的小字配 .42（白底约 2.9:1）本来就偏淡。
   ★ 区块标题 .kicker（花语 · 品牌精神）不在此列 —— 那是**全站共享**的标签类，
     单独给花语区加深，它反而会跟其他区块的同款标题不一致。故不动。 */
.bloom-edit__words {
	font-size: 11px;
	letter-spacing: .44em;
	margin-right: -.44em;
	text-transform: uppercase;
	color: var(--soft);
	margin-bottom: clamp(28px, 4vh, 44px);
}

/* 花语区 · 两张实景图 —— 桌面**两图等高**（3/5）。
   ★ 这两张图不是"配图"，是「茉」「棠」两个字的实物：左 = 茉莉，右 = 海棠。
     判断按气质走，两张恰好是**对立**的：
       左「茉」茉莉漂在碧绿水面上 → 俯看、静、通透
       右「棠」海棠开在蓝天下     → 仰望、扬、明快
     而左列本来就有 padding-top 下移（沉下去），右列贴顶（顶到天），
     所以错落交给布局，两图等高即可 —— 右列若矮一截，下方会空一大片
     （试过右列用 4/3 横图，只有左图一半高，已否）。
   ★ object-position 是**取景框**，不是装饰：object-fit:cover 下它决定框里露出哪一段。
     左图 62% 把水面波光留在框内，右图 52% 保住上方的蓝天。
   ★ 下边距 10px = 「图 → 它的图注」的距离；原来这 28~44px 是直接给说明文的，
     现在由 .bloom-edit__latin 接着往下传给说明文（图注贴住图，而不是浮在中间）。 */
.bloom-edit__media--tall,
.bloom-edit__media--wide { aspect-ratio: 3/5; margin-bottom: 10px; border-radius: var(--radius-md); }
/* ★ 左图这个 37.5% 是「实时水面」反算出来的值，不是随手写的：
     着色器的 cover() 把取样窗口锚在照片顶部（顶边留 3.5%），
     换算成 object-position 就是 37.5%（桌面 3/5 框）。
     两处必须一致 —— 不然画布亮起来的一瞬间构图会「跳」一下。
     改框比例（aspect-ratio）就要重算：p = (inset - 0.0125·sy) / (1 - sy)，sy = 照片比例 ÷ 框比例。
     JS 运行时也会按同一公式写一次行内值，这里这份是给「JS 没跑起来」的降级态用的。 */
.bloom-edit__media--tall img { object-position: center 37.5%; }
.bloom-edit__media--wide img { object-position: center 52%; }

/* ★ 这两张实景图关掉浏览器给「图片」的原生手势 ——
     点击放大（部分安卓浏览器自带）、长按呼出「保存图片」、
     右键「图片另存为」、以及把图直接拖出去存成文件。
     它们不是可下载的素材，是版面的一部分；一旦弹出保存菜单，构图就被打断了。
   ★ 手法是让 <img> **退出命中测试**（pointer-events: none），不是在上面盖一层透明遮罩：
     没了命中测试，长按/右键命中的是外层容器，浏览器**根本看不到「图片」这个对象**，
     于是给不出任何图片相关的菜单项。零 JS、被动式，且用计算样式与
     elementFromPoint 就能验，不靠「看起来没弹窗」。
   ★ 不影响蝴蝶：蝴蝶的命中判定是 butterfly.js 自己按坐标算的（hitTest），
     画布本身 pointer-events: none —— 它从来不靠「成为点击目标」来收事件，
     所以图收不收到事件与蝴蝶是否被点中，两件事完全无关。
   ★ 不影响左列「实时水面」：水面的 pointermove / pointerdown 绑在
     .bloom-edit__pool 容器上（theme.js:1852 / 1888，只读 e.clientX / e.clientY，
     不看 e.target），而且 .bloom-edit__water 画布已经 inset: 0 盖在图上，
     图本来就不是命中目标 —— 这一条对水面是零行为变化。
   ★ 后三条是陪跑：-webkit-touch-callout 封 iOS 长按 callout，
     user-select 封 alt 文本被选中拖走，user-drag 封 WebKit 系的拖拽导出。
   ★ 容器上再挂一遍这三条（**故意不写 pointer-events** —— 左列水面靠容器收事件）。
     原因：iOS 的 callout 到底按「命中的元素」还是「往上找最近的可 callout 祖先」判定，
     各家版本不一样，而 iOS 在这台机器上没法真机验；
     把容器也封上，两条路径都堵住。容器里只有照片/水面画布/一个静音按钮，
     这三条对它们全是无副作用的。 */
.bloom-edit__media--tall,
.bloom-edit__media--wide {
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
}
.bloom-edit__media--tall img,
.bloom-edit__media--wide img {
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
}

/* 花语区 · 实时水面（左列那张茉莉照片）
   ★ 这张照片**没有被换成一段动画** —— 整张照片就是一块水面：
     片元着色器算水波高度场 → 取梯度当水面法线 → 偏移取样坐标（折射）＋ 算高光。
     光标划过水面荡开、水下的花被推歪、波峰闪过一道亮；轻点落一颗水珠。
     不做抠图、不分件、不换图，所以它看起来仍然是那张照片 —— 只是活了。
   ★ 原来的 <img> 不删、不隐藏到「加载不到」的状态：它就是纹理源，
     同时也是 WebGL 不可用时的降级兜底。画布用淡入（.5s）而不是硬切，
     只有「图片加载完 + 着色器编译通过 + 第一帧画出来」三件事都成了，
     JS 才加 .is-live。中途任何一步失败，访客看到的还是那张静态照片，不会白屏。
   ★ object-position 由 JS 按着色器同一个取景公式反算后写回 <img>，
     所以静态图与画布用的是同一个窗口 —— 画布亮起来时构图不会「跳」一下。
   ★ 竖滑照常滚页面（touch-action: pan-y），只有横滑才交给水面。
     全禁滚动会激怒用户 —— 这是这个效果唯一有风险的地方。
   ★ 这里不写「轻触水面」那类说明字：这块的语言是「字 → 音 → 义」，
     已经用 mò / Jasminum sambac 定了调，再加一行提示就多说了。 */
.bloom-edit__pool { position: relative; }

/* 视差对这一块没有意义了（画布不会跟着滚），所以模板里也把 data-parallax 摘掉了。
   那条 scale(1.12) 是给视差留的位移余量，这里不需要 —— 取景完全由着色器负责，
   img 留在下面当兜底，必须与画布同一个窗口，多一层缩放就对不上了。 */
.bloom-edit__pool > img,
.bloom-edit__pool > picture > img { transform: none; }

.bloom-edit__water {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 1;
	opacity: 0;
	transition: opacity .5s ease;
	touch-action: pan-y;
	cursor: crosshair;
	-webkit-tap-highlight-color: transparent;
}

.bloom-edit__pool.is-live > img,
.bloom-edit__pool.is-live > picture > img { visibility: hidden; }
.bloom-edit__pool.is-live > .bloom-edit__water { opacity: 1; }

/* 水珠层：垫在水面画布之上的一层 2D 画布（点一下时落下来的那颗水珠 + 溅起的水花）。
   ★ 为什么必须单独一层、而不是塞进着色器：水珠在下落途中**还在空气里**，
     不属于水面 —— 它得画在水面之上，而不是「成为水面的一部分」。
   ★ pointer-events: none 是硬要求：落点、按住、水痕这些交互全部由
     .bloom-edit__pool 上的那几个监听统一收，这一层只管画。
     忘了写它，水面上就会多出一块「点了没反应」的死区。 */
.bloom-edit__fall {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transition: opacity .5s ease;
}
.bloom-edit__pool.is-live > .bloom-edit__fall { opacity: 1; }

/* 水声开关 —— 这块唯一的控件，所以它得小到几乎看不见、又得找得到。
   ★ 位置：右下角。照片主体是顶上那簇垂枝茉莉，右下是一片空水面，压不到东西。
   ★ 颜色 #B23A2A 朱砂（本站唯一点缀色 --m-dot）。注意 --m-dot 定义在 .mag 里，
     这里取不到，所以写成 var(--m-dot, #B23A2A)：将来那个变量若提升到 :root，
     这里自动跟随；现在用的也是同一个色值。
     面积只有 32px —— 点缀是「极小面积的一个颜色」，不是色块。
   ★ 默认是「有声」，但页面并不会自己响：浏览器规定音频必须由真实手势唤醒，
     不点它、也不点水面，就一直是安静的。
   ★ opacity .55 起步：它是「需要时才被看见」的东西，不该跟正文抢注意力；
     指针移到这块、或键盘 focus 到它，才浮到 1。 */
.bloom-edit__snd {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 3;
	width: 32px;
	height: 32px;
	padding: 0;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--m-dot, #B23A2A);
	cursor: pointer;
	opacity: .55;
	transition: opacity .25s ease, background-color .25s ease;
	-webkit-tap-highlight-color: transparent;
}
.bloom-edit__snd svg { display: block; }
.bloom-edit__pool:hover .bloom-edit__snd,
.bloom-edit__snd:focus-visible { opacity: 1; }
.bloom-edit__snd:hover { background: rgba(255, 255, 255, .92); }
.bloom-edit__snd[aria-pressed="true"] { color: var(--m-soft, #6B6A64); }
.bloom-edit__snd:focus-visible { outline: 2px solid var(--m-dot, #B23A2A); outline-offset: 2px; }

/* 手机上手指比光标粗，32px 偏小 —— 放大到 36px；手机也没有 hover，
   所以那 .55 的透明度就是它的常态，不能再压。 */
@media (max-width: 640px) {
	.bloom-edit__snd { right: 9px; bottom: 9px; width: 36px; height: 36px; opacity: .68; }
}

/* 图注 · 拉丁学名（Jasminum sambac / Malus spectabilis）。
   ★ 它不是"配行英文显得高级" —— 它和上面那行「mò / táng」是**同一套语言**：
     给不认识的东西加拉丁注。给字注音、给花标学名，整块的说辞才是统一的一整套。
   ★ 右对齐 + 斜体 serif：它是**图的注**，贴着图的右下角走，不参与左轴线的正文队列。
   ★ 颜色用 --soft 而不是 --muted：这一列刚刚统一成**两级墨色**
     （主体 --fg / 辅助 --soft），下一行说明文就是 --soft；
     图注若自己单开一档 .42，又把这列拆回三档。
   ★ 下边距承接 .bloom-edit__media--* 让出来的那一份，说明文的位置不动。 */
.bloom-edit__latin {
	font-family: var(--serif);
	font-style: italic;
	font-size: 12px;
	letter-spacing: .06em;
	color: var(--soft);
	text-align: right;
	margin: 0 0 clamp(28px, 4vh, 44px);
	padding-right: 2px;
}

.bloom-edit__desc {
	font-size: 13px;
	line-height: 2.3;
	letter-spacing: .08em;
	color: var(--soft);
	max-width: 420px;
}

/* ============================================================
   5. 首页 · 精工（craft）
   ============================================================ */
.craft-edit { background: var(--paper); padding: clamp(90px, 14vh, 200px) var(--pad); }
.craft-edit__head { text-align: center; margin-bottom: clamp(56px, 8vh, 100px); }

/* ★ 访客要求：这一块只留文字段落。
     三步流程的配图与下面「四种风格」那四张独立图都已删掉，所以
     .craft-edit__step 不再是「图 + 文」的两栏网格，改成一栏居中、
     文字左对齐的一条窄栏 —— 没有图就不该还占着半屏空白。
     .craft-edit__step-media / .craft-edit__styles 两条样式保留着，
     将来把图加回来时不用再补。 */
.craft-edit__step {
	max-width: 560px;
	margin: 0 auto clamp(52px, 8vh, 88px);
}

.craft-edit__step:nth-child(even) { direction: ltr; }   /* 中和掉旧的两栏镜像 */

.craft-edit__step-media { aspect-ratio: 16/10; border-radius: var(--radius-md); }
.craft-edit__step-text { padding: 0; }
.craft-edit__num { font-size: 10px; letter-spacing: .4em; color: var(--muted); margin-bottom: 20px; }
.craft-edit__name { font-family: var(--serif); font-size: clamp(20px, 2.2vw, 32px); letter-spacing: .14em; margin-bottom: 22px; }
.craft-edit__text { font-size: 13px; line-height: 2.3; letter-spacing: .06em; color: var(--soft); }

.craft-edit__styles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(14px, 1.8vw, 32px);
	max-width: 1500px;
	margin: 0 auto;
}

.style-item { text-align: center; }
.style-item__media { aspect-ratio: 3/4; border-radius: var(--radius-sm); margin-bottom: 18px; }
.style-item__name { font-size: 11.5px; letter-spacing: .28em; text-transform: uppercase; }

/* ============================================================
   6. 首页 · 作品（works-edit）
   ============================================================ */
.works-edit { padding: clamp(90px, 14vh, 200px) var(--pad); background: var(--bg); }
.works-edit__head { text-align: center; margin-bottom: clamp(70px, 11vh, 150px); }

.works-edit__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	grid-template-rows: auto auto;
	gap: clamp(16px, 2.2vw, 40px);
	max-width: 1500px;
	margin: 0 auto;
}

.works-edit__item { display: block; position: relative; }
.works-edit__item--main { grid-column: 1; grid-row: 1 / span 2; }
.works-edit__item--main .works-edit__media { height: 100%; min-height: 620px; aspect-ratio: auto; }
.works-edit__item--top { grid-column: 2; grid-row: 1; }
.works-edit__item--bottom { grid-column: 2; grid-row: 2; }

.works-edit__media { overflow: hidden; background: var(--photo); border-radius: var(--radius-md); aspect-ratio: 3/4; }
.works-edit__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-soft); }
.works-edit__item:hover .works-edit__media img { transform: scale(1.04); }

.works-edit__meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(20px, 3vh, 40px);
	color: #fff;
	z-index: 2;
	background: linear-gradient(0deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 70%);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	text-align: left;
}

.works-edit__name { font-size: 14px; font-weight: 300; letter-spacing: .3em; margin-bottom: 8px; }
.works-edit__cat { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }

.works-edit__more { text-align: center; margin-top: clamp(56px, 8vh, 90px); }

/* ============================================================
   7. 首页 · 收费（pricing）
   ============================================================ */
.pricing { background: var(--paper); text-align: center; padding: clamp(90px, 14vh, 200px) var(--pad); }
.pricing__head { margin-bottom: clamp(80px, 12vh, 150px); }

.pricing__grid {
	display: grid;
	grid-template-columns: repeat(var(--mooto-cols, 3), minmax(0, 1fr));
	gap: clamp(20px, 3vw, 60px);
	max-width: 1300px;
	margin: 0 auto clamp(56px, 8vh, 96px);
}

.pricing__item { position: relative; padding: clamp(46px, 6vh, 72px) 20px clamp(40px, 5vh, 60px); border-top: 1px solid rgba(10, 10, 10, .14); }
.pricing__type { font-size: 11px; letter-spacing: .4em; margin-right: -.4em; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(28px, 4vh, 44px); }

.pricing__num {
	font-family: var(--serif);
	font-size: clamp(46px, 5.8vw, 84px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--fg);
	margin-bottom: clamp(18px, 2.4vh, 26px);
}

.pricing__unit { font-family: var(--sans); font-size: 13px; letter-spacing: .16em; color: var(--soft); font-weight: 300; }

.pricing__note {
	font-size: 11.5px;
	line-height: 2;
	letter-spacing: .14em;
	color: var(--muted);
	max-width: 520px;
	margin: 0 auto;
}

/* ------------------------------------------------------------------
   价格「数字转动」
   首页收费区块（.pricing__num）与收费标准页（.pricing-card__price）共用。
   结构由 theme.js 组装：一份隐藏的原文当尺子 + 一组绝对定位的数字转轮。
   每个转轮是一条竖排的 0-9，整体 translateY 到底即停在目标数字上。
   ------------------------------------------------------------------ */
.numroll { position: relative; display: inline-block; }
.numroll__ghost { visibility: hidden; }
.numroll__roll { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

.numroll__slot {
	position: absolute;
	top: 0;
	overflow: hidden;
	text-align: center;
	/* 只在上下方向裁切：窗口比字符宽一点点，大号衬线数字不会被切边 */
}

.numroll__slot--static { line-height: inherit; }

.numroll__track { display: block; text-align: center; will-change: transform; }
.numroll__track > i {
	display: block;
	font-style: normal;
	letter-spacing: 0;
}

/* ============================================================
   8. 首页 · 动态（news 列表式）
   ============================================================ */
.news { background: var(--bg); padding: var(--section-y) var(--pad); }
.news__head { text-align: center; margin-bottom: clamp(56px, 8vh, 100px); }
.news__list { max-width: 980px; margin: 0 auto; }

.news__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 48px;
	padding: 36px 0;
	border-bottom: 1px solid var(--line);
}

.news__item:first-child { border-top: 1px solid var(--line); }
.news__date { flex: 0 0 auto; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.news__title { font-size: 15px; letter-spacing: .08em; text-align: right; line-height: 1.7; transition: opacity .3s ease; }
.news__item:hover .news__title { opacity: .62; }

/* ============================================================
   9. 预约咨询（首页/内页共用，原站重复了 4 次）
   ============================================================ */
.booking { text-align: center; background: var(--paper); padding: clamp(90px, 14vh, 200px) var(--pad); }
.booking--plain { background: var(--bg); }
.booking__kicker { margin-bottom: clamp(42px, 6vh, 72px); }

.booking__title {
	font-family: var(--serif);
	font-size: clamp(28px, 4vw, 58px);
	font-weight: 400;
	letter-spacing: .24em;
	margin-right: -.24em;
	margin-bottom: 40px;
}

.booking__text {
	font-size: 14px;
	line-height: 2.3;
	letter-spacing: .1em;
	color: var(--muted);
	max-width: 560px;
	margin: 0 auto clamp(56px, 8vh, 96px);
}

.booking__contact { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(48px, 8vw, 120px); }
.booking__contact dt { font-size: 10px; letter-spacing: .34em; margin-right: -.34em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.booking__contact dd { font-size: 13px; letter-spacing: .1em; line-height: 1.9; }
.booking__contact dd a:hover { opacity: .62; }

/* ★ 2026-10-08：区块下方那个可点的按钮。
   与 .contact-cta__btn / .news-cta__btn 同一套（56 高、胶囊、黑底白字、
   字距 .32em），全站的「行动按钮」只有一个长相。
   文字与链接都在后台「⑬ 预约咨询（全站共用）」里改；文字留空则整条不输出。 */
.booking__action { margin-top: clamp(46px, 7vh, 84px); }
.booking__btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 56px; padding: 0 clamp(40px, 5.5vw, 72px); border-radius: 100px; background: var(--fg); color: #fff; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; transition: background .35s ease, transform .3s ease; }
.booking__btn:hover { background: #1a1a1a; transform: translateY(-2px); }
.booking__btn svg { width: 16px; height: 16px; }

/* ============================================================
   10. 关于页
   ============================================================ */
.about-story { background: var(--bg); padding: var(--section-y) var(--pad); }
.about-story__inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.about-story__kicker { margin-bottom: clamp(36px, 5vh, 56px); }

.about-story__quote {
	font-family: var(--serif);
	font-size: clamp(22px, 3.2vw, 46px);
	font-weight: 400;
	line-height: 2;
	letter-spacing: .14em;
	margin-right: -.14em;
	margin-bottom: clamp(48px, 8vh, 90px);
}

.about-story__text {
	font-size: 14px;
	line-height: 2.45;
	letter-spacing: .08em;
	color: var(--soft);
	max-width: 760px;
	margin: 0 auto clamp(56px, 9vh, 110px);
	text-align: left;
}

/* 品牌故事配图：16:9 横框 + 圆角 + object-fit:cover（老的 .media 几何，从原站沿用）。
   ★ 2026-10-06 试过一版「不设图框」（去掉 .media 类 / aspect-ratio / data-parallax，
   想让透明底图原样铺开），当天访客看过之后要求**回退**，故恢复原样。
   那次实测留了两个结论，日后若有人再想动这里，先读这两条：
     ① 框是**四层叠**出来的，不是一层：.media 的 --photo(#f2f0ec) 底色 + overflow:hidden、
        .media > img 的 object-fit:cover + scale(1.12)、容器自己的 aspect-ratio:16/9、
        以及视差脚本给 [data-parallax] 里 img 强加的 scale(1.12) 平移（它靠 overflow:hidden
        兜底）。要去框必须四处一起去，少一处就露馅。
     ② img 挂了 srcset 的 w 描述符 + sizes 之后，浏览器会把 **sizes 的值当成这张图的
        名义固有宽**：一张 820px 宽的图在 1080 的槽里会被撑到 1080×1554。所以「原样显示」
        这件事在带 sizes 的 img 上不会自己成立，得额外钉 max-width。
   结论：这个位就当「横图取景框」用，配图请给 16:9 的横图；竖图/方图会被裁掉上下。 */
.about-story__media { width: min(1080px, 100%); margin: 0 auto; aspect-ratio: 16/9; border-radius: var(--radius-lg); }

.about-values { background: var(--paper); padding: clamp(90px, 14vh, 200px) var(--pad); }
.about-values__head { text-align: center; margin-bottom: clamp(70px, 11vh, 140px); }
.about-values__grid { display: grid; grid-template-columns: repeat(var(--mooto-cols, 3), minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); max-width: 1300px; margin: 0 auto; }
.about-value { text-align: center; padding: 0 clamp(0px, 1.5vw, 20px); }
.about-value__num { font-family: var(--serif); font-size: clamp(38px, 4.6vw, 64px); font-weight: 300; line-height: 1; color: var(--fg); margin-bottom: clamp(20px, 3vh, 32px); letter-spacing: -.02em; }
.about-value__name { font-family: var(--serif); font-size: clamp(18px, 1.8vw, 24px); letter-spacing: .2em; margin-right: -.2em; margin-bottom: clamp(18px, 2.4vh, 26px); }
.about-value__text { font-size: 13px; line-height: 2.3; letter-spacing: .06em; color: var(--soft); max-width: 340px; margin: 0 auto; }

/* ★ 「茉 / 棠 花语」板块（.about-bloom）已从关于页**整块移除** ——
   首页的 .bloom-edit 讲的是同一件事（茉：纯粹·细腻·忠贞 / 棠：热情·浪漫·坚韧），
   关于页再来一遍是重复，且它在手机上要占约两屏。
   访客原话：「再往下 茉 棠 花语这个板块也去掉吧，因为首页已经有过了」。
   结构备份在 templates/page-guanyu.html.bak_before_hero_img_and_bloom_removed，
   若日后要恢复，把下面这几条样式一并恢复：
     .about-bloom / __grid / __col / __char / __words / __desc / __media
   注：后台的 home_bloom_1_* / home_bloom_2_* 选项**仍然保留**，首页还在用。 */

.about-process { background: var(--paper); padding: clamp(90px, 14vh, 200px) var(--pad); }
.about-process__head { text-align: center; margin-bottom: clamp(70px, 11vh, 140px); }
.about-process__list { max-width: 900px; margin: 0 auto; position: relative; }
.about-process__list::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line); }
.about-process__item { position: relative; padding: 0 0 clamp(60px, 9vh, 110px) clamp(32px, 4vw, 58px); }
.about-process__item:last-child { padding-bottom: 0; }
.about-process__item::before { content: ''; position: absolute; left: -4px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--fg); }
.about-process__num { font-size: 10px; letter-spacing: .4em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.about-process__name { font-family: var(--serif); font-size: clamp(20px, 2.2vw, 30px); letter-spacing: .14em; margin-bottom: 16px; }
.about-process__text { font-size: 13px; line-height: 2.3; letter-spacing: .06em; color: var(--soft); max-width: 520px; }

/* 服务承诺（六条）—— 来源：聚龙《工艺介绍》p3「六大服务体系」，
   并入了 p4 流程里 .about-process 没讲到的节点（量房 / 签约与首付 /
   材料验收 / 3级5检 / VR 存档 / 隐蔽工程档案与保修卡）。
   ★ 底色纯白：它前一屏 .about-process 已经是 --paper 米白，
     再叠一层暖白会显脏（访客原话：「背景永远不要搞的很脏，就要白色」）。
   ★ 两栏而不是三栏：六条的标题更长（「3 级 5 检 · 720° 验收」），
     三栏会把标题挤出去。 */
.about-pact { background: var(--bg); padding: var(--section-y) var(--pad); }
.about-pact__head { text-align: center; margin-bottom: clamp(56px, 8vh, 110px); }
.about-pact__title { font-family: var(--serif); font-size: clamp(24px, 3.2vw, 42px); letter-spacing: .1em; margin-right: -.1em; }
.about-pact__grid {
	display: grid;
	grid-template-columns: repeat(var(--mooto-cols, 2), minmax(0, 1fr));
	gap: clamp(34px, 4.4vw, 72px) clamp(30px, 5vw, 96px);
	max-width: 1100px;
	margin: 0 auto;
}
.about-pact__item { padding-top: clamp(22px, 3vh, 32px); border-top: 1px solid var(--line); }
.about-pact__num { font-size: 10px; letter-spacing: .4em; color: var(--muted); margin-bottom: clamp(12px, 1.8vh, 18px); }
.about-pact__name { font-family: var(--serif); font-size: clamp(17px, 1.7vw, 22px); letter-spacing: .12em; margin-bottom: clamp(12px, 1.8vh, 18px); }
.about-pact__text { max-width: 460px; font-size: 13px; line-height: 2.3; letter-spacing: .06em; color: var(--soft); }

/* 窄屏：两栏收成一列，顶端细线改成行底细线 —— 六条读下来像一份条款清单 */
@media (max-width: 640px) {
	.about-pact__grid { grid-template-columns: 1fr; gap: 0; }
	.about-pact__item { padding-top: 0; padding-bottom: 26px; border-top: 0; border-bottom: 1px solid var(--line); }
	.about-pact__item:first-child { padding-top: 26px; border-top: 1px solid var(--line); }
}

.about-stats { background: var(--bg); padding: var(--section-y) var(--pad); }
.about-stats__grid { display: grid; grid-template-columns: repeat(var(--mooto-cols, 4), minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 56px); max-width: 1300px; margin: 0 auto; text-align: center; }
.about-stat__num { font-family: var(--serif); font-size: clamp(42px, 5.4vw, 76px); font-weight: 300; line-height: 1; letter-spacing: -.02em; margin-bottom: clamp(14px, 2vh, 22px); }
.about-stat__num span { font-size: .6em; }
.about-stat__label { font-size: 11px; letter-spacing: .34em; margin-right: -.34em; text-transform: uppercase; color: var(--muted); }

/* ============================================================
   11. 作品赏析页
   ============================================================ */
.works-hero { padding-top: calc(var(--nav-h) + clamp(60px, 9vh, 110px)); padding-bottom: clamp(40px, 6vh, 70px); text-align: center; }
.works-hero__inner { padding: 0 var(--pad); }
.works-hero__sub { font-size: 12px; letter-spacing: .44em; margin-right: -.44em; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(26px, 4vh, 44px); }
.works-hero__title { font-family: var(--serif); font-size: clamp(32px, 5.6vw, 78px); font-weight: 400; line-height: 1.35; letter-spacing: .14em; margin-right: -.14em; margin-bottom: clamp(28px, 4.5vh, 48px); }
.works-hero__desc { font-size: 13.5px; line-height: 2.3; letter-spacing: .08em; color: var(--soft); max-width: 620px; margin: 0 auto; text-align: left; }

/* 筛选状态条：平时不存在，点了卡片上的风格标签才浮出来。
   它取代了原来顶部那条筛选器 —— 分类不再占着页面等被使用，
   只在你主动要的时候才现身，而且给一个显眼的出口，
   不会让人陷在一个「不知道被筛过」的列表里。 */
.works-state {
	max-width: 1500px;
	margin: 0 auto clamp(26px, 3.6vh, 40px);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px 20px;
}

.works-state[hidden] { display: none; }

.works-state__text { margin: 0; font-size: 12px; letter-spacing: .16em; color: var(--soft); }
.works-state__name { color: var(--fg); }
.works-state__count { margin-left: .8em; color: var(--muted); }

.works-state__clear {
	flex: 0 0 auto;
	font-size: 11px;
	letter-spacing: .2em;
	color: var(--muted);
	padding-bottom: 2px;
	border-bottom: 1px solid var(--line);
	transition: color .3s ease, border-color .3s ease;
}

.works-state__clear:hover { color: var(--fg); border-color: var(--fg); }

/* 「加载更多」不是页码条。
   页码是目录的语言，它把人从流里拽出来去数页；按钮是信息流的语言，
   点一下只是继续往下铺。全部卡片本来就都在 HTML 里（SEO 友好），
   JS 只决定一次露出多少张。 */
.works-more { display: flex; justify-content: center; padding: clamp(44px, 6.5vh, 76px) 0 0; }
.works-more[hidden] { display: none; }

.works-more__btn {
	padding: 13px clamp(30px, 4vw, 52px);
	font-size: 11px;
	letter-spacing: .3em;
	margin-right: -.3em;
	text-transform: uppercase;
	color: var(--muted);
	border: 1px solid var(--line);
	border-radius: 100px;
	transition: color .35s ease, border-color .35s ease;
}

.works-more__btn:hover { color: var(--fg); border-color: var(--line-strong); }

/* 到底了：从按钮退化成一行安静的字，别再假装可以点 */
.works-more__btn.is-end {
	padding: 0;
	border-color: transparent;
	letter-spacing: .26em;
	margin-right: -.26em;
	opacity: .6;
	cursor: default;
}

.works-more__btn.is-end:hover { color: var(--muted); }

/* 风格索引：平时只占一行，想主动看全貌时才打开。
   这是「分类不罗列、但依然能被看到」的落点 —— 用原生 <details>，
   不需要任何 JS，也就不会因为脚本没跑到而失效。 */
.works-index { max-width: 1500px; margin: 0 auto; padding: 0 var(--pad) clamp(64px, 9vh, 116px); }

.works-index__box { border-top: 1px solid var(--line); padding-top: clamp(26px, 3.8vh, 42px); }

.works-index__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 13px;
	font-size: 12px;
	letter-spacing: .22em;
	color: var(--muted);
	cursor: pointer;
	list-style: none;
	transition: color .35s ease;
}

.works-index__toggle::-webkit-details-marker { display: none; }
.works-index__toggle:hover { color: var(--fg); }

/* 一个细加号，展开后转成减号 */
.works-index__toggle-mark { position: relative; flex: 0 0 auto; width: 11px; height: 11px; }

.works-index__toggle-mark::before,
.works-index__toggle-mark::after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 11px;
	height: 1px;
	margin-top: -.5px;
	background: currentColor;
	transition: transform .35s ease;
}

.works-index__toggle-mark::after { transform: rotate(90deg); }
.works-index__box[open] .works-index__toggle-mark::after { transform: rotate(0deg); }

/* 2026-10 起这里是**扁平标签云**，不再分组。
   原来的 .works-index__groups（4 列栅格）+ .works-index__family（大类标题）
   随「拆掉层级，全部平铺」一起删了 —— 留着它们只会让人以为还有层级。

   ★ 所以 .works-index__styles 现在是独立的：它以前靠 .works-index__groups
     的 margin-top 和 <p class="works-index__family"> 的 margin-bottom 撑开，
     两层父级一去掉，标签云会直接贴在 summary 下沿。间距必须自己带。 */
.works-index__styles {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin: clamp(30px, 4.4vh, 52px) 0 0;
}

.works-index__style {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	font-size: 12.5px;
	letter-spacing: .1em;
	color: var(--soft);
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	transition: color .3s ease, border-color .3s ease;
}

.works-index__style:hover { color: var(--fg); border-bottom-color: var(--fg); }
.works-index__style.is-active { color: var(--fg); border-bottom-color: var(--fg); }
.works-index__style em { font-style: normal; font-size: 9.5px; color: var(--muted); transform: translateY(-2px); }

/* 暂时没有案例的风格：保留名字（它是「我们能做什么」的说明），但不可点 */
.works-index__style.is-empty { color: var(--muted); opacity: .5; }

/* 精选案例：三联竖图。
   原来是 aspect-ratio: 21/9 的超宽幅，竖图放进去只剩 32% 可见；
   改成三张 3:4 竖图并排拼成一条宽幅 —— 保留跨页气势，同时零裁切。 */
.works-feature { padding: 0 var(--pad) clamp(70px, 10vh, 130px); }
.works-feature__item[hidden] { display: none; }

/* 换个分类时三联图整组换掉 —— 大图面积最大，光靠「啪」一下切换很容易被忽略，
   给一个 0.5s 的轻微上浮，视线才跟得上。首屏那次不加（入场由 .reveal 负责）。 */
.works-feature__item.is-swap { animation: mooto-banner-swap .5s var(--ease-soft); }

@keyframes mooto-banner-swap {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.works-feature__item.is-swap { animation: none; }
}

/* 用 flex 而不是 grid：某组只有 2 条时能自动变成 50/50 平分，
   不会在右边留一个空洞。 */
.works-feature__inner {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(10px, 1.4vw, 24px);
	max-width: 1500px;
	margin: 0 auto;
}

.works-feature__figure {
	position: relative;
	display: block;
	flex: 1 1 0;
	min-width: 0;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--photo);
}

.works-feature__figure img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.8s var(--ease-soft); }
.works-feature__figure:hover img { transform: scale(1.09); }
.works-feature__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .24) 0%, rgba(0, 0, 0, 0) 46%); opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.works-feature__figure:hover .works-feature__overlay { opacity: 1; }

.works-feature__content { flex: 1 1 100%; text-align: center; padding-top: clamp(26px, 4vh, 50px); color: var(--fg); }
.works-feature__tag { display: block; font-size: 10px; letter-spacing: .34em; margin-right: -.34em; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(14px, 2vh, 20px); }

/* 三联图上的「推荐」签：三张图**各一枚**，压在图左上角。
   ★ 为什么是三枚、而不是说明行里的一枚：
     这一组是「被挑出来的三套」—— 标记要落在**每一件**上。读者扫过去
     看见三枚签，才读得出「这三件都在推荐之列」；写进下面那条说明行，
     说的就只是「这一组是什么」，是另一件事。
   ★ 形制沿用卡片上那枚风格签（.work-item__badge）：胶囊 + 内白描边 +
     .18em 字距 —— 同一套语言，读者不用重新学一种。区别只在颜色：
     卡片上那枚是灰的（分类，安静），这枚是朱砂的（背书，要被看见）。
   ★ 朱砂 #B23A2A 是本站**唯一**的点缀色（刊物版里的 --m-dot），不新开
     强调色。白字压在上面对比度 5.95:1（过小字 4.5:1 门槛）。
     底色用**实色**而不是卡片签那种半透明：照片深浅不可控，
     半透明底在三张不同的照片上会算出三种不同的对比度。
   ★ 面积必须停在一枚小签以内。点缀一旦铺开（加边框、放大字号、
     加第二枚），页面就从「克制」滑向「促销」。三枚合计约占三联
     总面积的 0.7%。
   ★ 尺寸按「图宽」分档而不是视口：桌面每张约 347px，签约占 13%；
     900px 以下每张收到 110px 上下 —— 那一档跟着收一档（见 900px 断点）。 */
.works-feature__pick {
	position: absolute;
	top: 11px;
	left: 11px;
	z-index: 2;
	display: inline-block;
	padding: 6px 10px 5px;
	font-size: 11px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .18em;
	text-indent: .18em;
	white-space: nowrap;
	color: #fff;
	background: #B23A2A;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}
.works-feature__name { font-family: var(--serif); font-size: clamp(22px, 3vw, 40px); font-weight: 400; letter-spacing: .14em; margin-right: -.14em; margin-bottom: clamp(10px, 1.6vh, 16px); }
.works-feature__name a { color: inherit; transition: opacity .35s ease; }
.works-feature__name a:hover { opacity: .72; }
.works-feature__desc { font-size: 13px; line-height: 2; letter-spacing: .06em; color: var(--soft); max-width: 620px; margin: 0 auto clamp(18px, 2.6vh, 28px); }
.works-feature__palette { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.works-feature__palette i { display: block; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(10, 10, 10, .1); }
.works-feature__palette em { font-style: normal; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); margin-left: 6px; }

/* 作品网格：统一 3:4 竖版编辑栅格。
   改造前是 12 栅格 + 6 个硬编码版式位（4:3 / 3:4 / 3:4 / 16:11 / 5:4 / 4:3），
   第 7 张循环回第 1 位，60 套案例等于同一套拼贴重复 10 遍。
   现在是一套比例、一套节奏：桌面 3 列、手机 2 列，秩序感本身就是奢侈品牌的语言。 */
.works-gallery { padding: 0 var(--pad) clamp(90px, 14vh, 180px); }

/*
 * 作品页分页条：按钮是 JS 生成的 <button>，视觉直接沿用 .pagination .page-numbers（base.css）。
 * 这里只补 button 需要的重置 —— 原生按钮自带背景、边框和字体，不重置会很难看。
 */
/* base.css 里 .pagination 是 display: flex —— 会压过 hidden 属性。
   只有一页时 JS 会把 pager.hidden 设回 true，少了这条首屏就会挂着一个空的分页条。 */
.pagination[hidden] { display: none; }

.pagination button.page-numbers {
	font-family: inherit;
	background: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.pagination button.page-numbers:hover { color: var(--fg); border-color: var(--line-strong); }

/* 省略号：只占位，别让它看起来像一个能点的页码 */
.pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
	pointer-events: none;
}

/* ★ 列宽用 minmax(0, 1fr) 而不是 1fr。
   1fr == minmax(auto, 1fr)，下限是 min-content —— 只要卡片里有一处
   不可断行的内容（下面那个配色名就踩过），它就能把整列顶宽，
   进而把整页顶出横向滚动条（320px 下实测溢出 61px）。
   下限给 0，列宽就永远等于容器分出来的那点宽度，内容该折就折。 */
.works-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(18px, 2.2vw, 40px);
	row-gap: clamp(40px, 6vh, 78px);
	align-items: start;
	max-width: 1500px;
	margin: 0 auto;
}

/* min-width: 0 是给 grid / flex 的「自动最小尺寸」上保险：
   没有它，卡片里任何 nowrap 的内容都能把整列顶宽。 */
.work-item { display: block; position: relative; min-width: 0; }
.work-item.is-hidden { display: none; }

/* 筛选后重排栅格位次时，让整个网格轻轻落一下。
   注意：动画只加在容器上，不能加在卡片上 ——
   卡片的入场用的是 animation-timeline: view()（滚动驱动），
   在同一个元素上再挂一个 animation 会把那个时间轴顶掉。 */
.works-gallery__grid.is-reflow { animation: mooto-grid-settle .42s var(--ease-soft); }

@keyframes mooto-grid-settle {
	from { transform: translateY(10px); }
	to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.works-gallery__grid.is-reflow { animation: none; }
}

.work-item__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--photo);
	aspect-ratio: 3 / 4;
}

.work-item__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.8s var(--ease-soft); will-change: transform; }
.work-item:hover .work-item__media img { transform: scale(1.11); }

/* 序号：60 套案例 + 筛选之后会跳号，反而制造疑问，列表里去掉。 */
.work-item__index { display: none; }

.work-item__hover { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .24) 0%, rgba(0, 0, 0, 0) 44%); opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.work-item:hover .work-item__hover { opacity: 1; }

/* 作品标签签：压在图片左上角的一**撮**签（可能不止一枚）。
   ----------------------------------------------------------------
   ★ 为什么从「一枚」变成「一撮」：
     用户的口径是「我们提供的案例大部分都是混搭，有很多流行元素……
     这些东西是不能单单以风格来论的」。既然一件作品本来就同时占好几样
     （中古风 + 包豪斯），把标签压成一枚就等于每次都在撒谎 ——
     读者记住的只有那个被选中的词，其余特色全部消失。
     所以数量随作品自己走，可能一枚、可能三枚（上限写在 case-item.php）。

   ★ 为什么必须给它们一块底色，而不能只是「白字 + 描边」：
     照片内容完全不可控 —— 这 57 套里既有近乎全白的民宿床品，也有深色木作。
     白字直接压上去，遇到亮部就消失。所以底色不是装饰，是**可读性成本**：
       · rgba(20,17,15,.58) 铺底 —— 最坏情况（照片纯白 #FFF）合成出 #777573，
         线性亮度 0.179，与白字对比度 **4.58:1**，过小字 4.5:1 的门槛。
         （.52 时只有 3.77:1，不够；这一档是按计算定的，不是凭手感。）
       · backdrop-filter 模糊底下的照片 —— 让「照片的花纹」不再干扰字的边缘。
         模糊保留平均亮度，所以它不改变上面的对比度计算，只提升边缘清晰度。
       · 内侧 1px 白描边 —— 底色在深色照片上会「消失」，那圈白线负责把签的
         轮廓留住；反过来在浅色照片上它看不见，也无所谓。
   ★ 为什么是胶囊形（999px）而不是方形：方形签在这套「细线 + 大字距」的版式里
     会显得像贴纸；胶囊更软，也更像「标签」本身。
   ★ 字距 .18em 是跟着站内既有语汇走的（.work-item__name / kicker 都在 .12–.18em
     之间）。行末多出来的那半个字距会把整枚签视觉上推左，所以补一个等量的
     text-indent 顶回来。
   ★ 尺寸按卡片宽度分档，不是按视口：卡片在手机上是 166px 宽，
     签占 1/3 就已经很显眼了。所以手机端收字号 + 收字距 + 收内边距，
     让它落在卡片宽度的 ~30% 以内。
   ★ 定位搬到外层 .work-item__badges 上：多层 flex 里，绝对定位只能挂在一个
     容器上，签自己必须是普通流内元素，否则多枚会叠在同一处。 */

/* 外层：定位 + 换行都归它。
   max-width 减掉两边各 11px 的边距，签多了就在这宽度内折行 ——
   不设这个上限，长签会一路顶出照片右边界。 */
.work-item__badges {
	position: absolute;
	top: 11px;
	left: 11px;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 5px;
	max-width: calc(100% - 22px);
}

.work-item__badge {
	display: inline-block;
	max-width: 100%;
	padding: 6px 10px 5px;
	font-size: 11px;
	line-height: 1;
	letter-spacing: .18em;
	text-indent: .18em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #fff;
	background: rgba(20, 17, 15, .58);
	border-radius: 999px;
	-webkit-backdrop-filter: blur(10px) saturate(1.12);
	backdrop-filter: blur(10px) saturate(1.12);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
	transition: background-color .3s ease, box-shadow .3s ease;
}

.work-item:hover .work-item__badge { background: rgba(20, 17, 15, .70); }

/* 正在被使用的标签。和页尾索引里那一条同时点亮 —— 让「现在看的是哪个标签」
   这件事在流里和页尾都说得通（JS 的 syncActive() 按 a[href^="#style="] 统一处理，
   所以这里不需要额外挂类）。 */
.work-item__badge.is-active { background: rgba(20, 17, 15, .82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .46); }

.work-item__info { padding-top: clamp(14px, 1.6vh, 19px); min-width: 0; }

/* 图片上盖一层透明链接，负责「点图进详情」。
   为什么不把整张卡做成一个 <a>：链接不能嵌套链接，
   而风格标签也必须是链接 —— 两者只能平级。 */
.work-item__open { position: absolute; inset: 0; }

.work-item__name {
	font-family: var(--serif);
	font-size: clamp(16px, 1.5vw, 21px);
	font-weight: 400;
	letter-spacing: .12em;
	margin: 0;
	/* 中文标题逐字可断，但将来若出现长英文名，它会把列撑破 ——
	   留一个兜底断词。 */
	overflow-wrap: break-word;
}

.work-item__name a { color: inherit; transition: opacity .35s ease; }
.work-item:hover .work-item__name a { opacity: .68; }

/* 文字行：名称下面只留配色（色点 + 配色名）。
   风格名**不在这里**了 —— 它压成图片左上角那枚小签（.work-item__badge）。
   为什么不是「图上一份、下面再一份」：同一个词在一张卡里出现两次，
   读起来就像排版漏了删。所以是移过去，不是加一份。 */
.work-item__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 16px; margin-top: clamp(8px, 1vh, 12px); }

.work-item__color { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; letter-spacing: .12em; color: var(--muted); }

.work-item__palette { display: inline-flex; flex: 0 0 auto; gap: 2px; }
.work-item__palette i { display: block; width: 11px; height: 11px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); }

/* 配色名。它只是 .work-item__color 里的一截文字，本身不需要重设字号／颜色，
   但宽屏下必须「不断行」—— 色点 + 名称是一枚整体，被折断成两行就不像标签了。
   ★ 但「不断行」在排版上是一条**硬约束**：它把卡片的 min-content 钉在 161.44px，
     而 grid 的 1fr 下限正是 min-content —— 窄屏（≤375px）两列会被它一起顶宽，
     整页横向可滑。所以窄屏下必须放开，见手机端媒体查询里的同名规则。 */
.work-item__color-name { white-space: nowrap; }

/* ---- 色彩词签 ----
   图下那行 = 色板方块 + 词签。词签是取色算出来的（暖木 / 砖红 / 深棕…），
   每一枚都是一个入口：点它就把整条信息流收窄到这个色彩。

   ★ 为什么做成描边胶囊，而不是像图左上角那枚风格签一样做实底：
     风格签压在照片上，照片深浅不一，必须实底才读得清；
     词签落在白底上，实底会变成一块块灰斑 —— 而这行本来就有 4 个色块，
     再加 4 个实底签，卡片下半截就全是方块了。描边只占一条线。

   ★ 替换掉的是原来那句「砖红 · 深棕」的组合名（.work-item__color-name）。
     组合名只能整句读，拆成词之后每个词自己成了入口。
     那条规则先留着：宽屏的「不断行」约束和几处窄屏档位都还挂在它上面，
     单独删容易漏，等这批样式稳一轮再一起清。
*/
.work-item__tones { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; }

.work-item__tone {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px 2px;
	border: 1px solid var(--line);
	border-radius: 100px;
	font-size: 11.5px;
	letter-spacing: .12em;
	text-indent: .12em;
	color: var(--muted);
	white-space: nowrap;
	transition: color .3s ease, border-color .3s ease;
}

.work-item__tone:hover,
.work-item__tone:focus-visible { color: var(--fg); border-color: var(--line-strong); }

/* 正在筛的那个词。和图上的风格签共用 .is-active 这个名字，
   所以 syncActive() 一处点亮，两种签都跟着亮。 */
.work-item__tone.is-active {
	color: var(--fg);
	border-color: var(--line-strong);
	background: rgba(10, 10, 10, .04);
}

/* ============================================================
   信息流的「版面节奏」—— 把 57 张等权卡片变成有主次的版面。
   ============================================================
   改造前是 57 张同尺寸、同比例、同密度的卡片一路铺下去：读者滑到第 6 张
   就完成了对整个站的抽样，之后每一屏都是同一句话的第 N 遍 —— 没有主次
   就没有叙事，没有叙事就没有往下滑的理由。

   只做一件事：主角卡 —— 每 8 张一节，每节第 1 张跨两列，内部改成「左图右文」。
   （原来还有第二件事「节间分隔：细线 + 这一节跨了几种风格」，已按用户要求删除；
     分隔块连同它的样式和 JS 生成逻辑一起走了，别再加回来。）

   ★ 为什么主角是「左图右文」，而不是「把图拉宽裁成横幅」：
     素材是 3:4 竖版。放进 4:3 的框要裁掉 44%，放进 16:9 要裁 66%。
     案例图的主体（窗、桌、床）大多在画面中部偏上，裁掉一半很容易切到
     主体，而这 57 张我无法逐张确认重心。左右分栏之后图片按原比例完整
     呈现，零裁切；右边那块留白本身就是层级感。

   ★ 为什么分栏比例是 1.3fr / 0.7fr：
     内部 column-gap 取的就是网格的列间距，所以主角卡内部可用宽度正好是
     2 倍列宽 —— 图片占比 0.65 就等于「一张普通卡宽的 1.3 倍」，是精确值。
     1fr 1fr 时图片正好等于一张普通卡，主角的图并不会更大，只是旁边多出
     一块文字，层级不够；再往上加（比如 1.5fr）图片会高到 800px 以上，
     而文字区被压到 200px 以下，配色那一行就放不下了。
   ============================================================ */

.work-item.is-wide {
	grid-column: span 2;
	display: grid;
	grid-template-columns: 1.3fr .7fr;
	column-gap: clamp(18px, 2.2vw, 40px);
	align-items: center;
}

.work-item.is-wide .work-item__media { grid-column: 1; }
/* 图注栏沉到图片下沿，与图片底边对齐。
   居中的话那块文字会在 654px 高的图旁边「悬在半空」，看起来像没排完；
   沉底之后它读起来就是一条图注，上面的留白也就成了有意的留白。 */
.work-item.is-wide .work-item__info { grid-column: 2; padding-top: 0; align-self: end; }

/* 名称上方一条短横线。它是这块文字区唯一的装饰 ——
   高级来自克制，不来自加东西。 */
.work-item.is-wide .work-item__info::before {
	content: '';
	display: block;
	width: 46px;
	height: 1px;
	background: var(--line-strong);
	margin-bottom: clamp(16px, 2.2vh, 26px);
}

/* 主角卡的右侧是一块「图注栏」，不是普通卡的信息条 ——
   它旁边站着 700px 高的图，按普通卡的字号放两行字会显得像「信息没加载出来」。
   所以名称放到 33px 级、标签改竖排、色卡放大。
   色卡放大这条是复用案例详情页本来就有的「色彩档案」语汇，
   不是新发明的装饰。 */
.work-item.is-wide .work-item__name { font-size: clamp(22px, 2.3vw, 33px); letter-spacing: .16em; }
.work-item.is-wide .work-item__tags { flex-direction: column; align-items: flex-start; gap: clamp(14px, 2.1vh, 22px); margin-top: clamp(18px, 2.6vh, 30px); }
/* 主角卡的图更大（约 530px 宽），签跟着放大一档，并把边距推开一点 ——
   同样的 11px 放在一张大图上会显得「贴边又怯」。 */
.work-item.is-wide .work-item__badges { top: 15px; left: 15px; gap: 6px; justify-content: flex-start; }
.work-item.is-wide .work-item__badge { font-size: 12px; padding: 7px 12px 6px; }
.work-item.is-wide .work-item__color { font-size: 12.5px; gap: 9px; }
/* 词签在主角卡里跟着放大一档，理由和上面的风格签一样：同样的 11.5px
   放在一张 530px 宽的大图下面会显得「小气又贴边」。 */
.work-item.is-wide .work-item__tones { gap: 6px; }
.work-item.is-wide .work-item__tone { font-size: 12.5px; letter-spacing: .1em; text-indent: .1em; padding: 4px 11px 3px; }
.work-item.is-wide .work-item__palette { gap: 4px; }

/* ★ 色卡尺寸有一个硬上限：它和图注栏同宽，而宽屏下配色名是「不断行」的
   （见上面 .work-item__color-name 的注释）。实测 1024px 时文字区只有
   207px，而「4 个色卡 + 间距 + 配色名」要占 194px —— 再大就会顶出卡片
   右边界，形成一个 .is-wide 内部的溢出。这里留 13px 余量。 */
.work-item.is-wide .work-item__palette i { width: 22px; height: 22px; border-radius: 4px; }

/* ★ 这里原本有一套「节间分隔」样式（works-inter / __rule / __meta 三个选择器）：
   每 8 张划一道短横线 + 一行「N 套 · 跨 N 种风格」。
   已整体删除 —— 卡片流不再切节，也就不需要分隔块。
   （配套的 JS 生成逻辑在 assets/js/theme.js 里也一起删了，两处必须同步，
   否则会剩一堆没有样式、贴在网格末尾的裸节点。） */



/* 色彩档案（案例详情页）。
   它存在的理由是仪式感 —— 让人觉得自己被认真对待。思路来自 iPhone 官网的颜色陈列。
   但仪式感来自排版（标题、留白、居中、衬线字），不来自把色块放大到占满屏。
   所以：4 个 64px 方块横排 + 色值当注解 + 衬线配色名 + 一句居中说明。
   手机端一整块约 190px（原来 560px），但它重新「像一个档案」了。 */
.case-palette {
	max-width: 1300px;
	margin: 0 auto clamp(58px, 8vh, 100px);
	padding: 0 var(--pad);
	text-align: center;
}

.case-palette__kicker { margin: 0; font-size: 11px; letter-spacing: .44em; margin-right: -.44em; text-transform: uppercase; color: var(--muted); }
.case-palette__en { margin: 11px 0 0; font-size: 10px; letter-spacing: .3em; margin-right: -.3em; text-transform: uppercase; color: var(--muted); opacity: .68; }

/* 用 flex 居中而不是 grid：色卡数量是后台随手填的（目前都是 4 个），
   3 个不该缩水、5 个不该被挤成「4 + 1」两行 —— flex 换行后仍是整行居中，
   任何数量都不会出现孤零零落在左边的方块。 */
.case-palette__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin: clamp(26px, 3.8vh, 40px) auto 0;
}

.case-swatch { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; margin: 0; }
.case-swatch__chip { display: block; width: 64px; height: 64px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); }
.case-swatch__hex { margin-top: 12px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.case-palette__label {
	margin: clamp(26px, 3.6vh, 40px) 0 0;
	font-family: var(--serif);
	font-size: clamp(17px, 1.8vw, 23px);
	font-weight: 400;
	letter-spacing: .14em;
}

.case-palette__desc { margin: clamp(12px, 1.6vh, 18px) auto 0; max-width: 520px; font-size: 13px; line-height: 2.2; letter-spacing: .06em; color: var(--soft); }

/* 色彩档案 */
.works-color { background: var(--paper); padding: clamp(90px, 14vh, 200px) var(--pad); }
.works-color__head { text-align: center; margin-bottom: clamp(60px, 9vh, 120px); }
.works-color__desc { font-size: 13px; line-height: 2.2; letter-spacing: .08em; color: var(--soft); max-width: 560px; margin: clamp(28px, 4vh, 44px) auto 0; text-align: left; }
.works-color__grid { display: grid; grid-template-columns: repeat(var(--mooto-cols, 3), minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); max-width: 1300px; margin: 0 auto; }

.color-card { display: flex; flex-direction: column; }
.color-card__swatch { display: flex; height: clamp(84px, 10vw, 140px); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: clamp(22px, 3vh, 32px); }
.color-card__swatch span { flex: 1; transition: flex .6s var(--ease-soft); }
.color-card__swatch span:hover { flex: 1.6; }
.color-card__name { font-family: var(--serif); font-size: clamp(17px, 1.7vw, 22px); letter-spacing: .14em; margin-bottom: 12px; }
.color-card__meta { font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.color-card__text { font-size: 12.5px; line-height: 2.1; letter-spacing: .05em; color: var(--soft); }

/* ============================================================
   12. 收费标准页
   ============================================================ */
.pricing-detail { background: var(--bg); padding: clamp(70px, 10vh, 150px) var(--pad) clamp(90px, 14vh, 200px); }
.pricing-detail__grid { display: grid; grid-template-columns: repeat(var(--mooto-cols, 3), minmax(0, 1fr)); gap: clamp(20px, 3vw, 50px); max-width: 1300px; margin: 0 auto; }

.pricing-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(40px, 5.5vh, 64px) clamp(24px, 2.4vw, 40px) clamp(36px, 4.5vh, 52px);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--bg);
	transition: border-color .4s ease, transform .4s ease, box-shadow .4s ease;
}

.pricing-card:hover { border-color: var(--line-strong); transform: translateY(-4px); box-shadow: 0 18px 48px rgba(10, 10, 10, .06); }
.pricing-card--featured { background: var(--paper); border-color: rgba(10, 10, 10, .2); }

.pricing-card__badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 7px 18px;
	border-radius: 100px;
	background: var(--fg);
	color: #fff;
	font-size: 9.5px;
	letter-spacing: .3em;
	text-transform: uppercase;
	white-space: nowrap;
}

.pricing-card__type { font-size: 11px; letter-spacing: .4em; margin-right: -.4em; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(24px, 3.2vh, 38px); text-align: center; }
.pricing-card__price { font-family: var(--serif); font-size: clamp(46px, 5.6vw, 78px); font-weight: 300; line-height: 1; letter-spacing: -.02em; color: var(--fg); text-align: center; margin-bottom: clamp(16px, 2.2vh, 24px); }
.pricing-card__unit { font-family: var(--sans); font-size: 13px; letter-spacing: .16em; color: var(--soft); font-weight: 300; }
.pricing-card__line { height: 1px; background: var(--line); margin: clamp(28px, 3.8vh, 42px) 0; }
.pricing-card__list { display: flex; flex-direction: column; gap: clamp(14px, 1.8vh, 20px); margin-bottom: clamp(34px, 4.5vh, 50px); flex: 1; }
.pricing-card__list li { position: relative; padding-left: 24px; font-size: 13px; line-height: 1.85; letter-spacing: .05em; color: var(--soft); }
.pricing-card__list li::before { content: ''; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--fg); opacity: .5; }

.pricing-card__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 52px;
	border-radius: 100px;
	border: 1px solid var(--fg);
	background: var(--fg);
	color: #fff;
	font-size: 11px;
	letter-spacing: .28em;
	text-transform: uppercase;
	transition: background .35s ease, color .35s ease;
}

.pricing-card__btn:hover { background: transparent; color: var(--fg); }
.pricing-card__btn svg { width: 16px; height: 16px; }

.pricing-scope { background: var(--paper); padding: clamp(90px, 14vh, 200px) var(--pad); }
.pricing-scope__head { text-align: center; margin-bottom: clamp(70px, 11vh, 140px); }
.pricing-scope__grid { display: grid; grid-template-columns: repeat(var(--mooto-cols, 4), minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 44px); max-width: 1400px; margin: 0 auto; }
.scope-item { padding: clamp(32px, 4vh, 48px) clamp(20px, 2vw, 28px); border-top: 1px solid rgba(10, 10, 10, .14); }
.scope-item__num { font-size: 10px; letter-spacing: .4em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.scope-item__name { font-family: var(--serif); font-size: clamp(17px, 1.7vw, 22px); letter-spacing: .14em; margin-bottom: 16px; }
.scope-item__text { font-size: 12.5px; line-height: 2.1; letter-spacing: .05em; color: var(--soft); }

.pricing-deliver { background: var(--bg); padding: clamp(90px, 14vh, 200px) var(--pad); }
.pricing-deliver__head { text-align: center; margin-bottom: clamp(70px, 11vh, 140px); }
.pricing-deliver__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 5vw, 90px); max-width: 1300px; margin: 0 auto; align-items: center; }
.pricing-deliver__media { aspect-ratio: 4/3; border-radius: var(--radius-md); }
.pricing-deliver__list { display: flex; flex-direction: column; gap: clamp(22px, 3vh, 32px); }
.pricing-deliver__list li { display: flex; gap: 18px; align-items: flex-start; }
.pricing-deliver__check { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 3px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--fg); }
.pricing-deliver__check svg { width: 11px; height: 11px; color: #fff; }
.pricing-deliver__info dt { font-family: var(--serif); font-size: clamp(16px, 1.7vw, 20px); letter-spacing: .12em; margin-bottom: 8px; }
.pricing-deliver__info dd { font-size: 13px; line-height: 2.1; letter-spacing: .05em; color: var(--soft); }

.pricing-faq { background: var(--paper); padding: clamp(90px, 14vh, 200px) var(--pad); }
.pricing-faq__head { text-align: center; margin-bottom: clamp(60px, 9vh, 110px); }

.pricing-faq__note {
	max-width: 820px;
	margin: 0 auto clamp(56px, 8vh, 90px);
	padding: clamp(28px, 4vh, 44px) clamp(24px, 3vw, 40px);
	border: 1px solid rgba(10, 10, 10, .12);
	border-radius: var(--radius-md);
	background: var(--bg);
}

.pricing-faq__note dt { font-size: 10px; letter-spacing: .4em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.pricing-faq__note dd { font-size: 13px; line-height: 2.3; letter-spacing: .06em; color: var(--soft); }
.pricing-faq__list { max-width: 900px; margin: 0 auto; }
.pricing-faq__item { padding: clamp(28px, 4vh, 40px) 0; border-bottom: 1px solid var(--line); }
.pricing-faq__item:first-child { border-top: 1px solid var(--line); }
.pricing-faq__q { font-family: var(--serif); font-size: clamp(16px, 1.8vw, 21px); letter-spacing: .1em; margin-bottom: 14px; }
.pricing-faq__a { font-size: 13px; line-height: 2.2; letter-spacing: .06em; color: var(--soft); max-width: 760px; }

/* ============================================================
   13. 行业动态页
   ============================================================ */
/* 页首（v1.0.4 补：此前只有 .page-hero 一套，本页用的是 .news-hero，
   样式缺失导致页首文字挤在一起、与导航贴边。） */
.news-hero {
	padding-top: calc(var(--nav-h) + clamp(60px, 9vh, 110px));
	padding-bottom: clamp(40px, 6vh, 70px);
	text-align: center;
}
.news-hero__inner { padding: 0 var(--pad); }
.news-hero__sub {
	font-size: 12px;
	letter-spacing: .44em;
	margin-right: -.44em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: clamp(26px, 4vh, 44px);
}
.news-hero__title {
	font-family: var(--serif);
	font-size: clamp(32px, 5.6vw, 78px);
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: .14em;
	margin-right: -.14em;
	margin-bottom: clamp(28px, 4.5vh, 48px);
}
.news-hero__desc {
	font-size: 13.5px;
	line-height: 2.3;
	letter-spacing: .08em;
	color: var(--soft);
	max-width: 620px;
	margin: 0 auto;
	text-align: left;
}

.news-main { padding: clamp(40px, 6vh, 70px) var(--pad) clamp(90px, 14vh, 180px); }
.news-main__inner { max-width: 1200px; margin: 0 auto; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.6vw, 56px); }

.news-card { display: flex; flex-direction: column; position: relative; }
.news-card__media { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--photo); aspect-ratio: 4/3; margin-bottom: clamp(20px, 2.6vh, 28px); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s var(--ease-soft); }
.news-card:hover .news-card__media img { transform: scale(1.11); }
.news-card__date { font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.news-card__title { font-family: var(--serif); font-size: clamp(17px, 1.8vw, 22px); font-weight: 400; letter-spacing: .1em; line-height: 1.7; margin-bottom: 14px; transition: opacity .35s ease; }
.news-card:hover .news-card__title { opacity: .7; }
.news-card__text { font-size: 13px; line-height: 2.1; letter-spacing: .05em; color: var(--soft); flex: 1; margin-bottom: clamp(18px, 2.4vh, 24px); }
.news-card__link { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--fg); opacity: .6; transition: opacity .35s ease; align-self: flex-start; }
.news-card:hover .news-card__link { opacity: 1; }
.news-card__link svg { width: 15px; height: 15px; transition: transform .35s ease; }
.news-card:hover .news-card__link svg { transform: translateX(4px); }

.news-empty { max-width: 640px; margin: clamp(40px, 6vh, 70px) auto; padding: clamp(40px, 6vh, 70px) var(--pad); text-align: center; background: var(--paper); border-radius: var(--radius-lg); }
.news-empty[hidden] { display: none; }
.news-empty__title { font-family: var(--serif); font-size: clamp(20px, 2.4vw, 28px); font-weight: 400; letter-spacing: .12em; margin: 0 0 16px; }
.news-empty__text { font-size: 13.5px; line-height: 2.1; letter-spacing: .06em; color: var(--soft); margin: 0; }

.news-cta { text-align: center; background: var(--paper); padding: clamp(70px, 10vh, 130px) var(--pad); margin-top: clamp(70px, 10vh, 130px); }
.news-cta__title { font-family: var(--serif); font-size: clamp(24px, 3.4vw, 46px); font-weight: 400; letter-spacing: .22em; margin-right: -.22em; margin: 0 0 clamp(24px, 3.5vh, 36px); }
.news-cta__text { font-size: 14px; line-height: 2.2; letter-spacing: .08em; color: var(--soft); max-width: 540px; margin: 0 auto clamp(36px, 5vh, 56px); }
.news-cta__btn { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 clamp(36px, 5vw, 64px); border-radius: 100px; background: var(--fg); color: #fff; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; transition: background .35s; }
.news-cta__btn:hover { background: #1a1a1a; }
.news-cta__btn svg { width: 16px; height: 16px; }

/* ============================================================
   14. 联系我们页
   ============================================================ */
/* 页首（v1.0.4 补：本页同样用的是 .contact-hero，此前样式缺失。） */
.contact-hero {
	padding-top: calc(var(--nav-h) + clamp(60px, 9vh, 110px));
	padding-bottom: clamp(40px, 6vh, 70px);
	text-align: center;
}
.contact-hero__inner { padding: 0 var(--pad); }
.contact-hero__sub {
	font-size: 12px;
	letter-spacing: .44em;
	margin-right: -.44em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: clamp(26px, 4vh, 44px);
}
.contact-hero__title {
	font-family: var(--serif);
	font-size: clamp(32px, 5.6vw, 78px);
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: .14em;
	margin-right: -.14em;
	margin-bottom: clamp(28px, 4.5vh, 48px);
}
.contact-hero__desc {
	font-size: 13.5px;
	line-height: 2.3;
	letter-spacing: .08em;
	color: var(--soft);
	max-width: 620px;
	margin: 0 auto;
	text-align: left;
}

.contact-cards { padding: clamp(30px, 5vh, 60px) var(--pad) clamp(70px, 10vh, 130px); }
/* ★ 列数跟随部件声明（PHP 里的 mooto_grid_cols()）：
   这几个板块的条数由后台「一行一条」自由控制，写死列数会在少一条时
   在右侧留一个空洞。默认值 = 原设计列数，所以「条数 ≥ 设计列数」时
   渲染结果与改造前逐像素一致。
   minmax(0, 1fr) 而非 1fr：见 .works-gallery__grid 处的说明。 */
.contact-cards__grid { display: grid; grid-template-columns: repeat(var(--mooto-cols, 4), minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 44px); max-width: 1400px; margin: 0 auto; }

.contact-card {
	display: flex;
	flex-direction: column;
	padding: clamp(32px, 4vh, 48px) clamp(22px, 2.2vw, 32px);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--bg);
	transition: border-color .4s ease, transform .4s ease, box-shadow .4s ease;
}

.contact-card:hover { border-color: var(--line-strong); transform: translateY(-4px); box-shadow: 0 18px 48px rgba(10, 10, 10, .06); }
.contact-card__icon { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; margin-bottom: clamp(22px, 3vh, 32px); color: var(--fg); opacity: .75; }
.contact-card__icon svg { width: 22px; height: 22px; }
.contact-card__label { font-size: 10px; letter-spacing: .4em; margin-right: -.4em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.contact-card__value { font-family: var(--serif); font-size: clamp(16px, 1.6vw, 19px); letter-spacing: .08em; line-height: 1.7; color: var(--fg); margin-bottom: 10px; }
.contact-card__value a:hover { opacity: .68; }
.contact-card__note { font-size: 12px; line-height: 1.95; letter-spacing: .05em; color: var(--soft); margin-top: auto; }

/* 在线预约表单 */
.contact-reserve { background: var(--paper); padding: var(--section-y) var(--pad); }
.contact-reserve__head { text-align: center; margin-bottom: clamp(56px, 8vh, 100px); }
.contact-reserve__title { font-family: var(--serif); font-size: clamp(24px, 3vw, 42px); font-weight: 400; letter-spacing: .2em; margin-right: -.2em; margin-top: 32px; margin-bottom: clamp(24px, 3.5vh, 36px); }
.contact-reserve__desc { font-size: 13.5px; line-height: 2.3; letter-spacing: .06em; color: var(--soft); max-width: 520px; margin: 0 auto; }
.contact-reserve__req { color: var(--fg); }

.contact-reserve__form { max-width: 880px; margin: 0 auto; text-align: left; }
.contact-reserve__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vh, 48px) clamp(24px, 3vw, 44px); }
.contact-reserve__field--full { grid-column: 1/-1; }

.contact-reserve__label { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .12em; color: var(--fg); margin-bottom: 14px; line-height: 1.6; }
.contact-reserve__icon { font-size: 14px; color: var(--muted); width: 18px; text-align: center; flex-shrink: 0; }
.contact-reserve__input { width: 100%; padding: 14px 0; border-bottom: 1px solid rgba(10, 10, 10, .14); font-size: 14px; letter-spacing: .06em; color: var(--fg); background: none; transition: border-color .35s ease; }
.contact-reserve__input::placeholder { color: rgba(10, 10, 10, .25); letter-spacing: .04em; }
.contact-reserve__input:focus { border-bottom-color: rgba(10, 10, 10, .4); outline: none; }
.contact-reserve__input.is-invalid { border-bottom-color: rgba(10, 10, 10, .5); }
.contact-reserve__textarea { min-height: 104px; resize: vertical; line-height: 1.9; font-family: inherit; display: block; }

.contact-reserve__select-wrap { position: relative; }
.contact-reserve__select { width: 100%; padding: 14px 32px 14px 0; border-bottom: 1px solid rgba(10, 10, 10, .14); font-size: 14px; letter-spacing: .06em; color: var(--fg); background: none; appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color .35s ease; }
.contact-reserve__select:focus { border-bottom-color: rgba(10, 10, 10, .4); outline: none; }
.contact-reserve__select:invalid { color: rgba(10, 10, 10, .38); }
.contact-reserve__chevron { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 12px; height: 8px; color: var(--muted); pointer-events: none; }

.contact-reserve__styles { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.contact-reserve__style { position: relative; cursor: pointer; }
.contact-reserve__style input { position: absolute; opacity: 0; pointer-events: none; }
.contact-reserve__style span { display: inline-block; padding: 9px 20px; border: 1px solid rgba(10, 10, 10, .14); border-radius: 100px; font-size: 12.5px; letter-spacing: .1em; color: var(--soft); transition: all .3s ease; user-select: none; }
.contact-reserve__style:hover span { border-color: rgba(10, 10, 10, .28); color: var(--fg); }
.contact-reserve__style input:checked + span { background: var(--fg); border-color: var(--fg); color: #fff; }
.contact-reserve__style input:focus-visible + span { outline: 2px solid rgba(10, 10, 10, .4); outline-offset: 2px; }

.contact-reserve__submit-wrap { margin-top: clamp(48px, 6vh, 72px); text-align: center; }
.contact-reserve__submit { display: inline-flex; align-items: center; gap: 12px; padding: 18px 48px; background: var(--fg); color: #fff; border-radius: 100px; font-size: 13px; letter-spacing: .18em; cursor: pointer; border: none; transition: opacity .35s ease, transform .35s ease; }
.contact-reserve__submit:hover { opacity: .82; transform: translateY(-2px); }
.contact-reserve__submit[disabled] { opacity: .6; cursor: default; transform: none; }
.contact-reserve__submit svg { width: 16px; height: 16px; }
.contact-reserve__privacy { font-size: 11px; letter-spacing: .14em; color: var(--muted); margin-top: 18px; }

.contact-reserve__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.contact-reserve__success { text-align: center; padding: clamp(40px, 6vh, 64px) 0; }
.contact-reserve__success-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); font-size: 20px; color: var(--fg); margin-bottom: 20px; }
.contact-reserve__success p { font-family: var(--serif); font-size: clamp(16px, 1.6vw, 19px); letter-spacing: .1em; color: var(--fg); }

.contact-reserve__error { display: block; margin-top: 12px; font-size: 12px; letter-spacing: .06em; color: var(--fg); opacity: .7; }

/* 到访指引 */
.contact-visit { padding: clamp(90px, 14vh, 200px) var(--pad); }
.contact-visit__inner { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(30px, 5vw, 90px); align-items: center; }
.contact-visit__media { aspect-ratio: 4/3; border-radius: var(--radius-lg); }
.contact-visit__body { padding: 0 clamp(0px, 2vw, 30px); }
.contact-visit__title { font-family: var(--serif); font-size: clamp(24px, 3vw, 42px); font-weight: 400; letter-spacing: .2em; margin-right: -.2em; margin-bottom: clamp(24px, 3.5vh, 36px); }
.contact-visit__text { font-size: 13.5px; line-height: 2.3; letter-spacing: .06em; color: var(--soft); max-width: 460px; margin-bottom: clamp(28px, 4vh, 44px); }
.contact-visit__steps { display: flex; flex-direction: column; gap: clamp(20px, 2.6vh, 28px); }
.contact-visit__step { display: flex; gap: 18px; align-items: flex-start; }
.contact-visit__num { flex: 0 0 auto; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--fg); color: #fff; font-size: 11px; letter-spacing: .04em; margin-top: 2px; }
.contact-visit__info dt { font-family: var(--serif); font-size: 15px; letter-spacing: .1em; margin-bottom: 6px; }
.contact-visit__info dd { font-size: 12.5px; line-height: 2; letter-spacing: .05em; color: var(--soft); }

/* 常见问题 */
.contact-faq { background: var(--paper); padding: clamp(90px, 14vh, 200px) var(--pad); }
.contact-faq__head { text-align: center; margin-bottom: clamp(56px, 8vh, 100px); }
.contact-faq__title { font-family: var(--serif); font-size: clamp(24px, 3vw, 42px); font-weight: 400; letter-spacing: .22em; margin-right: -.22em; margin-top: 32px; }
.contact-faq__list { max-width: 900px; margin: 0 auto; }
.contact-faq__item { padding: clamp(26px, 3.6vh, 38px) 0; border-bottom: 1px solid var(--line); }
.contact-faq__item:first-child { border-top: 1px solid var(--line); }
.contact-faq__q { font-family: var(--serif); font-size: clamp(15px, 1.7vw, 20px); letter-spacing: .1em; margin-bottom: 12px; }
.contact-faq__a { font-size: 13px; line-height: 2.2; letter-spacing: .06em; color: var(--soft); max-width: 760px; }

.contact-cta { text-align: center; background: var(--bg); padding: clamp(90px, 14vh, 200px) var(--pad); }
.contact-cta__title { font-family: var(--serif); font-size: clamp(26px, 3.6vw, 52px); font-weight: 400; letter-spacing: .24em; margin-right: -.24em; margin-bottom: clamp(28px, 4vh, 44px); }
.contact-cta__text { font-size: 14px; line-height: 2.3; letter-spacing: .1em; color: var(--muted); max-width: 540px; margin: 0 auto clamp(40px, 6vh, 64px); }
.contact-cta__btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 56px; padding: 0 clamp(40px, 5.5vw, 72px); border-radius: 100px; background: var(--fg); color: #fff; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; transition: background .35s ease, transform .3s ease; }
.contact-cta__btn:hover { background: #1a1a1a; transform: translateY(-2px); }
.contact-cta__btn svg { width: 16px; height: 16px; }

/* ============================================================
   15. 案例详情 / 单篇 / 归档 / 搜索 / 404
   （原站这些页面根本没有模板，靠核心默认输出，样式完全脱节）
   ============================================================ */
.single-hero { padding-top: calc(var(--nav-h) + clamp(50px, 7vh, 90px)); text-align: center; padding-bottom: clamp(40px, 6vh, 70px); }
.single-hero__inner { padding: 0 var(--pad); max-width: 900px; margin: 0 auto; }
.single-hero__meta { font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(22px, 3vh, 32px); }
.single-hero__title { font-family: var(--serif); font-size: clamp(28px, 4.6vw, 62px); font-weight: 400; line-height: 1.4; letter-spacing: .12em; margin-right: -.12em; margin-bottom: clamp(24px, 3.5vh, 40px); }
.single-hero__desc { font-size: 13.5px; line-height: 2.3; letter-spacing: .06em; color: var(--soft); text-align: left; }

.single-cover { padding: 0 var(--pad) clamp(60px, 9vh, 110px); }
/* 案例是单张竖版图：居中限宽，像美术馆里一幅挂好的画 + 旁边的说明牌，
   而不是把 3:4 的图拉满 1500px 宽（那样会长到 2000px 高）。 */
.single-mt_case .single-cover { display: flex; justify-content: center; }
.single-mt_case .single-cover .media { width: min(100%, 660px); aspect-ratio: 3 / 4; }
.single-cover .media { aspect-ratio: 21/9; border-radius: var(--radius-lg); }

.single-body { padding: 0 var(--pad) clamp(70px, 10vh, 130px); }
.single-body__inner { max-width: 860px; margin: 0 auto; }

/* 陈设参考 —— 逐件编号，像杂志末页的器物索引。
   基线对齐而不是居中对齐：物品名长起来会折行，居中对齐时编号会
   跟着漂到第二行中间，读起来像脱了格。色点单独用 align-self 拉回中线。
   ★ 色点用的是**这张图自己的四阶色板**里提出来的颜色，不是随手配的装饰色；
     照片里找不到对应色的画成空心圈 —— 照片里没有那个色，就不编一个出来。 */
.single-objects { padding: 0 var(--pad) clamp(70px, 10vh, 130px); }
.single-objects__inner { max-width: 860px; margin: 0 auto; }
.obj-head { margin-bottom: clamp(26px, 4vh, 42px); }
/* 标题 + 一条延伸到行尾的细线：杂志里给器物索引起头的老办法。
   不用色块、不用底色 —— 这一块的点缀只留给右边那一列色点。 */
.obj-head__title { display: flex; align-items: center; gap: 18px; font-family: var(--serif); font-size: 12px; font-weight: 400; letter-spacing: .36em; margin-right: -.36em; color: var(--soft); }
.obj-head__title::after { content: ''; flex: 1; height: 1px; background: var(--line); margin-right: .36em; }
.obj-head__lead { font-size: 14px; line-height: 2.1; letter-spacing: .06em; color: var(--soft); margin-top: 18px; }
.obj-list { list-style: none; margin: 0; padding: 0; }
.obj { display: flex; align-items: baseline; gap: 14px; padding: 15px 0; border-top: 1px solid var(--line); }
.obj:last-child { border-bottom: 1px solid var(--line); }
.obj__no { flex: none; width: 22px; font-size: 10px; letter-spacing: .1em; color: var(--muted); font-variant-numeric: tabular-nums; }
.obj__name { font-size: 14px; line-height: 1.8; letter-spacing: .04em; }
/* 类别给固定宽度：不给的话，三个字的类别（「绿植」是两字，但将来可能加）
   会把色点整列推来推去，一列点忽左忽右比对齐不齐更扎眼。 */
.obj__cat { flex: none; margin-left: auto; min-width: 3em; text-align: right; font-size: 10px; letter-spacing: .2em; color: var(--muted); }
/* ★ 色点带一圈内描边。不带的话，浅色物件（白色手绘陶瓷那类）的点
   在白底上等于没画 —— 读者看到的是「这一行漏了」。描边不是装饰，
   是让「这里有一个确实取到的颜色」这件事**看得见**。 */
.obj__dot { flex: none; align-self: center; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .12); }
.obj__dot.is-empty { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }

.single-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 40px); padding: 0 var(--pad) clamp(70px, 10vh, 130px); max-width: 1500px; margin: 0 auto; }
.single-gallery .media { aspect-ratio: 4/3; border-radius: var(--radius-md); }
.single-gallery .media:first-child:nth-last-child(odd) { grid-column: 1 / -1; aspect-ratio: 21/9; }

.single-facts { max-width: 1300px; margin: 0 auto clamp(60px, 9vh, 110px); padding: 0 var(--pad); display: grid; grid-template-columns: repeat(var(--mooto-cols, 4), minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.single-fact dt { font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.single-fact dd { font-family: var(--serif); font-size: clamp(15px, 1.6vw, 19px); letter-spacing: .1em; line-height: 1.8; }

.single-nav { max-width: 1300px; margin: 0 auto; padding: 0 var(--pad) clamp(70px, 10vh, 130px); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.single-nav a { padding: 26px clamp(20px, 2.4vw, 36px); border: 1px solid var(--line); border-radius: var(--radius-md); transition: border-color .35s ease, transform .35s ease; }
.single-nav a:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.single-nav__dir { display: block; font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.single-nav__title { font-family: var(--serif); font-size: clamp(16px, 1.7vw, 21px); letter-spacing: .1em; }
.single-nav a.is-next { text-align: right; }

.archive-head { padding-top: calc(var(--nav-h) + clamp(50px, 7vh, 90px)); padding-bottom: clamp(40px, 6vh, 70px); text-align: center; }
.archive-head__inner { padding: 0 var(--pad); }
.archive-head__title { font-family: var(--serif); font-size: clamp(28px, 4.4vw, 60px); font-weight: 400; letter-spacing: .14em; margin-right: -.14em; margin-bottom: clamp(20px, 3vh, 30px); }
.archive-head__desc { font-size: 13.5px; line-height: 2.2; letter-spacing: .07em; color: var(--soft); max-width: 620px; margin: 0 auto; text-align: left; }

.archive-body { padding: 0 var(--pad) clamp(90px, 14vh, 180px); }
.archive-body__inner { max-width: 1200px; margin: 0 auto; }

.post-list { display: flex; flex-direction: column; }

/* ============================================================
   15. 文章卡片 / 面包屑 / 单篇页 / 搜索页（v1.0.5）
   ============================================================ */

/* ---------- 面包屑 ---------- */
/*
 * 面包屑 —— 全站统一放在**页首内容的最上面一行**（就在 kicker 小标之上）。
 * 首页不放（首页本身就是「首页」那一项，只输出一项的面包屑没有意义）。
 *
 * ★ 位置约定（别改成别处）：它是页首容器（`*__inner`）里的**第一个**元素。
 *   全站十几个出口都落在同一个位置，原则是「**页首写在哪，面包屑就插在哪**」：
 *   - 页首由分区输出的 → 面包屑由那个分区自己输出
 *     （archive-head / search-head / single-hero / case-hero / page-hero /
 *      page-title / works-grid）；
 *   - 页首是块模板里手写的 → 由一行 `<!-- wp:mooto/breadcrumbs /-->` 输出；
 *   - PHP 回退模板同样：走分区的不用管，页首手写的就在页首里直接调
 *     mooto_breadcrumbs()。
 *   ⚠️ 别再写成 get_template_part( 'template-parts/sections/breadcrumbs' ) ——
 *      那个分区文件**建不出来**：线上只有「wp-admin 主题文件编辑器」一条写入
 *      通道，而它不能新建文件（请求一个不存在的文件直接 HTTP 500）。
 *      这正是它做成「服务端渲染区块 + 直接调函数」、而不是分区的理由。
 *
 * ★ 一次请求只许出现一次：mooto_breadcrumbs() 除了画那一条 <nav>，还会输出
 *   BreadcrumbList 的 JSON-LD —— 出现两次就是两份结构化数据。
 *
 * ★ 它只吃 `margin-bottom`，不带任何上边距 / 上边线：上面是页首自己的
 *   padding-top（`calc(var(--nav-h) + …)`，已经让开了固定顶栏），下面紧接 kicker。
 *
 * ★ 形态类为什么没有了：1.2.1 起它在页首里面、类名 `crumbs--hero`；中间有一轮
 *   把它挪到页首**之后**、改名 `crumbs--band`（带上边线、通到页宽）；访客看过
 *   之后要它回到页首里面。既然只有一个位置、一种形态，就不再要修饰类。
 *   ⚠️ 位置一改，**页首的下留白要跟着看一眼**：它在页首之后时，页首与正文之间
 *      那段空白是被它接过去用的；回到页首里面之后，那段空白归页首自己管。
 *      本轮的页首 `padding-bottom` 已收住（32~56px），不再叠加。
 */
.crumbs { margin: 0 0 clamp(16px, 2.4vh, 26px); }
.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.crumbs__item { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: .16em; color: var(--muted); }
.crumbs__item + .crumbs__item::before { content: "/"; margin: 0 10px; color: var(--line-strong); }
.crumbs__item a { color: var(--muted); transition: color .3s ease; }
.crumbs__item a:hover { color: var(--fg); }
.crumbs__item--current { color: var(--soft); }

/* ---------- 文章卡片 ---------- */
.post-card {
	position: relative;
	display: grid;
	grid-template-columns: clamp(180px, 20vw, 240px) 1fr;
	gap: clamp(20px, 3.4vw, 52px);
	align-items: center;
	padding: clamp(26px, 3.6vh, 38px) 0;
	border-bottom: 1px solid var(--line);
}

.post-card:first-child { border-top: 1px solid var(--line); }

.post-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4/3;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--photo);
}

.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-soft); }
.post-card:hover .post-card__media img { transform: scale(1.06); }

/* 有图时压一层很淡的上暗渐变，保证左上角序号在任何图上都看得清 */
.post-card__media:not(.post-card__media--tint)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0, 0, 0, .26), rgba(0, 0, 0, 0) 44%);
}

/* 没有封面图时的替代封面：分类色块 + 大号衬线首字 + 内嵌细框 */
.post-card__media--tint { background: linear-gradient(148deg, var(--tint-from) 0%, var(--tint-to) 100%); }

.post-card__media--tint::after {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px solid rgba(255, 255, 255, .42);
	border-radius: calc(var(--radius-sm) - 7px);
	pointer-events: none;
}

.post-card__glyph {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--serif);
	font-size: clamp(34px, 3.8vw, 52px);
	line-height: 1;
	color: var(--tint-ink);
	opacity: .9;
}

.post-card__glyph--ghost {
	font-size: clamp(110px, 13vw, 170px);
	color: #fff;
	opacity: .1;
	transform: translate(-42%, -58%);
}

.post-card__frame { display: none; }

.post-card__no {
	position: absolute;
	top: 13px;
	left: 15px;
	z-index: 2;
	font-family: var(--serif);
	font-size: 11px;
	letter-spacing: .2em;
	color: rgba(255, 255, 255, .92);
}

.post-card__media--tint .post-card__no { color: var(--tint-ink); opacity: .55; }

.post-card__body { min-width: 0; }

.post-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin-bottom: 12px;
	font-size: 10px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--muted);
}

.post-card__cat {
	position: relative;
	z-index: 3;
	color: var(--fg);
	border-bottom: 1px solid var(--line-strong);
	padding-bottom: 2px;
	transition: border-color .3s ease;
}

.post-card__cat:hover { border-color: var(--fg); }

.post-card__title {
	font-family: var(--serif);
	font-size: clamp(19px, 2.1vw, 27px);
	font-weight: 400;
	line-height: 1.58;
	letter-spacing: .06em;
	margin-bottom: 12px;
}

.post-card__title-link { color: inherit; transition: opacity .3s ease; }

/* 整张卡片可点：把标题链接的点击热区铺满卡片。
   分类链接单独抬到上层，所以它依然是独立可点的。 */
.post-card__title-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.post-card:hover .post-card__title-link { opacity: .66; }

.post-card__excerpt {
	font-size: 13px;
	line-height: 2.05;
	letter-spacing: .05em;
	color: var(--soft);
	max-width: 74ch;
	margin-bottom: 14px;
}

.post-card__more { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.post-card__more svg { width: 14px; height: 14px; }

/* 搜索命中词：像用荧光笔划了一道 */
.hl { background: linear-gradient(180deg, transparent 56%, rgba(196, 184, 166, .6) 56%); color: inherit; padding: 0 1px; }

/* ---------- 单篇页补充 ---------- */
.single-hero__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; }
.single-hero__meta a { color: var(--fg); border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: border-color .3s ease; }
.single-hero__meta a:hover { border-color: var(--fg); }
.single-hero__read { color: var(--muted); }

.single-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
	margin-top: clamp(44px, 6vh, 70px);
	padding-top: clamp(26px, 3.4vh, 36px);
	border-top: 1px solid var(--line);
}

.single-tags__label { font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--muted); }
.single-tags__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }

.chip {
	display: inline-block;
	padding: 8px 17px;
	font-size: 11px;
	letter-spacing: .12em;
	color: var(--soft);
	border: 1px solid var(--line);
	border-radius: 999px;
	transition: color .3s ease, border-color .3s ease, background .3s ease;
}

.chip:hover { color: var(--fg); border-color: var(--line-strong); background: var(--paper); }

.single-back { margin-top: clamp(22px, 3vh, 30px); }
.single-back a { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .14em; color: var(--soft); transition: color .3s ease; }
.single-back a:hover { color: var(--fg); }
.single-back svg { width: 15px; height: 15px; }

.single-related { max-width: 1300px; margin: 0 auto; padding: 0 var(--pad) clamp(70px, 10vh, 130px); }
.single-related__head { text-align: center; margin-bottom: clamp(28px, 4vh, 48px); }
.single-related__title { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 34px); font-weight: 400; letter-spacing: .12em; margin-top: 12px; }
.post-list--related { max-width: 960px; margin: 0 auto; }
.post-list--compact { max-width: 960px; margin: 0 auto; }

/* ---------- 搜索页 ---------- */
.search-again { display: flex; gap: 10px; max-width: 520px; margin: clamp(26px, 3.6vh, 40px) auto 0; }

.search-again__field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 13px 20px;
	font: inherit;
	font-size: 13px;
	letter-spacing: .06em;
	color: var(--fg);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 999px;
	outline: none;
	transition: border-color .3s ease;
	-webkit-appearance: none;
	appearance: none;
}

.search-again__field:focus { border-color: var(--line-strong); }

.search-again__btn {
	flex: 0 0 auto;
	padding: 13px 26px;
	font: inherit;
	font-size: 11px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--bg);
	background: var(--fg);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: opacity .3s ease;
}

.search-again__btn:hover { opacity: .82; }

.search-empty { max-width: 1000px; margin: 0 auto; }
.search-empty__inner { max-width: 700px; margin: 0 auto; text-align: center; padding: clamp(30px, 5vh, 64px) 0 clamp(10px, 2vh, 20px); }
.search-empty__kicker { margin-bottom: 18px; }
.search-empty__title { font-family: var(--serif); font-size: clamp(21px, 2.6vw, 32px); font-weight: 400; line-height: 1.62; letter-spacing: .08em; margin-bottom: 18px; }
.search-empty__text { font-size: 13.5px; line-height: 2.1; letter-spacing: .06em; color: var(--soft); margin-bottom: clamp(30px, 4vh, 44px); }
.search-empty__hot-label { font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.search-empty__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.search-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: clamp(34px, 4.4vh, 50px) 0 0; }
.search-empty__latest { margin-top: clamp(48px, 7vh, 88px); }
.search-empty__latest-label { text-align: center; margin-bottom: clamp(20px, 3vh, 30px); }

.error-page { padding: calc(var(--nav-h) + clamp(60px, 10vh, 140px)) var(--pad) clamp(90px, 14vh, 180px); text-align: center; }
.error-page__code { font-family: var(--serif); font-size: clamp(80px, 16vw, 220px); font-weight: 300; line-height: .9; letter-spacing: -.04em; margin-bottom: clamp(24px, 4vh, 40px); }
.error-page__title { font-family: var(--serif); font-size: clamp(22px, 3vw, 40px); font-weight: 400; letter-spacing: .18em; margin-right: -.18em; margin-bottom: clamp(20px, 3vh, 30px); }
.error-page__text { font-size: 13.5px; line-height: 2.2; letter-spacing: .06em; color: var(--soft); max-width: 520px; margin: 0 auto clamp(40px, 6vh, 60px); }
.error-page__actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* 评论（原站没有评论样式） */
.comments-area { max-width: 860px; margin: 0 auto; padding: 0 var(--pad) clamp(70px, 10vh, 130px); }
.comments-title { font-family: var(--serif); font-size: clamp(18px, 2vw, 26px); font-weight: 400; letter-spacing: .12em; margin-bottom: 30px; }
.comment-list > li + li { border-top: 1px solid var(--line); }
.comment-list .children { padding-left: clamp(20px, 4vw, 50px); }
.comment-body { padding: 26px 0; font-size: 13.5px; line-height: 2.1; letter-spacing: .05em; color: var(--soft); }
.comment-body .comment-author { font-family: var(--serif); font-size: 15px; letter-spacing: .1em; color: var(--fg); margin-bottom: 8px; }
.comment-body .comment-meta { font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.comment-reply-link { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; border-bottom: 1px solid var(--line-strong); }
.comment-form { display: grid; gap: 26px; }
.comment-form p { margin: 0; }
.comment-form label { display: block; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea { width: 100%; padding: 14px 0; border-bottom: 1px solid rgba(10, 10, 10, .14); font-size: 14px; letter-spacing: .05em; }
.comment-form textarea { min-height: 140px; }
.comment-form .submit { display: inline-flex; align-items: center; height: 52px; padding: 0 40px; border-radius: 100px; background: var(--fg); color: #fff; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; cursor: pointer; }

/* ============================================================
   16. 内容型页面（用户在后台自己写的额外内容）
   ============================================================ */
.page-content { padding: clamp(50px, 8vh, 90px) var(--pad) clamp(70px, 10vh, 130px); }
.page-content__inner { max-width: 860px; margin: 0 auto; }

/* ============================================================
   17. 断点（原站把这一段在 5 个页面里各写了一遍）
   ============================================================ */
@media (max-width: 900px) {
	/* 首页首屏 */
	.hero__brand { height: clamp(54px, 8vh, 74px); }
	.hero__handwrite { font-size: clamp(30px, 9vw, 42px); }
	.hero__bloom-spin { width: clamp(38px, 10vw, 54px); height: clamp(38px, 10vw, 54px); }
	.hero__bloom::before { width: clamp(54px, 14vw, 74px); height: clamp(54px, 14vw, 74px); }

	/* 花语 */
	.bloom-edit__grid { grid-template-columns: 1fr; gap: 80px; }
	.bloom-edit__col--left { padding-top: 0; }
	/* 花语 · 手机上单列堆叠，两张都竖排会显得重复，所以这里**故意一竖一横**：
	   茉莉 4/5（竖）、海棠 4/3（横，留住蓝天）。滚下去是一长一短交替，
	   不会两块一样高的大色块连在一起。取景位置也跟着比例重新定。 */
	.bloom-edit__media--tall { aspect-ratio: 4/5; }
	.bloom-edit__media--wide { aspect-ratio: 4/3; }
	/* 同样是与着色器 cover() 对齐的反算值（手机 4/5 框），桌面那份写在上面那一段里。 */
	.bloom-edit__media--tall img { object-position: center 8.8%; }
	.bloom-edit__media--wide img { object-position: center 45%; }
	.bloom-edit__char { font-size: clamp(42px, 12vw, 72px); }

	/* 精工 —— 已无配图，只剩一栏文字，间距按文字高度收窄 */
	.craft-edit__step { margin-bottom: 56px; }
	.craft-edit__name { font-size: clamp(18px, 5vw, 22px); }

	/* 作品 */
	.works-edit__grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: 24px; }
	.works-edit__item--main,
	.works-edit__item--top,
	.works-edit__item--bottom { grid-column: auto; grid-row: auto; }
	.works-edit__item--main .works-edit__media { min-height: 0; aspect-ratio: 4/5; }
	.works-edit__media { aspect-ratio: 4/5; }

	/* 手机端：竖版图 2 列。1 列翻 60 张太累，2 列既保留冲击力又能快速浏览。 */
	.works-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: clamp(32px, 5vh, 50px); }
	/* 状态条：手机上竖排，出口放右边会挤 */
	.works-state { flex-direction: column; align-items: flex-start; gap: 11px; margin-bottom: 26px; }

	/* 信息流：手机上 2 列。
	   ★ 这一段原来有一条「标签行强制两行」的规则（上行风格、下行色点 + 配色名），
	     理由是 390px 两列时卡片内容宽只有 166px，而「风格 + 4 色点 + 配色名」
	     实测要占 163px —— 只剩 2px，配色名长一点就折、短一点不折，
	     同排两张卡高度不齐。现在风格名移出了这一行（挪到图片左上角的小签），
	     拥挤的根因消失，那条规则也就不需要了。 */
	.work-item__name { font-size: 14px; letter-spacing: .06em; }
	.work-item__tags { flex-direction: column; align-items: flex-start; gap: 7px; margin-top: 8px; }
	/* 手机 2 列时卡片宽度在 140–420px 之间浮动，签跟着收一档。
	   字号按「卡片宽度」而不是「视口宽度」分档的原因：这一档里卡片宽度
	   随视口变化了近 3 倍，用 vw 去算会在 900px 处明显偏小、在 390px 处偏大。 */
	.work-item__badges { top: 9px; left: 9px; gap: 4px; max-width: calc(100% - 18px); }
	.work-item__badge { font-size: 10px; letter-spacing: .14em; text-indent: .14em; padding: 5px 8px 4px; }
	.work-item__color { gap: 5px; font-size: 10.5px; letter-spacing: .08em; }
	/* 词签跟着收一档。它比组合名安全得多：原来那一整句「砖红 · 深棕 · 暖白」
	   是不断行的一枚整体，min-content 顶到 161.44px，把窄屏两列网格撑宽；
	   现在每个签只有两个字，单枚 min-content 约 40px，怎么折行都不会顶出去。 */
	.work-item__tones { gap: 4px; }
	.work-item__tone { font-size: 10px; letter-spacing: .06em; text-indent: .06em; padding: 2px 7px 2px; }
	.work-item__palette { gap: 2px; }
	.work-item__palette i { width: 9px; height: 9px; }

	/* ★ 窄屏必须放开配色名的「不断行」—— 这是本次修复的根因。
	   它的 min-content 实测 161.44px（色点 42 + 间隔 5 + 名称 114.44），
	   而 1fr 的下限正是 min-content：320 / 360 / 375px 下两列会被一起
	   顶到 161.44px，网格因此比容器宽 61 / 21 / 6px，整页横向可滑。
	   390px 看不出来（列宽 166 > 161.44），所以只有更窄的手机中招；
	   又因为配色名最长的那几张默认不在首屏 9 张里，要点「加载更多」才暴露。
	   放开后它在「 · 」处自然折两行，色点仍留在第一行开头，标签形态不受损。 */
	.work-item__color-name { white-space: normal; overflow-wrap: anywhere; }

	/* 主角卡：≤900px 时网格是两列，主角跨两列＝整行。
	   内部仍保持「左图右文」—— 900px 下图片约 490px 宽，文字区约 340px，
	   两者都还站得住；只有到 560px 以下才改回堆叠（见文件末尾那条）。 */

	/* ★ 为什么这里需要一个 min-height：
	   ≤900px 只有两列，主角独占一整行，这一行里没有别的卡能把它「撑」起来
	   （1024px 的三列网格里，同行那张普通卡会用默认 stretch 把行高顶上去，
	   所以那个区间不需要管）。而主角卡的高度由图决定 —— 文字栏是
	   align-self: end，不参与撑高；普通卡却是「图 + 信息条」两段。
	   于是 561–900px 之间出现层级倒挂，实测 561px 387 vs 424、768px 536 vs 549。

	   下限就按「普通卡的高度」来定：普通卡 = 列宽 × 4/3 + 信息条 93px
	   （图片是 3/4 竖版，信息条在 ≤900px 字号固定，实测 561/768/900 三点
	   反推都是 93）。列宽 = 45.5vw − 7px —— 由同样三点反推，此区间
	   左右 padding 恰好是 4.5vw、列间距 14px。
	   代入得 60.67vw + 83.7px，取 60.7vw + 88px，留约 5px 余量。
	   560px 以下改走堆叠、高度本来就富余（825 vs 423），这个下限不会生效。
	   不额外加 align-items：保持居中的话，图上下各分到十几像素的留白；
	   改成贴顶会把这段留白全挤到图与图注之间，反而裂开。 */
	.work-item.is-wide { min-height: calc(60.7vw + 88px); }

	.work-item.is-wide .work-item__name { font-size: clamp(20px, 4vw, 26px); letter-spacing: .12em; }
	.work-item.is-wide .work-item__palette i { width: 26px; height: 26px; }

	.works-more { padding-top: 44px; }

	/* 标签索引：已改成扁平标签云，不再有「四大类竖排」这回事
	   （.works-index__groups 随层级一起删掉了）。标签云在窄屏靠 flex-wrap
	   自己折行，不需要额外的分档规则 —— 所以这一条直接去掉，不留死样式。 */

	/* 色彩档案：色块缩到 56px，仍然一行排开 */
	.case-palette__row { gap: 10px; }
	.case-swatch__chip { width: 56px; height: 56px; }
	.case-swatch__hex { margin-top: 9px; font-size: 9.5px; letter-spacing: .04em; }
	.case-palette__label { margin-top: 26px; font-size: 17px; }
	.case-palette__desc { margin-top: 10px; font-size: 12.5px; line-height: 2; }
	.works-feature__inner { gap: 9px; }
	.works-feature__figure { border-radius: var(--radius-sm); }
	.works-feature__content { padding-top: 22px; }
	/* 三联图这一档每张只剩 110px 上下，签跟着卡片签收一档
	   （和 .work-item__badge 在这一断点的档位一致：10px / .14em / 5px 8px 4px）。
	   不收的话，「推荐」两个字会占掉图宽的三分之一，像贴纸。 */
	.works-feature__pick { top: 9px; left: 9px; font-size: 10px; letter-spacing: .14em; text-indent: .14em; padding: 5px 8px 4px; }
	.works-color__grid { grid-template-columns: 1fr; gap: 48px; }
	.color-card__swatch { height: clamp(72px, 18vw, 110px); }

	/* 收费 */
	.pricing__grid { grid-template-columns: 1fr; gap: 0; }
	.pricing__item { padding: 44px 20px; }
	.pricing__num { font-size: clamp(42px, 12vw, 64px); }
	.pricing-detail__grid { grid-template-columns: 1fr; gap: clamp(32px, 5vh, 48px); }
	.pricing-card--featured { order: -1; }
	.pricing-card__price { font-size: clamp(42px, 12vw, 64px); }
	.pricing-scope__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
	.scope-item { padding: 28px 14px; }
	.pricing-deliver__grid { grid-template-columns: 1fr; gap: 48px; }
	.pricing-deliver__media { aspect-ratio: 4/3; order: -1; }

	/* 动态 */
	.news-grid { grid-template-columns: 1fr; gap: clamp(40px, 6vh, 60px); }
	.news__item { flex-direction: column; gap: 10px; align-items: flex-start; }
	.news__title { text-align: left; }

	/* 预约 */
	.booking__contact { flex-direction: column; gap: 36px; }

	/* 关于 */
	.about-values__grid { grid-template-columns: 1fr; gap: 56px; }
	.about-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 44px 24px; }
	.about-process__item { padding-left: 26px; }
	.page-hero__media { aspect-ratio: 16/10; }

	/* ★ 关于页（`--tall`，目前只有它在用；收费页是 `--mid`）的页首现在只剩
	   面包屑 + 一行 kicker 了 —— 大字标题与页首大图都已按访客要求删掉，
	   「品牌故事」直接提上来接在 About 下面。
	   于是页首里那些原本用来「给内容让位 / 把内容兜住」的间距全成了纯空白，
	   三处叠起来 ≈164px：kicker 的下边距 34 + inner 的下内边距 25 + 页首的下内边距 39。
	   访客要的是「品牌故事直接提上来」，所以这里把**属于页首自己**的三层收干净，
	   只留下一个区块间距（下一个区块自己的 `--section-y`，≈101px）。
	   （原先那条 `.page-hero--tall .page-hero__title { font-size: 24.57px … }`
	     覆盖规则已随标题一起删除。要恢复标题，结构备份见
	     templates/page-guanyu.html.bak_before_h1_removed。） */
	.page-hero--tall .page-hero__sub:last-child { margin-bottom: 0; }
	.page-hero--tall,
	.page-hero--tall .page-hero__inner { padding-bottom: 0; }

	/* 联系 */
	.contact-cards__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
	.contact-card { padding: 28px 20px; }
	.contact-visit__inner { grid-template-columns: 1fr; gap: 40px; }
	.contact-visit__media { aspect-ratio: 4/3; order: -1; }
	.contact-visit__body { padding: 0; }

	/* 单篇 / 归档 */
	.single-cover .media { aspect-ratio: 16/10; }
	.single-mt_case .single-cover .media { width: 100%; aspect-ratio: 3 / 4; }
	.single-gallery { grid-template-columns: 1fr; }
	.single-gallery .media,
	.single-gallery .media:first-child:nth-last-child(odd) { aspect-ratio: 4/3; grid-column: auto; }
	.single-facts { grid-template-columns: 1fr 1fr; gap: 26px; }
	.single-nav { grid-template-columns: 1fr; }
	.single-nav a.is-next { text-align: left; }

	/* 文章卡片：窄屏改成「上图下文」 */
	.post-card { grid-template-columns: 1fr; gap: 18px; align-items: start; }
	.post-card__media { aspect-ratio: 16/10; }
	.post-card__excerpt { font-size: 12.5px; }

	.single-related__head { text-align: left; }
}

@media (max-width: 640px) {
	.contact-reserve__grid { grid-template-columns: 1fr; gap: 28px; }
	.contact-reserve__style span { padding: 8px 16px; font-size: 12px; }

	/* 陈设参考：窄屏把三栏压到刚好一行放得下。
	   01 + 物品名 + 类别 + 色点 ≈ 250px，375px 屏上还剩得下留白。 */
	.obj { gap: 11px; padding: 13px 0; }
	.obj__no { width: 18px; font-size: 9px; }
	.obj__name { font-size: 13.5px; line-height: 1.75; }
	.obj__cat { font-size: 9px; letter-spacing: .16em; min-width: 3em; }
	.obj__dot { width: 7px; height: 7px; }
}

@media (max-width: 600px) {
	.craft-edit__styles { grid-template-columns: 1fr; }
	.pricing-scope__grid { grid-template-columns: 1fr; }
	.contact-cards__grid { grid-template-columns: 1fr; }
	.search-again { flex-direction: column; }
	.search-again__btn { width: 100%; }
	.search-empty__actions .btn { width: 100%; text-align: center; }
}

/* ★ 主角卡在极窄屏（≤560px）改回「图上文下」。
   分栏时文字区只剩 128px（375px 实测）：名称会被折成三行、标签也排不下，
   而图形的比例又已经被挤得比普通卡还窄。堆叠之后图的宽度回到整行 ——
   主角感反而更强，它本来就是这一屏最大的一张图。 */
@media (max-width: 560px) {
	.work-item.is-wide { grid-template-columns: 1fr; column-gap: 0; }
	.work-item.is-wide .work-item__media { grid-column: 1; }
	.work-item.is-wide .work-item__info { grid-column: 1; padding-top: clamp(14px, 1.6vh, 19px); }
	.work-item.is-wide .work-item__info::before { width: 38px; margin-bottom: 14px; }
	.work-item.is-wide .work-item__name { font-size: clamp(18px, 5.4vw, 24px); letter-spacing: .1em; }
	.work-item.is-wide .work-item__tags { margin-top: 10px; }
	.work-item.is-wide .work-item__palette i { width: 16px; height: 16px; }
	/* 极窄屏（≤560px）两列时卡片只有 140–250px 宽，签再收一档。
	   字距同时收到 .08em —— 收紧字距 + 内边距之后，最长的几个词
	   （「克莱因蓝」4 字、「宋氏美学」4 字）落在卡片宽度的 35% 左右；
	   其余 2–3 字的签落在 25% 以内，看上去就是一撮，不是一块。
	   ★ 折行交给外层 .work-item__badges：签多了会在照片左上角排成两行，
	     这是刻意的 —— 「大部分都是混搭」意味着两枚同框是常态。 */
	.work-item__badges { top: 7px; left: 7px; gap: 3px; max-width: calc(100% - 14px); }
	.work-item__badge { font-size: 9px; letter-spacing: .08em; text-indent: .08em; padding: 3px 6px 3px; }
	.work-item__tone { font-size: 9.5px; padding: 2px 6px 2px; }
	/* 主角卡这一档已经是「图上文下」，图回到整行宽（≈140–250px），
	   所以签跟着同一个尺寸走，不再单独放大。 */
	.work-item.is-wide .work-item__badges { top: 9px; left: 9px; gap: 4px; }
	.work-item.is-wide .work-item__badge { font-size: 10px; padding: 5px 8px 4px; }
}






/* ===== MOOTO MAGAZINE · BEGIN (auto-generated, do not edit by hand) ===== */
/* ======================================================================
   案例集 · 刊物版 v8
   无专辑 · 12 版面节拍 · 风格压成图上标签 · 纯白 · 手机优先
   ----------------------------------------------------------------------
   与已上线的 v7（四辑刊物版）的区别：
     · 去掉「辑」这一层 —— 风格不再靠分辑表达，而是压成图上的一枚小标签，
       整本因此可以一路翻下去，中间没有隔断墙。
     · 版面从 7 种扩到 12 种。每张图的形状是**版面写下的**（--r），
       不再是素材带来的约束。
     · 全部样式收在 .mag 下；变量一律 --m- 前缀，避免与主题 :root 撞名。

   ★ 两条踩过的坑（写在最前面，免得后来人重踩）：
     1) container-type 只能放在 .pg（祖先）上。放在 .pg__in 上时，
        它自己的 padding:6cqw 会退化成**视口宽度**（元素不能查询自身），
        整页内容被挤掉 40%，而字号看起来完全正常 —— 极难反推。
     2) 真实案例图统一是 900×1200 的竖图。所有横版 / 超宽版面都靠
        object-fit:cover 取景，所以 object-position 不是装饰，是取景框。
   ====================================================================== */

/* ---------- 0. 容器与变量 ---------- */
.mag{
  --m-ink:#12110F;
  --m-soft:#6B6A64;
  --m-faint:#A9A79F;
  --m-hair:rgba(18,17,15,.14);
  --m-hair-2:rgba(18,17,15,.07);
  --m-dot:#B23A2A;                    /* 唯一点缀色：朱砂 */
  --m-serif:"Instrument Serif","Songti SC","STSong",SimSun,"Noto Serif SC",Georgia,serif;
  --m-sans:"Inter","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;

  background:#FFFFFF;
  color:var(--m-ink);
  font-family:var(--m-serif);
  font-size:15px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;

  /*
   * 让位给固定导航。
   * 主题的导航是 position:fixed（base.css --nav-h / layout.css 三档：118 / 88 / 80），
   * 其他页面各自靠 hero 的 padding-top 让出这一块；这一页没有 hero，
   * 所以必须自己让 —— 否则封面第一行页眉正好压在导航底下。
   * ★ 底栏（--tabbar-h）只在 ≤900px 出现，所以那一段的让位放在下面的媒体查询里，
   *   不能在桌面也留 62px 的死高度。
   */
  padding-top:calc(var(--nav-h, 118px) + 1.6vw);
  padding-bottom:4vw;
}
.mag *,.mag *::before,.mag *::after{box-sizing:border-box}
.mag a{color:inherit;text-decoration:none}
.mag img{display:block;max-width:100%}

/* ---------- 1. 一页 ---------- */
.mag .pg{
  position:relative;
  background:#FFFFFF;
  aspect-ratio:1/1.4;
  display:flex;
  flex-direction:column;
  color:var(--m-ink);
  box-shadow:0 0 0 1px var(--m-hair-2);   /* 极淡的一圈：白页在白底上要看得见边界 */
  container-type:inline-size;             /* ★ 祖先容器，不是 .pg__in 自己 */
  overflow:hidden;

  /*
   * 一页 = 一张纸，宽度取三者最小：
   *   100%                            —— 容器宽，手机上就等于屏宽
   *   660px                           —— 纸的上限，再宽就不像一页了
   *   (视口高 − 导航高 − 呼吸) / 1.4  —— 保证**整页在屏内看得见**
   *
   * 第三项是「翻册子」成立的前提。
   * ★ 教训：前一轮验收时这一项看不出来，是因为当时线上还挂着 v7 的 .mag，
   *   它自带 max-width，把页宽悄悄压到 660 —— 验收量到的 660×924 是 v7 给的，
   *   不是 v8 给的。v7 一撤，页宽立刻涨到满屏 1240×1736（2 倍视口高），
   *   一页永远只能看到一半，「一页一个版面」这件事当场不成立。
   *   所以宽度必须由 v8 自己写明，不能靠继承别人的约束。
   */
  width:min(100%, 660px, calc((100vh - var(--nav-h, 118px) - 3.6vw) / 1.4));
  width:min(100%, 660px, calc((100svh - var(--nav-h, 118px) - 3.6vw) / 1.4));
  margin-inline:auto;
}
.mag .pg + .pg{margin-top:18px}
.mag .pg__in{
  position:relative;
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:6cqw 6.8cqw;

  /* 字号系统：全部按页宽（100cqw）定，一页自洽 */
  --f-d1:14.6cqw;
  --f-d2:9cqw;
  --f-d3:5.8cqw;
  --f-d4:3.7cqw;
  --f-huge:23cqw;
  --f-mega:29cqw;
  --f-mark:16cqw;
  --f-tx:2.5cqw;
  --f-cap:2.1cqw;
  --f-k:2.05cqw;
  --f-tag:1.75cqw;
  --ls-k:.22em;
}

/* 印刷裁切角标 —— 纯 1px 线。这是「出版物」而不是「网页」的第一眼信号 */
.mag .pg__in::after{
  content:'';position:absolute;inset:2.4cqw;pointer-events:none;
  background:
    linear-gradient(var(--m-hair-2),var(--m-hair-2)) 0 0/1px 3cqw no-repeat,
    linear-gradient(var(--m-hair-2),var(--m-hair-2)) 0 0/3cqw 1px no-repeat,
    linear-gradient(var(--m-hair-2),var(--m-hair-2)) 100% 0/1px 3cqw no-repeat,
    linear-gradient(var(--m-hair-2),var(--m-hair-2)) 100% 0/3cqw 1px no-repeat,
    linear-gradient(var(--m-hair-2),var(--m-hair-2)) 0 100%/1px 3cqw no-repeat,
    linear-gradient(var(--m-hair-2),var(--m-hair-2)) 0 100%/3cqw 1px no-repeat,
    linear-gradient(var(--m-hair-2),var(--m-hair-2)) 100% 100%/1px 3cqw no-repeat,
    linear-gradient(var(--m-hair-2),var(--m-hair-2)) 100% 100%/3cqw 1px no-repeat;
}

/* ---------- 2. 页眉 / 页脚：编辑痕迹，几乎零成本 ---------- */
.mag .hd,.mag .ft{
  font-family:var(--m-sans);font-size:var(--f-k);letter-spacing:var(--ls-k);
  text-transform:uppercase;color:var(--m-faint);
  display:flex;justify-content:space-between;align-items:baseline;gap:2cqw;flex:0 0 auto;
}
.mag .hd{padding-bottom:2.4cqw;border-bottom:1px solid var(--m-hair);margin-bottom:5cqw}
.mag .ft{padding-top:2.4cqw;border-top:1px solid var(--m-hair);margin-top:4cqw}
.mag .fol{color:var(--m-dot)}

/* ---------- 3. 内容区 ---------- */
.mag .bd{display:block;flex:1;min-height:0;overflow:hidden}
.mag .bd[data-lay="split"]{
  display:grid;grid-template-columns:42% minmax(0,1fr);grid-template-rows:1fr;
  margin-inline:calc(-1 * 6.8cqw);
}
.mag .bd[data-lay="g5"]{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:3.2cqw 2.6cqw;align-content:start;
}
.mag .bd[data-lay="bleed"]{position:relative;margin:auto calc(-1 * 6.8cqw) calc(-1 * 6cqw)}

/* ---------- 4. 字级（只有三档：display / body / caption） ---------- */
.mag .k{font-family:var(--m-sans);font-size:var(--f-k);letter-spacing:var(--ls-k);
  text-transform:uppercase;color:var(--m-soft);margin:0;line-height:1.9}
.mag .k--faint{color:var(--m-faint)}
.mag .cap{font-size:var(--f-cap);letter-spacing:.2em;line-height:2.05;color:var(--m-soft);margin:0}
.mag .tx{font-size:var(--f-tx);line-height:2.05;letter-spacing:.03em;
  text-align:justify;text-justify:inter-ideograph;margin:0}
.mag .d1{font-family:var(--m-serif);font-weight:400;font-size:var(--f-d1);line-height:.98;
  letter-spacing:-.015em;margin:0}
.mag .d2{font-family:var(--m-serif);font-weight:400;font-size:var(--f-d2);line-height:1.08;
  letter-spacing:.01em;margin:0}
.mag .d3{font-family:var(--m-serif);font-weight:400;font-size:var(--f-d3);line-height:1.24;
  letter-spacing:.02em;margin:0}
.mag .big{font-family:var(--m-serif);font-weight:400;font-size:var(--f-d2);line-height:1.04;margin:0}
/* 点缀色的最重一笔：末字反白进色块。
 *
 * ★ 色块**不能**直接给 mark 上 background。
 *   行内盒的背景高度 = 字体的内容盒（ascent + descent），它**不受 line-height 约束**。
 *   这几套中文字体的内容盒是 1.37em，而标题行高是 1.08em ——
 *   量出来色块上溢 8.34px、下溢 5.25px，正好去压上面那行「CASE NO.01 · …」，
 *   而字越大溢得越多（纸 660 时上溢 9.97px）。
 *   所以改成：mark 只当定位桩（行高随标题，正好塞进行盒），
 *   真正那块红用一个固定高度的伪元素画 —— 高度由我们说了算，不再由字体度量说了算。
 */
.mag mark{
  display:inline-block;position:relative;z-index:0;
  background:none;color:#fff;
  padding:0 .1em;font-style:normal;
}
.mag mark::before{
  content:'';position:absolute;left:0;right:0;top:50%;
  height:1.06em;transform:translateY(-50%);
  background:var(--m-dot);z-index:-1;
}
.mag .rule{width:9cqw;height:1px;background:var(--m-dot);position:relative;border:0;margin:0;display:block}
.mag .rule::after{content:'';position:absolute;right:-3px;top:-2px;width:5px;height:5px;background:var(--m-dot)}

/* ---------- 5. 图片 + 压在图上的风格标签 ---------- */
/* 版面指定形状：--r 由版面的 class 写下，不是素材带来的 */
.mag .ph{
  position:relative;overflow:hidden;isolation:isolate;margin:0;width:100%;
  aspect-ratio:var(--r,4/3);background:#EDEAE4;
  /* ★ flex-shrink 默认是 1：在 .cell（flex column）里，一旦网格行高比图片矮，
     图片就会被**压扁** —— aspect-ratio 被无视，比例静默走样。
     图录格的下排三张就是这么从 3:4 变成 0.64:1 的。 */
  flex-shrink:0;
}
.mag .ph img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--op,50% 42%);   /* ← 取景框，不是装饰 */
}
/* 底部一道压暗：让白字标签在**任何**照片上都读得出来。
   ★ 这是「照片压字」绕不开的物理账：白字要 3:1，标签那一带的背景亮度
     就必须 ≤0.30 —— 浅色照片上只有把底部压到近黑才做得到。
     参考图里的杂志也是这么干的：底部一段深色带，照片照样好看。
     渐变不是装饰，是可读性成本。 */
.mag .ph::before{
  content:'';position:absolute;left:0;right:0;bottom:0;height:44%;z-index:2;
  pointer-events:none;
  background:linear-gradient(to top,
    rgba(6,5,4,.86) 0%,rgba(6,5,4,.78) 18%,rgba(6,5,4,.30) 54%,rgba(6,5,4,0) 100%);
}
/* 四周极轻的暗角 —— 印刷品的边缘本来就会暗一点 */
.mag .ph::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 18cqw rgba(0,0,0,.14);
}
/* ---- 风格标签：不做色块、不做圆角、不做阴影盒。一行小白字 + 一道细线 ---- */
.mag .tag{
  position:absolute;z-index:3;left:4.4%;bottom:5.4%;
  max-width:91%;white-space:nowrap;overflow:hidden;
  font-family:var(--m-sans);font-size:var(--f-tag);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;
  /* 多一层近距离阴影＝柔和的描边。压暗是保底，描边让笔画在浅色照片上也立得住。 */
  text-shadow:0 0 1px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.8),0 1px 6px rgba(0,0,0,.72);
}
.mag .tag::before{content:'';position:absolute;left:0;top:-.95em;width:4.6cqw;height:1px;
  background:currentColor;opacity:.85}
.mag .tag i{font-style:normal;opacity:.68;margin-left:.6em;letter-spacing:.12em}
.mag .tag--r{left:auto;right:4.4%}
.mag .tag--r::before{left:auto;right:0}
/* 图上的小斜体编号 */
.mag .fno{position:absolute;z-index:3;right:4.4%;top:4.4%;font-family:var(--m-serif);
  font-style:italic;font-size:2.5cqw;line-height:1;color:#fff;opacity:.85;
  text-shadow:0 0 1px rgba(0,0,0,.9),0 1px 4px rgba(0,0,0,.7)}

/* 比例工具类：版面写下的形状 */
.mag .r-11{--r:1/1}
.mag .r-45{--r:4/5}
.mag .r-34{--r:3/4}
.mag .r-43{--r:4/3}
.mag .r-32{--r:3/2}
.mag .r-169{--r:16/9}
.mag .r-1610{--r:16/10}
.mag .r-219{--r:21/9}
.mag .ph.fill{aspect-ratio:auto;height:100%}
/* 取景位置：竖图裁成横版时，重心在中上（窗/家具），不是几何中心 */
.mag .op-hi{--op:50% 34%}
.mag .op-mid{--op:50% 48%}
.mag .op-ultra{--op:50% 38%}

/* ======================================================================
   6. 各页专属版面
   ====================================================================== */

/* --- P01 开卷 --- */
.mag .p-cover{display:flex;flex-direction:column}
.mag .wordmark{font-family:var(--m-serif);font-weight:400;font-size:var(--f-mark);line-height:.92;
  letter-spacing:.02em;margin:2.4cqw 0 0}
.mag .wm-en{font-family:var(--m-sans);font-size:var(--f-k);letter-spacing:.42em;
  text-transform:uppercase;color:var(--m-faint);margin:1.6cqw 0 0}
/* 封面不再罗列 20 个风格 —— 那是封底的活。
   两处都列，既重复，也把这张图挤到只能放 68% 宽、高 517px，
   整页需要 1013px 而版心只有 700px（图被 flex 压扁了才「看起来没溢出」）。 */
.mag .p-cover .ph{margin:4cqw 0 0;width:46%;align-self:flex-end}
.mag .cvfoot{display:flex;justify-content:space-between;gap:3cqw;align-items:baseline;
  margin-top:auto;padding-top:2.6cqw;border-top:1px solid var(--m-hair)}

/* --- P02 对开：竖版满高出血 --- */
.mag .p-split .side{padding:1cqw 0 0 6.4cqw;display:flex;flex-direction:column}
/* 标题和它上面那行小标之间留一口气（k 自己的行高只够到 4.8px，紧） */
.mag .p-split .side h2{margin-top:1.2cqw}
.mag .p-split .side .cap{max-width:33cqw}
/* 文案连排、分隔线贴底 —— 空白留到页脚那一侧。
   反过来（文案贴底、中间空）会在版心正中央裂出一道 380px 的口子，
   读起来像「这页没排完」。 */
.mag .p-split .side .bt{margin-top:2.6cqw}
.mag .p-split .line{display:flex;gap:2cqw;align-items:baseline;margin-top:auto;
  padding-top:1.6cqw;border-top:1px solid var(--m-hair)}
.mag .p-split .line b{font-family:var(--m-serif);font-style:italic;font-weight:400;
  color:var(--m-dot);font-size:var(--f-d4);line-height:1}

/* --- P03 错位双图 --- */
.mag .ovl{position:relative;margin-top:-13cqw;padding-right:2cqw}
.mag .ovl .ph{width:47%;margin-left:auto}
.mag .ovl .note{position:absolute;left:0;top:6cqw;width:44%;
  font-family:var(--m-serif);font-style:italic;
  font-size:var(--f-d4);line-height:1.5;color:var(--m-ink);margin:0}
.mag .arc{position:absolute;left:38%;top:0;width:22cqw;overflow:visible}
.mag .arc path{fill:none;stroke:var(--m-dot);stroke-width:1}
.mag .arc .tip{fill:var(--m-dot)}

/* --- P04 满幅出血 + 压图字 --- */
.mag .p-bleed .ph{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.mag .p-bleed .ph::before{display:none}   /* 满幅页有自己的渐变，别叠两层 */
.mag .p-bleed .on{position:absolute;left:0;right:0;bottom:0;padding:10cqw 6.8cqw 7cqw;color:#fff;
  z-index:3;
  background:linear-gradient(to top,
    rgba(6,5,4,.9) 0%,rgba(6,5,4,.66) 26%,rgba(6,5,4,.36) 54%,
    rgba(6,5,4,.12) 78%,rgba(6,5,4,0) 100%)}
.mag .p-bleed .on .k{color:rgba(255,255,255,.82)}
.mag .p-bleed .on .cap{color:rgba(255,255,255,.86);margin-top:2.6cqw;max-width:64cqw}
.mag .p-bleed .big{margin-top:1.6cqw}
.mag .p-bleed .ph .tag{z-index:4}

/* --- P05 竖排 --- */
.mag .p-vert{display:flex;gap:5cqw;align-items:stretch}
.mag .p-vert .ph{width:52%;flex:0 0 auto}
.mag .p-vert .vtx{margin-left:auto;display:flex;gap:3.4cqw;justify-content:flex-end}
.mag .vt-t{writing-mode:vertical-rl;font-family:var(--m-serif);font-weight:400;
  font-size:var(--f-d1);line-height:1;letter-spacing:.1em;margin:0;max-height:74cqw}
.mag .vt-s{writing-mode:vertical-rl;font-family:var(--m-sans);font-size:var(--f-k);
  letter-spacing:.3em;text-transform:uppercase;color:var(--m-faint);margin:0}

/* --- P06 巨数 + 超宽横图 --- */
.mag .p-num .row{display:flex;justify-content:space-between;align-items:flex-start;gap:4cqw}
.mag .huge{font-family:var(--m-serif);font-weight:400;font-size:var(--f-huge);line-height:.8;
  letter-spacing:-.02em;margin:0}
.mag .huge i{font-style:normal;color:var(--m-dot)}
.mag .p-num .side{text-align:right;padding-top:1.4cqw}
.mag .p-num .side .cap{margin-top:1.4cqw}
.mag .p-num .ph{margin-top:auto}
.mag .p-num .meta{margin-top:2.6cqw;text-align:right}
.mag .ruler{height:2.6cqw;margin-top:2.4cqw;
  background:repeating-linear-gradient(to right,var(--m-hair) 0 1px,transparent 1px 2.6cqw);
  border-top:1px solid var(--m-hair)}

/* --- P07 引文 --- */
.mag .p-quote{display:flex;flex-direction:column;justify-content:center;padding:8cqw 0;
  border-top:1px solid var(--m-hair);border-bottom:1px solid var(--m-hair)}
.mag .p-quote blockquote{margin:4.6cqw 0 0;font-family:var(--m-serif);font-weight:400;
  font-size:var(--f-d2);line-height:1.44;letter-spacing:.01em}
.mag .p-quote .k{margin-top:5cqw}

/* --- P08 图录格 ---
   ★ 这里踩过一次：第一版照搬样张的「三行五种比例」，在 1:1.4 的页里需要 949px，
     而版心只有 700px —— overflow:hidden 会把它静默裁掉，只是「画面少了点什么」。
     改成两行：上排两个横图，下排三个竖图。五种比例收成两种，但一页真的装满。 */
.mag .cell{display:flex;flex-direction:column;gap:1.4cqw;min-width:0}
.mag .cell .k{letter-spacing:.14em}
.mag .g5 .a{grid-column:1/4}
.mag .g5 .b{grid-column:4/7}
.mag .g5 .c{grid-column:1/3}
.mag .g5 .d{grid-column:3/5}
.mag .g5 .e{grid-column:5/7}

/* --- P09 材质：一条真实的色阶 --- */
.mag .ramp{display:grid;gap:1.1cqw;margin:3.4cqw 0 0}
.mag .ramp span{display:block;min-width:0}
.mag .ramp i{display:block;height:11cqw;background:var(--c)}
.mag .ramp u{display:block;text-decoration:none;font-family:var(--m-sans);font-size:1.55cqw;
  letter-spacing:.14em;text-transform:uppercase;color:var(--m-faint);margin-top:1.2cqw}
.mag .ramp-cap{margin-top:2.4cqw;color:var(--m-soft)}
.mag .p-mat .body{display:flex;gap:4.6cqw;align-items:flex-start;margin-top:auto}
.mag .p-mat .body .ph{width:46%;flex:0 0 auto}
.mag .p-mat .body .cap{flex:1}

/* --- P10 字重击 --- */
.mag .p-mega .top{display:flex;justify-content:space-between;align-items:flex-start;gap:4cqw}
.mag .p-mega .top .ph{width:32%;flex:0 0 auto}
.mag .p-mega .top .rt{text-align:right}
.mag .mega{font-family:var(--m-serif);font-weight:400;font-size:var(--f-mega);line-height:.86;
  letter-spacing:-.03em;margin:3cqw 0 0;text-align:right}
.mag .mega i{font-style:normal;color:var(--m-dot)}
.mag .idx{list-style:none;margin:auto 0 0;padding:0;border-top:1px solid var(--m-hair)}
.mag .idx li{display:flex;gap:2.6cqw;align-items:baseline;border-bottom:1px solid var(--m-hair-2);
  padding:1.9cqw 0;font-size:var(--f-cap);letter-spacing:.12em;color:var(--m-ink)}
.mag .idx b{font-family:var(--m-serif);font-style:italic;font-weight:400;color:var(--m-dot);
  font-size:var(--f-d4);line-height:1;min-width:8cqw}
.mag .idx s{text-decoration:none;font-family:var(--m-sans);font-size:var(--f-k);
  letter-spacing:.18em;color:var(--m-faint);margin-left:auto}

/* --- P11 正文环绕 --- */
.mag .p-wrap{display:flex;flex-direction:column}
.mag .p-wrap .flow{display:block}   /* ★ 必须 block：flex 容器里的 float 不让文字绕行 */
.mag .p-wrap .fig{float:right;width:46%;margin:0 0 2.4cqw 3.2cqw}
.mag .p-wrap .head{margin:0 0 3cqw}
.mag .p-wrap .after{clear:both}
.mag .p-wrap .tx{margin-top:2.6cqw}
.mag .p-wrap .coda{margin-top:auto;padding-top:3.4cqw;border-top:1px solid var(--m-hair);
  display:flex;gap:4cqw;align-items:baseline}
.mag .p-wrap .coda .k{flex:0 0 auto}
.mag .p-wrap .coda .cap{flex:1}

/* --- P12 对照：同一张图，两种取景 --- */
.mag .p-cmp .pair{display:grid;grid-template-columns:1fr auto 1fr;gap:3cqw;align-items:center;
  margin-top:3cqw}
.mag .p-cmp .vs{font-family:var(--m-sans);font-size:var(--f-cap);color:var(--m-dot);letter-spacing:.1em}
.mag .p-cmp .lab{font-family:var(--m-sans);font-size:var(--f-k);letter-spacing:.16em;
  text-transform:uppercase;color:var(--m-soft);margin:1.6cqw 0 0}
.mag .p-cmp .same{display:flex;justify-content:space-between;gap:2cqw;margin-top:2.4cqw;
  font-family:var(--m-sans);font-size:var(--f-k);letter-spacing:.14em;color:var(--m-faint);
  text-transform:uppercase}
.mag .p-cmp .cap{margin-top:auto;padding-top:3.4cqw;border-top:1px solid var(--m-hair)}

/* --- 封底索引 --- */
.mag .colo{padding-bottom:4cqw}
.mag .colo .ob{display:flex;justify-content:space-between;align-items:baseline;gap:3cqw;
  padding-bottom:2.2cqw;border-bottom:1px solid var(--m-hair)}
.mag .colo .ob b{font-family:var(--m-serif);font-weight:400;font-size:var(--f-d4);letter-spacing:.02em}
.mag .colo .ob span{font-family:var(--m-sans);font-size:var(--f-k);letter-spacing:.2em;
  text-transform:uppercase;color:var(--m-faint)}
.mag .colo .sslist{margin:4.4cqw 0 0;padding:0;list-style:none;
  columns:3;column-gap:4cqw}
.mag .colo .sslist li{break-inside:avoid;padding:.8cqw 0;font-size:var(--f-cap);letter-spacing:.1em;
  display:flex;justify-content:space-between;gap:1.2cqw}
.mag .colo .sslist li u{text-decoration:none;font-family:var(--m-sans);font-size:var(--f-k);
  color:var(--m-faint)}
.mag .colo .sslist li a{border-bottom:1px solid transparent}
.mag .colo .sslist li a:hover{border-bottom-color:var(--m-dot)}
.mag .colo .endnote{margin-top:3.4cqw;padding-top:2.6cqw;border-top:1px solid var(--m-hair);
  display:flex;justify-content:space-between;gap:3cqw;flex-wrap:wrap}
.mag .colo .big-line{font-family:var(--m-serif);font-size:6.4cqw;line-height:1.24;
  margin:4cqw 0 0;letter-spacing:.01em}

/* ======================================================================
   7. 小屏：给字号下限。
   ★ 手机优先不等于手机上只有一种尺寸 —— 390 与 320 是两种。
   ====================================================================== */
/* 底部固定操作栏只在 ≤900px 出现（layout.css 的断点），
   所以让位也只在这以下给 —— 桌面不该白留 62px。 */
@media (max-width:900px){
  .mag{padding-bottom:calc(var(--tabbar-h, 62px) + 3vw)}
}

@media (max-width:640px){
  .mag .pg__in{
    --f-tx:max(13px,2.5cqw);
    --f-cap:max(11.6px,2.1cqw);
    --f-k:max(11px,2.05cqw);
    --f-tag:max(10.4px,1.75cqw);
  }
  /* 浮动图在窄屏上留够文字。
     40% 是量出来的：42% 时整页需要 426px，而版心只有 402px —— 差 24px，
     图上不报错、不报警，只是最后两行正文被静默裁掉。 */
  .mag .p-wrap .fig{width:40%}
  .mag .p-wrap .coda{padding-top:2.6cqw}
  /* 环绕页的图号是编辑标记，手机上那 33px 更值得留给正文 */
  .mag .p-wrap .after{display:none}
  .mag .p-cover .ph{width:48%}
  /* 封底：手机上先把「结语」这一行收起来，索引本身必须完整 */
  .mag .colo .big-line{display:none}
  .mag .colo .endnote{margin-top:2.6cqw;padding-top:2.2cqw}
  .mag .colo .endnote p:last-child{display:none}
  .mag .colo .sslist li{padding:.6cqw 0}
}
@media (max-width:370px){
  .mag .p-wrap .fig{width:38%}
  .mag .p-vert .ph{width:48%}
  .mag .colo .sslist{columns:2}
  .mag .p-cover .ph{width:56%}
}

/* ======================================================================
   8. 入场：只用 opacity。
   ★ 绝不用 transform —— 它会造出「绝对定位的包含块」，
     页里所有 absolute 的标签 / 页码会改以那个动画元素为参考点，动一下错一片。
   ====================================================================== */
.mag .rv{opacity:0;transition:opacity .7s ease}
.mag .rv.in{opacity:1}
@media (prefers-reduced-motion:reduce){
  .mag .rv{opacity:1;transition:none}
}

/* ======================================================================
   9. 唯一一条作用域外的规则
   ----------------------------------------------------------------------
   主题给预约区的是米白 #faf9f7。它紧跟在整整一册纯白之后，
   那点暖白就是「脏」—— 而「背景永远纯白」是这一版的铁律。
   ====================================================================== */
body.page-template-page-anli .booking { background: #FFFFFF; }

/* ======================================================================
   10. 内页 · 施工工艺（/gongyi）
   ----------------------------------------------------------------------
   来源：聚龙装饰《工艺介绍》p6–p13 的「五大标准施工工艺」34 项细节。
   访客定了三条：① 全站不出现「聚龙装饰」这个主体；② 施工实拍一张不用；
   ③ 单独成页 /gongyi/。

   所以这一页是**纯文字**：不摆卡片、不描外框、不铺底色，只用
   细线 + 留白 + 字号层级 —— 与首页 .craft-edit、收费页 .scope-item
   同一套语汇（10px 字距编号 / 衬线标题 / soft 正文 / line 细线）。

   底色用 --bg 纯白而不用 --paper 米白：这一页有 8 屏长，
   暖白铺满整屏就显脏（访客原话：「背景永远不要搞的很脏，就要白色」）。

   排版上手机优先：索引在窄屏收成「编号 | 名称 | 条数」的目录行，
   宽屏才摊成横排五格；细节列表始终是「左侧悬挂编号 + 右侧正文」。
   ====================================================================== */
/* 顶部留 7vh：页首是 --bare（只有面包屑、下内边距已收成 0），
   所以这里的上边距就是「面包屑 → 主标题」的全部呼吸。 */
.craft-page { background: var(--bg); padding: clamp(48px, 7vh, 110px) var(--pad) clamp(80px, 12vh, 170px); }

.craft-page__head { text-align: center; margin-bottom: clamp(54px, 8vh, 100px); }
.craft-page__title {
	font-family: var(--serif);
	/* 整页唯一的 h1，也是这一页的主视觉 —— 必须比章节名（h3）大。
	   手机 26px 时 11 个字 + .1em 字距 = 312px，正好在 346px 容器里一行放下。 */
	font-size: clamp(26px, 5.8vw, 50px);
	line-height: 1.45;
	letter-spacing: .1em;
	margin-right: -.1em;
	margin-top: clamp(16px, 2.2vh, 24px);
}
.craft-page__lead {
	max-width: 620px;
	margin: clamp(20px, 3vh, 32px) auto 0;
	text-align: left;
	font-size: 13px;
	line-height: 2.3;
	letter-spacing: .06em;
	color: var(--soft);
	/* 末行不留孤字：Chrome 117+ / Safari 17.5+ 生效；
	   旧内核（部分国产安卓）不认识就自然退回普通换行，不会出问题。 */
	text-wrap: pretty;
}

/* 五大工艺索引 —— 靠留白分隔，每项顶端一条细线，悬停加深 */
.craft-page__index {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(18px, 3.4vw, 52px);
	max-width: 1000px;
	margin: 0 auto clamp(64px, 9vh, 120px);
}
.craft-idx {
	min-width: 96px;
	padding-top: clamp(14px, 1.8vh, 18px);
	border-top: 1px solid var(--line);
	text-align: center;
	transition: border-color .4s var(--ease-soft);
}
.craft-idx:hover { border-top-color: var(--fg); }
.craft-idx__num { display: block; font-size: 10px; letter-spacing: .4em; color: var(--muted); margin-bottom: 10px; }
.craft-idx__name { display: block; font-family: var(--serif); font-size: clamp(15px, 1.6vw, 19px); letter-spacing: .16em; margin-right: -.16em; }
.craft-idx__count { display: block; font-size: 10px; letter-spacing: .2em; color: var(--muted); margin-top: 8px; }

/* 章节 */
.craft-page__body { max-width: 880px; margin: 0 auto; }
.craft-chapter { scroll-margin-top: calc(var(--nav-h) + 24px); }
.craft-chapter + .craft-chapter {
	margin-top: clamp(60px, 9vh, 120px);
	padding-top: clamp(60px, 9vh, 120px);
	border-top: 1px solid var(--line-strong);
}
.craft-chapter__head { margin-bottom: clamp(30px, 4.5vh, 52px); }
.craft-chapter__kicker {
	display: flex;
	align-items: baseline;
	gap: 14px;
	font-size: 10px;
	letter-spacing: .4em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: clamp(14px, 2vh, 22px);
}
.craft-chapter__no { color: var(--fg); }
.craft-chapter__name {
	font-family: var(--serif);
	/* 排在 h1（clamp 26–50px）之下：手机 22px / 桌面 38px。
	   「水路工艺」四个字，小反而更精致 —— 这一页的骨架靠 01–34 的连续编号，
	   不靠字号堆。 */
	font-size: clamp(22px, 4.2vw, 38px);
	line-height: 1.25;
	letter-spacing: .12em;
	margin-right: -.12em;
}
.craft-chapter__note {
	max-width: 560px;
	margin-top: clamp(16px, 2.4vh, 26px);
	font-size: 13px;
	line-height: 2.2;
	letter-spacing: .06em;
	color: var(--soft);
}

/* 小节名（目前只有泥工的「砌筑 / 防水 · 铺贴」用） */
.craft-group__name {
	font-size: 11px;
	letter-spacing: .44em;
	color: var(--muted);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line-strong);
}

/* 细节列表 —— 左侧悬挂编号 + 右侧「小标题 + 正文」 */
.craft-list { list-style: none; margin: 0; padding: 0; }
.craft-item {
	display: flex;
	gap: clamp(16px, 3vw, 36px);
	padding: clamp(20px, 2.8vh, 30px) 0;
	border-bottom: 1px solid var(--line);
}
.craft-list > .craft-item:first-child { border-top: 1px solid var(--line); }
.craft-group__name + .craft-list > .craft-item:first-child { border-top: 0; }
.craft-item__num {
	flex: 0 0 auto;
	width: 2.4em;
	padding-top: .35em;
	font-size: 10px;
	letter-spacing: .3em;
	color: var(--muted);
}
.craft-item__name { font-family: var(--serif); font-size: clamp(16px, 1.8vw, 20px); letter-spacing: .12em; margin-bottom: 10px; }
.craft-item__text { max-width: 640px; font-size: 12.5px; line-height: 2.15; letter-spacing: .05em; color: var(--soft); }

@media (max-width: 640px) {
	.craft-item { gap: 14px; }
	.craft-item__num { width: 2.1em; }
	.craft-chapter + .craft-chapter { margin-top: 64px; padding-top: 64px; }
}

/* 窄屏：五格收成一列目录行（同一份 HTML，只是换了排布方向） */
@media (max-width: 520px) {
	.craft-page__index { flex-direction: column; align-items: stretch; gap: 0; max-width: 360px; }
	.craft-idx {
		display: flex;
		align-items: baseline;
		gap: 12px;
		text-align: left;
		padding: 16px 0;
	}
	.craft-idx__num { margin-bottom: 0; }
	.craft-idx__name { flex: 1; }
	.craft-idx__count { margin-top: 0; }
}

/* ============================================================
   第 11 节：在线预约页（/yuyue）
   ------------------------------------------------------------
   页面本体 = 预约说明（yuyue-guide）+ 预约表单（contact-reserve，与联系页共用）。
   底色刻意一白一米白：说明屏 var(--bg) 纯白、表单屏 var(--paper) 米白，
   两屏交界自然形成交替，不必额外加分割线。
   版式沿用施工工艺页那一套（宋体标题 / 10–13px 正文 / 行高 2.15–2.3 /
   .05–.44em 字距 / 极细顶线），手机端只换排布方向，不换版式。
   ============================================================ */
.yuyue-guide {
	background: var(--bg);
	padding: clamp(48px, 7vh, 110px) var(--pad) clamp(64px, 9vh, 130px);
}

.yuyue-guide__head {
	text-align: center;
	max-width: 760px;
	margin: 0 auto clamp(56px, 8vh, 110px);
}

.yuyue-guide__title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(24px, 5.4vw, 46px);
	line-height: 1.5;
	letter-spacing: .1em;
	margin-right: -.1em;
	margin-top: clamp(18px, 2.6vh, 30px);
}

.yuyue-guide__lead {
	max-width: 620px;
	margin: clamp(20px, 3vh, 32px) auto 0;
	text-align: left;
	font-size: 13px;
	line-height: 2.3;
	letter-spacing: .06em;
	color: var(--soft);
}

.yuyue-guide__jump { margin-top: clamp(20px, 3vh, 32px); }

.yuyue-guide__jump a {
	font-size: 11px;
	letter-spacing: .3em;
	color: var(--muted);
	padding-bottom: 3px;
	border-bottom: 1px solid var(--line-strong);
	transition: color .4s var(--ease-soft), border-color .4s var(--ease-soft);
}

.yuyue-guide__jump a:hover { color: var(--fg); border-bottom-color: var(--fg); }

/* 预约三步：编号在左、文字在右，逐条一条极细顶线（末条补底线收口） */
.yuyue-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 880px; }

.yuyue-step {
	display: flex;
	gap: clamp(16px, 3vw, 36px);
	padding: clamp(22px, 3vh, 32px) 0;
	border-top: 1px solid var(--line);
}

.yuyue-step:last-child { border-bottom: 1px solid var(--line); }

.yuyue-step__num {
	flex: 0 0 auto;
	width: 2.4em;
	padding-top: .35em;
	font-size: 10px;
	letter-spacing: .3em;
	color: var(--muted);
}

.yuyue-step__name {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(16px, 1.8vw, 20px);
	letter-spacing: .12em;
	margin-bottom: 10px;
}

.yuyue-step__text {
	max-width: 640px;
	font-size: 12.5px;
	line-height: 2.15;
	letter-spacing: .05em;
	color: var(--soft);
}

/* 预约须知：小标题做整行分隔，四条走 dt/dd 左右结构 */
.yuyue-notes { max-width: 880px; margin: clamp(56px, 8vh, 100px) auto 0; }

.yuyue-notes__kicker {
	font-size: 11px;
	letter-spacing: .44em;
	color: var(--muted);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line-strong);
}

.yuyue-notes__list { margin: 0; }

.yuyue-note {
	display: flex;
	flex-wrap: wrap;
	gap: 0 clamp(16px, 3vw, 36px);
	padding: clamp(18px, 2.4vh, 26px) 0;
	border-bottom: 1px solid var(--line);
}

.yuyue-note__name {
	flex: 0 0 6.5em;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 13.5px;
	letter-spacing: .12em;
}

.yuyue-note__text {
	flex: 1 1 320px;
	margin: 0;
	max-width: 640px;
	font-size: 12.5px;
	line-height: 2.15;
	letter-spacing: .05em;
	color: var(--soft);
}

/* 电话直拨线 —— 表单之外的第二条路，给「不想填表」的人 */
.yuyue-guide__tel {
	margin: clamp(44px, 6vh, 76px) auto 0;
	text-align: center;
	font-size: 12.5px;
	line-height: 2.2;
	letter-spacing: .08em;
	color: var(--muted);
}

.yuyue-guide__tel a {
	font-family: var(--serif);
	font-size: clamp(19px, 2.4vw, 26px);
	letter-spacing: .12em;
	color: var(--fg);
	margin: 0 .1em;
	padding-bottom: 2px;
	border-bottom: 1px solid var(--line-strong);
	transition: border-color .4s var(--ease-soft);
}

.yuyue-guide__tel a:hover { border-bottom-color: var(--fg); }
.yuyue-guide__tel span { display: block; margin-top: 6px; }

@media (max-width: 640px) {
	.yuyue-step { gap: 14px; }
	.yuyue-step__num { width: 2.1em; }
	/* 窄屏「接单范围」这类小标题占不满一行左右结构，改成标题独占一行 */
	.yuyue-note__name { flex: 0 0 100%; margin-bottom: 8px; }
}

/* ===== MOOTO MAGAZINE · END ===== */