/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--s-5);
}
.container.narrow { max-width: var(--container-narrow); }
.container.wide { max-width: var(--container-wide); }

/* Section */
.section {
  padding: var(--s-9) 0;
}
.section.sm { padding: var(--s-7) 0; }
.section.lg { padding: var(--s-10) 0; }
.section.alt { background: var(--canvas); }
.section.dark { background: var(--ink); color: var(--white); }
.section.dark h1, .section.dark h2, .section.dark h3, .section.dark h4 { color: var(--white); }
.section.dark p { color: rgba(255,255,255,0.72); }

/* Grid */
.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Stack */
.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }
.stack-xl > * + * { margin-top: var(--s-8); }

/* Flex helpers */
.row { display: flex; gap: var(--s-4); align-items: center; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }