html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	margin: 0;
	color: #1f2420;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
	line-height: 1.6;
	background: #f6f3ec;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

.site-container {
	width: min(1180px, calc(100% - 40px));
	margin: 0 auto;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	border-bottom: 1px solid rgba(31, 36, 32, 0.08);
	background: rgba(246, 243, 236, 0.92);
	backdrop-filter: blur(16px);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 72px;
	gap: 24px;
}

.site-title {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
}

.main-navigation ul {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation a {
	color: #384038;
	font-size: 14px;
}

.hero,
.site-section {
	display: flex;
	align-items: center;
	min-height: 420px;
	padding: 72px 0;
	background: #f7faf7;
}

.site-footer {
	padding: 28px 0;
	color: #6f766d;
	border-top: 1px solid rgba(31, 36, 32, 0.1);
	background: #eee8dc;
}

.site-footer p {
	margin: 0;
}

.section-kicker {
	margin: 0 0 18px;
	color: #687263;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.section-heading {
	max-width: 720px;
	margin-bottom: 42px;
}

.section-heading--split {
	display: flex;
	align-items: end;
	justify-content: space-between;
	max-width: none;
	gap: 32px;
}

.section-heading h2,
.story-section h2,
.newsletter-section h2 {
	margin: 0;
	color: #1f2420;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(32px, 4.5vw, 56px);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: 0;
}

.button,
.newsletter-form button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid #1f2420;
	border-radius: 0;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.button--dark,
.newsletter-form button {
	color: #f7f2e8;
	background: #1f2420;
}

.button--light {
	color: #1f2420;
	background: transparent;
}

.text-link {
	position: relative;
	color: #1f2420;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.text-link::after {
	position: absolute;
	right: 0;
	bottom: -4px;
	left: 0;
	height: 1px;
	background: currentColor;
	content: "";
}

.home-hero {
	padding: 72px 0 88px;
	background:
		linear-gradient(90deg, rgba(246, 243, 236, 0.94), rgba(246, 243, 236, 0.72)),
		linear-gradient(135deg, #e4eadf 0%, #f6f3ec 48%, #d8cbb8 100%);
}

.home-hero__grid {
	display: grid;
	align-items: center;
	grid-template-columns: minmax(0, 0.94fr) minmax(320px, 1.06fr);
	gap: 56px;
	min-height: 620px;
}

.home-hero__content h1 {
	max-width: 780px;
	margin: 0;
	color: #1f2420;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(48px, 7.2vw, 92px);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: 0;
}

.home-hero__content p:not(.section-kicker) {
	max-width: 560px;
	margin: 26px 0 0;
	color: #4e584d;
	font-size: 18px;
}

.home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 34px;
}

.home-hero__visual {
	position: relative;
	min-height: 560px;
	overflow: hidden;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(31, 36, 32, 0.04)),
		#e5dccd;
}

.hero-art {
	position: absolute;
}

.hero-art--mountain {
	right: -8%;
	bottom: 0;
	left: 18%;
	height: 58%;
	background:
		linear-gradient(145deg, transparent 48%, rgba(64, 78, 65, 0.26) 49%, rgba(64, 78, 65, 0.16) 100%),
		linear-gradient(45deg, rgba(31, 36, 32, 0.22) 0%, rgba(31, 36, 32, 0.05) 54%, transparent 55%);
	clip-path: polygon(0 100%, 34% 24%, 50% 48%, 68% 8%, 100% 100%);
}

.hero-art--panda {
	right: 18%;
	bottom: 18%;
	width: 210px;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle at 34% 42%, #1f2420 0 12%, transparent 13%),
		radial-gradient(circle at 66% 42%, #1f2420 0 12%, transparent 13%),
		radial-gradient(circle at 50% 56%, #1f2420 0 5%, transparent 6%),
		radial-gradient(circle at 26% 18%, #1f2420 0 16%, transparent 17%),
		radial-gradient(circle at 74% 18%, #1f2420 0 16%, transparent 17%),
		#f8f4eb;
	box-shadow: 0 34px 80px rgba(31, 36, 32, 0.16);
}

.hero-art--bamboo {
	top: 0;
	right: 8%;
	width: 34%;
	height: 100%;
	opacity: 0.46;
	background:
		linear-gradient(90deg, transparent 0 18%, rgba(87, 111, 78, 0.55) 19% 21%, transparent 22% 42%, rgba(87, 111, 78, 0.42) 43% 45%, transparent 46% 72%, rgba(87, 111, 78, 0.5) 73% 75%, transparent 76%),
		repeating-linear-gradient(180deg, transparent 0 82px, rgba(87, 111, 78, 0.36) 83px 85px, transparent 86px 160px);
}

.story-section,
.collection-section,
.products-section,
.featured-products-section,
.culture-section,
.newsletter-section {
	padding: 96px 0;
}

.story-section {
	background: #f6f3ec;
}

.story-section__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 72px;
}

.story-section__copy {
	color: #4e584d;
	font-size: 18px;
}

.story-section__copy p {
	margin: 0 0 22px;
}

.collection-section {
	background: #ebe5d8;
}

.collection-grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 18px;
}

.collection-card {
	display: flex;
	min-height: 280px;
	flex-direction: column;
	justify-content: flex-end;
	padding: 32px;
	color: #f8f4eb;
	background:
		linear-gradient(180deg, rgba(31, 36, 32, 0.05), rgba(31, 36, 32, 0.72)),
		linear-gradient(135deg, #849374, #c7b89f);
}

.collection-card--large {
	grid-row: span 2;
	min-height: 578px;
	background:
		linear-gradient(180deg, rgba(31, 36, 32, 0.02), rgba(31, 36, 32, 0.68)),
		linear-gradient(145deg, #5f705c, #d9cfbd);
}

.collection-card span,
.story-card span {
	margin-bottom: 12px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.collection-card h3,
.story-card h3,
.product-card h3 {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.18;
}

.products-section {
	background: #f6f3ec;
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.product-grid--compact {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-card {
	background: #fffaf1;
}

.product-card__media {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #dfd6c7;
}

.product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 240ms ease;
}

.product-card__media:hover img {
	transform: scale(1.035);
}

.product-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 50% 42%, rgba(248, 244, 235, 0.9) 0 18%, transparent 19%),
		radial-gradient(circle at 42% 39%, #1f2420 0 4%, transparent 5%),
		radial-gradient(circle at 58% 39%, #1f2420 0 4%, transparent 5%),
		linear-gradient(145deg, #bdc7ae, #e8ddcc);
}

.product-card__body {
	padding: 20px;
}

.product-card h3 {
	font-size: 20px;
}

.product-card__price {
	margin-top: 10px;
	color: #596354;
	font-size: 14px;
	font-weight: 700;
}

.product-card--note {
	grid-column: 1 / -1;
	min-height: 180px;
	display: flex;
	align-items: center;
}

.featured-products-section {
	background: #e7eadf;
}

.featured-products-section__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 56px;
	align-items: start;
}

.culture-section {
	background: #f6f3ec;
}

.story-card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.story-card {
	min-height: 260px;
	padding: 28px;
	border-top: 1px solid rgba(31, 36, 32, 0.18);
	background: #eee8dc;
}

.story-card span {
	display: block;
	color: #687263;
}

.newsletter-section {
	background: #253026;
	color: #f8f4eb;
}

.newsletter-section .section-kicker,
.newsletter-section h2 {
	color: inherit;
}

.newsletter-section__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.8fr);
	gap: 48px;
	align-items: end;
}

.newsletter-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
}

.newsletter-form input {
	width: 100%;
	min-height: 48px;
	padding: 0 16px;
	color: #f8f4eb;
	border: 1px solid rgba(248, 244, 235, 0.44);
	border-radius: 0;
	background: transparent;
}

.newsletter-form input::placeholder {
	color: rgba(248, 244, 235, 0.72);
}

.newsletter-form button {
	border-color: #f8f4eb;
	color: #253026;
	background: #f8f4eb;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

@media (max-width: 900px) {
	.site-header__inner,
	.section-heading--split,
	.newsletter-section__inner {
		align-items: flex-start;
		flex-direction: column;
	}

	.home-hero__grid,
	.story-section__grid,
	.featured-products-section__grid,
	.newsletter-section__inner {
		grid-template-columns: 1fr;
	}

	.home-hero__grid {
		min-height: auto;
	}

	.home-hero__visual {
		min-height: 420px;
	}

	.collection-grid,
	.product-grid,
	.product-grid--compact,
	.story-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.collection-card--large {
		grid-row: auto;
		min-height: 360px;
	}
}

@media (max-width: 640px) {
	.site-container {
		width: min(100% - 28px, 1180px);
	}

	.home-hero,
	.story-section,
	.collection-section,
	.products-section,
	.featured-products-section,
	.culture-section,
	.newsletter-section {
		padding: 64px 0;
	}

	.home-hero__visual {
		min-height: 340px;
	}

	.hero-art--panda {
		right: 16%;
		width: 148px;
	}

	.collection-grid,
	.product-grid,
	.product-grid--compact,
	.story-card-grid,
	.newsletter-form {
		grid-template-columns: 1fr;
	}

	.collection-card,
	.collection-card--large,
	.story-card {
		min-height: 240px;
		padding: 24px;
	}
}