/* Compact feature showcase. Page-specific to avoid stale shared CSS. */
.showcase-chapter {
	overflow: hidden;
}
.showcase-chapter > .page {
	max-width: 1180px;
}
.showcase-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: 34px;
}
.showcase-card {
	display: flex;
	min-width: 0;
	min-height: 0;
	flex-direction: column;
	padding: 18px;
	contain: layout paint;
	border: 1px solid var(--rule);
	border-radius: 8px;
	background: linear-gradient(145deg, rgba(224, 188, 119, 0.045), rgba(8, 8, 10, 0.2));
	transition:
		transform 220ms var(--ease),
		border-color 220ms ease;
}
.showcase-card:hover {
	transform: translateY(-3px);
	border-color: rgba(224, 188, 119, 0.55);
}
.showcase-card > header {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 14px;
}
.showcase-card > header > span {
	flex: none;
	color: var(--accent);
	font: 10px var(--font-mono);
}
.showcase-card h3 {
	margin: 0;
	font-size: clamp(18px, 2vw, 23px);
	line-height: 1.1;
	letter-spacing: -0.025em;
}
.showcase-card > p {
	max-width: 58ch;
	margin: 14px 0 0;
	color: var(--ink-2);
	font-size: 13px;
	line-height: 1.5;
}
.showcase-chapter + section details {
	margin-top: 20px;
}
.showcase-chapter + section summary {
	color: var(--accent);
	font: 12px var(--font-mono);
	cursor: pointer;
}
@keyframes risk-sweep {
	0%,
	14% {
		transform: scaleX(0.18);
		opacity: 0.65;
	}
	42%,
	82% {
		transform: scaleX(1);
		opacity: 1;
	}
	100% {
		transform: scaleX(0.18);
		opacity: 0.65;
	}
}
@media (max-width: 760px) {
	.showcase-grid {
		grid-template-columns: 1fr;
	}
	.showcase-card {
		padding: 15px;
	}
}
@media (prefers-reduced-motion: reduce), (update: slow) {
	.showcase-card {
		transition: none;
	}
	.showcase-card:hover {
		transform: none;
	}
}

/* --------------------------------------------- showcase terminal cards */
/* The grid cards use the same slab as the mechanism section on the home
 * page, so a reader learns one format and reads six instances of it rather
 * than six invented layouts. The only differences here are size: a card is
 * roughly a third the width of a chapter, so the chapter's 26px padding and
 * 13px type would wrap the longest line and swallow the card. */
.showcase-card .slab {
	margin-top: 0;
}
.showcase-card .slab pre {
	padding: 14px 16px;
	font-size: 12px;
	line-height: 1.7;
	/* Long detail lines scroll inside the card instead of wrapping mid-token,
	 * which would break the column alignment the format depends on. */
	white-space: pre;
	overflow-x: auto;
}
.showcase-card > p {
	margin: 14px 0 0;
}