/* ==========================================================================
   Case study page layout. Depends on design-system.css and chrome.css.
   Evidence components (flows, tables, decision logs) live in evidence.css.
   ========================================================================== */

/* --- Case hero ------------------------------------------------------------ */

.case-hero {
	position: relative;
	padding-top: calc(var(--nav-h) + var(--s6));
	padding-bottom: var(--s6);
	overflow: hidden;
}

/* A single soft wash rather than the landing page's three drifting orbs. The
   hero here is a reading entry point, not a stage. */
.case-hero::before {
	content: "";
	position: absolute;
	inset: -30% -10% auto -10%;
	height: 520px;
	z-index: 0;
	pointer-events: none;
	filter: blur(70px);
	opacity: 0.45;
	background:
		radial-gradient(circle at 22% 40%, #d3e2fd, transparent 62%),
		radial-gradient(circle at 68% 30%, #f3ddf1, transparent 58%);
}

.case-hero .wrap {
	position: relative;
	z-index: 1;
}

.back-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: var(--s4);
	font-size: 15px;
	font-weight: 500;
	color: var(--ink-2);
	transition: color 200ms var(--ease);
}

.back-link:hover {
	color: var(--ink);
}

.back-link svg {
	transition: transform 260ms var(--ease);
}

.back-link:hover svg {
	transform: translateX(-4px);
}

.case-hero h1 {
	max-width: 20ch;
	font-size: clamp(34px, 4.6vw, 60px);
	font-weight: 600;
	letter-spacing: -0.032em;
}

/* The thesis, not a description. States the claim the page then evidences. */
.case-lede {
	margin-top: var(--s3);
	max-width: 62ch;
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.6;
	color: var(--ink-2);
}

/* --- At a glance ---------------------------------------------------------- */

.glance {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--s2);
	margin-top: var(--s6);
	padding-top: var(--s4);
	border-top: 1px solid var(--line);
}

.glance div {
	display: grid;
	gap: 4px;
}

.glance dt {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.glance dd {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--ink);
}

/* --- Body ----------------------------------------------------------------- */

.case-body .section {
	padding-block: var(--s6);
}

/* Prose sits on a reading measure. Evidence components are siblings of
   .prose, so they keep the full container width and break out of it. */
.prose {
	max-width: 72ch;
}

.prose p {
	margin-bottom: var(--s3);
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink-2);
}

.prose p:last-child {
	margin-bottom: 0;
}

.prose strong {
	color: var(--ink);
	font-weight: 600;
}

.prose ul {
	margin-bottom: var(--s3);
	display: grid;
	gap: 10px;
}

.prose li {
	position: relative;
	padding-left: 22px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink-2);
}

.prose li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 11px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--grad);
}

.prose h3 {
	margin-top: var(--s5);
	margin-bottom: var(--s2);
	font-size: 21px;
}

.prose h3:first-child {
	margin-top: 0;
}

/* Numbered section eyebrow: "01 · The situation" */
.case-body .section-head {
	margin-bottom: var(--s4);
}

.case-num {
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

/* --- Took on / left alone ------------------------------------------------- */

.split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--s3);
	margin-top: var(--s4);
}

.split-col {
	padding: var(--s4);
	border-radius: var(--r-lg);
	border: 1px solid var(--line);
	background: var(--bg);
}

.split-col.took {
	border-color: transparent;
	background: var(--tint-green);
}

.split-col.left {
	border-color: transparent;
	background: var(--bg-sink);
}

.split-col h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: var(--s3);
	font-size: 16px;
}

.split-col ul {
	display: grid;
	gap: var(--s2);
}

.split-col li {
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-2);
}

.split-col li b {
	display: block;
	color: var(--ink);
	font-weight: 600;
}

/* --- Related work --------------------------------------------------------- */

.related {
	border-top: 1px solid var(--line-soft);
}

.related .work-grid {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.related-more {
	margin-top: var(--s4);
	font-size: 15px;
	color: var(--ink-2);
}

.related-more a {
	font-weight: 600;
	border-bottom: 1px solid var(--line);
}

.related-more a:hover {
	border-bottom-color: var(--ink);
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 640px) {

	.case-hero h1 {
		max-width: none;
	}

	.glance {
		grid-template-columns: 1fr 1fr;
	}
}