/* Layout primitives + page regions (mobile first) */

.stack > * + * {
  margin-block-start: var(--spacing-3);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  min-height: var(--header-height);
  padding-inline: var(--spacing-3);
}

main {
  padding: var(--spacing-3);
}

@media (min-width: 768px) {
  .site-header,
  main {
    padding-inline: var(--spacing-5);
  }
}