:root {
	--about-ink: #070605;
	--about-brown: #21140d;
	--about-gold: #c99b52;
	--about-gold-bright: #f2cf8b;
	--about-ivory: #f5f0e8;
	--about-muted: #c9c1b6;
	--about-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, SimSun, Georgia, serif;
}

html {
	scroll-behavior: smooth;
}

body.about-page {
	background: var(--about-ink);
	color: var(--about-ivory);
	font-family: var(--about-serif);
}

body.about-page::before {
	background:
		radial-gradient(circle at 15% 12%, rgba(110, 62, 34, 0.22), transparent 34rem),
		linear-gradient(135deg, #070605 0%, #120c08 50%, #050404 100%);
}

.about-page #wrapper {
	background: transparent;
	overflow: clip;
}

.about-page #wrapper > .bg {
	display: none;
}

.skip-link {
	background: var(--about-gold-bright);
	color: #130c07 !important;
	left: 1rem;
	padding: 0.65rem 1rem;
	position: fixed;
	top: -5rem;
	z-index: 10010;
}

.skip-link:focus {
	top: 1rem;
}

.about-progress {
	height: 3px;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10005;
}

.about-progress span {
	background: linear-gradient(90deg, #8f632d, var(--about-gold-bright));
	display: block;
	height: 100%;
	transform: scaleX(0);
	transform-origin: left;
	will-change: transform;
}

.about-page #header {
	height: 8rem;
	padding-bottom: 1.25rem;
}

.about-page #header .logo {
	border-color: rgba(242, 207, 139, 0.72);
	color: var(--about-ivory);
	font-family: var(--about-serif);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.38em;
	padding: 0.65rem 1.35rem 0.65rem 1.75rem;
}

.about-page #header .logo:hover {
	border-color: var(--about-gold-bright);
	color: var(--about-gold-bright) !important;
}

.about-page #nav {
	background: rgba(18, 12, 8, 0.88);
	backdrop-filter: blur(18px);
	border: 1px solid rgba(201, 155, 82, 0.18);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
	max-width: 96rem;
	position: sticky;
	top: 0;
	width: calc(100% - 3rem);
	z-index: 1000;
}

.about-page #nav ul.links li a {
	color: rgba(245, 240, 232, 0.8);
}

.about-page #nav ul.links li.active {
	background: rgba(201, 155, 82, 0.13);
}

.about-page #nav ul.links li.active a,
.about-page #nav ul.links li a:hover {
	color: var(--about-gold-bright) !important;
}

.about-page .dropdown-content {
	background: rgba(16, 10, 7, 0.97);
	border: 1px solid rgba(201, 155, 82, 0.25);
}

.about-deck {
	padding: 1.25rem 1.5rem 0;
}

.deck-slide {
	aspect-ratio: 16 / 9;
	background: #0b0806;
	border: 1px solid rgba(201, 155, 82, 0.2);
	box-shadow: 0 1.75rem 5rem rgba(0, 0, 0, 0.42);
	margin: 0 auto 1.25rem;
	max-width: 96rem;
	overflow: hidden;
	position: relative;
	scroll-margin-top: 5.5rem;
}

.deck-slide > img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.mobile-copy {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.chapter-rail {
	display: grid;
	gap: 0.25rem;
	position: fixed;
	right: 0.35rem;
	top: 50%;
	transform: translateY(-50%);
	z-index: 950;
}

.chapter-rail a {
	align-items: center;
	border: 0;
	color: rgba(245, 240, 232, 0.44);
	display: flex;
	font-family: Georgia, serif;
	font-size: 0.55rem;
	height: 1.45rem;
	justify-content: center;
	letter-spacing: 0;
	position: relative;
	transition: color 180ms ease, transform 180ms ease;
	width: 2.25rem;
}

.chapter-rail a::before {
	background: rgba(201, 155, 82, 0.38);
	content: "";
	height: 1px;
	position: absolute;
	right: 0;
	top: 50%;
	transition: width 180ms ease, background 180ms ease;
	width: 0.5rem;
}

.chapter-rail a span {
	opacity: 0;
	transform: translateX(0.3rem);
	transition: opacity 180ms ease, transform 180ms ease;
}

.chapter-rail a:hover,
.chapter-rail a.is-active {
	color: var(--about-gold-bright) !important;
	transform: translateX(-0.15rem);
}

.chapter-rail a:hover::before,
.chapter-rail a.is-active::before {
	background: var(--about-gold-bright);
	width: 0.85rem;
}

.chapter-rail a:hover span,
.chapter-rail a.is-active span {
	opacity: 1;
	transform: translateX(-0.45rem);
}

.contact-section {
	background:
		linear-gradient(115deg, rgba(8, 6, 5, 0.97), rgba(38, 22, 13, 0.9)),
		radial-gradient(circle at 85% 20%, rgba(201, 155, 82, 0.18), transparent 28rem);
	border: 1px solid rgba(201, 155, 82, 0.32);
	display: grid;
	gap: 3rem;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.9fr) auto;
	margin: 5rem auto 0;
	max-width: 96rem;
	padding: clamp(2rem, 5vw, 5rem);
	position: relative;
	scroll-margin-top: 5.5rem;
}

.contact-section::before {
	background: linear-gradient(90deg, var(--about-gold), transparent);
	content: "";
	height: 1px;
	left: clamp(2rem, 5vw, 5rem);
	position: absolute;
	top: 2rem;
	width: 8rem;
}

.contact-section .eyebrow,
.mobile-copy .eyebrow {
	color: var(--about-gold-bright);
	font-family: Georgia, serif;
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.26em;
	line-height: 1.6;
	margin: 0 0 1rem;
	text-transform: uppercase;
}

.contact-section h2 {
	color: var(--about-ivory);
	font-family: var(--about-serif);
	font-size: clamp(2.4rem, 5vw, 5rem);
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.15;
	margin: 0 0 1.5rem;
	text-transform: none;
}

.contact-heading p:last-child {
	color: var(--about-muted);
	font-size: 0.95rem;
	line-height: 2;
	margin: 0;
	max-width: 28rem;
	text-align: left;
}

.contact-details {
	display: grid;
	gap: 1rem;
	place-content: center stretch;
}

.contact-card {
	border: 1px solid rgba(201, 155, 82, 0.25);
	color: var(--about-ivory);
	display: grid;
	gap: 0.45rem;
	padding: 1.25rem 1.5rem;
	transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.contact-card:hover {
	background: rgba(201, 155, 82, 0.09);
	border-color: var(--about-gold);
	color: var(--about-gold-bright) !important;
	transform: translateX(0.25rem);
}

.contact-card span,
.wechat-qr span {
	color: var(--about-gold);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
}

.contact-card strong {
	color: inherit;
	font-family: Georgia, var(--about-serif);
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	word-break: break-word;
}

.wechat-qr {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	justify-content: center;
	margin: 0;
}

.wechat-qr img {
	background: #fff;
	border: 1px solid rgba(201, 155, 82, 0.55);
	display: block;
	height: 9rem;
	padding: 0.35rem;
	width: 9rem;
}

.wechat-qr figcaption {
	display: grid;
	gap: 0.15rem;
	text-align: center;
}

.wechat-qr strong {
	color: var(--about-ivory);
	font-size: 0.72rem;
	font-weight: 400;
}

.about-page #copyright {
	color: rgba(245, 240, 232, 0.45);
	font-family: var(--about-serif);
	font-weight: 400;
	text-transform: none;
}

.about-page #copyright a:hover {
	color: var(--about-gold-bright) !important;
}

@media screen and (max-width: 980px) {
	.about-page #header {
		height: 6rem;
	}

	.about-page #nav {
		display: none;
	}

	.chapter-rail {
		display: none;
	}

	.contact-section {
		grid-template-columns: 1fr 1fr;
	}

	.contact-heading {
		grid-column: 1 / -1;
	}
}

@media screen and (max-width: 736px) {
	.about-page #header {
		height: 5rem;
		padding: 0;
	}

	.about-page #header .logo {
		font-size: 0.85rem;
		letter-spacing: 0.24em;
		padding: 0.45rem 0.8rem 0.45rem 1rem;
	}

	.about-page #navPanelToggle {
		color: var(--about-ivory);
		font-family: var(--about-serif);
	}

	.about-page #navPanelToggle.alt {
		background: rgba(18, 12, 8, 0.9);
		color: var(--about-gold-bright);
	}

	.about-page #navPanel {
		background: #110c08;
		color: var(--about-ivory);
	}

	.about-page #navPanel .links li {
		border-color: rgba(201, 155, 82, 0.22);
	}

	.about-page #navPanel .links li a,
	.about-page #navPanel .close {
		color: var(--about-ivory);
	}

	.about-page .dropdown-content {
		background: transparent;
		border: 0;
	}

	.about-deck {
		padding: 0;
	}

	.deck-slide {
		align-items: stretch;
		aspect-ratio: auto;
		background-image:
			linear-gradient(90deg, rgba(6, 5, 4, 0.98) 0%, rgba(8, 6, 5, 0.91) 56%, rgba(8, 6, 5, 0.62) 100%),
			var(--slide-image);
		background-position: center;
		background-size: cover;
		border-width: 1px 0;
		display: flex;
		margin: 0;
		min-height: min(48rem, calc(100svh - 4rem));
		scroll-margin-top: 0;
	}

	.deck-slide:nth-child(even) {
		background-position: 64% center;
	}

	.deck-slide > img {
		display: none;
	}

	.mobile-copy {
		align-self: center;
		clip: auto;
		clip-path: none;
		height: auto;
		overflow: visible;
		padding: 3.75rem 1.5rem;
		position: relative;
		white-space: normal;
		width: 100%;
		z-index: 1;
	}

	.mobile-copy h1,
	.mobile-copy h2 {
		color: var(--about-ivory);
		font-family: var(--about-serif);
		font-size: clamp(2.5rem, 12vw, 4rem);
		font-weight: 500;
		letter-spacing: 0.08em;
		line-height: 1.2;
		margin: 0 0 1.75rem;
		text-transform: none;
	}

	.mobile-copy h2::after {
		background: linear-gradient(90deg, var(--about-gold-bright), transparent);
		content: "";
		display: block;
		height: 1px;
		margin-top: 1.15rem;
		width: 5.5rem;
	}

	.mobile-copy p {
		color: rgba(245, 240, 232, 0.85);
		font-size: 0.95rem;
		line-height: 2;
		margin: 0 0 1.2rem;
		max-width: 42rem;
		text-align: left;
	}

	.mobile-copy .lead {
		color: var(--about-gold-bright);
		font-size: 1.15rem;
		line-height: 1.8;
	}

	.mobile-cover {
		text-align: center;
	}

	.mobile-cover h1 {
		font-size: clamp(4.5rem, 22vw, 7.5rem);
		letter-spacing: 0.04em;
		margin-bottom: 2rem;
	}

	.mobile-cover p {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	.mobile-copy .quote {
		border: 1px solid rgba(201, 155, 82, 0.55);
		color: var(--about-gold-bright);
		font-size: 1rem;
		margin-top: 1.75rem;
		padding: 1rem 1.2rem;
	}

	.mobile-copy .path,
	.mobile-copy .tag-list {
		color: var(--about-gold-bright);
		font-family: Georgia, var(--about-serif);
		letter-spacing: 0.04em;
	}

	.business-grid,
	.product-grid,
	.ecosystem-path {
		display: grid;
		gap: 0.75rem;
		list-style: none;
		margin: 1.5rem 0 0;
		padding: 0;
	}

	.business-grid {
		grid-template-columns: 1fr 1fr;
	}

	.business-grid li,
	.product-grid article,
	.ecosystem-path li {
		background: rgba(8, 6, 5, 0.68);
		border: 1px solid rgba(201, 155, 82, 0.32);
		padding: 1rem;
	}

	.business-grid b {
		color: var(--about-gold-bright);
		display: block;
		font-family: Georgia, serif;
		font-size: 1.7rem;
		font-weight: 400;
	}

	.business-grid strong,
	.product-grid h3 {
		color: var(--about-ivory);
		display: block;
		font-family: var(--about-serif);
		font-size: 0.95rem;
		font-weight: 500;
		letter-spacing: 0;
		margin: 0.25rem 0;
		text-transform: none;
	}

	.business-grid span {
		color: var(--about-gold);
		font-family: Georgia, serif;
		font-size: 0.68rem;
		line-height: 1.35;
	}

	.product-grid {
		grid-template-columns: 1fr;
	}

	.product-grid article p {
		font-size: 0.82rem;
		margin: 0;
	}

	.ecosystem-path {
		counter-reset: ecosystem;
		grid-template-columns: 1fr 1fr;
		margin-bottom: 1.5rem;
	}

	.ecosystem-path li {
		color: var(--about-ivory);
		counter-increment: ecosystem;
		font-size: 0.78rem;
		line-height: 1.65;
	}

	.ecosystem-path li::before {
		color: var(--about-gold-bright);
		content: "0" counter(ecosystem);
		display: block;
		font-family: Georgia, serif;
		font-size: 1.25rem;
	}

	.contact-section {
		gap: 2rem;
		grid-template-columns: 1fr;
		margin-top: 0;
		padding: 4rem 1.5rem;
	}

	.contact-heading {
		grid-column: auto;
	}

	.contact-section h2 {
		font-size: 3rem;
	}

	.contact-card strong {
		font-size: 0.78rem;
	}

	.wechat-qr {
		align-items: flex-start;
		flex-direction: row;
		justify-content: flex-start;
	}

	.wechat-qr figcaption {
		align-self: center;
		text-align: left;
	}

	.about-page #copyright {
		padding: 0 1rem;
	}
}

@media screen and (max-width: 420px) {
	.business-grid,
	.ecosystem-path {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.about-progress span,
	.chapter-rail a,
	.contact-card {
		transition: none;
	}
}