/* filepath: /Users/dewi/Documents/School 🎓/portfolioNOV2025/style/style.css */
@import url('https://fonts.googleapis.com/css2?family=Taprom&display=swap');

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

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url('images/beige-paper.png') repeat;
    background-size: 50px 50px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 100;
}

html,
body {
    height: 100%;
    font-family: Arial, sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    background-color: #003D24;
    overflow-x: hidden;
}

h1 {
    color: #003D24;
    font-family: "nazare", mono;
}

p {
    font-family: "dico-code-one", mono;
    color: #674D2C;
}

a {
    font-family: "dico-code-one", mono;
    text-decoration: none;
}

h2 {
    font-family: "nazare", mono;
    color: #674D2C;
}

h3 {
    font-family: "dico-code-one", mono;
    color: #674D2C;
}

/* Full-height sections */
section {
    height: 100vh;
    /* Ensure each section always fills the viewport height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    text-align: center;
    width: 100%;
    /* Ensure full width */
}

#title {
    background-color: #003D24;
    /* Alice blue */
    height: 100vh;
    /* Ensure it fills the viewport height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1rem;
    width: 100%;
    /* Ensure full width */
    font-family: 'nazare', Courier, monospace;
    color: #E3C140;
    position: relative;
    /* Ensure child elements can be positioned absolutely */
    overflow: visible;
    /* ensure large letters or overlay won't be clipped */
    padding-bottom: 6rem;
    /* provide more space for descenders */
}

/* Decorative border variables and precise centered borders (outer + inner) */
#title {
    /* sizing matching previous min() expressions */
    --decor-outer-w: min(90vw, calc(100vw - 6rem));
    --decor-outer-h: min(78vh, calc(100vh - 6rem));
    --decor-gap: 2rem;
    /* uniform whitespace between outer and inner border */
}

#title::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    width: var(--decor-outer-w);
    height: var(--decor-outer-h);
    background: transparent;
    border: 3px solid #674D2C;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 2;
    border-radius: 0;
}

#title::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    width: calc(var(--decor-outer-w) - (2 * var(--decor-gap)));
    height: calc(var(--decor-outer-h) - (2 * var(--decor-gap)));
    background: transparent;
    border: 1px solid #674D2C;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 3;
    border-radius: 30px;
}

#title h1 {
    font-size: clamp(2rem, 8vw, 6rem);
    /* Responsive font size */
    font-weight: bold;
    /* Ensure it stands out */
    line-height: 1.2;
    /* Adjust line height for readability */
    width: 100%;
    /* Ensure it fills the width */
    text-align: center;
    /* Center-align the text */
    color: #E3C140;
}

#title p {
    color: #FFF8E7;
    /* Gold color for the text */
}

.animated-image {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
}

.animated-image img {
    width: 50px;
    /* Set a smaller width */
    height: auto;
    /* Maintain aspect ratio */
}

/* Placeholder background colors for sections */
#about {
    background-color: #FFF8E7;
    /* Light blue */
    padding: 2rem;
    /* Add padding to ensure content fits */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: auto;
    /* Adjust height based on content */
    position: relative;
    /* Ensure images are positioned relative to this section */
    overflow: hidden;
    /* Hide any overflowing content */
}

#about p {
    text-align: left;
    /* Align text to the left */
    font-size: 1rem;
    line-height: 1.5;
}

.drop-cap-image {
    width: 5vw;
    /* Set width relative to viewport width for responsiveness */
    max-width: 3rem;
    /* Ensure it doesn't get too large */
    min-width: 2rem;
    /* Ensure it doesn't get too small */
    height: auto;
    /* Maintain aspect ratio */
    float: left;
    /* Float the image to allow text wrapping */
    margin-right: 0.5rem;
    /* Add spacing between the image and text */
    margin-top: 0.1rem;
    /* Slight adjustment to align with the text */
}

.about-images {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.image-container {
    position: relative;
    /* Ensure the center image stays within the section */
    width: 100%;
    /* Full width */
    height: auto;
    /* Adjust height based on content */
}

#projects {
    background-color: #FFF8E7;
    /* Bisque */
    padding: 2rem;
    /* Add padding to ensure content fits */
    height: auto;
    /* Allow height to grow based on content */
    overflow: visible;
    /* Prevent elements from being cut off */
}

#projects p {
    text-align: left;
    /* Align text to the left */
    margin-bottom: 1.5rem;
}

#projects h2 {
    margin-bottom: 1.5rem;
    /* Increase space below the h2 */
}

#projects h3 {
    margin-bottom: .5rem;
    text-align: left;
}

#contact {
    background-color: #003D24;
    /* Light-colored background */
}

#contact .image-container.contact-image {
    background-color: #FFF8E7;
    border-radius: 15px;
    /* Rounded corners */
    padding: 1rem;
    /* Add padding for spacing */
    position: relative;
    /* Ensure pseudo-element is positioned correctly */
    overflow: hidden;
    /* Clip any overflowing content */
    height: fit-content;
}

#contact .image-container.contact-image p {
    color: #674D2C;
    font-size: 90%;
}

#contact .image-container.contact-image a {
    color: #674D2C;
    text-decoration: underline;
    font-size: 90%;
}


#contact .image-container.contact-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('images/notebook-dark.png') repeat;
    /* Optional texture image */
    background-size: 50px 50px;
    /* Adjust texture size */
    opacity: 1;
    /* Subtle texture effect */
    pointer-events: none;
    /* Ensure it doesn't interfere with interactions */
    z-index: 0;
    /* Place behind content */
}

#contact .contact-columns {
    position: relative;
    z-index: 1;
    /* Ensure content is above the texture */
}

#contact .left-column img {
    width: 2em;
    /* Set a fixed width */
    height: auto;
    /* Maintain the original aspect ratio */
    display: block;
    /* Ensure proper alignment */
    margin: 0 auto;
    /* Center the images horizontally */
}

/* Header */
header {
    position: relative;
    background-color: #003D24;
}

/* Hamburger Menu */
#menu-toggle {
    background: none;
    border: none;
    font-size: 2rem;
    /* Ensure the icon is always visible */
    cursor: pointer;
    position: fixed;
    /* Ensure fixed position */
    top: 1rem;
    right: 1rem;
    /* Top-right corner */
    z-index: 1001;
    /* Ensure it is always in front of the menu header */
    width: auto;
    transition: transform 0.3s ease, color 0.3s ease;
    /* Smooth transition for icon */
}

#menu-toggle:hover {
    transform: scale(1.1);
    /* Slightly enlarge on hover */
    /* Keep the same color to ensure visibility */
}

#menu-toggle.light-background {
    color: #003D24;
    /* Dark color for visibility on light backgrounds */
}

#menu-header {
    display: flex;
    justify-content: center;
    /* Center content horizontally */
    align-items: center;
    position: fixed;
    top: 0;
    /* Fill to the top of the page */
    left: 0;
    right: 0;
    background-color: #003D24;
    color: #fff;
    padding: 0.5rem 1rem;
    z-index: 999;
    /* Below the toggle button but above the menu */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    /* Smooth fade-in/out */
    height: 4rem;
    /* Ensure it has a consistent height */
}

#menu-header img {
    height: 40px;
    /* Adjust logo size */
    position: absolute;
    /* Position the logo absolutely */
    left: 1rem;
    /* Align it to the left */
}

#menu-header h2 {
    margin: 0;
    /* Remove default margin */
    text-align: center;
    /* Ensure text is centered */
    color: #FFF8E7;
}

#menu-header:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

#menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: fixed;
    /* Change to fixed position */
    top: 4rem;
    /* Push down to avoid overlapping with the header */
    right: 0;
    left: 0;
    /* Extend to fill the entire width */
    background-color: #FFF8E7;
    padding: 1rem;
    border-radius: 0 0 0.5rem 0.5rem;
    /* Remove top border radius */
    z-index: 3000;
    /* Below the menu header */
    opacity: 0;
    /* Start hidden */
    transform: translateY(-10px);
    /* Slide up slightly */
    transition: opacity 0.3s ease, transform 0.3s ease;
    /* Smooth animation */
    max-height: calc(100vh - 4rem);
    /* Ensure it doesn't exceed the viewport height */
    overflow-y: auto;
    /* Enable vertical scrolling if needed */
}

#menu li {
    border-bottom: 1px solid #372417;
    /* Add a small border to list items */
    padding-bottom: 0.5rem;
}

#menu li:last-child {
    border-bottom: none;
    /* Remove border for the last item */
}

#menu.hidden {
    opacity: 0;
    /* Hidden state */
    transform: translateY(-10px);
    /* Slide up */
    pointer-events: none;
    /* Prevent interaction when hidden */
}

#menu:not(.hidden) {
    opacity: 1;
    /* Visible state */
    transform: translateY(0);
    /* Reset position */
}

#menu a {
    text-decoration: none;
    /* Remove underlining */
    color: #674D2C;
}

/* Ensure menu is hidden by default */
.hidden {
    display: block;
    /* Ensure the element is still block-level for transitions */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

/* Menu Overlay */
#menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Fill the entire screen */
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent background */
    z-index: 998;
    /* Below the menu but above other content */
    opacity: 0;
    pointer-events: none;
    /* Prevent interaction when hidden */
    transition: opacity 0.3s ease;
    /* Smooth fade-in/out */
    overflow: auto;
    /* Allow scrolling */
}

#menu-overlay:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
    /* Enable interaction when visible */
}

/* Menu Icon Colors */
.menu-icon-light {
    color: #59714B;
    /* Dark color for light sections */
}

.menu-icon-dark {
    color: #E3C140;
    ;
    /* Light color for dark sections */
}

.menu-icon-blue {
    color: #59714B;
    /* Blue color for specific sections */
}

.menu-icon-red {
    color: #59714B;
    /* Red color for specific sections */
}

.menu-icon-green {
    color: #E3C140;
    ;
    /* Green color for specific sections */
}

/* Projects Section */
.projects-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {

    /* Scoped desktop layout for projects-grid items only. Does not modify mobile styles or other selectors. */
    .projects-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
        width: 90%;
        margin: 4rem auto;
        align-items: stretch;
    }

    /* Base reset for project items in this desktop layout */
    .projects-grid>.project-item {
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
        box-shadow: none;
        border-radius: 0;
        min-height: 44vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        overflow: visible;
    }

    /* LEFT CELL: text column with decorative borders */
    .projects-grid>.project-item:first-child {
        padding: 3rem 3rem 2.5rem 3rem;
        justify-content: flex-start;
    }

    /* decorative outer/inner borders for left cell only */
    .projects-grid>.project-item:first-child::after {
        /* outer border fills the full cell area */
        content: "";
        position: absolute;
        inset: 0;
        /* fill the whole parent element */
        border: 3px solid #674D2C;
        box-sizing: border-box;
        pointer-events: none;
        z-index: 1;
    }

    .projects-grid>.project-item:first-child::before {
        /* inner border inset so content has breathing room */
        content: "";
        position: absolute;
        inset: 2.5rem;
        /* creates the inner border smaller than the outer */
        border: 1px solid #674D2C;
        box-sizing: border-box;
        pointer-events: none;
        z-index: 2;
        border-radius: 18px;
    }

    /* Ensure text sits above borders */
    .projects-grid>.project-item:first-child>* {
        position: relative !important;
        z-index: 4 !important;
    }

    /* Stack heading, description and link vertically and align left */
    .projects-grid>.project-item:first-child .text-wrapper {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
        text-align: left;
        max-width: 70%;
    }

    .projects-grid>.project-item:first-child h3 {
        margin: 0 0 0.25rem 0;
        font-size: 2.2rem;
        color: #003D24;
    }

    .projects-grid>.project-item:first-child .project-description {
        margin: 0;
        color: #674D2C;
        line-height: 1.5;
    }

    /* bottom-area: scroll text + small arrow */
    .projects-grid>.project-item:first-child .scroll-more {
        margin-top: auto;
        display: flex;
        align-items: center;
        gap: 0.6rem;
        color: #003D24;
        font-family: "taprom", mono;
        font-size: 0.95rem;
    }

    .projects-grid>.project-item:first-child .scroll-more img {
        width: 18px;
        height: auto;
        display: block;
    }

    /* RIGHT CELL: green filled background with centered large square and overlay smaller image */
    .projects-grid>.project-item:nth-child(2) {
        background: #003D24;
        padding: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .projects-grid>.project-item:nth-child(2) .image-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    /* big square image (first img inside wrapper) */
    .projects-grid>.project-item:nth-child(2) .image-wrapper img:first-child {
        width: 60%;
        max-width: 520px;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        z-index: 2;
        display: block;
    }

    /* overlay smaller centered image (second img if present) */
    .projects-grid>.project-item:nth-child(2) .image-wrapper img+img {
        position: absolute;
        width: 28%;
        max-width: 220px;
        aspect-ratio: 1 / 1;
        object-fit: contain;
        z-index: 3;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

@media (min-width:1024px) {

    /* Make the large square fill most of the right cell (leave small padding) */
    .projects-grid>.project-item:nth-child(2) .image-wrapper img.first-child,
    .projects-grid>.project-item:nth-child(2) .image-wrapper img.big-image,
    .projects-grid>.project-item:nth-child(2) .image-wrapper img:first-child {
        width: calc(80% - 3.5rem) !important;
        max-width: none !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        display: block !important;
        z-index: 2 !important;
    }

    /* Make the overlay image larger but still centered */
    .projects-grid>.project-item:nth-child(2) .image-wrapper img+img,
    .projects-grid>.project-item:nth-child(2) .image-wrapper img.small-image {
        width: 36% !important;
        max-width: none !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: contain !important;
        z-index: 3 !important;
    }

    /* If needed, reduce right cell padding slightly so images sit closer to edges */
    .projects-grid>.project-item:nth-child(2) {
        padding: 1.5rem !important;
        height: 100% !important;
    }
}

/* Slow rotation for the right-cell large image */
@keyframes rotateSlow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (min-width:1024px) {

    .projects-grid>.project-item:nth-child(2) .image-wrapper img:first-child,
    .projects-grid>.project-item:nth-child(2) .image-wrapper img.big-image {
        animation: rotateSlow 60s linear infinite;
        transform-origin: 50% 50%;
        will-change: transform;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

    .projects-grid>.project-item:nth-child(2) .image-wrapper img:first-child,
    .projects-grid>.project-item:nth-child(2) .image-wrapper img.big-image {
        animation: none !important;
        transform: none !important;
    }
}

/* Project Item */
.project-item {
    display: flex;
    flex-direction: column;
    /* Arrange items in a column */
    justify-content: flex-start;
    /* Align items to the top */
    align-items: center;
    /* Center items horizontally */
    text-align: center;
    gap: 0.5rem;
    /* Add spacing between items */
    border-radius: 15px;
    /* Rounded corners */
    overflow: visible;
    /* Ensure content stays within the border */
    margin-bottom: 2rem;
    /* Match carousel item spacing */
    border: 5px solid #372417;
    /* Match carousel border */
    min-height: fit-content;
}

.project-item,
.carousel-item {
    background-color: #fff;
    /* Set a uniform background color */
}

.project-item a {
    width: 100%;
}

.project-item h3 {
    margin-top: 1rem;
    font-size: 1.5rem;
    color: #59714B;
    /* Match carousel text color */
}

.project-item .image-container {
    width: 100%;
    /* Full width */
    height: auto;
    /* Adjust height based on content */
    object-fit: cover;
    /* Ensure the image covers the container */
    aspect-ratio: 16 / 9;
    /* Match carousel aspect ratio */
}

.project-item .image-wrapper img {
    width: 100%;
    /* Full width */
    /* Set a specific height */

}

.image-container {
    position: relative;
    display: block;
    /* Ensure it spans the full width */
    width: 100%;
    /* Full width of the page */
    border: 5px solid #372417;
    /* Light blue border */
    border-radius: 15px;
    /* Rounded corners */
    overflow: hidden;
    /* Ensure content stays within the border */
    margin: 0 auto;
    /* Center the container */
}

.about-images .image-container {
    position: relative;
    display: block;
    /* Ensure it spans the full width */
    width: 90%;
    /* Full width of the page */
    border: none;
    /* Light blue border */
    border-radius: 15px;
    /* Rounded corners */
    overflow: hidden;
    /* Ensure content stays within the border */
    margin: 0 auto;
    /* Center the container */
}

.image-container img {
    display: block;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Fill the container while maintaining aspect ratio */
    object-fit: cover;
    /* Ensure the image covers the container */
    border-radius: 10px;
    /* Slightly smaller radius for the image */
}

.projects-grid .image-container img {
    aspect-ratio: 16 / 9;
    /* Landscape aspect ratio */
    object-fit: cover;
    /* Ensure the image covers the container */
}

.image-label {
    position: relative;
    top: 10px;
    right: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    /* Semi-transparent background */
    padding: 0.5rem;
    font-size: 0.9rem;
    color: #333;
    border-radius: 5px;
    transform: rotate(-10deg);
    /* Slight rotation */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* Add a subtle shadow */
}

/* Two Columns for Projects */
.project-columns {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.column {
    flex: 1;
    /* Ensure equal width for both columns */
}

.column a {
    display: block;
    margin-bottom: 1rem;
    /* Add vertical gap between images */
}

.image-container {
    position: relative;
    display: block;
    width: 100%;
    /* Full width of the column */
    border-radius: 15px;
    /* Rounded corners */
    overflow: hidden;
}

.image-container img {
    display: block;
    width: 100%;
    /* Fill the container width */
    height: 100%;
    /* Fill the container height */
    object-fit: cover;
    /* Ensure the image covers the container */
    border-radius: 10px;
    /* Slightly smaller radius for the image */
}

.image-container.red-border {
    border: 5px solid #59714B;
    /* Tomato red border */
}

.image-container.green-border {
    border: 5px solid #AD8200;
    /* Lime green border */
}

.image-container.blue-border {
    border: 5px solid #BAA22B;
    /* Dodger blue border */
}

.image-container.yellow-border {
    border: 5px solid #372417;
    /* Gold border */
}

/* Projects Carousel */
.projects-carousel {
    display: flex;
    overflow-x: scroll;
    /* Enable horizontal scrolling */
    scroll-snap-type: x mandatory;
    /* Snap scrolling */
    gap: 1rem;
    /* Space between items */
    width: 100%;
    scroll-behavior: smooth;
    /* Smooth scrolling */
    height: fit-content;
    /* Adjust height based on contents */
}

.carousel-item {
    display: flex;
    flex-direction: column;
    /* Arrange items in a column */
    justify-content: flex-start;
    /* Align items to the top */
    align-items: center;
    /* Center items horizontally */
    text-align: center;
    gap: 0.5rem;
    /* Add spacing between items */
    flex: 0 0 100%;
    /* Each item spans full screen width */
    scroll-snap-align: center;
    /* Snap to center */
    border-radius: 15px;
    /* Rounded corners */
    overflow: hidden;
    /* Ensure content stays within the border */
    margin-bottom: 2rem;
    /* Match project item spacing */

}

.carousel-item img {
    width: 100%;
    /* Full width */
    height: 100%;
    /* Match the height of the project item */
    object-fit: cover;
    /* Ensure the image covers the container */
    aspect-ratio: 16 / 9;
}

.carousel-item:nth-child(1) {
    border: 5px solid #59714B;
    /* Tomato red border */
}

.carousel-item:nth-child(2) {
    border: 5px solid #AD8200;
    /* Lime green border */
}

.carousel-item:nth-child(3) {
    border: 5px solid #BAA22B;
    /* Dodger blue border */
}

.carousel-item:nth-child(4) {
    border: 5px solid #372417;
    /* Gold border */
}

.carousel-item h3 {
    margin-top: 1rem;
    font-size: 1.5rem;
    color: #59714B;
}

.carousel-item.back-to-beginning {
    display: none;
    /* Ensure the item is not visible */
    scroll-snap-align: none;
    /* Prevent snapping */
}

/* Navigation Dots */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.dot {
    width: 10px;
    height: 10px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: #003D24;
}

/* Contact Form */
form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 400px;
}

input,
textarea,
button {
    width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
}

button {
    background-color: transparent;
    color: #FFF8E7;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
}

button:hover {
    transform: scale(1.5);
}

/* Contact Section */
.contact-image {
    position: relative;
    width: 100%;
    /* Full width */
    height: 50%;
    /* Flexible height based on contents */
    overflow: hidden;
    border: none;
    /* Removed border */
    border-radius: 0;
    /* Removed border radius */
}

.contact-image img {
    display: block;
    width: 100%;
    /* Fill the container width */
    height: 100%;
    /* Fill the container height */
    object-fit: cover;
    /* Ensure the image covers the container */
}

.contact-columns {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    color: #fff;
    /* Text color */
}

.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* Ensure rows span the full width */
    margin-bottom: 1rem;
    /* Space between rows */
    gap: .5rem;
}

.left-column img {
    display: block;
    width: 50px;
    /* Icon size */
    height: 50px;
}

.right-column a {
    display: block;
    color: #fff;
    /* Link color */
    text-decoration: none;
}

.right-column a:hover {
    text-decoration: underline;
    /* Add underline on hover */
}

.center-image {
    position: relative;
    /* Ensure the smaller image can be positioned relative to the center image */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    /* Make the center image large */
    margin: 0 auto;
    /* Center the image horizontally */
}

.center-image img {
    width: 100%;
    /* Fill the container */
    height: auto;
    /* Maintain original aspect ratio */
    object-fit: contain;
    /* Prevent cropping */
    border: none;
    /* Remove border */
    border-radius: 0;
    /* Remove border radius */
    box-shadow: none;
    /* Remove drop shadow */
}

.center-image img,
.top-right-image {
    width: 100%;
    /* Set width to fill the container */
    height: auto;
    /* Maintain original aspect ratio */
    object-fit: contain;
    /* Prevent cropping and preserve the original ratio */
    box-shadow: none;
    /* Remove drop shadow */
    border-radius: 0;
    /* Remove border radius */
}

.right-image {
    position: absolute;
    top: 50%;
    right: -50px;
    width: 5em;
    height: auto;
    animation: rotateImageBottomLeft 2s infinite;
    transform: translateY(-50%);
    /* Adjust for vertical centering */
    pointer-events: none;
    /* Prevent interaction with the off-screen part */
}

.bottom-right-image {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 5em;
    height: auto;
    animation: rotateImage 2s infinite;
    transform: translate(50%, 50%);
    /* Adjust for positioning relative to the center image */
    pointer-events: none;
    /* Prevent interaction with the off-screen part */
}

@keyframes rotateImage {
    0% {
        transform: rotate(10deg);
    }

    50% {
        transform: rotate(15deg);
    }

    100% {
        transform: rotate(10deg);
    }
}

@keyframes rotateImageBottomLeft {
    0% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(-15deg);
    }

    100% {
        transform: rotate(-10deg);
    }
}

@keyframes rotateImageTopLeft {
    0% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(-15deg);
    }

    100% {
        transform: rotate(-10deg);
    }
}

@keyframes rotateImageLeft {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.top-right-image {
    position: absolute;
    top: 10px;
    /* Position near the top */
    right: 10px;
    /* Position near the right */
    width: 5em;
    /* Small size */
    height: auto;
    /* Maintain aspect ratio */
    animation: rotateImage 2s infinite;
    /* Apply the animation */
}

.bottom-left-image {
    position: absolute;
    bottom: 20px;
    /* Position near the top */
    left: -20px;
    /* Position near the right */
    width: 5em;
    /* Small size */
    height: auto;
    /* Maintain aspect ratio */
    animation: rotateImageBottomLeft 2s infinite;
    /* Apply the animation */
}

.top-left-image {
    position: absolute;
    top: 20px;
    /* Position near the top */
    left: 0px;
    /* Position near the left */
    width: 5em;
    /* Small size */
    height: auto;
    /* Maintain aspect ratio */
    animation: rotateImageTopLeft 2s infinite;
    /* Apply the animation */
}

.left-image {
    position: absolute;
    top: 50%;
    /* Center vertically relative to the center image */
    left: -50px;
    /* Position near the left */
    width: 5em;
    /* Small size */
    height: auto;
    /* Maintain aspect ratio */
    animation: rotateImageLeft 2s infinite;
    /* Apply the animation */
    transform: translateY(-50%);
    /* Adjust for vertical centering */
}

/* Footer Icons */
footer {
    background-color: #FFF8E7;
    padding: 1rem;
}

.footer-icons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    /* Space between icons */
    margin-top: 3.5rem;
}

.footer-icon {
    width: 40px;
    height: 40px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    /* Smooth transition for hover effects */
}

.footer-icon:hover {
    transform: scale(1.2);
    /* Slightly enlarge the icon */
    opacity: 0.8;
    /* Slightly reduce opacity */
}

/* Scroll to Top Icon */
.scroll-to-top {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.scroll-to-top a {
    font-size: 1rem;
    text-decoration: underline;
    color: #59714B;
    cursor: pointer;
    transition: color 0.3s ease;
}

.scroll-to-top a:hover {
    color: #674D2C;
}

/* New Rows in Contact Section */
.full-width-column {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.contact-columns .row p,
.contact-columns .row a {
    margin: 0;
    font-size: 1rem;
    color: #fff;
    /* Text color */
    word-wrap: break-word;
    /* Break long words */
    overflow-wrap: break-word;
    /* Ensure text wraps properly */
    text-align: center;
    /* Center-align text */
    font-size: clamp(0.8rem, 2vw, 1rem);
    /* Shrink text dynamically */
}

/* Education Timeline */
.education-timeline {
    list-style: none;
    padding: 0;
    margin-top: 2rem;
}

.education-timeline li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    opacity: 0;
    /* Initially hidden */
    transform: translateY(20px);
    /* Start slightly below */
    transition: opacity 0.8s ease, transform 0.8s ease;
    /* Slower animation */
    cursor: pointer;
}

.education-timeline li.visible {
    opacity: 1;
    /* Fully visible */
    transform: translateY(0);
    /* Reset position */
}

.timeline-icon {
    width: 50px;
    height: auto;
    margin-right: 1rem;
}

.timeline-content {
    max-width: 600px;
}

.timeline-content h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: bold;
    color: #003D24;
}

.timeline-date {
    font-size: 0.9rem;
    color: #674D2C;
    margin-bottom: 0.5rem;
    display: block;
}

.timeline-content p {
    margin: 0;
    font-size: 1rem;
    color: #674D2C;
}

.timeline-description {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.timeline-description:not(.hidden) {
    max-height: 500px;
    /* Adjust based on content */
    opacity: 1;
}

.timeline-heading {
    margin-top: 2rem;
    /* Add margin above the heading */
    margin-bottom: 1rem;
    /* Add margin below the heading */
    font-size: 1.5rem;
    /* Optional: Adjust font size */
    text-align: center;
    /* Optional: Center-align the heading */
}

/* Timeline Item Hover Animation */
.education-timeline .timeline-item {
    transition: transform 0.5s ease-in-out;
}

.education-timeline .timeline-item:hover {
    transform: translateX(15px) translateY(-5px);
    /* Move slightly to the right and up */
}

/* Footer Bottom */
.footer-bottom {
    text-align: center;
    position: relative;
    margin-top: 1.5rem;
    /* Push it further down */
    font-size: 0.9rem;
    color: #003D24;
    border-top: #003D24 1px solid;

}

.footer-icon-small {
    display: block;
    margin: 0.5rem auto;
    width: 4rem;
    /* Small size */
    height: auto;
}

footer p {
    text-align: center;
}

/* Project Description */
.project-description {
    font-size: 1rem;
    color: #674D2C;
    text-align: left;
    margin-top: -.5rem;
    /* Reduce top margin */

    /* Reduce padding */
}

/* Image Wrapper */
.image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Text Wrapper */
.text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    /* Add spacing between text elements */
    height: 100%;
    margin: 1rem;
}

#projects .text-wrapper h3 {
    text-align: center;
    /* Center the h3 text */
}

/* Lees Meer */
.lees-meer {
    display: block;
    font-size: 0.9rem;
    color: #003D24;
    margin-top: 0.5rem;
    cursor: pointer;
    transition: color 0.3s ease;
}

.lees-meer:hover {
    color: #59714B;
}

/* Clickable Elements */
.clickable {
    cursor: pointer;
}

/* Icon Grid */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Set exactly three items per row */
    gap: .5rem;
    justify-content: center;
    margin: 2rem;
}


.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 120px;
    /* Set a fixed minimum height so the grid cell keeps its space when the image is hidden
       (prevents page height from shrinking when icons animate out of view). */
    min-height: 120px;
    /* Prevent the item from shrinking when its contents are animated/hidden */
    flex: 0 0 auto;
    /* Set a stable layout box for smoother scrolling */
}

.icon-item img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
    opacity: 0;
    /* Use translate3d to preserve the vertical offset and enable GPU compositing */
    transform: translate3d(0, 20px, 0);
    -webkit-transform: translate3d(0, 20px, 0);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.icon-grid .icon-item p {
    /* Ensure captions under icons are centered and occupy full item width */
    text-align: center;
    width: 100%;
    margin-top: 0.5rem;
    color: #674D2C;
    font-size: 1rem;
    line-height: 1.2;
}

/* Force-center icon captions (last-resort override) */
.icon-grid .icon-item p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* Ensure visible/hidden state transitions remain cheap and explicit */
.icon-grid img.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    will-change: opacity, transform;
}

/* Ensure icon images are not affected by the global .hidden utility which sets max-height:0
   More specific selectors override the generic .hidden to prevent layout collapse. */
.icon-grid img.hidden {
    /* keep layout space, don't collapse */
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 0;
    /* still hidden visually */
    transform: translate3d(0, 20px, 0) !important;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .icon-item img {
        transition: none;
        transform: none;
        will-change: auto;
    }
}

/* Hide Desktop Header on Mobile Screens */
#desktop-header {
    display: none;
    pointer-events: none;
}

/* Media Query for Bigger Screen Sizes (Laptops and Desktops) */
@media (min-width: 1024px) {

    #menu-toggle,
    #menu-overlay,
    #menu {
        display: none;
    }

    #desktop-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 2rem;
        background-color: #003D24;
        color: #FFF8E7;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        pointer-events: auto;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
        /* Smooth transition for background and shadow */
    }

    #desktop-header.transparent {
        height: 5.5rem !important;
        min-height: 5.5rem !important;
    }

    #desktop-header.transparent {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
    }

    #desktop-header.transparent {
        background-color: #003D24 !important;
        /* green override only for transparent state */
        box-shadow: none !important;
    }

    #desktop-header {
        height: 4rem !important;
        min-height: 4rem !important;
    }

    #desktop-header.transparent>img {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        height: 50px !important;
        width: auto !important;
        z-index: 1002 !important;
        pointer-events: none !important;
        /* clicks pass through to nav */
    }

    #desktop-header h2 {
        margin: 0 auto;
        /* Center horizontally */
        font-size: 1.5rem;
        font-family: "nazare", mono;
        position: absolute;
        /* Position it absolutely */
        left: 50%;
        /* Move to the center */
        transform: translateX(-50%);
        /* Adjust for centering */
        color: #FFF8E7;
    }

    #desktop-header img {
        height: 50px;
    }

    #desktop-header nav {
        display: flex;
        gap: 2rem;
    }

    #desktop-header nav a {
        text-decoration: none;
        color: #FFF8E7;
        font-family: "dico-code-one", mono;
        font-size: 1rem;
    }

    #desktop-header nav a:hover {
        text-decoration: underline;
    }

    /* Adjust contact image container width */
    #contact .image-container.contact-image {
        width: fit-content;
        /* Make the width smaller for larger screens */
        margin: 0 auto;
        /* Center the container */
    }

    /* Adjust Dewi image size */
    .about-images .center-image img {
        height: 80vh;
        /* Set height to 80% of the viewport height */
        width: auto;
        /* Maintain aspect ratio */
    }

    .projects-carousel {
        display: none;
        /* Hide the carousel on larger screens */
    }

    .projects-grid-large {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* Two items per row */
        gap: 1rem;
        /* Add spacing between items */
        width: 70%;
        margin: 4rem;
        /* Add spacing above the grid */
    }

    .projects-grid-large .carousel-item {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
        gap: 0.5rem;
        border-radius: 15px;
        overflow: hidden;
        border: 5px solid #372417;
        background-color: #fff;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        /* Smooth transition for hover effects */
    }

    .projects-grid-large .carousel-item:hover {
        transform: scale(1.05);
        /* Slightly enlarge the item */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        /* Add a subtle shadow */
    }

    .projects-grid-large .carousel-item img {
        width: 100%;
        height: auto;
        object-fit: cover;
        aspect-ratio: 16 / 9;
    }

    .projects-grid-large .carousel-item h3 {
        margin-top: 1rem;
        font-size: 1.5rem;
        color: #59714B;
    }

    .projects-grid-large .carousel-item .project-description {
        font-size: 1rem;
        color: #674D2C;
        text-align: left;
        margin-top: -0.5rem;
    }

    .carousel-dots {
        display: none;
        /* Hide the dots on larger screens */
        pointer-events: none;
        /* Disable interaction */
    }

    .projects-grid .project-item {
        width: 70%;
        /* Set the width to 70% */
        margin: 0 auto;
        /* Center horizontally */
    }

    .about-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Two columns: left and right */
        grid-template-rows: auto auto;
        /* Two rows for the right column */
        gap: 2rem;
        /* Add spacing between grid items */
        align-items: start;
        /* Align content at the top */
        height: fit-content;
    }

    .about-grid h1 {
        grid-column: 1 / 2;
        /* Place heading in the left column */
        grid-row: 1 / 2;
        /* First row */
        font-size: 5rem;
    }

    .about-grid p {
        grid-column: 1 / 2;
        /* Place text in the left column */
        grid-row: 2 / 3;
        /* Second row */
        margin: 4rem;
        margin-top: 0;
    }

    .about-images {
        grid-column: 2 / 3;
        /* Place images in the right column */
        grid-row: 1 / 3;
        /* Span both rows */
    }

    #desktop-header::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url('images/soft-wallpaper.png') repeat;
        /* Optional texture image */
        background-size: 50px 50px;
        /* Adjust texture size */
        opacity: 1;
        /* Subtle texture effect */
        pointer-events: none;
        /* Ensure it doesn't interfere with interactions */
        z-index: 0;
        /* Place behind content */
    }

    .about-images .top-right-image {
        top: 20%;
        right: 20%;

        /* Position near the center image */
    }

    .about-images .top-left-image {
        top: 20%;
        left: -2%;
        /* Position near the center image */
    }

    .about-images .bottom-left-image {
        bottom: 10%;
        left: 2%;
        /* Position near the center image */
    }

    .about-images .left-image {
        top: 50%;
        left: -5%;
        transform: translateY(-50%);
        /* Adjust position to be closer to the center image */
    }

    .about-images .right-image {
        top: 50%;
        right: 18%;
        transform: translateY(-50%);
        /* Position near the center image */
        pointer-events: none;
        /* Prevent interaction with the off-screen part */
    }

    .about-images .bottom-right-image {
        bottom: 10%;
        right: 25%;
        transform: translate(0, 0);
        /* Position near the center image */
    }

    #projects h2 {
        margin-top: 6rem;
        font-size: 5rem;
        color: #003D24;
    }

    #projects p {
        width: 80%;
        text-align: center;
        margin-top: -1rem;
    }

    .about-grid {
        margin-top: 6rem;
    }


    #contact h2 {
        margin-bottom: .5rem;
        font-size: 5rem;
        color: #FFF8E7;
        font-family: 'taprom', sans-serif;
    }

    #contact p {
        text-align: left;
        margin-bottom: 2rem;
        width: 40%;
    }

    #contact .contact-columns p {
        text-align: left;
        margin-bottom: 2rem;
        width: 100%;
    }

    #projects .project-item p {
        width: 100%;
        text-align: left;
        margin-top: 0rem;
    }

    #projects h3:nth-of-type(2) {
        margin-top: 8rem;
        margin-bottom: -2rem;
        text-align: left;
    }
}

/* Interactive Title Styles */
#title .title-canvas {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.interactive-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    /* keep letters on one line */
    line-height: 1;
    padding-bottom: 1.5rem;
    /* extra breathing room so letters' descenders aren't clipped */
}

.title-letter {
    /* large responsive size filling center width */
    font-family: 'Londrina Shadow', cursive !important;
    font-size: clamp(3rem, 12vw, 12rem);
    display: inline-block;
    transform-origin: center;
    /* smoother transitions for hover (transform + color + letter-spacing) */
    transition: transform 0.9s cubic-bezier(.22, .9, .27, 1),
        color 0.6s ease,
        letter-spacing 0.6s ease !important;
    will-change: transform, color;
    letter-spacing: -0.03em;
    /* make letters sit like a normal word */
    padding: 0 0.06em;
    /* small spacing to mimic standard text */
    color: #E3C140;
    cursor: pointer;
    overflow: visible !important;
    /* ensure decorative font parts are visible */
    margin-bottom: 0.4rem;
    /* small extra space to avoid clipping */
}

/* Debug: simple hover test for title letters (changes color + scale) */
.title-letter:hover {
    color: #FFF8E7 !important;
    transform: scale(1.06) !important;
    /* font-family removed so persistent .alt class controls font change */
}

.title-space {
    width: 0.5ch;
}

/* Alternate font state */
.title-letter.alt {
    font-family: 'Londrina Solid', sans-serif !important;
    font-weight: 400 !important;
    transform: scale(1.02);
}

/* Focus styles for accessibility */
.title-letter:focus {
    outline: 2px solid rgba(227, 193, 64, 0.6);
    outline-offset: 6px;
}

/* Ensure the title section background and stacking don't interfere */
#title {
    background-color: #FFF8E7;
}

/* Restore footer and contact paragraph styles (override accidental overrides) */
footer .footer-text p {
    text-align: center !important;
    font-size: 2rem !important;
    color: #003D24 !important;
    margin-bottom: 1rem !important;
    font-family: "dico-code-one", mono !important;
}


#contact .contact-columns p,
#contact .image-container.contact-image p {
    color: #674D2C !important;
    text-align: left !important;
    margin-bottom: 2rem !important;
    font-family: "dico-code-one", mono !important;
}

#contact p {
    color: #FFF8E7;
}

#contact h3 {
    color: #003D24;
}

/* Hide checkbox inputs visually but keep them accessible */
.letter-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* When a checkbox is checked, style the following label (persist font) */
.letter-toggle:checked+.title-letter {
    font-family: 'Londrina Solid', sans-serif !important;
    font-weight: 400 !important;
    color: #FFF8E7 !important;
    transform: scale(1.02) !important;
}

/* Smooth transitions specifically for checked letters to avoid abrupt hover swap */
.letter-toggle:checked+.title-letter {
    /* ensure same easing as base */
    transition: transform 0.9s cubic-bezier(.22, .9, .27, 1),
        color 0.6s ease,
        letter-spacing 0.6s ease !important;
    will-change: transform, color;
}

/* Reduce the hover scale and match easing for checked letters */
.letter-toggle:checked+.title-letter:hover,
.letter-toggle:checked+.title-letter:focus,
.letter-toggle:checked+.title-letter:focus-visible {
    transform: scale(1.03) !important;
    /* gentler scale */
    color: #FFF8E7 !important;
}

/* When a letter is checked, hovering or focusing should show the original (shadow) font */
.letter-toggle:checked+.title-letter:hover,
.letter-toggle:checked+.title-letter:focus,
.letter-toggle:checked+.title-letter:focus-visible {
    font-family: 'Londrina Shadow', cursive !important;
    font-weight: 400 !important;
}

/* Ensure labels are keyboard-focusable */
.title-letter {
    /* keep existing rules... */
    -webkit-user-select: none;
    user-select: none;
    /* label needs pointer events */
    pointer-events: auto;
}

/* allow keyboard toggling on labels */
.title-letter[for] {
    cursor: pointer;
}

/* Ensure hover and focus visually use the solid font (matches checked state) */
.title-letter:hover,
.title-letter:focus,
.title-letter:focus-visible {
    font-family: 'Londrina Solid', sans-serif !important;
    font-weight: 400 !important;
}

/* Force title-letter color for all interactive states */
.title-letter,
.title-letter:hover,
.title-letter:focus,
.title-letter:focus-visible,
.title-letter.alt,
.letter-toggle:checked+.title-letter,
.letter-toggle:checked+.title-letter:hover {
    color: #003D24 !important;
}

/* Centered decorative square in the title background */
#title::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    /* size to match viewport aspect ratio and fill most of it */
    width: min(90vw, calc(100vw - 6rem));
    height: min(78vh, calc(100vh - 6rem));
    /* capped to leave space at bottom */
    top: 48%;
    /* nudge slightly upward so bottom is visible */
    background: transparent;
    border: 3px solid #674D2C;
    /* visible border */
    box-sizing: border-box;
    pointer-events: none;
    z-index: 2;
    /* raised above the page texture (body::before z-index:1) */
    border-radius: 0px;
}

/* Smaller duplicate square inside the larger one */
#title::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    width: calc(var(--decor-outer-w) - (2 * var(--decor-gap)));
    height: calc(var(--decor-outer-h) - (2 * var(--decor-gap)));
    top: 48%;
    /* match outer so they align */
    background: transparent;
    border: 1px solid #674D2C;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 3;
    /* above the outer square */
    border-radius: 30px;
}

/* ensure the title canvas/content sits above the decorative squares */
#title .title-canvas {
    position: relative;
    z-index: 4;
    /* above both squares */
    overflow: visible;
    /* ensure the rotating word can extend beyond the canvas */
}

#title {
    /* ...existing code... */
    overflow: visible;
    /* ensure large letters or overlay won't be clipped */
    padding-bottom: 6rem;
    /* provide more space for descenders */
}

#title .title-canvas .rotating-word {
    /* ...existing code... */
    top: 66%;
    /* lower so overlay sits further down */
    transform: translate(-50%, -20%);
    /* gentler upward shift */
    line-height: 1.2;
    /* allow descenders (g, y) to render without clipping */
    overflow: visible;
    /* avoid clipping descenders */
}

/* Rotating single-word overlay (switched from pseudo-element to real DOM element .rotating-word) */
#title .title-canvas .rotating-word {
    position: absolute;
    left: 50%;
    top: 58%;
    /* sits slightly overlapping the title */
    transform: translate(-50%, -30%);
    z-index: 6;
    /* in front of title letters */
    font-family: 'Taprom', sans-serif;
    font-size: clamp(2.2rem, 6vw, 9.5rem);
    line-height: 0.9;
    color: #003D24;
    background: transparent;
    padding: 0 0.25rem;
    border-radius: 6px;
    pointer-events: none;
    white-space: nowrap;
    display: inline-block;
    max-width: 88vw;
    overflow: hidden;
    text-overflow: clip;
    word-break: keep-all;
    overflow-wrap: normal;
    text-shadow: 0 2px 0 rgba(227, 193, 64, 0.05);
    transition: opacity 0.5s ease, transform 0.5s ease, font-size 0.2s ease;
    opacity: 1;
    will-change: opacity, transform, font-size;
}

/* Fade-out state used by JS to create a smooth swap */
#title .title-canvas .rotating-word.fade-out {
    opacity: 0;
    transform: translate(-50%, -10%);
    /* slight downward shift while hidden */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

    #title .title-canvas .rotating-word,
    #title .title-canvas .rotating-word.fade-out {
        transition: none;
        transform: translate(-50%, -30%);
        opacity: 1;
    }
}

/* Small targeted fix: ensure title and inner containers don't clip descenders */
section#title,
#title,
#title .title-canvas,
#title .interactive-title,
#title .title-canvas .rotating-word,
.title-letter,
#title::before,
#title::after {
    overflow: visible !important;
}

/* Let the canvas expand beyond strict 100% height so extra padding shows */
#title .title-canvas {
    height: auto !important;
    min-height: 100vh !important;
}

/* Allow the title section to grow to fit the overlay and letters */
section#title {
    height: auto !important;
    min-height: 100vh !important;
    padding-bottom: 6rem !important;
}

.discover-btn {
    position: absolute;
    left: 50%;
    top: calc(58% + 30vh) !important;
    /* moved slightly lower */
    transform: translateX(-50%) !important;
    display: inline-block !important;
    width: auto !important;
    /* width based on text */
    z-index: 2999 !important;
    /* place well above decorative squares */
    background: transparent;
    color: #003D24;
    border: 2px solid #003D24;
    border-radius: 0px !important;
    font-family: "dico-code-one", sans-serif;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.12s ease;
}

.discover-btn:hover {
    background-color: #003D24;
    color: #FFF8E7;
    transform: translateX(-50%) translateY(-2px) !important;
}

/* Ensure button doesn't interfere with reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .discover-btn {
        transition: none;
    }
}

/* Slight adjustment for large screens where font scales bigger */
@media (min-width: 1024px) {
    section#title .discover-btn {
        top: calc(58% + 10vh) !important;
        /* slightly lower on large screens */
        padding: 0.6rem 1.1rem !important;
    }
}

/* Title section header visual update: green background, centered logo, left-aligned nav */
#title-header {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* keep nav to the left */
    z-index: 20;
    /* above decorative elements and title content */
    gap: 1rem;
    pointer-events: auto;
    background-color: #003D24;
    /* green background for title nav */
    padding: 0.5rem 1rem;
    border-radius: 10px;
    width: calc(100% - 2rem);
    max-width: 1100px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

#title-header .title-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 44px;
    width: auto;
    z-index: 22;
    /* in front of header background */
}

#title-header .title-nav {
    display: flex;
    gap: 1rem;
    margin-left: 0.5rem;
    /* slight offset from left edge */
}

#title-header .title-nav a {
    color: #FFF8E7;
    text-decoration: none;
    font-family: "dico-code-one", mono;
    font-size: 1rem;
}

#title-header .title-nav a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #FFF8E7;
}

/* Desktop-only visibility: title header only shows on desktop when activated; global desktop header can be hidden via class */
#title-header {
    display: none;
}

@media (min-width: 1024px) {

    /* show title header only when JS adds .visible-desktop-title */
    #title-header.visible-desktop-title {
        display: flex !important;
    }

    /* hide global header only when JS adds .hidden-desktop-for-title - use opacity/visibility so CSS transitions work */
    #desktop-header.hidden-desktop-for-title {
        display: block !important;
        opacity: 0 !important;
        transform: translateY(-12px) !important;
        pointer-events: none !important;
        visibility: visible !important;
        /* keep visible to allow opacity transition */
    }
}

@media (min-width:1024px) {
    #desktop-header.transparent h2 {
        display: none !important;
    }

    #desktop-header.transparent .desktop-left-title {
        display: block !important;
        margin: 0;
        color: #FFF8E7;
        font-family: "nazare", mono;
        font-size: 1rem;
        position: static;
        z-index: 1001;
        width: 45%;

    }

    #desktop-header.transparent nav {
        margin-left: auto !important;
        /* keep nav to the right */
    }

    /* Hide the left title in the normal desktop header only */
    #desktop-header:not(.transparent) .desktop-left-title {
        display: none !important;
    }
}

/* Smooth show/hide for the desktop header when JS toggles .hidden-desktop-for-title */
@media (min-width:1024px) {
    #desktop-header {
        transition: opacity 300ms ease, transform 300ms ease;
        will-change: opacity, transform;
        opacity: 1;
        /* do not set transform here (avoid translateY(0) !important overriding other transforms) */
        pointer-events: auto;
        visibility: visible;
    }

    #desktop-header.hidden-desktop-for-title {
        /* hidden state: only change opacity and transform */
        opacity: 0 !important;
        transform: translateY(-12px) !important;
        pointer-events: none !important;
        /* do not set display or visibility so transitions can run */
    }
}

@media (min-width:1024px) {
    header#desktop-header {
        transition: opacity 300ms ease, transform 300ms ease;
        will-change: opacity, transform;
        opacity: 1 !important;
        /* removed transform: translateY(0) to avoid overriding other transforms */
        visibility: visible !important;
        pointer-events: auto !important;
    }

    header#desktop-header.hidden-desktop-for-title {
        opacity: 0 !important;
        transform: translateY(-12px) !important;
        pointer-events: none !important;
    }
}

/* Authoritative override: ensure the desktop header is always rendered and can animate
   (avoid display:none/visibility toggles which prevent transitions in Chrome). */
@media (min-width:1024px) {
    header#desktop-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        transition: opacity 300ms cubic-bezier(.22, .9, .27, 1), transform 300ms cubic-bezier(.22, .9, .27, 1) !important;
        will-change: opacity, transform;
        opacity: 1 !important;
        transform: none !important;
        /* base state: no transform so other transforms on children are not overridden */
        pointer-events: auto !important;
        visibility: visible !important;
    }

    header#desktop-header.hidden-desktop-for-title {
        opacity: 0 !important;
        transform: translateY(-12px) !important;
        pointer-events: none !important;
    }
}

/* Title Background Grid */
.title-bg-grid {
    position: absolute;
    /* center inside the decorative squares (matches #title::before size/placement) */
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    z-index: 3;
    /* sit above the decorative pseudo-element but behind title content (title-canvas z-index:4) */

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2rem;

    /* size to match the inner decorative border exactly */
    width: calc(var(--decor-outer-w) - (2 * var(--decor-gap)));
    height: calc(var(--decor-outer-h) - (2 * var(--decor-gap)));

    padding: 1rem;
    /* small inset so images aren't flush to the inner border */
    box-sizing: border-box;
    pointer-events: none;
}

.title-bg-grid .grid-cell {
    position: relative;
    overflow: visible;
}

.title-bg-grid .grid-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    position: absolute;
}

/* corner placement for each image inside its cell */
.title-bg-grid .cell-tl .grid-img {
    top: 0;
    left: 0;
}

.title-bg-grid .cell-tr .grid-img {
    top: 0;
    right: 0;
}

.title-bg-grid .cell-bl .grid-img {
    bottom: 0;
    left: 0;
}

.title-bg-grid .cell-br .grid-img {
    bottom: 0;
    right: 0;
}

/* ...existing code... */
.project-item-desktop-btn {
    display: inline-block;
    background: transparent;
    color: #003D24;
    border: 2px solid #003D24;
    border-radius: 0px;
    font-family: "dico-code-one", mono !important;
    font-size: 1rem;
    padding: 0.6rem 1.1rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.12s ease;
}

.project-item-desktop-btn:hover {
    background-color: #003D24;
    color: #FFF8E7;
    transform: translateY(-2px);
}

@media (min-width:1024px) {

    /* make the projects section and grid fill the entire viewport */
    #projects {
        padding: 0 !important;
        box-sizing: border-box;
    }

    .projects-grid {
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        gap: 0 !important;
        grid-template-columns: 1fr 1fr !important;
    }

    /* ensure each grid cell fills its half of the viewport */
    .projects-grid>.project-item {
        width: 50vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    /* make content areas stretch to fill their cell */
    .projects-grid>.project-item .image-wrapper,
    .projects-grid>.project-item .left-content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        margin-top: 4em;
    }
}

@media (min-width:1024px) {

    /* Keep title occupying full viewport and stacked above projects */
    #title {
        position: relative !important;
        min-height: 100vh !important;
        z-index: 10 !important;
    }

    /* Ensure projects sits below title in normal flow and doesn't overlap */
    #projects {
        position: relative !important;
        z-index: 1 !important;
        margin-top: 0 !important;
    }

    /* Prevent any transforms or positioning on the grid that could cause overlap */
    .projects-grid {
        transform: none !important;
        top: auto !important;
    }
}

@media (min-width: 1024px) {

    /* hide the intro headings so the grid can start at the top of the projects section */
    #projects>h2,
    #projects>p,
    #projects>h3:first-of-type {
        display: none !important;
    }

    /* account for the fixed desktop header height (4rem) so grid fits fully in viewport */
    .projects-grid {
        position: relative !important;
        top: 4rem !important;
        /* push grid below the fixed header */
        height: 100% !important;
        width: 100vw !important;
        margin: 0 !important;
        gap: 0 !important;
        grid-template-columns: 1fr 1fr !important;
    }

    .projects-grid>.project-item {
        height: fit-content !important;
        min-height: calc(100vh - 4rem) !important;
        width: 50vw !important;
    }
}

/* Ensure the middle row places its content at the bottom */
@media (min-width:1024px) {
    .projects-grid-large .pgl-middle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        /* push children (pgl-content-grid) to the bottom */
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Let content-grid size naturally and align/stretch correctly when placed at the bottom */
    .projects-grid-large .pgl-content-grid {
        height: auto !important;
        align-items: stretch !important;
    }
}

/* Scroll More Styles */
.scroll-more {
    display: flex;
    align-items: center;
    gap: 1rem;
    transform: rotate(-6deg);
    position: relative;
    bottom: 2rem;
    /* color + font-size set below */
}

.scroll-text {
    display: flex;
    flex-direction: column;
    line-height: 0.95;
    text-align: left;
}

.scroll-text .line1,
.scroll-text .line2 {
    display: block;
    font-family: 'Taprom', sans-serif;
    color: #003D24;
    font-size: clamp(1.6rem, 5.5vw, 4.5rem);
}

.scroll-text .line2 {
    /* slightly heavier and closer to the icon */
    margin-top: -0.1rem;
}

.scroll-more .scroll-icon {
    width: 48px;
    height: auto;
    display: block;
}

@media (min-width:1024px) {

    /* place scroll-more in the bottom-left corner of the left cell */


    .projects-grid>.project-item:first-child .scroll-more {
        position: relative;
        margin-top: 5rem;
        transform: rotate(-6deg);
        gap: 1rem;
        align-items: center;
    }

    .projects-grid>.project-item:first-child .scroll-text .line1,
    .projects-grid>.project-item:first-child .scroll-text .line2 {
        font-size: clamp(1.8rem, 3.2vw, 5rem);
    }

    .projects-grid>.project-item:first-child .scroll-more .scroll-icon {
        width: 56px;
    }
}

@media (min-width:1024px) {

    /* Center the main text block vertically inside the left project cell and left-align text */
    .projects-grid>.project-item:first-child .left-content {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        /* vertical centering */
        align-items: flex-start !important;
        /* left-align content */
        height: 100% !important;
        padding-left: 3rem !important;
        padding-right: 3rem !important;
        box-sizing: border-box !important;
    }

    /* Ensure the text wrapper stays left-aligned and doesn't center its children */
    .projects-grid>.project-item:first-child .text-wrapper {
        align-items: flex-start !important;
        text-align: left !important;
        margin: 0 !important;
        max-width: 70%;
    }

    /* Explicitly left-align the h3 in the left cell */
    .projects-grid>.project-item:first-child .text-wrapper h3 {
        text-align: left !important;
    }
}

/* Project Overline */
.project-overline {
    font-family: "dico-code-one", monospace;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #59714B;
    font-size: clamp(0.8rem, 1.6vw, 1.05rem);
    margin-bottom: 1rem;
    text-align: left;
}

@media (min-width:1024px) {
    .projects-grid>.project-item:first-child .project-overline {
        font-size: 1rem;
        margin-top: 1rem;
        margin-left: 0.25rem;
    }
}

@media (min-width:1024px) {
    .projects-grid-large[aria-label="Desktop projects large grid"] {
        width: 100vw !important;
        height: 100% !important;
        min-height: calc(100vh - 4rem) !important;
        /* account for fixed header */
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .projects-grid-large .pgl-bottom {
        background: #003D24 !important;
        /* green */
        color: #FFF8E7 !important;
        display: flex !important;
        flex-direction: row;
        justify-content: center;
        padding: 1.25rem 3rem !important;
    }

    .pgl-bottom-inner {
        display: flex;
        gap: 20rem;
        z-index: 20;
    }

    .projects-grid-large .pgl-bottom .primary-btn {
        background: #E3C140 !important;
        color: #003D24 !important;
        border-color: #E3C140 !important;
    }

    .projects-grid-large .pgl-bottom .secondary-btn {
        background: transparent !important;
        color: #FFF8E7 !important;
        border-color: rgba(255, 255, 255, 0.85) !important;
    }

    /* Ensure the large projects grid uses a single column with three rows (top, middle, bottom) */
    .projects-grid-large[aria-label="Desktop projects large grid"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 1fr auto !important;
        /* top, flexible middle, bottom */
        gap: 0 !important;
        width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Force each direct child to span the single column (full width) */
    .projects-grid-large[aria-label="Desktop projects large grid"]>* {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        height: 5rem;
    }
}

.pgl-top-inner {
    display: flex;
    flex-direction: column;
    /* items onder elkaar */
    justify-content: center;
    /* verticaal centreren */
    align-items: center;
}

@media (min-width:1024px) {
    .projects-grid-large .pgl-middle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        /* push children (pgl-content-grid) to the bottom */
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Let content-grid size naturally and align/stretch correctly when placed at the bottom */
    .pgl-content-grid {
        display: flex;
        height: auto !important;
        align-items: flex-end !important;
    }
}

@media (min-width:1024px) {
    .projects-grid-large .pgl-middle {
        height: 100% !important;
        overflow: hidden !important;
        /* clip vertical overflow so page doesn't grow */
        display: block !important;
        box-sizing: border-box !important;
    }

    .projects-grid-large .pgl-content-grid {
        z-index: 4;
        display: flex !important;
        flex-direction: row !important;
        align-self: end;
        justify-content: flex-start !important;
        gap: 0 !important;
        width: 100% !important;

        height: fit-content !important;


        box-sizing: border-box !important;

        overflow-x: auto !important;
        /* horizontale scroll blijft */
        overflow-y: visible !important;
        /* verticale overflow zichtbaar */

        position: relative;
        padding-bottom: 20px;
        padding-top: 20px;
        bottom: -20px;
    }

    .projects-grid-large .pgl-content-grid::-webkit-scrollbar {
        display: none;
    }

    /* ensure content blocks don't stretch the row vertically */
    .projects-grid-large .content-block {
        flex: 0 0 auto !important;
        height: 20rem !important;
        max-height: 100% !important;
        box-sizing: border-box !important;
        align-self: center !important;
        background-color: #FFF8E7;
    }
}

@media (min-width:1024px) {

    /* Constrain content-blocks to ~1/3 of available viewport height (account for 4rem header).
       Use min() so they don't exceed the previous fixed size on smaller large screens. */
    .projects-grid-large .content-block {
        height: min(20rem, calc((100vh - 4rem) * 0.33)) !important;
        max-height: min(20rem, calc((100vh - 4rem) * 0.33)) !important;
    }

    /* Ensure the image area scales to available block height without pushing content out */
    .projects-grid-large .content-block .cb-image {
        width: 70% !important;
        height: calc((min(20rem, calc((100vh - 4rem) * 0.33))) * 0.55) !important;
        /* ~55% of block height */

    }
}

@media (min-width:1024px) {

    /* Larger blocks: roughly half the viewport height (accounts for 4rem header), capped to a sensible max */
    .projects-grid-large .content-block {
        height: min(34rem, calc((100vh - 4rem) * 0.55)) !important;

        max-height: min(34rem, calc((100vh - 4rem) * 0.55)) !important;
        min-height: 20vh;
        border: 1px solid #674D2C !important;
        /* ensure brown border */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        /* center vertically */
        align-items: center !important;
        /* center horizontally */
        text-align: center !important;
        padding: 1.25rem !important;
        box-sizing: border-box !important;
        width: 30%;
        cursor: pointer;
        /* toont handje */
    }

    /* Center text and make spacing consistent */
    .projects-grid-large .content-block h4,
    .projects-grid-large .content-block p {
        text-align: left !important;
        margin: 1.2rem 0 -.8rem 0 !important;
        color: inherit !important;
    }

    /* Scale the image to use a larger portion of the taller block */
    .projects-grid-large .content-block .cb-image {
        width: auto !important;
        height: calc((min(34rem, calc((100vh - 4rem) * 0.55))) * 0.58) !important;
        aspect-ratio: 1 / 1;
    }



    .projects-grid-large .content-block .cb-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 10px !important;
    }
}

.projects-grid-large .pgl-top-inner h3 {
    font-family: 'Taprom', sans-serif !important;
    font-size: clamp(2.4rem, 6vw, 6rem) !important;
    line-height: 2;
    /* larger responsive heading */
    margin: 0 !important;
    color: #003D24;
}

/* Desktop: visually emphasize the content-block nearest the horizontal center.
   Using transform: scaleY keeps widths untouched while increasing visible height. */
.pgl-content-grid .content-block {
    /* preserve layout, animate only visual transform */
    transition: transform 260ms cubic-bezier(.22, .9, .27, 1), box-shadow 260ms ease;
    will-change: transform;
    transform-origin: 50% 50%;
    /* grow equally top and bottom (center) */
}

/* Active center block — slightly taller visually, subtle elevation */
.pgl-content-grid .content-block.center-active {
    transform: scaleY(1.05);
    z-index: 3;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12);
    overflow-y: visible;
}

.hover-image-content-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* zorgt dat image het block volledig vult */
    opacity: 0;
    /* standaard onzichtbaar */
    transition: opacity 0.3s ease;
    z-index: 2;
}

.hover-image-content-block:hover {
    opacity: 1;
}

.content-block:nth-last-of-type(1) {
    background-color: #E3C140;
    pointer-events: none;
}

@media (max-height: 600px) {
    .projects-grid-large .content-block {
        height: 100% !important;
        min-height: 100% !important;
    }

    .projects-grid-large .pgl-content-grid {
        height: 100% !important;
        position: relative;
    }

    .pgl-top-inner {
        position: relative;
        top: -3rem;
    }

    #projects h3:nth-of-type(2) {
       position: relative;
       top: -3rem;
    }

        .projects-grid-large .content-block .cb-image {
        width: auto !important;
        height: 20vh !important;
        aspect-ratio: 1 / 1;
    }
}