* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "neue-haas-grotesk-display", sans-serif;
    letter-spacing: 1px;
    font-style: normal;
    font-size: x-small;
    overflow-x: hidden; /* Prevents horizontal scrolling */
}

/* STYLE FOR MAIN PAGE */

.portfolio-grid {
    display: grid;
    /* Left: Auto, Middle: 25%, Right: Auto */
    grid-template-columns: 1fr 20% 1fr;
    height: 100vh; /* Takes up 100% of the screen height */
    width: 100vw;  /* Takes up 100% of the screen width */
}

.side-column {
    display: grid;
    /* Creates two rows that always take up 50% height each */
    grid-template-rows: 1fr 1fr;
    height: 100%;
}

.grid-item {
    display: block;
    width: 100%;
    height: 100%;
}

.grid-item img {
    width: 100%;
    height: 100%;
    display: block;
    /* This ensures images fill the 50% box without stretching */
    object-fit: cover;

}

.bio-column {
    padding: 40px 20px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    /* text-align: center; */

}

.bio-column p {
    font-size: 1.5rem;
    line-height: 1.3;
    margin-bottom: 20px;
}

/* For mobile: stack vertically and let height adjust to content */
@media (max-width: 780px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
        height: auto;
        display: flex;
        flex-direction: column;
    }
    .bio-column {
        order: -1;
    }
    .side-column {
        height: auto;
        grid-template-rows: repeat(2, 300px); /* Fixed height on mobile so images don't vanish */
    }
    .grid-item {
        padding-top: 7px;
        padding-bottom: 7px;
    }
    .project-item { width: 80vw; }
}

/* STYLE FOR PROJECT PAGE */

/* Typography & Reset */
body.projects-page {
    margin: 0;
    background-color: white; /* Off-white like the image */
    overflow: hidden; /* Prevents vertical scroll */
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Top Center Header */
.gallery-header {
    text-align: center;
    padding: 10px 0;
    letter-spacing: 2px;
    border-bottom: 1px solid black;
}

.gallery-header p {
    letter-spacing: 2px;
    font-size: 18px;
    margin: 20px;
}

/* Horizontal Scroll Container */
.horizontal-gallery {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    height: 60vh;
    align-items: center;
    padding: 0 10vw; /* Padding so first/last items center */
    gap: 40px;
    -webkit-overflow-scrolling: touch;
    border-bottom: black 1px solid;
}

/* Hide Scrollbar */
.horizontal-gallery::-webkit-scrollbar {
    display: none;
}

/* Gallery Item */
.project-item {
    flex: 0 0 auto;
    width: 40vw; /* Width of the "focus" image */
    height: 100%;
    scroll-snap-align: center;
    transition: transform 0.5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-wrapper {
    position: relative;
    width: 100%;
    height: 80%;
    background: #eee;
    overflow: hidden;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(20%);
    transition: filter 0.3s;
}

/* Hover Content */

#project1 { 
    --overlay-color: rgba(134, 206, 219, 0.5); 
    --hover-color: rgba(134, 206, 219, 0.8);
    --text-color: rgba(4, 45, 52);
} 
#project2 {
    --overlay-color: rgba(255, 100, 126, 0.5);
    --hover-color: rgba(255, 100, 126, 0.8);
    --text-color: rgba(75, 4, 16);
}
#project3 { 
    --overlay-color: rgba(71, 86, 119, 0.3); 
    --hover-color: rgba(46, 67, 111, 0.8);
    --text-color: rgb(107, 121, 156);   
}
#project4 {
    --overlay-color: rgba(133, 115, 179, 0.3);
    --hover-color: rgba(104, 85, 155, 0.725);
    --text-color: rgb(28, 20, 48);
}
#project5 {
    --overlay-color: rgba(250, 138, 158, 0.2);
    --hover-color: rgba(246, 114, 138, 0.9);
    --text-color: rgb(78, 0, 16);
}
#project6 {
    --overlay-color: rgba(245, 199, 239, 0.5);
    --hover-color: rgba(227, 179, 221, 0.877);
    --text-color: rgb(65, 42, 62);
}
#project7 {
    --overlay-color: rgba(155, 183, 242, 0.5);
    --hover-color: rgba(155, 183, 242, 0.8);
    --text-color: rgb(21, 43, 90);
}
#project8 {
    --overlay-color: rgba(186, 235, 161, 0.5);
    --hover-color: rgba(186, 235, 161 ,0.8);
    --text-color: rgb(21, 48, 8);
}

.project-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--overlay-color, rgba(248, 248, 246, 0.5)); 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
  text-align: center;
  transition: background 0.4s ease;
  color:  var(--text-color,black); 
  pointer-events: none; 
}

/* Hide all text/button content by default */
.project-overlay h2, 
.project-overlay p, 
.view-btn {
  opacity: 0;
  transform: translateY(10px); /* Subtle slide-up effect */
  transition: all 0.4s ease;
  color:  var(--text-color,black); 
  pointer-events: auto; 
}

.image-wrapper:hover .project-overlay {
  /* Swap to the more opaque version */
  background: var(--hover-color, rgba(248, 248, 246, 0.9));
}

/* Show everything on hover */
.image-wrapper:hover .project-overlay h2,
.image-wrapper:hover .project-overlay p,
.image-wrapper:hover .view-btn {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: Slight delay for the button to make it feel more polished */
.image-wrapper:hover .view-btn {
  transition-delay: 0.1s;
}

.project-overlay h2 {
    font-size: 28px;         /* Larger size for the title */
    font-weight: 700;       /* Makes it bold */
    margin-bottom: 8px;     /* Space between title and description */
    text-transform: uppercase; /* Optional: makes it look modern */
    letter-spacing: 1px;    /* Optional: adds a clean, spaced-out look */
}

/* The Project Description */
.project-overlay p {
    font-size: 20px;         /* Standard readable size */
    line-height: 1.4;       /* Adds breathing room between lines of text */
    max-width: 80%;         /* Keeps text from hitting the edges */
    margin-bottom: 20px;    /* Space before the 'View Details' button */
}

.view-btn {
    text-decoration: none;
    color:  var(--text-color,black); 
    border-bottom: 1px solid var(--text-color,black);
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
    margin-top:10px;
    opacity: 0;
}


/* STYLE FOR NAV BUTTONS */

.nav-container {
    position: fixed;
    top: 15px;
    left: 15px; /* Anchored to top-left */
    z-index: 1000;
}

.nav-button {
    background-image: url("images/projectarrow.jpg");
    background-size: contain;
    border: none;     /* No border */
    padding: 0;
    width: 30px;      /* Smaller trigger area */
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Page-specific arrow icons */
body.resume-page .nav-button {
    background-image: url("images/resumearrow.jpg");
}

body.writing-page .nav-button {
    background-image: url("images/writingarrow.jpg");
}

body.about-page .nav-button {
    background-image: url("images/aboutarrow.jpg");
}

.arrow-icon {
    display: inline-block;
    font-size: 22px; /* Adjust size as needed */
    color: white;
    opacity: 0;
    transition: transform 0.4s ease; /* Smooth turning animation */
    /* Ensures it rotates around its own center */
    transform-origin: center; 
}

/* Rotate arrow to point down when menu is open */
.nav-container.active .nav-button {
    /* 90 degrees turns the right-pointing arrow to face down */
    background: none;
    background-image: none; 
}

.nav-container.active .arrow-icon {
    /* 90 degrees turns the right-pointing arrow to face down */
    transform: rotate(90deg);
    color: black;
    opacity: 1;
}

/* Fixed-size Square Buttons */
.item {
    width: 90px;  /* Limited square width */
    height: 60px; /* Limited square height */
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;         /* Keeps image inside the square */
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image fills the small square perfectly */
}

/* Top Row */
.nav-container.active .item-1 {
    transform: translate(5px, 30px); /* 40px to right of arrow */
    opacity: 1;
    pointer-events: auto;
}
.nav-container.active .item-2 {
    transform: translate(95px, 30px); /* 110px to right of arrow */
    opacity: 1;
    pointer-events: auto;
}

/* Bottom Row */
.nav-container.active .item-3 {
    transform: translate(5px, 90px); /* 40px right, 70px down */
    opacity: 1;
    pointer-events: auto;
}
.nav-container.active .item-4 {
    transform: translate(95px, 90px); /* 110px right, 70px down */
    opacity: 1;
    pointer-events: auto;
}



/* STYLE FOR RESUME */
/* Layout Centering */
body.resume-page {
    margin: 0;
    min-height: 100vh;
    justify-content: center; /* Horizontal center */
    background-color: white;
    align-items: center;
    text-align: center;
}

.centered-wrapper {
    width: 100%;
    max-width: 800px; /* Limits width for readability */
    padding: 40px;
    text-align: center;
}

/* Header Styling */
.resume-header {
    margin: 70px;
    margin-left: 240px;
    margin: 0;
    text-align: left;
}

.resume-top p, .about-header p, .writing-header p {
    font-size: 80px;
    letter-spacing: 2px;
    margin: 0;
    padding-top: 30px;
    padding-bottom: 20px;
    text-align: center;
    
}



.paper {
    margin: 20px 50px 50px 50px;
    padding: 50px;
    background-color: white;
}

.resume-header p {
    font-size: large;
    color: black;
    letter-spacing: 1px;
}

/* Accordion Styling */

/* Update the group to align items horizontally */
/* 1. Parent group stays flex to keep items side-by-side */
.accordion-group {
    display: flex;
    align-items: flex-start;
    border-top: 1px solid #000;
    position: relative; /* <-- required so z-index works */
    z-index: 0;
}

/* 2. Trigger stays fixed width */
.accordion-group {
    display: flex;
    align-items: flex-start;
    border-top: 1px solid #000;
    /* do NOT set position:relative or z-index here — keep normal flow so panels push each other */
}

.accordion-trigger {
    cursor: pointer;
    font-size: large;
    font-weight: normal;
    padding: 25px 0;
    margin: 0;
    text-align: left;
    flex: 0 0 250px;
}

/* Collapsed state uses max-height to hide content but keep it in flow when expanded */
.content-section {
    flex: 1;
    overflow: hidden;                 /* clip during transition */
    max-height: 0;                    /* collapsed */
    transition: max-height 0.36s ease, padding 0.36s ease;
    padding: 0;                       /* removed when collapsed */
    text-align: left;
    letter-spacing: 1.5px;
    font-size: 15px;
    display: block;                   /* ensure normal block flow for pushing siblings */
}

/* Inner wrapper — allow natural height */
.content-section > div {
    padding: 0;        /* padding applied on the container during expand, not inside */
    min-height: 0;     /* prevent intrinsic overflow issues */
}

/* Active (expanded) state: set a sufficiently large max-height so content can expand and push siblings */
.accordion-group.active .content-section {
    max-height: 2000px;   /* large enough for most content; increases real layout height and pushes next group down */
    padding: 25px 0;      /* restore padding when expanded */
}

/* ===== Responsive: stack vertically on small screens (same push behavior preserved) ===== */
@media (max-width: 660px) {
    .accordion-group {
        flex-direction: column;
        
    }

    .accordion-trigger {
        flex: 1;
    }
}


/* 5. ABOUT ME STYLING */

/* Container for general spacing */
.about-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Bio Text Block */
.bio-text {
    width: 100%;
    font-size: 20px;
    line-height: 1.8;
    text-align: justify;
}

.bio-photo {
    float: left; /* Pushes image to the left */
    width: 200px; /* Adjust size as needed */
    height: 200px; /* Keep width and height equal for a square */
    object-fit: cover; /* Ensures image isn't distorted if original isn't square */
    margin-right: 30px; /* Space to the right of the photo */
    margin-bottom: 15px; /* Space below the photo */
    /* border: 1px solid #000; Optional: adds a minimalist frame */
}

/* Clearfix: Ensures the section container expands to fit the floated image */
.bio-text::after {
    content: "";
    display: table;
    clear: both;
}

/* Image Styling */
.about-image-container img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 60px;
}

/* Responsive: Smaller text on smaller screens */
@media (max-width: 660px) {
    .bio-text {
        font-size: 16px;
    }
}

/* Grid Layout for Asymmetric Rows */
.asymmetric-grid {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Space between rows */
}

.row {
    display: grid;
    gap: 30px;
    align-items: start;
    padding-top: 20px;
}

/* Type A: 20% on Left, 80% on Right */
.type-a {
    grid-template-columns: 2fr 8fr;
}

/* Type B: 80% on Left, 20% on Right */
.type-b {
    grid-template-columns: 8fr 2fr;
}

.col-small p, .col-large p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
}

.col-small {
    font-weight: bold; /* Makes the 20% side look like a label */
    text-transform: uppercase;
    font-size: 14px;
}

/* Writing STYLE */
.filter-bar {
    display: flex;
    gap: 25px;
    justify-content: center;
    padding: 10px 10px;
    background: transparent;
    /* border-bottom: 1px solid black; */
    flex-wrap: wrap;
}

.filter-btn {
    padding: 5px 0;
    border: none;
    background: transparent;
    cursor: pointer;
    text-transform: lowercase;
    font-size: 16px;
    color: #999;
    transition: color 0.3s ease;
    position: relative;
}

.filter-btn:hover {
    color: #000;
}

.filter-btn.active {
    color: #000;
}

.filter-btn.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 1px;
    background: #000;
}

/* Writing Grid */
.writing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); 
    gap: 50px 30px;
    padding: 40px;
    max-width: 1300px;
    margin: 0 auto;
    align-items: start;
}

.story-card {
    /* border: 1px solid #000; */
    padding: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, opacity 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
    display: flex;
    flex-direction: column;
}

.content-tag {
    display: inline-block;
    /* padding: 2px 8px; */
    background: transparent;
    font-size: 10px;
    text-transform: uppercase;
    margin-bottom: 8px;
    /* border: 1px solid #ccc; */
    color: #888;
    align-self: flex-start;
}

.story-card.hidden {
    display: none;
}

/* Hide other cards only when the photo within a card is hovered or focused */
.writing-grid:has(.story-card .story-photo:hover) .story-card:not(:has(.story-photo:hover)),
.writing-grid:has(.story-card .story-photo:focus) .story-card:not(:has(.story-photo:focus)) {
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}

/* Keep cards visually static on hover — only bring the active card forward without movement */
.story-card:focus-within,
.story-card:has(.story-photo:hover),
.story-card:has(.story-photo:focus) {
    z-index: 2;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 15px;
}

.story-date {
    font-size: 12px;
    /* text-transform: uppercase; */
    color: #666;
}

.story-title {
    font-size: 20px;
    margin: 0;
    /* text-transform: lowercase; */
}

.story-photo {
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin-bottom: 15px;
    border: 1px solid #eee;
}

.story-blurb {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 0;
}

/* Photo Gallery Modal - Single Photo View */
.modal-content.photo-gallery {
    max-width: 1000px;
    padding: 60px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.photo-viewer {
    position: relative;
    width: 100%;
    max-width: 800px;
}

.photo-viewer img {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    display: block;
}

.photo-caption {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #666;
    font-style: italic;
}

.photo-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 30px;
}

.photo-nav-btn {
    background: transparent;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    color: #666;
    transition: color 0.3s ease;
}

.photo-nav-btn:hover:not(:disabled) {
    color: #000;
}

.photo-nav-btn:disabled {
    opacity: 0;
    cursor: not-allowed;
}

.photo-counter {
    font-size: 14px;
    color: #666;
}

/* Modal Styles */
.modal {
    display: none; 
    position: fixed;
    z-index: 2000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
}

.modal-content {
    background-color: #fff;
    margin: 5vh auto;
    padding: 60px;
    width: 80%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    text-align: left;
}

        /* Photo Gallery Modal - Single Photo View */
        .modal-content.photo-gallery {
            max-width: 90vw;
            max-height: 90vh;
            margin: 5vh auto;
            padding: 40px 60px;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow-y: hidden;
        }

        .modal-content.video-player {
            max-width: 95vw;
            max-height: 95vh;
            overflow-y: hidden;
        }

.photo-viewer {
    position: relative;
    width: 100%;
    max-width: 800px;
}

.photo-viewer img {
    width: 100%;
    height: auto;
    max-height: calc(90vh - 200px);
    object-fit: contain;
    display: block;
}

.photo-caption {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #666;
    font-style: italic;
}

.photo-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 30px;
}

.photo-nav-btn {
    background: transparent;
    /* border: 1px solid #000; */
    padding: 5px 20px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s ease;
}

.photo-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.photo-counter {
    font-size: 14px;
    color: #666;
}

/* Video Modal */
.modal-content.video-player {
    max-width: 1000px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    overflow: hidden;
    margin-top: 20px;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Writing Modal */
.modal-content.writing-story {
    max-width: 900px;
    font-size: 16px;
    line-height: 1.8;
}

.modal-content.writing-story h1 {
    text-transform: lowercase;
    border-bottom: 1px solid black;
    padding-bottom: 10px;
    margin-bottom: 30px;
}

.close-button {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 40px;
    cursor: pointer;
    z-index: 10;
}

.close-button:hover {
    color: #666;
}