.page-wrapper {
	position: relative;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
    
    /* If I don't rotate the whole fucking page slightly, the stripes won't extend properly. No, this doesn't make sense, and I should fix this, but I can't be fucked right now. */
    transform: rotate(-.015deg);
}

.content {
    display:grid;
    grid-template-areas: 
        'projects-top projects-top'
        'navigation navigation'
        'projects-bottom projects-bottom';
    place-items: center;
    gap: 5vh;
    width: 80vmin;
    margin: 0 10vw;
}

img {
    filter: brightness(0) saturate(100%) invert(26%) sepia(72%) saturate(5537%) hue-rotate(0deg) brightness(100%) contrast(108%);
}

/*
=====================
PROJECT FRAMES
=====================
*/

/* Frames are in top and bottom grids within the main grid */
.project-links {
    display:grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 1.5vmax;
    width: 105%;
}

    .project-link {
        display: grid;
    }

    .project-link svg.project-frame {
        width: 100%;
        height: auto;
        transition: all 0.3s ease;
        grid-area: frame;
    }

    .project-link p {
        text-align: center;
        text-transform: uppercase;
        color: var(--copy);
        padding: 1vh 0;
        opacity: 0;
        transition: all 0.2s ease;
        line-height: 100%;
        grid-area: label;
    }
    
    .project-link:hover p {
        opacity: 1;
    }

.top-row .project-link {
    grid-template-areas: 
        'label'
        'frame';
}

.bottom-row .project-link {
    grid-template-areas: 
        'frame'
        'label';  
}

/* Thumbnail image is a grayscale halftone version, blended using the current theme's light color variable */

.frame-underlay {
    fill: var(--under);
}

.frame-overlay {
    fill: var(--over);
    mix-blend-mode: lighten;
    opacity: 1;
    transition: opacity 0.3s ease;
}

    .project-link:hover .frame-overlay {
        opacity: 0;
    }

/* Image is swapped to a non halftone, full-color version on hover */

.img-default,
.img-hover {
    transition: opacity 0.3s ease;
}

.img-hover {
    opacity: 0;
}

    .project-link:hover .img-hover {
        opacity: 1;
    }


.top-row {
    grid-area: projects-top;
    opacity:0;
    align-items: end;
    animation: fadeInTop .5s ease .75s forwards;
}

.bottom-row {
    grid-area: projects-bottom;
    opacity:0;
    align-items: start;
    animation: fadeInBottom .5s ease .75s forwards;
}

/*
=====================
MAIN LOGO AND EXTERNAL LINKS
=====================
*/

.main-navigation {
    grid-area: navigation;
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    justify-content: center;
    width: 80vmin;
}

    /* Right-side grid parent: theme selector and external links */
    .nav {
        display:grid;
        align-items: center;
        justify-items: center;
        grid-template-rows: 40% 40%;
        gap: 20%;
        height: 100%;
    }

        .logo svg {
            width:100%;
            overflow: visible;
        }

        /* 3-button theme selector subgrid */
        .theme-selector {
            display: grid;
            grid-auto-flow: column;
            /* margin: min(1.5rem, 2vw) 0; */
            margin: 0;
            opacity:0;
            animation: fadeInTop .5s ease .5s forwards;
        }

            .theme-btn {
                width: clamp(1rem, 1.25vmax, 3rem);
                height: clamp(1rem, 1.25vmax, 3rem);
            }
    

        /* Main navigation animations: fade in and move into place */
        .nav-links {
            display:grid;
            text-align: center;
            grid-template-columns: repeat(2,min-content);
            opacity: 0;
            animation: fadeInBottom .5s ease .5s forwards;
        }

            .email-reveal {
                display:none;
            }

        @keyframes fadeInTop {
            0% {
                opacity: 0;
                translate: 0% 2vh;

            }
            100% {
                translate: 0% 0vh;
                opacity: 1;
            }
        }

        @keyframes fadeInBottom {
            0% {
                opacity: 0;
                translate: 0% -2vh;

            }
            100% {
                translate: 0% 0vh;
                opacity: 1;
            }
        }
        
        .nav-links a {
            color: var(--dark);
            font-weight: 600;
            font-size: clamp(1.25rem, 1.75vw, 5rem);
            letter-spacing: -5%;
            padding: 0 1vw;
            text-transform: uppercase;
            transition: opacity 0.25s ease, color 0.2s ease;  /* ← opacity added */
        }

        .nav-links a:hover {
            color: var(--med);
        }

        .nav-links.email-hover a {
            opacity: 0;
            pointer-events: none;
        }

        .nav-email-reveal {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 0;
        
            color: var(--med);
            font-weight: 600;
            font-size: clamp(1.25rem, 1.75vw, 5rem);
            letter-spacing: -5%;
            white-space: nowrap;
        
            opacity: 0;
            pointer-events: none;
            cursor: pointer;
        
            transition: opacity 0.25s ease, color 0.15s ease;
        }

        .nav-links.email-hover .nav-email-reveal {
            opacity: 1;
            pointer-events: auto;
        }
        
        .nav-email-reveal:hover {
            color: var(--dark);
        }
        
        .nav-email-reveal:active {
            color: var(--light);
        }

        .l-rects rect {
            transform-box: fill-box;
            transform-origin: right center;
            transform: scaleX(0);
            animation: drawStripe 1s ease-in forwards;
        }

        .r-rects rect {
            transform-box: fill-box;
            transform-origin: left center;
            transform: scaleX(0);
            animation: drawStripe 1s ease-in forwards;
        }

        @keyframes drawStripe {
        to {
            transform: scaleX(100);
        }
        }


@media only screen and (max-width:500px) {
    
    .main-navigation {
        grid-template-columns: 3fr auto;
        gap: 5vw;
    }

        .project-links {
            display:grid;
            grid-template-rows: 1fr 1fr;
            width:90%;
            gap: 2vmax;
        }

        .project-links p {
            display: none;
        }

        .nav {
            translate: 0;
            /* gap: 10vmin; */
            /* justify-items: end;         */
        }

            .nav-links {
                display:grid;
                grid-auto-flow: row;
                place-items: center;
            }

                .nav-links a{
                    font-size: 1rem;
                }


}