/* ============================================================
   LAYOUT — containers, sections, grids
   ============================================================ */
.container{ max-width:var(--max-width); margin:0 auto; padding:0 var(--container-pad); }
.container--narrow{ max-width:var(--content-width); margin:0 auto; padding:0 var(--container-pad); }

.section{ padding:var(--space-2xl) 0; border-bottom:1px solid var(--black-border); }
.section--alt{ background:var(--black-soft); }
.section--tight{ padding:var(--space-xl) 0; }
main .section:last-of-type{ border-bottom:none; }

.section-header{ margin-bottom:var(--space-xl); max-width:640px; }
.section-header--center{ text-align:center; margin-left:auto; margin-right:auto; }
.section-header h2 em{ font-style:italic; color:var(--gold); }
.section-header p{ font-size:1.05rem; margin-top:12px; }

/* --- grid systems (column counts adjusted per breakpoint in responsive.css) --- */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-lg); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-lg); }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-lg); }