/* =================================================================
   可莱尔 · 品牌故事「素器」样式（桌面 + 共用）
   纯白 / 纯墨剪影 / 竖排书法 / 一点朱砂
   ================================================================= */
@font-face {
	font-family: "lxwwk";
	src: url("../../fonts/lxwwk.ttf") format("truetype");
	font-display: swap;
	/* 霞鹜文楷子集，仅含三则小标题用字（高温烧制/SGS安全认证/高岭土原料 等） */
}

#gf {
	--ink: #1c1915;
	--ink2: #57524a;
	--ink3: #a8a29a;
	--zhu: #a63a2e;
	--kai: "mc", "Xingkai SC", "STXingkai", "Kaiti SC", "STKaiti", "KaiTi", "楷体", serif;
	--song: "Songti SC", "STSong", "STZhongsong", "SimSun", "宋体", serif;
	--yahei: "Microsoft YaHei", "微软雅黑", "PingFang SC", sans-serif;
	--ci: #1d4387;
	--ci2: #2a5ca8;
	position: relative;
	color: var(--ink);
	font-family: var(--song);
	background: #fff;
	overflow: hidden;
}

#gf * {
	box-sizing: border-box
}

#gf p {
	margin: 0
}

.gf-in {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 44px;
	position: relative
}

/* 印章（青花釉里款：白釉底 · 钴蓝双框 · 手绘毛边） */
.gf-seal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--kai);
	color: var(--ci);
	background: linear-gradient(160deg, #ffffff 0%, #eef2f8 100%);
	border: 2px solid var(--ci2);
	box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px rgba(42, 92, 168, .55);
	writing-mode: vertical-rl;
	letter-spacing: 0;
	line-height: 1;
	filter: url(#gf-glaze)
}

.gf-seal.sm {
	width: 32px;
	height: 32px;
	font-size: 18px;
	border-width: 3px
}

.gf-seal.md {
	width: 60px;
	height: 60px;
	font-size: 20px;
	padding: 3px;
	border-width: 3px;
	box-shadow: inset 0 0 0 1.5px #fff, inset 0 0 0 3px rgba(42, 92, 168, .55)
}

/* 三则小器影图标 */
.gf-hang-ico {
	display: block;
	width: 60px;
	height: 60px;
	margin: 0 auto 26px
}

.gf-hang-ico svg {
	display: block;
	width: 100%;
	height: 100%
}

.gf-hang-ico .i-body {
	fill: var(--ink)
}

/* ============================ 卷首 ============================ */
.gf-hero {
	position: relative;
	padding: 120px 0 0;
	text-align: center
}

.gf-hero-core {
	position: relative;
	display: inline-block
}

.gf-title {
	margin: 0;
	writing-mode: vertical-rl;
	font-family: var(--kai);
	font-weight: 400;
	font-size: clamp(60px, 6.6vw, 92px);
	line-height: 1.08;
	letter-spacing: .3em;
	color: var(--ink);
	filter: url(#gf-ink-text)
}

.gf-title span {
	display: inline-block;
	font-family: mc;
	opacity: 0;
	filter: blur(7px);
	transform: translateY(-16px);
	animation: gf-ink 1.1s cubic-bezier(.2, .7, .3, 1) both
}

.gf-title span:nth-child(1) {
	animation-delay: .2s
}

.gf-title span:nth-child(2) {
	animation-delay: .38s
}

.gf-title span:nth-child(3) {
	animation-delay: .56s;
	color: #c62222;
}

.gf-title span:nth-child(4) {
	animation-delay: .74s;
	color: #c62222;
}

@keyframes gf-ink {
	to {
		opacity: 1;
		filter: blur(0);
		transform: none
	}
}

.gf-hero-seal {
	position: absolute;
	top: -30px;
	right: -80px;
	transform: rotate(5deg);
	opacity: 0;
	animation: gf-stamp .8s 1.5s cubic-bezier(.3, 1.5, .5, 1) forwards
}

@keyframes gf-stamp {
	0% {
		opacity: 0;
		transform: rotate(10deg) scale(1.5)
	}

	60% {
		opacity: 1
	}

	100% {
		opacity: .94;
		transform: rotate(3deg) scale(1)
	}
}

.gf-hero-en {
	margin-top: 20px;
	font-size: 16px;
	line-height: 2;
	letter-spacing: .62em;
	text-indent: .62em;
	color: var(--ink3);
	font-family: var(--song);
	opacity: 0;
	animation: gf-sub 1.4s 1.2s forwards
}

.gf-hero-sub {
	margin-top: 22px;
	font-size: 14px;
	line-height: 2;
	letter-spacing: .66em;
	text-indent: .66em;
	color: var(--ink2);
	opacity: 0;
	animation: gf-sub 1.4s 1.05s forwards
}

@keyframes gf-sub {
	to {
		opacity: 1
	}
}

/* 器物剪影横卷 */
.gf-silhouette {
	margin-top: 130px;
	pointer-events: none
}

.gf-silhouette svg {
	display: block;
	width: 100%;
	max-width: 1000px;
	height: auto;
	margin: 0 auto
}

.gf-sil .s-body {
	fill: var(--ink)
}

.gf-sil .s-stroke {
	fill: none;
	stroke: var(--ink);
	stroke-width: 2.4;
	stroke-linecap: round
}

.gf-sil .s-fade {
	opacity: 0;
	filter: blur(9px);
	animation: gf-emerge 2.4s cubic-bezier(.2, .6, .3, 1) forwards
}

.gf-sil .s-f2 {
	animation-delay: .45s
}

.gf-sil .s-f3 {
	animation-delay: .9s
}

.gf-sil .s-f4 {
	animation-delay: 1.35s
}

@keyframes gf-emerge {
	to {
		opacity: 1;
		filter: blur(0)
	}
}


.gf-cue {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 96px;
	padding-bottom: 10px;
	color: var(--ink3);
	font-size: 14px;
	letter-spacing: .66em;
	text-indent: .66em
}

.gf-cue i {
	display: block;
	width: 1px;
	height: 44px;
	background: rgba(28, 25, 21, .24);
	position: relative;
	overflow: hidden
}

.gf-cue i::after {
	content: '';
	position: absolute;
	left: 0;
	top: -44px;
	width: 1px;
	height: 44px;
	background: var(--ink);
	animation: gf-drop 2.8s 1.8s infinite
}

@keyframes gf-drop {
	0% {
		top: -44px
	}

	70%,
	100% {
		top: 44px
	}
}

/* ============================ 三则 ============================ */
.gf-vow {
	padding: 170px 0 60px
}

.gf-vow-head {
	text-align: center;
	margin-bottom: 130px
}

.gf-vow-head h2 {
	margin: 0;
	font-family: var(--kai);
	font-size: clamp(26px, 2.6vw, 44px);
	font-weight: 400;
	letter-spacing: .56em;
	text-indent: .56em;
	color: var(--ink)
}

.gf-vow-head .gf-vow-sub {
	margin-top: 0px;
	font-size: 14px;
	letter-spacing: .5em;
	text-indent: .5em;
	color: var(--ink3)
}

.gf-hangs {
	display: flex;
	justify-content: center;
	gap: 120px
}

.gf-hang {
	width: 236px;
	flex: none;
	text-align: center
}

.gf-hang .no {
	display: block;
	font-size: 14px;
	letter-spacing: .4em;
	text-indent: .4em;
	color: var(--ink3);
	margin-bottom: 30px
}

.gf-hang h3 {
	margin: 0 0 20px;
	font-family: "lxwwk", var(--yahei);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: .36em;
	text-indent: .36em;
	color: var(--ink)
}

.gf-hang p {
	font-size: 14px;
	line-height: 2.5;
	letter-spacing: .8px;
	color: var(--ink2);
	text-align: justify
}

.gf-hang .gf-hang-tail {
	display: block;
	width: 20px;
	height: 1px;
	background: rgba(28, 25, 21, .26);
	margin: 44px auto 0
}

/* ============================ 四章 ============================ */
.gf-leaves {
	padding: 40px 0 30px
}

.gf-leaf {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
	padding: 100px 0
}

.gf-leaf.rev {
	flex-direction: row-reverse
}

/* 巨型描边章字（滚动视差，居于器皿一侧错位露出） */
.gf-num {
	position: absolute;
	z-index: 0;
	top: 50%;
	margin-top: -.5em;
	left: -7%;
	font-family: var(--kai);
	font-size: clamp(220px, 25vw, 330px);
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.4px rgba(28, 25, 21, .14);
	pointer-events: none;
	user-select: none;
	will-change: transform;
	transition: color 2.6s cubic-bezier(.3, .5, .3, 1) .55s
}

/* 章节入场：巨型章字由空心描边注入淡墨，变实心后恒定不回退 */


.gf-leaf.rev .gf-num {
	left: auto;
	right: -7%
}

/* 章节水墨器影：滚动注墨 + 悬浮抬升 */
.gf-vessel {
	width: 400px;
	flex: none;
	margin: 0;
	position: relative;
	z-index: 1;
	will-change: transform;
	clip-path: inset(100% 0 0 0);
	transition: clip-path 1.8s cubic-bezier(.55, .06, .25, 1)
}

.gf-leaf.in .gf-vessel {
	clip-path: inset(0 0 0 0)
}

.gf-vessel svg {
	display: block;
	margin-top: 20px;
	width: 100%;
	height: auto;
	transition: transform 1s cubic-bezier(.2, .7, .3, 1)
}

.gf-leaf:hover .gf-vessel svg {
	transform: translateY(-14px)
}

.gf-vessel .v-body {
	fill: var(--ink)
}

.gf-vessel .v-stroke {
	fill: none;
	stroke: var(--ink);
	stroke-width: 3;
	stroke-linecap: round
}

/* 章名 + 竖排本文 */
.gf-body {
	flex: 1;
	min-width: 0;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	gap: 44px
}

.gf-chap {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding-top: 2px
}

.gf-chap h2 {
	margin: 0;
	writing-mode: vertical-rl;
	font-family: 'nav';
	font-weight: 400;
	font-size: 32px;
	letter-spacing: .42em;
	line-height: 1.3;
	color: var(--ink)
}

.gf-chap .en {
	writing-mode: vertical-rl;
	font-size: 14px;
	letter-spacing: .4em;
	color: var(--ink3)
}

.gf-vrule {
	flex: none;
	width: 1px;
	align-self: stretch;
	background: rgba(28, 25, 21, .16)
}

.gf-para {
	writing-mode: vertical-rl;
	height: 440px;
	font-size: 14.4px;
	line-height: 34px;
	letter-spacing: 2.4px;
	color: var(--ink2);
	text-align: justify;
	flex: 0 1 auto;
	max-width: 100%
}

/* ============================ 卷尾 ============================ */
.gf-end {
	padding: 120px 0 170px;
	text-align: center
}

.gf-end-char {
	font-family: var(--kai);
	font-size: 150px;
	line-height: 1;
	color: var(--ink);
	opacity: 0;
	filter: blur(10px);
	transition: opacity 1.8s ease, filter 1.8s ease
}

.gf-end-char.in {
	opacity: 1;
	filter: blur(0)
}

.gf-end-sub {
	margin-top: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px
}

.gf-end-sub p {
	font-size: 14px;
	letter-spacing: .62em;
	text-indent: .62em;
	color: var(--ink2)
}

.gf-end-en {
	margin-top: 22px;
	font-size: 14px;
	letter-spacing: .2em;
	text-indent: .5em;
	color: var(--ink3)
}

/* 侧栏卷标 */
.gf-tab {
	position: fixed;
	right: 26px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 80;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px
}

.gf-tab a {
	writing-mode: vertical-rl;
	font-family: "Xingkai SC", "STXingkai", "Kaiti SC", "STKaiti", "KaiTi", "楷体", serif;
	font-size: 16px;
	letter-spacing: .34em;
	color: var(--ink3);
	text-decoration: none;
	transition: color .4s;
	position: relative;
	font-weight: bold;
	padding: 2px 0
}

.gf-tab a.on {
	color: var(--ci2);
	
}

.gf-tab a:hover {
	color: var(--ink)
}

.gf-tab i {
	width: 1px;
	height: 52px;
	background: rgba(28, 25, 21, .18)
}

@media(max-width:1500px) {
	.gf-tab {
		display: none
	}
}

/* 揭示 */
.gf-rv {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 1.2s cubic-bezier(.2, .7, .3, 1), transform 1.2s cubic-bezier(.2, .7, .3, 1)
}

.gf-rv.in {
	opacity: 1;
	transform: none
}

@media(prefers-reduced-motion:reduce) {

	.gf-rv,
	.gf-end-char {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important
	}

	.gf-vessel {
		clip-path: none !important;
		transition: none !important
	}

	.gf-num {
		transform: none !important;
		color: rgba(28, 25, 21, .07);
		transition: none !important
	}

	.gf-title span {
		opacity: 1;
		filter: none;
		transform: none;
		animation: none;
		color: var(--ink);
		-webkit-text-fill-color: currentColor;
		background: none
	}

	.gf-hero-sub,
	.gf-hero-en {
		opacity: 1;
		animation: none
	}

	.gf-sil .s-fade {
		opacity: 1;
		filter: none;
		animation: none
	}
}

/* 窄屏 */
@media(max-width:900px) {
	.gf-in {
		padding: 0 22px
	}

	.gf-hero {
		padding-top: 80px
	}

	.gf-hero-seal {
		right: -38px
	}

	.gf-silhouette {
		margin-top: 80px
	}

	.gf-cue {
		margin-top: 60px
	}

	.gf-vow {
		padding: 100px 0 40px
	}

	.gf-vow-head {
		margin-bottom: 80px
	}

	.gf-hangs {
		flex-direction: column;
		align-items: center;
		gap: 70px
	}

	.gf-hang {
		width: 100%;
		max-width: 330px
	}

	.gf-leaf {
		flex-direction: column !important;
		align-items: flex-start;
		gap: 36px;
		padding: 90px 0
	}

	.gf-num {
		display: none
	}

	.gf-vessel {
		width: 76%;
		max-width: 360px;
		margin: 0 auto
	}

	.gf-body {
		width: 100%;
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 20px
	}

	.gf-chap {
		flex-direction: row-reverse;
		align-items: center;
		gap: 12px
	}

	.gf-chap h2 {
		writing-mode: horizontal-tb;
		font-size: 24px;
		letter-spacing: .26em
	}

	.gf-chap .en {
		writing-mode: horizontal-tb
	}

	.gf-vrule {
		display: none
	}

	.gf-para {
		height: auto;
		writing-mode: horizontal-tb;
		font-size: 14px;
		line-height: 2.2;
		letter-spacing: .6px;
		width: 100%
	}

	.gf-seal {
		writing-mode: horizontal-tb
	}

	.gf-end {
		padding: 110px 0 100px
	}

	.gf-end-char {
		font-size: 100px
	}
}
/* 卷标接近页脚封面时淡出（新增规则，不改动上方既有卷标样式） */
.gf-tab {
	transition: opacity .45s ease
}

.gf-tab.gf-tab--off {
	opacity: 0;
	pointer-events: none
}