/* Sound, Screens & AV: a six-screen video wall you mix clips onto by dragging them across it. */
.av-wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.av-head{max-width:46em;margin-bottom:clamp(22px,3vw,40px)}
.av-head p{margin-top:14px;font-size:clamp(17px,1.3vw,20px);line-height:1.6}
.av-wall{--g:clamp(3px,.45vw,6px);position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);padding:var(--g);
  border-radius:var(--r-m);background:linear-gradient(180deg,#191321,#110d18);box-shadow:0 30px 70px -40px rgba(20,8,40,.9),inset 0 0 0 1px rgba(255,236,214,.08);
  touch-action:pan-y;user-select:none;-webkit-user-select:none}
.av-scr{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:3px;background:#1d1626}
.av-scr span{position:absolute;left:0;top:0;width:var(--ww,300%);height:var(--wh,200%);background:center/cover no-repeat;
  transform:translate3d(var(--ox,0),var(--oy,0),0);filter:brightness(var(--cal,1))}
/* glass + faint line structure of a real panel */
.av-scr::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.07),transparent 38%),repeating-linear-gradient(180deg,rgba(0,0,0,.08) 0 1px,transparent 1px 3px)}
.av-scr.is-cut span{animation:av-cut .36s var(--ease)}
.av-scr.is-hover{box-shadow:0 0 0 2px var(--teal-hi)}
@keyframes av-cut{0%{filter:brightness(2.1) saturate(.4)}100%{filter:brightness(var(--cal,1))}}
.av-tray{display:flex;gap:10px;margin-top:14px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin}
.av-clip{all:unset;box-sizing:border-box;position:relative;display:block;width:clamp(104px,12vw,148px);aspect-ratio:16/10;border-radius:10px;overflow:hidden;cursor:grab;touch-action:pan-x;
  box-shadow:inset 0 0 0 1px var(--line);background:#2a2433;transition:transform .2s var(--ease),box-shadow .2s}
.av-clip img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.av-clip span{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;font:600 13px/1.2 var(--body);color:#fff;background:linear-gradient(180deg,transparent,rgba(16,10,24,.85))}
.av-clip:hover{transform:translateY(-2px)}
.av-clip:focus-visible{outline:3px solid var(--teal-hi);outline-offset:3px}
.av-clip.is-on{box-shadow:0 0 0 2px var(--teal-hi)}
.av-ghost{position:fixed;left:0;top:0;z-index:90;width:140px;aspect-ratio:16/10;border-radius:10px;pointer-events:none;background:center/cover;
  box-shadow:0 20px 40px -14px rgba(0,0,0,.7),0 0 0 2px var(--teal-hi);opacity:.92;will-change:transform}
html.av-dragging,html.av-dragging *{cursor:grabbing!important}
@media (max-width:600px){.av-wall{grid-template-columns:repeat(2,minmax(0,1fr))}}