/* ============================================================
   chuanju.css —— 川剧 · 戏台红金主题
   设计意象：绛红幕布、金色流苏、脸谱绝活
   ============================================================ */

:root {
	--paper: #faf6f1;
	--ink: #33221d;
	--muted: #8a7468;
	--accent: #9e2a2b;
	--accent-2: #c9a227;
	--nav-bg: #701c1d;
	--nav-ink: #f5e3c8;
	--card-bg: #fffdf9;
	--card-border: #ecdcc8;
	--chip-bg: rgba(158, 42, 43, .08);
	--chip-ink: #8d3f33;
	--btn-bg: #9e2a2b;
	--btn-ink: #fff;
	--footer-bg: #3d1415;
	--footer-ink: #d9bfa0;
}

/* ---------- 头部：大幕拉开 ---------- */
.stage-hero {
	position: relative;
	overflow: hidden;
	text-align: center;
	color: #fdf3dd;
	background:
		radial-gradient(900px 380px at 50% 120%, rgba(201, 162, 39, .30), transparent 65%),
		linear-gradient(180deg, #58131a 0%, #7c1f22 55%, #93282a 100%);
	padding: 96px 22px 78px;
}

/* 金色帷幔（顶部弧齿） */
.stage-hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 34px;
	background: radial-gradient(38px 30px at 19px -8px, #c9a227 98%, transparent 100%);
	background-size: 38px 34px;
	background-repeat: repeat-x;
	opacity: .95;
	filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35));
}

.stage-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(3px 3px at 14% 30%, rgba(255, 224, 150, .5), transparent 60%),
		radial-gradient(2.5px 2.5px at 82% 24%, rgba(255, 224, 150, .4), transparent 60%),
		radial-gradient(2px 2px at 64% 66%, rgba(255, 224, 150, .3), transparent 60%);
	pointer-events: none;
}

.stage-hero h1 {
	font-size: clamp(40px, 7vw, 68px);
	letter-spacing: 20px;
	text-indent: 20px;
	color: #ffe3a1;
	text-shadow: 0 4px 22px rgba(0, 0, 0, .45);
}

.stage-hero .hero-kicker {
	font-size: 13px;
	letter-spacing: 8px;
	color: #e5b96b;
	margin-bottom: 12px;
}

.stage-hero .hero-slogan {
	margin-top: 12px;
	font-size: 17px;
	letter-spacing: 5px;
	color: #f7dfb2;
}

.stage-hero .hero-chips {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 26px;
}

.stage-hero .chip {
	padding: 6px 16px;
	border: 1px solid rgba(229, 185, 107, .55);
	border-radius: 999px;
	font-size: 13px;
	letter-spacing: 2px;
	color: #ffe3a1;
	background: rgba(0, 0, 0, .18);
}

/* ---------- 五腔同台：戏折子 ---------- */
.roles {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}

.roles article {
	text-align: center;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 16px;
	padding: 26px 14px 20px;
	box-shadow: 0 10px 24px rgba(112, 28, 29, .08);
	position: relative;
}

.roles .mask {
	width: 76px;
	height: 76px;
	margin: 0 auto 12px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	font-weight: 700;
	color: #fff;
	font-family: "STKaiti", "KaiTi", serif;
	box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .35), 0 8px 18px rgba(0, 0, 0, .18);
}

.roles article:nth-child(1) .mask { background: #9e2a2b; }
.roles article:nth-child(2) .mask { background: #c9a227; color: #5a3d00; }
.roles article:nth-child(3) .mask { background: #3c3a45; }
.roles article:nth-child(4) .mask { background: #2e6e5a; }
.roles article:nth-child(5) .mask { background: #87561e; }

.roles h3 { font-size: 17px; letter-spacing: 2px; color: var(--accent); margin-bottom: 6px; }
.roles p { font-size: 13px; color: #6d5a4d; }

/* ---------- 绝活：印章卡 ---------- */
.stunt-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.stunt-grid article {
	position: relative;
	background: linear-gradient(180deg, #fffdf9, #f9efe0);
	border: 1px solid var(--card-border);
	border-radius: 14px;
	padding: 22px 18px;
	overflow: hidden;
	box-shadow: 0 8px 22px rgba(112, 28, 29, .07);
}

.stunt-grid article::before {
	content: attr(data-seal);
	position: absolute;
	right: 10px;
	top: 10px;
	width: 44px;
	height: 44px;
	border: 2px solid rgba(158, 42, 43, .75);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(158, 42, 43, .85);
	font-family: "STKaiti", "KaiTi", serif;
	font-size: 20px;
	transform: rotate(8deg);
	opacity: .8;
}

.stunt-grid h3 { font-size: 18px; letter-spacing: 3px; color: var(--accent); margin-bottom: 8px; }
.stunt-grid p { font-size: 13.5px; color: #6d5a4d; }

/* ---------- 溯源：竖排引言 ---------- */
.opera-origin {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 30px;
	align-items: start;
}

.opera-origin .vert {
	writing-mode: vertical-rl;
	font-family: "STKaiti", "KaiTi", serif;
	font-size: 24px;
	letter-spacing: 10px;
	color: var(--accent);
	background: linear-gradient(180deg, rgba(201, 162, 39, .18), transparent);
	border: 1px solid var(--card-border);
	border-radius: 12px;
	padding: 22px 14px;
	height: fit-content;
	max-height: 420px;
}

.opera-origin .prose p { margin-bottom: 16px; font-size: 15.5px; }

.opera-origin .prose .badges {
	display: inline-block;
	background: var(--chip-bg);
	color: var(--chip-ink);
	border-radius: 6px;
	padding: 1px 8px;
	font-size: 13px;
}

/* ---------- 视听：戏台剧照横幅 ---------- */
.stage-gallery {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-auto-rows: 180px;
	gap: 14px;
}

.stage-gallery figure { overflow: hidden; border-radius: 12px; position: relative; }
.stage-gallery figure:first-child { grid-row: span 2; }
.stage-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.stage-gallery figure:hover img { transform: scale(1.05); }

.stage-gallery figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 20px 12px 8px;
	background: linear-gradient(transparent, rgba(60, 16, 18, .8));
	color: #ffe9c4;
	font-size: 13px;
	text-align: center;
}

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

/* ---------- 传承：红头折子单 ---------- */
.repertoire {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	list-style: none;
}

.repertoire li {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-left: 5px solid var(--accent);
	border-radius: 10px;
	padding: 14px 18px;
	box-shadow: 0 6px 16px rgba(112, 28, 29, .06);
}

.repertoire h3 { font-size: 15.5px; color: var(--accent); letter-spacing: 1px; margin-bottom: 4px; }
.repertoire p { font-size: 13.5px; color: #6d5a4d; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
	.roles { grid-template-columns: repeat(3, 1fr); }
	.stunt-grid { grid-template-columns: repeat(2, 1fr); }
	.opera-origin { grid-template-columns: 1fr; }
	.opera-origin .vert { writing-mode: horizontal-tb; letter-spacing: 4px; max-height: none; font-size: 20px; }
	.stage-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
	.duo-video { grid-template-columns: 1fr; }
	.repertoire { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.roles { grid-template-columns: repeat(2, 1fr); }
	.stunt-grid { grid-template-columns: 1fr; }
	.stage-hero h1 { letter-spacing: 10px; text-indent: 10px; }
	.stage-gallery { grid-template-columns: 1fr; }
}