/**
 * 组件样式。
 */

/* ══════════════════════════════════════════════════════
 * 站点头部
 * ══════════════════════════════════════════════════════ */

.mf-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: var(--mf-z-header);
	padding-block: var(--mf-space-6);
	transition:
		background var(--mf-duration) var(--mf-ease),
		padding var(--mf-duration) var(--mf-ease),
		border-color var(--mf-duration) var(--mf-ease);
	border-bottom: 1px solid transparent;
}

/*
 * 首屏状态：头部压在照片上，文字必须为白。
 *
 * 页面顶部渐变提供额外的可读性保障 —— 浅色照片的
 * 顶部区域会让导航文字消失。
 */
.mf-header::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 180%;
	background: linear-gradient(
		to bottom,
		rgba(6, 6, 7, 0.72),
		rgba(6, 6, 7, 0)
	);
	pointer-events: none;
	opacity: 1;
	transition: opacity var(--mf-duration) var(--mf-ease);
	z-index: -1;
}

.mf-header[data-scrolled="true"]::before {
	opacity: 0;
}

/* 首屏中的头部文字统一为白。 */
.mf-header:not([data-scrolled="true"]) .mf-brand,
.mf-header:not([data-scrolled="true"]) .mf-nav__link,
.mf-header:not([data-scrolled="true"]) .mf-lang__item {
	color: rgba(255, 255, 255, 0.86);
}

.mf-header:not([data-scrolled="true"]) .mf-nav__link:hover,
.mf-header:not([data-scrolled="true"]) .mf-brand:hover {
	color: var(--mf-accent);
}

.mf-header:not([data-scrolled="true"]) .mf-burger__line {
	background: #fff;
}

/*
 * 滚动后收缩并浮现背景。
 * 首屏保持透明，让照片占满视野。
 */
.mf-header[data-scrolled="true"] {
	padding-block: var(--mf-space-3);
	background: var(--mf-bg-overlay);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	border-bottom-color: var(--mf-line);
}

.mf-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mf-space-8);
}

.mf-brand {
	font-family: var(--mf-font-display);
	font-size: var(--mf-text-lg);
	font-weight: var(--mf-weight-normal);
	letter-spacing: var(--mf-tracking-wide);
	white-space: nowrap;
}

.mf-brand:hover {
	color: var(--mf-accent);
}

.mf-brand__mark {
	display: block;
	max-height: 2rem;
	width: auto;
}

/* ── 主导航 ────────────────────────────────────────── */

.mf-nav {
	display: flex;
	align-items: center;
	gap: var(--mf-space-8);
}

.mf-nav__list {
	display: flex;
	align-items: center;
	gap: var(--mf-space-8);
}

.mf-nav__link {
	position: relative;
	display: inline-block;
	padding-block: var(--mf-space-2);
	font-size: var(--mf-text-sm);
	letter-spacing: var(--mf-tracking-wide);
	color: var(--mf-text-muted);
}

/*
 * 下划线从中心展开。
 * 比直接变色更有仪式感，且不引起布局偏移。
 */
.mf-nav__link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	background: var(--mf-accent);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--mf-duration) var(--mf-ease);
}

.mf-nav__link:hover,
.mf-nav__item.current-menu-item > .mf-nav__link {
	color: var(--mf-text);
}

.mf-nav__link:hover::after,
.mf-nav__item.current-menu-item > .mf-nav__link::after {
	transform: scaleX(1);
}

/* ── 语言切换 ──────────────────────────────────────── */

.mf-lang {
	display: flex;
	align-items: center;
	gap: var(--mf-space-2);
	font-size: var(--mf-text-xs);
	letter-spacing: var(--mf-tracking-wide);
}

.mf-lang__item {
	color: var(--mf-text-faint);
	text-transform: uppercase;
}

.mf-lang__item[aria-current="true"] {
	color: var(--mf-accent);
}

/* 无译文时按钮置灰，不伪造链接。 */
.mf-lang__item[aria-disabled="true"] {
	opacity: 0.32;
	pointer-events: none;
}

.mf-lang__sep {
	/*
	 * 分隔符虽然标了 aria-hidden，视觉上仍需可辨。
	 *
	 * 原用 --mf-line-strong（0.16 透明度）—— 那是给分隔线用的
	 * 亮度，落在文字上只有 1.5:1，几乎看不见。审计工具会报，
	 * 而且实际观感是「中 EN」之间空了一格而非有分隔。
	 */
	color: var(--mf-text-faint);
}

/* ── 移动端开关 ────────────────────────────────────── */

.mf-burger {
	display: none;
	width: 2.5rem;
	height: 2.5rem;
	position: relative;
}

.mf-burger__line {
	position: absolute;
	left: 50%;
	width: 1.25rem;
	height: 1px;
	background: var(--mf-text);
	transform: translateX(-50%);
	transition:
		transform var(--mf-duration) var(--mf-ease),
		opacity var(--mf-duration-fast) var(--mf-ease);
}

.mf-burger__line:nth-child(1) { top: calc(50% - 4px); }
.mf-burger__line:nth-child(2) { top: 50%; }
.mf-burger__line:nth-child(3) { top: calc(50% + 4px); }

.mf-burger[aria-expanded="true"] .mf-burger__line:nth-child(1) {
	top: 50%;
	transform: translateX(-50%) rotate(45deg);
}

.mf-burger[aria-expanded="true"] .mf-burger__line:nth-child(2) {
	opacity: 0;
}

.mf-burger[aria-expanded="true"] .mf-burger__line:nth-child(3) {
	top: 50%;
	transform: translateX(-50%) rotate(-45deg);
}

@media (max-width: 900px) {
	.mf-burger {
		display: block;
	}

	.mf-nav {
		position: fixed;
		inset: 0;
		flex-direction: column;
		justify-content: center;
		gap: var(--mf-space-12);
		background: var(--mf-bg-sunken);
		opacity: 0;
		visibility: hidden;
		transition:
			opacity var(--mf-duration) var(--mf-ease),
			visibility var(--mf-duration) var(--mf-ease);
	}

	.mf-nav[data-open="true"] {
		opacity: 1;
		visibility: visible;
	}

	.mf-nav__list {
		flex-direction: column;
		gap: var(--mf-space-6);
	}

	.mf-nav__link {
		font-family: var(--mf-font-display);
		font-size: var(--mf-text-2xl);
	}
}

/* ══════════════════════════════════════════════════════
 * 首屏
 * ══════════════════════════════════════════════════════ */

.mf-hero {
	position: relative;
	min-height: 100svh;
	display: grid;
	align-items: end;
	overflow: hidden;
}

.mf-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.mf-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * 遮罩保证叠加文字在任何照片上都可读。
 * 不加遮罩时，浅色照片会让白字完全消失。
 */
.mf-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--mf-scrim);
	pointer-events: none;
}

.mf-hero__content {
	position: relative;
	z-index: 2;
	padding-block-end: var(--mf-space-24);
	/*
	 * 首屏文字显式设为近白，不继承主题文字色。
	 *
	 * 亮色模式下 --mf-text 是深色，压在照片上会完全消失。
	 * 首屏永远是「照片上的文字」，其颜色与主题明暗无关。
	 */
	color: #fff;
}

.mf-hero__title {
	font-size: var(--mf-text-hero);
	font-weight: var(--mf-weight-light);
	line-height: var(--mf-leading-none);
	letter-spacing: var(--mf-tracking-tight);
	/*
	 * 用 em 而非 ch 限宽。
	 *
	 * ch 是「0」字符的宽度，随字体变化 —— 网络字体加载完成
	 * 的瞬间容器宽度会跟着变，标题换行位置改变，下方内容
	 * 全部重排。em 只跟字号相关，字体切换时保持稳定。
	 *
	 * 16ch 在 Cormorant 下约等于 8em。
	 */
	max-width: 9em;
	color: #fff;
	/*
	 * 文字阴影是遮罩之外的第二道保险。
	 * 遇到极亮或高频细节的照片时，纯遮罩仍可能不足；
	 * 轻微的暗部投影能保证字形边缘始终清晰。
	 */
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

.mf-hero__subtitle {
	margin-top: var(--mf-space-6);
	max-width: 44ch;
	font-size: var(--mf-text-lg);
	color: rgba(255, 255, 255, 0.78);
	text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
}

.mf-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mf-space-6);
	margin-top: var(--mf-space-8);
}

/*
 * 首屏按钮同样需要脱离主题色继承。
 * 次要按钮在照片上必须有足够的边框对比度。
 */
.mf-hero__meta .mf-btn {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.42);
	background: rgba(0, 0, 0, 0.24);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.mf-hero__meta .mf-btn:hover {
	color: var(--mf-accent);
	border-color: var(--mf-accent);
	background: rgba(0, 0, 0, 0.4);
}

.mf-hero__meta .mf-btn--primary {
	color: #0a0a0b;
	background: var(--mf-accent);
	border-color: var(--mf-accent);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.mf-hero__meta .mf-btn--primary:hover {
	color: var(--mf-accent);
	background: rgba(0, 0, 0, 0.4);
}

/* ── 滚动提示 ──────────────────────────────────────── */

.mf-scroll-hint {
	position: absolute;
	bottom: var(--mf-space-8);
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mf-space-3);
	font-size: var(--mf-text-xs);
	letter-spacing: var(--mf-tracking-widest);
	text-transform: uppercase;
	/* 位于照片之上，颜色不随主题明暗变化。 */
	color: rgba(255, 255, 255, 0.5);
}

.mf-scroll-hint__line {
	width: 1px;
	height: 3rem;
	background: linear-gradient(to bottom, var(--mf-accent-dim), transparent);
	position: relative;
	overflow: hidden;
}

/* 光点循环下落，暗示可滚动。 */
.mf-scroll-hint__line::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: -100%;
	height: 100%;
	background: linear-gradient(to bottom, transparent, var(--mf-accent));
	animation: mf-scroll-pulse 2.4s var(--mf-ease) infinite;
}

@keyframes mf-scroll-pulse {
	to {
		top: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mf-scroll-hint__line::after {
		animation: none;
		top: 0;
		opacity: 0.4;
	}
}

/* ══════════════════════════════════════════════════════
 * 画廊网格
 * ══════════════════════════════════════════════════════ */

.mf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: var(--mf-grid-gap);
}

/*
 * 非对称网格。
 * 首项跨两列两行，打破规整感 —— 全等网格看着安全但平庸，
 * 尺寸变化让视线有落点，也符合杂志的编辑逻辑。
 */
.mf-grid--editorial {
	grid-auto-rows: minmax(220px, auto);
}

@media (min-width: 900px) {
	.mf-grid--editorial > :nth-child(6n + 1) {
		grid-column: span 2;
		grid-row: span 2;
	}

	.mf-grid--editorial > :nth-child(6n + 4) {
		grid-row: span 2;
	}
}

.mf-card {
	position: relative;
	overflow: hidden;
	background: var(--mf-bg-raised);
	border-radius: var(--mf-radius);
}

.mf-card__link {
	display: block;
	height: 100%;
}

.mf-card__media {
	position: relative;
	height: 100%;
	overflow: hidden;
	/*
	 * 占位比例防止累积布局偏移。
	 * 画廊页不做这个，CLS 必然爆炸 —— 二十张图同时加载，
	 * 每张都会把下方内容推走一次。
	 */
	aspect-ratio: 3 / 4;
}

.mf-grid--editorial .mf-card__media {
	aspect-ratio: auto;
	min-height: 100%;
}

.mf-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		transform var(--mf-duration-slower) var(--mf-ease),
		filter var(--mf-duration-slow) var(--mf-ease);
}

/*
 * 悬停时轻微放大并提亮。
 * 幅度刻意克制 —— 过大的缩放在密集网格中会显得廉价。
 */
.mf-card:hover .mf-card__media img {
	transform: scale(1.04);
	filter: brightness(1.06);
}

/* ── 卡片信息层 ────────────────────────────────────── */

.mf-card__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--mf-space-6);
	background: linear-gradient(to top, rgba(6, 6, 7, 0.9), transparent);
	transform: translateY(0.5rem);
	opacity: 0;
	transition:
		transform var(--mf-duration) var(--mf-ease),
		opacity var(--mf-duration) var(--mf-ease);
}

.mf-card:hover .mf-card__body,
.mf-card:focus-within .mf-card__body {
	transform: translateY(0);
	opacity: 1;
}

/*
 * 触屏设备没有悬停态，信息必须常驻。
 * 依赖 hover 展示关键信息是移动端的常见失误。
 */
@media (hover: none) {
	.mf-card__body {
		transform: none;
		opacity: 1;
	}
}

.mf-card__title {
	font-family: var(--mf-font-display);
	font-size: var(--mf-text-lg);
	font-weight: var(--mf-weight-normal);
	line-height: var(--mf-leading-snug);
	color: #fff;
}

.mf-card__meta {
	margin-top: var(--mf-space-2);
	font-size: var(--mf-text-xs);
	letter-spacing: var(--mf-tracking-wide);
	color: rgba(255, 255, 255, 0.62);
}

/* ══════════════════════════════════════════════════════
 * 区块标题
 * ══════════════════════════════════════════════════════ */

.mf-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--mf-space-8);
	margin-bottom: var(--mf-space-12);
	padding-bottom: var(--mf-space-6);
	border-bottom: 1px solid var(--mf-line);
}

.mf-section-head__title {
	font-size: var(--mf-text-2xl);
}

.mf-section-head__link {
	flex-shrink: 0;
	font-size: var(--mf-text-sm);
	letter-spacing: var(--mf-tracking-wide);
	color: var(--mf-text-muted);
	white-space: nowrap;
}

.mf-section-head__link:hover {
	color: var(--mf-accent);
}

/* ══════════════════════════════════════════════════════
 * 按钮
 * ══════════════════════════════════════════════════════ */

.mf-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--mf-space-3);
	padding: var(--mf-space-4) var(--mf-space-8);
	font-size: var(--mf-text-sm);
	letter-spacing: var(--mf-tracking-wide);
	border: 1px solid var(--mf-line-strong);
	border-radius: var(--mf-radius);
	background: transparent;
	color: var(--mf-text);
	transition:
		border-color var(--mf-duration) var(--mf-ease),
		background var(--mf-duration) var(--mf-ease),
		color var(--mf-duration) var(--mf-ease);
}

.mf-btn:hover {
	border-color: var(--mf-accent);
	background: var(--mf-accent-glow);
	color: var(--mf-accent);
}

.mf-btn--primary {
	border-color: var(--mf-accent);
	background: var(--mf-accent);
	color: var(--mf-bg);
}

.mf-btn--primary:hover {
	background: transparent;
	color: var(--mf-accent);
}

/* ══════════════════════════════════════════════════════
 * 标签
 * ══════════════════════════════════════════════════════ */

.mf-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mf-space-2);
}

.mf-tag {
	display: inline-block;
	padding: var(--mf-space-1) var(--mf-space-3);
	font-size: var(--mf-text-xs);
	letter-spacing: var(--mf-tracking-wide);
	color: var(--mf-text-muted);
	border: 1px solid var(--mf-line);
	border-radius: var(--mf-radius);
	transition:
		border-color var(--mf-duration-fast) var(--mf-ease),
		color var(--mf-duration-fast) var(--mf-ease);
}

.mf-tag:hover {
	border-color: var(--mf-accent-dim);
	color: var(--mf-accent);
}

/* ══════════════════════════════════════════════════════
 * 分页
 * ══════════════════════════════════════════════════════ */

.mf-pagination {
	display: flex;
	justify-content: center;
	gap: var(--mf-space-2);
	margin-top: var(--mf-space-16);
}

.mf-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--mf-space-3);
	font-size: var(--mf-text-sm);
	color: var(--mf-text-muted);
	border: 1px solid transparent;
	border-radius: var(--mf-radius);
	transition:
		border-color var(--mf-duration-fast) var(--mf-ease),
		color var(--mf-duration-fast) var(--mf-ease);
}

.mf-pagination .page-numbers:hover {
	color: var(--mf-text);
	border-color: var(--mf-line);
}

.mf-pagination .page-numbers.current {
	color: var(--mf-accent);
	border-color: var(--mf-accent-dim);
}

/* ══════════════════════════════════════════════════════
 * 页脚
 * ══════════════════════════════════════════════════════ */

.mf-footer {
	margin-top: var(--mf-section-gap);
	padding-block: var(--mf-space-16) var(--mf-space-8);
	border-top: 1px solid var(--mf-line);
}

.mf-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--mf-space-12);
}

.mf-footer__title {
	font-size: var(--mf-text-xs);
	font-weight: var(--mf-weight-medium);
	letter-spacing: var(--mf-tracking-widest);
	text-transform: uppercase;
	color: var(--mf-text-faint);
	margin-bottom: var(--mf-space-4);
}

.mf-footer__list li + li {
	margin-top: var(--mf-space-2);
}

.mf-footer__list a {
	font-size: var(--mf-text-sm);
	color: var(--mf-text-muted);
}

.mf-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mf-space-4);
	margin-top: var(--mf-space-16);
	padding-top: var(--mf-space-6);
	border-top: 1px solid var(--mf-line);
	font-size: var(--mf-text-xs);
	color: var(--mf-text-faint);
}

/* ── 社交链接 ──────────────────────────────────────── */

.mf-social {
	display: flex;
	gap: var(--mf-space-4);
}

.mf-social a {
	font-size: var(--mf-text-xs);
	letter-spacing: var(--mf-tracking-wide);
	color: var(--mf-text-muted);
}

/* ══════════════════════════════════════════════════════
 * 灯箱
 * ══════════════════════════════════════════════════════ */

/*
 * 使用原生 dialog 元素。
 * 浏览器自带焦点陷阱、Esc 关闭与惰性化处理 ——
 * 自行实现这些无障碍行为既费力又容易出错。
 */
.mf-lightbox {
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	padding: 0;
	border: 0;
	background: var(--mf-bg-sunken);
	color: var(--mf-text);
}

.mf-lightbox::backdrop {
	background: rgba(6, 6, 7, 0.96);
}

.mf-lightbox__stage {
	display: grid;
	place-items: center;
	height: 100%;
	padding: var(--mf-space-16) var(--mf-space-8);
}

.mf-lightbox__image {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.mf-lightbox__close {
	position: absolute;
	top: var(--mf-space-6);
	right: var(--mf-space-6);
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	border: 1px solid var(--mf-line);
	border-radius: 50%;
	color: var(--mf-text-muted);
	transition:
		border-color var(--mf-duration-fast) var(--mf-ease),
		color var(--mf-duration-fast) var(--mf-ease);
}

.mf-lightbox__close:hover {
	border-color: var(--mf-accent);
	color: var(--mf-accent);
}

.mf-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
	display: grid;
	place-items: center;
	color: var(--mf-text-muted);
	transition: color var(--mf-duration-fast) var(--mf-ease);
}

.mf-lightbox__nav:hover {
	color: var(--mf-accent);
}

.mf-lightbox__nav--prev { left: var(--mf-space-4); }
.mf-lightbox__nav--next { right: var(--mf-space-4); }

.mf-lightbox__caption {
	position: absolute;
	inset-inline: 0;
	bottom: var(--mf-space-6);
	text-align: center;
	font-size: var(--mf-text-sm);
	color: var(--mf-text-muted);
}

.mf-lightbox__counter {
	font-variant-numeric: tabular-nums;
	color: var(--mf-text-faint);
}

/* ══════════════════════════════════════════════════════
 * 悬浮联系入口
 * ══════════════════════════════════════════════════════ */

.mf-contact-fab {
	position: fixed;
	right: var(--mf-space-6);
	bottom: var(--mf-space-6);
	z-index: var(--mf-z-sticky);
	display: inline-flex;
	align-items: center;
	gap: var(--mf-space-3);
	padding: var(--mf-space-4) var(--mf-space-6);
	background: var(--mf-accent);
	color: var(--mf-bg);
	border-radius: 999px;
	font-size: var(--mf-text-sm);
	letter-spacing: var(--mf-tracking-wide);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
	transition: transform var(--mf-duration) var(--mf-ease-spring);
}

.mf-contact-fab:hover {
	transform: translateY(-2px);
	color: var(--mf-bg);
}

@media (max-width: 640px) {
	.mf-contact-fab__label {
		display: none;
	}

	.mf-contact-fab {
		padding: var(--mf-space-4);
	}
}

/* ══════════════════════════════════════════════════════
 * 空状态
 * ══════════════════════════════════════════════════════ */

.mf-empty {
	padding: var(--mf-space-24) var(--mf-space-8);
	text-align: center;
	color: var(--mf-text-faint);
}

.mf-empty__title {
	font-family: var(--mf-font-display);
	font-size: var(--mf-text-xl);
	color: var(--mf-text-muted);
	margin-bottom: var(--mf-space-3);
}

/* ══════════════════════════════════════════════════════
 * 滚动揭示
 * ══════════════════════════════════════════════════════ */

/*
 * 隐藏态仅在 JS 成功执行后生效。
 *
 * 若把 opacity:0 直接写在 [data-mf-reveal] 上，JS 加载失败
 * 时内容会永久不可见 —— 这是渐进增强最常见的翻车方式。
 * .mf-js-reveal 由脚本添加，保证降级安全。
 */
.mf-js-reveal [data-mf-reveal] {
	opacity: 0;
	transform: translateY(1.5rem);
	transition:
		opacity var(--mf-duration-slow) var(--mf-ease),
		transform var(--mf-duration-slow) var(--mf-ease);
}

.mf-js-reveal [data-mf-reveal][data-revealed="true"] {
	opacity: 1;
	transform: none;
}

/* 错开入场，形成节奏感。 */
.mf-js-reveal [data-mf-reveal-delay="1"] { transition-delay: 90ms; }
.mf-js-reveal [data-mf-reveal-delay="2"] { transition-delay: 180ms; }
.mf-js-reveal [data-mf-reveal-delay="3"] { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
	.mf-js-reveal [data-mf-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ══════════════════════════════════════════════════════
 * 作品单页
 * ══════════════════════════════════════════════════════ */

.mf-work__cover {
	height: min(82svh, 900px);
	overflow: hidden;
}

.mf-work__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mf-work__header {
	padding-block: var(--mf-space-16) var(--mf-space-12);
	max-width: var(--mf-container-narrow);
	margin-inline: auto;
	text-align: center;
}

.mf-work__title {
	margin-top: var(--mf-space-4);
	font-size: var(--mf-text-3xl);
}

.mf-work__excerpt {
	margin-top: var(--mf-space-6);
	font-size: var(--mf-text-lg);
	color: var(--mf-text-muted);
}

.mf-work__terms {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--mf-space-2);
	margin-top: var(--mf-space-8);
}

.mf-work__body {
	padding-block: var(--mf-space-8) var(--mf-space-16);
}

/* ── 图集 ──────────────────────────────────────────── */

.mf-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
	gap: var(--mf-grid-gap);
}

.mf-gallery__item {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--mf-bg-raised);
	border-radius: var(--mf-radius);
	cursor: zoom-in;
	/* 占位防止图片加载时的布局偏移。 */
	aspect-ratio: 3 / 4;
}

.mf-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		transform var(--mf-duration-slower) var(--mf-ease),
		filter var(--mf-duration-slow) var(--mf-ease);
}

.mf-gallery__item:hover img {
	transform: scale(1.03);
	filter: brightness(1.05);
}

/* ── 相关作品 ──────────────────────────────────────── */

.mf-related {
	padding-block: var(--mf-section-gap);
	margin-top: var(--mf-section-gap);
	border-top: 1px solid var(--mf-line);
}

/* ══════════════════════════════════════════════════════
 * 跨类型推荐
 *
 * 作品页的转化路径：看完作品 → 拍摄地 → 套餐 → 询单。
 * 视觉上比「相关作品」轻，不与主体内容争夺注意力。
 * ══════════════════════════════════════════════════════ */

.mf-context {
	padding-block: var(--mf-space-16);
	margin-top: var(--mf-space-16);
	border-top: 1px solid var(--mf-line);
}

.mf-context__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: var(--mf-space-12);
}

.mf-context__title {
	font-family: var(--mf-font-body);
	font-size: var(--mf-text-xs);
	font-weight: var(--mf-weight-medium);
	letter-spacing: var(--mf-tracking-widest);
	text-transform: uppercase;
	color: var(--mf-text-faint);
	margin-bottom: var(--mf-space-4);
}

.mf-context__list li + li {
	margin-top: var(--mf-space-3);
}

.mf-context__item {
	display: flex;
	align-items: center;
	gap: var(--mf-space-3);
	font-size: var(--mf-text-sm);
	color: var(--mf-text-muted);
}

.mf-context__item:hover {
	color: var(--mf-accent);
}

.mf-context__avatar {
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	overflow: hidden;
	background: var(--mf-bg-raised);
}

.mf-context__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * 套餐区块是转化入口，视觉权重略高于其余两栏。
 * 但仍克制 —— 过度突出会让页面显得急于推销。
 */
.mf-context__block--cta {
	padding: var(--mf-space-6);
	background: var(--mf-bg-raised);
	border: 1px solid var(--mf-line);
	border-radius: var(--mf-radius-lg);
}

.mf-context__package {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mf-space-4);
	padding-block: var(--mf-space-2);
	font-size: var(--mf-text-sm);
	color: var(--mf-text);
	border-bottom: 1px solid var(--mf-line);
}

.mf-context__list li:last-child .mf-context__package {
	border-bottom: none;
}

.mf-context__package:hover .mf-context__package-name {
	color: var(--mf-accent);
}

.mf-context__package-name {
	transition: color var(--mf-duration-fast) var(--mf-ease);
}

.mf-context__price {
	flex: 0 0 auto;
	font-family: var(--mf-font-display);
	font-size: var(--mf-text-lg);
	color: var(--mf-accent);
	font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════
 * 面包屑
 *
 * 不只是装饰 —— 垃圾内容政策把「没有明确定义且可浏览的
 * 层次结构」列为滥用门页的特征。程序化生成的聚合页尤其
 * 需要真实可点的上行路径，仅有结构化数据不够。
 * ══════════════════════════════════════════════════════ */

.mf-breadcrumb {
	/*
	 * 避开固定头部。
	 *
	 * 站点头部是 position: fixed，脱离文档流 —— 内容区第一个
	 * 元素会直接顶到页面最上方并与品牌标识重叠。
	 *
	 * 必须用外边距而非内边距：内边距只撑开元素内部空间，
	 * 元素本身仍位于视口顶端，重叠依旧存在。
	 *
	 * 上下外边距与水平居中写在一条声明里 —— 分开写时
	 * margin-inline 会重置前面设置的 margin-block。
	 *
	 * 数值需覆盖头部的最大高度：未滚动时 padding 更大，
	 * 实测约 87px，此处留出余量。
	 */
	margin: calc(var(--mf-space-24) + var(--mf-space-4)) auto 0;
	max-width: var(--mf-container);
	padding-inline: var(--mf-gutter);
}

/*
 * 首屏页面不显示面包屑。
 *
 * 全屏首图会让面包屑压在照片上难以辨识，且首屏页面
 * 本身处于层级顶端，无上行路径可言。
 */
.mf-hero ~ .mf-breadcrumb,
.home .mf-breadcrumb {
	display: none;
}

.mf-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mf-space-2);
	font-size: var(--mf-text-xs);
	letter-spacing: var(--mf-tracking-wide);
	color: var(--mf-text-faint);
}

.mf-breadcrumb__list li {
	display: flex;
	align-items: center;
	gap: var(--mf-space-2);
}

/* 分隔符用伪元素，避免混入可选中的文本。 */
.mf-breadcrumb__list li + li::before {
	content: "/";
	color: var(--mf-line-strong);
}

.mf-breadcrumb__list a {
	color: var(--mf-text-muted);
}

.mf-breadcrumb__list a:hover {
	color: var(--mf-accent);
}

.mf-breadcrumb__list [aria-current="page"] {
	color: var(--mf-text-faint);
}

/* ══════════════════════════════════════════════════════
 * 聚合落地页
 *
 * 程序化生成的城市 × 风格页面。视觉上要与手工内容
 * 无差别 —— 一眼看去像「生成的」正是被判定为门页的
 * 感知起点。
 * ══════════════════════════════════════════════════════ */

.mf-aggregate__header {
	padding-block: var(--mf-space-8) var(--mf-space-16);
	max-width: var(--mf-container);
	margin-inline: auto;
	padding-inline: var(--mf-gutter);
}

.mf-aggregate__title {
	font-size: var(--mf-text-3xl);
	max-width: 20ch;
}

/* 地理标签作为标题的补充说明，视觉权重低于标题。 */
.mf-aggregate__geo {
	margin-top: var(--mf-space-3);
	font-size: var(--mf-text-xs);
	letter-spacing: var(--mf-tracking-widest);
	text-transform: uppercase;
	color: var(--mf-text-faint);
}

/*
 * 导语。
 *
 * 这段文字承载了页面的事实陈述（城市、风格、案例数、
 * 价格区间）—— 既是给用户的说明，也是 AI 搜索乐于
 * 摘取的结构化表述，因此给足视觉分量。
 */
.mf-aggregate__intro {
	margin-top: var(--mf-space-6);
	max-width: 58ch;
	font-size: var(--mf-text-lg);
	line-height: var(--mf-leading-loose);
	color: var(--mf-text-muted);
}

/* 站长补写的原创文案。 */
.mf-aggregate__copy {
	max-width: var(--mf-container-narrow);
	margin-inline: auto;
	padding-inline: var(--mf-gutter);
	padding-block: var(--mf-space-8) var(--mf-space-16);
	color: var(--mf-text-muted);
	line-height: var(--mf-leading-loose);
}

.mf-aggregate__copy h2 {
	margin-bottom: var(--mf-space-6);
	color: var(--mf-text);
}

.mf-aggregate__copy p + p {
	margin-top: var(--mf-space-6);
}

/* 拍摄地与套餐等辅助区块。 */
.mf-aggregate__locations,
.mf-aggregate__packages,
.mf-aggregate__faq,
.mf-aggregate__related {
	max-width: var(--mf-container);
	margin-inline: auto;
	padding-inline: var(--mf-gutter);
	padding-block: var(--mf-space-16);
}

.mf-location-list li + li {
	margin-top: var(--mf-space-6);
}

.mf-location-list a {
	font-family: var(--mf-font-display);
	font-size: var(--mf-text-lg);
}

.mf-location-list p {
	margin-top: var(--mf-space-2);
	font-size: var(--mf-text-sm);
	color: var(--mf-text-muted);
	max-width: 60ch;
}

/* 常见问题。折叠展示，内容始终存在于 HTML 中。 */
.mf-faq-item {
	border-bottom: 1px solid var(--mf-line);
	padding-block: var(--mf-space-4);
}

.mf-faq-item summary {
	cursor: pointer;
	font-size: var(--mf-text-base);
	color: var(--mf-text);
	list-style: none;
}

.mf-faq-item summary::-webkit-details-marker {
	display: none;
}

.mf-faq-item summary::before {
	content: "+";
	display: inline-block;
	width: 1.4em;
	color: var(--mf-accent);
}

.mf-faq-item[open] summary::before {
	content: "−";
}

.mf-faq-item p {
	margin-top: var(--mf-space-4);
	padding-left: 1.4em;
	max-width: 64ch;
	color: var(--mf-text-muted);
	line-height: var(--mf-leading-loose);
}

/*
 * 相关聚合页。
 *
 * 把孤立的组合页编织成网络 —— 这既是用户的探索路径，
 * 也是层次结构的一部分。
 */
.mf-related-group + .mf-related-group {
	margin-top: var(--mf-space-12);
}

.mf-related-group ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mf-space-2);
	margin-top: var(--mf-space-4);
}

.mf-related-group a {
	display: inline-flex;
	align-items: baseline;
	gap: var(--mf-space-2);
	padding: var(--mf-space-2) var(--mf-space-4);
	font-size: var(--mf-text-sm);
	border: 1px solid var(--mf-line);
	border-radius: var(--mf-radius);
	color: var(--mf-text-muted);
	transition:
		border-color var(--mf-duration-fast) var(--mf-ease),
		color var(--mf-duration-fast) var(--mf-ease);
}

.mf-related-group a:hover {
	border-color: var(--mf-accent-dim);
	color: var(--mf-accent);
}

.mf-count {
	font-size: var(--mf-text-xs);
	color: var(--mf-text-faint);
	font-variant-numeric: tabular-nums;
}

/* 聚合总览页的城市分组。 */
.mf-city-groups {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
	gap: var(--mf-space-12);
	max-width: var(--mf-container);
	margin-inline: auto;
	padding-inline: var(--mf-gutter);
	padding-block: var(--mf-space-8);
}

.mf-city-group h2 {
	display: flex;
	align-items: baseline;
	gap: var(--mf-space-3);
	font-size: var(--mf-text-xl);
	padding-bottom: var(--mf-space-3);
	border-bottom: 1px solid var(--mf-line);
}

.mf-style-links {
	margin-top: var(--mf-space-4);
}

.mf-style-links li + li {
	margin-top: var(--mf-space-2);
}

.mf-style-links a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mf-space-3);
	font-size: var(--mf-text-sm);
	color: var(--mf-text-muted);
}

.mf-style-links a:hover {
	color: var(--mf-accent);
}

/* ══════════════════════════════════════════════════════
 * 拍摄手记
 *
 * 视觉上区别于正文 —— 这是补充性的现场记录，
 * 不应与作品本身争夺注意力，但要让愿意细读的访客
 * 一眼找到。
 * ══════════════════════════════════════════════════════ */

.mf-notes {
	padding-block: var(--mf-space-16);
	margin-top: var(--mf-space-16);
	border-top: 1px solid var(--mf-line);
}

.mf-notes__title {
	font-family: var(--mf-font-body);
	font-size: var(--mf-text-xs);
	font-weight: var(--mf-weight-medium);
	letter-spacing: var(--mf-tracking-widest);
	text-transform: uppercase;
	color: var(--mf-text-faint);
	margin-bottom: var(--mf-space-8);
}

/*
 * 元信息用定义列表。
 *
 * 标签与值的语义关系明确，屏幕阅读器能正确朗读为
 * 「拍摄日期：2026 年 4 月」这样的配对。
 */
.mf-notes__meta {
	display: grid;
	gap: var(--mf-space-3);
	margin-bottom: var(--mf-space-8);
}

.mf-notes__row {
	display: grid;
	grid-template-columns: 6rem 1fr;
	gap: var(--mf-space-4);
	align-items: baseline;
	font-size: var(--mf-text-sm);
}

.mf-notes__row dt {
	color: var(--mf-text-faint);
	font-size: var(--mf-text-xs);
	letter-spacing: var(--mf-tracking-wide);
}

.mf-notes__row dd {
	margin: 0;
	color: var(--mf-text-muted);
}

@media (max-width: 640px) {
	.mf-notes__row {
		grid-template-columns: 1fr;
		gap: var(--mf-space-1);
	}
}

.mf-notes__body {
	color: var(--mf-text-muted);
	line-height: var(--mf-leading-loose);
	max-width: 64ch;
}

.mf-notes__body p + p {
	margin-top: var(--mf-space-4);
}

/* ── 署名 ──────────────────────────────────────────── */

/*
 * 极简署名。
 *
 * 官方建议提供指向作者介绍页的链接。刻意不做通用作者框 ——
 * 每篇重复同一段简介属于模板填充，不传达具体信息。
 */
.mf-byline {
	display: flex;
	align-items: center;
	gap: var(--mf-space-4);
	margin-top: var(--mf-space-12);
	padding-top: var(--mf-space-6);
	border-top: 1px solid var(--mf-line);
	font-size: var(--mf-text-sm);
	color: var(--mf-text-muted);
}

.mf-byline__avatar {
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	overflow: hidden;
	background: var(--mf-bg-raised);
}

.mf-byline__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mf-byline__text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--mf-space-3);
}

.mf-byline__meta {
	font-size: var(--mf-text-xs);
	color: var(--mf-text-faint);
}

.mf-byline__link {
	font-size: var(--mf-text-xs);
	color: var(--mf-accent);
}

/* ══════════════════════════════════════════════════════
 * 主理人介绍页
 *
 * 结构原则：每一句自我声明下方紧跟得看的作品。
 * 访客判断摄影师的方式从来不是读简介，是看片。
 * ══════════════════════════════════════════════════════ */

.mf-about__header {
	padding-block: calc(var(--mf-space-24) + var(--mf-space-8)) var(--mf-space-16);
}

.mf-about__intro {
	display: grid;
	grid-template-columns: minmax(200px, 320px) 1fr;
	gap: var(--mf-space-16);
	align-items: start;
}

@media (max-width: 900px) {
	.mf-about__intro {
		grid-template-columns: 1fr;
		gap: var(--mf-space-8);
	}

	.mf-about__portrait {
		max-width: 220px;
	}
}

.mf-about__portrait {
	overflow: hidden;
	border-radius: var(--mf-radius);
	aspect-ratio: 4 / 5;
}

.mf-about__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mf-about__name {
	font-size: var(--mf-text-3xl);
}

.mf-about__studio {
	margin-top: var(--mf-space-3);
	font-size: var(--mf-text-sm);
	letter-spacing: var(--mf-tracking-wide);
	color: var(--mf-text-muted);
}

.mf-about__city {
	color: var(--mf-text-faint);
}

.mf-about__text {
	margin-top: var(--mf-space-8);
}

/* 区块标题统一为小号眉标样式，让内容本身成为主角。 */
.mf-about__section-title {
	font-family: var(--mf-font-body);
	font-size: var(--mf-text-xs);
	font-weight: var(--mf-weight-medium);
	letter-spacing: var(--mf-tracking-widest);
	text-transform: uppercase;
	color: var(--mf-text-faint);
	margin-bottom: var(--mf-space-8);
}

.mf-about__stats,
.mf-about__approach,
.mf-about__specialties,
.mf-about__credits,
.mf-about__testimonials,
.mf-about__areas {
	padding-block: var(--mf-space-16);
	border-top: 1px solid var(--mf-line);
}

/* ── 拍摄理念 ──────────────────────────────────────── */

/*
 * 容器保持全宽以对齐其余区块，仅用 max-width 限制
 * 文本的可读宽度 —— 若给容器加 narrow 类，左边缘会
 * 与上下区块错开，看起来像排版失误而非有意留白。
 */
.mf-about__approach-text {
	max-width: 62ch;
}

/* ── 数据概览 ──────────────────────────────────────── */

/*
 * 用定义列表而非普通容器 —— 数值与标签的语义关系明确，
 * 屏幕阅读器能正确朗读为配对。注意 dd 在前 dt 在后是
 * 视觉顺序，规范允许这样排列。
 */
.mf-about__stats .mf-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--mf-space-8);
	margin: 0;
}

.mf-about__stats .mf-stat {
	display: flex;
	flex-direction: column;
	gap: var(--mf-space-2);
}

.mf-about__stats .mf-stat__value {
	margin: 0;
	font-family: var(--mf-font-display);
	font-size: var(--mf-text-2xl);
	font-weight: var(--mf-weight-light);
	line-height: 1;
	color: var(--mf-accent);
	font-variant-numeric: tabular-nums;
}

.mf-about__stats .mf-stat__label {
	font-size: var(--mf-text-xs);
	letter-spacing: var(--mf-tracking-wide);
	color: var(--mf-text-faint);
}

/* ── 擅长领域 ──────────────────────────────────────── */

.mf-specialty + .mf-specialty {
	margin-top: var(--mf-space-16);
}

.mf-specialty__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mf-space-6);
	margin-bottom: var(--mf-space-6);
	padding-bottom: var(--mf-space-3);
	border-bottom: 1px solid var(--mf-line);
}

.mf-specialty__label {
	font-family: var(--mf-font-display);
	font-size: var(--mf-text-xl);
	font-weight: var(--mf-weight-light);
}

.mf-specialty__more {
	flex-shrink: 0;
	font-size: var(--mf-text-sm);
	color: var(--mf-text-muted);
	white-space: nowrap;
}

.mf-specialty__more:hover {
	color: var(--mf-accent);
}

/* ── 获奖与报道 ────────────────────────────────────── */

.mf-credits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: var(--mf-space-12);
}

.mf-credits__list li {
	padding-block: var(--mf-space-3);
	border-bottom: 1px solid var(--mf-line);
	font-size: var(--mf-text-sm);
	color: var(--mf-text-muted);
}

.mf-credits__list li:last-child {
	border-bottom: none;
}

/* ── 客片评价 ──────────────────────────────────────── */

.mf-testimonials {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: var(--mf-space-8);
}

.mf-testimonial {
	margin: 0;
	padding: var(--mf-space-6);
	background: var(--mf-bg-raised);
	border-radius: var(--mf-radius-lg);
	border-left: 1px solid var(--mf-accent-dim);
}

.mf-testimonial__text {
	font-family: var(--mf-font-display);
	font-size: var(--mf-text-lg);
	font-style: italic;
	line-height: var(--mf-leading-normal);
	color: var(--mf-text);
}

.mf-testimonial__author {
	margin-top: var(--mf-space-4);
	font-size: var(--mf-text-xs);
	letter-spacing: var(--mf-tracking-wide);
	color: var(--mf-text-faint);
}

.mf-testimonial__author::before {
	content: "— ";
}

/* ── 转化入口 ──────────────────────────────────────── */

.mf-about__cta {
	padding-block: var(--mf-space-24);
	margin-top: var(--mf-space-16);
	border-top: 1px solid var(--mf-line);
}

.mf-cta {
	text-align: center;
}

.mf-cta__title {
	font-size: var(--mf-text-2xl);
	margin-bottom: var(--mf-space-8);
}

/*
 * 含表单时不居中。
 *
 * 居中标题配左对齐表单会显得两套版式打架 ——
 * 有表单时整块统一左对齐，视觉动线才连贯。
 */
.mf-cta:has(.mf-inquiry) {
	text-align: start;
	max-width: 640px;
	margin-inline: auto;
}

.mf-cta:has(.mf-inquiry) .mf-cta__actions {
	justify-content: flex-start;
}

.mf-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--mf-space-4);
}

/* ══════════════════════════════════════════════════════
 * 模特档案页
 * ══════════════════════════════════════════════════════ */

.mf-model__header {
	padding-block: calc(var(--mf-space-24) + var(--mf-space-8)) var(--mf-space-16);
}

.mf-model__intro {
	display: grid;
	grid-template-columns: minmax(200px, 300px) 1fr;
	gap: var(--mf-space-12);
	align-items: start;
}

@media (max-width: 900px) {
	.mf-model__intro {
		grid-template-columns: 1fr;
		gap: var(--mf-space-8);
	}

	.mf-model__portrait {
		max-width: 220px;
	}
}

.mf-model__portrait {
	overflow: hidden;
	border-radius: var(--mf-radius);
	aspect-ratio: 4 / 5;
}

.mf-model__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mf-model__name {
	font-size: var(--mf-text-3xl);
}

/*
 * 接单状态。
 *
 * 用颜色点而非纯文字 —— 状态需要在扫视中就被识别，
 * 访客不会逐字读完才决定是否咨询。
 */
.mf-model__status {
	display: inline-flex;
	align-items: center;
	gap: var(--mf-space-2);
	margin-top: var(--mf-space-4);
	font-size: var(--mf-text-sm);
	letter-spacing: var(--mf-tracking-wide);
	color: var(--mf-text-muted);
}

.mf-model__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mf-text-faint);
}

.mf-model__status.is-open .mf-model__dot {
	background: #6ac47a;
	box-shadow: 0 0 8px rgba(106, 196, 122, 0.5);
}

.mf-model__status.is-busy .mf-model__dot {
	background: var(--mf-accent);
}

.mf-model__excerpt {
	margin-top: var(--mf-space-6);
	max-width: 54ch;
	font-size: var(--mf-text-lg);
	color: var(--mf-text-muted);
}

/* ── 合作信息 ──────────────────────────────────────── */

.mf-model__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mf-space-8);
	margin-top: var(--mf-space-8);
	padding-top: var(--mf-space-6);
	border-top: 1px solid var(--mf-line);
}

.mf-model__fact dt {
	font-size: var(--mf-text-xs);
	letter-spacing: var(--mf-tracking-wide);
	color: var(--mf-text-faint);
}

.mf-model__fact dd {
	margin: var(--mf-space-1) 0 0;
	font-size: var(--mf-text-sm);
	color: var(--mf-text);
}

.mf-model__styles {
	margin-top: var(--mf-space-8);
}

.mf-model__styles .mf-tags {
	margin-top: var(--mf-space-3);
}

.mf-model__body {
	padding-block: var(--mf-space-8) var(--mf-space-16);
}

.mf-model__text {
	max-width: 62ch;
}

.mf-model__works {
	padding-block: var(--mf-space-16);
	border-top: 1px solid var(--mf-line);
}

/* ── 预约入口 ──────────────────────────────────────── */

.mf-model__cta {
	padding-block: var(--mf-space-24);
	margin-top: var(--mf-space-8);
	border-top: 1px solid var(--mf-line);
}

.mf-cta__note {
	margin-top: calc(var(--mf-space-6) * -1);
	margin-bottom: var(--mf-space-8);
	font-size: var(--mf-text-sm);
	color: var(--mf-text-muted);
}

/*
 * 套餐入口。
 *
 * 按模特擅长的风格匹配 —— 访客想拍的是「这种感觉」，
 * 直接给对应套餐比让人自己翻列表有效。
 */
.mf-cta__packages {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--mf-space-4);
	margin-bottom: var(--mf-space-8);
}

.mf-cta__package {
	display: inline-flex;
	align-items: baseline;
	gap: var(--mf-space-4);
	padding: var(--mf-space-4) var(--mf-space-6);
	background: var(--mf-bg-raised);
	border: 1px solid var(--mf-line);
	border-radius: var(--mf-radius);
	font-size: var(--mf-text-sm);
	transition: border-color var(--mf-duration-fast) var(--mf-ease);
}

.mf-cta__package:hover {
	border-color: var(--mf-accent-dim);
}

.mf-cta__package:hover .mf-cta__package-name {
	color: var(--mf-accent);
}

.mf-cta__price {
	font-family: var(--mf-font-display);
	font-size: var(--mf-text-lg);
	color: var(--mf-accent);
	font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════
 * 询单表单
 *
 * 字段顺序按访客的思考顺序排列：先是「我是谁、怎么联系我」，
 * 再是「我想拍什么」—— 反过来会让人一开始就面对开放式问题
 * 而放弃填写。
 * ══════════════════════════════════════════════════════ */

.mf-inquiry {
	max-width: 640px;
	margin-inline: auto;
	/*
	 * 表单嵌在 .mf-cta 内时会继承其 text-align: center，
	 * 导致标签居中 —— 视线在每行来回跳，扫读困难。
	 * 表单内容一律左对齐。
	 */
	text-align: start;
}

.mf-inquiry__title {
	font-size: var(--mf-text-xl);
	margin-bottom: var(--mf-space-8);
	text-align: center;
}

.mf-inquiry__form {
	display: grid;
	gap: var(--mf-space-6);
}

.mf-field {
	display: grid;
	gap: var(--mf-space-2);
}

.mf-field-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--mf-space-4);
}

@media (max-width: 560px) {
	.mf-field-row {
		grid-template-columns: 1fr;
	}
}

.mf-field--narrow {
	min-width: 7rem;
}

.mf-field label {
	font-size: var(--mf-text-xs);
	letter-spacing: var(--mf-tracking-wide);
	color: var(--mf-text-faint);
}

.mf-required {
	color: var(--mf-accent);
}

.mf-field input,
.mf-field select,
.mf-field textarea {
	width: 100%;
	padding: var(--mf-space-3) var(--mf-space-4);
	background: var(--mf-bg-raised);
	border: 1px solid var(--mf-line);
	border-radius: var(--mf-radius);
	color: var(--mf-text);
	font-family: inherit;
	font-size: var(--mf-text-sm);
	transition: border-color var(--mf-duration-fast) var(--mf-ease);
}

.mf-field input:focus,
.mf-field select:focus,
.mf-field textarea:focus {
	outline: none;
	border-color: var(--mf-accent-dim);
}

.mf-field textarea {
	resize: vertical;
	line-height: var(--mf-leading-normal);
}

.mf-field input::placeholder,
.mf-field textarea::placeholder {
	color: var(--mf-text-faint);
	opacity: 0.7;
}

/*
 * 蜜罐字段。
 *
 * 用绝对定位移出视野而非 display:none —— 部分机器人会
 * 跳过 display:none 的字段。屏幕阅读器由 aria-hidden
 * 排除，键盘用户由 tabindex=-1 跳过。
 *
 * 注意这与「隐藏文字」的垃圾内容政策无关：此处隐藏的是
 * 一个空白输入框，不含任何面向搜索引擎的内容。
 */
.mf-inquiry__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mf-inquiry__submit {
	justify-self: start;
	margin-top: var(--mf-space-2);
}

.mf-inquiry__privacy {
	font-size: var(--mf-text-xs);
	color: var(--mf-text-faint);
}

.mf-inquiry__error {
	padding: var(--mf-space-4);
	border-left: 2px solid var(--mf-accent);
	background: var(--mf-bg-raised);
	font-size: var(--mf-text-sm);
	color: var(--mf-text-muted);
}

/* 提交成功后替换整个表单 —— 避免重复提交。 */
.mf-inquiry__done {
	padding: var(--mf-space-12);
	text-align: center;
	background: var(--mf-bg-raised);
	border-radius: var(--mf-radius-lg);
}

.mf-inquiry__done h3 {
	font-size: var(--mf-text-xl);
	margin-bottom: var(--mf-space-4);
}

.mf-inquiry__done p {
	color: var(--mf-text-muted);
	font-size: var(--mf-text-sm);
}

/* ══════════════════════════════════════════════════════
 * 视频
 * ══════════════════════════════════════════════════════ */

.mf-video {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	background: var(--mf-bg-sunken);
	border-radius: var(--mf-radius);
	/* 占位比例防止播放器加载时的布局偏移。 */
	aspect-ratio: 16 / 9;
}

.mf-video__facade {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
	border: 0;
	padding: 0;
	background: none;
}

.mf-video__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		transform var(--mf-duration-slow) var(--mf-ease),
		filter var(--mf-duration) var(--mf-ease);
}

.mf-video__facade:hover .mf-video__poster {
	transform: scale(1.02);
	filter: brightness(0.82);
}

/*
 * 播放按钮。
 *
 * 半透明底 + 毛玻璃，在任何明暗的封面上都可辨识 ——
 * 纯色按钮遇到相近色调的封面会消失。
 */
.mf-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: rgba(10, 10, 11, 0.62);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: #fff;
	transition:
		transform var(--mf-duration) var(--mf-ease-spring),
		background var(--mf-duration) var(--mf-ease),
		border-color var(--mf-duration) var(--mf-ease);
}

/* 图标视觉重心偏左，微调使其在圆内居中。 */
.mf-video__play svg {
	margin-left: 3px;
}

.mf-video__facade:hover .mf-video__play {
	transform: translate(-50%, -50%) scale(1.08);
	background: var(--mf-accent);
	border-color: var(--mf-accent);
	color: var(--mf-bg);
}

.mf-video__facade:focus-visible .mf-video__play {
	background: var(--mf-accent);
	border-color: var(--mf-accent);
	color: var(--mf-bg);
}

.mf-video__duration {
	position: absolute;
	right: var(--mf-space-3);
	bottom: var(--mf-space-3);
	padding: 2px var(--mf-space-2);
	font-size: var(--mf-text-xs);
	font-variant-numeric: tabular-nums;
	color: #fff;
	background: rgba(10, 10, 11, 0.78);
	border-radius: 2px;
}

.mf-video__frame {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.mf-video__player {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
}

.mf-video__fallback {
	position: absolute;
	inset-inline: 0;
	bottom: var(--mf-space-4);
	text-align: center;
	font-size: var(--mf-text-sm);
	color: #fff;
}

/* 外链卡片 */

.mf-video--link {
	display: block;
	text-decoration: none;
}

.mf-video__link-label {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--mf-space-6);
	font-size: var(--mf-text-sm);
	color: #fff;
	background: linear-gradient(to top, rgba(6, 6, 7, 0.92), transparent);
}

/* ── 章节列表 ──────────────────────────────────────── */

.mf-video-chapters {
	margin-top: var(--mf-space-6);
}

.mf-video-chapters__title {
	font-family: var(--mf-font-body);
	font-size: var(--mf-text-xs);
	font-weight: var(--mf-weight-medium);
	letter-spacing: var(--mf-tracking-widest);
	text-transform: uppercase;
	color: var(--mf-text-faint);
	margin-bottom: var(--mf-space-3);
}

.mf-video-chapters__list {
	counter-reset: none;
}

.mf-video-chapters__list li + li {
	margin-top: var(--mf-space-1);
}

.mf-video-chapters__list a {
	display: flex;
	align-items: baseline;
	gap: var(--mf-space-4);
	padding: var(--mf-space-2) var(--mf-space-3);
	font-size: var(--mf-text-sm);
	color: var(--mf-text-muted);
	border-radius: var(--mf-radius);
	transition: background var(--mf-duration-fast) var(--mf-ease);
}

.mf-video-chapters__list a:hover {
	background: var(--mf-bg-raised);
	color: var(--mf-text);
}

.mf-video-chapters__time {
	flex: 0 0 auto;
	min-width: 3.5rem;
	font-variant-numeric: tabular-nums;
	color: var(--mf-accent);
}

/* ── 文字稿 ────────────────────────────────────────── */

.mf-video-transcript {
	margin-top: var(--mf-space-6);
	border-top: 1px solid var(--mf-line);
	padding-top: var(--mf-space-4);
}

.mf-video-transcript summary {
	cursor: pointer;
	font-size: var(--mf-text-sm);
	color: var(--mf-text-muted);
	list-style: none;
}

.mf-video-transcript summary::-webkit-details-marker {
	display: none;
}

.mf-video-transcript summary::before {
	content: "+";
	display: inline-block;
	width: 1.2em;
	color: var(--mf-accent);
}

.mf-video-transcript[open] summary::before {
	content: "−";
}

.mf-video-transcript summary:hover {
	color: var(--mf-accent);
}

.mf-video-transcript__body {
	margin-top: var(--mf-space-4);
	max-width: 68ch;
	font-size: var(--mf-text-sm);
	line-height: var(--mf-leading-loose);
	color: var(--mf-text-muted);
}

.mf-video-transcript__body p + p {
	margin-top: var(--mf-space-4);
}

/* 字段说明。放在输入框下方，不与标签争夺注意力。 */
.mf-field__hint {
	margin: 0;
	font-size: var(--mf-text-xs);
	color: var(--mf-text-faint);
	line-height: var(--mf-leading-normal);
}