/* ======================
   Journal — Page Styles
   ====================== */

.page-title {
	font-family: 'Prata', serif;
	font-size: clamp(1.4rem, 3.4vw, 2.4rem);
	margin: 1rem auto 0.5rem;
	width: min(100% - 2rem, var(--maxw));
}

/* ===== Section 1: Issue Intro ===== */
.issue-intro {
	padding: clamp(2rem, 6vw, 4rem) 0;
}
.ii-head {
	max-width: 72ch;
	margin-bottom: 1rem;
}
.ii-title {
	font-family: 'Prata', serif;
	font-size: clamp(1.35rem, 2.4vw, 2.05rem);
	margin: 0 0 0.35rem;
}
.ii-lead {
	color: var(--muted);
}

/* ticker */
.ii-ticker {
	position: relative;
	overflow: hidden;
	border-radius: 999px;
	border: 1px dashed rgba(255, 255, 255, 0.18);
	margin-top: 0.6rem;
	background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.ii-row {
	display: inline-flex;
	gap: 2rem;
	white-space: nowrap;
	padding: 0.45rem 0.9rem;
	animation: ii-marquee 18s linear infinite;
}
.ii-row span {
	opacity: 0.9;
}
@keyframes ii-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* collage */
.ii-collage {
	margin-top: 1rem;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(0.9rem, 2vw, 1.2rem);
}
.ii-fig {
	background: var(--surface);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
	padding: 0.8rem;
	box-shadow: var(--shadow);
}
.ii-fig figcaption {
	margin-top: 0.4rem;
	color: var(--muted);
	font-size: 0.95rem;
}

@media (max-width: 980px) {
	.ii-collage {
		grid-template-columns: 1fr;
	}
}

/* ===== Section 2: Bench Notes ===== */
.bench-notes {
	padding: clamp(2rem, 6vw, 4rem) 0;
}
.bn-head {
	max-width: 72ch;
	margin-bottom: 1rem;
}
.bn-title {
	font-family: 'Prata', serif;
	font-size: clamp(1.35rem, 2.4vw, 2.05rem);
	margin: 0 0 0.35rem;
}
.bn-lead {
	color: var(--muted);
}

.bn-layout {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(1rem, 3vw, 2rem);
	align-items: start;
}
.bn-aside {
	display: grid;
	gap: 0.9rem;
}
.bn-fig {
	margin: 0;
}
.bn-fig figcaption {
	margin-top: 0.4rem;
	color: var(--muted);
	font-size: 0.95rem;
}

.bn-stream {
	background: linear-gradient(180deg, var(--surface), #0e0f11);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
	padding: clamp(1rem, 2.5vw, 1.3rem);
	box-shadow: var(--shadow);
}
.bn-stream p {
	margin: 0 0 0.9rem;
	text-wrap: pretty;
}

@media (max-width: 980px) {
	.bn-layout {
		grid-template-columns: 1fr;
	}
}

/* ===== Section 3: Process Sequence ===== */
.process-seq {
	padding: clamp(2rem, 6vw, 4rem) 0;
}
.ps-head {
	max-width: 72ch;
	margin-bottom: 1rem;
}
.ps-title {
	font-family: 'Prata', serif;
	font-size: clamp(1.35rem, 2.4vw, 2.05rem);
	margin: 0 0 0.35rem;
}
.ps-lead {
	color: var(--muted);
}

.ps-steps {
	counter-reset: step;
	display: grid;
	gap: 0.6rem;
	margin-bottom: 0.8rem;
}
.ps-step {
	position: relative;
	background: var(--surface);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 0.75rem 0.9rem 0.75rem 3.2rem;
	box-shadow: var(--shadow);
}
/* Process Sequence — hide native list markers */
.ps-steps {
	list-style: none; /* убираем маркеры у <ol> */
	padding-left: 0; /* убираем отступ */
	margin: 0 0 0.8rem; /* как было */
}
.ps-steps li {
	list-style: none;
}
.ps-steps li::marker {
	content: '';
} /* на всякий случай */

.ps-step .num {
	position: absolute;
	left: 0.8rem;
	top: 0.6rem;
	width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	border-radius: 999px;
	font-weight: 800;
	background: var(--accent);
	color: #0b0c0d;
}
.ps-micro {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.9rem, 2vw, 1.2rem);
}
.ps-fig {
	margin: 0;
}
.ps-fig figcaption {
	margin-top: 0.4rem;
	color: var(--muted);
	font-size: 0.95rem;
}

@media (max-width: 980px) {
	.ps-micro {
		grid-template-columns: 1fr;
	}
}
/* =========================
   Section 4 — Tool Bench (tabs)
   ========================= */
.tool-bench {
	padding: clamp(2rem, 6vw, 4rem) 0;
}
.tb-head {
	max-width: 72ch;
	margin-bottom: 1rem;
}
.tb-title {
	font-family: 'Prata', serif;
	font-size: clamp(1.35rem, 2.4vw, 2.05rem);
	margin: 0 0 0.35rem;
}
.tb-lead {
	color: var(--muted);
}

.tb-tabs {
	display: inline-flex;
	gap: 0.5rem;
	margin-top: 0.4rem;
}
.tb-tab {
	appearance: none;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: color-mix(in srgb, var(--ink) 6%, transparent);
	color: var(--ink);
	border-radius: 999px;
	padding: 0.45rem 0.8rem;
	font-weight: 700;
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.tb-tab:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow);
}
.tb-tab.is-on {
	background: var(--accent);
	color: #0b0c0d;
}

.tb-panels {
	margin-top: 0.8rem;
}
.tb-panel {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(1rem, 3vw, 2rem);
	align-items: start;
	background: linear-gradient(180deg, var(--surface), #0e0f11);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
	padding: 1rem;
	box-shadow: var(--shadow);
}
.tb-fig {
	margin: 0;
}
.tb-fig figcaption {
	margin-top: 0.4rem;
	color: var(--muted);
	font-size: 0.95rem;
}
.tb-notes {
	margin: 0;
	padding-left: 1rem;
	display: grid;
	gap: 0.25rem;
}
.tb-notes li {
	list-style: square;
}
.tb-panel[hidden] {
	display: none;
}

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

/* =========================
   Section 5 — Stitch Library
   ========================= */
.stitch-library {
	padding: clamp(2rem, 6vw, 4rem) 0;
}
.sl-head {
	max-width: 72ch;
	margin-bottom: 1rem;
}
.sl-title {
	font-family: 'Prata', serif;
	font-size: clamp(1.35rem, 2.4vw, 2.05rem);
	margin: 0 0 0.35rem;
}
.sl-lead {
	color: var(--muted);
}

.sl-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.9rem, 2vw, 1.2rem);
}
.sl-card {
	position: relative;
	background: var(--surface);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
	padding: 0.8rem;
	box-shadow: var(--shadow);
}
.sl-fig {
	margin: 0;
}
.sl-fig figcaption {
	margin-top: 0.4rem;
	color: var(--muted);
	font-size: 0.95rem;
}

/* CSS-рисованные линии */
.sl-line {
	position: absolute;
	left: 0.8rem;
	right: 0.8rem;
	bottom: 0.8rem;
	height: 28px;
	opacity: 0.85;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}
.sl-line--back {
	background: linear-gradient(
		90deg,
		transparent 0 6%,
		var(--accent) 6% 8%,
		transparent 8% 20%,
		var(--accent) 20% 22%,
		transparent 22% 34%,
		var(--accent) 34% 36%,
		transparent 36% 48%,
		var(--accent) 48% 50%,
		transparent 50% 62%,
		var(--accent) 62% 64%,
		transparent 64% 76%,
		var(--accent) 76% 78%,
		transparent 78% 90%,
		var(--accent) 90% 92%,
		transparent 92% 100%
	);
}
.sl-line--zig {
	background: repeating-linear-gradient(
		135deg,
		var(--accent) 0 8px,
		transparent 8px 16px
	);
	mask: linear-gradient(#000, #000) center/100% 2px no-repeat;
}

/* =========================
   Section 6 — Dye Diary (accordion)
   ========================= */
.dye-diary {
	padding: clamp(2rem, 6vw, 4rem) 0;
}
.dd-head {
	max-width: 72ch;
	margin-bottom: 1rem;
}
.dd-title {
	font-family: 'Prata', serif;
	font-size: clamp(1.35rem, 2.4vw, 2.05rem);
	margin: 0 0 0.35rem;
}
.dd-lead {
	color: var(--muted);
}

.dd-layout {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(1rem, 3vw, 2rem);
	align-items: start;
}
.dd-aside {
	display: grid;
	gap: 0.9rem;
}
.dd-fig {
	margin: 0;
}
.dd-fig figcaption {
	margin-top: 0.4rem;
	color: var(--muted);
	font-size: 0.95rem;
}

.dd-accord {
	display: grid;
	gap: 0.6rem;
}
.dd-item {
	appearance: none;
	text-align: left;
	width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: linear-gradient(180deg, var(--surface), #0e0f11);
	color: var(--ink);
	border-radius: var(--radius);
	padding: 0.8rem 1rem 0.8rem 1rem;
	cursor: pointer;
	position: relative;
	transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.dd-item:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow);
	border-color: rgba(255, 255, 255, 0.18);
}
.dd-q {
	font-weight: 700;
}
.dd-icon {
	position: absolute;
	right: 0.9rem;
	top: 0.9rem;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid currentColor;
}
.dd-item[aria-expanded='true'] .dd-icon {
	background: var(--accent);
	color: #0b0c0d;
}
.dd-a {
	display: none;
	margin-top: 0.5rem;
	color: var(--muted);
}
.dd-item[aria-expanded='true'] .dd-a {
	display: block;
}

@media (max-width: 980px) {
	.dd-layout {
		grid-template-columns: 1fr;
	}
}
/* =========================
   Section 7 — Repair Case Study
   ========================= */
.repair-case {
	padding: clamp(2rem, 6vw, 4rem) 0;
}
.rc-head {
	max-width: 72ch;
	margin-bottom: 1rem;
}
.rc-title {
	font-family: 'Prata', serif;
	font-size: clamp(1.35rem, 2.4vw, 2.05rem);
	margin: 0 0 0.35rem;
}
.rc-lead {
	color: var(--muted);
}

.rc-slider {
	position: relative;
	aspect-ratio: 4/3;
	border-radius: var(--radius);
	border: 1px solid rgba(255, 255, 255, 0.08);
	overflow: hidden;
	box-shadow: var(--shadow);
	background: var(--surface);
	width: 350px;
}
.rc-frame {
	position: absolute;
	inset: 0;
	margin: 0;
}
.rc-before img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.rc-after {
	clip-path: inset(0 50% 0 0);
} /* изначально половина видна */
.rc-after img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.rc-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 4px;
	background: var(--accent);
	border: none;
	cursor: ew-resize;
	transform: translateX(-50%);
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
}
.rc-handle::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.6);
	background: color-mix(in srgb, var(--ink) 6%, transparent);
	box-shadow: var(--shadow);
}

.rc-notes {
	margin: 0.7rem 0 0;
	padding-left: 1rem;
	color: var(--muted);
}
.rc-notes li {
	list-style: square;
}

/* =========================
   Section 8 — Pattern Mini-Map
   ========================= */
.pattern-minimap {
	padding: clamp(2rem, 6vw, 4rem) 0;
}
.pm-head {
	max-width: 72ch;
	margin-bottom: 1rem;
}
.pm-title {
	font-family: 'Prata', serif;
	font-size: clamp(1.35rem, 2.4vw, 2.05rem);
	margin: 0 0 0.35rem;
}
.pm-lead {
	color: var(--muted);
}

.pm-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(1rem, 3vw, 2rem);
	align-items: start;
}
.pm-map {
	position: relative;
	aspect-ratio: 4/3;
	border-radius: var(--radius);
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: var(--surface);
	box-shadow: var(--shadow);
	overflow: hidden;
	background-image: repeating-linear-gradient(
			0deg,
			rgba(255, 255, 255, 0.06) 0 1px,
			transparent 1px 24px
		),
		repeating-linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.06) 0 1px,
			transparent 1px 24px
		);
}
.pm-piece {
	position: absolute;
	border-radius: 10px;
	background: linear-gradient(180deg, #141619, #0f1113);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.p-front {
	left: 8%;
	top: 12%;
	width: 38%;
	height: 60%;
}
.p-back {
	left: 52%;
	top: 12%;
	width: 36%;
	height: 62%;
}
.p-sleeve {
	left: 22%;
	top: 68%;
	width: 56%;
	height: 22%;
	border-radius: 20px;
}
.pm-piece .lab {
	position: absolute;
	left: 8px;
	top: 8px;
	font-weight: 700;
	font-size: 0.9rem;
}
.pm-dart {
	position: absolute;
	left: 24%;
	top: 32%;
	width: 10%;
	height: 16%;
	background: conic-gradient(
		from 210deg at 50% 0,
		rgba(86, 208, 181, 0.35) 8deg,
		transparent 8deg 352deg,
		rgba(86, 208, 181, 0.35) 352deg
	);
}
.pm-notch {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background: var(--accent);
	box-shadow: var(--shadow);
}
.pm-notch--a {
	left: 12%;
	top: 64%;
}
.pm-notch--b {
	right: 14%;
	top: 64%;
}

.pm-aside {
	display: grid;
	gap: 0.9rem;
}
.pm-fig {
	margin: 0;
}
.pm-fig figcaption {
	margin-top: 0.4rem;
	color: var(--muted);
	font-size: 0.95rem;
}

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

/* =========================
   Section 9 — Threads & Mood
   ========================= */
.threads-mood {
	padding: clamp(2rem, 6vw, 4rem) 0;
}
.tm-head {
	max-width: 72ch;
	margin-bottom: 1rem;
}
.tm-title {
	font-family: 'Prata', serif;
	font-size: clamp(1.35rem, 2.4vw, 2.05rem);
	margin: 0 0 0.35rem;
}
.tm-lead {
	color: var(--muted);
}

.tm-chips {
	display: inline-flex;
	gap: 0.5rem;
	margin-top: 0.4rem;
}
.tm-chip {
	appearance: none;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: color-mix(in srgb, var(--ink) 6%, transparent);
	color: var(--ink);
	border-radius: 999px;
	padding: 0.45rem 0.8rem;
	font-weight: 700;
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.tm-chip:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow);
}
.tm-chip.is-on {
	background: var(--accent);
	color: #0b0c0d;
}

.tm-gallery {
	margin-top: 1rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.9rem, 2vw, 1.2rem);
}
.tm-card {
	background: var(--surface);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
	padding: 0.8rem;
	box-shadow: var(--shadow);
}
.tm-card figcaption {
	margin-top: 0.4rem;
	color: var(--muted);
	font-size: 0.95rem;
}
.tm-card[aria-hidden='true'] {
	display: none;
}

@media (max-width: 980px) {
	.tm-gallery {
		grid-template-columns: 1fr;
	}
}
/* =========================
   Section 10 — Workshop Routine
   ========================= */
.workshop-routine {
	padding: clamp(2rem, 6vw, 4rem) 0;
}
.wr-head {
	max-width: 72ch;
	margin-bottom: 1rem;
}
.wr-title {
	font-family: 'Prata', serif;
	font-size: clamp(1.35rem, 2.4vw, 2.05rem);
	margin: 0 0 0.35rem;
}
.wr-lead {
	color: var(--muted);
}

.wr-dots {
	display: inline-flex;
	gap: 0.5rem;
	margin-top: 0.4rem;
}
.wr-dot {
	appearance: none;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: color-mix(in srgb, var(--ink) 6%, transparent);
	color: var(--ink);
	border-radius: 999px;
	padding: 0.45rem 0.8rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.wr-dot:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow);
}
.wr-dot.is-on {
	background: var(--accent);
	color: #0b0c0d;
}

.wr-panels {
	margin-top: 0.8rem;
}
.wr-panel {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(1rem, 3vw, 2rem);
	align-items: start;
	background: linear-gradient(180deg, var(--surface), #0e0f11);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
	padding: 1rem;
	box-shadow: var(--shadow);
}
.wr-fig {
	margin: 0;
}
.wr-fig figcaption {
	margin-top: 0.4rem;
	color: var(--muted);
	font-size: 0.95rem;
}
.wr-notes {
	margin: 0;
	padding-left: 1rem;
	display: grid;
	gap: 0.25rem;
}
.wr-notes li {
	list-style: square;
}
.wr-panel[hidden] {
	display: none;
}

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

/* =========================
   Section 11 — Case Essay (text-heavy)
   ========================= */
.bias-essay {
	padding: clamp(2rem, 6vw, 4rem) 0;
}
.be-head {
	max-width: 72ch;
	margin-bottom: 1rem;
}
.be-title {
	font-family: 'Prata', serif;
	font-size: clamp(1.35rem, 2.4vw, 2.05rem);
	margin: 0 0 0.35rem;
}
.be-lead {
	color: var(--muted);
}

.be-layout {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(1rem, 3vw, 2rem);
	align-items: start;
}
.be-aside {
	display: grid;
	gap: 0.9rem;
}
.be-fig {
	margin: 0;
}
.be-fig figcaption {
	margin-top: 0.4rem;
	color: var(--muted);
	font-size: 0.95rem;
}

.be-essay {
	background: linear-gradient(180deg, var(--surface), #0e0f11);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
	padding: clamp(1rem, 2.5vw, 1.3rem);
	box-shadow: var(--shadow);
}
.be-essay p {
	margin: 0 0 0.9rem;
	text-wrap: pretty;
}

@media (max-width: 980px) {
	.be-layout {
		grid-template-columns: 1fr;
	}
}

/* =========================
   Section 12 — Notebook Snippets
   ========================= */
.notebook-snippets {
	padding: clamp(2rem, 6vw, 4rem) 0;
}
.ns-head {
	max-width: 72ch;
	margin-bottom: 1rem;
}
.ns-title {
	font-family: 'Prata', serif;
	font-size: clamp(1.35rem, 2.4vw, 2.05rem);
	margin: 0 0 0.35rem;
}
.ns-lead {
	color: var(--muted);
}

.ns-chips {
	display: inline-flex;
	gap: 0.5rem;
	margin-top: 0.4rem;
}
.ns-chip {
	appearance: none;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: color-mix(in srgb, var(--ink) 6%, transparent);
	color: var(--ink);
	border-radius: 999px;
	padding: 0.45rem 0.8rem;
	font-weight: 700;
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.ns-chip:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow);
}
.ns-chip.is-on {
	background: var(--accent);
	color: #0b0c0d;
}

.ns-grid {
	margin-top: 1rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.9rem, 2vw, 1.2rem);
}
.ns-card {
	background: var(--surface);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
	padding: 0.8rem;
	box-shadow: var(--shadow);
}
.ns-card figcaption {
	margin-top: 0.4rem;
	color: var(--muted);
	font-size: 0.95rem;
}
.ns-card[aria-hidden='true'] {
	display: none;
}

@media (max-width: 980px) {
	.ns-grid {
		grid-template-columns: 1fr;
	}
}
/* =========================
   Section 13 — Seam Clinic
   ========================= */
.seam-clinic {
	padding: clamp(2rem, 6vw, 4rem) 0;
}
.sc-head {
	max-width: 72ch;
	margin-bottom: 1rem;
}
.sc-title {
	font-family: 'Prata', serif;
	font-size: clamp(1.35rem, 2.4vw, 2.05rem);
	margin: 0 0 0.35rem;
}
.sc-lead {
	color: var(--muted);
}

.sc-chips {
	display: inline-flex;
	gap: 0.5rem;
	margin-top: 0.4rem;
}
.sc-chip {
	appearance: none;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: color-mix(in srgb, var(--ink) 6%, transparent);
	color: var(--ink);
	border-radius: 999px;
	padding: 0.45rem 0.8rem;
	font-weight: 700;
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.sc-chip:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow);
}
.sc-chip.is-on {
	background: var(--accent);
	color: #0b0c0d;
}

.sc-grid {
	margin-top: 1rem;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(0.9rem, 2vw, 1.2rem);
}
.sc-card {
	background: var(--surface);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
	padding: 0.8rem;
	box-shadow: var(--shadow);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.sc-card:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 255, 255, 0.18);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.sc-card figcaption {
	margin-top: 0.4rem;
	color: var(--muted);
	font-size: 0.95rem;
}
.sc-card[aria-hidden='true'] {
	display: none;
}

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

/* =========================
   Section 14 — Field Trip (rail)
   ========================= */
.field-trip {
	padding: clamp(2rem, 6vw, 4rem) 0;
}
.ft-head {
	max-width: 72ch;
	margin-bottom: 1rem;
}
.ft-title {
	font-family: 'Prata', serif;
	font-size: clamp(1.35rem, 2.4vw, 2.05rem);
	margin: 0 0 0.35rem;
}
.ft-lead {
	color: var(--muted);
}

.ft-viewport {
	position: relative;
}
.ft-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 340px;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 0 3.5rem;
	scrollbar-width: none;
}
.ft-rail::-webkit-scrollbar {
	display: none;
}
.ft-card {
	scroll-snap-align: center;
	background: var(--surface);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
	padding: 0.75rem;
	box-shadow: var(--shadow);
}
.ft-card figcaption {
	margin-top: 0.4rem;
	color: var(--muted);
	font-size: 0.95rem;
}
.ft-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	appearance: none;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: color-mix(in srgb, var(--ink) 6%, transparent);
	color: var(--ink);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.ft-prev {
	left: 0.5rem;
}
.ft-next {
	right: 0.5rem;
}
.ft-nav:hover {
	transform: translateY(calc(-50% - 2px));
	box-shadow: var(--shadow);
}

/* =========================
   Section 15 — Finishing Recipes (flip)
   ========================= */
.finish-recipes {
	padding: clamp(2rem, 6vw, 4rem) 0;
}
.fr-head {
	max-width: 72ch;
	margin-bottom: 1rem;
}
.fr-title {
	font-family: 'Prata', serif;
	font-size: clamp(1.35rem, 2.4vw, 2.05rem);
	margin: 0 0 0.35rem;
}
.fr-lead {
	color: var(--muted);
}

.fr-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(0.9rem, 2vw, 1.2rem);
}
.fr-card {
	perspective: 1000px;
	border-radius: var(--radius);
}
.fr-face {
	background: linear-gradient(180deg, var(--surface), #0e0f11);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
	padding: 0.9rem;
	box-shadow: var(--shadow);
	backface-visibility: hidden;
	transition: transform 0.6s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	min-height: 230px;
}
.fr-front {
	position: relative;
}
.fr-back {
	margin-top: -230px;
	transform: rotateY(180deg);
}
.fr-card:hover .fr-front,
.fr-card:focus .fr-front {
	transform: rotateY(180deg);
}
.fr-card:hover .fr-back,
.fr-card:focus .fr-back {
	transform: rotateY(0);
}
.fr-fig {
	margin: 0 0 0.6rem;
}
.fr-card h3 {
	margin: 0;
	font-size: 1.06rem;
}

@media (max-width: 980px) {
	.fr-grid {
		grid-template-columns: 1fr;
	}
	.fr-back {
		margin-top: -260px;
	}
}

/* =========================
   Section 16 — Dispatch Note
   ========================= */
.dispatch-note {
	padding: clamp(2rem, 6vw, 4rem) 0;
}
.dn-head {
	max-width: 72ch;
	margin-bottom: 1rem;
}
.dn-title {
	font-family: 'Prata', serif;
	font-size: clamp(1.35rem, 2.4vw, 2.05rem);
	margin: 0 0 0.35rem;
}
.dn-lead {
	color: var(--muted);
}

.dn-band {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr 0.9fr;
	gap: clamp(1rem, 3vw, 2rem);
	align-items: start;
}
.dn-fig {
	margin: 0;
}
.dn-fig figcaption {
	margin-top: 0.4rem;
	color: var(--muted);
	font-size: 0.95rem;
}

.dn-copy {
	background: linear-gradient(180deg, var(--surface), #0e0f11);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
	padding: 1rem;
	box-shadow: var(--shadow);
}
.dn-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 1rem;
	border-radius: 999px;
	margin-top: 0.6rem;
	background: var(--accent);
	color: #0b0c0d;
	font-weight: 700;
	border: 1px solid rgba(0, 0, 0, 0.12);
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.dn-cta:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}

@media (max-width: 980px) {
	.dn-band {
		grid-template-columns: 1fr;
	}
}