@media (max-width: 900px) {
  /* #shell lives inside #panel-app, which is pinned to exactly one
     viewport height with overflow: hidden (position: absolute; inset: 0;
     height: 100%). That wrapper never scrolls, so #shell can't be taller
     than 100% either — anything past it is silently clipped and
     unreachable. Everything below has to fit inside that one screen,
     with any internal overflow handled by its own scroll region rather
     than the page. */
  #shell {
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
    overflow: hidden;
  }

  #sidebar {
    order: 1;
    flex: 0 0 auto;
    max-height: 42vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Nav list scrolls internally if the 4 tracks + footer don't fit in
     42vh, so the brand row and ABOUT/CONTACT footer stay put instead of
     the whole sidebar getting hard-clipped. */
  #nav-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  #center-register {
    order: 2;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }

  #shell.sidebar-collapsed .back-btn,
  #shell.sidebar-collapsed .logo-title {
    display: inline !important;
  }

  #shell.sidebar-collapsed .back-btn {
    display: inline-flex !important;
    align-items: center;
    min-height: 40px;
    padding: 6px 10px;
  }

  /* The "collapsed" sidebar rail (vertical rotated labels, icons-only) is
     a desktop space-saving trick for a narrow 76px-wide column. On
     mobile the sidebar is full-width and stacked, so that same rail
     styling instead stretches each nav item to the height of its
     rotated text. Force the expanded/horizontal appearance regardless
     of the sidebar-collapsed class at this width. */
  #shell.sidebar-collapsed .nav-item {
    justify-content: flex-start !important;
    padding: 14px 18px 14px 22px !important;
    min-height: 0 !important;
  }

  #shell.sidebar-collapsed .nav-item .n-label {
    writing-mode: horizontal-tb !important;
    text-orientation: initial !important;
  }

  #shell.sidebar-collapsed .nav-item .n-idx {
    display: inline !important;
  }

  #shell.sidebar-collapsed .n-sub {
    display: block !important;
  }

  #shell.sidebar-collapsed #sidebar-foot button span.full {
    display: inline-block !important;
  }

  #shell.sidebar-collapsed #sidebar-foot button span.short {
    display: none !important;
  }
}

/* ---- MOBILE LANDING (replaces hero gate scene) ----
   Requires hover:none so narrow desktop split-screen stays on the PC site. */
#mobile-landing {
  display: none;
}

@media (max-width: 768px) and (hover: none) {
  #mobile-landing {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 30;
    align-items: flex-start;
    justify-content: center;
    padding: max(28px, env(safe-area-inset-top)) 22px
      max(28px, env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background:
      radial-gradient(
        ellipse at 50% 12%,
        rgba(201, 167, 104, 0.1) 0%,
        transparent 48%
      ),
      linear-gradient(180deg, #141018 0%, var(--void) 55%, #0a0908 100%);
    box-sizing: border-box;
  }

  #mobile-landing.is-hidden {
    display: none;
  }

  /* Hero staging is bypassed on mobile — hide empty/broken chrome */
  #panel-landing,
  #hero-topbar,
  .hero-hud,
  #scroll-cue,
  #ascend-cue,
  #gate-overlay {
    display: none !important;
  }

  .mobile-landing-inner {
    width: 100%;
    max-width: 400px;
    margin-top: 8vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 0;
  }

  #mobile-landing .wordmark {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2rem, 9vw, 2.6rem);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    margin: 0 0 8px;
    text-align: center;
  }

  .mobile-landing-byline {
    margin: 0 0 14px;
    font-family: var(--font-accent);
    font-size: var(--text-lg, 1.15rem);
    letter-spacing: var(--ls-wide);
    color: var(--text-primary);
    text-align: center;
  }

  .mobile-landing-tagline {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--text-secondary);
    text-align: center;
    max-width: 32ch;
    align-self: center;
  }

  .mobile-landing-note {
    margin: 0 0 22px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted, #8a8378);
    text-align: center;
  }

  .mobile-landing-prompt {
    margin: 0 0 12px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-gold-dim, var(--ochre));
  }

  .mobile-landing-gates {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .mobile-gate-btn {
    width: 100%;
    min-height: 64px;
    padding: 14px 16px 14px 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-family: var(--font-display);
    color: var(--text-gold-hi, var(--ochre));
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(138, 104, 44, 0.4);
    border-left: 3px solid var(--ochre);
    border-radius: 2px;
    cursor: pointer;
    text-align: left;
    transition:
      border-color 160ms linear,
      background 160ms linear,
      color 160ms linear;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-gate-label {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .mobile-gate-sub {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    text-transform: none;
  }

  .mobile-gate-btn:hover,
  .mobile-gate-btn:focus-visible {
    outline: none;
    border-color: var(--sb-blue-bright, var(--lapis));
    border-left-color: var(--sb-blue-bright, var(--lapis));
    background: rgba(16, 91, 163, 0.12);
    color: var(--text-primary);
  }

  .mobile-gate-btn:hover .mobile-gate-sub,
  .mobile-gate-btn:focus-visible .mobile-gate-sub {
    color: var(--text-secondary);
  }

  .mobile-gate-btn:active {
    background: rgba(16, 91, 163, 0.18);
  }

  .mobile-landing-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 18px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(138, 104, 44, 0.22);
  }

  .mobile-landing-foot button,
  .mobile-landing-resume {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    margin: 0;
    padding: 0 6px;
    line-height: 1.2;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-landing-foot button:focus-visible,
  .mobile-landing-resume:focus-visible,
  .mobile-landing-foot button:hover,
  .mobile-landing-resume:hover {
    color: var(--text-primary);
    outline: none;
  }

  /* ============================================================
     MOBILE APP — scrollable dossier
     Top bar + track chips; projects + docs scroll below.
     No live 3D bay — static track header only.
     ============================================================ */
  #shell {
    background: var(--void);
    padding: 0;
    gap: 0;
  }

  #sidebar {
    order: 0;
    flex: 0 0 auto;
    max-height: none;
    height: auto;
    border: none;
    border-bottom: 1px solid rgba(138, 104, 44, 0.28);
    background: rgba(10, 9, 8, 0.96);
    box-shadow: none;
    z-index: 5;
  }

  #sidebar::before {
    display: none;
  }

  #sidebar-blurb,
  #operator-fields {
    display: none !important;
  }

  #brand-row {
    padding: 10px 14px 8px !important;
    min-height: 0;
    cursor: default;
    gap: 12px;
  }

  #brand-row::before {
    display: none !important;
  }

  .logo-title {
    display: inline !important;
  }

  .back-label-desktop {
    display: none;
  }

  .back-label-mobile {
    display: inline;
  }

  #back-to-gates,
  .back-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 72px;
    padding: 8px 12px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(138, 104, 44, 0.35) !important;
    box-shadow: none !important;
    color: var(--text-primary) !important;
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    text-transform: none;
    font-weight: 600;
    border-radius: 2px;
  }

  #back-to-gates:hover,
  #back-to-gates:focus-visible,
  .back-btn:hover,
  .back-btn:focus-visible {
    color: var(--text-primary) !important;
    background: rgba(16, 91, 163, 0.16) !important;
    border-color: var(--scan-teal) !important;
    box-shadow: none !important;
  }

  /* Horizontal track chips */
  #nav-list {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 0 14px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #nav-list::-webkit-scrollbar {
    display: none;
  }

  #nav-list .nav-item {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 14px !important;
    margin: 0;
    border: 1px solid rgba(138, 104, 44, 0.28);
    border-left: 3px solid transparent;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.03);
    justify-content: center !important;
  }

  #nav-list .nav-item .n-label {
    writing-mode: horizontal-tb !important;
    text-orientation: initial !important;
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
  }

  #nav-list .nav-item .n-idx {
    display: none !important;
  }

  #nav-list .nav-item .n-sub {
    display: none !important;
  }

  #nav-list .nav-item::after {
    display: none !important;
  }

  #nav-list .nav-item.is-active {
    border-color: rgba(43, 184, 176, 0.45);
    border-left-color: var(--scan-teal);
    background: rgba(43, 184, 176, 0.1);
  }

  #nav-list .nav-item.is-dulled {
    opacity: 0.72;
  }

  #sidebar-foot {
    display: flex !important;
    flex-direction: row;
    gap: 0;
    padding: 0 14px 12px;
    border-top: none;
  }

  #sidebar-foot button {
    flex: 1;
    min-height: 44px;
    border: 1px solid rgba(138, 104, 44, 0.22);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
  }

  #sidebar-foot button + button {
    border-left: none;
  }

  #sidebar-foot button span.full {
    display: inline !important;
  }

  #sidebar-foot button span.short {
    display: none !important;
  }

  #center-register {
    order: 1;
    flex: 1 1 auto;
    min-height: 0;
    border: none !important;
    background: var(--void);
  }

  #register-scroll,
  #register-scroll.scroll-unlocked {
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    height: 100%;
  }

  /* --- Project showcase (no WebGL) --- */
  #view-stage {
    height: auto !important;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  #scan-bay,
  #scan-bay.scan-bay--static {
    flex: none;
    display: block;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0;
    background:
      radial-gradient(
        ellipse at 30% 0%,
        rgba(209, 161, 76, 0.12) 0%,
        transparent 55%
      ),
      radial-gradient(
        ellipse at 80% 40%,
        rgba(43, 184, 176, 0.06) 0%,
        transparent 50%
      ),
      var(--void);
  }

  .bay-designation {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    width: 100%;
    box-sizing: border-box;
    padding: 22px 18px 6px;
    text-align: left;
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    text-shadow: none;
    color: var(--text-primary);
  }

  .bay-designation .sub {
    margin-top: 6px;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    text-transform: none;
    font-weight: 500;
  }

  .bay-hud,
  #scan-bay canvas {
    display: none !important;
  }

  #content-strip {
    flex: none;
    max-height: none;
    background: var(--void);
    border-top: none;
    box-shadow: none;
    padding: 8px 16px 20px;
    gap: 10px;
  }

  #content-strip::before,
  #content-strip::after {
    display: none;
  }

  .strip-eyebrow {
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
    color: var(--text-muted);
    padding-left: 0;
    margin-bottom: 2px;
  }

  #project-list {
    gap: 12px;
  }

  .project-row {
    flex-direction: column;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(138, 104, 44, 0.22);
    border-left: 3px solid var(--ochre);
    border-radius: 2px;
    padding: 16px 14px 14px;
    gap: 12px;
    min-height: 0;
    transform: none;
  }

  .project-row:hover,
  .project-row:focus-visible {
    transform: none;
  }

  .project-row .p-info {
    width: 100%;
  }

  .project-row .p-desc {
    -webkit-line-clamp: 3;
  }

  .project-row .p-meta {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .project-row .p-status {
    display: none;
  }

  .project-row .p-dot {
    display: none;
  }

  .project-row .p-open {
    flex: 1 1 100%;
    margin-top: 4px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border: 1px solid rgba(43, 184, 176, 0.45);
    color: var(--scan-teal);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 1;
  }

  /* --- About / Contact as normal scroll sections --- */
  .register-doc {
    min-height: 0;
    align-items: stretch;
    border-top: 1px solid rgba(138, 104, 44, 0.28);
    background: var(--void);
  }

  .doc-inner {
    max-width: none;
    padding: 32px 20px 48px;
  }

  .doc-layout {
    gap: 20px;
  }

  .doc-layout-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .doc-heading {
    font-size: 1.55rem;
  }

  .doc-text {
    font-size: var(--text-sm);
    max-width: none;
  }

  .doc-links {
    grid-template-columns: 1fr;
  }

  .doc-link {
    min-height: 56px;
  }

  /* Project detail — text + links, no empty TV */
  #project-detail {
    position: fixed;
    inset: 0;
    z-index: 40;
  }

  .detail-tv {
    display: none !important;
  }

  .detail-back {
    min-height: 44px;
    min-width: 88px;
  }

  .detail-page-1 {
    gap: 20px;
    padding-bottom: 32px;
  }
}