/* Mobile calm (JP 10/17: "the mobile version has a stupid zoom for no reason ... no reason i should have to horizontally scroll on my mobile website").
   Phones and tablets under 1024px: no zoom/scale motion and no sideways rows. Desktop (>=1024px) is untouched. Loaded last. */
@media (max-width: 1023px) {
  /* No zoom: the hero photo fades in instead of scaling or clip-opening */
  .jdlo-v5 .h4-photo, .jdlo-v5 .h4-photo img, .jdlo-v5 .h4-photo picture { animation-name: jdlo-mobile-fade !important; transform: none !important; clip-path: none !important; }
  .jdlo-v5 .h4-photo img { animation-name: none !important; }
  /* No tap-zoom on cards (touch screens fire :hover on tap) */
  .jdlo-v5 a:hover img, .jdlo-v5 a:hover video, .jdlo-v5 a:hover .tile__media, .jdlo-v5 a:focus-visible .tile__media { transform: none !important; }
  /* No scale-in on any picture except the About frame-open portrait JP asked to keep */
  .jdlo-v5 main :not(.portrait-open) > img, .jdlo-v5 main :not(.portrait-open) > video { transform: none !important; animation-name: none !important; }
  /* Photo viewer opens with a fade, no scale */
  .jdlo-v5 .lb, .jdlo-v5 [class*="lightbox"] { animation-name: jdlo-mobile-fade !important; }

  /* No sideways rows: everything stacks or sits in a grid */
  .jdlo-v5 .wt__tabs { flex-wrap: wrap; overflow: visible; row-gap: .5rem; }
  .jdlo-v5 #panel-sites .wt__list { display: grid !important; grid-template-columns: 1fr; gap: 2rem; overflow: visible !important; scroll-snap-type: none !important; margin-inline: 0 !important; padding-inline: 0 !important; }
  .jdlo-v5 #panel-sites .wt__list > li { flex: none !important; width: auto !important; }

  .jdlo-v5 .h4-strip { display: grid !important; grid-template-columns: 1fr 1fr; gap: .75rem .5rem; overflow: visible !important; scroll-snap-type: none !important; }
  .jdlo-v5 .h4-strip figure { flex: none !important; width: auto !important; }
  .jdlo-v5 .h4-strip figcaption { font-size: .8125rem; }

  .jdlo-v5 .vband__strip { overflow: visible !important; scroll-snap-type: none !important; --tw: calc(100vw - 2 * var(--pad)); }
  .jdlo-v5 .vband__list { display: grid !important; grid-template-columns: 1fr; gap: 2rem; width: auto !important; }
  .jdlo-v5 .vtile { width: auto !important; }
  .jdlo-v5 .vtile__body { max-width: none; }
  .jdlo-v5 .vband__nav { display: none !important; }

  .jdlo-v5 .page-work .mb-tiles, .page-work .mb-tiles { display: grid !important; grid-template-columns: 1fr; gap: 2rem; overflow: visible !important; scroll-snap-type: none !important; margin-inline: 0 !important; padding-inline: 0 !important; }
  .page-work .mb-tiles::after { display: none; }
  .page-work .mb-tiles > .h4-tile { flex: none !important; width: auto !important; }

  .page-services-websites .feats { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1.25rem .75rem; overflow: visible !important; scroll-snap-type: none !important; margin-inline: 0 !important; padding-inline: 0 !important; }
  .page-services-websites .feats::after { display: none; }
  .page-services-websites .feats > .h4-tile { flex: none !important; width: auto !important; max-width: none !important; }

  .page-services-photo-video #photos .photos { grid-auto-flow: row !important; grid-auto-columns: auto !important; grid-template-columns: 1fr 1fr !important; gap: .75rem .5rem; overflow: visible !important; scroll-snap-type: none !important; }

  .page-work-brian .proof__media.ba:not(.ba--one) { grid-auto-flow: row !important; grid-auto-columns: auto !important; grid-template-columns: 1fr !important; overflow: visible !important; scroll-snap-type: none !important; margin-inline: 0 !important; padding-inline: 0 !important; }

  /* Nothing wider than the screen */
  .jdlo-v5 img, .jdlo-v5 video { max-width: 100%; }
  .jdlo-v5 a[href^="mailto:"], .jdlo-v5 a[href^="http"] { overflow-wrap: anywhere; }
  .jdlo-v5 input, .jdlo-v5 textarea, .jdlo-v5 select { font-size: max(16px, 1em); }
}
/* The photo viewer is appended to <body>, outside .jdlo-v5 (root 2930): fade only, no scale */
@media (max-width: 1023px) { .lb[open] .lb__img, .lb .lb__img { animation-name: jdlo-mobile-fade !important; transform: none !important; } }
@keyframes jdlo-mobile-fade { from { opacity: 0; } to { opacity: 1; } }