/* ============================================================
   rongchang-zheshan.css —— 荣昌折扇专属版式
   主题：墨色扇骨 + 朱砂印泥，扇面放射状装饰
   ============================================================ */

:root {
	--zs-bg: #f6f4ef;
	--zs-ink: #2c2f33;
	--zs-accent: #4a5160;
	--zs-red: #b03a2e;
	--zs-gold: #b08d4a;
}

/* ---------- Hero：扇骨放射 ---------- */
.zs-hero {
	position: relative;
	background: linear-gradient(160deg, #33373d 0%, var(--zs-accent) 100%);
	color: #f4f2ec;
	overflow: hidden;
	padding: 80px 22px 72px;
	text-align: center;
}

.zs-hero .fan-bg {
	position: absolute;
	left: 50%; bottom: -160px;
	width: 620px; height: 620px;
	transform: translateX(-50%);
	background: repeating-conic-gradient(from 200deg at 50% 100%, rgba(255, 255, 255, .07) 0deg 2deg, transparent 2deg 14deg);
	border-radius: 50%;
	pointer-events: none;
}
.zs-hero .inner { position: relative; z-index: 1; }
.zs-hero .kicker { font-size: 13px; letter-spacing: 6px; opacity: .88; margin-bottom: 10px; }
.zs-hero h1 { font-size: clamp(30px, 4.8vw, 46px); letter-spacing: 10px; }
.zs-hero .slogan { margin-top: 12px; font-size: 15px; letter-spacing: 3px; opacity: .92; }
.zs-hero .chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.zs-hero .chip { padding: 5px 15px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 6px; font-size: 12.5px; letter-spacing: 2px; background: rgba(0, 0, 0, .16); }

/* ---------- 一扇三绝 ---------- */
.shan-jue { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.shan-jue article {
	background: #fff; border-radius: 12px; overflow: hidden;
	box-shadow: 0 8px 18px rgba(44, 47, 51, .08);
}
.shan-jue .head {
	padding: 16px; text-align: center;
	color: #fff; font-size: 17px; letter-spacing: 3px;
	background: linear-gradient(120deg, var(--zs-accent), #6a7386);
}
.shan-jue article:nth-child(2) .head { background: linear-gradient(120deg, var(--zs-red), #c96a54); }
.shan-jue article:nth-child(3) .head { background: linear-gradient(120deg, var(--zs-gold), #c9ae7a); }
.shan-jue .body { padding: 20px 22px; }
.shan-jue .body p { font-size: 13.5px; color: #5c6068; line-height: 1.8; }

/* ---------- 扇骨结构拆解 ---------- */
.jie-gou { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.jie-gou article {
	background: var(--zs-bg);
	border: 1px solid #e4dfd3;
	border-radius: 10px;
	padding: 16px 12px;
	text-align: center;
}
.jie-gou .part {
	display: inline-block;
	font-family: "STKaiti", "KaiTi", serif;
	font-size: 22px; color: var(--zs-red);
	border-bottom: 3px solid var(--zs-gold);
	margin-bottom: 8px; padding: 0 6px;
}
.jie-gou h4 { font-size: 14px; color: var(--zs-ink); margin-bottom: 4px; }
.jie-gou p { font-size: 12px; color: #85888f; line-height: 1.55; }

/* ---------- 工序竹节时间线（横向） ---------- */
.gong-lv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: gl; }
.gong-lv article {
	background: #fff; border-radius: 12px; padding: 20px;
	border-left: 4px solid var(--zs-gold);
	box-shadow: 0 6px 14px rgba(44, 47, 51, .07);
	counter-increment: gl;
	position: relative;
}
.gong-lv article::before {
	content: counter(gl, cjk-ideographic);
	position: absolute; top: 12px; right: 14px;
	font-family: "STKaiti", "KaiTi", serif;
	font-size: 30px; color: rgba(176, 61, 46, .18);
}
.gong-lv h4 { font-size: 15.5px; color: var(--zs-ink); margin-bottom: 6px; }
.gong-lv p { font-size: 13px; color: #6b6f77; line-height: 1.7; }

@media (max-width: 768px) {
	.shan-jue, .gong-lv { grid-template-columns: 1fr; }
	.jie-gou { grid-template-columns: repeat(2, 1fr); }
}