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

html {
  height: 100%;
  background-color: #ffffff;
}

body {
  font-family: "Archivo", sans-serif;
  background-color: #ffffff;
  color: #000000;
  overflow: hidden;
  min-height: 100vh;
  overscroll-behavior: none;
  transition: background-color 0.4s ease; /* Smooth transition for background color */
  touch-action: none; /* Prevent vertical scrolling on landing page */
}

/* Main Navigation Bar */
.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  padding: 0 2%;
  gap: 1.5rem;
  position: relative;
  z-index: 1000;
}

.navbar-section {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Left Section: Name */
.navbar-left {
  transition: opacity 0.3s ease;
  display: none; /* Hide on desktop as content moved to center */
}

.name {
  font-size: 0.75rem; /* Reverted to original size for desktop */
  font-weight: 500;
  letter-spacing: 0.07em;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.3s ease, transform 0.3s ease;
  color: #999999;
  text-transform: uppercase;
  pointer-events: auto;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
}

.name:hover {
  opacity: 0.7;
  transform: translateY(-2px);
}

/* Center Section: Projects */
.navbar-center {
  justify-content: center;
  flex: 1;
  transition: opacity 0.3s ease;
  min-width: 0;
}

.projects-container {
  display: flex;
  gap: 4rem;
  flex-wrap: nowrap;
  justify-content: center;
}

.project-link {
  background: none;
  border: none;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000000;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
  position: relative;
  white-space: nowrap;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
  flex-shrink: 0;
  letter-spacing: 0.05em;
  transition: opacity 0.3s ease, transform 0.3s ease;
  text-transform: uppercase;
  pointer-events: auto;
}

.project-link:hover {
  opacity: 0.7;
  transform: translateY(-2px);
}

.about-link-mobile {
  display: none;
  color: #999999;
}

/* Special subtitle for Echo Spaces, positioned on the right */
.special-subtitle {
  position: absolute;
  top: 50%; /* Align with the vertical center */
  right: 2%; /* Same padding as the navbar */
  font-size: 0.75rem;
  font-weight: 400;
  text-align: left;
  opacity: 0;
  max-width: 350px; /* Ensure long text wraps nicely */
  pointer-events: none;
  letter-spacing: 0.05em;
  font-family: "STIX Two Text", serif;
  /* Transition is now defined on the .visible state */
}

.special-subtitle.visible {
  opacity: 0.7;
  pointer-events: auto;
  transition: opacity 0.4s ease 0.1s; /* Fade in earlier */
}

/* Modifier to align the subtitle to the left */
.special-subtitle.align-left {
  right: auto; /* Unset the right property */
  left: 2%; /* Position it on the left */
}

/* Right Section: Contact */
.navbar-right {
  justify-content: center;
  transition: opacity 0.3s ease;
  display: none; /* Hide on desktop as content moved to center */
}

.contact-link {
  font-size: 0.75rem;
  font-weight: 500;
  color: #999999;
  text-decoration: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: auto;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
}

.contact-link:hover {
  opacity: 0.7;
  transform: translateY(-2px);
}

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* Use 100vh to extend behind the URL bar on iOS */
  bottom: auto;
  background-color: transparent;
  display: none;
  flex-direction: column; /* This will be the main flex container */
  justify-content: center; /* Center the content vertically */
  align-items: center;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.15s ease-out;
  pointer-events: none;
}

.modal-overlay.active {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background-color: transparent;
  padding: 0;
  max-width: 90vw;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

@keyframes modalSlideIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.modal-content {
  display: flex;
  flex-direction: column; /* Stack top, image, bottom */
  align-items: center;
  width: 100%;
  height: 100%;
}

.image-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  flex: 1; /* Allow gallery to grow and shrink */
  min-height: 0; /* Essential for nested flex scrolling */
}

.image-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative; /* Establish positioning context for the scroll track */
  transition: none;
  overflow-y: hidden;
  gap: 4rem;
  padding: 0;
  scrollbar-width: auto;
  -ms-overflow-style: none; /* IE and Edge */
}

.image-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.image-scroll-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.image-container img,
.image-container video {
  max-width: 90vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain; /* Ensure the whole image is visible */
  opacity: 1;
  transition: none;
  flex-shrink: 0;
}

/* Hide the image counter */
.image-counter {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: #333333;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.image-container .fade-in {
  /* Apply the fade-in animation only on the first load or about page open */
  animation: fadeIn 0.4s ease both;
}

.about-image-placeholder .fade-in {
  animation: fadeIn 0.4s ease both;
}

/* Special class to make certain images smaller */
.image-container img.smaller-image,
.image-container video.smaller-image {
  max-width: 80vw;
  max-height: 60vh;
}

/* Special positioning for the very wide image */
.image-container img.extra-wide-image,
.image-container video.extra-wide-image {
  margin-top: 0vh;
}
.image-container .placeholder-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.placeholder-image {
  display: flex;
  align-items: center;
  justify-content: center; /* Keep placeholder styling */
  font-size: 0.75rem;
  color: #333333;
  background-color: #f3f3f3; /* Add transition for placeholder */
  transition: none;
  border-radius: 6px;
  letter-spacing: 0.04em;
  width: 500px; /* Give placeholder a size */
  height: 500px;
}

.modal-top,
.modal-bottom {
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  font-family: "STIX Two Text", serif;
  color: #333333;
  letter-spacing: 0.06em;
  line-height: 1.3;
  padding: 0.5rem 0; /* Add a little space */
  max-width: 90vw;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s ease-out 0.2s, transform 0.5s ease-out 0.2s;
}

.modal-overlay.active .modal-top,
.modal-overlay.active .modal-bottom {
  opacity: 1;
  transform: translateY(0);
}

.modal-top {
  /* No longer needs margin: auto */
}

.modal-bottom {
  /* No longer needs margin: auto */
}

/* Responsive Design */
.modal-project-title {
  display: inline-block;
  font-weight: 400; /* Match mobile link font weight */
  letter-spacing: 0.08em;
  font-size: 0.9rem; /* Match mobile link font size */
  margin-bottom: 0.5rem;
}

/* Mobile Modal Layout Reordering */
@media (max-width: 768px) {
  .modal-overlay {
    /* Reorder elements for mobile view */
    justify-content: center; /* Center the image when it's the only item */
  }
}

body.project-womc-active {
  background-color: #e0e0e0;
}

/* Style for when a video is playing in the 'arts of change' project */
body.video-is-playing {
  background-color: #f0f0f0; /* Light grey background */
}

/* Desktop-only animations for navbar elements */
@media (min-width: 769px) {
  /* Fade out sidebars ONLY when a project modal is active, NOT the about page */
  body.modal-is-active:not(.about-is-active) .navbar-left,
  body.modal-is-active:not(.about-is-active) .navbar-right {
    opacity: 0;
    pointer-events: none;
  }

  /* Position descriptions at the very top and bottom on desktop */
  .modal-top {
    position: absolute;
    top: 2rem;
    left: 0;
    width: 100%;
    padding: 0;
    max-width: 100%;
    pointer-events: none;
  }

  .modal-bottom {
    position: absolute;
    bottom: 2rem;
    left: 0;
    width: 100%;
    padding: 0;
    max-width: 100%;
    pointer-events: none;
  }
  
  /* Allow clicks to pass through the navbar container on desktop so overlay can be closed */
  .navbar {
    pointer-events: none;
  }

  /* Hide the duplicate header inside about overlay on desktop */
  .about-header {
    display: none !important;
  }

  /* Ensure main navbar sits above about overlay and change colors */
  body.about-is-active .navbar {
    z-index: 1501;
  }
  body.about-is-active .navbar-left .name,
  body.about-is-active .navbar-right .contact-link {
    color: #000000;
  }
}

/* About Page Overlay */
.about-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* Use 100vh to extend behind the URL bar on iOS */
  bottom: auto;
  background-color: #ffffff;
  z-index: 1500; /* Above navbar, below modal */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.about-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.about-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 2%;
  gap: 1.5rem;
  pointer-events: none; /* Pass clicks through the container */
}

.about-image-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.about-image-placeholder img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 92%;
  object-fit: contain;
}

.about-content {
  /* Hide text content on desktop */
  display: none;

  /* Original styles below are now overridden by display: none */
  /* Create a two-column grid and place content in the second column */
  /* Define three columns: left padding, content area, right padding */
  grid-template-columns: 1.2fr minmax(auto, 800px) 0.8fr; /* Shifted slightly right */
  gap: 4rem;
  width: 100%;
  max-width: 1400px; /* Re-add max-width for the overall content block */
  margin: 0 auto; /* Center the entire about-content block */
  color: #000000;
}

.about-column {
  display: grid; /* Use grid for precise alignment of heading and content */
  /* Define two columns: one for the heading, one for the content */
  grid-template-columns: 10rem 1fr; /* Fixed width for heading, rest for content */
  gap: 2rem; /* Space between the heading and the content block */
  align-items: baseline; /* Align the first line of text of heading and content */
  grid-column: 2; /* Place each column in the second track of the grid */
}

.about-column > * {
  /* This rule was causing issues. We'll manage spacing more granularly. */
  margin-bottom: 0; /* Reset default margin for direct children */
}

.about-column h2 {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: 0; /* Remove margin that pushed content down */
  text-align: right; /* Align headline text to the right, against the content block */
  grid-column: 1; /* Place heading in the first grid column of its parent (.about-column) */
  grid-row: 1; /* Ensure it's on the first row */
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
} 

.about-column p,
.about-column ul {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.06em;
  grid-column: 2; /* Place content in the second grid column of its parent (.about-column) */
  grid-row: 1; /* Ensure it starts on the first row */
}

.about-column ul {
  list-style: none;
}

@media (max-width: 1024px) {
  .about-content {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem; 
  }
}

@media (max-width: 768px) {
  /* Allow body to scroll natively when content is active */
  body.modal-is-active,
  body.about-is-active {
    overflow-y: auto;
    touch-action: auto;
  }

  .about-content {
    /* Hide text content on mobile */
    display: none;
  }

  .about-image-placeholder {
    /* Show image placeholder on mobile */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow: visible;
    height: auto;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
  }

  .about-image-placeholder img {
    width: 60%;
    height: auto;
    max-width: none;
    max-height: none;
    flex-shrink: 0;
    margin-bottom: auto; /* Center vertically if small */
  }

  .about-column {
    grid-column: 1;
    grid-template-columns: 5rem 1fr;
    gap: 2rem;
  }
}

@media (max-width: 1400px) {
  .navbar {
    padding: 0 1.5%;
    gap: 1rem;
  }

  .projects-container {
    gap: 1rem;
  }

  .modal {
    padding: 2rem;
  }

  .image-container {
    /* No longer needed, as it's now responsive */
  }
}

@media (max-width: 768px) {
  .about-header .navbar-left .name {
    font-size: 0.9rem; /* Match mobile link font size */
  }
}

@media (max-width: 1024px) {
  .navbar {
    padding: 0 1%;
    gap: 0.8rem;
  }
 
  .projects-container {
    gap: 0.8rem;
  }

  .project-link.split-left {
    transform: translateX(-10vw);
  }

  .project-link.split-right {
    transform: translateX(10vw);
  }

  .modal {
    padding: 1.5rem;
    max-width: 95vw;
  }

  .image-container {
    /* No longer needed, as it's now responsive */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow-y: auto;
    width: 100%;
    height: 100%;
    padding-top: 10rem; /* Space for title/subtitle */
    padding-bottom: 4rem;
    gap: 2rem;
  }

  .image-container img,
  .image-container video,
  .image-container img.smaller-image,
  .image-container video.smaller-image,
  .image-container img.extra-wide-image,
  .image-container video.extra-wide-image {
    width: 100%; /* Full width */
    height: auto;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
    pointer-events: auto;
    flex-shrink: 0;
    touch-action: pan-y; /* Explicitly allow vertical scrolling on images */
    display: block;
    border: none;
    outline: none;
    background-color: transparent;
    box-shadow: none;
    margin-bottom: auto; /* Center vertically if small */
  }

  .image-container video,
  .image-container video.smaller-image,
  .image-container video.extra-wide-image {
    transform: scale(1.005); /* Slight scale to hide hairline border on iOS */
    transform-origin: center;
    will-change: transform; /* Optimize rendering */
    -webkit-backface-visibility: hidden; /* Prevent flickering during scale */
    backface-visibility: hidden;
  }

  .image-container > :first-child {
    margin-top: 0; /* Set dynamically via JS */
  }

  .image-counter {
    display: none;
  }

  /* Stack image and meta on smaller screens */
  .image-gallery {
    flex-direction: column;
    align-items: center;
  }

  .project-meta {
    max-width: 100%;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .navbar {
    flex-direction: column; /* Stack sections vertically */
    justify-content: space-between; /* Push name to top, contact to bottom */
    padding: 2rem 1% 5rem 1%;
    height: 100vh;
  }
  
  .navbar-center {
    width: 100%;
    align-items: stretch; /* Allow container to fill the full height */
  }

  .projects-container {
    flex-direction: row; /* Display project links horizontally */
    gap: 2.5rem;
    overflow-x: auto; /* Allow horizontal scrolling */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    justify-content: flex-start; /* Align items to the left for natural scrolling */
    padding: 0 50vw; /* Add large padding so first/last items can center */
    max-width: 100%;
    height: 100%; /* Fill the available vertical space */
    align-items: center; /* Keep the text centered vertically */
    scroll-snap-type: x mandatory; /* Enforce snapping to project links */
    scroll-behavior: smooth;
    touch-action: pan-x;
  }

  .projects-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari, and Opera */
  }

  .name {
    font-size: 0.9rem; /* Increase font size for mobile to match other links */
  }

  .project-link {
    font-size: 0.9rem;
    scroll-snap-align: center; /* Snap this element to the center of the container */
    pointer-events: none; /* Disable clicks by default */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .project-link.is-centered {
    pointer-events: auto; /* Enable clicks only when centered */
  }

  .about-link-mobile {
    display: block;
  }

  .contact-link {
    font-size: 0.9rem;
  }

  .modal {
    padding: 0;
    max-width: 100vw;
    height: auto;
    min-height: 100vh;
    max-height: 100%;
  }

  .image-container {
    /* No longer needed, as it's now responsive */
    position: static; /* Let it flow naturally in the document */
    width: 100%;
    height: auto;
    overflow: visible;
    overflow-x: hidden; /* Prevent horizontal scroll from video scaling */
    padding-top: 0; /* Remove padding so images are under the text */
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .image-container::-webkit-scrollbar {
    display: none;
  }

  /* Hide Name and Contact on mobile always */
  .navbar-left, .navbar-right {
    display: none;
  }

  /* Hide Name and Contact on mobile when modal is open */
  body.modal-is-active .navbar-left,
  body.modal-is-active .navbar-right {
    opacity: 0;
    pointer-events: none;
  }

  /* Position subtitle at the bottom, keeping image centered */
  .modal-bottom {
    position: absolute;
    bottom: 2rem;
    left: 0;
    padding: 0 1rem;
    width: 100%;
    max-width: 100%;
    pointer-events: none;
  }

  /* Position subtitle at the top for lower projects */
  .modal-top {
    position: absolute;
    top: 3.5rem; /* Sit below the project title (fixed via JS logic) */
    left: 0;
    padding: 0 1rem;
    width: 100%;
    max-width: 100%;
    pointer-events: none;
    color: white;
    mix-blend-mode: difference; /* Negative layering effect */
    z-index: 2002;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: none;
    transition: opacity 0.5s ease-out;
  }

  /* When moved to body on mobile */
  .modal-top.mobile-active {
    position: fixed;
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-overlay-title {
    color: white !important;
    mix-blend-mode: difference; /* Negative layering effect */
  }

  /* Fade out images when closing on mobile */
  body.is-closing .image-container {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  /* Change overlays to absolute so they scroll with the body */
  .modal-overlay,
  .about-overlay {
    position: absolute;
    height: auto;
    min-height: 100vh;
    bottom: auto;
    overflow: visible;
  }
}