/* ===============================
   CHARACTERS PAGE
================================ */

.characters {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4rem 1.5rem 5rem;

  display: flex;
  flex-direction: column;
  gap: 6rem;
}

/* ===============================
   CHARACTER BLOCK (BASE)
================================ */

.character {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: center;
}

/* Media */
.character-media {
  display: flex;
  justify-content: center;
}

.character-media img {
  max-height: 70vh;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6));
}

/* Text */
.character-text {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.character-text h2 {
  font-family: var(--font-title);
  letter-spacing: 0.18em;
  margin: 0;
}

.character-text p {
  font-size: 1.05rem;
}

/* ===============================
   RIKO (SMALLER PRESENCE)
================================ */

.character.riko {
  opacity: 0.9;
}

.character.riko .character-media img {
  max-height: 60vh;
}

.character.riko .character-text p {
  color: var(--muted);
}

/* ===============================
   HINAKO (DOMINANT)
================================ */

.character.hinako {
  grid-template-columns: 1.2fr 1fr;
}

.character.hinako .character-text {
  order: -1;
}

.character.hinako h2 {
  color: var(--red);
}

.character.hinako .character-media img {
  max-height: 75vh;
}

/* ===============================
   BAKU (UNSETTLING)
================================ */

.character.baku {
  opacity: 0.85;
}

.character.baku .character-media img {
  max-height: 45vh;
}

.character.baku .character-text p {
  font-size: 1rem;
}

/* ===============================
   MUTED TEXT
================================ */

.muted {
  color: var(--muted);
}

/* ===============================
   MOBILE
================================ */

@media (max-width: 768px) {

  .characters {
    gap: 4rem;
  }

  .character {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .character.hinako .character-text {
    order: 0;
  }

  .character-media img {
    max-height: 50vh;
  }
}