/* Keep long project names from hiding the photo controls or the image counter. */
.image-toolbar p{display:flex;align-items:center;gap:8px;min-width:0;flex:1}.image-project-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.image-position{flex-shrink:0;white-space:nowrap}
/* Short screens need a compact composition, not smaller touch targets. */
@media(max-height:600px) and (orientation:landscape){
 .motion-ready .hero h1{top:16%;font-size:clamp(34px,6vw,92px)}
 .motion-ready .hero-bottom{flex-direction:row;align-items:flex-end;gap:16px}
 .motion-ready .hero-statement{font-size:18px;max-width:180px;text-align:right;flex:0 0 180px}
 .hero .button{min-height:44px}
}
@media(max-height:600px) and (orientation:landscape) and (max-width:720px){
 .motion-ready .hero h1 .hero-name-line+ .hero-name-line{font-size:4.8vw}
 .motion-ready .hero-bottom{gap:12px}
 .motion-ready .hero-bottom>div{width:auto;flex:1;min-width:0}
 .motion-ready .hero-actions{display:flex;gap:8px;min-width:0;width:100%}
 .motion-ready .hero .button{width:auto;flex:1;min-width:0;font-size:12px;gap:8px;padding:10px 12px;white-space:normal}
 .motion-ready .hero-statement{font-size:16px;line-height:1.25;max-width:140px;flex-basis:140px}
}
@media(max-height:600px) and (orientation:portrait) and (max-width:380px){.motion-ready .hero h1{top:28%}}
@media(max-width:720px){.image-toolbar{flex-wrap:nowrap}.image-toolbar p{font-size:12px;gap:6px}.image-zoom{flex-shrink:0}.image-close{flex-shrink:0}}