/* 03-layout.css — containers, grid, rhythm, a few spacing utilities. */

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

.wrap--narrow {
	max-width: 780px;
}

.rule {
	border: 0;
	border-top: var(--border);
}

/* 12-col grid used for editorial layout; items opt into spans. */
.grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gutter);
}

@media (min-width: 64rem) {
	.grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: clamp(1rem, 2vw, 2rem);
	}
}

.col-full   { grid-column: 1 / -1; }
.col-left    { grid-column: 1 / -1; }

@media (min-width: 64rem) {
	.col-1-7  { grid-column: 1 / 8; }
	.col-1-6  { grid-column: 1 / 7; }
	.col-2-8  { grid-column: 2 / 9; }
	.col-3-9  { grid-column: 3 / 10; }
	.col-7-12 { grid-column: 7 / 13; }
	.col-8-12 { grid-column: 8 / 13; }
	.col-6-12 { grid-column: 6 / 13; }
}

/* Section rhythm — padding varies on purpose, set per section. */
.section {
	padding-block: var(--s-6);
}

.section--tight   { padding-block: var(--s-5); }
.section--roomy   { padding-block: var(--s-7); }
.section--breathe { padding-block: var(--s-8); }
.section--edge    { padding-block: var(--s-4); }

.section__head {
	margin-bottom: var(--s-5);
}

.section__head--split {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-4);
	border-bottom: var(--border);
	padding-bottom: var(--s-3);
}

.section__num {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	color: var(--accent);
	letter-spacing: 0.08em;
}

.section-title {
	font-size: var(--step-2);
}

/* Inverted band */
.band {
	background: var(--ink);
	color: var(--paper);
}

.band a {
	color: var(--paper);
}

.band a:hover {
	color: var(--mustard);
}

.band .meta,
.band .eyebrow {
	color: color-mix(in srgb, var(--paper) 70%, transparent);
}

.bleed-right {
	width: calc(100% + var(--gutter));
	max-width: none;
}