@media (max-width: 767px) {

  html, body {
    height: auto !important;
    overflow: visible !important;
    overflow-x: hidden !important;
  }

  .page-root {
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
  }
  .page-scroll {
    overflow: visible !important;
    flex: 1 0 auto !important;
  }

  .page-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    flex-shrink: 0;
  }

  .nav-grid {
    flex-direction: column !important;
    flex: 0 0 auto !important;
  }
  .nav-left, .nav-right, .nav-row {
    flex: 0 0 auto !important;
    flex-direction: column !important;
    min-width: 0 !important;
  }
  .navbox {
    min-height: 220px !important;
    flex: 0 0 auto !important;
  }

  .hero-padded { padding: 24px 18px 18px !important; }
  .hero-split  { flex-direction: column !important; gap: 16px !important; }
  .orbital-hide-mobile { display: none !important; }

  .proj-body {
    flex-direction: column !important;
    gap: 18px !important;
  }
  .proj-text-col,
  .proj-vis-col {
    flex: 1 1 auto !important;
    position: static !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .proj-research-grid {
    grid-template-columns: 1fr !important;
  }
  .proj-hero-split {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .proj-header {
    flex-direction: column !important;
    gap: 14px !important;
  }
  .proj-status-card {
    min-width: 0 !important;
    width: 100% !important;
  }

  .about-row {
    grid-template-columns: 1fr !important;
  }

  .grid-2 {
    grid-template-columns: 1fr !important;
  }

  .tl-entry {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding-left: 18px !important;
    position: relative !important;
  }
  .tl-entry > div:nth-child(1) {
    text-align: left !important;
    padding: 0 0 4px 0 !important;
  }
  .tl-entry > div:nth-child(2) { display: none !important; }
  .tl-entry > div:nth-child(3) { padding: 0 0 20px 0 !important; }
  .tl-list { border-left: 1px solid var(--border); padding-left: 0; }

  .section-padded { padding: 24px 18px 32px !important; }

  .proj-root { padding: 16px 16px 28px !important; }

  .top-bar {
    height: auto !important;
    min-height: 44px;
    flex-wrap: wrap;
  }
  .top-bar > * {
    padding: 8px 14px !important;
  }
}

@media (max-width: 1023px) {
  .proj-hero-split { flex-direction: column !important; gap: 16px !important; }
  .proj-hero-split > div { flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; }
}

@media (max-width: 420px) {
  .hero-name { font-size: 44px !important; }
  .skills-legend > div { width: 100%; }
}