/* ==========================================================================
   Layout: container, 12-column grid, sections, dark media backgrounds.
   ========================================================================== */
.site-main { display: block; }

/* Content is 1600px max; backgrounds run full-bleed. */
.container {
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
}

.grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gap);
}

.section {
	position: relative;
	padding-block: var(--section-y);
}
.section--tight { padding-block: var(--section-y-tight); }
.section.tone-white + .section.tone-white { border-block-start: 1px solid var(--line-light); }
/* Two dark sections in a row keep a visible seam. */
.tone-dark + .tone-dark { border-block-start: 1px solid var(--line-dark); }

/* --------------------------------------------------------------------------
   Dark sections with a themed photo.
   Layers: photo (brand-toned) → indigo duotone → midnight/abyss gradient
   (stronger on the text side) → soft indigo "spotlight". Text stays AA on any photo.
   -------------------------------------------------------------------------- */
.has-media { isolation: isolate; overflow: hidden; }
.media-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--c-midnight);
}
.media-bg .msa-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: grayscale(0.1) contrast(1.05);
}
/* Indigo tint unifies different photos (light: the photos are shot in the brand palette). */
.media-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--c-indigo);
	mix-blend-mode: color;
	opacity: 0.2;
}
/* Darkening: 90% on the text side → 76% on the far side (override per section
   with --shade-dir / --shade-a|b|c, middle stop --shade-at), plus the spotlight. Small mist text needs ≥ 0.8. */
.media-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		radial-gradient(ellipse 55% 65% at var(--spot-x, 64%) var(--spot-y, 34%), rgb(27 21 69 / var(--spot-a, 0.35)) 0%, rgb(27 21 69 / 0) 70%),
		linear-gradient(var(--shade-dir, 90deg), rgb(5 4 26 / var(--shade-a, 0.9)) 0%, rgb(12 10 42 / var(--shade-b, 0.86)) var(--shade-at, 45%), rgb(12 10 42 / var(--shade-c, 0.76)) 100%);
}
/* Mobile: text spans the full width, so the shade is uniform and strong. */
@media (max-width: 767px) {
	.media-bg::after {
		background:
			radial-gradient(ellipse 90% 45% at 50% 20%, rgb(27 21 69 / 0.5) 0%, rgb(27 21 69 / 0) 70%),
			linear-gradient(180deg, rgb(12 10 42 / 0.84) 0%, rgb(5 4 26 / 0.9) 100%);
	}
	.media-bg .focus-left { object-position: 0% 50%; }
	.media-bg .focus-left-third { object-position: 30% 50%; }
	.media-bg .focus-center { object-position: 50% 50%; }
	.media-bg .focus-right-third { object-position: 70% 50%; }
	.media-bg .focus-right { object-position: 100% 50%; }
}

/* Placeholder or missing image → texture reads as a calm dark ground. */
.msa-img--empty {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #5e5b78 0 14px, #666381 14px 15px);
}

/* Framed images on light sections: proportions come from the container. */
.frame {
	position: relative;
	overflow: hidden;
	background: var(--c-porcelain);
}
.frame > .msa-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Stack helpers */
.stack > * + * { margin-block-start: var(--stack, var(--s-3)); }