/* ============================================================
   Layout primitives. Mobile-first: min-width queries only.
   ============================================================ */

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

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

.section { padding-block: var(--space-xl); }
.section--pad { padding-block: var(--space-2xl); }
.section--dark { background: var(--ink); color: var(--base); }
.section--dark .kicker { color: var(--brass); }
.section--dark .lede { color: #B4B4BC; }
.section--surface { background: var(--surface); }

.section__head { margin-bottom: var(--space-l); }

.stack > * + * { margin-top: var(--space-s); }
.stack-l > * + * { margin-top: var(--space-l); }

.grid { display: grid; gap: var(--space-m); }

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .section { padding-block: var(--space-2xl); }
  .section--pad { padding-block: var(--space-3xl); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--split { grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
}

/* Utility: hide below / above a breakpoint without duplicating markup */
.only-desktop { display: none; }
@media (min-width: 1024px) {
  .only-desktop { display: block; }
  .only-mobile { display: none; }
}