/* Grid system, containers, section rhythm. See ARCHITECTURE.md §7. */

:root {
  --container-max: 1440px;
  --container-text: 68ch;
  --container-pad: clamp(20px, 5vw, 64px);
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

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

/* Section vertical rhythm - consistent breathing room between page sections
   regardless of what's inside them. */
.section {
  padding-block: var(--space-9);
}

.section--tight {
  padding-block: var(--space-7);
}

@media (max-width: 768px) {
  .section {
    padding-block: var(--space-7);
  }
}