/* ============================================================
   NDA — Bio page CSS
   ============================================================ */

.bio-hero {
  background: linear-gradient(180deg, var(--dark) 0%, var(--bg) 100%);
  padding: 5rem 1.5rem 3rem;
  border-bottom: 2px solid var(--orange);
}

.bio-hero__inner {
  max-width: 900px;
  margin: 0 auto;
}

.bio-hero__title {
  font-family: var(--font-title);
  font-size: clamp(3rem, 8vw, 6rem);
  color: var(--cream);
  text-shadow: 3px 3px 0 var(--orange);
  margin-bottom: 0.25rem;
}

.bio-hero__tagline {
  font-family: var(--font-rough);
  font-size: 1rem;
  color: var(--orange);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.bio-content {
  padding: 4rem 1.5rem;
}

.bio-content__inner {
  max-width: 780px;
  margin: 0 auto;
}

.bio-content__photo-wrap {
  margin-bottom: 2.5rem;
}

.bio-content__photo {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  object-position: center top;
  display: block;
  border: var(--border-punk);
  box-shadow: var(--shadow-punk);
}

.bio-content__text {
  font-family: var(--font-rough);
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--cream-dim);
  white-space: pre-line;
}

.bio-content__text p {
  margin-bottom: 1.5rem;
}

.bio-influences {
  padding: 3rem 1.5rem 4rem;
  background: var(--bg-light);
}

.bio-influences__inner {
  max-width: 900px;
  margin: 0 auto;
}

.influences-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.influences-list li {
  font-family: var(--font-title);
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--bg);
  background: var(--orange);
  padding: 0.3rem 0.9rem;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition: background 0.1s steps(2);
}

.influences-list li:hover {
  background: var(--yellow);
}