@media (max-width:980px) {

    .hero,
    .xp,
    .intro,
    .chead {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .side {
        position: static
    }

    .lanyard {
        margin-top: 0
    }

    .split {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .portrait {
        max-width: 300px;
        order: -1
    }
}

@media (max-width:720px) {
    .frame {
        padding: 40px 20px
    }

    main {
        padding-top: 104px
    }

    .nav {
        gap: 2px
    }

    .nav .brand span {
        display: none
    }

    .nav .brand {
        padding-right: 6px
    }

    .nav a {
        padding: 0 12px
    }

    .stack {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .proj {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .fcols {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 40px
    }

    .side {
        padding: 24px
    }

    .foot .in {
        padding-top: 64px
    }

    .clink .arr {
        width: 40px;
        height: 40px
    }

    .head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px
    }
}