.homepage {
    background: url('Images/(P16) Character Ignite Truth.jpg') no-repeat center center;
    background-size: cover;
    height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

.homepage-text {
    position: relative;
    z-index: 10;
    padding: 2rem;
    color: white;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}
/* Updated: Bigger overall, tighter spacing */

.golden-portfolio-header {
  text-align: center;
  margin: 80px 0;
  font-family: 'Cinzel', serif;
  color: transparent;
  background: linear-gradient(to bottom, #fff6e6, #e6c472);
  -webkit-background-clip: text;
  background-clip: text;
}

.golden-subtitle {
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.golden-divider {
  width: 95%;
  height: 6px;
  margin: 0 auto  auto; /* reduced bottom margin */
  background: linear-gradient(to right, #fff6e6, #e6c472);
  border: none;
}

.golden-title {
  font-size: 140px;

  letter-spacing: 3px;
  text-transform: uppercase;

    font-family: 'Cinzel', serif;
  font-weight: 900; /* This makes it use Cinzel Black */

}


.homepage-text h1 {
    font-family: 'Cinzel', serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    letter-spacing: 3px;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.homepage-text .decorative-line {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem auto;
    width: 80%;
    max-width: 400px;
}

.homepage-text .decorative-line::before,
.homepage-text .decorative-line::after {
    content: "";
    flex: 1;
    height: 2px;
    background: white;
    margin: 0 1rem;
}

.homepage-text h2 {
    font-family: 'Futura', sans-serif;
    font-size: clamp(1.2rem, 3vw, 1.7rem);
    letter-spacing: 4px;
    text-transform: capitalize;
    font-weight: 300;
    margin-top: 1rem;
}
    /* Gallery Grid (Home) */
    .art-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 1rem;
      padding: 1rem;
    }
    .art-card {
      cursor: pointer;
      overflow: hidden;
      border-radius: 8px;
    }
    .art-card img {
      width: 100%;
      transition: transform 0.3s;
    }
    .art-card:hover img {
      transform: scale(1.03);
    }

    /* Project Modal (Process Breakdown) */
   .modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #150021; /* Solid dark background */
  z-index: 1000;
  overflow-y: auto;
  padding: 0;
  margin: 0;
  border: none;
}
.modal-content {
  width: 100%;
  min-height: 80vh; /* Force full viewport height */
  margin: 0;
  padding: 2rem;
  box-sizing: border-box;
}

/* ADD this to make images expand */
.process-step img {
  width: 100%;
  max-height: 80vh; /* Prevents vertical overflow */
  object-fit: contain; /* Keeps aspect ratio */
  border: none; /* Optional: remove if you prefer borders */
}
    .close-btn {
      color: white;
      font-size: 2rem;
      position: absolute;
      top: 1rem;
      right: 1.5rem;
      cursor: pointer;
    }
    .process-steps {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .process-step img {
      width: 100%;
      border: 1px solid #333;
    }
    .step-label {
      color: #e0a1ff;
      margin-bottom: 0.5rem;
    }

    .nav-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: #2E0D44;
  color: #EFC887;
  border: none;
  font-size: 2rem;
  width: 50px;
  height: 100px;
  cursor: pointer;
  z-index: 1001;
  transition: background 0.2s;
  opacity: 50%;
}

.nav-arrow:hover {
  background: rgba(224, 161, 255, 0.5);
}

.left-arrow {
  left: 20px;
  border-radius: 0 5px 5px 0;
}

.right-arrow {
  right: 20px;
  border-radius: 5px 0 0 5px;
}
/* Title & Description */
.art-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.art-title {
  font-family: 'Cinzel', serif;
  font-size: 2.5rem;
  margin: 0;
  color: #EFC887;
}

.art-description {
  font-family: 'Futura', sans-serif;
  font-size: 1.1rem;
  color: white;
  margin-top: 0.5rem;
}

/* Main Image */
.main-art {
  max-width: 85%;
  max-height: 65vh;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

/* Art Info */
.art-info {
  text-align: center;
  margin-top: 1rem;
  font-family: 'Futura', sans-serif;
  color: white;
  font-size: 0.9rem;
}



/* Optional: Fade effect when filtering */
.art-card:not([style*="display: block"]) {
  opacity: 0;
  height: 0;
  padding: 0;
  margin: 0;
  border: none;
}
/* ADD ONLY these new rules - won't modify existing ones */
.portfolio-menu {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  background: #1a1a1a;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ===== FRESH GALLERY SYSTEM ===== */
.gallery-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  background: #150021;
  position: sticky;
  top: 0;
  z-index: 100;
}

.gallery-filter {
  background: transparent;
  color: #EFC887;
  border: none;
  font-family: 'cinzel', sans-serif;
   font-size: 1.2rem;
  padding: 0.5rem 1.25rem;
  cursor: pointer;
  transition: all 0.3s;
}

.gallery-filter.active {
  color: #e62ebd;
  border-bottom: 2px solid #e0a1ff;
}

.gallery-grid {
  column-count: 2;
  column-gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
}

.gallery-item {
  cursor: pointer;
  overflow: hidden;
  border-radius: 8px;
}

.gallery-item img {
  width: 100%;
  transition: transform 0.3s;
}

.gallery-item:hover img {
  transform: scale(1.03);
}








#illustrations-section {
  padding: 4rem 2rem;
  background-color: #150021;
  text-align: center;
}

.gallery {
  column-count: 2;
  column-gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
}

.gallery-item {
  break-inside: avoid;
  margin-bottom: 16px;
  width: 100%;
  display: block;
}

.gallery-item img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.2s;
  max-width: 100%;
  max-height: 500px;
}

/* --- Responsive Heading (Euphoria Rose Studios) --- */
.golden-title {
  font-size: clamp(2.5rem, 12vw, 140px); /* Normal size until small screens */
  letter-spacing: 3px;
  text-transform: uppercase;
  font-family: 'Cinzel', serif;
  font-weight: 900;
  line-height: 1.05;
  word-break: break-word;
  padding: 0 0.5rem;
}

/* --- Responsive Gallery Filter Tabs --- */
.gallery-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  background: #150021;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-wrap: wrap;
}

.gallery-filter {
  background: transparent;
  color: #EFC887;
  border: none;
  font-family: 'Cinzel', sans-serif;
  font-size: clamp(1rem, 3vw, 1.2rem); /* Normal size, scales down on small screens */
  padding: 0.5rem 1.25rem;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 0.5rem;
  white-space: nowrap;
}

/* --- Extra: On very small screens, allow wrapping and reduce gap --- */
@media (max-width: 500px) {
  .gallery-controls {
    gap: 0.4rem;
    padding: 0.7rem 0.2rem;
  }
  .gallery-filter {
    padding: 0.4rem 0.7rem;
    font-size: clamp(0.9rem, 4vw, 1.1rem);
  }
}