/* 全局变量与基础重置 — 主题风格对齐 home/eco.html */
*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--white: #FFFFFF;
	--bg-warm: #F8F7F3;
	--bg-light: #ECEAE5;
	--ink: #222222;
	--gold: #B8A58A;
	--card-border: #E5E2DC;
	--max-width: 1560px;
	--safe: 100px;
	--font-heading: 'Cormorant Garamond', serif;
	--font-body: 'Avenir', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* 兼容旧变量名 → ECO 色板 */
	--navy: #222222;
	--blue: #B8A58A;
	--blue-mid: #B8A58A;
	--blue-light: #F8F7F3;
	--blue-pale: #ECEAE5;
	--gray-dark: #222222;
	--gray: #555555;
	--gray-light: #999999;
	--border: #E5E2DC;
	--rule: #E5E2DC;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink);
	background: var(--white);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

.inner,
.wrap {
	max-width: var(--max-width);
	margin: 0 auto;
	width: 100%;
	padding: 0 var(--safe);
}

@media (max-width: 1100px) {
	:root { --safe: 32px; }
	.inner,
	.wrap { padding: 0 var(--safe); }
}

@media (max-width: 640px) {
	:root { --safe: 20px; }
}

h1, h2, h3 {
	font-family: var(--font-heading);
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--ink);
}

h1 { font-size: 64px; line-height: 1.08; }
h2 { font-size: 42px; line-height: 1.18; }
h3 { font-size: 24px; line-height: 1.3; }

@media (max-width: 1100px) {
	h1 { font-size: 42px; }
	h2 { font-size: 32px; }
}

.s-tag {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 18px;
}

.s-tag::before {
	content: '';
	width: 44px;
	height: 1px;
	background: var(--gold);
	flex-shrink: 0;
}

.s-title {
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: clamp(28px, 3.5vw, 42px);
	color: var(--ink);
	letter-spacing: 0.01em;
	text-transform: none;
	line-height: 1.18;
}

.s-title b {
	color: var(--gold);
	font-weight: 500;
}

.link-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: none;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--card-border);
	padding-bottom: 2px;
	transition: gap .2s, color .2s;
}

.link-more:hover {
	gap: 14px;
	color: var(--gold);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 32px;
	border-radius: 3px;
	font-family: var(--font-body);
	font-size: 14.5px;
	letter-spacing: 0.03em;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid var(--ink);
	transition: background 0.3s ease, color 0.3s ease;
}

.btn-primary {
	background: var(--ink);
	color: #fff;
}

.btn-primary:hover {
	background: #000;
	color: #fff;
}

.btn-secondary {
	background: transparent;
	color: var(--ink);
}

.btn-secondary:hover {
	background: var(--ink);
	color: #fff;
}

.reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.in {
	opacity: 1;
	transform: translateY(0);
}

.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.2s; }
.d3 { transition-delay: 0.3s; }
.d4 { transition-delay: 0.4s; }
.d5 { transition-delay: 0.5s; }

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.site-main {
	min-height: 40vh;
}