/* RESPONSIVE */
@media (max-width: 768px) {
    .hi-hero { padding: 3rem 0 2rem; }
    .hi-hero-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .hi-hero-portrait { order: -1; }
    .hi-portrait-card { max-width: 240px; margin: 0 auto; }
    .hi-badge { left: 50%; transform: translateX(-50%); top: -0.75rem; }

    .hi-spotlight { grid-template-columns: repeat(2, 1fr); }

    .hi-stats { grid-template-columns: repeat(2, 1fr); }
    .hi-stat-num { font-size: 2rem; }

    .hi-tree-grid { grid-template-columns: 1fr; }
    .hi-section-head { flex-direction: column; gap: 1rem; }

    .hi-bio-hero-inner { grid-template-columns: 1fr; padding: 3rem 1.5rem 2rem; }
    .hi-bio-hero-photo img { max-width: 300px; margin: 0 auto; display: block; }
    .hi-bio-meta-grid { grid-template-columns: repeat(2, 1fr); }
    .hi-bio-meta-item { padding: 1rem 1.5rem; }

    .hi-timeline-grid { grid-template-columns: 1fr; gap: 2rem; }
    .hi-timeline-item { gap: 0.75rem; }
    .hi-timeline::before { left: calc(60px + 0.375rem); }
    .hi-timeline-item::before { left: calc(60px + 0.375rem - 5px); }
    .hi-video-featured { grid-template-columns: 1fr; }
    .hi-video-grid { grid-template-columns: repeat(2, 1fr); }
    .hi-rels-grid { grid-template-columns: 1fr; gap: 2rem; }
    .hi-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .hi-shell { padding: 0 1rem; }
    .hi-spotlight { grid-template-columns: 1fr; }
    .hi-filters { flex-direction: column; gap: 0.75rem; }
    .hi-search-bar { flex-direction: column; gap: 0.5rem; }
    .hi-search-bar .hi-btn { width: 100%; text-align: center; }
}