/* ================================================================
     KEYBOARD ACCESSIBILITY
     ================================================================ */

:focus-visible {
    outline: 3px solid var(--color-coral-text);
    outline-offset: 4px;
}


/* ================================================================
     DESKTOP PORTFOLIO PREVIEWS
     ================================================================ */

@media (min-width: 721px) {
    .project-open {
        height: clamp(30rem, 40vw, 35rem);
    }

    .project img {
        height: 100%;
        aspect-ratio: auto;
    }
}


/* ================================================================
     SMALL SCREENS
     ================================================================ */

@media (max-width: 720px) {
    .hero {
        min-height: 0;
        padding-block: 2.5rem 3.5rem;
        text-align: center;
    }

    .hero .avatar {
        width: 112px;
    }

    .hero .intro .lede {
        margin-inline: auto;
    }

    h1 {
        font-size: clamp(3rem, 14vw, 5rem);
    }

    .profile-nav {
        flex-direction: column;
        justify-content: center;
        gap: 1.25rem;
    }

    .hero .social-links {
        justify-content: center;
        margin-inline: auto;
    }

    .grid {
        display: block;
    }

    .site-footer {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .project {
        margin: 0 0 3rem;
    }

    .lightbox {
        padding: 2.5rem 0.75rem;
    }
}