/* Containers ---------------------------------------------------------------- */

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

.container--wide {
    max-inline-size: calc(var(--wide-content) + 2 * var(--page-padding));
}

.container--reading {
    max-inline-size: calc(var(--reading-width) + 2 * var(--page-padding));
}

.container--form {
    max-inline-size: calc(var(--form-width) + 2 * var(--page-padding));
}

/* Sections ------------------------------------------------------------------ */

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

.section--tight {
    padding-block: var(--section-space-tight);
}

.section--flush-top {
    padding-block-start: 0;
}

.section--fog {
    background: var(--color-fog);
}

.section--ink {
    background: var(--color-ink);
    color: var(--color-paper);
}

.section--divided {
    border-block-start: 1px solid var(--color-border);
}

.section__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4) var(--space-8);
    margin-block-end: clamp(32px, 5vw, 72px);
}

/* Page intro: eyebrow, large title, lead. */
.page-intro {
    padding-block: clamp(56px, 9vw, 144px) clamp(40px, 6vw, 96px);
}

.page-intro > .container > * + * {
    margin-block-start: var(--space-8);
}

.page-intro .eyebrow + * {
    margin-block-start: var(--space-6);
}

/* Editorial split: a narrow label column beside a wide content column. */
.split {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: var(--space-6);
}

.split__label {
    grid-column: 1 / span 4;
}

.split__body {
    grid-column: 5 / -1;
}

.split__body > * + * {
    margin-block-start: var(--space-6);
}

@media (max-width: 860px) {
    .split__label,
    .split__body {
        grid-column: 1 / -1;
    }
}

/* Card grids: two columns for large editorial presentation, three only when compact. */
.grid {
    display: grid;
    gap: clamp(40px, 5vw, 80px) var(--grid-gap);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .grid--3,
    .grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .grid,
    .grid--3,
    .grid--4 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.stack > * + * {
    margin-block-start: var(--space-6);
}

.stack--lg > * + * {
    margin-block-start: var(--space-12);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-10);
}