@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-display: swap; 
  src: url('/assets/fonts/bricolage-grotesque-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-800.woff2') format('woff2');
}

:root {
    --primary-color: rgb(45, 45, 45);
    /* --secondary-color: rgb(142, 150, 152); */
    --background-color: rgb(222, 232, 234);
}

/* 1. Force the page body to span at least the full height of the viewport */
html, body {
    height: 100%;
    margin: 0;
    overflow-y: scroll;
    scrollbar-gutter: stable; /* Keeps the space reserved for the scrollbar, even when empty */
    min-height: 100vh;
    justify-content: flex-start; /* Keeps things stacked from the top down */
}

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 24px;
    /* background-color: rgb(210, 220, 222); */
    background-color: var(--background-color);
    font-family: 'Bricolage Grotesque', sans-serif;
    line-height: 1.5rem;
    overflow-x: hidden; /* Prevents horizontal scroll from images hanging off the edges */
}

/* 2. Tell the main content wrapper to gobble up all remaining space */
main, .main-content-wrapper { 
    flex: 1 0 auto;
}

h1 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 9rem;
    color: color-mix(in srgb, var(--background-color), #000000 30%);
}

h2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 1.6em;
    color: color-mix(in srgb, var(--background-color), #000000 65%);
}

h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 1.4em;
    color: var(--primary-color);
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
    text-decoration: none; /* Removes the underline by default if desired */
}

*, *::before, *::after {
    box-sizing: border-box;
}

.content-container {
    max-width: 1000px;
    margin: 0 auto;
}


.site-header {
    width: 100%;
    padding-top: 10px; /* Restores the exact 30px space at the very top of the screen */
}

.navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;  
    height: 100px;
    width: 100%;
    max-width: 1000px;   
    margin: 0 auto;        
    /* padding: 30px 0px; */
}

.logo-link {
    display: flex;
}

.logo-link svg {
    height: 30px;
    width: auto;
    color: #ff6600;
}

.nav-items {
    display: flex;
    flex-direction: row;
    gap: 30px;
    margin-left: auto; /* Pushes menu items all the way to the right */
}

.nav-items a {
    text-decoration: none;
    color: rgb(45, 45, 45);
    font-weight: 600;
    font-size: 1.6rem;
}

.nav-items a.active {
    color: #ff6600;
}

.nav-toggle,
.nav-toggle-label {
    display: none;
}

/* ==========================================================================
   2. MOBILE NAVBAR OVERRIDES (Screens smaller than 768px)
   ========================================================================== */
@media (max-width: 768px) {
    
    .navbar {
        width: 90%; 
        margin: 0 auto;
        height: auto; /* Allow the navbar height to expand dynamically */
        padding: 40px 0;
        
        /* Flex setup to handle stacking when open */
        display: flex !important;
        flex-wrap: wrap; /* Allows nav-items to wrap onto a new row below */
        align-items: center;
    }

    .logo-link {
        /* Keeps the logo on the left */
        flex: 1; 
    }

    /* 1. Style and align the Hamburger Button */
    .nav-toggle-label {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 20px;
        cursor: pointer;
        /* Snaps the icon tightly to the right edge on the top row */
        margin-left: auto; 
        z-index: 100;
    }

    /* The three burger bars */
    .nav-toggle-label span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: rgb(45, 45, 45);
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* 2. Format .nav-items as a standard block row that drops below the header */
    .nav-items {
        /* No absolute positioning! Stays in normal document layout flow */
        position: relative !important; 
        top: auto !important;
        right: auto !important;
        
        /* Force container to wrap underneath the logo row */
        width: 100% !important; 
        
        display: flex;
        flex-direction: column;
        
        /* Right-align items inside their new row block */
        align-items: flex-end; 
        gap: 20px;
        margin-left: 0;
        
        /* Smooth height expansion settings */
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        padding: 0 !important; /* Wipes padding so it shrinks to 0px high when closed */
        transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
    }

    .nav-items a {
        font-size: 1.4rem;
        text-align: right;
        width: auto;
    }

    /* 3. The CSS Magic: Expand the layout container natively when checked */
    .nav-toggle:checked ~ .nav-items {
        max-height: 300px; /* Big enough to comfortably fit your links list */
        opacity: 1;
        padding: 30px 0 10px 0 !important; /* Adds breathing space only when open */
    }

    /* Keep core input checkbox hidden */
    .nav-toggle {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    /* 4. Animate the hamburger icon into an 'X' shape */
    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) {
        opacity: 0;
    }
    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
}


.footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 500px;
    align-items: center;
    padding: 20px 0;
    border-top: 1px solid rgb(200, 200, 200);
    margin-top: auto;
}

.footer-socials {
    display: flex;
    gap: 25px;
}

.social-link {
    color: #292929; /* Default icon color */
    transition: color 0.2s ease;
}

.social-link:hover {
    color: #000; /* Hover color */
}

/* Control the size of all inline SVGs inside the links */
.social-link svg {
    width: 24px;
    height: 24px;
    display: block;
}

/* 2. FORCE the paths and shapes to inherit the parent's color */
.social-link svg path,
.social-link svg rect {
    fill: currentColor !important;
}

/* ==========================================================================
   2. MOBILE NAVBAR OVERRIDES (Screens smaller than 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* 1. Stack the footer into two centered rows */
    .footer {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        
        /* NUKE the 500px desktop layout gap and use a clean vertical spacing buffer */
        gap: 30px !important; 
        
        padding: 40px 0 !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* 2. Optional: Adjust text scaling or properties if you have a copyright class */
    .footer p {
        margin: 0;
        font-size: 0.95rem;
        color: rgb(100, 100, 100);
    }

    /* 3. Keep social items horizontally aligned but centered in their row */
    .footer-socials {
        justify-content: center !important;
        align-items: center !important;
        gap: 20px !important; /* Slightly increased spacing for easier mobile touch targets */
    }

}


.single-post-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the text card horizontally over the image */
}

/* 1. Large Top Image Banner */
.post-hero-image {
    width: 80%;
    max-width: 1000px; /* Limits width so it matches your site constraints */
    aspect-ratio: 4 / 3; /* Wide cinematic banner proportion */
    border-radius: 10px;
    overflow: hidden;
}

.post-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 2. Overlapping Text Card Container */
.post-content-card {
    background: white;
    width: 90%;
    max-width: 1000px; /* Keeps reading line length optimized and readable */
    
    /* The magic overlap mix */
    margin-top: -200px; /* Pulls the card up over the hero image */
    position: relative; /* Activates z-index capabilities */
    z-index: 5;         /* Forces card strictly above the image boundary */
    
    padding: 50px 60px;
    /* border-radius: 12px; */
    box-shadow:
        0 20px 40px -15px rgba(0,0,0,.1),
        0 15px 20px -20px rgba(0,0,0,.05);
}

/* 3. Typography Positioning Inside Card */
.post-header {
    margin-bottom: 40px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20px;
}

.post-page-date {
    display: block;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
}

.post-page-title {
    font-size: 2.5rem;
    line-height: 1.2;
    color: #111;
    margin: 0;
}

/* Body text rendering spacing */
.post-body {
    font-size: 1.15rem;
    line-height: 1.75;
    color: #333;
}

.post-body p {
    margin-bottom: 24px;
}

/* Ensure inline images behave perfectly inside the content card */
.post-body img {
    display: block;
    max-width: 100%;     /* Prevents wide images from bursting out of the card */
    height: auto;        /* Maintains the image's original aspect ratio */
    border-radius: 8px;  /* Softens the corners to match your UI design */
    margin: 32px auto;   /* Generates clean breathing room above and below the image */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Optional subtle lift */
}
.single-project-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the text card horizontally over the image */
}

/* 1. Large Top Image Banner */
.project-cover-image {
    /* 1. Reset all positional tricks that were breaking */
    position: static;
    transform: none;
    
    /* 2. Set the element to fill the screen width */
    width: 100vw;
    max-width: 100vw;
    
    /* 3. The precise negative margin math */
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);

    aspect-ratio: 21 / 9; 
    border-radius: 0;     
    overflow: hidden;
}

.project-cover-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 2. Overlapping Text Card Container */
.project-content-card {
    background: white;
    width: 100%;
    max-width: 1000px; /* Keeps reading line length optimized and readable */
    
    /* The magic overlap mix */
    margin-top: -200px; /* Pulls the card up over the hero image */
    position: relative; /* Activates z-index capabilities */
    z-index: 5;         /* Forces card strictly above the image boundary */
    
    padding: 50px 60px;
    /* border-radius: 12px; */
    box-shadow:
        0 20px 40px 15px rgba(0,0,0,.1),
        0 5px 20px 20px rgba(0,0,0,.05);
}

/* 3. Typography Positioning Inside Card */
.project-header {
    margin-bottom: 40px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20px;
}

.project-page-date {
    display: block;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
}

.project-page-title {
    font-size: 2.5rem;
    line-height: 1.2;
    color: #111;
    margin: 0;
}

/* Body text rendering spacing */
.project-body {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #333;
}

.project-body p {
    margin-bottom: 20px;
}

.project-body h3 {
    margin-bottom: 0px;
}

.project-body h2 {
    margin-bottom: -10px;
}

/* Ensure inline images behave perfectly inside the content card */
.project-body img {
    display: block;
    max-width: 100%;     /* Prevents wide images from bursting out of the card */
    height: auto;        /* Maintains the image's original aspect ratio */
    border-radius: 8px;  /* Softens the corners to match your UI design */
    margin: 32px auto;   /* Generates clean breathing room above and below the image */
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); */
}
.post-row {
    width: 800px;
    
    --post-image-width: 350px;
    
    display: grid;
    grid-template-columns: auto 1fr;
    
    position: relative; /* NOT absolute */
    overflow: visible;   /* or hidden if needed */

    align-self: left;
}

.post-image-wrapper {
    width: var(--post-image-width);
    aspect-ratio: 4/3;
    border-radius: 8px 0px 0px 8px;
    align-self: flex-end;
    overflow: hidden;
    z-index: 1;
}

.post-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.post-date {
    font-size: 0.8rem;
    font-weight: 600;
    color: #111;
    
    /* Document flow alignment */
    order: -1;
    align-self: flex-start;
    
    /* Pulls it down dynamically over the card edge, aligned with card content padding */
    margin: 80px 0px 0px -150px; 
    z-index: 2;

    /* Exact Mobile Glassmorphism Style */
    background: rgba(255, 255, 255, 0.604);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 6px 14px;
}

.post-card {
    background: white;
    align-self: flex-end;
    margin-top: auto;
    margin-left: -150px;
    width: 600px;
    height: 60%;
    padding: 30px 30px;
    z-index:2;
    box-shadow:
        0 10px 25px -5px rgba(0,0,0,.08),
        0 8px 10px -6px rgba(0,0,0,.03);
}

.post-card a {
    color: inherit;
    text-decoration: none;
}

.post-card h3 {
    margin: 0 0 10px;
}

.post-row.reverse {
    width: 800px;
    
    --post-image-width: 350px;
    
    display: grid;
    grid-template-columns: 1fr auto;
    
    position: relative; /* NOT absolute */
    overflow: visible;   /* or hidden if needed */

    align-self: flex-end;
}

.post-row.reverse .post-image-wrapper {
    width: var(--post-image-width);
    aspect-ratio: 4/3;
    border-radius: 0px 8px 8px 0px;
    overflow: hidden;
    z-index: 1;
}

.post-row.reverse .post-content {
    height: 100%;

    display: flex;
    flex-direction: column;
    
    grid-column: 1;
    grid-row: 1;
}

.post-row.reverse .post-card {
    width: 600px;
    height: 60%;
    align-self: flex-end;
    margin-top: auto;
    margin-right: -150px;
}

.post-row.reverse .post-date {
    font-size: 0.8rem;
    font-weight: 600;
    color: #111;
    
    /* Document flow alignment */
    order: -1;
    align-self: flex-end;
    
    /* Pulls it down dynamically over the card edge, aligned with card content padding */
    margin: 80px -150px 0px 0px;  
    z-index: 2;

    /* Exact Mobile Glassmorphism Style */
    background: rgba(255, 255, 255, 0.604);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 6px 14px;
}

/* ==========================================================================
   2. MOBILE OVERRIDES (Screens smaller than 768px)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* Target the individual rows generated by your Nunjucks macro */
    .post-row {
        flex-direction: column !important; /* Forces image and text card to stack vertically */
        align-items: center;
        width: 90%; /* Uniform matching layout width constraint */
        max-width: 500px; /* Prevents rows from getting overly stretched on wide phablets */
        gap: 15px; /* Tightens space between the stacked image and card */
    }

    /* 1. Stack elements vertically in a clear, predictable flow */
    .post-row, 
    .post-row.reverse {
        display: flex !important;
        flex-direction: column !important;
        width: 90% !important; 
        max-width: 450px !important; 
        gap: 0px !important; 
        align-self: center !important; 
    }

    /* 2. Image wrapper: Switch overflow to visible so the card can overlay it */
    .post-image-wrapper,
    .post-row.reverse .post-image-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 16 / 10; 
        border-radius: 8px 8px 0px 0px !important;
        overflow: hidden !important; /* CRITICAL: Allows elements below to visually overlap */
    }

    /* 3. Pull the entire text layer up to create the overlapping effect */
    .post-content,
    .post-row.reverse .post-content {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
        
        /* Pushes the content unit up over the bottom part of the image */
        margin-top: -100px !important; 
        position: relative;
        z-index: 5; /* Keeps the entire card block above the image pixel layer */
    }

    /* 4. The Date Row: Sits naturally on its own line right above the card */
    .post-date,
    .post-row.reverse .post-date {
        position: static !important; 
        align-self: flex-start !important; 
        margin: 0 0 0px 5% !important; /* Kept at 5% to lock flush with the 90% wide card edge */
        
        /* Glassmorphism styling for high visibility on images */
        background: rgba(255, 255, 255, 0.604) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px);
        
        padding: 6px 14px !important;
        /* border-radius: 10px !important; */
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        color: #111 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    }

    /* 5. The Post Card: Renders right underneath the date pill perfectly */
    .post-card,
    .post-row.reverse .post-card {
        width: 90% !important; 
        max-width: 90% !important;
        height: auto !important;
        margin: 0 auto !important; 
        padding: 28px 24px !important;
        box-sizing: border-box !important;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08) !important;
    }
}
.project-row {
    width: 800px;
    
    --project-image-width: 800px;

    display: flex;
    flex-direction: column;

    align-self: flex-start;
    align-items: center;
}

.project-image-wrapper {
    width: var(--project-image-width);
    max-width: 100%;
    
    flex-grow: 0;
    flex-shrink: 0;

    align-self: center;
    
    aspect-ratio: 16/9;
    
    border-radius: 8px 8px 0px 0px;
    overflow: hidden;
    z-index: 1;
}

.project-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-card {
    background: white;
    position: relative;
    margin-top: -150px;
    width: 80%;
    height: 150px;
    padding: 5px 30px;
    z-index: 2;
    box-shadow:
        0 10px 25px -5px rgba(0,0,0,.08),
        0 8px 10px 10px rgba(0,0,0,.03);
}

.project-card a {
    color: inherit;
    text-decoration: none;
}

/* ==========================================================================
   2. MOBILE OVERRIDES (Screens smaller than 768px)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* 1. The Dynamic Row Grid Workflow */
    .project-row {
        display: grid !important;
        grid-template-columns: 100% !important;
        /* Two rows: one for the image, and a tiny 0-height anchor track for the overlap */
        grid-template-rows: auto auto !important; 
        width: 100% !important;
        align-items: start !important;
    }

    /* 2. Standard Width Image Wrapper (Fits parent naturally) */
    /* 2. The Image Wrapper */
    .project-image-wrapper {
        grid-column: 1 !important;
        grid-row: 1 !important; /* Sits naturally in row 1 */
        width: 100% !important;
        aspect-ratio: 16 / 9;
        border-radius: 8px 8px 0 0 !important;
        overflow: hidden !important;
    }

    .project-image-wrapper img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* 3. The Project Card: Pulled up to create the overlapping look */
    /* 3. The Project Card (100% Dynamic Overlap) */
    .project-card {
        grid-column: 1 !important;
        grid-row: 2 !important; /* Starts immediately under row 1 */
        
        /* THE DYNAMIC TRICK: Instead of negative margins, use transform 
        to translate the card UP by exactly 100% of its own calculated height! */
        transform: translateY(-100%) !important;
        
        width: 85% !important;
        max-width: 600px !important;
        height: auto !important; /* NO MORE FIXED HEIGHT! Grows dynamically with text */
        background: white !important;
        margin: 0 auto !important;
        
        /* Pull the subsequent components up so you don't leave a gaping hole underneath */
        margin-bottom: calc(-100% + 30px) !important;
    }
}


.publication-row {
    width: 850px;
    max-width: 100%;
    
    /* 1. Explicitly lock the first column to 400px for the image */
    display: grid;
    grid-template-columns: 400px 1fr;
    
    position: relative;
    overflow: visible;

    /* 2. Left-aligns the entire row inside the flex container */
    align-self: flex-start; 
    
    opacity: 1;
    transform: none;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.publication-image-wrapper {
    grid-column: 1;
    width: 100%; /* Spans the entire 400px column track */
    aspect-ratio: 4 / 3; /* Perfect landscape ratio */
    /* border-radius: 8px 0px 0px 8px; */
    overflow: hidden;
    z-index: 1;
}

.publication-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.publication-content {
    grid-column: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Aligns the card to the bottom of the row */
    position: relative;
    z-index: 2;
}

.publication-date {
    font-size: 0.8rem;
    font-weight: 700;
    color: #111;
    
    order: -1; /* Keeps it above the card in structural flow */
    align-self: flex-start;
    
    /* Pulls it over the image by 150px, aligned flush with the card's edge */
    margin: 40px 0 0px -400px; 
    z-index: 3;

    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(12px);
    padding: 6px 14px;
}

.publication-card {
    position: relative;
    background: white;
    width: 1000px;
    height: 150px;
    padding: 30px;
    
    /* Pulls the card 150px over the image */
    margin-left: -400px; 
    margin-bottom: 0px;
    z-index: 2;
    
    box-shadow:
        0 10px 25px -5px rgba(0,0,0,.08),
        0 8px 10px -6px rgba(0,0,0,.03);
}

/* Optional hover state so the whole card responds visually */
.publication-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.12);
}

/* The magic trick: stretches the <a> tag over the whole container */
.publication-card .stretched-link::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.publication-card a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.publication-card a:hover {
    color: #ff6600; /* Subtle active hover color match */
}

.publication-card h3 {
    margin: 0 0 10px;
    font-size: 1.4rem;
}

/* ==========================================================================
   2. MOBILE OVERRIDES (Screens smaller than 768px)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* Target the individual rows generated by your Nunjucks macro */
    .publication-row {
        display: flex !important;
        flex-direction: column !important; /* Forces image and text card to stack vertically */
        align-items: center;
        width: 90%; /* Uniform matching layout width constraint */
        max-width: 500px; /* Prevents rows from getting overly stretched on wide phablets */
        gap: 15px; /* Tightens space between the stacked image and card */
    }

    /* 2. Image wrapper: Switch overflow to visible so the card can overlay it */
    .publication-image-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 16 / 10; 
        border-radius: 8px 8px 0px 0px !important;
        overflow: hidden !important; /* CRITICAL: Allows elements below to visually overlap */
    }

    /* 3. Pull the entire text layer up to create the overlapping effect */
    .publication-content {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
        
        /* Pushes the content unit up over the bottom part of the image */
        margin-top: -100px !important; 
        position: relative;
        z-index: 5; /* Keeps the entire card block above the image pixel layer */
    }

    /* 4. The Date Row: Sits naturally on its own line right above the card */
    .publication-date {
        position: static !important; 
        align-self: flex-start !important; 
        margin: 0 0 0px 5% !important; /* Kept at 5% to lock flush with the 90% wide card edge */
        
        /* Glassmorphism styling for high visibility on images */
        background: rgba(255, 255, 255, 0.604) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px);
        
        padding: 6px 14px !important;
        /* border-radius: 10px !important; */
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        color: #111 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    }

    /* 5. The publlication Card: Renders right underneath the date pill perfectly */
    .publication-card {
        width: 90% !important; 
        max-width: 90% !important;
        height: auto !important;
        margin: 0 auto !important; 
        padding: 28px 24px !important;
        box-sizing: border-box !important;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08) !important;
    }
}

.posts-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px; 
    width: 100%;
    margin-bottom: 60px;
}

.posts-section-title {
    text-align: right;
    margin-bottom: -10px;
    margin-top: 0px;
}

.posts-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

.all-posts-link {
    display: block;
    text-align: left;
    font-size: 3rem;
    font-weight: 600;
    text-decoration: none;
    /* margin-top: -10px; */
}

/* ==========================================================================
   2. MOBILE OVERRIDES (Screens smaller than 768px)
   ========================================================================== */
@media (max-width: 768px) {
    
    .posts-section {
        align-items: center;
        gap: 30px;
    }

    section.posts-section h1.posts-section-title {
        text-align: center !important;
        margin-bottom: -20px !important;
        
        /* Minimum: 4.5rem, Preferred: 16% of viewport width, Maximum: 8rem */
        font-size: clamp(5rem, 20vw, 8rem) !important;
        
        line-height: 1.05 !important; /* Tightens the spacing between wrapped lines */
        word-break: nowrap;
    }

    .all-posts-link {
        text-align: center;
        font-size: 2rem;
        width: 100%;
    }

    .posts-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 60px; /* Space between rows so they don't crash on scroll */
    }
}
.projects-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px; 
    width: 100%;
    margin-bottom: 60px;
}

.projects-section-title {
    text-align: left;
    margin-bottom: 60px;
}

.projects-container {
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 100%;
}

/* Target every second project preview container */
.projects-container .project-row:nth-child(even) {
    /* Push the entire container to the right side of the page */
    align-self: flex-end;
}

.all-projects-link {
    display: block;
    text-align: right;
    font-size: 3rem;
    font-weight: 600;
    text-decoration: none;
    /* margin-top: -10px; */
}

/* ==========================================================================
   2. MOBILE OVERRIDES (Screens smaller than 768px)
   ========================================================================== */
@media (max-width: 768px) {
    
    .projects-section {
        display: flex;
        flex-direction: column;
        align-items: center; 
        width: 100%;
        overflow-x: hidden; /* Guards against horizontal scrolling from full-width breakout */
    }

    section.projects-section h1.projects-section-title {
        text-align: center !important;
        margin-bottom: -10px !important;
        
        /* Minimum: 4.5rem, Preferred: 16% of viewport width, Maximum: 8rem */
        font-size: clamp(4rem, 21vw, 8rem) !important;
        
        line-height: 1.05 !important; /* Tightens the spacing between wrapped lines */
        word-break: nowrap;
    }

    .all-projects-link {
        text-align: center;
        font-size: 2rem;
        width: 100%;
    }

    .projects-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 60px; /* Increased gap to give breathing room for the cards sliding down */
    }

}


/* ==========================================================================
   1. ARCHIVE HEADER & YEAR FILTER ROW (Top of Page)
   ========================================================================== */
.archive-header {
    max-width: 1000px;
    margin: 40px auto 20px auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Horizontal Row for Years Filter */
.year-filter-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    padding: 10px 0;
    /* border-bottom: 1px solid rgb(220, 220, 220); */
    margin-bottom: 40px;
}

.year-filter-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    font-weight: 600;
    color: rgb(120, 120, 120);
    cursor: pointer;
    padding: 6px 16px;
    border-radius: 20px;
    transition: all 0.2s ease;
}

.year-filter-btn:hover {
    color: rgb(20, 20, 20);
    background: rgba(0, 0, 0, 0.04);
}

/* Style for the currently active/selected year */
.year-filter-btn.active {
    color: white;
    background: rgb(45, 45, 45);
}


/* ==========================================================================
   2. MAIN CONTAINER & LAZY LOAD ANIMATION CAPABILITIES
   ========================================================================== */
.archive-posts-container {
    display: flex;
    flex-direction: column;
    gap: 60px; /* Generates neat, consistent spaces between different rows */
    width: 100%;
    max-width: 100%;
    margin-bottom: 80px;
}

/* Prepared baseline class for Scroll-Driven/Lazy Fade-in transitions */
.post-row {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* If you implement IntersectionObserver later for scrolling reveal animations, 
   you can pre-hide items by appending an '.is-hidden' class via your template: */
.post-row.is-hidden {
    opacity: 0;
    transform: translateY(30px);
}


/* ==========================================================================
   3. MOBILE RESPONSIVE ADAPTATIONS (Screens smaller than 768px)
   ========================================================================== */
@media (max-width: 768px) {
    
    .archive-header {
        width: 90%;
        margin: 20px auto;
        align-items: center;
    }

    .archive-title {
        text-align: center;
    }

    /* Center the year filters on small mobile screens */
    .year-filter-row {
        justify-content: center;
        width: 100%;
        gap: 10px;
        margin-bottom: 20px;
        border-bottom: none;
    }

    .year-filter-btn {
        font-size: 1.1rem;
        padding: 6px 12px;
    }

    .archive-posts-container {
        gap: 40px;
    }
}



/* ==========================================================================
   1. MAIN ARCHIVE CONTAINER
   ========================================================================== */
.archive-projects-container {
    display: flex;
    flex-direction: column;
    gap: 60px; /* Generates breathing room between cards */
    width: 100%;
    max-width: 1000px; /* Aligns with the .archive-header width */
    margin: 50px auto 80px auto;
}

/* ==========================================================================
   2. PROJECT ROW - FULL WIDTH & STRETCH OVERRIDES
   ========================================================================== */
.project-archive-row {
    width: 100% !important; 
    max-width: 100% !important;
    
    /* 1. Force the row container to stretch all the way to the screen edges */
    align-self: stretch !important; 
    
    /* 2. Force the inner elements (like the image wrapper) to stretch to 100% */
    align-items: stretch !important; 
    
    /* 3. Override any fixed pixel widths */
    --project-image-width: 100% !important; 
}

/* Make sure the image wrapper takes up 100% width of the stretched row */
.project-archive-row .project-image-wrapper {
    width: 100% !important;
    max-width: 100% !important;
}

/* Keep the overlapping white project card slightly narrower than the image 
   so you can still see the image on the left/right edges for that premium look */
.project-archive-row .project-card {
    width: 90% !important; /* Spans across almost the whole width of the image */
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==========================================================================
   3. MOBILE RESPONSIVE ADAPTATIONS (Screens smaller than 768px)
   ========================================================================== */
@media (max-width: 768px) {
    
    .archive-projects-container {
        gap: 50px;
        width: 100%;
    }

    /* Resets the layout back to grid for stacking on mobile */
    .project-archive-row {
        display: grid !important; 
        width: 100% !important;
    }

    .project-archive-row .project-card {
        width: 85% !important; /* Matches original home card mobile behavior */
    }
}

/* ==========================================================================
   1. MAIN CONTAINER (LEFT ALIGNED)
   ========================================================================== */
.publications-container {
    display: flex;
    flex-direction: column;
    gap: 60px; /* Generates neat, consistent spaces between different rows */
    width: 100%;
    max-width: 1000px; /* Aligns with your desktop page width grid */
    margin: 50px auto 80px auto;
}


/* ==========================================================================
   3. MOBILE RESPONSIVE ADAPTATIONS (Screens smaller than 768px)
   ========================================================================== */
@media (max-width: 768px) {

    .publications-container {
        gap: 40px;
        padding: 0 20px;
    }
}



/* --- DESKTOP & TABLET (Everything down to 768px) --- */
/* Update this in person.css */
.profile-content {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 200px auto; /* Reset top margin to 0 so the header controls the spacing */
    padding-top: 40px; /* Adjust this value to get the exact spacing you want */

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    
    position: relative;
    overflow: visible;
}

.profile-content .profile-image-wrapper {
    grid-column: 1;
    grid-row: 1;
    justify-self: end; /* Magnets to the right wall */
    align-self: start;
    
    width: 300px;
    height: 300px;
    z-index: 1; 
}

.profile-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.profile-card {
    grid-column: 1;
    grid-row: 1;
    justify-self: start; /* Magnets to the left wall */
    align-self: end;
    
    width: 750px;
    max-width: 100%; 
    height: auto;
    padding: 30px 30px;
    z-index: 2; 
    
    transform: translateY(200px);

    background-color: rgb(255, 255, 255);
    box-shadow:
        0 10px 25px -5px rgba(0,0,0,.08),
        0 8px 10px -6px rgba(0,0,0,.03);
}

.profile-card a {
    text-decoration: none;
    color: orangered;
}

/* --- MOBILE ONLY (768px and below) --- */
@media (max-width: 768px) {
    .profile-content {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        margin-bottom: 50px;
        padding: 0 20px;
    }

    .profile-content .profile-image-wrapper {
        grid-column: 1;
        grid-row: 1; 
        justify-self: center;
        width: 100%;
        max-width: 300px;
    }

    .profile-image-wrapper img {
        border-radius: 10px 10px 0px 0px; 
    }

    .profile-card {
        grid-column: 1;
        grid-row: 2; 
        max-width: 300px;
        justify-self: center;
        transform: translateY(-20px); 
        border-radius: 0px 0px 10px 10px;
    }
}



.hero-content {
    margin-top: -20px;
    margin-bottom: 150px;
}

.hero-content .hero-title {
    margin-top: -30px;
}

.normal-text {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 100;
    font-size: 0.7em;
    color: var(--primary-color);
}

.highlighted-text {
    color: orangered;
    /* font-weight: 600; */
}

.hero-content .hero-subtitle {
    margin-top: -15px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 100;
    font-size: 1.5em;
    color: var(--primary-color);
}

/* ==========================================================================
   2. MOBILE OVERRIDES (Screens smaller than 768px)
   ========================================================================== */
@media (max-width: 768px) {
    
    .hero-content .welcome {
        text-align: center !important;
        font-size: clamp(5rem, 18vw, 8rem) !important;
    }

    .hero-content .hero-title {
        text-align: center !important;
        margin-top: -70px;
    }

    .hero-content .hero-subtitle {
        text-align: center !important;
        margin-top: -20px;
    }
}