:root {
    --page-gutter: clamp(30px, 17vw, 300px);
}

@media (max-width: 1024px) {
    :root {
        --page-gutter: clamp(150px, 8vw, 120px);
    }
}

@media (max-width: 760px) {
    :root {
        --page-gutter: 12px;
    }
}

.page {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* ---------- Header / nav ---------- */
.site-header {
    flex: 0 0 auto;
    background: var(--nav-bg);
    border-block-end: 1px solid var(--color-border);
}

/* ---------- Main ---------- */
.content {
    flex: 1 0 auto;
    padding-block: clamp(24px, 4vw, 48px) clamp(16px, 2vw, 32px);
    padding-inline: var(--page-gutter);
}

/* ---------- Footer ---------- */
.site-footer {
    flex: 0 0 auto;
}