/* === Fonts === */
body {
  font-family: "aktiv-grotesk", sans-serif;
  font-weight: 300;
  font-style: normal;
  margin: 0;
  color: #222;
  background: #fff;
}

strong {
  font-weight: 700;
}

/* === General Layout === */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #aaa;
  padding: 18px 2vw 18px 2vw;
  background: #fff;
  position: relative;
}

/* Center container for logo and title */
.logo-center {
  display: flex;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.logo {
  height: 44px;
  margin-right: 12px;
  flex-shrink: 0;
}

.header-title {
  font-size: 17px;
  font-weight: bold;
}

.front-link {
  font-size: 15px;
  color: #222;
  margin-left: auto;
}

.front-link a {
  text-decoration: none;
  color: #222;
}

/* Homepage header centering */
.homepage header {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #aaa;
  padding: 40px 2vw 40px 2vw;
  background: #fff;
}

/* Bottom navigation section */
.bottom-nav {
  border-top: 1px solid #aaa;
  padding: 15px 0;
  text-align: center;

  background: #fff;
  margin-top: 20px;
}

.bottom-nav a {
  font-size: 15px;
  color: #222;
  text-decoration: none;
  font-weight: bold;
}

/* === Main Content === */
main {
  padding: 2vw;
  max-width: 1200px;
  margin: 0 auto;
}

/* === Homepage Layout === */
.homepage .intro {
  font-size: 20px;
  margin-bottom: 2vw;
  font-weight: 300;
}

.intro2 {
  font-size: 5px;
  margin-bottom: 2vw;
  font-weight: 300;
  font-style: normal;
  color: #fff;
  font-size: clamp(15px, 2.7vw, 38px);
  max-width: 75vw;
  margin: 0 auto;
  line-height: 1.5;
  word-break: break-word;
  text-align: center;
}

.homepage-quote-img-overlay {
  position: relative;
  width: 100vw;
  min-height: clamp(220px, 30vw, 400px);
  background: url('img/front/quote.jpg') center center / cover no-repeat;
  margin-left: calc(-50vw + 50%);
  margin-right: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quote-overlay-text,
.quote-overlay-text p {
  font-family: "adobe-garamond-pro", serif;
  font-weight: 400;
  font-style: normal;
  color: #fff;
  font-size: clamp(22px, 2.7vw, 38px);
  max-width: 80vw;
  margin: 0 auto;
  word-break: break-word;
  text-align: center;
  line-height: 1.28;
  padding: 28px 10vw 28px 10vw;
  box-sizing: border-box;
}

.quote-overlay-text strong {
  font-weight: 600;
  font-family: "adobe-garamond-pro", serif;
}

.section-divider {
  border: none;
  border-top: 1px solid #111;
  margin: 32px 0 36px 0;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: 0;
}

/* === Gallery Grid === */



.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Desktop: 3 columns */
  gap: 0.5vw;
  width: 80%;
  margin: 0 auto; /* Centers the grid */
}

.gallery-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #222;
  transition: opacity 0.2s;
}

.gallery-link img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border: 2px solid #ddd;
  margin-bottom: 5px;
  margin-top: 5px;
  background: #fff;
}

.gallery-link span {
  text-align: center;
  font-size: 18px;
  font-weight: 300;
  margin-top: 2px;
}

.gallery-link:hover {
  opacity: 0.75;
}

/* === Project Page Layout === */
.project-page h2 {
  font-family: "aktiv-grotesk", sans-serif;
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 16px;
}

.project-page .project-description {
  font-size: 20px;
  font-weight: 300;
  margin-top: 2vw;
}

.project-page .project-description p {
  margin-bottom: 1.5em;
  font-family: "aktiv-grotesk", sans-serif;
  font-weight: 300;
}

.homepage .intro, .footer-left, .footer-right,
.project-page .project-description {
  margin-left: 5%;
  margin-right: 5%;
}

/* Project Grid kaleidoscope 3 */


.project-grid-k3 {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: 1fr;
  gap: 6px;
}

.project-grid-k3 .project-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
  box-sizing: border-box;
}

.project-grid-k3 .grid-item-1 { grid-column: 1 / span 2; grid-row: 1; }
.project-grid-k3 .grid-item-2 { grid-column: 3 / span 2; grid-row: 1; }
.project-grid-k3 .grid-item-3 { grid-column: 5 / span 3; grid-row: 1; }
.project-grid-k3 .grid-item-4 { grid-column: 8 / span 2; grid-row: 1; }
.project-grid-k3 .grid-item-5 { grid-column: 1 / span 2; grid-row: 2; }
.project-grid-k3 .grid-item-6 { grid-column: 3 / span 5; grid-row: 2; }
.project-grid-k3 .grid-item-7 { grid-column: 8 / span 2; grid-row: 2; }

/* Hover states */
.project-grid-k3 .project-thumb:hover {
  opacity: 0.75;
}



/* 
/* Grid for NEW rel w rem  */
.project-grid-container-mosaic {
  max-width: 700px;
  width: 95%;
  margin: 0 auto;
  padding: 2vw 0;
}

.project-grid-mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
 grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 6px;
  aspect-ratio: 3 / 2.5;
  /* Remove or adjust aspect-ratio if it's constraining height */
  /* aspect-ratio: 3 / 1.85; */
}

.project-grid-mosaic .project-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Change from 'cover' to 'contain' to prevent cropping */
  /* OR use 'cover' but with object-position to control cropping */
  /* object-fit: cover;
  object-position: center center; */
  display: block;
}

.project-grid-mosaic .grid-item-1 {
  grid-column: 1 / 4;
  grid-row: 1 / 3; /* Span rows 1-3 (not including 4) */
  /* Remove margin-bottom as it might interfere with grid */
}

.project-grid-mosaic .grid-item-2 { 
  grid-column: 4 / 7; 
  grid-row: 1 / 3;
}

.project-grid-mosaic .grid-item-3 { 
  grid-column: 7 / 13; 
  grid-row: 1 / 3; 
}

.project-grid-mosaic .grid-item-4 { 
  grid-column: 1 / 4; 
  grid-row: 3 / 5; 
}

.project-grid-mosaic .grid-item-5 { 
  grid-column: 4 / 10; 
  grid-row: 3 / 5; 
}

.project-grid-mosaic .grid-item-6 { 
  grid-column: 10/ 13; 
  grid-row: 3 / 5; 
}

/* Hover states */
.project-thumb:hover, .hero-image:hover {
  opacity: 0.75;
  cursor: pointer;
}



/* Grid for daisy_cr.html */
.project-grid-container-daisy {
  max-width: 700px;
  width: 95%;
  margin: 0 auto;
  padding: 2vw 0;
}

.project-grid-daisy {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  aspect-ratio: 3 / 1.85;
  gap: 6px;
}

.project-grid-daisy .project-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-grid-daisy .grid-item-1 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.project-grid-daisy .grid-item-2 { grid-column: 3 / span 2; grid-row: 1; }
.project-grid-daisy .grid-item-3 { grid-column: 5 / span 2; grid-row: 1; }
.project-grid-daisy .grid-item-4 { grid-column: 3 / span 2; grid-row: 2; }
.project-grid-daisy .grid-item-5 { grid-column: 5 / span 2; grid-row: 2; }

/* Hover states */
.project-thumb:hover, .hero-image:hover {
  opacity: 0.75;
}


/* Grid for exhibits.html */
.project-grid-container-pl {
  max-width: 700px;
  width: 95%;
  margin: 0 auto;
  padding: 2vw 0;
}

.project-grid-pl {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
 grid-template-rows: 1fr 1fr 1fr 0.4fr 1fr;
  gap: 6px;
  /* Remove or adjust aspect-ratio if it's constraining height */
  /* aspect-ratio: 3 / 1.85; */
}

.project-grid-pl .project-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Change from 'cover' to 'contain' to prevent cropping */
  /* OR use 'cover' but with object-position to control cropping */
  /* object-fit: cover;
  object-position: center center; */
  display: block;
}

.project-grid-pl .grid-item-1 {
  grid-column: 3 / 11;
  grid-row: 1 / 4; /* Span rows 1-3 (not including 4) */
  /* Remove margin-bottom as it might interfere with grid */
}

.project-grid-pl .grid-item-2 { 
  grid-column: 1 / 5; 
  grid-row: 5; 
}

.project-grid-pl .grid-item-3 { 
  grid-column: 5 / 9; 
  grid-row: 5; 
}

.project-grid-pl .grid-item-4 { 
  grid-column: 9 / 13; 
  grid-row: 5; 
}

/* Hover states */
.project-thumb:hover, .hero-image:hover {
  opacity: 0.75;
  cursor: pointer;
}


/* Grid for light_b.html */
/* Grid for light_b.html */
.project-grid-container-lb {
  max-width: 900px;
  width: 95%;
  margin: 0 auto;
  padding: 2vw 0;
}

.hero-image-container {
  width: 100%;
  height: 400px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: pointer;
}

.project-grid-lb {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  gap: 6px;
}

.project-grid-lb .project-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-grid-lb .grid-item-2 { grid-column: 1; grid-row: 1; }
.project-grid-lb .grid-item-3 { grid-column: 2; grid-row: 1; }
.project-grid-lb .grid-item-4 { grid-column: 3; grid-row: 1; }
.project-grid-lb .grid-item-5 { grid-column: 1; grid-row: 2; }
.project-grid-lb .grid-item-6 { grid-column: 2; grid-row: 2; }
.project-grid-lb .grid-item-7 { grid-column: 3; grid-row: 2; }


.project-grid-lb2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  gap: 6px;
}

.project-grid-lb2 .project-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-grid-lb2 .grid-item-2 { grid-column: 1; grid-row: 1; }
.project-grid-lb2 .grid-item-3 { grid-column: 2; grid-row: 1; }
.project-grid-lb2 .grid-item-4 { grid-column: 3; grid-row: 1; }
.project-grid-lb2 .grid-item-5 { grid-column: 1; grid-row: 2; }
.project-grid-lb2 .grid-item-6 { grid-column: 2; grid-row: 2; }
.project-grid-lb2 .grid-item-7 { grid-column: 3; grid-row: 2; }

/* Hover states */
.project-thumb:hover, .hero-image:hover {
  opacity: 0.75;
}

/* Hover states */
.project-thumb:hover, .hero-image:hover {
  opacity: 0.75;
}


/* Grid for kaleidoscope4.html EDITIED PARTS ========================================*/


/* 1. Set the Grid to Auto to prevent vertical cropping */
.project-grid-kb {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto; /* Collapses gaps */
  gap: 10px;
}

/* 2. Create the "Mask" for the Zoom effect */
.project-grid-kb [class^="grid-item-"] {
  overflow: hidden; /* This cuts off the edges of the zoomed image */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 3. General Image rules (applies to all images in this grid) */
.project-grid-kb .project-thumb {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}


/* 4. Target ONLY the top row for the Zoom */
.project-grid-kb .grid-item-1 img,
.project-grid-kb .grid-item-2 img,
.project-grid-kb .grid-item-3 img,
.project-grid-kb .grid-item-4 img {
  transform: scale(1.45); /* Zoom in by 25% to hide the outer frame edges */
  transform-origin: center;
}
/* 5. Ensure the Fern and Installation shots are NOT zoomed */
.project-grid-kb .grid-item-5 img,
.project-grid-kb .grid-item-6 img,
.project-grid-kb .grid-item-7 img {
  transform: scale(1.0); /* Keeps these at normal size */
  object-fit: contain;   /* Ensures no cropping on these specific images */
}


.project-grid-kb .grid-item-1 { grid-column: 1; grid-row: 1; }
.project-grid-kb .grid-item-2 { grid-column: 2; grid-row: 1; }
.project-grid-kb .grid-item-3 { grid-column: 3; grid-row: 1; }
.project-grid-kb .grid-item-4 { grid-column: 4; grid-row: 1; }
.project-grid-kb .grid-item-5 { grid-column: 1 / 3; grid-row: 2 / 4; }
.project-grid-kb .grid-item-6 { grid-column: 3 / 5; grid-row: 2; }
.project-grid-kb .grid-item-7 { grid-column: 3 / 5; grid-row: 3; }

/* Hover states */
.project-thumb:hover, .hero-image:hover {
  opacity: 0.75;
}

.project-grid-container-k3, 
.project-grid-container-kb, 
.project-grid-container-kbb2, 
.project-grid-container-k2 {
  max-width: 800px; 
  width: 95%;
  margin: 0 auto;
  padding: 2vw 0;
}

/* Grid for kaleidoscope2.html */

.project-grid-k2 {
  display: grid;
  grid-template-columns: repeat(16, 1fr); /* 16-column grid */
  grid-template-rows: 1.5fr 1fr 1fr; /* 3 rows */
  gap: 6px;
}

.project-grid-k2 .project-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: center;
}

/* Row 1 - 4 images, each spanning 4 columns */
.project-grid-k2 .grid-item-1 { grid-column: 1 / 5; grid-row: 1; }    /* kb24.jpg - columns 1-4 */
.project-grid-k2 .grid-item-2 { grid-column: 5 / 9; grid-row: 1; }    /* kb25.jpg - columns 5-8 */
.project-grid-k2 .grid-item-3 { grid-column: 9 / 13; grid-row: 1; }   /* kb26.jpg - columns 9-12 */
.project-grid-k2 .grid-item-4 { grid-column: 13 / 17; grid-row: 1; }  /* kb27.jpg - columns 13-16 */

/* Rows 2-3 - 2 images spanning both rows */
.project-grid-k2 .grid-item-5 { grid-column: 1 / 11; grid-row: 2 / 4; }  /* kb22.jpg - spans 10 cols, 2 rows */
.project-grid-k2 .grid-item-6 { grid-column: 11 / 17; grid-row: 2 / 4; } /* kb21.jpg - spans 6 cols, 2 rows */

/* Hover states */
.project-thumb:hover, .hero-image:hover {
  opacity: 0.75;
}



/* Grid for spirits.html */
.project-grid-container-spirit {
  max-width: 900px;
  width: 95%;
  margin: 0 auto;
  padding: 2vw 0;
}

.project-grid-spirit {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.project-s-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
  box-sizing: border-box;
}

.project-grid-spirit .grid-item-1 { 
  grid-column: 1; 
  grid-row: 1; 
}

.project-grid-spirit .grid-item-4 { 
  grid-column: 2; 
  grid-row: 1; 
}

/* Hover states */
.project-s-thumb:hover {
  opacity: 0.75;
  cursor: pointer;
}

/* Grid for kaleidoscope.html */



.project-grid-kbb2 {
  display: grid;
  grid-template-columns: 5fr 5.5fr 4.2fr 6.5fr;
  grid-template-rows: auto; /* <--- CHANGE THIS TO auto */
  gap: 7px;     
}

.project-grid-kbb2 .project-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: center;
}

/* Specific control for kb5 (grid-item-4) */
/*.project-grid-kbb2 .grid-item-4 {
  max-width: 100%;
  height: auto; 
  object-fit: contain; 
  align-self: center; 
  justify-self: center; 
}
*/
/* Or alternative approach - just change the object-fit */
/*
.project-grid-kbb2 .grid-item-4 {
  object-fit: scale-down; 
  object-position: center;
}
*/


/* Grid placements stay the same */
.project-grid-kbb2 .grid-item-1 { grid-column: 1; grid-row: 1; } /* kb6 */
.project-grid-kbb2 .grid-item-2 { grid-column: 2; grid-row: 1; } /* kb2 */
.project-grid-kbb2 .grid-item-3 { grid-column: 3; grid-row: 1; } /* kb7 */
.project-grid-kbb2 .grid-item-4 { grid-column: 4; grid-row: 1; } /* kb5 */
.project-grid-kbb2 .grid-item-5 { grid-column: 1; grid-row: 2; } /* kb4 */
.project-grid-kbb2 .grid-item-6 { grid-column: 2; grid-row: 2; } /* kb3 */
.project-grid-kbb2 .grid-item-7 { grid-column: 3 / 6; grid-row: 2; } /* kb1 */

/* Hover states */
.project-thumb:hover, .hero-image:hover {
  opacity: 0.75;
}

/* Grid for exhibits2.html - extended from working exhibits.html */
.project-grid-container-e2 {
  max-width: 700px;
  width: 95%;
  margin: 0 auto;
  padding: 2vw 0;
}

.project-grid-e2 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr 1fr 1fr 0.4fr 1fr 1fr 1fr; /* Added a 40px spacer row */
  gap: 6px;
}

.project-grid-e2 .project-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-grid-e2 .grid-item-1 {
  grid-column: 3 / 11;
  grid-row: 1 / span 3;
  margin-bottom: 35px;
}

/* Row 5 (after spacer) - 3 images */
.project-grid-e2 .grid-item-2 { grid-column: 1 / 5; grid-row: 5; }
.project-grid-e2 .grid-item-3 { grid-column: 5 / 9; grid-row: 5; }
.project-grid-e2 .grid-item-4 { grid-column: 9 / 13; grid-row: 5; }

/* Row 6 - 3 images */
.project-grid-e2 .grid-item-5 { grid-column: 1 / 5; grid-row: 6; }
.project-grid-e2 .grid-item-6 { grid-column: 5 / 9; grid-row: 6; }
.project-grid-e2 .grid-item-7 { grid-column: 9 / 13; grid-row: 6; }

/* Row 7 - 3 images */
.project-grid-e2 .grid-item-8 { grid-column: 1 / 5; grid-row: 7; }
.project-grid-e2 .grid-item-9 { grid-column: 5 / 9; grid-row: 7; }
.project-grid-e2 .grid-item-10 { grid-column: 9 / 13; grid-row: 7; }

/* Hover states */
.project-thumb:hover, .hero-image:hover {
  opacity: 0.75;
}


/* === Modal === */
.modal {
  display: none;
  position: fixed;
  z-index: 99;
  left: 0; top: 0;
  width: 100vw; height: 100vh;
  background: rgba(30, 30, 30, 0.96);
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.modal-caption {
  margin: 0;
  padding: 8px 0 0 0;
  color: #fff;
  text-align: center;
  font-size: 1rem;
  font-weight: 300;
  opacity: 0.8;
  font-family: "aktiv-grotesk", sans-serif;
  max-width: 94vw;
  word-break: break-word;
}

.modal img {
  max-width: 96vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  display: block;
  background: #fff;
  border: 3px solid #2d2214;
  box-sizing: border-box;
}

.modal-arrow {
  background: none;
  border: none;
  color: #fff;
  font-size: 2.5rem;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 101;
  padding: 0 18px;
  opacity: 0.8;
}
.modal-arrow.left { left: 24px; }
.modal-arrow.right { right: 24px; }

.modal-close {
  position: absolute;
  top: 32px;
  right: 44px;
  font-size: 54px;
  color: #fff;
  cursor: pointer;
  z-index: 100;
}

/* === Footer === */
footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 2vw 36px 2vw;
  border-top: 1px solid #aaa;
  margin-top: 44px;
  background: #fff;
  font-size: 20px;
  font-weight: 300;
}

.footer-left, .footer-right {
  font-size: 20px;
  line-height: 1.5;
}

footer strong {
  font-family: "aktiv-grotesk", sans-serif;
  font-weight: 600;
  letter-spacing: 1px;
}

footer a {
  color: #222;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}


/* === RESPONSIVE BREAKPOINTS === */

/* Desktop 700px+ - Logo gets bigger and stays bigger */
@media (min-width: 700px) {
  .homepage .logo {
    height: 66px;
  }
  .homepage .header-title {
    font-size: 25.5px;
  }
}

/* Tablet: 500px 799px */
@media (max-width: 799px) and (min-width: 500px) {
  .header-title {
    font-size: 17px;
    font-weight: bold;
  }

  .homepage-quote-img-overlay {
    min-height: 340px;
  }
  
  .quote-overlay-text,
  .quote-overlay-text p {
    font-size: clamp(16px, 2vw, 22px);
    max-width: 90vw;
    margin: 0 auto;
    word-break: break-word;
    text-align: center;
    line-height: 1.5;
    padding: 10px 7vw 8px 7vw;
    box-sizing: border-box;
  }
  
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr); 
    width: 100%; /* Tablet: 3 columns */
  }
  
  .gallery-link span {
    font-size: 16px;
  }
  
  .homepage .intro, .footer-left, .footer-right,
  .project-page .project-description {
    font-size: 19px;
    margin-left: 10%;
    margin-right: 10%;
  }
  
  .project-page h2 {
    font-size: 19px;
  }
}

/* Mobile: under 768px (all phones portrait + landscape) */
@media (max-width: 767px) {

  .header-title {
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
  }

  .logo-center {
    white-space: nowrap;
  }

  .logo {
    height: 34px;
    margin-right: 8px;
  }

  .homepage-quote-img-overlay {
    min-height: unset;
    height: auto;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  
  .quote-overlay-text {
    position: static;
    width: 100vw;
    height: auto;
    display: block;
    padding: 0;
  }
  
  .quote-overlay-text p {
    font-size: 18px;
    padding: 0 6vw;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.20);
    margin: 0;
    text-align: center;
    max-width: 100vw;
    word-break: break-word;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr); /* Mobile: 2 columns */
    gap: 0.5vw;
    width: 100%;
  }
  
  .gallery-link span {
    font-size: 15px;
  }
  
  .homepage .intro, .footer-left, .footer-right, 
  .project-page .project-description {
    font-size: 16px;
    margin-left: 10%;
    margin-right: 10%;
  }
  
  .project-page h2 {
    font-size: 18px;
  }

  footer {
    flex-direction: column; /* Single column footer on mobile */
    gap: 16px;
    align-items: flex-start;
  }
  
  .modal img {
    max-width: 96vw;
    max-height: 78vh;
    object-fit: contain;
  }
}

/* Large desktop modal */
@media (min-width: 900px) {
  .modal img {
    max-width: 1400px;
    max-height: 92vh;
  }
}

@media (max-width: 800px) {
  .quote-overlay-text {
    font-size: 16pt;
    padding: 16px 7vw;
  }
  .homepage-quote-img-overlay {
    min-height: 260px;
  }
}

@media (max-width: 600px) {
  .project-grid-container {
    max-width: 98vw;
    padding: 0 1vw;
  }
}

/* Smartphone + Tablet: stack lb grid images vertically */
@media (max-width: 799px) {
  .project-grid-lb {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    max-width: 350px;
    margin: 0 auto;
  }
  .project-grid-lb .grid-item-2 { grid-column: 1; grid-row: 1; }
  .project-grid-lb .grid-item-3 { grid-column: 1; grid-row: 2; }
  .project-grid-lb .grid-item-4 { grid-column: 1; grid-row: 3; }
}

/* === RESPONSIVE OVERRIDES === */

/* This handles the video size for Tablets, Laptops, and Desktops */
@media (min-width: 768px) {
  .video-wrapper {
    max-width: 400px; /* This makes it roughly 50% smaller than full-screen */
    margin: 0 auto;
  }
}

/* This ensures it stays full-width on Smartphones */
@media (max-width: 767px) {
  .video-wrapper {
    width: 95%;
    max-width: none;
  }
}