/* Small-screen refinements; preserve the established colors and layout. */
.photo-list li span { min-width: 0; flex: 1; }
.photo-list img, .photo-list button { flex-shrink: 0; }
.num { color: #5d6e53; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 12px 16px; background: var(--lime); color: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
summary { min-height: 44px; padding: 12px 0; margin: -12px 0; }
@media (max-width: 400px) {
  header { flex-wrap: wrap; }
  header .brand { max-width: none; }
  header nav { width: 100%; }
  header nav .button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}