/* ─── Site Header ─────────────────────────────── */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    padding: 1rem 1.25rem;

    @media (min-width: 48rem) {
        padding: 4.7rem 2rem 0;
    }

    @media (min-width: 64rem) {
        padding: 4.7rem 3rem 0;
    }
}


/* ─── Hero ────────────────────────────────────── */

#hero {
    width: calc(100vw - 1.5rem);
    height: calc(100dvh - 1.5rem);
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0.75rem;
    padding: 6.5rem 1.25rem 2.25rem;

    @media (min-width: 48rem) {
        width: calc(100vw - 6rem);
        height: calc(100dvh - 6rem);
        margin: 3rem;
        padding: 8.75rem 2rem 4.25rem;
    }

    @media (min-width: 64rem) {
        padding: 9.25rem 3rem 5rem;
    }
}


/* ─── Projects Section ────────────────────────── */

#projects {
    padding: 4rem 1.25rem 0;

    & hgroup {
        margin-bottom: 2.5rem;
    }

    & .project-list {
        display: flex;
        flex-direction: column;
    }

    @media (min-width: 48rem) {
        padding: 8rem 2rem 0;

        & hgroup {
            width: min(100%, 60rem);
            margin-inline: auto;
            margin-bottom: 3.25rem;
        }

        & .project-list {
            gap: clamp(3rem, 5vw, 4.5rem);
            max-width: 52rem;
            margin-inline: auto;
        }
    }

    @media (min-width: 64rem) {
        padding: 8.5rem 3rem 0;
    }
}


/* ─── Footer ──────────────────────────────────── */

.site-footer {
    display: flex;
    flex-direction: column;
    margin-top: clamp(2rem, 4vw, 4rem);

    & .footer-layout {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
        padding: 3rem 1.25rem 2rem;

        @media (min-width: 48rem) {
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-end;
            min-height: 27rem;
            padding: 4rem 3rem 3rem;
            overflow: hidden;
        }

        @media (min-width: 64rem) {
            padding: 5rem 3rem 3.75rem;
        }
    }

    & .footer-micro {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        padding: 1.25rem 1.25rem;

        @media (min-width: 48rem) {
            flex-direction: row;
            justify-content: space-between;
            padding: 1.25rem 2rem;
        }

        @media (min-width: 64rem) {
            padding: 1.25rem 3rem;
        }
    }
}