@font-face {
  font-family: 'Brown';
  src: url('../fonts/Brown-Bold.woff2') format('woff2'),
       url('../fonts/Brown-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Brown';
  src: url('../fonts/Brown-Bold-Italic.woff2') format('woff2'),
       url('../fonts/Brown-Bold-Italic.woff') format('woff');
  font-weight: bold; /* Same weight unless there's also a bold italic */
  font-style: italic; /* Specific for italic text */
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Brown', sans-serif;
  font-weight: bold;
}

.works-page {
  min-height: 100vh;
  overflow-x: hidden;
}

/* Trim extra bottom space on last row */
.content-wrapper .year-row:last-of-type {
  margin-bottom: 0;
}
.content-wrapper .year-row:last-of-type .works {
  padding-bottom: 0;
}

/* Header */
header {
  position: relative; /* Changed from fixed to relative */
  width: 100%;
  height: auto; /* Adjust height if needed */
  background-color: #fff;
  z-index: 10; /* Adjust z-index if necessary */
}

a {
  color: #000000;
  text-decoration: none; /* Optional: remove underline */
  transition: color 0.3s ease-in-out; /* Smooth link transitions */
}

/* Logo */
.logo {
  position: absolute; /* Position it on the page */
  top: 56px;
  left: 60px; /* Align with the right side of the page */
  width: 300px; /* Adjust width as needed */
  overflow: hidden;
}

.logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
  max-width: 460px;
  max-height: 117px;
}

/* Navigation (Align with Year Label) */
nav {
  position: relative; /* Position it within the flow */
  margin-left: 60px; /* Match margin with the year label */
  top: 140px; /* Align vertically with the content */
}

nav a {
  font-size: 20px;
  text-decoration: none;
  color: #444;
  transition: color 0.5s ease-in-out;
}

nav a.active {
  color: #ff69b4; /* Highlight active navigation link */
}

/* Content Wrapper */
.content-wrapper {
  position: relative;
  padding-top: 264px; /* Increased from 214px to add more space */
  margin: 0 60px;
  max-width: 100%;
}

/* Year Rows */
.year-row {
  margin-bottom: 60px;
}

.year-label {
  font-size: 20px;
  color: #444;
  margin-bottom: 40px;
}

/* Works */
.works {
  display: flex;
  gap: 50px;
  align-items: flex-start;
  padding-bottom: 40px;
  max-width: 100%; /* Ensure works container can shrink */
  will-change: transform; /* Optimize transform transitions */
}

.work {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Images container */
.images {
  display: flex;
  gap: 50px;
  align-items: flex-start;
  height: 520px;
  max-width: 100%; /* Ensure images container can shrink */
  will-change: filter; /* Optimize filter transitions */
}

/* Image Styling with Proportional Resizing */
.images img {
  max-width: 100%;
  height: auto;
  transition: filter 0.5s ease, transform 0.3s ease; /* Smooth effects */
  filter: grayscale(100%);
  backface-visibility: hidden; /* Improve rendering performance */
}

.work.active .images img {
  filter: none; /* Remove grayscale effect */
}

/* Description */
.description {
  margin-top: 10px;
  font-size: 20px;
  line-height: 1.2;
  color: white;
  transition: color 0.2s ease-in-out;
  visibility: visible;
}

/* Captions */
.captions-wrapper {
  display: inline-block;
  line-height: 1.6;
  vertical-align: top;
  margin-bottom: 60px;
  flex-wrap: wrap;
  gap: 54px;
}

.caption {
  font-size: 20px;
  color: #5d5d5d;
}

/* Caption items interleaved among works (desktop) */
.caption-item {
  font-size: 20px;
  color: #5d5d5d;
  line-height: 1.2; /* Tighter line height */
  align-self: flex-start;
  max-width: 500px; /* Fallback; per-item max set inline (350 or 500) */
  white-space: normal;
  overflow-wrap: anywhere; /* Break long strings if needed, but not every letter */
  word-break: normal;
  flex: 0 0 auto; /* Prevent flexbox from shrinking captions to 1px width */
}

@media (max-width: 1024px) {
  .logo {
    width: 250px;
    right: 30px;
  }

  nav {
    margin-left: 30px;
    font-size: 18px;
  }

  .content-wrapper {
    padding: 20px;
  }

  .works {
    gap: 20px;
    flex-wrap: wrap;
  }

  .work {
    flex: 1 1 calc(50% - 20px);
  }

  .year-label {
    font-size: 18px;
    margin-left: 30px;
  }

  .description {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .logo {
    margin-bottom: 20px;
    right: auto;
  }

  nav {
    display: none; /* Hide nav links */
  }

  .hamburger-menu {
    display: block; /* Show hamburger menu */
  }

  .works {
    flex-wrap: wrap;
    gap: 15px;
  }

  .description {
    font-size: 14px;
  }
}

.credit a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color 0.3s ease;
}

.credit a:hover {
  color: #ff69b4; /* Replace with your navigation active color */
  opacity: 1;
}