/*!
 * Archivo del Desierto — layout primitives
 *
 * Deliberately flexbox-first. The previous build hit a reproducible fault where CSS Grid
 * containers rendered an empty leading track inside this site's wrappers; every layout that
 * must not break is expressed with flex, and grid is used only where a genuine two-dimensional
 * relationship exists and has been verified in the browser.
 */

@layer layout {

	/* ── Shells ─────────────────────────────────────────────────────────── */

	.shell {
		width: 100%;
		max-width: var(--width-content);
		margin-inline: auto;
		padding-inline: var(--space-gutter);
	}

	.shell--text {
		max-width: var(--width-text);
	}

	.shell--wide {
		max-width: var(--width-wide);
	}

	.shell--full {
		max-width: var(--width-full);
	}

	/* Break out of the shell to the full viewport without a wrapper element. */
	.bleed {
		width: 100vw;
		max-width: 100vw;
		margin-left: 50%;
		translate: -50% 0;
	}

	/* ── Vertical rhythm ────────────────────────────────────────────────── */

	.section {
		position: relative;
		padding-block: var(--space-section);
	}

	.section--tight {
		padding-block: clamp(2.5rem, 6vw, 5rem);
	}

	.section--alt {
		background-color: var(--surface-alt);
	}

	.section--dark {
		background-color: var(--color-night);
		color: var(--on-dark);
	}

	.section--dark h1,
	.section--dark h2,
	.section--dark h3,
	.section--dark h4 {
		color: var(--color-paper);
	}

	/* A hairline of sand between consecutive light sections: a rule, not a colour jump. */
	.section + .section:not(.section--dark)::before {
		content: "";
		position: absolute;
		inset-block-start: 0;
		inset-inline: 0;
		height: 1px;
		background: linear-gradient(
			90deg,
			transparent,
			color-mix(in oklab, var(--color-sand-dark) 70%, transparent) 18%,
			color-mix(in oklab, var(--color-sand-dark) 70%, transparent) 82%,
			transparent
		);
	}

	/* ── Prose column ───────────────────────────────────────────────────── */

	.prose {
		max-width: var(--measure);
		font-size: var(--text-lg);
		line-height: var(--leading-relaxed);
		color: var(--color-charcoal);
	}

	.prose--narrow {
		max-width: var(--measure-narrow);
	}

	/* The opening paragraph of a prose column, set one step larger so the eye has somewhere
	   to land. Used where the first sentence is doing the work of a standfirst. */
	.prose__lead {
		font-size: var(--text-xl);
		line-height: var(--leading-normal);
		color: var(--color-ink);
	}

	.prose > * + * {
		margin-top: 1.15em;
	}

	.prose h2,
	.prose h3 {
		margin-top: 1.8em;
		color: var(--color-ink);
	}

	.prose a {
		/* --accent-text, not --accent-deep: the deep tone drops to 4.15:1 on the warm paper
		   surface, and prose links appear on both surfaces. */
		color: var(--accent-text);
	}

	/* ── Flow ───────────────────────────────────────────────────────────── */

	.flow > * + * {
		margin-top: var(--flow, var(--space-m));
	}

	.stack {
		display: flex;
		flex-direction: column;
		gap: var(--stack-gap, var(--space-m));
	}

	.cluster {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--cluster-gap, var(--space-s));
	}

	/* ── Split: text beside an object ───────────────────────────────────── */

	.split {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: clamp(2rem, 5vw, 4.5rem);
	}

	.split__body {
		flex: 1 1 22rem;
		min-width: 0;
	}

	.split__object {
		flex: 0 1 20rem;
		min-width: 0;
	}

	.split--reverse {
		flex-direction: row-reverse;
	}

	/* The aside is a caption to the opening paragraph, not a counterweight to the whole
	   column, so it aligns to the top rather than to the optical centre. */
	.split--top {
		align-items: flex-start;
	}

	@media (max-width: 47.99em) {
		.split,
		.split--reverse {
			flex-direction: column;
			align-items: stretch;
		}
	}
}