.container {
  width: min(calc(100% - max(var(--page-gutter), var(--safe-area-left)) - max(var(--page-gutter), var(--safe-area-right))), var(--content-max));
  margin-inline: auto;
}

.container--wide { width: min(calc(100% - max(var(--page-gutter), var(--safe-area-left)) - max(var(--page-gutter), var(--safe-area-right))), var(--content-wide-max)); }
.container--narrow { max-width: 48rem; }

.section { padding-block: var(--section-space); }
.section--compact { padding-block: var(--space-10); }
.section--surface { background: var(--color-surface); }

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--sm { gap: var(--space-2); }
.stack--lg { gap: var(--space-8); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.cluster--between { justify-content: space-between; }

.grid { display: grid; gap: var(--space-4); }
.grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }

.showcase-layout { display: grid; gap: var(--space-8); }
.showcase-nav { display: none; }
.showcase-content { min-width: 0; }
.showcase-section { scroll-margin-top: calc(var(--header-height) + var(--space-5)); }
.showcase-section + .showcase-section { margin-top: var(--space-16); }
.showcase-heading { margin-bottom: var(--space-6); }
.showcase-heading p { margin-bottom: 0; color: var(--color-ink-muted); }
.component-demo {
  padding: clamp(var(--space-4), 3vw, var(--space-8));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

@media (min-width: 40rem) {
  .grid--2, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
  .grid { gap: var(--space-6); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .showcase-layout { grid-template-columns: 13rem minmax(0, 1fr); align-items: start; }
  .showcase-nav {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-height: calc(100dvh - var(--header-height) - var(--space-12));
    overflow-y: auto;
  }
}

@media (min-width: 120rem) {
  .showcase-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-12); }
}