/* ============================================================
   Layout primitives — container, grid utilities
   ============================================================ */

.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.container-narrow {
	max-width: var(--article-max);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.grid {
	display: grid;
	gap: var(--space-5);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.grid-hero {
	grid-template-columns: 1.6fr 1fr;
	gap: var(--space-7);
}

.grid-sidebar {
	grid-template-columns: 2fr 1fr;
	gap: var(--space-7);
}

.stack { display: flex; flex-direction: column; gap: var(--space-5); }
.row   { display: flex; align-items: center; gap: var(--space-3); }

.section-rule {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin: var(--space-5) 0 var(--space-4);
}
.section-rule-line { flex: 1; height: 1px; background: var(--ink); }
.section-rule-label {
	font-family: var(--font-ui);
	font-size: var(--text-base);
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ink);
}
.section-rule-link {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	letter-spacing: 0.5px;
	color: var(--brand);
	font-weight: 500;
}

@media (max-width: 900px) {
	.grid-hero,
	.grid-sidebar,
	.grid-2,
	.grid-3 { grid-template-columns: 1fr; }
	.grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.grid-4 { grid-template-columns: 1fr; }
}