/* Local portfolio adaptation for a short, phone-sized CRT viewport. */
@media (max-width: 600px) and (max-height: 420px) {
  :root { --pad: 16px; }
  html { scroll-padding-top: 16px; }

  .site-header {
    position: relative;
    padding: 12px var(--pad);
    gap: 12px;
  }
  .brand-mark { width: min(42vw, 152px); }
  .site-header nav .contact-link { padding: 11px 10px; }

  /* The drawing gets its own space instead of sitting behind the copy. */
  .stage {
    position: relative;
    top: auto;
    display: grid;
    grid-template-rows: auto 170px auto auto;
    gap: 10px;
    height: auto;
    margin-bottom: 0;
    padding: 16px var(--pad) 12px;
  }
  .stage-caption,
  .hero-visible .stage-caption {
    position: static;
    margin: 0;
    padding: 6px 0;
  }
  #car-scene,
  .hero-visible #car-scene {
    position: relative;
    inset: auto;
    width: 100%;
    height: 170px;
  }
  .scene-tools,
  .hero-visible .scene-tools {
    position: static;
    justify-content: space-between;
    gap: 8px;
  }
  .scene-tools button,
  .scene-tools .view-controls button { min-width: 40px; min-height: 44px; }
  .view-controls { gap: 2px; }
  .chapter-nav {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding-top: 8px;
    font-size: .75rem;
  }
  .chapter-nav a { min-height: 44px; gap: 2px; }
  .annotation-lines,
  .hand-note { display: none; }
  .scene-loading { left: var(--pad); top: 80px; right: var(--pad); }

  .chapter,
  .chapter.hero,
  .chapter:last-child {
    min-height: 0;
    padding: 32px var(--pad);
    display: block;
  }
  .chapter.hero { padding-top: 44px; }
  .chapter-copy,
  .hero .chapter-copy { width: 100%; max-width: none; }
  .chapter:not(.hero) .chapter-copy { padding: 0; }
  .hero h1 { font-size: 2.25rem; }
  .hero p.hero-intro,
  .hero-enquiry,
  .hero .scroll-cue {
    position: static;
    margin: 18px 0 0;
    max-width: none;
  }
  .hero .scroll-cue { min-height: 44px; }
  .chapter h2 { font-size: 1.75rem; }
  .text-link { min-height: 44px; }
}