/* =========================================================================
   SUMBRA — Project Detail (Casa Ita Surf reference implementation)
   Reuses all Phase 1/2.1 tokens and components. Deliberately more
   photographic/immersive than the Solution page — the hero uses a full
   image with overlaid text (flat scrim, same technique already approved
   on the homepage's Solutions tiles) rather than a split two-column hero.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Hero — immersive photo, overlaid text, restrained metadata bar below.
   ------------------------------------------------------------------------- */
.sumbra-proj-hero__media {
	position: relative;
	/* 5.4.4: the text block is IN FLOW (a one-cell grid), so real content sets
	   the height. The old fixed aspect-ratio + max-height box with an
	   absolutely-positioned text block clipped the eyebrow and the start of
	   the H1 whenever the text was taller than the box (e.g. 394px text in a
	   288px box at 1440px). min-height keeps the previous visual proportion
	   (~5:1 = 20vw, floor 220px, cap 400px) as a MINIMUM only; text may grow
	   the hero beyond it. No aspect-ratio here, so no min-content widening. */
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
	width: 100%;
	min-height: clamp(220px, 20vw, 400px);
	overflow: hidden;
}
.sumbra-proj-hero__media .sumbra-media__img,
.sumbra-proj-hero__media .sumbra-placeholder,
.sumbra-proj-hero__media .sumbra-temp-photo {
	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto;
}
/* Flat single-colour scrim (not a gradient) for text legibility — same
   technique already used and approved on the homepage's Solutions tiles.
   Kept deliberately light so the photograph still dominates. */
.sumbra-proj-hero__scrim {
	position: absolute;
	inset: 0;
	background: var(--sumbra-carbon);
	opacity: 0.28;
	z-index: 1;
}
.sumbra-proj-hero__text {
	position: relative;
	z-index: 2;
	grid-area: 1 / 1;
	min-width: 0;
	/* Vertical padding only: the horizontal inset now comes from the shared
	   .sumbra-container (same x as every other section's content edge). */
	padding-block: 48px 40px;
}
.sumbra-proj-hero__text .sumbra-eyebrow--light { margin-bottom: var(--sumbra-space-xs); }
.sumbra-proj-hero__text .sumbra-h1--light { max-width: 14ch; margin-bottom: var(--sumbra-space-sm); }
.sumbra-proj-hero__thesis {
	color: var(--sumbra-marfil);
	max-width: 46ch;
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.55;
	margin: 0;
}
.sumbra-proj-hero__meta-bar { background-color: var(--sumbra-carbon); }
.sumbra-proj-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sumbra-space-sm) var(--sumbra-space-md);
	padding-block: var(--sumbra-space-xs);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sumbra-lino);
}
@media (max-width: 700px) {
	.sumbra-proj-hero__media { min-height: 58vh; }
	.sumbra-proj-hero__text { padding-block: 32px 28px; }
}

/* -------------------------------------------------------------------------
   La situación / Resultado — a held editorial statement (lede), not a
   two-column layout. Photography carries most of the section's weight.
   ------------------------------------------------------------------------- */
.sumbra-proj-situation__lede {
	font-family: var(--sumbra-font-display);
	font-weight: 500;
	font-style: normal;
	font-size: 1.9rem;
	font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem);
	line-height: 1.35;
	color: var(--sumbra-carbon);
	max-width: 46ch;
	margin: 0;
}
.sumbra-proj-situation__text { font-size: 1rem; line-height: 1.6; color: var(--sumbra-piedra); max-width: 52ch; margin: var(--sumbra-space-sm) 0 0; } /* 5.9.24 */
.sumbra-proj-result__media { margin-bottom: var(--sumbra-space-lg); }
.sumbra-proj-result__media .sumbra-media__img,
.sumbra-proj-result__media .sumbra-placeholder,
.sumbra-proj-result__media .sumbra-temp-photo { aspect-ratio: 16/9; }
.sumbra-proj-result__main {
	font-family: var(--sumbra-font-display);
	font-weight: 500;
	font-style: normal;
	font-size: 1.9rem;
	font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem);
	line-height: 1.35;
	color: var(--sumbra-carbon);
	max-width: 46ch;
	margin: 0 0 var(--sumbra-space-sm);
}
.sumbra-proj-result__supporting {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--sumbra-piedra);
	max-width: 52ch;
	margin: 0;
}

/* -------------------------------------------------------------------------
   Lo que vimos — Carbón interruption (same device as Materials/POV
   elsewhere on the site — a held dark moment, not a generic dark section).
   ------------------------------------------------------------------------- */
.sumbra-proj-observation { background-color: var(--sumbra-carbon); padding-block: 56px; }
.sumbra-proj-observation__inner { max-width: 760px; }
.sumbra-proj-observation__inner .sumbra-h2 { margin-bottom: 0; font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.6rem); line-height: 1.2; } /* 5.9.24: a held statement, not a paragraph in headline type */
.sumbra-proj-observation__text { color: var(--sumbra-lino); font-size: 1.05rem; line-height: 1.65; max-width: 58ch; margin: var(--sumbra-space-sm) 0 0; }
.sumbra-proj-observation__text:first-of-type { margin-top: var(--sumbra-space-md); }
@media (max-width: 700px) {
	.sumbra-proj-observation { padding-block: var(--sumbra-space-lg); }
}

/* -------------------------------------------------------------------------
   La decisión
   ------------------------------------------------------------------------- */
.sumbra-proj-decision__grid {
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	gap: var(--sumbra-space-xl);
	align-items: start;
}
.sumbra-proj-decision__copy { padding-top: var(--sumbra-space-lg); }
.sumbra-proj-decision__copy .sumbra-h2 { max-width: 14ch; }
.sumbra-proj-decision__media .sumbra-media__img,
.sumbra-proj-decision__media .sumbra-placeholder,
.sumbra-proj-decision__media .sumbra-temp-photo { aspect-ratio: 3/4; }
.sumbra-proj-decision__media .sumbra-media__img { width: 100%; height: auto; object-fit: cover; display: block; } /* 5.9.25 */
@media (max-width: 900px) {
	.sumbra-proj-decision__grid { grid-template-columns: 1fr; gap: var(--sumbra-space-md); }
	.sumbra-proj-decision__copy { padding-top: 0; }
}

/* -------------------------------------------------------------------------
   Detalles — quiet, restrained list. Not a specification table.
   ------------------------------------------------------------------------- */
.sumbra-proj-details__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--sumbra-space-md) var(--sumbra-space-lg);
	max-width: 980px;
}
.sumbra-proj-details__list li {
	padding-bottom: var(--sumbra-space-sm);
	border-bottom: 1px solid var(--sumbra-lino);
}
.sumbra-proj-details__label {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sumbra-piedra);
	margin-bottom: 4px;
}
.sumbra-proj-details__value {
	display: block;
	font-size: 1.05rem;
	color: var(--sumbra-carbon);
}

/* -------------------------------------------------------------------------
   Galería — editorial sequence, count-driven. Wide items span the full
   row; others sit two-up. No fixed thumbnail grid.
   ------------------------------------------------------------------------- */
.sumbra-proj-gallery__single .sumbra-media__img { width: 100%; height: auto; display: block; }
.sumbra-proj-gallery__pair {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--sumbra-space-md);
	align-items: start;
}
.sumbra-proj-gallery__pair .sumbra-media__img { width: 100%; height: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.sumbra-proj-gallery__sequence {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sumbra-space-md) var(--sumbra-space-md);
	align-items: start;
}
.sumbra-proj-gallery__item--wide { grid-column: 1 / -1; margin-block: var(--sumbra-space-md); }
.sumbra-proj-gallery__item .sumbra-media__img { width: 100%; height: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.sumbra-proj-gallery__item--wide .sumbra-media__img { aspect-ratio: 16/9; object-fit: cover; height: 100%; }
@media (max-width: 700px) {
	.sumbra-proj-gallery__pair { grid-template-columns: 1fr; }
	.sumbra-proj-gallery__sequence { grid-template-columns: 1fr; }
    /* 5.9.58: wide item already gets the grid gap; extra margin made 64px gaps when stacked */
    .sumbra-proj-gallery__item--wide { margin-block: 0; }
}

/* -------------------------------------------------------------------------
   Relacionado
   ------------------------------------------------------------------------- */
.sumbra-proj-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--sumbra-space-xl);
}
.sumbra-proj-related__list { display: flex; flex-direction: column; gap: var(--sumbra-space-sm); }

/* Related Solutions / Ideas titles are real, owner-editable article titles.
   .sumbra-link-arrow is nowrap above 900px, so a title like "Cómo aprovechar
   la luz natural sin sacrificar confort" (≈500px) overflowed its ~458px column
   at 901–1100px, pushing the arrow off-screen. These links now wrap INSIDE
   their column; a title that fits stays on one line exactly as before.
   They are inline-block (not inline-flex) so that, when the label wraps, the
   arrow follows the last word instead of being stranded at the column's far
   edge; the template joins the last word and the arrow with a word joiner (and
   the arrow is plain inline text) so it can never sit alone on a line. Same pattern for the conversion
   bridge link, whose label is also owner-editable. */
.sumbra-proj-related__grid > *,
.sumbra-proj-related__list li { min-width: 0; }
.sumbra-proj-related .sumbra-link-arrow,
.sumbra-proj-bridge .sumbra-link-arrow {
	display: inline-block;
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;   /* a very long single word may break instead of overflowing */
	text-align: left;
}
/* The arrow is plain inline text here (an inline-block is an atomic inline, which
   Chromium may separate from the preceding word even with a word joiner). Inline
   elements ignore transform, so the hover nudge uses a relative offset instead. */
.sumbra-proj-related .sumbra-link-arrow > span,
.sumbra-proj-bridge .sumbra-link-arrow > span {
	display: inline;
	margin-left: 6px;
	position: relative;
	left: 0;
	transition: left var(--sumbra-transition);
}
.sumbra-proj-related .sumbra-link-arrow:hover > span,
.sumbra-proj-bridge .sumbra-link-arrow:hover > span { transform: none; left: 3px; }

/* -------------------------------------------------------------------------
   Conversion bridge — identical restrained treatment to the Solution
   page's bridge.
   ------------------------------------------------------------------------- */
.sumbra-proj-bridge { padding-block: 40px; }
.sumbra-proj-bridge__inner {
	padding-top: var(--sumbra-space-md);
	border-top: 1px solid var(--sumbra-lino);
	display: flex;
	flex-direction: column;
	gap: var(--sumbra-space-sm);
	max-width: 640px;
}
.sumbra-proj-bridge__inner p {
	margin: 0;
	color: var(--sumbra-carbon);
	font-family: var(--sumbra-font-display);
	font-size: 1.35rem;
	line-height: 1.35;
}

/* -------------------------------------------------------------------------
   Lo aprendido (5.9.24) — quiet editorial aside: eyebrow in the left
   column, one short statement and a supporting line on the right, an
   optional italic closing aside. Deliberately smaller than Resultado.
   ------------------------------------------------------------------------- */
.sumbra-proj-lesson { padding-top: 0; }
.sumbra-proj-lesson__inner {
	display: grid;
	grid-template-columns: minmax(150px, 1fr) 3fr;
	gap: var(--sumbra-space-lg);
	max-width: 980px;
	border-top: 1px solid var(--sumbra-lino);
	padding-top: var(--sumbra-space-md);
}
.sumbra-proj-lesson__inner .sumbra-eyebrow { margin: 6px 0 0; }
.sumbra-proj-lesson__main {
	font-family: var(--sumbra-font-display);
	font-weight: 500;
	font-style: normal;
	font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
	line-height: 1.3;
	color: var(--sumbra-carbon);
	max-width: 36ch;
	margin: 0 0 var(--sumbra-space-sm);
}
.sumbra-proj-lesson__text { font-size: 1rem; line-height: 1.6; color: var(--sumbra-piedra); max-width: 52ch; margin: 0 0 var(--sumbra-space-sm); }
.sumbra-proj-lesson__text:last-child { margin-bottom: 0; }
.sumbra-proj-lesson__note { font-size: 0.95rem; font-style: italic; line-height: 1.6; color: var(--sumbra-piedra); max-width: 52ch; margin: var(--sumbra-space-md) 0 0; }
@media (max-width: 700px) {
	.sumbra-proj-lesson__inner { grid-template-columns: 1fr; gap: var(--sumbra-space-xs); }
	.sumbra-proj-lesson__inner .sumbra-eyebrow { margin-top: 0; }
}

/* =========================================================================
   5.9.28 — Compact project layout (opt-in via _sumbra_layout = "compact").
   Used for projects with a portrait lead photo, a short video and small
   stills. Nothing here applies to the standard project layout.
   ========================================================================= */
.sumbra-proj-hero--compact { padding-top: var(--sumbra-space-hero-top); }
.sumbra-proj-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
	gap: var(--sumbra-space-xl);
	align-items: center;
	padding-bottom: var(--sumbra-space-lg);
}
.sumbra-proj-intro__copy .sumbra-h1 { max-width: 12ch; margin-bottom: var(--sumbra-space-sm); }
.sumbra-proj-intro__thesis {
	max-width: 34ch;
	font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);
	line-height: 1.5;
	margin: 0;
	color: var(--sumbra-carbon);
}
.sumbra-proj-intro__media { margin: 0; position: relative; }
.sumbra-proj-intro__media .sumbra-media__img { display: block; width: 100%; height: auto; }

.sumbra-proj-evidence__grid {
	display: grid;
	grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
	gap: var(--sumbra-space-lg);
	align-items: start;
}
.sumbra-proj-video, .sumbra-proj-still { margin: 0; }
.sumbra-proj-video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 480 / 848;
	background: var(--sumbra-carbon);
}
.sumbra-proj-stills { display: flex; flex-wrap: wrap; gap: var(--sumbra-space-md); align-items: flex-start; }
.sumbra-proj-still { width: min(100%, 280px); }
.sumbra-proj-still .sumbra-media__img { display: block; width: 100%; height: auto; }
.sumbra-proj-video figcaption, .sumbra-proj-still figcaption {
	margin-top: var(--sumbra-space-2xs);
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--sumbra-piedra);
}
.sumbra-proj-decision__grid--solo { grid-template-columns: minmax(0, 1fr); }
.sumbra-proj-decision__grid--solo .sumbra-proj-decision__copy { padding-top: 0; max-width: 62ch; }
.sumbra-proj-decision__grid--solo .sumbra-proj-decision__copy .sumbra-h2 { max-width: 20ch; }

@media (max-width: 900px) {
	.sumbra-proj-intro { grid-template-columns: minmax(0, 1fr); gap: var(--sumbra-space-md); }
	.sumbra-proj-intro__media { max-width: 340px; }
	.sumbra-proj-evidence__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sumbra-space-md); }
	.sumbra-proj-video { max-width: 360px; }
}

/* =========================================================================
   5.9.29 — Compact layout, video + exactly ONE still (class added in PHP only
   for that case). Centres the 360px + 280px pair with a 64px gap and aligns
   the eyebrow with the pair's left edge. Other image counts and the standard
   layout are untouched.
   ========================================================================= */
.sumbra-proj-evidence--solo-still > .sumbra-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.sumbra-proj-evidence--solo-still .sumbra-eyebrow,
.sumbra-proj-evidence--solo-still .sumbra-proj-evidence__grid {
	width: 704px; /* 360 + 64 + 280 */
	max-width: 100%;
}
.sumbra-proj-evidence--solo-still .sumbra-proj-evidence__grid {
	grid-template-columns: minmax(0, 360px) minmax(0, 280px);
	gap: 64px;
}
@media (max-width: 900px) {
	.sumbra-proj-evidence--solo-still > .sumbra-container { display: block; }
	.sumbra-proj-evidence--solo-still .sumbra-eyebrow,
	.sumbra-proj-evidence--solo-still .sumbra-proj-evidence__grid { width: auto; }
	.sumbra-proj-evidence--solo-still .sumbra-proj-evidence__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sumbra-space-md);
	}
	.sumbra-proj-evidence--solo-still .sumbra-proj-video { max-width: min(100%, 360px); }
	.sumbra-proj-evidence--solo-still .sumbra-proj-still { max-width: min(100%, 280px); }
}

/* =========================================================================
   5.9.33 — "compact-centered" (opt-in via _sumbra_layout = "compact-centered").
   1. Intro: text + full portrait as ONE bounded, centred group (max 960px,
      flexible text column, 330px portrait, 56px gap). Text stays left-aligned
      and vertically centred beside the uncropped portrait.
   2. Operation: only the silent video, centred, 320px wide on desktop;
      "En funcionamiento" shares the video's left edge.
   Nothing here applies to the standard or the plain "compact" layouts.
   ========================================================================= */
.sumbra-proj-intro--centered {
	max-width: calc(960px + 2 * var(--sumbra-gutter));
	grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
	gap: 56px;
	align-items: center;
	justify-content: center;
}
.sumbra-proj-intro--centered .sumbra-proj-intro__copy .sumbra-h1 {
	max-width: none;
	font-size: clamp(2.25rem, 1.35rem + 2.6vw, 3.5rem);
	line-height: 1.08;
	text-wrap: balance;
}
.sumbra-proj-intro--centered .sumbra-proj-intro__thesis {
	max-width: 38ch;
	text-wrap: pretty;
}
.sumbra-proj-evidence--video-only > .sumbra-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.sumbra-proj-evidence--video-only .sumbra-eyebrow,
.sumbra-proj-evidence--video-only .sumbra-proj-evidence__grid {
	width: 320px;
	max-width: 100%;
}
.sumbra-proj-evidence--video-only .sumbra-proj-evidence__grid {
	grid-template-columns: minmax(0, 1fr);
}
.sumbra-proj-evidence--video-only .sumbra-proj-video { max-width: 100%; }
@media (max-width: 900px) {
	.sumbra-proj-intro--centered {
		max-width: none;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sumbra-space-md);
	}
	.sumbra-proj-intro--centered .sumbra-proj-intro__media { max-width: min(100%, 330px); }
	.sumbra-proj-intro--centered .sumbra-proj-intro__copy .sumbra-h1 { text-wrap: wrap; }
	.sumbra-proj-evidence--video-only > .sumbra-container { display: block; }
	.sumbra-proj-evidence--video-only .sumbra-eyebrow,
	.sumbra-proj-evidence--video-only .sumbra-proj-evidence__grid { width: auto; max-width: min(100%, 320px); }
}

/* 5.9.34 — "compact-centered", tablet widths only (601–900px): the stacked
   intro keeps its left-aligned text; the full portrait is centred in the
   available width. Phones (<=600px) and desktop (>900px) are unchanged. */
@media (min-width: 601px) and (max-width: 900px) {
	.sumbra-proj-intro--centered .sumbra-proj-intro__media { margin-inline: auto; }
}

/* 5.9.35 — "compact-centered", tablet widths only (601–900px): centre the whole
   video block (heading, video, caption) at 320px, matching the centred portrait.
   Heading and caption text stay left-aligned inside the block. Phones (<=600px)
   and desktop (>900px) are unchanged. */
@media (min-width: 601px) and (max-width: 900px) {
	.sumbra-proj-evidence--video-only > .sumbra-container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.sumbra-proj-evidence--video-only .sumbra-eyebrow,
	.sumbra-proj-evidence--video-only .sumbra-proj-evidence__grid {
		width: 320px;
		max-width: 100%;
	}
}


/* -------------------------------------------------------------------------
   5.9.36 — optional desktop banner (5:1). Only on .sumbra-proj-hero--banner.
   >1100px: <picture> serves the 5:1 banner; at/below 1100px it serves the 4:5
   portrait. Other projects never get this class.
   ------------------------------------------------------------------------- */
.sumbra-proj-hero--banner .sumbra-proj-hero__picture {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.sumbra-proj-hero--banner .sumbra-proj-hero__picture .sumbra-media__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
/* Tablet (701–1100): wide band of the portrait; keeps the rod and curtains. */
@media (min-width: 701px) and (max-width: 1100px) {
	.sumbra-proj-hero--banner .sumbra-proj-hero__media { aspect-ratio: 4 / 3; max-height: 560px; min-height: 0; }
	.sumbra-proj-hero--banner .sumbra-proj-hero__picture .sumbra-media__img { object-position: 50% 12%; }
}
/* Phone (≤700): the whole 4:5 portrait. */
@media (max-width: 700px) {
	.sumbra-proj-hero--banner .sumbra-proj-hero__media { aspect-ratio: 4 / 5; max-height: 640px; min-height: 0; }
}

/* 5.9.47 — later-loaded stylesheet re-set this label to 11.5px; match the 13px micro-label size. */
.sumbra-proj-details__label { font-size: 0.8125rem; }

/* =========================================================================
   5.9.53 — "story" project layout (opt-in via _sumbra_layout = "story").
   One centred 960px content column shared by every section, so the intro,
   story sections, video, photos and details all sit on the same edges.
   Nothing here applies to the standard or compact layouts.
   ========================================================================= */
.sumbra-project-detail--story .sumbra-container {
	max-width: calc(960px + 2 * var(--sumbra-gutter));
}
/* Intro: title + subtitle + complete portrait as one group, controlled gap. */
.sumbra-project-detail--story .sumbra-proj-intro {
	grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
	gap: 56px;
	align-items: center;
	padding-bottom: var(--sumbra-space-lg);
}
.sumbra-project-detail--story .sumbra-proj-intro__media { max-width: 360px; width: 100%; }
.sumbra-project-detail--story .sumbra-proj-intro__media .sumbra-media__img { width: 100%; height: auto; }
/* Copy + media rows (situation / decision / result). */
.sumbra-project-detail--story .sumbra-proj-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
	gap: 56px;
	align-items: start;
}
.sumbra-project-detail--story .sumbra-proj-split__media:empty { display: none; }
.sumbra-project-detail--story .sumbra-proj-decision__copy { padding-top: 0; }
.sumbra-project-detail--story .sumbra-proj-decision__copy .sumbra-h2 { max-width: 14ch; }
.sumbra-project-detail--story .sumbra-proj-split__copy > :last-child { margin-bottom: 0; }
/* Video at its native ratio, about 320px wide, left-aligned in the media rail. */
.sumbra-project-detail--story .sumbra-proj-video { max-width: 320px; width: 100%; margin: 0; }
.sumbra-project-detail--story .sumbra-proj-video video { width: 100%; height: auto; background: transparent; } /* ratio comes from the inline style (real video size) */
/* Photographs keep their own 4:3 proportions, no crop. */
.sumbra-project-detail--story .sumbra-proj-story-media { margin: 0; width: 100%; max-width: 400px; }
.sumbra-project-detail--story .sumbra-proj-story-media .sumbra-media__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; contain-intrinsic-size: none; object-fit: contain; } /* 5.9.54: explicit 4:3 (the photos are 4:3); `auto` let Chrome's lazy placeholder stretch it to 1500px */
.sumbra-project-detail--story .sumbra-proj-story-media figcaption {
	margin-top: var(--sumbra-space-2xs);
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--sumbra-piedra);
}
/* The dark section keeps its look; its inner container already takes the shared 960px column (5.9.55: do not override max-width here — it is also a .sumbra-container). */
.sumbra-project-detail--story .sumbra-proj-observation .sumbra-h2,
.sumbra-project-detail--story .sumbra-proj-observation__text { max-width: 760px; }
.sumbra-project-detail--story .sumbra-proj-details__list { max-width: none; }

@media (max-width: 900px) {
	.sumbra-project-detail--story .sumbra-proj-split { grid-template-columns: minmax(0, 1fr); gap: var(--sumbra-space-md); }
	.sumbra-project-detail--story .sumbra-proj-split__media { max-width: 400px; }
}
@media (max-width: 640px) {
	.sumbra-project-detail--story .sumbra-proj-intro { grid-template-columns: minmax(0, 1fr); gap: var(--sumbra-space-md); }
	.sumbra-project-detail--story .sumbra-proj-intro__media { max-width: 340px; }
}
@media (min-width: 641px) and (max-width: 900px) {
	.sumbra-project-detail--story .sumbra-proj-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 48px; }
}

/* 5.9.57 — decision text keeps its paragraphs; space between them. */
.sumbra-proj-decision__copy .sumbra-proj-decision__p + .sumbra-proj-decision__p { margin-top: var(--sumbra-space-sm); }