/* Base Styles (Desktop/Default) */
body {
  margin: 20px 15vw 0 20vw;
  font-family: Times New Roman, serif;
  color: black;
}

.site-title {
  position: fixed;
  top: 20px;
  left: 20px;
  margin: 0;
  z-index: 100; 
}

.site-title a {
  text-decoration: none;
  color: inherit; 
}


.about-link {
  position: fixed;
  bottom: 20px;
  left: 20px;
  margin: 0;
  z-index: 100;
}

.about-link a {
  text-decoration: none;
  color: inherit; 
}


.about-button a {
  text-decoration: none;
  color: inherit; 
} 


.layout-container {
  display: flex;
  align-items: stretch; 
  gap: 40px; 
}

.gallery {
  display: flex;
  flex-direction: column;
  gap: 20px; 
  width: 600px;     /* Set the target width */
  flex-shrink: 0;   /* Prevents the text from squishing the image column */
}

.portrait-row {
  display: flex;
  gap: 20px; 
  /* Changed from width: 600px to allow shrinking */
  width: 100%; 
  max-width: 600px; 
}

.portrait-row .image-wrapper {
  flex: 1;
  margin-bottom: 0;
}

.portrait-row img {
  width: 100%;
  height: auto;
}

.text-content {
  display: flex;
  flex-direction: column; 
  flex-grow: 1;     /* Tells the text to take up whatever space is left over */
}

.text-content p, h1, h2 {
  margin-top: 0;
}

.image-wrapper {
  position: relative;
  display: block; /* Changed from inline-block for better predictability */
  margin-bottom: 20px;
  width: 100%;       /* Forces wrapper to fill available space... */
  max-width: 600px;  /* ...but strictly stops growing at 600px */
}

.image-wrapper a {
  display: block;
  background-color: grey; 
}

.image-wrapper img {
  display: block;
  width: 100%;       /* Image fills the wrapper (600px standalone, ~290px in rows) */
  height: auto;      /* Keeps the correct aspect ratio */
  flex-shrink: 0;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.hover-title {
  font-style: italic;
  position: absolute;
  left: calc(100% + 30px); 
  top: 0; 
  opacity: 0; 
  transition: opacity 0.3s ease;
  width: max-content;
  max-width: 200px;
  pointer-events: none; 
}

.image-wrapper:hover .hover-title {
  opacity: 1;
}

.image-wrapper:hover img {
  filter: grayscale(100%);
  opacity: 0.4; 
}

.image-wrapper.no-hover:hover img {
  filter: none;
  opacity: 1;
}

.detail_image-wrapper {
  margin-left: 20vw;
  position: relative;
  display: inline-block;
  margin-bottom: 20px; 
}

/* Mobile & Tablet Breakpoint (Screens 768px and smaller) */
@media screen and (max-width: 768px) {
  body {
    /* Reduce side margins to maximize readable area */
    margin: 80px 5vw 0 5vw; 
  }

  .site-title {
    background: transparent; 
    padding-bottom: 10px;
    width: auto; /* Changed from 100% so it doesn't block the About button */
    padding-right: 10px; /* Optional: adds space so background covers text cleanly */
    position: absolute; /* Changes from fixed so it scrolls out of view */
  }
  
  .about-link {
    position: absolute; /* Changes from fixed so it scrolls out of view */
    top: 20px;
    right: 20px;
    bottom: auto; /* Resets the bottom position from desktop */
    left: auto; /* Resets the left position from desktop */
    background: transparent; 
  }

  .layout-container {
    /* Stack side-by-side containers vertically */
    flex-direction: column; 
    gap: 20px; 
  }
  
  .gallery {
    width: 100%; /* Resets the gallery to fill the screen on mobile */
  }
  
  .text-content {
    order: -1; /* Forces the text to appear above the gallery */
    margin-bottom: 20px; /* Optional: adds some space between the text and the first image */
  }
  
  .text-content p:first-child {
    position: absolute;
    top: 20px;
    right: 20px;
    margin: 0;
    text-align: right;
    max-width: 50vw; /* Prevents long titles from crashing into your name on the left */
  }

  .portrait-row {
    /* Stack portrait images vertically on very small screens, or adjust gap */
    flex-direction: column;
    max-width: 100%;
  }

  .detail_image-wrapper {
    /* Remove large offset on small screens */
    margin-left: 0; 
    width: 100%;
  }

  .detail_image-wrapper img {
    width: 100%;
    height: auto;
  }

  /* Address hover states for touch devices where hover does not exist */
  .hover-title {
    position: static;
    opacity: 1;
    margin-top: 8px;
    width: 100%;
    max-width: none;
  }
}