/* ============================================================
   Maguska — layout primitives
   ============================================================ */

.container {
	width: min(100% - 2.5rem, var(--container));
	margin-inline: auto;
}
.container--narrow { --container: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--sand { background: var(--sand); }
.section--paper { background: var(--paper); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink h1,
.section--ink h2,
.section--ink h3,
.section--ink h4 { color: var(--paper); }
.section--ink a { color: var(--paper); }

.section__head { max-width: 54ch; margin-bottom: var(--space-xl); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__title { margin-bottom: 0.35em; }
.section__intro { color: var(--muted); font-size: 1.1rem; }
.section--ink .section__intro { color: var(--muted-on-ink); }

/* Header row that keeps a title left and a link right */
.section__bar {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 1rem; flex-wrap: wrap; margin-bottom: var(--space-xl);
}

.grid { display: grid; gap: var(--space-lg); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.stack > * + * { margin-top: var(--space-md); }

.lede {
	font-size: 1.2rem;
	line-height: 1.55;
	color: var(--muted);
	max-width: 60ch;
}

.prose { max-width: var(--container-narrow); }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3 { margin-top: 1.6em; }

.measure { max-width: 66ch; }