/* =========================================================================
   Wenmeng About Page — editorial layout
   Scope: body.wenmeng-about-page only. Never leaks to header, footer,
   shop, product or contact templates.
   ========================================================================= */

/* Colour tokens are namespaced --wma-* on purpose. The earlier --wm-* locals
   collided with the design-system tokens and, worse, carried two meanings at
   once: --wm-paper was both the page surface and the text colour used on dark
   bands, --wm-ink was both the text colour and the background of those bands.
   That only ever worked while the page was light. Roles are split below so the
   page can go dark without the text inverting into itself. */
body.wenmeng-about-page {
	--wma-surface: #1c1917;
	--wma-surface-raised: #292524;
	--wma-cream-soft: #f5f0e8;
	--wma-text: #faf7f2;
	--wma-text-muted: #a8a29e;
	--wma-copper: #b45309;
	--wma-copper-light: #d97706;
	--wma-line: #44403c;
	--wma-serif: "Wenmeng Cormorant", "Cormorant Garamond", Georgia, serif;
	--wma-sans: "Wenmeng Manrope", "Manrope", -apple-system, "Helvetica Neue", sans-serif;

	background: var(--wma-surface);
}

body.wenmeng-about-page #main-container,
body.wenmeng-about-page #main,
body.wenmeng-about-page .site-main,
body.wenmeng-about-page .entry-content {
	background: var(--wma-surface);
	margin: 0;
	padding: 0;
}

/* The Blocksy header keeps its own styling; only the About body is replaced. */
body.wenmeng-about-page .wm-about,
body.wenmeng-about-page .wm-about * {
	box-sizing: border-box;
}

body.wenmeng-about-page .wm-about {
	color: var(--wma-text);
	background: var(--wma-surface);
	font-family: var(--wma-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

/* Blocksy paints headings with its own near-black global colour, so the page
   scope has to claim them instead of trusting inheritance. */
body.wenmeng-about-page .wm-about h1,
body.wenmeng-about-page .wm-about h2,
body.wenmeng-about-page .wm-about h3 {
	color: var(--wma-text);
}

body.wenmeng-about-page .wm-about h1,
body.wenmeng-about-page .wm-about h2,
body.wenmeng-about-page .wm-about h3,
body.wenmeng-about-page .wm-about p,
body.wenmeng-about-page .wm-about figure,
body.wenmeng-about-page .wm-about dl,
body.wenmeng-about-page .wm-about dd,
body.wenmeng-about-page .wm-about ul,
body.wenmeng-about-page .wm-about li {
	margin: 0;
	padding: 0;
}

body.wenmeng-about-page .wm-about ul {
	list-style: none;
}

body.wenmeng-about-page .wm-about img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0;
	border-radius: 2px;
}

body.wenmeng-about-page .wm-about-wrap {
	width: min(1280px, calc(100% - 80px));
	margin: 0 auto;
}

/* ---------- shared type ---------- */

body.wenmeng-about-page .wm-about-eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
	color: var(--wma-copper-light);
	font-family: var(--wma-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.25em;
	text-transform: uppercase;
}

body.wenmeng-about-page .wm-about-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 40px;
	height: 1px;
	background: var(--wma-copper);
}

/* The "--dark" variant used to mean "eyebrow on a light band". Every band is
   ink now, so it shares the bright copper instead of the muted one. */
body.wenmeng-about-page .wm-about-eyebrow--dark {
	color: var(--wma-copper-light);
}

body.wenmeng-about-page .wm-about-title {
	font-family: var(--wma-serif);
	font-size: clamp(34px, 4vw, 56px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: inherit;
}

body.wenmeng-about-page .wm-about-lead {
	max-width: 560px;
	margin-top: 24px;
	font-family: var(--wma-sans);
	font-size: 17px;
	line-height: 1.7;
	color: var(--wma-text-muted);
}

body.wenmeng-about-page .wm-about-head--center {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

body.wenmeng-about-page .wm-about-head--center .wm-about-eyebrow {
	justify-content: center;
}

body.wenmeng-about-page .wm-about-head--center .wm-about-lead {
	margin-left: auto;
	margin-right: auto;
}

/* ---------- buttons ---------- */

body.wenmeng-about-page .wm-about-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 40px;
}

body.wenmeng-about-page .wm-about-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 32px;
	border: 1px solid transparent;
	border-radius: 0;
	font-family: var(--wma-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

body.wenmeng-about-page .wm-about-btn--primary {
	background: var(--wma-copper);
	border-color: var(--wma-copper);
	color: var(--wma-text);
}

body.wenmeng-about-page .wm-about-btn--primary:hover,
body.wenmeng-about-page .wm-about-btn--primary:focus {
	background: var(--wma-copper-light);
	border-color: var(--wma-copper-light);
	color: var(--wma-text);
	transform: translateY(-2px);
}

body.wenmeng-about-page .wm-about-btn--outline {
	background: transparent;
	border-color: var(--wma-line);
	color: var(--wma-text);
}

body.wenmeng-about-page .wm-about-btn--outline:hover,
body.wenmeng-about-page .wm-about-btn--outline:focus {
	border-color: var(--wma-copper-light);
	color: var(--wma-copper-light);
}

/* Inverted button, used on the copper CTA band — it stays a light chip. */
body.wenmeng-about-page .wm-about-btn--light {
	background: var(--wma-text);
	border-color: var(--wma-text);
	color: var(--wma-surface);
}

body.wenmeng-about-page .wm-about-btn--light:hover,
body.wenmeng-about-page .wm-about-btn--light:focus {
	background: var(--wma-cream-soft);
	border-color: var(--wma-cream-soft);
	color: var(--wma-surface);
	transform: translateY(-2px);
}

/* ---------- hero ---------- */

body.wenmeng-about-page .wm-about-hero {
	position: relative;
	overflow: hidden;
	padding: 112px 0 96px;
	background: var(--wma-surface);
}

body.wenmeng-about-page .wm-about-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 70% 50%, rgba(180, 83, 9, 0.12) 0%, transparent 60%),
		radial-gradient(ellipse at 20% 80%, rgba(68, 64, 60, 0.4) 0%, transparent 50%);
	pointer-events: none;
}

body.wenmeng-about-page .wm-about-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 80px;
}

body.wenmeng-about-page .wm-about-hero__title {
	font-family: var(--wma-serif);
	font-size: clamp(42px, 5.2vw, 76px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--wma-text);
}

body.wenmeng-about-page .wm-about-hero__title em {
	font-style: italic;
	font-weight: 400;
	color: var(--wma-copper-light);
}

body.wenmeng-about-page .wm-about-hero__lead {
	max-width: 480px;
	margin-top: 28px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--wma-text-muted);
}

body.wenmeng-about-page .wm-about-hero__figure {
	position: relative;
}

body.wenmeng-about-page .wm-about-hero__figure img {
	width: 100%;
	box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
}

body.wenmeng-about-page .wm-about-hero__figure::after {
	content: "";
	position: absolute;
	right: -20px;
	bottom: -20px;
	width: 120px;
	height: 120px;
	border-right: 2px solid var(--wma-copper);
	border-bottom: 2px solid var(--wma-copper);
	pointer-events: none;
}

/* ---------- story ---------- */

body.wenmeng-about-page .wm-about-story {
	padding: 120px 0;
	background: var(--wma-surface);
}

body.wenmeng-about-page .wm-about-story__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 80px;
	margin-top: 64px;
}

body.wenmeng-about-page .wm-about-card {
	position: relative;
	padding: 40px;
	border: 1px solid var(--wma-line);
	border-radius: 2px;
	background: var(--wma-surface-raised);
	transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

body.wenmeng-about-page .wm-about-card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: 24px;
	height: 24px;
	border-top: 2px solid var(--wma-copper);
	border-left: 2px solid var(--wma-copper);
}

body.wenmeng-about-page .wm-about-card:hover {
	border-color: var(--wma-copper);
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}

body.wenmeng-about-page .wm-about-card__number {
	display: block;
	margin-bottom: 20px;
	font-family: var(--wma-serif);
	font-size: 48px;
	font-weight: 500;
	line-height: 1;
	color: var(--wma-copper-light);
}

body.wenmeng-about-page .wm-about-card h3 {
	margin-bottom: 12px;
	font-family: var(--wma-serif);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wma-text);
}

body.wenmeng-about-page .wm-about-card p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--wma-text-muted);
}

/* ---------- manufacturing ---------- */

body.wenmeng-about-page .wm-about-manufacturing {
	padding: 120px 0;
	background: var(--wma-surface);
	color: var(--wma-text);
	border-top: 1px solid var(--wma-line);
}

body.wenmeng-about-page .wm-about-manufacturing .wm-about-lead {
	color: var(--wma-text-muted);
}

body.wenmeng-about-page .wm-about-manufacturing__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 80px;
}

body.wenmeng-about-page .wm-about-points {
	margin-top: 32px;
}

body.wenmeng-about-page .wm-about-points li {
	display: flex;
	gap: 16px;
	margin-bottom: 24px;
}

body.wenmeng-about-page .wm-about-points li:last-child {
	margin-bottom: 0;
}

body.wenmeng-about-page .wm-about-check {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	color: var(--wma-copper-light);
}

body.wenmeng-about-page .wm-about-points h3 {
	margin-bottom: 4px;
	font-family: var(--wma-sans);
	font-size: 15px;
	font-weight: 600;
	color: var(--wma-text);
}

body.wenmeng-about-page .wm-about-points p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--wma-text-muted);
}

body.wenmeng-about-page .wm-about-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	margin-top: 48px;
	padding-top: 48px;
	border-top: 1px solid var(--wma-line);
}

body.wenmeng-about-page .wm-about-stats dt {
	font-family: var(--wma-serif);
	font-size: 44px;
	font-weight: 600;
	line-height: 1;
	color: var(--wma-copper-light);
}

body.wenmeng-about-page .wm-about-stats dd {
	margin-top: 8px;
	font-size: 13px;
	letter-spacing: 0.05em;
	color: var(--wma-text-muted);
}

/* "Since 2014" is a word, not a figure — keep it optically aligned with the numbers. */
body.wenmeng-about-page .wm-about-stats div:first-child dt {
	font-size: 34px;
}

/* ---------- values ---------- */

body.wenmeng-about-page .wm-about-values {
	padding: 120px 0;
	background: var(--wma-surface);
	border-top: 1px solid var(--wma-line);
}

body.wenmeng-about-page .wm-about-values__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	margin-top: 64px;
}

body.wenmeng-about-page .wm-about-value {
	padding: 48px 36px;
	background: var(--wma-surface-raised);
	border-top: 3px solid var(--wma-copper);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.wenmeng-about-page .wm-about-value:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

body.wenmeng-about-page .wm-about-value__icon {
	width: 48px;
	height: 48px;
	margin-bottom: 24px;
	color: var(--wma-copper-light);
}

body.wenmeng-about-page .wm-about-value h3 {
	margin-bottom: 12px;
	font-family: var(--wma-serif);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wma-text);
}

body.wenmeng-about-page .wm-about-value p {
	font-size: 14px;
	line-height: 1.7;
	color: var(--wma-text-muted);
}

/* ---------- quality ---------- */

body.wenmeng-about-page .wm-about-quality {
	padding: 0;
	background: var(--wma-surface);
	color: var(--wma-text);
}

body.wenmeng-about-page .wm-about-quality__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: 600px;
}

body.wenmeng-about-page .wm-about-quality__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 100px 80px;
}

body.wenmeng-about-page .wm-about-quality .wm-about-lead {
	color: var(--wma-text-muted);
	font-size: 16px;
	line-height: 1.8;
	margin-bottom: 32px;
}

body.wenmeng-about-page .wm-about-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--wma-copper-light);
	text-decoration: none;
	transition: gap 0.2s ease;
}

body.wenmeng-about-page .wm-about-link:hover,
body.wenmeng-about-page .wm-about-link:focus {
	gap: 12px;
	color: var(--wma-copper-light);
}

body.wenmeng-about-page .wm-about-quality__figure {
	position: relative;
	overflow: hidden;
}

body.wenmeng-about-page .wm-about-quality__figure img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
}

/* ---------- cta ---------- */

body.wenmeng-about-page .wm-about-cta {
	padding: 100px 0;
	background: var(--wma-copper);
	text-align: center;
}

body.wenmeng-about-page .wm-about-cta h2 {
	font-family: var(--wma-serif);
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 500;
	line-height: 1.15;
	color: var(--wma-text);
}

body.wenmeng-about-page .wm-about-cta p {
	max-width: 480px;
	margin: 16px auto 32px;
	font-size: 16px;
	line-height: 1.7;
	color: rgba(250, 247, 242, 0.85);
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 1024px) {
	body.wenmeng-about-page .wm-about-hero__grid,
	body.wenmeng-about-page .wm-about-story__grid,
	body.wenmeng-about-page .wm-about-manufacturing__grid,
	body.wenmeng-about-page .wm-about-quality__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

	body.wenmeng-about-page .wm-about-values__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The quality block is deliberately full-bleed, so the copy needs its own
	   gutters once the image stacks underneath it. */
	body.wenmeng-about-page .wm-about-quality__copy {
		padding: 72px clamp(24px, 5vw, 80px);
	}

	body.wenmeng-about-page .wm-about-quality__figure {
		position: relative;
		aspect-ratio: 4 / 3;
	}

	body.wenmeng-about-page .wm-about-hero__figure::after {
		right: 0;
		bottom: -14px;
		width: 80px;
		height: 80px;
	}
}

@media (max-width: 640px) {
	body.wenmeng-about-page .wm-about-wrap {
		width: calc(100% - 48px);
	}

	body.wenmeng-about-page .wm-about-hero {
		padding: 72px 0 64px;
	}

	body.wenmeng-about-page .wm-about-story,
	body.wenmeng-about-page .wm-about-manufacturing,
	body.wenmeng-about-page .wm-about-values {
		padding: 80px 0;
	}

	body.wenmeng-about-page .wm-about-cta {
		padding: 72px 0;
	}

	body.wenmeng-about-page .wm-about-story__grid {
		gap: 32px;
		margin-top: 48px;
	}

	body.wenmeng-about-page .wm-about-card {
		padding: 32px 24px;
	}

	body.wenmeng-about-page .wm-about-card__number {
		font-size: 40px;
	}

	body.wenmeng-about-page .wm-about-values__grid {
		gap: 24px;
		margin-top: 48px;
	}

	body.wenmeng-about-page .wm-about-value {
		padding: 36px 24px;
	}

	body.wenmeng-about-page .wm-about-stats {
		gap: 24px;
		margin-top: 36px;
		padding-top: 36px;
	}

	body.wenmeng-about-page .wm-about-stats dt {
		font-size: 36px;
	}

	body.wenmeng-about-page .wm-about-stats div:first-child dt {
		font-size: 26px;
	}

	body.wenmeng-about-page .wm-about-quality__copy {
		padding: 64px 24px;
	}

	body.wenmeng-about-page .wm-about-btn {
		padding: 15px 26px;
	}
}