.logo a {
  color: #ccc;              /* text color */
  text-decoration: none;    /* remove underline */
  font-weight: 600;          /* match previous logo font weight */
  cursor: pointer;           /* pointer on hover */
  transition: color 0.2s ease; /* smooth color change on hover */
}

.logo a:hover {
  color: #FF8800;            /* hover color */
}

/* --- FULLSCREEN HERO IMAGE --- */
.project-hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.project-hero img {
  position: fixed; /* keep it behind tray */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; /* ensures tray scrolls over it */
}

.project-hero picture.hero-image,
.project-hero picture.hero-image img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* --- TRAY CONTENT --- */
.project-tray {
  background-color: #1c2c23;
  padding: 20px;
}


/* --- HEADER TEXT AREA --- */
.project-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
}

.project-description h1 {
  font-family: "Instrument Serif", serif;
  margin: 0;
  color: #ccc;
}

.project-description p {
  font-family: "Work Sans", sans-serif;
  font-size: 1.2rem;
  color: #ccc;
  font-weight:300;
}

/* Info grid (4 columns) */
.project-info {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 20px;
  font-family: "Work Sans", sans-serif;
  font-size: 0.9rem;
  color: #ccc;
}

.project-info .label {
  font-weight: 600;
}

.project-info a {
  color: #FF8800;
  text-decoration: none;
  transition: color 0.2s ease;
}

.project-info a:hover {
  color: #fff;
}


/* --- IMAGE GRID --- */
.project-images {
  display: grid;
  gap: 0;
}

.project-images img {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* responsive grid */
@media (min-width: 600px) {
  .project-images {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .project-images {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- RELATED PROJECTS --- */
.related-projects {
  margin: 80px 0;
}

.related-projects h2 {
  margin-bottom: 30px;
  font-family: "Instrument Serif", serif;
  color: #ccc;
}

/* reuse your existing project-card styles */


/* --- DESCRIPTION BLOCK --- */
.description-block {
  margin-top: 60px;
  margin-bottom: 80px;
  line-height: 1.6;
  font-size: 1rem;
}

/* --- TRAY FOOTER matches your index.html footer --- */
.tray-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 60px;
  padding: 20px 0;
  color: #ccc;
  font-family: "Work Sans";
}

.footer-left {
  font-size: 0.9rem;
}

.footer-right {
  display: flex;
  gap: 20px;
  align-items: center;
}

.footer-right a {
  text-decoration: none;
  color: #ccc;
}

.footer-right a:hover {
  color: #FF8800;
}

/* logo button */
.chapy-logo {
  cursor: pointer;
  font-weight: 600;
  transition: color 0.2s ease;
}

.chapy-logo:hover {
  color: #FF8800;
}

/* --- MOBILE: stack project header content vertically --- */
@media (max-width: 768px) {

  .project-header {
    grid-template-columns: 1fr; /* one column */
    gap: 30px;
  }

  .project-description {
    width: 100%;
  }

  .project-description h1 {
    font-size: 1.8rem; /* optional tweak */
  }

  .project-description p {
    font-size: 0.95rem;
  }

  /* Make the project-info turn into 2 columns (cleaner than 4 tiny ones) */
  .project-info {
    grid-template-columns: 1fr 1fr; 
    width: 100%;
    gap: 15px 10px;
  }
}

/* --- SUPER SMALL PHONES (optional) --- */
@media (max-width: 480px) {
  .project-info {
    grid-template-columns: 1fr; /* stack completely on tiny screens */
  }
}

/* === IFRAME HERO SUPPORT === */
.project-hero.iframe-hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin-top: 50px;
}

/* Fullscreen iframe behind content */
.project-hero .hero-iframe {
  position: fixed;            /* exactly like your img hero */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;       /* <<< disables interaction */
  user-select: none;          /* prevent text/image selection */
  margin-top: 50px;
}