/**
 * Page scaffolding: the centred container, section rhythm, section headings.
 */

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

.sk-section {
	padding-block: var(--sk-section-y);
}

.sk-section--alt {
	background: var(--sk-bg-alt);
}

/* Sumi panel: dark ground, light type. */
.sk-section--sumi {
	background: var(--sk-sumi);
}

.sk-section--sumi h2,
.sk-section--sumi h3 {
	color: #fff;
}

.sk-section--sumi p {
	color: var(--sk-on-dark);
}

.sk-section--sumi .sk-eyebrow {
	color: var(--sk-kin);
}

.sk-section-head {
	max-width: 640px;
	margin: 0 auto 48px;
	text-align: center;
}

.sk-section-head p {
	margin-top: 14px;
	color: var(--sk-text-dim);
}

/*
 * Restated after .sk-section-head, not before it. Both selectors carry the same
 * specificity, so source order decides — and the dim grey meant for a light
 * ground was winning on the dark panels at 3.19:1.
 */
.sk-section--sumi .sk-section-head p {
	color: var(--sk-on-dark);
}

.sk-eyebrow {
	display: block;
	margin-bottom: 10px;
	color: var(--sk-kin-text);
	font-size: var(--sk-text-sm);
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* Grids. Auto-fit means one breakpoint set instead of three. */
.sk-grid {
	display: grid;
	gap: 22px;
}

.sk-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.sk-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.sk-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* --- Card grids --------------------------------------------------------- */

/*
 * Card lists keep `minmax(min(100%, Npx), 1fr)` for their columns, and cap the
 * card itself rather than the track.
 *
 * `1fr` alone looks right until a list has one item in it — the single track
 * takes the full width and a lone dojo card stretches across the page with a
 * half-metre-tall photo placeholder. But capping the *track* instead is worse:
 * grid derives its auto-fit repetition count from the track's max, so a 400px
 * cap silently drops three cards to two columns. Hence max-width on the card,
 * with justify-self to centre it when it is alone.
 */