/* Source portrait is locked at right; only the empty theatre extends to left. */
#quiet.quiet--theatre {
 min-height:clamp(600px,44vw,720px);
 isolation:isolate;
 background:var(--bg);
}
.quiet-visual {
 position:absolute;
 z-index:0;
 inset:0 0 0 auto;
 height:100%;
 width:auto;
 aspect-ratio:2260 / 1392;
 max-width:none;
 margin:0;
 pointer-events:none;
 -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 50%,#000 100%);
 mask-image:linear-gradient(to right,transparent 0%,#000 50%,#000 100%);
}
.quiet-visual img {
 position:absolute;
 inset:0;
 display:block;
 width:100%;
 height:100%;
 object-fit:fill;
}
.quiet-visual .quiet-visual-original {
 left:auto;
 right:0;
 width:50%;
 /* Blend the theatre edge only; the woman/chair begin beyond this strip. */
 -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 100%);
 mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 100%);
}
#quiet.quiet--theatre > .wrap { position:relative; z-index:1; }
@media(max-width:1000px) {
 #quiet.quiet--theatre {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-height:0;
  padding:56px 0 0;
 }
 #quiet.quiet--theatre > .wrap { order:0; flex:none; }
 #quiet.quiet--theatre .quiet-copy { width:100%; max-width:680px; }
 .quiet-visual {
  position:relative;
  inset:auto;
  order:1;
  align-self:flex-end;
  flex:none;
  width:auto;
  height:clamp(340px,58vw,520px);
  margin-top:24px;
 }
}
@media(max-width:575px) {
 #quiet.quiet--theatre { padding-top:44px; }
 .quiet-visual {
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 50%,#000 100%),linear-gradient(to right,transparent calc(100% - 100vw),#000 calc(100% - 100vw + 72px));
  mask-image:linear-gradient(to right,transparent 0%,#000 50%,#000 100%),linear-gradient(to right,transparent calc(100% - 100vw),#000 calc(100% - 100vw + 72px));
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
 }
}

/* Desktop: follow the 1290px page grid with its 34px inner gutter.
   The portrait may extend at most 45px beyond the final team card. */
@media (min-width: 1001px) {
  #quiet.quiet--theatre .quiet-visual {
    right: max(0px, calc((100% - 1290px) / 2 + 34px - 45px));
  }
}

/* Blend only the empty theatre margin when the illustration leaves the window edge. */
@media (min-width: 1313px) {
  #quiet.quiet--theatre .quiet-visual {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 50%, #000 calc(100% - 64px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 50%, #000 calc(100% - 64px), transparent 100%);
  }
}