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

body {
    background-color: #ffffff; /* We'll use white for a clean "paper" look */
    color: #1a1a1a;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.6;
}

/* Navigation Bar */
/* The Header Container */
.navbar {
    display: flex;
    /* Changed from space-between to flex-start to bring them together */
    justify-content: flex-start; 
    align-items: center; 
    padding: 4rem 5%;
    background-color: white;
    position: sticky;
    top: 0;
    z-index: 1000;

    /* This controls the distance between the Logo and the Menu */
    gap: 100px; 
}

/* 1. THE LOGO - Much Bigger */
.logo a {
    font-family: 'Permanent Marker', cursive;
    font-size: 2.2rem;   /* Large and impactful */
    word-wrap: break-word;
    color: #000;
    text-decoration: none;
    font-weight: 400;    /* This font only has one weight, 400 */
    font-style: normal;  /* Forces it to be upright */
    letter-spacing: 2px; /* Adding a bit of space makes it look cleaner */
    text-transform: uppercase; /* Makes it feel more like a "stamp" */
    display: inline-block;
    line-height: 1;
}

.logo {
    /* Optional: slightly rotate the whole logo 1 degree for a hand-stamped feel */
    transform: rotate(-1deg); 
    opacity: 0.9; /* Makes it look slightly more like ink on paper */
}

/* 2. THE LINKS - Bigger and Horizontal */
.nav-links {
    display: flex;        /* Ensures horizontal alignment */
    list-style: none;
    gap: 40px;            /* Precise spacing between menu items */
    margin: 0;
    padding: 0;
    white-space: nowrap;  /* Forces links to stay on one line no matter what */
}

.nav-links a {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    text-decoration: none; /* Removes default browser underline */
    
    /* Standard State */
    color: #888;           /* A medium grey */
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    
    /* Smooth transition for color only */
    transition: color 0.3s ease; 
}

.nav-links a:hover {
    color: #000;           /* Becomes solid black */
    text-decoration: none; /* Ensures no underline appears on hover */
    border: none;          /* Ensures no border appears */
}

/* If you have an active class, make it black too without an underline */
.nav-links a.active {
    color: #000;
    text-decoration: none;
}

.nav-links a.active {
    color: #000;
    border-bottom: 1px solid #000;
    font-weight: 600; /* Slightly thicker to show current page */
}

/* Section Styling */
.content {
    padding: 0 5%;
}

h2 {
    font-weight: 300;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 4rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;

}/* About Page Styling */
.about-container {
    padding: 4rem 2%; /* 2% padding keeps it from touching the absolute edge */
    width: 100%;      /* Take up the full width of the browser */
    max-width: 1600px; /* This is the maximum width it will ever grow to */
    margin: 0 auto;    /* Centers the container itself */
}


.about-content {
    display: flex;
    gap: 4rem;
    align-items: flex-start;
}

.about-image {
    flex: 1; /* Takes up 50% of the space */
}

.about-image img {
    width: 100%;
    height: auto;
    filter: grayscale(100%); /* Optional: classic documentary look */
    transition: filter 0.5s ease;
}

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

.about-text {
    flex: 1; /* Takes up the other 50% */
}

.about-text h1 {
    margin-bottom: 2rem;
    font-size: 2rem;
    font-weight: 400;
}

.about-text p {
    margin-bottom: 1.5rem;
    color: #444;
}

.about-text h3 {
    margin: 2rem 0 1rem 0;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .about-content {
        flex-direction: column; /* Stack image on top of text */
    }
}

/* 1. The Container */
.about-container {
    padding: 2rem 10%; 
    width: 100%;
    /* We remove 'margin: 0 auto' if we don't want it centered */
    margin-left: 0; 
}

/* 2. The Headline */
.about-headline {
    /* If you want the headline to stay with the photo/text, align it left */
    text-align: left;
    margin-bottom: 3rem;
    font-size: 2rem;
    letter-spacing: 4px;
}

/* 3. The Flex Layout */
.about-content {
    display: flex;
    /* 'flex-start' pushes the whole group to the left side */
    justify-content: flex-start; 
    align-items: flex-start;
    gap: 150px; /* This keeps your preferred gap perfectly consistent */
    width: 120%;
}

/* 4. The Photo and Text Boxes */
.about-image {
    flex: 0 1 400px; 
}

.about-text {
    flex: 0 1 500px;
}

/* mobile adjustments */

@media (max-width: 768px) {
    .logo a {
        font-size: 1.8rem; /* Scales down so it fits on a phone screen */
        letter-spacing: 4px;
    }
    
    /* Tighten the navigation bar */
    .navbar {
        padding: 1.5rem 5%; /* Less vertical padding on mobile */
        flex-direction: column; /* Stack logo above menu */
        align-items: center;
        gap: 1rem; /* Smaller gap between logo and links */
    }

    .nav-links {
        gap: 15px; /* Reduce space between Projects, About, Contact */
        justify-content: center;
        width: 100%;
    }

    .nav-links a {
        font-size: 1rem; /* Scale down the menu text slightly */
        letter-spacing: 1px;
    }

  @media (max-width: 768px) {
    /* 1. Ensure the container doesn't overflow */
    .about-container {
        padding: 2rem 5%; /* Gives a nice 5% margin on the left and right */
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden; /* Stops any horizontal sliding */
    }

    /* 2. Force the vertical stack */
    .about-content {
        display: flex;
        flex-direction: column; 
        gap: 1.5rem; /* Small, clean gap between photo and text */
        width: 100%;
    }

    /* 3. Reset the Widths */
    .about-image, .about-text {
        flex: none; /* Disables the desktop flex settings */
        width: 100%; /* Occupies full width of the container */
        max-width: 100%;
    }

    /* 4. Ensure the image stays inside its box */
    .about-image img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* 5. Clean up the text */
    .about-text {
        padding: 0; /* Remove any extra padding that might push it out */
        text-align: left;
    }
}
}


/* Project Page Layout */
.project-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 5%;
}

.project-intro {
    margin-bottom: 6rem;
    max-width: 700px; /* Keeps text lines short and readable */
}

.project-intro h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    font-weight: 400;
}

.project-meta {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 2rem;
}

/* Photo Essay Pacing */
.photo-essay {
    display: flex;
    flex-direction: column;
    gap: 8rem; /* Large gaps between images for a "gallery" feel */
}

.photo-item img {
    width: 100%;
    height: auto;
    display: block;
}

.photo-item figcaption {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    font-style: italic;
    color: #555;
}

/* Specific Photo Sizes */
.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.photo-row {
    display: flex;
    gap: 40px;
}

.photo-row .photo-item {
    flex: 1;
}

.standard {
    max-width: 800px;
    margin: 0 auto;
}
/* The Grid Container */
.masonry-grid {
    column-count: 2; /* Two columns on desktop */
    column-gap: 40px; /* Space between columns */
    padding: 2rem 5%;
    max-width: 1600px;
    margin: 0 auto;
}

/* Individual Project Item */
.grid-item {
    display: inline-block; /* Essential for column-count to prevent splitting */
    width: 100%;
    margin-bottom: 40px; /* Space between rows */
    position: relative;
    overflow: hidden;
}

.grid-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease;
}

/* Hover Effect: Zoom image slightly */
.grid-item:hover img {
    transform: scale(1.05);
}

/* Project Info (Overlay or Underneath) */
.project-info {
    margin-top: 15px;
}

.project-info h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}

.project-info p {
    font-size: 0.9rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Mobile: Switch to 1 column */
@media (max-width: 768px) {
    .masonry-grid {
        column-count: 1;
    }
}

/* Container for the image and the hidden text */
.image-wrapper {
    position: relative;
    overflow: hidden;
}

.image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}









/* The Overlay: Darkens the image slightly and holds the text */
.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Black with 50% transparency */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.4s ease;
}

/* The Text inside the overlay */
.overlay-content {
    text-align: center;
    color: white;
    padding: 20px;
    transform: translateY(20px); /* Starts slightly lower for a "slide up" effect */
    transition: transform 0.4s ease;
}

.overlay-content h3 {
    font-family: 'Permanent Marker', cursive; /* Using your logo font for consistency! */
    font-size: 1.8rem;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.overlay-content p {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 3px;
}

/* HOVER STATES */
.grid-item:hover .project-overlay {
    opacity: 1; /* Reveal the overlay */
}

.grid-item:hover .overlay-content {
    transform: translateY(0); /* Slide the text up to its final position */
}

.grid-item:hover img {
    transform: scale(1.05); /* Slight zoom for depth */
}