:root {
  --flow-space: var(--space-md);
}

.container {
  width: min(var(--container-lg), 100%);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}

.container--narrow {
  width: min(var(--container-sm), 100%);
}

.container--wide {
  width: min(var(--container-xl), 100%);
}

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

.flow > * + * {
  margin-block-start: var(--flow-space);
}

.flow-xs > * + * {
  margin-block-start: var(--space-xs);
}

.flow-lg > * + * {
  margin-block-start: var(--space-lg);
}

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

.stack {
  display: grid;
  gap: var(--space-md);
}

.wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.wrap-justify {
  justify-content: space-between;
}

.text-balance {
  text-wrap: balance;
}

.wrap-words,
.word-break {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.full-width {
  width: 100%;
}

.surface {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.surface--muted {
  background: var(--color-light);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

.grid-auto--narrow {
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.sticky-top {
  position: sticky;
  top: clamp(3.5rem, 1.75rem + 3vw, 5.5rem);
}

[data-scroll-region] {
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 48rem) {
  .container {
    padding-inline: clamp(1rem, 4vw, 1.75rem);
  }
}

@supports not (text-wrap: balance) {
  .text-balance {
    hyphens: auto;
  }
}