/* ============================================================
   LAYOUT UTILITIES — Flexbox + Grid only. No layout px.
   ============================================================ */

.container {
  width: min(82rem, calc(100% - var(--space-lg) * 2));
  margin-inline: auto;
}
.container--narrow {
  width: min(58rem, calc(100% - var(--space-lg) * 2));
  margin-inline: auto;
}
.container--wide {
  width: min(96rem, calc(100% - var(--space-md) * 2));
  margin-inline: auto;
}

.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }

.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.grid-asymmetric {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr));
  gap: var(--space-lg);
}

/* Generic measure for prose */
.measure { max-width: 62ch; }
.text-center { text-align: center; }