/* ── STUDIO MOON — LAYOUT SYSTEM ── */

/* Content wrapper — sits above grid background */
.content-wrapper {
  position: relative;
  z-index: var(--z-base);
}

/* Page container — centered max-width */
.page {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

/* Section — vertical rhythm */
.section {
  padding: var(--space-11) 0;
  position: relative;
}

/* Offset for fixed header */
.section:first-of-type {
  padding-top: calc(var(--space-11) + 60px);
}

/* Grid layouts */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

/* Split — content + sidebar */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-11);
}

/* Stack — vertical flex */
.stack {
  display: flex;
  flex-direction: column;
}

.stack--xs { gap: var(--space-1); }
.stack--sm { gap: var(--space-2); }
.stack--md { gap: var(--space-4); }
.stack--lg { gap: var(--space-6); }
.stack--xl { gap: var(--space-8); }