/* =====================================================================
   COMPOSITION — layout primitives, content-agnostic
   ===================================================================== */

/* horizontal page frame */
.wrapper {
  width: min(100% - (var(--gutter) * 2), var(--wrapper));
  margin-inline: auto;
}
.wrapper--wide { --wrapper: 80rem; }

/* vertical rhythm between page regions */
.region { padding-block: var(--space-xl); }
.region--tight { padding-block: var(--space-l); }
.region--flush-top { padding-block-start: 0; }

/* flow — owl selector, vertical rhythm inside prose */
.flow > * + * { margin-block-start: var(--flow-space, 1em); }

/* stack — flex column with explicit gap */
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-s)); }

/* cluster — wrapping inline row */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, 1rem);
}

/* repel — push two groups apart */
.repel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--repel-gap, 1rem);
}

/* auto-grid — equal cards, responsive without breakpoints */
.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-m));
  grid-template-columns: repeat(var(--grid-cols, auto-fit), minmax(var(--grid-min, 15rem), 1fr));
}

/* sidebar — content + media that collapses gracefully */
.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--with-sidebar-gap, var(--space-l));
  align-items: var(--with-sidebar-align, center);
}
.with-sidebar > .with-sidebar__bar {
  flex-basis: var(--sidebar-width, 26rem);
  flex-grow: 1;
}
.with-sidebar > .with-sidebar__main {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--sidebar-content-min, 52%);
}

/* center a single measure of text */
.center { box-sizing: content-box; max-inline-size: var(--measure); margin-inline: auto; }