/*
 * Bufan redesign layer — loaded after main.css.
 * Direction: warm cotton surfaces, deep ink navy, one muted clay accent, editorial serif headings.
 * Motion: light scroll reveals, soft image zoom, underline/arrow micro-interactions.
 * Everything animated is switched off under prefers-reduced-motion.
 */

:root {
	--clay: #a85a35;
	--clay-soft: #dc9068;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Songti SC", "Noto Serif SC", Georgia, serif;
	--radius-sm: 6px;
	--radius: 10px;
	--radius-lg: 18px;
}

body {
	font-size: 16px;
	background: var(--canvas);
}

/* ---------- Type ---------- */
h1,
h2,
h3,
h4 {
	font-weight: 500;
	letter-spacing: -0.015em;
}

.section-title {
	font-weight: 500;
	font-size: clamp(2rem, 3.8vw, 3.1rem);
	line-height: 1.12;
}

.eyebrow {
	color: var(--clay);
	letter-spacing: 0.18em;
	font-size: 12px;
}

.eyebrow::before {
	width: 22px;
	border-top: 1px solid currentColor;
}

/* ---------- Buttons ---------- */
.btn {
	border-radius: 999px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.btn .icon {
	transition: transform 0.3s var(--ease);
}

.btn:hover .icon {
	transform: translateX(4px);
}

.btn--primary {
	box-shadow: none;
}

.btn--primary:hover {
	background: var(--clay);
}

/* On light surfaces the main call to action is ink; on dark bands it is soft clay. */
.btn--sun {
	background: var(--thread);
	color: var(--white);
	box-shadow: none;
}

.btn--sun:hover {
	background: var(--clay);
	color: var(--white);
}

.section--process .btn--sun,
.cta-band .btn--sun,
.page-header .btn--sun,
.site-footer .btn--sun {
	background: var(--clay-soft);
	color: var(--ink);
}

.section--process .btn--sun:hover,
.cta-band .btn--sun:hover,
.page-header .btn--sun:hover,
.site-footer .btn--sun:hover {
	background: var(--white);
	color: var(--ink);
}

.btn--ghost-light {
	border-color: var(--ink);
	color: var(--ink);
}

.btn--ghost-light:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--white);
}

.cta-band .btn--ghost-light,
.page-header .btn--ghost-light {
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--white);
}

.cta-band .btn--ghost-light:hover,
.page-header .btn--ghost-light:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--white);
}

.link-arrow {
	color: var(--ink);
	border-bottom: 1px solid var(--sand-2);
	padding-bottom: 2px;
	transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.link-arrow:hover {
	color: var(--clay);
	border-color: var(--clay);
}

/* ---------- Header ---------- */
.topbar {
	background: var(--night);
	font-size: 12.5px;
	letter-spacing: 0.02em;
}

.site-header::before {
	background: rgba(247, 243, 236, 0.9);
}

.site-header.is-scrolled {
	box-shadow: 0 8px 24px -20px rgba(28, 35, 51, 0.45);
}

.site-nav a {
	position: relative;
}

@media (min-width: 1081px) {
	.site-nav .menu > li > a::after {
		content: "";
		position: absolute;
		left: 0.9em;
		right: 0.9em;
		bottom: 0.45em;
		height: 1px;
		background: var(--clay);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.35s var(--ease);
	}

	.site-nav .menu > li > a:hover::after,
	.site-nav .menu > li.current-menu-item > a::after,
	.site-nav .menu > li.current-menu-ancestor > a::after {
		transform: scaleX(1);
	}
}

/* ---------- Hero: light, airy, product-led ---------- */
.hero {
	background: var(--canvas);
	background-image: none;
	color: var(--ink-2);
	padding-top: clamp(32px, 5vw, 72px);
}

.hero::before {
	top: auto;
	bottom: -260px;
	right: -180px;
	width: 640px;
	height: 640px;
	border: 1px solid var(--sand-2);
}

.hero .eyebrow {
	color: var(--clay);
}

.hero__title {
	font-weight: 500;
	font-size: clamp(2.6rem, 5.4vw, 4.4rem);
	line-height: 1.04;
	letter-spacing: -0.03em;
	color: var(--ink);
}

body.lang-zh .hero__title {
	font-size: clamp(2.2rem, 4.6vw, 3.6rem);
	line-height: 1.25;
	letter-spacing: 0.01em;
}

.hl {
	color: var(--clay);
	font-style: italic;
}

.hl__stitch path {
	stroke: var(--clay-soft);
	stroke-width: 3;
}

.hero__text {
	color: var(--ink-2);
}

.hero__media::before {
	inset: 0;
	border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
	background: var(--sand);
}

.hero__frame {
	padding: 6% 6% 0;
}

.hero__media--photo .hero__frame {
	padding: 0;
	border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
	transform: none;
	box-shadow: none;
}

.hero__media--photo .hero__frame::after {
	border: 1px solid rgba(255, 253, 249, 0.7);
	border-radius: 999px 999px 10px 10px;
}

.hero__media--art .hero__frame {
	animation: bufan-float 7s ease-in-out infinite;
}

@keyframes bufan-float {
	50% {
		transform: translateY(-8px);
	}
}

/* Load-in sequence (CSS only, so it cannot leave content hidden). */
.hero-in {
	animation: bufan-rise 0.9s var(--ease) both;
	animation-delay: calc(var(--d, 0) * 0.1s + 0.05s);
}

@keyframes bufan-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
}

.hero__media {
	animation: bufan-fade 1.2s var(--ease) 0.2s both;
}

@keyframes bufan-fade {
	from {
		opacity: 0;
		transform: scale(0.97);
	}
}

/* ---------- Key numbers ---------- */
.facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: clamp(36px, 5vw, 64px) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--sand-2);
	border-bottom: 1px solid var(--sand-2);
}

.fact {
	display: grid;
	gap: 4px;
	padding: 26px 24px;
}

.fact + .fact {
	border-left: 1px solid var(--sand-2);
}

.fact strong {
	font: 500 clamp(1.8rem, 3vw, 2.5rem) / 1.05 var(--font-display);
	letter-spacing: -0.02em;
	color: var(--ink);
}

.fact strong small {
	font: 600 0.85rem/1 var(--font-sans);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--clay);
}

.fact span {
	font-size: 14px;
	line-height: 1.45;
	color: var(--ink-2);
}

@media (max-width: 760px) {
	.facts {
		grid-template-columns: repeat(2, 1fr);
	}

	.fact:nth-child(3) {
		border-left: 0;
	}

	.fact:nth-child(n + 3) {
		border-top: 1px solid var(--sand-2);
	}
}

/* ---------- Sections ---------- */
.section--tint {
	background: var(--sand);
	background-image: none;
}

/* ---------- Cards ---------- */
.product-card,
.cat-card {
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.product-card:hover,
.cat-card:hover {
	transform: none;
	box-shadow: none;
}

.product-card__media,
.cat-card__media {
	border-radius: var(--radius);
	background: var(--sand);
}

.section--tint .cat-card__media {
	background: var(--sand-2);
}

.product-card__media img,
.cat-card__media img {
	transition: transform 0.9s var(--ease);
}

.product-card:hover .product-card__media img,
.cat-card:hover .cat-card__media img {
	transform: scale(1.06);
}

.product-card__body,
.cat-card__body {
	padding: 14px 2px 0;
}

.product-card__cat {
	color: var(--clay);
	font-size: 11.5px;
	letter-spacing: 0.14em;
}

.product-card__title {
	font-weight: 500;
}

.product-card__title a {
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size 0.4s var(--ease);
}

.product-card:hover .product-card__title a {
	background-size: 100% 1px;
}

.cat-card__title {
	font-weight: 500;
	font-size: 1.3rem;
}

.cat-card__count {
	background: transparent;
	padding: 0;
	font-weight: 500;
	color: var(--ink-3);
}

.cat-card__media {
	aspect-ratio: 4 / 5;
}

.cat-grid {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 28px 22px;
}

.product-grid {
	gap: 34px 22px;
}

/* ---------- Story / factory intro ---------- */
.story__media img {
	border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
}

/* ---------- How it works ---------- */
.section--process {
	background: var(--night);
	background-image: none;
}

.section--process .section-title {
	font-weight: 500;
}

.section--process .eyebrow {
	color: var(--clay-soft);
}

.process--four {
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.process--four .process__step {
	padding: 30px 26px 8px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.process--four .process__step + .process__step {
	padding-left: 26px;
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.process--four .process__num {
	position: static;
	display: block;
	margin-bottom: 18px;
	font: 400 clamp(2.6rem, 4vw, 3.4rem) / 1 var(--font-display);
	color: var(--clay-soft);
}

.process--four .process__icon {
	display: none;
}

.process__title {
	font-weight: 500;
	font-size: 1.3rem;
}

.process__cta {
	margin: clamp(32px, 4vw, 48px) 0 0;
}

@media (max-width: 900px) {
	.process--four {
		grid-template-columns: repeat(2, 1fr);
	}

	.process--four .process__step:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	.process--four .process__step:nth-child(n + 3) {
		margin-top: 12px;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}
}

@media (max-width: 560px) {
	.process--four {
		grid-template-columns: 1fr;
	}

	.process--four .process__step + .process__step {
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}
}

/* ---------- Inquiry ---------- */
.section--inquiry {
	background: var(--canvas);
}

/* ---------- Scroll reveal ---------- */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
	transition-delay: calc(var(--i, 0) * 90ms);
}

.js [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js [data-reveal] {
		opacity: 1;
		transform: none;
	}

	.hero-in,
	.hero__media,
	.hero__media--art .hero__frame {
		animation: none;
	}

	.product-card:hover .product-card__media img,
	.cat-card:hover .cat-card__media img {
		transform: none;
	}
}

/* Factory photo gallery (About page): even 3:2 tiles, caption on a dark band so it stays readable on busy photos. */
.wp-block-gallery.has-nested-images { gap: 12px; margin: 28px 0 40px; }
.wp-block-gallery.has-nested-images figure.wp-block-image img { aspect-ratio: 3 / 2; object-fit: cover; }
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	padding: 36px 12px 10px;
	font-size: 0.82rem;
	line-height: 1.35;
	color: #fff;
	text-shadow: none;
	background: linear-gradient(to top, rgba(13, 18, 46, 0.88), rgba(13, 18, 46, 0));
}

/* About page: two short muted loops of embroidery in progress, side by side (vertical phone video). */
.bufan-video-pair { gap: 16px; margin: 24px 0 40px; flex-wrap: nowrap; }
.bufan-video-pair .wp-block-column { flex: 1 1 0; min-width: 0; }
.bufan-video-pair .wp-block-video { margin: 0; }
.bufan-video-pair .wp-block-video video { display: block; width: 100%; aspect-ratio: 9 / 16; max-height: 560px; object-fit: cover; background: #0d122e; border-radius: 6px; }
.bufan-video-pair .wp-block-video figcaption { margin-top: 8px; font-size: 0.85rem; color: #5f6378; text-align: left; }
@media (max-width: 520px) { .bufan-video-pair { gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .bufan-video-pair video { animation: none; } }