/* Phones use document scrolling so browser chrome and long chapters cannot clip content. */
@media (max-width: 800px) {
  :root { --frame: clamp(16px, 5vw, 32px); }
  html, body { height: auto; overflow: visible; overscroll-behavior: auto; }
  body { min-height: 100dvh; }
  header {
    position: sticky; top: 0; height: auto; inset-inline: auto;
    padding: max(10px, env(safe-area-inset-top)) var(--frame) 8px;
    background: var(--bg); gap: 4px 16px;
  }
  header nav { width: 100%; justify-content: space-between; gap: 8px; margin: 0; }
  header nav a, header nav button { min-height: 44px; }
  .deck { position: static; overflow: visible; }
  .slide:not(.active), .stage-floor, .slide-rail { display: none; }
  .slide.active, .slide-content { position: static; overflow: visible; }
  .slide-content, .intro .slide-content { padding-inline: var(--frame); }
  .slide-content > *, .project-exhibit, .project-copy > * { min-width: 0; }
  .signature-intro h1 { font-size: clamp(42px, 14.5vw, 94px); }
  .signature-bottom .button { min-width: 0; }
  .selected-work { margin-top: 52px; }
  .project-row { gap: 4px 14px; padding-block: 18px; }
  .heading-row { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
  .contact-email { overflow-wrap: anywhere; }
  .main-screen > .project-preview-image, .screenshot-thumb img { object-fit: contain; }
  .guide-dock {
    position: static; max-width: none; margin: 12px var(--frame) 0;
    background: var(--surface); padding: 12px; align-items: center;
    justify-content: flex-end; pointer-events: auto;
  }
  .guide-bubble { width: auto; flex: 1; max-width: none; margin: 0; min-width: 0; }
  .guide-bubble p { max-height: none; }
  .guide-bubble-actions button { min-height: 44px; }
  .deck-footer {
    position: static; justify-content: center; margin: 12px var(--frame) 0;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .deck-controls { display: flex; gap: 8px; }
  #chapter-counter { display: inline; min-width: 0; max-width: 42vw; }
  .deck-controls > button, #motion { height: 44px; width: 44px; }
  dialog { max-height: min(88dvh, 100% - 24px); overscroll-behavior: contain; }
  dialog input, dialog select { font-size: 16px; }
  .slide, .slide *, dialog[open], .guide-bubble { animation: none !important; }
  .slide { transition: none !important; }
}