@media (max-width: 520px) {
  .profile-shell { padding-inline: 8px; }
  .profile-hero { padding-inline: 12px; }
  .profile-hero__portraits { grid-template-columns: repeat(3, minmax(0,100px)); gap: 8px; }
  .profile-hero__portrait { width: 100%; height: auto; aspect-ratio: 1; }

  .profile-kv-grid,
  .profile-prompt-grid,
  .profile-facts,
  .profile-family-grid,
  .story-engine__choices,
  .story-engine__ending-grid {
    grid-template-columns: 1fr;
  }

  .profile-fact--wide { grid-column: auto; }
  .story-engine__topbar { align-items: flex-start; }
  .story-engine__progress { max-width: 130px; text-align: center; }
  .story-engine__media { height: 190px; }
  .story-engine__scene {
    min-height: 360px;
    max-height: 360px;
  }

  .profile-family-card {
    min-height: 150px;
  }
}

@media (max-width: 370px) {
  .profile-hero__name { letter-spacing: .08em; }
  .profile-hero__portraits { gap: 5px; }
  .profile-section { padding: 14px; }
  .story-engine__stage { padding: 10px; }
  .story-engine__scene {
    min-height: 330px;
    max-height: 330px;
    padding: 12px;
  }
  .story-engine__media { height: 170px; }
}

@media (hover: none), (pointer: coarse) {
  .profile-family-card {
    height: 270px;
    min-height: 270px;
    padding-top: 126px;
  }
  .profile-family-card[data-portrait]::before {
    opacity: 1;
    background: linear-gradient(180deg, transparent 0 38%, rgba(7,5,8,.92) 50%, rgba(4,3,5,.99) 100%);
  }
  .profile-family-card__portrait {
    bottom: auto;
    height: 145px;
    opacity: .78;
  }
  .profile-family-card__portrait::after {
    background: linear-gradient(180deg, rgba(3,2,3,.02), rgba(3,2,3,.82));
  }
  .profile-family-card__role,
  .profile-family-card__name,
  .profile-family-card__meta,
  .profile-family-card__description {
    opacity: 1;
    transform: none;
  }
  .profile-family-card__description { max-height: 94px; }
}

@media (max-width: 520px) {
  .ravasz-results__header { display: block; }
  .ravasz-results__legend { justify-content: flex-start; max-width: none; margin-top: 8px; }
  .ravasz-results__grid { grid-template-columns: 1fr; }
  .profile-family-card { height: 228px; min-height: 228px; }
}