.who-content{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 3000;
}

.who-left {
  position: absolute;
  top: 10%;           /* Near the top */
  left: 50%;          /* Center horizontally */
  transform: translateX(-50%); /* Perfect centering */
  text-align: center;
  z-index: 3000;
  transition: opacity 180ms ease;
}

.who-left.hide-for-modal {
  opacity: 0;
  pointer-events: none;
}

/* Teaser Box Styling */
.teaser-box {
  background: rgba(0,0,30,0.9);
  padding: 1.5rem 2rem;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.teaser-box h2 { color: white; font-size: 2.4rem; margin-bottom: .5rem; text-shadow: 0 2px 6px rgba(0,0,0,0.7); }
.teaser-box .teaser-text { font-size: 1.1rem; line-height:1.4; color: white; }

.teaser-hint {
  font-size: 0.95rem;
  color: white;
  margin-top: .25rem;
}


/* ---------- Lightbox Modal ---------- */
/* Highlight text */
.highlight {
  color: var(--bad-actors-orange);
  font-weight: bold;
}

/* BIO MODAL - Hidden by default */
.bio-modal {
  display: none;            /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0, 0, 0, 0.3); /* Semi-transparent overlay */
  color: white;       /* white text */
  justify-content: center;
  align-items: center;
  z-index: 6000;            /* Above everything else */
}

/* BIO TEXT inside modal */
.bio-text {
  position: relative;
  background: rgba(0,0,0); /* Semi-transparent overlay */
  color: white;       /* white text */
  padding: 2rem;
  border-radius: 8px;
  max-width: 600px;
  text-align: center;
}

/* Modal Close Button */
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 2rem;
  color: white;
  cursor: pointer;
}

/* Modal enter/exit animation */
#modal-J,
#modal-K {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 180ms ease, transform 180ms ease;
}
#modal-J.is-visible,
#modal-K.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#modal-K{
  z-index: 5000;
}

.bio-text,
.bio-text p,
.bio-text span {
  color: white !important;
}

.detail-photo {
  display: block;
  width: 50%;   /* adjust size as needed */
  margin: 0 auto 1rem auto;  /* centers horizontally and adds bottom spacing */
}


/* Medium screens */
@media (max-width: 900px) {
  .who-left {
  left: 50%;          /* Center horizontally */
  transform: translateX(-45%); /* Perfect centering */
  width: 90%;
  text-align: center;
  z-index: 3000;
}

  .bio-text {
  max-width: 90%;
  width: 90%;
}

  .teaser-box {
  width: 90%;
}

}

/* Let vertical swipes pan the page even when starting on these layers */
.car-container,
.K-container,
.car-container *,
.K-container * {
  touch-action: pan-y;
}