/* Keep every app reachable without shrinking siblings behind the ArchPDF row. */
@media (max-width: 800px) {
  html:not(.embed-mode) { height: auto; overflow-x: clip; overflow-y: auto; }
  html:not(.embed-mode) body.portfolio-home { position: relative; width: 100%; margin: 0; height: max(100svh, 800px); min-height: 800px; overflow: visible; }
  body.portfolio-home header { width: auto; }
  html:not(.embed-mode) body.portfolio-home main,
  html:not(.embed-mode) body.portfolio-home #work { min-height: 0; }
  body.portfolio-home .product-menu { position: absolute; top: 285px; }
  .product-menu [role=tablist] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; touch-action: pan-y pinch-zoom; }
  .product-menu .arch-selector-row { width: auto; min-width: 0; }
  body.portfolio-home .product-menu [role=tab] { align-self: start; width: 100%; min-width: 0; min-height: 56px; padding: 7px 2px; }
  .product-menu .arch-selector-row #tab-arch { padding: 7px 2px; }
  body.portfolio-home .product-menu strong { font-size: clamp(13px, 3.8vw, 18px); }
  .arch-selector-demo { position: static; display: block; transform: none; margin-top: 4px; padding: 10px 2px; min-height: 36px; text-align: center; font-size: 11px; }
  body.portfolio-home .product-stage { position: absolute; inset: 415px 4vw 60px; touch-action: pan-y pinch-zoom; }
  #arch-cinema { position: absolute; inset: 415px 4vw 60px; }
  .product-menu::after { content: 'Swipe left / right to switch apps'; display: block; margin-top: 5px; text-align: center; color: #a6b69a; font-size: 10px; }
  .product-description { min-width: 0; }
  .product-description h2 { overflow-wrap: anywhere; }
  html.embed-mode body.portfolio-home .product-stage,
  html.embed-mode #arch-cinema { position: fixed; inset: 0; }
}

@media(min-width:801px){.frama-selector-row #tab-frama{width:100%;padding-right:88px}.frama-selector-row .tab-arrow{display:none}}