/* ============================================================
   liangshan-dengxi.css —— 梁山灯戏专属版式
   主题：灯笼暖橙 · 戏台红，突出"嬉笑闹、扭拽跳"的市井喜剧气质
   ============================================================ */

:root {
	--dx-bg: #fbf3e4;
	--dx-ink: #3c2a1e;
	--dx-accent: #b4451f;
	--dx-accent2: #d98e2b;
	--dx-deep: #7a2d12;
}

/* ---------- Hero：戏台灯笼 ---------- */
.deng-hero {
	position: relative;
	background:
		radial-gradient(700px 300px at 18% -10%, rgba(217, 142, 43, .4), transparent 60%),
		radial-gradient(500px 260px at 84% 116%, rgba(180, 69, 31, .45), transparent 62%),
		linear-gradient(170deg, var(--dx-deep) 0%, #a03a1a 100%);
	color: #fdf3df;
	text-align: center;
	padding: 84px 22px 74px;
	overflow: hidden;
}

.deng-hero::before,
.deng-hero::after {
	content: "灯";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-family: "STKaiti", "KaiTi", serif;
	font-size: 150px;
	color: rgba(255, 255, 255, .07);
	pointer-events: none;
}
.deng-hero::before { left: 4%; }
.deng-hero::after { right: 4%; }

.deng-hero .kicker { font-size: 13px; letter-spacing: 6px; opacity: .88; margin-bottom: 12px; }
.deng-hero h1 { font-size: clamp(30px, 5vw, 48px); letter-spacing: 12px; text-indent: 12px; }
.deng-hero .slogan { margin-top: 12px; font-size: 15px; letter-spacing: 3px; opacity: .92; }

.deng-hero .chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.deng-hero .chip {
	padding: 5px 15px; border: 1px solid rgba(255, 240, 210, .4);
	border-radius: 999px; font-size: 12.5px; letter-spacing: 2px;
	background: rgba(0, 0, 0, .15);
}

/* ---------- 六字诀：嬉笑闹·扭拽跳 ---------- */
.liu-zi {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 10px;
	max-width: 720px;
	margin: 0 auto;
}

.liu-zi span {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "STKaiti", "KaiTi", serif;
	font-size: clamp(26px, 4vw, 42px);
	color: #fff;
	background: linear-gradient(150deg, var(--dx-accent), var(--dx-accent2));
	border-radius: 14px;
	box-shadow: 0 10px 22px rgba(122, 45, 18, .28);
	transition: transform .2s;
}
.liu-zi span:nth-child(even) { transform: rotate(3deg); }
.liu-zi span:nth-child(odd) { transform: rotate(-3deg); }
.liu-zi span:hover { transform: rotate(0) scale(1.08); }

/* ---------- 演出三段：灯节戏单 ---------- */
.xi-dan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.xi-dan article {
	background: #fff;
	border-top: 5px solid var(--dx-accent2);
	border-radius: 12px;
	padding: 22px 20px;
	box-shadow: 0 8px 18px rgba(60, 42, 30, .08);
}
.xi-dan h3 { font-size: 17px; color: var(--dx-deep); margin-bottom: 8px; }
.xi-dan h3 em {
	font-style: normal; font-size: 12px; color: var(--dx-accent);
	border: 1px solid var(--dx-accent); border-radius: 4px;
	padding: 1px 7px; margin-left: 6px; vertical-align: 2px;
}
.xi-dan p { font-size: 13.5px; color: #6b5a4c; line-height: 1.8; }

/* ---------- 经典剧目列表 ---------- */
.jumu-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; }
.jumu-list li {
	background: #fff; border-left: 4px solid var(--dx-accent);
	border-radius: 0 8px 8px 0; padding: 12px 16px;
	font-size: 14px; color: var(--dx-ink);
	display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.jumu-list li em { font-style: normal; font-size: 12px; color: #a08a76; white-space: nowrap; }

/* ---------- 声腔面板 ---------- */
.pang-panel {
	background: linear-gradient(120deg, #fff 55%, #fdeede 100%);
	border: 1px solid #f0dcc3;
	border-radius: 14px;
	padding: 26px 28px;
}
.pang-panel h3 { font-size: 17px; color: var(--dx-deep); margin-bottom: 10px; }
.pang-panel p { font-size: 14px; color: #6b5a4c; line-height: 1.9; }
.pang-panel .tone-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pang-panel .tone-tags span {
	background: var(--dx-bg); border: 1px dashed var(--dx-accent2);
	color: var(--dx-accent); font-size: 12.5px;
	padding: 4px 12px; border-radius: 999px;
}

@media (max-width: 768px) {
	.liu-zi { grid-template-columns: repeat(3, 1fr); }
	.xi-dan, .jumu-list { grid-template-columns: 1fr; }
}