/**
 * TAF 2026 — layout primitives
 * Prefer these shells before inventing page-specific wrappers.
 */

.container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--taf-page-max);
	margin-inline: auto;
	padding-inline: var(--taf-gutter);
}

.content-area {
	width: min(100% - (var(--taf-gutter) * 2), var(--taf-page-max));
	margin-inline: auto;
	padding-block: var(--taf-section-pad);
}

.content-wide {
	width: 100%;
	max-width: var(--taf-content-wide);
}

.content-narrow {
	width: 100%;
	max-width: var(--taf-content-narrow);
}

.stack {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.stack--section {
	gap: var(--taf-gutter-section);
}

.stack--cards {
	gap: var(--taf-gutter-cards);
}

.stack--ui {
	gap: var(--taf-gutter-ui);
}

.cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--taf-gutter-ui);
}

.section {
	padding-block: var(--taf-section-pad);
	padding-inline: 0;
}

.section--border {
	border-bottom: 1px solid var(--color-border);
}