:root {
    /* Default: Engineering Mode (Black) */
    --bg: #1a1a1a;
    --text: #ffffff;
    --border: #333333;
    --accent: #0073e6;
    --transition-fast: 0.2s ease;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    transition: background 0.2s cubic-bezier(0.19, 1, 0.22, 1), 
                color 0.2s cubic-bezier(0.19, 1, 0.22, 1);
    overflow-x: hidden;
}


.mode-switch {
    cursor: pointer;
    padding: 0.7rem 1.4rem;
    border: 2px solid var(--text);
    background: transparent;
    color: var(--text);
    border-radius: 100px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: 0.2s cubic-bezier(0.19, 1, 0.22, 1), color 0.2s ease, border-color 0.2s ease;
}

.mode-switch:hover {
    background: var(--text);
    color: var(--bg);
    transform: scale(1.05);
}

/* --- Hero --- */
.hero {
    padding: 8vw 2rem;
    border-bottom: 1px solid var(--border);
}

.hero h1 {
    font-size: 10vw;
    line-height: 0.8;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: -5px;
}

#role-text {
    transition: color 0.2s ease;
}

/* --- Grid System --- */
.grid-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--border);
}

.grid-block {
    padding: 4rem 2rem;
    border-right: 1px solid var(--border);
}

.grid-block:last-child {
    border-right: none;
}

/* --- Combined About Section --- */
.about-wrapper {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    grid-column: 1 / 3;
    width: 100%;
}

.about-image-column {
    padding: 4rem 2rem;
    border-right: 1px solid var(--border);
}

.about-text-column {
    padding: 4rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#profile-img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 2px;
    filter: grayscale(100%);
    transition: filter var(--transition-fast);
    background-color: #222;
    /* Darker placeholder for Engineering */
}

#profile-img:hover {
    filter: grayscale(0%);
}

.label {
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 1.5rem;
    display: block;
}

/* --- Projects --- */
.project-display {
    width: 100%;
}

.project-image {
    width: 100%;
    height: 500px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #222;
    border: 1px solid var(--border);
    border-radius: 4px;
    filter: grayscale(100%);
    transition: filter var(--transition-fast), border-color 0.2s ease;
    /* Add this to fix laggy playback */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.project-image:hover {
    filter: grayscale(0%);
}

.dynamic-proj-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin: 1.5rem 0 0.5rem 0;
    letter-spacing: -1px;
    text-transform: uppercase;
}

.project-link {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.8rem 1.6rem;
    border: 1px solid var(--text);
    color: var(--text);
    text-decoration: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    transition: 0.3s ease, color 0.2s ease, border-color 0.2s ease;
}

.project-link:hover {
    background-color: var(--text);
    color: var(--bg);
}

/* --- Skills & Links --- */
.nav-link {
    font-size: 1.5rem;
    text-decoration: none;
    color: inherit;
    display: block;
    margin-top: 1rem;
    font-weight: 700;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--accent);
}

.skills-tag {
    display: inline-block;
    border: 1px solid var(--border);
    padding: 0.4rem 0.8rem;
    margin: 0.2rem;
    border-radius: 100px;
    font-size: 0.85rem;
    font-family: 'JetBrains Mono';
    background: transparent;
    color: var(--text);
    transition: border-color 0.2s ease, color 0.2s ease;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .grid-section {
        grid-template-columns: 1fr;
    }

    .grid-block {
        border-right: none;
    }

    .about-wrapper {
        grid-template-columns: 1fr;
    }

    .about-image-column {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .project-image {
        height: 300px;
    }
}

/* --- Hero --- */
.hero {
    padding: 3rem 2rem; /* Was 8vw - now fixed to a smaller height */
    border-bottom: 1px solid var(--border);
}

.hero h1 {
    font-size: 7vw; /* Was 10vw - smaller title fits more on screen */
    line-height: 0.8;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: -3px; /* Slightly tighter for the smaller size */
}

.about-image-column, 
.about-text-column {
    padding: 2rem; /* Was 4rem - smaller padding keeps content "above the fold" */
}

.about-wrapper {
    display: grid;
    /* Changed from 0.8fr to 0.6fr to shrink the image column width */
    grid-template-columns: 0.6fr 1.4fr; 
    grid-column: 1 / 3;
    width: 100%;
}

#profile-img {
    width: 100%;
    /* Locked size for the profile photo */
    max-width: 280px; 
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 2px;
    filter: grayscale(100%);
    transition: filter var(--transition-fast);
    background-color: #222;
}

.project-image {
    width: 100%;
    /* Locked height for consistency */
    height: 400px; 
    /* "contain" ensures you see the whole GIF content without cropping */
    background-size: contain; 
    background-position: center;
    background-repeat: no-repeat;
    background-color: #111; /* Darker background to frame the GIF */
    border: 1px solid var(--border);
    border-radius: 4px;
    filter: grayscale(100%);
    transition: filter var(--transition-fast), border-color 0.2s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.about-wrapper {
    display: grid;
    /* Adjusting the ratio so the text column has more room */
    grid-template-columns: 300px 1fr; 
    grid-column: 1 / 3;
    width: 100%;
}

#profile-img {
    /* Fixed size for a perfect square */
    width: 250px; 
    height: 250px;
    object-fit: cover;
    border-radius: 2px;
    filter: grayscale(100%);
    transition: filter var(--transition-fast);
    background-color: #222;
}

/* --- Art Mode Overrides --- */

/* Allow the profile image to stretch/fill again */
body.art-mode .about-wrapper {
    grid-template-columns: 0.8fr 1.2fr; /* Back to fluid ratio */
}

body.art-mode #profile-img {
    width: 100%;
    max-width: none;
    height: auto; 
    filter: grayscale(0%); /* Art mode is full color */
}

/* Allow project GIFs to stretch to the screen width */
body.art-mode .project-image {
    max-width: none;
    aspect-ratio: auto; /* Remove the locked square constraint */
    height: 60vh; /* Make them large and cinematic */
    filter: grayscale(0%);
}

body.art-mode .hero h1 {
    letter-spacing: 2px; /* Open up the typography */
    transition: all 0.5s ease;
}

#profile-img {
    /* Ensure it starts locked and grey */
    width: 250px; 
    height: 250px;
    filter: grayscale(100%); 
    display: block; /* Ensures it's visible immediately in the right spot */
}

.project-image {
    /* Ensure GIFs start locked and grey */
    max-width: 400px;
    aspect-ratio: 1 / 1;
    filter: grayscale(100%);
}

/* --- Projects --- */
.project-display {
    width: 100%;
}

.project-image {
    width: 100%;
    /* Increased locked size from 400px to 550px to make them bigger */
    max-width: 550px; 
    aspect-ratio: 1 / 1; 
    
    /* "cover" stretches the GIF to fill the box, removing the black bars */
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    
    /* Matches the UI background so edges blend perfectly */
    background-color: var(--bg); 
    
    border: 1px solid var(--border);
    border-radius: 4px;
    filter: grayscale(100%);
    transition: filter var(--transition-fast), border-color 0.2s ease, transform 0.3s ease;
    
    /* Optimization for GIF playback */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Optional: Slight lift on hover to make the larger GIFs feel interactive */
.project-image:hover {
    filter: grayscale(0%);
    transform: scale(1.02) translateZ(0);
}

/* Art Mode Overrides: Let them go full-screen/fluid */
body.art-mode .project-image {
    max-width: 100%;
    height: 70vh; /* Very large cinematic view */
    aspect-ratio: auto;
    filter: grayscale(0%);
}

#profile-img {
    width: 250px; 
    height: 250px;
    object-fit: cover;
    border-radius: 2px;
    filter: grayscale(100%);
    /* Added transform and scale to the transition list */
    transition: filter var(--transition-fast), 
                transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    background-color: #222;
    /* Keeps the animation smooth */
    transform: scale(1) translateZ(0); 
    cursor: pointer;
}

#profile-img:hover {
    filter: grayscale(0%);
    /* Matches the 'pop' scale of your projects */
    transform: scale(1.05) translateZ(0); 
}

/* This applies to both the old <div> and the new <video> tag */
.project-image, 
.project-video {
    width: 100%;
    /* 16:9 is the standard for gameplay and cinematic renders */
    aspect-ratio: 16 / 9; 
    object-fit: cover; 
    background-position: center;
    background-color: var(--bg); 
    border: 1px solid var(--border);
    border-radius: 4px;
    filter: grayscale(100%);
    transition: filter var(--transition-fast), border-color 0.2s ease, transform 0.3s ease;
    
    /* Hardware acceleration */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Hover effect */
.project-image:hover,
.project-video:hover {
    filter: grayscale(0%);
    transform: scale(1.01) translateZ(0); /* Subtle lift */
}

/* Mobile: Adjust ratio so it doesn't get too thin */
@media (max-width: 768px) {
    .project-image, 
    .project-video {
        aspect-ratio: 4 / 3; 
    }
}

.project-video {
    cursor: pointer;
    background-color: #000; /* Ensure black background while paused */
}

/* Optional: add a slight brightness boost on hover to signal it's "waking up" */
.project-video:hover {
    filter: grayscale(0%) brightness(1.1);
}

/* --- Compact Project Container --- */
.grid-block {
    padding: 1.5rem 2rem; /* Reduced from 4rem to pull content up */
}

.project-display {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* Video on left, Text on right */
    gap: 2rem;
    align-items: start;
}

.project-video, 
.project-image {
    width: 100%;
    aspect-ratio: 16 / 9; /* Cinematic but compact */
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 4px;
    filter: grayscale(100%);
    transition: all 0.3s ease;
}

/* --- Hover Logic --- */
.project-video:hover,
.project-image:hover {
    filter: grayscale(0%);
    transform: scale(1.02);
}

/* --- Typography Scaling --- */
.dynamic-proj-title {
    font-size: clamp(1.2rem, 3vw, 1.8rem); /* Smaller, more professional font size */
    margin: 0 0 0.5rem 0;
}

.dynamic-proj-desc {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #ccc;
    margin-bottom: 1rem;
}

.project-link {
    margin-top: 0;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
}

/* Mobile: Stack them back vertically */
@media (max-width: 900px) {
    .project-display {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .project-video {
        aspect-ratio: 16 / 10;
    }
}
/* --- Title Above Image --- */
.dynamic-proj-title {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    margin: 0.5rem 0 1rem 0; /* Tight spacing between title and image */
    text-transform: uppercase;
}

/* --- The Media Box --- */
.project-video, 
.project-image {
    width: 100%;
    aspect-ratio: 21 / 9; /* Ultrawide fits more content on one page */
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 4px;
    filter: grayscale(100%);
    transition: all 0.3s ease;
    display: block;
}

.project-video:hover {
    filter: grayscale(0%);
}

/* --- Info Row Below Image --- */
.project-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    margin-top: 0.75rem;
}

.dynamic-proj-desc {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #888;
    margin: 0;
    max-width: 75%;
}

.project-link {
    margin-top: 0;
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* --- Art Mode Override --- */
body.art-mode .project-video {
    aspect-ratio: 16 / 9; /* Slightly taller for cinematic art */
    filter: grayscale(0%);
}
/* --- Title Above Image --- */
.dynamic-proj-title {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    margin: 0.5rem 0 1rem 0; /* Tight spacing between title and image */
    text-transform: uppercase;
}

/* --- The Media Box --- */
.project-video, 
.project-image {
    width: 100%;
    aspect-ratio: 21 / 9; /* Ultrawide fits more content on one page */
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 4px;
    filter: grayscale(100%);
    transition: all 0.3s ease;
    display: block;
}

.project-video:hover {
    filter: grayscale(0%);
}

/* --- Info Row Below Image --- */
.project-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    margin-top: 0.75rem;
}

.dynamic-proj-desc {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #888;
    margin: 0;
    max-width: 75%;
}

.project-link {
    margin-top: 0;
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* --- Art Mode Override --- */
body.art-mode .project-video {
    aspect-ratio: 16 / 9; /* Slightly taller for cinematic art */
    filter: grayscale(0%);
}

/* --- Center the project content --- */
.project-wrapper {
    max-width: 550px; /* Locked to your preferred size */
    margin: 0; /* Keep it left-aligned to match your grid style */
}

.dynamic-proj-title {
    font-size: 1.8rem;
    text-transform: uppercase;
    margin: 0.5rem 0 1.2rem 0;
    letter-spacing: -1px;
}

/* --- Media Styling (Locked Size) --- */
.project-video, 
.project-image {
    width: 100%;
    max-width: 550px; 
    aspect-ratio: 1 / 1; /* Reverting to the square size you had last */
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 4px;
    filter: grayscale(100%);
    transition: all 0.3s ease;
    display: block;
    background-color: var(--bg);
}

.project-video:hover {
    filter: grayscale(0%);
    transform: scale(1.02);
}

/* --- Metadata (Description & Link) --- */
.project-meta {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dynamic-proj-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #888;
    margin: 0;
}

.project-link {
    align-self: flex-start;
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
}

/* Art Mode: Allow it to expand */
body.art-mode .project-wrapper {
    max-width: 100%;
}
body.art-mode .project-video {
    max-width: 100%;
    height: 70vh;
    aspect-ratio: auto;
}

/* --- Project Wrapper (Fixed Width) --- */
.project-wrapper {
    max-width: 550px; /* Limits the size as requested */
    width: 100%;
}

.dynamic-proj-title {
    font-size: 1.8rem;
    text-transform: uppercase;
    margin: 0.4rem 0 1rem 0; /* Space between title and video */
    letter-spacing: -1px;
}

/* --- The Video/Image (16:9 Widescreen) --- */
.project-video, 
.project-image {
    width: 100%;
    aspect-ratio: 16 / 9; /* The "Correct" size for video content */
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 4px;
    filter: grayscale(100%);
    transition: all 0.3s ease;
    display: block;
    background-color: #000;
}

.project-video:hover {
    filter: grayscale(0%);
    transform: scale(1.01); /* Subtle lift */
}

/* --- Metadata Row --- */
.project-meta-row {
    margin-top: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.dynamic-proj-desc {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #888;
    margin: 0;
    flex: 1;
}

.project-link {
    white-space: nowrap;
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
}

/* Art Mode Overrides */
body.art-mode .project-wrapper {
    max-width: 800px; /* Slightly wider for Art mode impact */
}
body.art-mode .project-video {
    filter: grayscale(0%);
}

/* Ensure the grid doesn't collapse */
#projects-container {
    width: 100%;
}

.project-wrapper {
    max-width: 550px; /* Locked as requested */
    width: 100%;
    margin-bottom: 2rem;
}

/* Force the video and image to the same size */
.project-video, 
.project-image {
    width: 100%;
    aspect-ratio: 16 / 9; /* Professional widescreen */
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 4px;
    filter: grayscale(100%);
    transition: all 0.3s ease;
    display: block;
    background-color: #000;
}

.project-video:hover,
.project-image:hover {
    filter: grayscale(0%);
    transform: scale(1.01);
}

/* Info row below the media */
.project-meta-row {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.dynamic-proj-desc {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text);
    opacity: 0.8;
    margin: 0;
}

#primary-links-container {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between links */
}

.nav-link {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: var(--accent);
}

#primary-links-container {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between links */
}

.nav-link {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: var(--accent);
}

/* --- Locked Profile Image (Both Modes) --- */
.about-wrapper {
    display: grid;
    /* Locked column widths: 300px for image, the rest for text */
    grid-template-columns: 300px 1fr; 
    grid-column: 1 / 3;
    width: 100%;
}

#profile-img {
    /* Fixed square dimensions */
    width: 250px; 
    height: 250px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid var(--border);
    
    /* Animation settings */
    filter: grayscale(100%);
    transition: filter 0.3s ease, transform 0.3s ease;
    background-color: #222;
}

#profile-img:hover {
    filter: grayscale(0%);
    transform: scale(1.02);
}

/* --- Remove or Comment Out Art Mode Stretch --- */
/* Ensure your 'body.art-mode' section DOES NOT contain these: */
body.art-mode .about-wrapper {
    grid-template-columns: 300px 1fr; /* Keep it the same as dev mode */
}

body.art-mode #profile-img {
    width: 250px; /* Force size consistency */
    height: 250px;
    filter: grayscale(0%); /* Full color in art mode */
}

/* --- Locked Layout for Both Modes --- */
.about-wrapper {
    display: grid;
    /* Fixed 300px sidebar for the image, fluid 1fr for the text */
    grid-template-columns: 300px 1fr; 
    grid-column: 1 / 3;
    width: 100%;
    border-bottom: 1px solid var(--border);
}

.about-image-column {
    padding: 2rem;
    border-right: 1px solid var(--border);
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.about-text-column {
    padding: 2rem 4rem; /* More horizontal padding for better readability */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#profile-img {
    width: 250px; 
    height: 250px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid var(--border);
    
    /* Starts grayscale, turns color on hover */
    filter: grayscale(100%);
    transition: filter 0.3s ease, transform 0.3s ease;
    background-color: #222;
}

#profile-img:hover {
    filter: grayscale(0%);
    transform: scale(1.02);
}

/* --- Remove Art Mode Stretching --- */
/* Ensure these overrides are GONE or match the above */
body.art-mode .about-wrapper {
    grid-template-columns: 300px 1fr; 
}

body.art-mode #profile-img {
    width: 250px;
    height: 250px;
    /* You can choose if Art mode starts in color or stays grayscale until hover */
    filter: grayscale(100%); 
}

body.art-mode #profile-img:hover {
    filter: grayscale(0%);
}

/* Mobile: Stack vertically but keep image size controlled */
@media (max-width: 768px) {
    .about-wrapper {
        grid-template-columns: 1fr;
    }
    .about-image-column {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
}

/* --- Unified About Section (Locked for both modes) --- */
.about-wrapper {
    display: grid;
    /* This fixed 300px ensures the vertical line never moves */
    grid-template-columns: 300px 1fr; 
    grid-column: 1 / 3;
    width: 100%;
}

.about-image-column {
    padding: 2rem;
    border-right: 1px solid var(--border);
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.about-text-column {
    padding: 2rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#profile-img {
    width: 250px; 
    height: 250px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid var(--border);
    filter: grayscale(100%);
    transition: filter 0.3s ease, transform 0.3s ease;
}

#profile-img:hover {
    filter: grayscale(0%);
    transform: scale(1.02);
}

/* --- Remove Mode-Specific Movement --- */

/* Delete any 'body.art-mode .about-wrapper' or 
   'body.art-mode #profile-img' blocks that change 
   width, height, grid-template, or padding. */

body.art-mode #profile-img {
    filter: grayscale(0%);
}

/* --- Hero Layout --- */
.hero-inner {
    display: flex;
    align-items: flex-end;
    gap: 2.5rem;
}

#hero-name {
    font-size: 8vw;
    font-weight: 800;
    line-height: 0.85;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: -3px;
    flex-shrink: 0;
}

.hero-subtitle {
    font-size: 2vw;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    padding-bottom: 0.4rem;
}

/* === MOBILE === */
@media (max-width: 768px) {
    nav {
        padding: 0.9rem 1.25rem;
    }

    .hero-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    #hero-name {
        font-size: 13vw;
        letter-spacing: -1px;
    }

    .hero-subtitle {
        font-size: 5.5vw;
        letter-spacing: -0.5px;
        padding-bottom: 0;
    }

    .about-wrapper {
        grid-template-columns: 1fr;
    }

    .about-image-column {
        padding: 1.5rem;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .about-text-column {
        padding: 1.25rem 1.5rem;
    }

    #about-heading {
        font-size: 1.2rem;
        margin: 0.5rem 0;
    }

    #about-text {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    #profile-img {
        width: 160px;
        height: 160px;
    }

    .project-wrapper {
        max-width: 100%;
    }

    .project-meta-row {
        flex-direction: column;
        gap: 0.75rem;
    }

    .dynamic-proj-title {
        font-size: 1.3rem;
        letter-spacing: -0.5px;
    }

    .grid-block {
        padding: 1.25rem;
    }

    #primary-links-container {
        gap: 10px;
    }

    .nav-link {
        font-size: 0.8rem;
    }
}