/* ====== EarthWeave — About page ====== */

/* Shared section headings */
.sec-title {
	font-family: 'Playfair Display', serif;
	font-size: var(--step-1);
	margin: 0 0 10px;
}
.sec-lede {
	color: var(--muted);
	font-size: var(--step--1);
	margin: 0 0 18px;
}

/* ===== SECTION 1: Our Origin ===== */
.sec-origin {
	position: relative;
	padding: 56px 0 50px;
	border-top: 1px solid var(--line);
	overflow: hidden;
}
.origin-grid {
	display: grid;
	gap: 18px;
	align-items: start;
	grid-template-columns: 1.1fr 1.2fr;
}
.origin-text {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 14px;
}
.origin-text p {
	color: var(--muted);
}
.origin-quote {
	margin: 10px 0;
	padding: 10px 12px;
	border-left: 3px solid var(--brand);
	background: rgba(198, 165, 114, 0.08);
	border-radius: 10px;
	color: var(--ink);
	font-style: italic;
}

.origin-collage {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.o-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 12px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.o-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
	border-color: rgba(255, 255, 255, 0.12);
}
.o-card figure {
	margin: 0;
}
.o-card figcaption {
	color: var(--muted);
	font-size: 12px;
	margin-top: 6px;
}

/* ambient threads */
.o-thread {
	position: absolute;
	inset: auto;
	pointer-events: none;
	z-index: -1;
	width: 160%;
	height: 180%;
	left: -30%;
	top: -40%;
	background: repeating-linear-gradient(
			120deg,
			rgba(198, 165, 114, 0.06) 0 2px,
			transparent 2px 8px
		),
		radial-gradient(
			900px 600px at 80% 10%,
			rgba(125, 143, 132, 0.1),
			transparent 60%
		),
		radial-gradient(
			700px 500px at 10% 80%,
			rgba(198, 165, 114, 0.08),
			transparent 50%
		);
	mask-image: radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 80%);
	animation: origin-drift 28s linear infinite;
}
.o-thread.b {
	transform: rotate(6deg) scale(1.05);
	animation-duration: 34s;
	opacity: 0.65;
}
@keyframes origin-drift {
	0% {
		transform: translate3d(0, 0, 0) rotate(0deg);
	}
	50% {
		transform: translate3d(2%, -2%, 0) rotate(2deg);
	}
	100% {
		transform: translate3d(0, 0, 0) rotate(0deg);
	}
}

@media (max-width: 1024px) {
	.origin-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== SECTION 2: Workshop Constellation ===== */
.sec-constellation {
	padding: 56px 0;
	border-top: 1px solid var(--line);
}
.const-grid {
	display: grid;
	gap: 16px;
	align-items: start;
	grid-template-columns: 1.1fr 1fr;
	grid-template-areas:
		'map notes'
		'tool dye';
}
.const-map {
	grid-area: map;
	position: relative;
	margin: 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 12px;
}
.const-map img {
	border-radius: 12px;
}
.const-map figcaption {
	color: var(--muted);
	font-size: 12px;
	margin-top: 6px;
}

/* pins */
.pin {
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--brand);
	border: 0;
	cursor: pointer;
	outline: none;
	box-shadow: 0 6px 18px rgba(198, 165, 114, 0.35);
}
.pin::after {
	content: attr(aria-label);
	position: absolute;
	left: 50%;
	transform: translate(-50%, -8px);
	bottom: 100%;
	white-space: nowrap;
	font-size: 12px;
	background: #111311;
	color: var(--ink);
	border: 1px solid var(--line);
	padding: 6px 8px;
	border-radius: 10px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.pin:hover::after,
.pin:focus::after {
	opacity: 1;
	transform: translate(-50%, -10px);
}

/* positions (no inline styles) */
.p1 {
	left: 18%;
	top: 78%;
}
.p2 {
	left: 36%;
	top: 32%;
}
.p3 {
	left: 66%;
	top: 22%;
}
.p4 {
	left: 55%;
	top: 82%;
}

.const-notes {
	grid-area: notes;
	display: grid;
	gap: 12px;
}
.const-note {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 14px;
	color: var(--muted);
}
.const-note h3 {
	margin: 0 0 6px;
	color: var(--ink);
}

.const-stats {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
.stat {
	background: #121412;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 10px 12px;
	min-width: 120px;
	display: grid;
	place-items: center;
}
.stat .num {
	font-weight: 700;
	font-size: 18px;
	color: var(--brand);
	margin-right: 6px;
}
.stat .label {
	color: var(--muted);
	font-size: 12px;
}

.const-tool {
	grid-area: tool;
	margin: 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 12px;
}
.const-dye {
	grid-area: dye;
	margin: 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 12px;
}
.const-tool figcaption,
.const-dye figcaption {
	color: var(--muted);
	font-size: 12px;
	margin-top: 6px;
}

@media (max-width: 1024px) {
	.const-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			'map'
			'notes'
			'tool'
			'dye';
	}
}

/* ===== SECTION 3: People & Ethos (pill tabs) ===== */
.sec-ethos {
	padding: 56px 0;
	border-top: 1px solid var(--line);
}
.ethos-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: 1.2fr 0.8fr;
	align-items: start;
}
.ethos-tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.pill {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 8px 12px;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.pill:hover {
	transform: translateY(-1px);
}
.pill.is-active {
	border-color: var(--brand);
	background: rgba(198, 165, 114, 0.12);
	color: var(--brand);
}

.ethos-panel {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 14px;
	color: var(--muted);
	margin-top: 8px;
}
.ethos-panel[hidden] {
	display: none;
}

.ethos-people {
	display: grid;
	gap: 12px;
}
.person {
	margin: 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 12px;
}
.person figcaption {
	color: var(--muted);
	font-size: 12px;
	margin-top: 6px;
}

@media (max-width: 1024px) {
	.ethos-grid {
		grid-template-columns: 1fr;
	}
}
/* ===== SECTION 4: Craft Timeline ===== */
.sec-craftline {
	padding: 56px 0;
	border-top: 1px solid var(--line);
	position: relative;
}
.craftline-grid {
	display: grid;
	gap: 16px;
	align-items: start;
	grid-template-columns: 1.1fr 0.9fr;
}
.craft-steps {
	counter-reset: step;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.c-step {
	position: relative;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 12px 14px 12px 46px;
	color: var(--muted);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.c-step:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow);
	border-color: rgba(255, 255, 255, 0.12);
}
.c-step h3 {
	margin: 0 0 6px;
	color: var(--ink);
}
.c-step::before {
	counter-increment: step;
	content: counter(step);
	position: absolute;
	left: 12px;
	top: 12px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--brand);
	color: #111;
	font-weight: 700;
	box-shadow: 0 6px 18px rgba(198, 165, 114, 0.35);
}

.craft-art,
.craft-edge {
	margin: 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 12px;
}
.craft-art figcaption,
.craft-edge figcaption {
	color: var(--muted);
	font-size: 12px;
	margin-top: 6px;
}

.craft-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 4px;
	background: #0f100f;
	border-top: 1px solid var(--line);
}
.craft-bar {
	width: 0%;
	height: 100%;
	background: linear-gradient(
		90deg,
		rgba(198, 165, 114, 0.7),
		rgba(198, 165, 114, 0.25)
	);
	transition: width 0.15s linear;
}

@media (max-width: 1024px) {
	.craftline-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== SECTION 5: Material Lab ===== */
.sec-matlab {
	padding: 56px 0;
	border-top: 1px solid var(--line);
}
.matlab-grid {
	display: grid;
	gap: 16px;
	align-items: start;
	grid-template-columns: repeat(3, 1fr);
}
.mat-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 12px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.mat-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
	border-color: rgba(255, 255, 255, 0.12);
}
.mat-card figure {
	margin: 0;
}
.mat-card figcaption {
	margin-top: 8px;
	font-weight: 600;
}

.mat-bars {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}
.mat-bars li {
	position: relative;
	background: #121412;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 8px 8px 8px 90px;
}
.mat-bars li::before {
	content: attr(data-label);
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	color: var(--muted);
}
.mat-bars .bar {
	display: block;
	height: 8px;
	border-radius: 6px;
	width: 0%;
	background: linear-gradient(
		90deg,
		rgba(198, 165, 114, 0.6),
		rgba(198, 165, 114, 0.2)
	);
	transition: width 0.6s ease;
}

@media (max-width: 1100px) {
	.matlab-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== SECTION 6: Aftercare Promise ===== */
.sec-aftercare {
	padding: 56px 0;
	border-top: 1px solid var(--line);
}
.aftercare-grid {
	display: grid;
	gap: 16px;
	align-items: start;
	grid-template-columns: 1.1fr 0.9fr;
	grid-template-areas:
		'notes art'
		'notes pad';
}
.aftercare-notes {
	grid-area: notes;
	display: grid;
	gap: 12px;
}
.ac-item {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 12px 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.ac-item[open] {
	border-color: rgba(198, 165, 114, 0.45);
	box-shadow: 0 8px 22px rgba(198, 165, 114, 0.12);
	transform: translateY(-1px);
}
.ac-item summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--ink);
}
.ac-item p {
	color: var(--muted);
	margin: 8px 0 0;
	font-size: 14px;
}

.aftercare-art {
	grid-area: art;
	margin: 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 12px;
}
.aftercare-pad {
	grid-area: pad;
	margin: 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 12px;
}
.aftercare-art figcaption,
.aftercare-pad figcaption {
	color: var(--muted);
	font-size: 12px;
	margin-top: 6px;
}

@media (max-width: 1024px) {
	.aftercare-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			'notes'
			'art'
			'pad';
	}
}
/* ===== SECTION 7: People in Motion ===== */
.sec-people {
	padding: 56px 0;
	border-top: 1px solid var(--line);
}
.people-head .sec-title {
	font-family: 'Playfair Display', serif;
	font-size: var(--step-1);
	margin: 0 0 10px;
}
.people-head .sec-lede {
	color: var(--muted);
	font-size: var(--step--1);
	margin: 0 0 18px;
}

.people-strip {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(240px, 300px);
	gap: 16px;
	overflow-x: auto;
	padding: 8px 6vw;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	border-block: 1px dashed var(--line);
	mask-image: linear-gradient(
		90deg,
		transparent,
		#000 6%,
		#000 94%,
		transparent
	);
}
.p-card {
	scroll-snap-align: start;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 12px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease,
		filter 0.2s ease;
}
.p-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
	border-color: rgba(255, 255, 255, 0.12);
	filter: none;
}
.p-card figure {
	margin: 0;
}
.p-card figcaption {
	margin-top: 6px;
	font-size: 12px;
	color: var(--muted);
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 6px 8px;
	backdrop-filter: blur(2px);
}

/* ===== SECTION 8: Design Notes ===== */
.sec-design {
	padding: 56px 0;
	border-top: 1px solid var(--line);
}
.design-head .sec-title {
	font-family: 'Playfair Display', serif;
	font-size: var(--step-1);
	margin: 0 0 10px;
}
.design-head .sec-lede {
	color: var(--muted);
	font-size: var(--step--1);
	margin: 0 0 18px;
}

.design-grid {
	display: grid;
	gap: 16px;
	align-items: start;
	grid-template-columns: 1.2fr 0.8fr;
}
.design-text {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 14px;
	color: var(--muted);
}
.design-text h3 {
	margin: 10px 0 6px;
	color: var(--ink);
}
.margin {
	margin: 10px 0;
	padding: 10px 12px;
	border-left: 3px solid var(--brand);
	background: rgba(198, 165, 114, 0.08);
	border-radius: 10px;
	color: var(--ink);
}
.ticks {
	margin: 10px 0 0;
	padding-left: 18px;
}
.ticks li {
	margin: 4px 0;
}

.design-art {
	margin: 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 12px;
}
.design-art figcaption {
	color: var(--muted);
	font-size: 12px;
	margin-top: 6px;
}

@media (max-width: 1024px) {
	.design-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== SECTION 9: Edge Gallery ===== */
.sec-edgeshow {
	padding: 56px 0;
	border-top: 1px solid var(--line);
}
.edgeshow-head .sec-title {
	font-family: 'Playfair Display', serif;
	font-size: var(--step-1);
	margin: 0 0 10px;
}
.edgeshow-head .sec-lede {
	color: var(--muted);
	font-size: var(--step--1);
	margin: 0 0 18px;
}

.edgeshow-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, 1fr);
}
.edge-card {
	margin: 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 12px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.edge-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
	border-color: rgba(255, 255, 255, 0.12);
}
.edge-card figcaption {
	margin-top: 6px;
	color: var(--ink);
	font-weight: 600;
}
.edge-sample {
	height: 54px;
	border-radius: 10px;
	border: 1px solid var(--line);
	margin-top: 8px;
	position: relative;
	overflow: hidden;
}
/* visual samples via CSS only */
.edge-sample.binding {
	background: repeating-linear-gradient(
			90deg,
			rgba(198, 165, 114, 0.35) 0 10px,
			transparent 10px 20px
		),
		linear-gradient(#171a17, #171a17);
}
.edge-sample.serge {
	background: linear-gradient(
			90deg,
			rgba(198, 165, 114, 0.2) 0 18px,
			transparent 18px
		),
		linear-gradient(#171a17, #171a17);
}
.edge-sample.fringe {
	background: linear-gradient(#171a17, #171a17);
}
.edge-sample.fringe::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 16px;
	background: repeating-linear-gradient(
		90deg,
		rgba(198, 165, 114, 0.55) 0 3px,
		transparent 3px 6px
	);
}

@media (max-width: 1100px) {
	.edgeshow-grid {
		grid-template-columns: 1fr;
	}
}
/* ===== SECTION 10: Sound Maps ===== */
.sec-sound {
	padding: 56px 0;
	border-top: 1px solid var(--line);
}
.sound-head .sec-title {
	font-family: 'Playfair Display', serif;
	font-size: var(--step-1);
	margin: 0 0 10px;
}
.sound-head .sec-lede {
	color: var(--muted);
	font-size: var(--step--1);
	margin: 0 0 18px;
}

.sound-tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.sound-panels {
	display: grid;
	gap: 16px;
}
.sound-panel {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 14px;
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr 1fr;
	align-items: start;
}
.sound-panel[hidden] {
	display: none;
}
.sound-art {
	margin: 0;
}
.sound-art img {
	border-radius: 12px;
}
.sound-art figcaption {
	color: var(--muted);
	font-size: 12px;
	margin-top: 6px;
}
.sound-notes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.sound-notes li {
	color: var(--muted);
	background: #121412;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 10px;
}
.sound-notes strong {
	color: var(--ink);
}

@media (max-width: 1024px) {
	.sound-panel {
		grid-template-columns: 1fr;
	}
}

/* ===== SECTION 11: Supply Pledge ===== */
.sec-pledge {
	padding: 56px 0;
	border-top: 1px solid var(--line);
}
.pledge-head .sec-title {
	font-family: 'Playfair Display', serif;
	font-size: var(--step-1);
	margin: 0 0 10px;
}
.pledge-head .sec-lede {
	color: var(--muted);
	font-size: var(--step--1);
	margin: 0 0 18px;
}

.pledge-grid {
	display: grid;
	gap: 16px;
	align-items: start;
	grid-template-columns: 1.1fr 0.9fr;
	grid-template-areas:
		'copy art'
		'copy ledger';
}
.pledge-copy {
	grid-area: copy;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 14px;
}
.pledge-copy .tick {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
	color: var(--muted);
}
.pledge-copy .tick li {
	background: #121412;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 10px;
}
.pledge-copy .tick strong {
	color: var(--ink);
}
.pledge-copy .mini {
	margin-top: 8px;
	color: var(--muted);
}

.pledge-art {
	grid-area: art;
	margin: 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 12px;
}
.pledge-ledger {
	grid-area: ledger;
	margin: 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 12px;
}
.pledge-art figcaption,
.pledge-ledger figcaption {
	color: var(--muted);
	font-size: 12px;
	margin-top: 6px;
}

@media (max-width: 1024px) {
	.pledge-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			'copy'
			'art'
			'ledger';
	}
}

/* ===== SECTION 12: Field Repairs ===== */
.sec-fieldrepairs {
	padding: 56px 0;
	border-top: 1px solid var(--line);
}
.field-head .sec-title {
	font-family: 'Playfair Display', serif;
	font-size: var(--step-1);
	margin: 0 0 10px;
}
.field-head .sec-lede {
	color: var(--muted);
	font-size: var(--step--1);
	margin: 0 0 18px;
}

.field-strip {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(240px, 300px);
	gap: 16px;
	overflow-x: auto;
	padding: 8px 6vw;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	border-block: 1px dashed var(--line);
	mask-image: linear-gradient(
		90deg,
		transparent,
		#000 6%,
		#000 94%,
		transparent
	);
}
.case {
	scroll-snap-align: start;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 12px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.case:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
	border-color: rgba(255, 255, 255, 0.12);
}
.case figcaption {
	color: var(--muted);
	font-size: 12px;
	margin-top: 6px;
}

.field-notes .steps {
	counter-reset: step;
	list-style: none;
	margin: 10px auto 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.field-notes .steps li {
	position: relative;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 12px 12px 12px 44px;
	color: var(--muted);
}
.field-notes .steps li::before {
	counter-increment: step;
	content: counter(step);
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--brand);
	color: #111;
	font-weight: 700;
	box-shadow: 0 6px 18px rgba(198, 165, 114, 0.35);
}
.field-notes .steps strong {
	color: var(--ink);
}
/* ===== SECTION 13: Community & Training ===== */
.sec-community {
	padding: 56px 0;
	border-top: 1px solid var(--line);
}
.community-head .sec-title {
	font-family: 'Playfair Display', serif;
	font-size: var(--step-1);
	margin: 0 0 10px;
}
.community-head .sec-lede {
	color: var(--muted);
	font-size: var(--step--1);
	margin: 0 0 18px;
}

.community-grid {
	display: grid;
	gap: 16px;
	align-items: start;
	grid-template-columns: 1.1fr 0.9fr;
	grid-template-areas:
		'timeline metrics'
		'photo1 metrics'
		'photo2 metrics';
}
.comm-timeline {
	grid-area: timeline;
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0 0 0 24px;
}
.comm-timeline::before {
	content: '';
	position: absolute;
	left: 8px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: linear-gradient(#333, #222);
	border-radius: 2px;
}
.comm-step {
	position: relative;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 12px;
	margin-bottom: 12px;
	color: var(--muted);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.comm-step:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow);
	border-color: rgba(255, 255, 255, 0.12);
}
.comm-step::before {
	content: '';
	position: absolute;
	left: -19px;
	top: 14px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--brand);
	box-shadow: 0 6px 18px rgba(198, 165, 114, 0.35);
}
.comm-step h3 {
	margin: 0 0 6px;
	color: var(--ink);
}

.comm-photo {
	margin: 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 12px;
}
.comm-photo:nth-of-type(1) {
	grid-area: photo1;
}
.comm-photo:nth-of-type(2) {
	grid-area: photo2;
}
.comm-photo figcaption {
	color: var(--muted);
	font-size: 12px;
	margin-top: 6px;
}

.comm-metrics {
	grid-area: metrics;
	display: grid;
	gap: 12px;
	align-content: start;
}
.donut {
	--p: 0; /* percent */
	width: 160px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, #111311 72%, transparent 73% 100%),
		conic-gradient(var(--brand) calc(var(--p) * 1%), rgba(198, 165, 114, 0.2) 0);
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	box-shadow: inset 0 8px 22px rgba(0, 0, 0, 0.25);
}
.donut-num {
	font-weight: 700;
	color: var(--brand);
}
.donut-label {
	font-size: 12px;
	color: var(--muted);
}

@media (max-width: 1100px) {
	.community-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			'timeline'
			'metrics'
			'photo1'
			'photo2';
	}
}

/* ===== SECTION 14: Studio Focus ===== */
.sec-focus {
	padding: 56px 0;
	border-top: 1px solid var(--line);
}
.focus-head .sec-title {
	font-family: 'Playfair Display', serif;
	font-size: var(--step-1);
	margin: 0 0 10px;
}
.focus-head .sec-lede {
	color: var(--muted);
	font-size: var(--step--1);
	margin: 0 0 18px;
}

.focus-grid {
	display: grid;
	gap: 16px;
	align-items: center;
	grid-template-columns: 0.9fr 1.2fr 0.9fr;
}
.focus-polaroid {
	margin: 0;
	background: #121412;
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 12px;
	transform: rotate(-2.2deg);
}
.focus-polaroid.right {
	transform: rotate(2.2deg);
}
.focus-polaroid img {
	border-radius: 12px;
}
.focus-polaroid figcaption {
	color: var(--muted);
	font-size: 12px;
	margin-top: 6px;
}

.focus-center {
	display: grid;
	gap: 12px;
}
.focus-modes {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}
.equalizer {
	--speed: 2.6s;
	display: flex;
	gap: 6px;
	align-items: flex-end;
	height: 92px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #121412;
}
.equalizer .bar {
	width: 10px;
	height: 20px;
	border-radius: 6px;
	background: linear-gradient(
		180deg,
		rgba(198, 165, 114, 0.7),
		rgba(198, 165, 114, 0.2)
	);
	animation: eq var(--speed) ease-in-out infinite;
}
.equalizer .bar:nth-child(odd) {
	animation-delay: 0.2s;
}
.equalizer .bar:nth-child(3n) {
	animation-delay: 0.4s;
}
@keyframes eq {
	0%,
	100% {
		height: 18px;
	}
	20% {
		height: 84px;
	}
	40% {
		height: 36px;
	}
	60% {
		height: 72px;
	}
	80% {
		height: 28px;
	}
}
.tracklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
	color: var(--muted);
}
.tracklist strong {
	color: var(--ink);
}

@media (max-width: 1024px) {
	.focus-grid {
		grid-template-columns: 1fr;
	}
	.focus-polaroid {
		transform: none;
	}
}

/* ===== SECTION 15: Packaging & Shipping ===== */
.sec-packship {
	padding: 56px 0;
	border-top: 1px solid var(--line);
}
.packship-head .sec-title {
	font-family: 'Playfair Display', serif;
	font-size: var(--step-1);
	margin: 0 0 10px;
}
.packship-head .sec-lede {
	color: var(--muted);
	font-size: var(--step--1);
	margin: 0 0 18px;
}

.packship-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: start;
}
.ship-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.s-step {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 12px;
	color: var(--muted);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.s-step strong {
	color: var(--ink);
}
.s-step:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow);
	border-color: rgba(255, 255, 255, 0.12);
}

.ship-progress {
	position: relative;
	height: 8px;
	background: #121412;
	border: 1px solid var(--line);
	border-radius: 999px;
	margin-top: 4px;
}
.ship-bar {
	width: 0%;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		rgba(198, 165, 114, 0.7),
		rgba(198, 165, 114, 0.2)
	);
	transition: width 0.8s ease;
}
.ship-dot {
	position: absolute;
	top: 50%;
	left: 0%;
	transform: translate(-50%, -50%);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--brand);
	box-shadow: 0 6px 18px rgba(198, 165, 114, 0.35);
}

.flip-cards {
	display: grid;
	gap: 12px;
}
.flip {
	perspective: 800px;
}
.flip-inner {
	position: relative;
	width: 100%;
	transform-style: preserve-3d;
	transition: transform 0.6s ease;
}
.flip:hover .flip-inner {
	transform: rotateY(180deg);
}
.flip-front,
.flip-back {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 12px;
	backface-visibility: hidden;
}
.flip-front img {
	border-radius: 12px;
}
.flip-back {
	position: absolute;
	inset: 0;
	transform: rotateY(180deg);
	display: grid;
	place-items: center;
	color: var(--muted);
}

@media (max-width: 1024px) {
	.packship-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== SECTION 16: Press & Mentions ===== */
.sec-press {
	padding: 56px 0;
	border-top: 1px solid var(--line);
}
.press-head .sec-title {
	font-family: 'Playfair Display', serif;
	font-size: var(--step-1);
	margin: 0 0 10px;
}
.press-head .sec-lede {
	color: var(--muted);
	font-size: var(--step--1);
	margin: 0 0 18px;
}

.press-grid {
	display: grid;
	gap: 16px;
	align-items: start;
	grid-template-columns: 1fr 1fr 0.9fr;
}
.press-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 12px;
	transform-style: preserve-3d;
	transition: transform 0.12s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.press-card:hover {
	box-shadow: var(--shadow);
	border-color: rgba(255, 255, 255, 0.12);
}
.press-fig {
	margin: 0;
}
.press-fig img {
	border-radius: 12px;
}
.press-fig figcaption {
	color: var(--muted);
	font-size: 12px;
	margin-top: 6px;
}

.press-collage {
	margin: 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 12px;
}
.press-collage img {
	border-radius: 12px;
}
.press-collage figcaption {
	color: var(--muted);
	font-size: 12px;
	margin-top: 6px;
}

/* Press marquee — one row, infinite */
.press-marquee {
	margin-top: 14px;
	overflow: hidden;
	border-top: 1px dashed var(--line);
	border-bottom: 1px dashed var(--line);
}
.press-line {
	display: inline-flex; /* было: display:flex */
	gap: 32px;
	padding: 10px 0;
	white-space: nowrap; /* не переносим строку */
	will-change: transform;
	animation: marquee 18s linear infinite;
}
.press-line span {
	white-space: nowrap;
	color: var(--muted);
}

@keyframes marquee {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	} /* двигаем на половину ширины (контент удвоен) */
}

@media (max-width: 1100px) {
	.press-grid {
		grid-template-columns: 1fr;
	}
}