@layer primitives {
  /* Constrained content width with side padding */
  .container {
    --container-max: var(--layout-wide-size, 1200px);
    --container-padding: var(--space-md, 1rem);
    width: min(100% - (var(--container-padding) * 2), var(--container-max));
    margin-inline: auto;
  }

  /* Vertical section rhythm */
  .section {
    padding-block: var(--space-3xl, 3rem);
  }

  /* Vertical stack — flex column with consistent gap */
  .stack {
    --stack-gap: var(--space-md, 1rem);
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
  }

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

  /* Horizontal cluster — flex wrap for groups of items */
  .cluster {
    --cluster-gap: var(--space-sm, 0.75rem);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap);
  }

  /* Auto-fit grid — intrinsically responsive */
  .grid {
    --grid-min: 250px;
    --grid-gap: var(--space-md, 1rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min), 100%), 1fr));
    gap: var(--grid-gap);
  }
}