@media (max-width: 767px) {
  :root {
    --font-hero: 64px;
    --font-header: 14px;
    --font-category: 24px;
    --font-project-link: 24px;
    --font-brand: 32px;
    --nav-top: max(24px, env(safe-area-inset-top));
    --nav-inline: 24px;
    --nav-contact-inset: 24px;
    --brand-bottom: max(24px, env(safe-area-inset-bottom));
  }
  .site-nav { gap: 16px; }
  .nav-label { line-height: 1.142857143; }
  /* Keep the three labels as one centered group. Flow layout makes the title's
     actual one/two-line height determine both adjoining visual spaces. */
  .copy-stack > .scene-copy,
  .static-scene > .scene-copy {
    --scene-label-gap: 10px;
    --scene-cta-gap: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding-inline: 12px;
  }
  .copy-stack > .scene-copy:nth-child(2),
  .static-scene:nth-child(2) > .scene-copy,
  .copy-stack > .scene-copy:nth-child(3),
  .static-scene:nth-child(3) > .scene-copy,
  .copy-stack > .scene-copy:nth-child(5),
  .static-scene:nth-child(5) > .scene-copy,
  .copy-stack > .scene-copy:nth-child(6),
  .static-scene:nth-child(6) > .scene-copy {
    --scene-label-gap: 9px;
    --scene-cta-gap: 9px;
  }
  .copy-stack > .scene-copy:nth-child(4),
  .static-scene:nth-child(4) > .scene-copy {
    --scene-label-gap: 11px;
    --scene-cta-gap: 11px;
  }
  .scene-category,
  .scene-title,
  .scene-project-link {
    position: relative;
    inset: auto;
    left: auto;
    width: 100%;
  }
  .scene-category {
    padding-inline: 12px;
    line-height: 1.08;
  }
  .scene-title {
    margin-top: var(--scene-label-gap);
    transform: none;
    padding-inline: 0;
    white-space: normal;
    line-height: 1;
  }
  .title-fit { max-width: 100%; }
  .mobile-break { display: inline; }
  .scene-project-link { margin-top: var(--scene-cta-gap); font-size: 24px; line-height: 1.21875; }
}

@media (max-height: 450px) and (min-width: 768px) {
  :root { --font-hero: 100px; --font-category: 24px; --font-project-link: 24px; --font-brand: 32px; }
  .scene-category { top: auto; bottom: calc(50% + 64px); }
  .scene-project-link { top: calc(50% + 79px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav-label, .site-brand { transition: none; }
  .scene-project-link > span::after { transition-duration: 1ms; }
}