/* ==========================================================
   木艺方舟 · 基础：设计变量 / 排版 / 布局 / 按钮 / 动效初始态
   ========================================================== */
:root {
	--paper: #f4efe7;
	--paper-2: #ebe3d6;
	--ink: #1a1714;
	--ink-2: #4a433b;
	--muted: #8a8076;
	--line: rgba(26, 23, 20, .12);
	--wood: #8b5e3c;
	--brass: #b08d57;
	--dark: #151310;
	--walnut: #2a1f17;
	--on-dark: #efe8dc;
	--on-dark-muted: rgba(239, 232, 220, .62);
	--line-dark: rgba(239, 232, 220, .16);

	--serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
	--latin: "Cormorant Garamond", "Noto Serif SC", serif;
	--sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;

	--gutter: clamp(20px, 5vw, 80px);
	--wrap: 1440px;
	--header-h: 84px;
	--ease: cubic-bezier(.22, 1, .36, 1);
	--ease-in-out: cubic-bezier(.77, 0, .175, 1);
	--space: clamp(80px, 11vw, 168px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 400 16px/1.8 var(--sans);
	letter-spacing: .02em;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
/* 细微纸张颗粒，增加质感 */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9990;
	pointer-events: none;
	opacity: .045;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 500; line-height: 1.25; letter-spacing: .04em; text-wrap: balance; }
p { margin: 0; }
::selection { background: var(--wood); color: #fff; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

.screen-reader-text { position: absolute; left: -9999px; }
.screen-reader-text:focus { left: 16px; top: 16px; z-index: 10000; background: var(--ink); color: #fff; padding: 8px 16px; }

/* ---------- 布局 ---------- */
.mu-wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.mu-wrap--narrow { width: min(820px, 100% - var(--gutter) * 2); }

.mu-section { position: relative; padding-block: var(--space); }
.mu-space--tight, .mu-section--tight { padding-block: calc(var(--space) * .55); }
.mu-space--none { padding-block: 0; }
.mu-section--light, .mu-section--paper2 { background: var(--paper-2); }
.mu-section--dark { background: var(--dark); color: var(--on-dark); }
.mu-section--wood { background: var(--walnut); color: var(--on-dark); }
.mu-section--dark, .mu-section--wood { --line: var(--line-dark); --muted: var(--on-dark-muted); --ink-2: var(--on-dark-muted); }

.mu-grid { display: grid; gap: clamp(20px, 2.4vw, 40px); }
.mu-grid--2 { grid-template-columns: repeat(2, 1fr); }
.mu-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mu-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .mu-grid--3, .mu-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .mu-grid--2, .mu-grid--3, .mu-grid--4 { grid-template-columns: 1fr; } }

/* ---------- 排版 ---------- */
.mu-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
	font: italic 500 17px/1 var(--latin);
	letter-spacing: .14em;
	color: var(--wood);
}
.mu-eyebrow::before { content: ""; width: 36px; height: 1px; background: currentColor; opacity: .6; }
.mu-section--dark .mu-eyebrow, .mu-section--wood .mu-eyebrow, .mu-hero .mu-eyebrow, .mu-cta .mu-eyebrow { color: var(--brass); }

.mu-head { display: grid; gap: 20px 64px; margin-bottom: clamp(40px, 5vw, 72px); }
.mu-head--split { grid-template-columns: 1.2fr 1fr; align-items: end; }
.mu-head--split .mu-head__extra { grid-column: 2; justify-self: end; }
.mu-head--split:not(:has(.mu-head__desc)) .mu-head__extra { grid-row: 1; align-self: end; }
.mu-head--center { text-align: center; justify-items: center; }
.mu-head--center .mu-eyebrow::after { content: ""; width: 36px; height: 1px; background: currentColor; opacity: .6; }
.mu-head__title { font-size: clamp(30px, 3.6vw, 54px); }
.mu-head__desc { color: var(--ink-2); max-width: 560px; font-size: 16px; }
.mu-head--center .mu-head__desc { margin-inline: auto; }
@media (max-width: 860px) { .mu-head--split { grid-template-columns: 1fr; } .mu-head--split .mu-head__extra { grid-column: auto; grid-row: auto !important; justify-self: start; } }

.mu-prose { color: var(--ink-2); font-size: 16px; }
.mu-prose p + p, .mu-prose ul, .mu-prose ol, .mu-prose h2, .mu-prose h3, .mu-prose figure, .mu-prose blockquote { margin-top: 1.2em; }
.mu-prose h2 { font-size: 28px; color: var(--ink); margin-top: 1.8em; }
.mu-prose h3 { font-size: 21px; color: var(--ink); margin-top: 1.6em; }
.mu-prose strong { color: var(--ink); font-weight: 600; }
.mu-prose a { color: var(--wood); border-bottom: 1px solid currentColor; }
.mu-prose img { border-radius: 2px; }
.mu-prose blockquote { margin-inline: 0; padding-left: 24px; border-left: 2px solid var(--brass); font-family: var(--serif); color: var(--ink); font-size: 19px; }
.mu-prose table { width: 100%; border-collapse: collapse; margin-top: 1.2em; font-size: 15px; }
.mu-prose th, .mu-prose td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.mu-section--dark .mu-prose strong, .mu-section--wood .mu-prose strong { color: var(--on-dark); }

.mu-empty { padding: 60px 0; text-align: center; color: var(--muted); }

/* ---------- 按钮 ---------- */
.mu-btn {
	--bg: var(--ink); --fg: var(--paper); --bd: var(--ink);
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	height: 56px;
	padding: 0 10px 0 30px;
	border: 1px solid var(--bd);
	border-radius: 999px;
	background: var(--bg);
	color: var(--fg);
	font-size: 15px;
	letter-spacing: .12em;
	overflow: hidden;
	isolation: isolate;
	transition: color .5s var(--ease), border-color .5s var(--ease);
	will-change: transform;
}
.mu-btn::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	background: var(--wood);
	border-radius: inherit;
	transform: translateY(101%);
	transition: transform .6s var(--ease);
}
.mu-btn:hover::before { transform: translateY(0); }
.mu-btn:hover { --fg: #fff; --bd: var(--wood); color: #fff; }
.mu-btn__icon {
	display: grid; place-items: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--fg) 14%, transparent);
	transition: transform .6s var(--ease);
}
.mu-btn__icon .mu-icon { width: 16px; }
.mu-btn:hover .mu-btn__icon { transform: rotate(-45deg); }
.mu-btn--line { --bg: transparent; --fg: var(--ink); --bd: var(--line); }
.mu-section--dark .mu-btn--line, .mu-section--wood .mu-btn--line { --fg: var(--on-dark); }
.mu-btn--light { --bg: var(--paper); --fg: var(--ink); --bd: var(--paper); }
.mu-btn--ghost { --bg: transparent; --fg: #fff; --bd: rgba(255, 255, 255, .45); backdrop-filter: blur(6px); }
.mu-btn[disabled] { opacity: .6; pointer-events: none; }

.mu-icon { width: 20px; height: 20px; flex: none; }

.mu-link {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 14px; letter-spacing: .14em;
	padding-bottom: 6px;
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	transition: background-size .6s var(--ease), gap .4s var(--ease);
}
.mu-link .mu-icon { width: 16px; }
.mu-link:hover { gap: 16px; background-size: 0 1px; background-position: 100% 100%; }

.mu-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mu-tags > span { font-size: 13px; color: var(--muted); margin-right: 6px; }
.mu-tags em { font-style: normal; font-size: 13px; padding: 5px 14px; border: 1px solid var(--line); border-radius: 999px; }

.mu-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 40px; }
.mu-tabs button {
	padding: 9px 22px; border: 1px solid var(--line); border-radius: 999px;
	font-size: 14px; letter-spacing: .1em; transition: all .4s var(--ease);
}
.mu-tabs button:hover { border-color: var(--ink); }
.mu-tabs button.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mu-section--dark .mu-tabs button.is-active { background: var(--on-dark); color: var(--dark); }
.mu-filter-item { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.mu-filter-item.is-hidden { display: none; }

.mu-crumb { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; letter-spacing: .1em; opacity: .75; margin-bottom: 28px; }
.mu-crumb i { font-style: normal; opacity: .5; }
.mu-crumb a:hover { opacity: .7; }

/* ---------- 动效初始态（JS 加 .is-in 后进入） ---------- */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 40px, 0); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-clip] { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease-in-out); }
.js [data-clip].is-in { clip-path: inset(0 0 0 0); }
.mu-split-char { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.mu-split-char > span { display: inline-block; transform: translate3d(0, 110%, 0); transition: transform 1.1s var(--ease); transition-delay: calc(var(--c) * 28ms); }
.is-in > .mu-split-char > span, .is-in .mu-split-char > span { transform: none; }
.mu-line { display: block; overflow: hidden; }
.mu-line > span { display: block; transform: translate3d(0, 105%, 0); transition: transform 1.2s var(--ease); transition-delay: calc(var(--l) * 110ms); }
.is-in .mu-line > span { transform: none; }

/* Elementor 编辑器内直接显示，避免看不到内容 */
.elementor-editor-active [data-reveal], .elementor-editor-active [data-clip] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.elementor-editor-active .mu-split-char > span, .elementor-editor-active .mu-line > span { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
	.js [data-reveal], .js [data-clip] { opacity: 1; transform: none; clip-path: none; }
	.mu-split-char > span, .mu-line > span { transform: none; }
}

/* Elementor 容器：组件自带留白，装着木艺方舟组件的容器不再额外加内边距/间距 */
.elementor .e-con:has(> .elementor-widget[class*="elementor-widget-muyi-"]),
.elementor .e-con:has(> .e-con-inner > .elementor-widget[class*="elementor-widget-muyi-"]) {
	--padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px;
	--gap: 0px; --row-gap: 0px; --column-gap: 0px; --content-width: 100%;
}
.elementor-widget[class*="elementor-widget-muyi-"] { width: 100%; }
/* Elementor 全局有 .elementor img{height:auto}，组件内图片都放在定高容器里，需要撑满 */
.elementor-widget[class*="elementor-widget-muyi-"] img { height: 100%; }
.elementor-widget[class*="elementor-widget-muyi-"] .mu-hero__media img { height: 115%; }