/* Tokens: change these, not individual components. */
:root {
	--ratio: 1.5;
	--s-1: calc(var(--s0) / var(--ratio));
	--s0: 1rem;
	--s1: calc(var(--s0) * var(--ratio));
	--s2: calc(var(--s1) * var(--ratio));
	--measure: 60ch;
	font-family: system-ui, sans-serif;
	line-height: 1.5;
}

/* Stack: vertical rhythm between siblings. */
.stack {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.stack > * {
	margin-block: 0;
}

.stack > * + * {
	margin-block-start: var(--space, var(--s1));
}

/* Center: a horizontally centered column of readable width. */
.center {
	box-sizing: content-box;
	max-inline-size: var(--measure);
	margin-inline: auto;
	padding-inline: var(--s0);
}

/* Cluster: wrapping inline group (nav links, tags, buttons). */
.cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space, var(--s0));
	justify-content: flex-start;
	align-items: center;
}