/* v2 layout — containers, sections, shared grid. Depends on tokens.css */

.container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--container-pad));
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--wide {
  max-width: calc(var(--container-wide) + 2 * var(--container-pad));
}

.section { padding-block: var(--space-section); }
.section--flush-top { padding-top: 0; }

/* 12-column grid used by hero + editorial compositions */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.5vw, 2rem);
}

/* Hairline separators */
.rule { border: 0; border-top: var(--border-hairline); margin: 0; }
.rule--strong { border-top: var(--border-strong); }