@layer primitives {
  /* Stack: vertical spacing between siblings. Override with --space inline. */
  .stack { display: flex; flex-direction: column; justify-content: flex-start; }
  .stack > * { margin-block: 0; }
  .stack > * + * { margin-block-start: var(--space, var(--space-md)); }

  /* Cluster: flex-wrap row with consistent gap. */
  .cluster { display: flex; flex-wrap: wrap; gap: var(--space, var(--space-sm)); align-items: var(--align, center); justify-content: var(--justify, flex-start); }

  /* Auto grid: fills with min(--min) sized columns. */
  .grid-auto { display: grid; gap: var(--space, var(--space-md)); grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 16rem), 100%), 1fr)); }

  /* Center: max-inline-size + auto margins + symmetric padding. */
  .center { box-sizing: content-box; max-inline-size: var(--max, 60ch); margin-inline: auto; padding-inline: var(--gutter, var(--space-md)); }

  /* Sidebar layout: side beside main; wraps under at threshold. */
  .sidebar { display: flex; flex-wrap: wrap; gap: var(--space, var(--space-md)); }
  .sidebar > :first-child { flex-basis: var(--side-width, 16rem); flex-grow: 1; }
  .sidebar > :last-child { flex-basis: 0; flex-grow: 999; min-inline-size: var(--side-content-min, 50%); }

  /* Switcher: switches from row to column when too narrow. */
  .switcher { display: flex; flex-wrap: wrap; gap: var(--space, var(--space-md)); }
  .switcher > * { flex-grow: 1; flex-basis: calc((var(--threshold, 30rem) - 100%) * 999); }

  /* Cover: vertical centering with min-height. */
  .cover { display: flex; flex-direction: column; min-block-size: var(--min-height, 100vh); padding: var(--space, var(--space-md)); }
  .cover > * { margin-block: var(--space, var(--space-md)); }
  .cover > :first-child:not(.cover-centered) { margin-block-start: 0; }
  .cover > :last-child:not(.cover-centered) { margin-block-end: 0; }
  .cover > .cover-centered { margin-block: auto; }

  /* Frame: aspect-ratio container. */
  .frame { aspect-ratio: var(--ratio, 16 / 9); overflow: hidden; display: flex; align-items: center; justify-content: center; }
  .frame > img, .frame > video { inline-size: 100%; block-size: 100%; object-fit: cover; }

  /* Reel: horizontal scroll with snap. */
  .reel { display: flex; gap: var(--space, var(--space-md)); overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: var(--space-xs); }
  .reel > * { flex: 0 0 auto; scroll-snap-align: start; inline-size: var(--item-width, 18rem); }

  /* All primitives become container-query roots when they wrap content. */
  .stack, .cluster, .grid-auto, .sidebar, .switcher, .cover { container-type: inline-size; }
}