/* ==========================================================================
   Layout primitives
   ========================================================================== */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.section--dark { background: var(--bg-dark); color: var(--text-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--text-on-dark); }
.section--charcoal { background: var(--bg-dark-alt); color: var(--text-on-dark); }
.section--charcoal h1, .section--charcoal h2, .section--charcoal h3, .section--charcoal h4 { color: var(--text-on-dark); }
.section--charcoal .eyebrow, .section--dark .eyebrow { color: var(--metallic); }
.section--charcoal .lead, .section--charcoal p { color: var(--text-on-dark-soft); }
.section--charcoal .arrow-link, .section--charcoal .text-soft { color: var(--text-on-dark); }
.section--charcoal .arrow-link .ico { color: var(--metallic); }
.section--stone { background: var(--bg-stone); }
.section--alt { background: var(--bg-alt); }
.on-dark { color: var(--text-on-dark); }
.on-dark .lead, .section--dark .lead { color: var(--text-on-dark-soft); }
.section--tight { padding-block: var(--section-y-tight); }

.section-head { max-width: 780px; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.section-head .eyebrow { margin-bottom: 1.1rem; }
.section-head.is-center { margin-inline: auto; text-align: center; }
.section-head.is-center .eyebrow { justify-content: center; }

/* Grids */
.grid { display: grid; gap: var(--gutter); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.split--text-narrow { grid-template-columns: 1fr 1.2fr; }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.flow > * + * { margin-top: 1.1em; }

.media { position: relative; overflow: hidden; background: var(--stone); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--3-2 { aspect-ratio: 3 / 2; }
.media--4-3 { aspect-ratio: 4 / 3; }
.media--1-1 { aspect-ratio: 1 / 1; }
.media--16-9 { aspect-ratio: 16 / 9; }
.media--portrait { aspect-ratio: 3 / 4; }

.hairline { height: 1px; background: var(--line); border: 0; margin: 0; }
.on-dark .hairline, .section--dark .hairline { background: var(--line-dark); }

.text-center { text-align: center; }
.measure { max-width: 60ch; }
.full-bleed { width: 100%; }

main { display: block; }
.page-top { padding-top: calc(var(--header-h) + clamp(2rem, 4vw, 4rem)); }