/* =========================================================================
   layout.css — container, 12-col grid, section rhythm
   Breakpoints (mobile-first):  --bp-tablet: 48em (768px),  --bp-desktop: 64em (1024px)
   ========================================================================= */

.container        { width: var(--container);        margin-inline: auto; }
.container--narrow{ width: var(--container-narrow);  margin-inline: auto; }

/* ---- 12-column grid ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

/* default: every direct child spans full width on mobile */
.grid > * { grid-column: span 12; }

@media (min-width: 48em) {
  .col-2  { grid-column: span 2; }
  .col-3  { grid-column: span 3; }
  .col-4  { grid-column: span 4; }
  .col-5  { grid-column: span 5; }
  .col-6  { grid-column: span 6; }
  .col-7  { grid-column: span 7; }
  .col-8  { grid-column: span 8; }
  .col-9  { grid-column: span 9; }
  .col-10 { grid-column: span 10; }
}

/* ---- Sections & rhythm ---- */
.section { padding-block: var(--section-y); }
.section--alt   { background: var(--bg-alt); }
.section--soft  { background: var(--bg-soft); }
.section--cream { background: var(--bg); }
.section--white { background: var(--c-white); }
.section--dark   { background: var(--surface-dark); color: var(--text-on-dark); }
.section--purple { background: var(--c-purple);     color: var(--text-on-dark); }
.section--red    { background: var(--c-aj-red);     color: var(--text-on-dark); }
.section--taupe  { background: var(--c-taupe);      color: var(--text-on-dark); }
.section--dark .eyebrow, .section--purple .eyebrow,
.section--red .eyebrow,  .section--taupe .eyebrow  { color: var(--c-salmon); }
.section--dark a, .section--purple a,
.section--red a, .section--taupe a { color: var(--c-salmon); }
.section--dark a:hover, .section--purple a:hover,
.section--red a:hover, .section--taupe a:hover { color: var(--c-peach); }

/* gentle hairline between same-colour neighbours when needed */
.section--divider { border-top: 1px solid var(--line); }

/* ---- Section header block ---- */
.section-head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head .eyebrow { margin-bottom: var(--space-2); }
.section-head h2 { margin-bottom: var(--space-3); }
.section-head .lead { color: var(--text-muted); }
.section--dark .section-head .lead,  .section--purple .section-head .lead,
.section--red .section-head .lead,   .section--taupe .section-head .lead { color: var(--c-peach); }

/* anchor offset so the sticky header doesn't cover section tops */
:where(section[id], [id]) { scroll-margin-top: calc(var(--header-h) + 14px); }

/* utility */
.center  { text-align: center; margin-inline: auto; }
.stack > * + * { margin-top: var(--space-3); }
.mt-0 { margin-top: 0; }