:root {
    --bg-color: #050505;
    --text-color: #e0e0e0;
    --accent-color: #ffffff;
    --card-width: 300px;
    --card-height: 400px;
    --gap: 4rem;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Re-enable cursor for now, user didn't ask to hide it, just follow */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Courier New', Courier, monospace;
    overflow-x: hidden;
    min-height: 100vh;
    cursor: default;
}

header {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    mix-blend-mode: difference;
    pointer-events: none;
    overflow: hidden;
}

#header-ascii {
    font-family: 'Courier New', Courier, monospace;
    font-size: 6px;
    line-height: 6px;
    white-space: pre;
    color: var(--accent-color);

    /* Reverted to safer flexible centering */
    width: fit-content;
    margin: 0 auto;

    text-align: center;
    overflow: hidden;
}

header a {
    pointer-events: auto;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

header a:hover {
    border-color: var(--text-color);
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    z-index: 100;
    mix-blend-mode: difference;
    pointer-events: none;
}

main {
    padding: 0rem 2rem 6rem 2rem;
    width: 100%;
    margin-top: -4rem;
    /* Reduced space below header */
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    perspective: 1500px;
}

.gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* grid-auto-rows removed to let aspect-ratio dictate height */
    grid-auto-flow: dense;
    gap: var(--gap);
    /* justify-items: center; - Remove to let items stretch */
    transform-style: preserve-3d;
}

.project-card {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
}



/* Remove other span rules to enforce strict 2-column layout for the rest */


.card-inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #111;
    /* border removed */
    transition: box-shadow 0.3s ease;
    position: relative;
}

.card-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 2;
    /* Above the static image */
}

.card-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease;
    filter: grayscale(100%) contrast(1.2);
}

.project-card:hover .card-inner {
    /* border-color removed */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.project-card:hover .card-inner img {
    opacity: 1;
    filter: grayscale(0%) saturate(1.5) contrast(1.1);
    transform: scale(1.05);
}

/* Global Cursor Overlay */
#cursor-overlay {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 4px;
    opacity: 0;
    /* Hidden by default */
    transform: scale(0.8);
    transition: opacity 0.2s ease, transform 0.1s ease-out;
    /* Fast follow */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

#cursor-overlay.active {
    opacity: 1;
    transform: scale(1);
}

.cursor-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 0;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 2px;
    max-width: 250px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}

.cursor-date {
    font-size: 1rem;
    color: #6be0a1;
    font-family: 'Nunito', sans-serif;
    margin-bottom: 0.3rem;
    font-weight: 700;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    :root {
        --card-width: 100%;
        --card-height: 300px;
        --gap: 1.5rem;
    }

    .gallery {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    main {
        padding: 6rem 1rem;
        perspective: 800px;
    }

    /* On mobile, maybe just show it at the bottom or center? 
       Cursor following is weird on touch. 
       Let's fallback to center overlay or just hide it.
       User didn't specify, but standard practice is no hover on mobile.
    */
    #cursor-overlay {
        display: none;
    }

    /* ASCII Header Mobile Adjustment */
    #header-ascii {
        font-size: 3px;
        line-height: 3px;

        /* Robust Centering & Scaling Strategy */
        width: max-content;
        /* Ensure container fits the text width exactly */
        position: relative;
        left: 50%;
        /* Move left edge to center of screen */

        /* Scaled up even more to 1.3 to take up space and reduce gap feel */
        transform: translateX(-50%) scale(1.3);
        transform-origin: center top;

        margin-left: 0;
        /* Reset margins */
        margin-top: 3rem;
        /* Compensate for larger head hitting top */
        margin-bottom: 2rem;

    }

    /* Re-add static overlay for mobile if needed, or just rely on click. 
       For now, let's keep it simple. */
}

.cursor-description {
    font-size: 1.1rem;
    color: #a8a7ae;
    margin-top: 0.2rem;
    max-width: 200px;
    white-space: normal;
    font-family: 'Nunito', sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}