/* Touch controls and a separate studio row on portrait tablets. */
@media(max-width:1100px){
  html.component-enhanced{overflow-x:hidden;overflow-x:clip}
  .header nav a{display:inline-flex;align-items:center;min-width:44px;min-height:44px}
  .component-toolbar button{min-width:44px;min-height:44px;padding:8px;font-size:12px}
  .hero-showcase-arrows>button{width:44px;height:44px}
  .hero-showcase-dots>button{height:44px;min-width:24px;padding:20px 0}
  #hero-play{min-height:44px;padding:10px 12px;font-size:10px}
  .gallery-play,.gallery-arrows button,.lightbox-close,.lightbox-arrow{min-width:44px;min-height:44px}
}
@media(min-width:761px) and (max-width:980px){
  .header{flex-wrap:wrap}
  .header nav{order:3;width:100%;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:8px}
  .hero{display:block}
  .hero-copy{max-width:690px}
  .hero h1{max-width:690px;font-size:clamp(53px,7vw,68px)}
  .hero .lead{max-width:580px}
  .hero-visual.hero-showcase{margin:100px 0 0}
  .hero-showcase-stage{height:clamp(400px,54vw,510px)}
  .component-enhanced .component-canvas-mount{left:-50%;top:-50%;width:200%;height:200%}
  .hero-foot{margin-top:35px}
}
@media(min-width:981px) and (max-width:1100px){
  .component-enhanced .component-canvas-mount{left:-50%;top:-50%;width:200%;height:200%}
}
@media(max-width:760px){
  .header nav{gap:4px;align-items:center;padding-top:8px;font-size:12px}
  .header nav a{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 3px}
  .header .button.small{min-height:44px}
  .hero-visual.hero-showcase{margin-top:80px}
  .component-toolbar{gap:4px;padding:8px}
  .component-drag-hint{font-size:8px}
  #hero-provenance{font-size:8px;letter-spacing:.5px;line-height:1.5}
  .hero-spec-label{font-size:9px;line-height:1.5;letter-spacing:.2px;overflow-wrap:anywhere}
  .hero-showcase-caption-line{align-items:flex-start}
  .hero-showcase-tools{gap:8px}
  .hero-showcase-dots{gap:5px}
}
@media(max-width:380px){
  .header nav{flex-wrap:wrap;justify-content:flex-start;column-gap:12px}
  .header nav a{flex:1 1 calc(50% - 12px);justify-content:flex-start}
  .component-toolbar{flex-wrap:wrap}
  .component-drag-hint{flex-basis:100%;margin:0;padding:0 4px 4px}
  .hero-showcase-caption-line{flex-wrap:wrap}
  .hero-showcase-tools{width:100%;justify-content:space-between}
}