html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}

body {
    min-height: 100vh;
    background: var(--color-background);
    color: var(--color-text);
}

main {
    min-height: 60vh;
}

.container {
    width: min(var(--container-width), 92%);
    margin-inline: auto;
}

.container-wide {
    width: min(var(--container-wide), 94%);
    margin-inline: auto;
}

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

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

.section-header {
    max-width: 760px;
    margin-bottom: var(--space-12);
}

.section-header-center {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: var(--space-12);
    text-align: center;
}

.grid {
    display: grid;
    gap: var(--grid-gap, var(--space-6));
    grid-template-columns: var(--grid-columns, 1fr);
}

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

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

.grid-auto {
    --grid-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stack {
    display: grid;
    gap: var(--stack-gap, var(--space-4));
}

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

.content-sm {
    max-width: 620px;
}

.content-md {
    max-width: 760px;
}

.content-lg {
    max-width: 920px;
}

.full-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

@media (max-width: 960px) {
    .section {
        padding-block: var(--space-20);
    }

    .grid-2,
    .grid-3 {
        --grid-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .container,
    .container-wide {
        width: min(100% - 2rem, var(--container-width));
    }

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