/* ========================
   COMPOSITIONS — Layout primitives
   ======================== */

/* centred content column */
.wrapper {
    max-inline-size: 1180px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* a page section: vertical rhythm + positioning context */
.region {
    position: relative;
    padding-block: var(--region-space);
}

/* even rhythm between stacked flow elements */
.flow > * + * {
    margin-top: var(--flow-space, 1em);
}

/* space-between row that wraps gracefully */
.repel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

/* inline group that wraps on a shared baseline */
.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 14px;
}