/**
 * 基础样式与排版。
 */

/* ── Reset ─────────────────────────────────────────── */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* 顶部固定导航遮挡锚点目标时的补偿。 */
	scroll-padding-top: 6rem;
	/*
	 * 声明配色方案，使浏览器为表单控件、滚动条与
	 * 默认背景采用暗色渲染 —— 否则输入框会是刺眼的白底。
	 */
	color-scheme: dark;
}

[data-mf-theme="light"] {
	color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	min-height: 100vh;
	background: var(--mf-bg);
	color: var(--mf-text);
	font-family: var(--mf-font-body);
	font-size: var(--mf-text-base);
	line-height: var(--mf-leading-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

/* 图片默认保持比例，避免变形。 */
img {
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

ul,
ol {
	list-style: none;
	padding: 0;
}

/* ── 排版 ──────────────────────────────────────────── */

h1,
h2,
h3,
h4 {
	font-family: var(--mf-font-display);
	font-weight: var(--mf-weight-light);
	line-height: var(--mf-leading-tight);
	letter-spacing: var(--mf-tracking-tight);
	text-wrap: balance;
}

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

h2 {
	font-size: var(--mf-text-2xl);
}

h3 {
	font-size: var(--mf-text-xl);
}

p {
	text-wrap: pretty;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--mf-duration-fast) var(--mf-ease);
}

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

/* 正文中的链接需要可辨识的下划线。 */
.mf-prose a {
	text-decoration: underline;
	text-decoration-color: var(--mf-accent-dim);
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
}

.mf-prose a:hover {
	text-decoration-color: var(--mf-accent);
}

strong {
	font-weight: var(--mf-weight-medium);
	color: var(--mf-text);
}

/* ── 焦点 ──────────────────────────────────────────── */

/*
 * 键盘焦点必须清晰可见。
 * 暗色界面中细边框容易被忽略，用双层轮廓保证可辨识度。
 */
:focus-visible {
	outline: 2px solid var(--mf-accent);
	outline-offset: 3px;
	border-radius: var(--mf-radius);
}

/* 鼠标点击不显示焦点框，仅键盘导航时出现。 */
:focus:not(:focus-visible) {
	outline: none;
}

/* ── 选中态 ────────────────────────────────────────── */

::selection {
	background: var(--mf-accent);
	color: var(--mf-bg);
}

/* ── 滚动条 ────────────────────────────────────────── */

/*
 * 默认滚动条在暗色界面中过于突兀。
 * 保持功能可见的前提下降低视觉权重。
 */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--mf-bg-sunken);
}

::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.14);
	border: 2px solid var(--mf-bg-sunken);
	border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.24);
}

html {
	scrollbar-color: rgba(255, 255, 255, 0.14) var(--mf-bg-sunken);
	scrollbar-width: thin;
}

/* ── 工具类 ────────────────────────────────────────── */

/*
 * 屏幕阅读器专用文本。
 * 必须保持可聚焦 —— "跳到主内容"链接依赖此类。
 */
.mf-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mf-sr-only:focus-visible {
	position: fixed;
	top: var(--mf-space-4);
	left: var(--mf-space-4);
	z-index: var(--mf-z-toast);
	width: auto;
	height: auto;
	padding: var(--mf-space-3) var(--mf-space-6);
	margin: 0;
	overflow: visible;
	clip: auto;
	background: var(--mf-bg-raised);
	border: 1px solid var(--mf-accent);
	border-radius: var(--mf-radius);
}

.mf-container {
	width: 100%;
	max-width: var(--mf-container);
	margin-inline: auto;
	padding-inline: var(--mf-gutter);
}

.mf-container--narrow {
	max-width: var(--mf-container-narrow);
}

/* 全宽区块，突破容器约束。 */
.mf-bleed {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.mf-section {
	padding-block: var(--mf-section-gap);
}

/* ── 段落排版 ──────────────────────────────────────── */

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

.mf-prose > * + * {
	margin-top: var(--mf-space-6);
}

.mf-prose h2,
.mf-prose h3 {
	margin-top: var(--mf-space-12);
	color: var(--mf-text);
}

.mf-prose img {
	margin-block: var(--mf-space-12);
}

.mf-prose blockquote {
	padding-left: var(--mf-space-6);
	border-left: 1px solid var(--mf-accent-dim);
	font-family: var(--mf-font-display);
	font-size: var(--mf-text-lg);
	font-style: italic;
	color: var(--mf-text);
}

/* ── 眉标 ──────────────────────────────────────────── */

/*
 * 小号大写字母配宽字距，用于区块标签。
 * 这是编辑设计中建立层级的经典手法，
 * 比单纯放大标题更克制。
 */
.mf-eyebrow {
	display: block;
	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);
}

/* ── 分隔线 ────────────────────────────────────────── */

.mf-rule {
	height: 1px;
	border: 0;
	background: var(--mf-line);
}

/*
 * 渐隐分隔线。
 * 两端淡出使线条不显生硬，与画廊的柔和调性一致。
 */
.mf-rule--fade {
	background: linear-gradient(
		to right,
		transparent,
		var(--mf-line-strong) 18%,
		var(--mf-line-strong) 82%,
		transparent
	);
}