/* ============================================================
   shizhu-luoerdiao.css —— 石柱土家啰儿调 · 日出青山主题
   设计意象：《太阳出来喜洋洋》、武陵晨光、山歌对唱
   ============================================================ */

:root {
	--paper: #f4f3ea;
	--ink: #2e3226;
	--muted: #7c8270;
	--accent: #cf6b1f;
	--accent-2: #3e6b45;
	--nav-bg: #2c4a33;
	--nav-ink: #f0ecd9;
	--card-bg: #fdfcf3;
	--card-border: #d9dcc6;
	--chip-bg: rgba(207, 107, 31, .1);
	--chip-ink: #a3561c;
	--btn-bg: #cf6b1f;
	--btn-ink: #fff;
	--footer-bg: #22331f;
	--footer-ink: #b3bda0;
}

/* ---------- 头部：太阳出来 ---------- */
.sunrise-hero {
	position: relative;
	overflow: hidden;
	text-align: center;
	color: #fff7e6;
	background: linear-gradient(180deg, #274634 0%, #3e6b45 46%, #cf6b1f 130%);
	padding: 96px 22px 150px;
}

/* 日出光晕 */
.sunrise-hero::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -180px;
	width: 420px;
	height: 420px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 42%, #ffe9b8, #f3a03c 55%, transparent 72%);
	box-shadow: 0 0 90px rgba(243, 160, 60, .55);
	pointer-events: none;
}

/* 远山剪影 */
.sunrise-hero::after {
	content: "";
	position: absolute;
	left: -5%;
	right: -5%;
	bottom: -8px;
	height: 90px;
	background:
		linear-gradient(115deg, transparent 42%, #2c4a33 42%) 0 100% / 34% 100% no-repeat,
		linear-gradient(-115deg, transparent 42%, #2c4a33 42%) 100% 100% / 34% 100% no-repeat;
	opacity: .9;
	pointer-events: none;
}

.sunrise-hero .hero-kicker { font-size: 13px; letter-spacing: 8px; color: #f6c780; margin-bottom: 12px; position: relative; z-index: 1; }

.sunrise-hero h1 {
	font-size: clamp(36px, 6.6vw, 62px);
	letter-spacing: 14px;
	text-indent: 14px;
	color: #fff3d8;
	text-shadow: 0 0 34px rgba(243, 160, 60, .55), 0 5px 22px rgba(0, 0, 0, .35);
	position: relative;
	z-index: 1;
}

.sunrise-hero .hero-slogan { margin-top: 12px; font-size: 16px; letter-spacing: 4px; color: #f9dfae; position: relative; z-index: 1; }

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

.sunrise-hero .chip {
	padding: 6px 16px;
	border: 1px solid rgba(246, 199, 128, .5);
	border-radius: 999px;
	font-size: 13px;
	letter-spacing: 2px;
	color: #fff3d8;
	background: rgba(0, 0, 0, .16);
}

/* ---------- 歌词大卡 ---------- */
.lyric-card {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 0;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 14px 34px rgba(44, 74, 51, .12);
}

.lyric-card .lyric {
	background: linear-gradient(160deg, #fdf3da, #fbd9a0);
	padding: 40px 36px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.lyric-card .lyric .song {
	font-family: "STKaiti", "KaiTi", serif;
	font-size: clamp(24px, 3.4vw, 34px);
	letter-spacing: 4px;
	color: #8a4510;
	line-height: 2;
}

.lyric-card .lyric .song em { font-style: normal; color: #cf6b1f; border-bottom: 3px solid rgba(207, 107, 31, .45); padding-bottom: 2px; }

.lyric-card .lyric .from {
	margin-top: 16px;
	font-size: 13px;
	color: #9a6a2e;
	letter-spacing: 2px;
}

.lyric-card .note {
	padding: 34px 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
}

.lyric-card .note h3 { font-size: 17px; color: var(--accent); letter-spacing: 2px; }
.lyric-card .note p { font-size: 14px; color: #5c6353; }

/* ---------- 衬词解析：散落的啰儿 ---------- */
.chenword {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.chenword .word {
	background: var(--card-bg);
	border: 1.5px solid var(--card-border);
	border-radius: 14px;
	text-align: center;
	padding: 22px 12px 18px;
	box-shadow: 0 8px 20px rgba(44, 74, 51, .08);
	transition: transform .3s;
}

.chenword .word:hover { transform: translateY(-4px) rotate(-1deg); }

.chenword .word b {
	display: block;
	font-family: "STKaiti", "KaiTi", serif;
	font-size: 26px;
	color: var(--accent);
	margin-bottom: 6px;
}

.chenword .word span { font-size: 12.5px; color: var(--muted); }

/* ---------- 溯源 ---------- */
.folk-origin { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 900px; }

.folk-origin .block {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 14px;
	padding: 24px 28px;
	box-shadow: 0 10px 26px rgba(44, 74, 51, .08);
}

.folk-origin p { font-size: 15.5px; margin-bottom: 12px; }
.folk-origin p:last-child { margin-bottom: 0; }

/* ---------- 四种调子：歌本列表 ---------- */
.songbook { display: grid; gap: 14px; }

.songbook article {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 18px;
	align-items: center;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 14px;
	padding: 16px 22px 16px 16px;
	box-shadow: 0 8px 20px rgba(44, 74, 51, .07);
}

.songbook .disc {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, var(--accent) 0 8px, transparent 9px),
		repeating-radial-gradient(circle at 50% 50%, #3a4a3d 0 2px, #2c382f 2px 4px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
}

.songbook h3 { font-size: 16.5px; letter-spacing: 1px; color: var(--accent-2); margin-bottom: 4px; }
.songbook p { font-size: 13.5px; color: #5c6353; }

/* ---------- 视听 ---------- */
.ridge-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.ridge-gallery figure { margin: 0; border-radius: 12px; overflow: hidden; position: relative; box-shadow: 0 10px 24px rgba(44, 74, 51, .14); }
.ridge-gallery img { height: 165px; width: 100%; object-fit: cover; transition: transform .4s; }
.ridge-gallery figure:hover img { transform: scale(1.05); }

.ridge-gallery figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 24px 10px 8px;
	background: linear-gradient(transparent, rgba(34, 51, 31, .88));
	color: #fff3d8;
	font-size: 12.5px;
	text-align: center;
	margin: 0;
}

.duo-video {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 20px;
	margin-top: 20px;
	align-items: start;
}

/* ---------- 传承：山径条目 ---------- */
.trail-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.trail-list article {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 14px;
	padding: 20px 22px;
	box-shadow: 0 8px 20px rgba(44, 74, 51, .07);
	border-top: 4px solid var(--accent-2);
}

.trail-list h3 { font-size: 16px; color: var(--accent); letter-spacing: 1px; margin-bottom: 6px; }
.trail-list p { font-size: 13.5px; color: #5c6353; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
	.lyric-card { grid-template-columns: 1fr; }
	.chenword { grid-template-columns: repeat(2, 1fr); }
	.trail-list { grid-template-columns: 1fr; }
	.ridge-gallery { grid-template-columns: repeat(2, 1fr); }
	.duo-video { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.chenword, .ridge-gallery { grid-template-columns: 1fr; }
	.sunrise-hero { padding-bottom: 120px; }
	.sunrise-hero h1 { letter-spacing: 8px; text-indent: 8px; }
}