.ced-project-summary {
	background: var(--wp--preset--color--ink);
	position: relative;
}

.ced-project-summary__layout {
	display: grid;
	gap: var(--wp--preset--spacing--lg);
	grid-template-columns: 1fr;
	max-width: var(--page-max);
	margin-inline: auto;
}
@media (min-width: 1100px) {
	.ced-project-summary__layout { grid-template-columns: minmax(0, 2.4fr) minmax(280px, 1fr); }
}

.ced-project-summary__main { display: grid; gap: var(--wp--preset--spacing--md); }
.ced-project-summary__head { display: grid; gap: 0.85rem; }
.ced-project-summary__title {
	font-size: clamp(2rem, 4.5vw, 3.5rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1.05;
	margin: 0;
	max-width: 22ch;
	color: var(--wp--preset--color--paper);
}

/* ─── Sticky-stacked deck ──────────────────────────────────────────
   Three cards pin one-after-another at a progressive top offset so
   each card's lip stays visible above the next as the visitor scrolls.
   The effect reads like a deck of cards being flipped through, with
   the active card in focus and the prior phases poking out at top. */

.ced-project-summary__deck {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	position: relative;
	/* The deck needs scroll-room: each sticky card needs at least its
	   own height of scroll distance to allow the next card to "lift up"
	   over it. min-height on cards + gap gives us that natively. */
	padding-bottom: clamp(2rem, 5vw, 5rem);
}

.ced-deck__card {
	/* Sticky pin with progressive offset — earlier cards pin higher,
	   later cards pin lower, leaving the previous card's top-edge
	   visible above the active card. */
	position: sticky;
	top: calc(var(--header-height) + 1.25rem + (var(--i, 0) * 1.25rem));

	/* Each card needs to be tall enough that the scroll-stack reads
	   as deliberate, not cramped. ~52vh on desktop, less on phone. */
	min-height: clamp(360px, 52vh, 560px);
	padding: clamp(1.75rem, 3.5vw, 2.75rem);

	background: var(--wp--preset--color--graphite);
	border: 1px solid rgba(232, 229, 222, 0.08);
	border-radius: var(--wp--custom--radius--lg);
	overflow: clip;

	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"head    num"
		"body    num"
		"foot    num";
	gap: 1rem 1.5rem;

	box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.55);

	/* Scroll-driven reveal — supported in Chrome 115+, Safari 18+.
	   Cards translate up + fade in as they enter view. Browsers
	   without scroll-driven animations see the static end-state,
	   which is fine. */
	animation: ced-deck-reveal linear both;
	animation-timeline: view();
	animation-range: entry 0% entry 40%;
}

@keyframes ced-deck-reveal {
	from { transform: translateY(48px) scale(0.97); opacity: 0.4; }
	to   { transform: translateY(0)     scale(1);    opacity: 1; }
}

/* Per-phase color tone. Used in dot, label pill, number wash,
   focus rail, and accent edge for the result card. */
.ced-deck__card--problem  { --tone: 248, 113, 113; }  /* warm rose — diagnosis */
.ced-deck__card--approach { --tone: 96, 165, 250; }   /* cool blue — execution */
.ced-deck__card--result   {
	--tone: 212, 255, 79;                              /* lime — outcome */
	border-color: rgba(212, 255, 79, 0.28);
	background: linear-gradient(
		172deg,
		rgba(212, 255, 79, 0.07) 0%,
		var(--wp--preset--color--graphite) 38%
	);
	box-shadow:
		0 30px 80px -40px rgba(0, 0, 0, 0.55),
		0 0 0 1px rgba(212, 255, 79, 0.08) inset;
}

/* Oversized phase number sitting top-right as a watermark — gives
   each card its own visual identity at-a-glance without competing
   with the body copy. */
.ced-deck__num {
	grid-area: num;
	align-self: start;
	justify-self: end;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(5rem, 13vw, 12rem);
	font-weight: 200;
	line-height: 0.82;
	letter-spacing: -0.06em;
	color: rgba(var(--tone), 0.18);
	user-select: none;
	pointer-events: none;
	margin-top: -0.25em;
	margin-right: -0.1em;
}

/* Header — label pill + heading on same baseline */
.ced-deck__head {
	grid-area: head;
	display: flex;
	align-items: baseline;
	gap: 1rem 1.25rem;
	flex-wrap: wrap;
}
.ced-deck__label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgb(var(--tone));
	padding: 0.3rem 0.85rem 0.3rem 0.7rem;
	border-radius: var(--wp--custom--radius--pill);
	background: rgba(var(--tone), 0.08);
	border: 1px solid rgba(var(--tone), 0.22);
}
.ced-deck__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgb(var(--tone));
	box-shadow: 0 0 0 4px rgba(var(--tone), 0.18);
}
.ced-deck__h {
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	font-weight: 500;
	letter-spacing: -0.025em;
	margin: 0;
	color: var(--wp--preset--color--paper);
	line-height: 1.15;
}

/* Body copy — anchored to the top of its grid row so cards with
   shorter copy don't push the heading-to-text gap weirdly large. */
.ced-deck__body {
	grid-area: body;
	align-self: start;
	color: var(--wp--preset--color--mist);
	font-size: clamp(1rem, 1.3vw, 1.0625rem);
	line-height: 1.6;
	max-width: 58ch;
	margin: 0;
}
.ced-deck__card--result .ced-deck__body {
	color: var(--wp--preset--color--paper);
	font-weight: 500;
}

/* Foot — small phase indicator at the bottom-left so the card
   never feels empty in its bottom-left quadrant. */
.ced-deck__foot {
	grid-area: foot;
	display: flex;
	align-items: center;
	gap: 1rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--fog);
	align-self: end;
}
.ced-deck__rail {
	height: 1px;
	width: 48px;
	background: linear-gradient(
		90deg,
		rgba(var(--tone), 0.6) 0%,
		rgba(var(--tone), 0.0) 100%
	);
}

/* ─── Project intel sidebar ────────────────────────────────────────
   A column of small panels: Stack chips, At-a-Glance facts,
   Headline metric, Phase tracker. Sticky on desktop so it follows
   the deck as the visitor scrolls — and the panels are sized so
   the column visually matches the deck's vertical rhythm. */

.ced-project-summary__sidebar {
	display: grid;
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
	align-content: start;
	position: sticky;
	top: calc(var(--header-height) + 1.25rem);
}
@media (max-width: 1100px) {
	.ced-project-summary__sidebar { position: static; }
}

/* Shared panel surface */
.ced-side-panel {
	background: var(--wp--preset--color--graphite);
	border: 1px solid rgba(232, 229, 222, 0.08);
	border-radius: var(--wp--custom--radius--lg);
	padding: clamp(1.25rem, 2.2vw, 1.6rem);
	display: grid;
	gap: 0.85rem;
}

/* ─── Stack chips panel ─── */
.ced-side-panel__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}
.ced-side-panel__chips li {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.04em;
	padding: 0.4rem 0.8rem;
	border: 1px solid rgba(232, 229, 222, 0.16);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--paper);
	background: rgba(5, 5, 7, 0.4);
}

/* ─── At-a-glance facts panel ─── */
.ced-side-panel__facts {
	margin: 0;
	display: grid;
	gap: 0;
}
.ced-side-panel__row {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.6rem 0;
	border-bottom: 1px dashed rgba(232, 229, 222, 0.08);
}
.ced-side-panel__row:last-child { border-bottom: 0; padding-bottom: 0; }
.ced-side-panel__row:first-child { padding-top: 0; }
.ced-side-panel__row dt {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--fog);
	margin: 0;
}
.ced-side-panel__row dd {
	margin: 0;
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
}
.ced-side-panel__prev {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.ced-side-panel__prev::before {
	content: "↗";
	display: inline-block;
	color: var(--wp--preset--color--lime);
	transform: rotate(180deg);
	font-size: 0.85em;
}

/* ─── Headline metric panel ─── */
.ced-side-panel--metric {
	background: linear-gradient(
		152deg,
		rgba(212, 255, 79, 0.10) 0%,
		var(--wp--preset--color--graphite) 50%
	);
	border-color: rgba(212, 255, 79, 0.25);
	gap: 0.4rem;
	box-shadow: 0 0 0 1px rgba(212, 255, 79, 0.06) inset;
}
.ced-side-panel__metric-value {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.5rem, 4vw, 3.5rem);
	font-weight: 300;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--wp--preset--color--lime);
	margin: 0.25rem 0 0;
}
.ced-side-panel__metric-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mist);
}

/* ─── Phase tracker panel ─── */
.ced-side-panel__phases {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
	counter-reset: phase;
}
.ced-side-panel__phases li {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.75rem;
	padding: 0.55rem 0.7rem;
	border-radius: var(--wp--custom--radius--md, 10px);
	background: rgba(5, 5, 7, 0.35);
	border: 1px solid rgba(232, 229, 222, 0.06);
	transition:
		background 320ms var(--ease-smooth),
		border-color 320ms var(--ease-smooth),
		transform 320ms var(--ease-smooth);
}
.ced-side-panel__phase-num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--fog);
	min-width: 1.5em;
}
.ced-side-panel__phase-bar {
	position: relative;
	height: 2px;
	border-radius: 999px;
	background: rgba(232, 229, 222, 0.10);
	overflow: hidden;
}
.ced-side-panel__phase-bar::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: scaleX(0);
	transform-origin: left center;
	background: currentColor;
	transition: transform 480ms var(--ease-smooth);
}
.ced-side-panel__phase-name {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--mist);
}

/* Active phase — set by JS (view.js) when the matching deck card
   is in the centred viewport region. Per-phase color picked up
   from the same --tone variables used by the deck cards. */
.ced-side-panel__phases li[data-phase-target="problem"]  { color: rgb(248, 113, 113); }
.ced-side-panel__phases li[data-phase-target="approach"] { color: rgb(96, 165, 250); }
.ced-side-panel__phases li[data-phase-target="result"]   { color: rgb(212, 255, 79); }

.ced-side-panel__phases li.is-active {
	background: rgba(5, 5, 7, 0.6);
	border-color: currentColor;
	transform: translateX(2px);
}
.ced-side-panel__phases li.is-active .ced-side-panel__phase-num,
.ced-side-panel__phases li.is-active .ced-side-panel__phase-name {
	color: currentColor;
}
.ced-side-panel__phases li.is-active .ced-side-panel__phase-bar::after {
	transform: scaleX(1);
}
.ced-side-panel__phases li.is-passed {
	opacity: 0.5;
}
.ced-side-panel__phases li.is-passed .ced-side-panel__phase-bar::after {
	transform: scaleX(1);
}

/* ─── Reduced motion / no-sticky fallback ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.ced-deck__card {
		animation: none;
		position: static;
		opacity: 1;
		transform: none;
	}
}

/* On phone, drop sticky stacking — the deck reads as a normal
   stack of cards, each animating in on entry. */
@media (max-width: 720px) {
	.ced-deck__card {
		position: static;
		min-height: auto;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto;
		grid-template-areas:
			"num"
			"head"
			"body"
			"foot";
		gap: 0.85rem;
	}
	.ced-deck__num {
		justify-self: start;
		align-self: start;
		font-size: clamp(3.5rem, 16vw, 5.5rem);
		margin: 0 0 -0.25rem;
	}
}

@media (max-width: 640px) {
	.ced-project-summary__title { font-size: clamp(1.6rem, 7vw, 2.25rem); }
	.ced-deck__card { padding: 1.5rem; }
	.ced-deck__body { font-size: 0.95rem; }
}