/* ============================================================
   chaunjiang-haozi.css —— 川江号子 · 江河蓝主题
   设计意象：千里川江、险滩激流、船工号子
   ============================================================ */

:root {
	--paper: #eef2f3;
	--ink: #1d2d3a;
	--muted: #6b7c88;
	--accent: #16324f;
	--accent-2: #3e8ab0;
	--nav-bg: #16324f;
	--nav-ink: #d8e6ee;
	--card-bg: #ffffff;
	--card-border: #d9e2e8;
	--chip-bg: rgba(22, 50, 79, .08);
	--chip-ink: #35566e;
	--btn-bg: #16324f;
	--btn-ink: #fff;
	--footer-bg: #0f2338;
	--footer-ink: #9db4c2;
	--wave: #cfe2ec;
}

body {
	background:
		linear-gradient(180deg, rgba(22, 50, 79, .04), transparent 340px),
		var(--paper);
}

/* ---------- 头部：江面夜航 ---------- */
.river-hero {
	position: relative;
	overflow: hidden;
	color: #eaf3f7;
	background:
		radial-gradient(1200px 420px at 75% -80px, rgba(122, 190, 220, .28), transparent 60%),
		linear-gradient(168deg, #10283f 0%, #16324f 46%, #22506e 100%);
	padding: 84px 22px 120px;
	text-align: center;
}

.river-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(2px 2px at 12% 24%, rgba(255, 255, 255, .35), transparent 55%),
		radial-gradient(2px 2px at 68% 16%, rgba(255, 255, 255, .28), transparent 55%),
		radial-gradient(1.5px 1.5px at 42% 40%, rgba(255, 255, 255, .2), transparent 55%),
		radial-gradient(1.5px 1.5px at 86% 46%, rgba(255, 255, 255, .22), transparent 55%);
	pointer-events: none;
}

.river-hero .hero-kicker {
	font-size: 13px;
	letter-spacing: 10px;
	color: #8fc3d8;
	margin-bottom: 14px;
}

.river-hero h1 {
	font-size: clamp(38px, 7vw, 64px);
	letter-spacing: 14px;
	text-indent: 14px;
	font-weight: 700;
	background: linear-gradient(180deg, #ffffff, #a8d2e4);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0 6px 30px rgba(0, 0, 0, .25);
}

.river-hero .hero-slogan {
	margin-top: 14px;
	font-size: 16px;
	letter-spacing: 4px;
	color: #c9dfe9;
}

.hero-chips {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 26px;
	position: relative;
	z-index: 1;
}

.chip {
	padding: 6px 16px;
	border: 1px solid rgba(168, 210, 228, .4);
	border-radius: 999px;
	font-size: 13px;
	letter-spacing: 2px;
	color: #d6e9f2;
	background: rgba(255, 255, 255, .07);
}

.river-hero .waves {
	position: absolute;
	left: -5%;
	bottom: -6px;
	width: 110%;
	height: 90px;
	display: block;
}

/* ---------- 号子调式：江程横带 ---------- */
.river-journey {
	position: relative;
	margin-top: 8px;
	padding: 10px 0 4px;
}

.river-journey::before {
	content: "";
	position: absolute;
	top: 34px;
	left: 4%;
	right: 4%;
	height: 3px;
	border-radius: 3px;
	background: repeating-linear-gradient(90deg, var(--accent-2) 0 14px, transparent 14px 22px);
	opacity: .45;
}

.river-journey ol {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.river-journey li {
	position: relative;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-top: 4px solid var(--accent-2);
	border-radius: 12px;
	padding: 44px 16px 16px;
	box-shadow: 0 8px 20px rgba(22, 50, 79, .07);
}

.river-journey .stop {
	position: absolute;
	top: 16px;
	left: 16px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 10px rgba(22, 50, 79, .35);
}

.river-journey h3 {
	font-size: 17px;
	letter-spacing: 2px;
	margin-bottom: 8px;
	color: var(--accent);
}

.river-journey p { font-size: 13.5px; color: #4c5f6d; }

/* ---------- 溯源：首字下沉 + 侧漂流图 ---------- */
.origin-flow {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 34px;
	align-items: start;
}

.origin-flow .lead p { margin-bottom: 16px; font-size: 15.5px; }

.origin-flow .lead p:first-of-type::first-letter {
	float: left;
	font-size: 56px;
	line-height: 1;
	padding: 6px 10px 0 0;
	font-family: "STKaiti", "KaiTi", serif;
	color: var(--accent-2);
	font-weight: 700;
}

.origin-flow aside figure { margin-bottom: 16px; transform: rotate(-1.2deg); }
.origin-flow aside figure:last-child { transform: rotate(1.4deg); }
.origin-flow aside figure:nth-child(2) { transform: rotate(1.2deg); }

.origin-flow aside figcaption {
	background: var(--chip-bg);
	color: var(--chip-ink);
	border-radius: 8px;
	padding: 4px 10px;
	width: fit-content;
	margin: 8px auto 0;
}

/* ---------- 特色：四张波纹卡 ---------- */
.tide-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}

.tide-grid article {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 14px;
	padding: 22px 22px 18px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(22, 50, 79, .06);
}

.tide-grid article::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 8px;
	background: linear-gradient(90deg, var(--accent-2), transparent);
	opacity: .5;
}

.tide-grid h3 {
	font-size: 17px;
	color: var(--accent);
	letter-spacing: 1px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.tide-grid h3 .ico {
	font-family: Georgia, serif;
	color: var(--accent-2);
}

.tide-grid p { font-size: 14px; color: #465a67; }

/* ---------- 视频：船舱银幕 ---------- */
.duo-video {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 20px;
	align-items: start;
}

/* ---------- 传承：号令清单 ---------- */
.legacy-list { counter-reset: step; }

.legacy-list article {
	position: relative;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 14px;
	padding: 18px 20px 16px 66px;
	margin-bottom: 14px;
	box-shadow: 0 6px 18px rgba(22, 50, 79, .05);
}

.legacy-list article::before {
	counter-increment: step;
	content: counter(step, decimal-leading-zero);
	position: absolute;
	left: 16px;
	top: 18px;
	font-family: Georgia, serif;
	font-size: 26px;
	font-style: italic;
	color: var(--accent-2);
}

.legacy-list h3 { font-size: 16px; color: var(--accent); margin-bottom: 6px; letter-spacing: 1px; }
.legacy-list p { font-size: 14px; color: #465a67; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
	.origin-flow { grid-template-columns: 1fr; }
	.duo-video { grid-template-columns: 1fr; }
	.river-journey ol { grid-template-columns: repeat(2, 1fr); }
	.river-journey::before { display: none; }
}

@media (max-width: 560px) {
	.tide-grid { grid-template-columns: 1fr; }
	.river-journey ol { grid-template-columns: 1fr; }
	.river-hero { padding: 60px 16px 96px; }
	.river-hero h1 { letter-spacing: 8px; text-indent: 8px; }
}