/* One non-interactive cloth accent per story section. The actual photos stay unchanged. */
.su-knot-frame{position:relative;overflow:visible;isolation:isolate}
.su-knot{position:absolute;display:block;width:92px;height:auto;z-index:2;pointer-events:none;user-select:none;line-height:0}
.su-knot>img{display:block;width:100%;max-width:none;height:auto;object-fit:contain}
.su-knot-original{left:-21px;top:-19px;transform:rotate(-18deg);transform-origin:30% 25%}
.su-knot-flat{left:-44px;top:-42px;transform:rotate(-8deg)}
.su-knot-loose{right:-48px;top:-18px;transform:rotate(8deg);transform-origin:45% 20%}
@media(min-width:760px){.su-knot{width:108px}.su-knot-original{left:-27px;top:-23px}.su-knot-flat{left:-50px;top:-52px}.su-knot-loose{right:-56px;top:-22px}}

/* One deliberately placed accent on an early story photo per visitor page.
   Pin each illustration at its actual knot, not at the PNG's corner. */
:is(#su-home-responsive,#su-dagje-uit,#su-kinderfeestjes) figure.su-cloth-frame{
 position:relative;overflow:visible;isolation:isolate;box-shadow:none;
 transform:rotate(var(--cloth-photo-angle,0deg));transform-origin:center;
}
:is(#su-home-responsive,#su-dagje-uit,#su-kinderfeestjes) figure.su-cloth-frame>.su-cloth{
 position:absolute;display:block;z-index:2;pointer-events:none;user-select:none;
 width:var(--cloth-size,112px);height:auto;aspect-ratio:1;line-height:0;
 left:var(--cloth-left,4px);top:var(--cloth-top,4px);
 transform-origin:var(--cloth-pin-x,50%) var(--cloth-pin-y,50%);
 transform:translate(calc(-1 * var(--cloth-pin-x,50%)),calc(-1 * var(--cloth-pin-y,50%))) rotate(var(--cloth-angle,0deg)) scaleX(var(--cloth-mirror,1));
}
:is(#su-home-responsive,#su-dagje-uit,#su-kinderfeestjes) figure.su-cloth-frame>.su-cloth>img{
 display:block;width:100%;height:auto;max-width:none;aspect-ratio:1;
 object-fit:contain;object-position:center;border:0;transform:none;mix-blend-mode:normal;
}
.su-cloth-home{--cloth-photo-angle:-1.2deg;--cloth-pin-x:49%;--cloth-pin-y:35%;--cloth-angle:-55deg;--cloth-size:134px}
.su-cloth-day{--cloth-photo-angle:1deg;--cloth-pin-x:52%;--cloth-pin-y:45%;--cloth-left:calc(100% - 4px);--cloth-angle:18deg;--cloth-size:106px}
.su-cloth-camping{--cloth-photo-angle:.8deg;--cloth-pin-x:50.3%;--cloth-pin-y:22.1%;--cloth-left:calc(100% - 4px);--cloth-angle:14deg;--cloth-size:110px}
.su-cloth-party{--cloth-photo-angle:-1deg;--cloth-pin-x:48%;--cloth-pin-y:19%;--cloth-angle:-12deg;--cloth-size:128px}
.su-cloth-play{--cloth-photo-angle:-.8deg;--cloth-pin-x:52%;--cloth-pin-y:45%;--cloth-angle:-10deg;--cloth-size:106px}
#su-home-responsive figure.su-cloth-frame.su-cloth-home{transform:rotate(var(--cloth-photo-angle))}
/* The cloth replaces the opening's owl; never stack two brand accents there. */
#su-home-responsive .su-has-cloth .k-playful-owl,
#su-dagje-uit .su-has-cloth .c-title-owl,
#su-kinderfeestjes .su-has-cloth :is(.p-jumping-owl,.q-owl-on-branch){display:none}
/* Breathing room around the corner, also when the existing page clips overflow. */
#su-home-responsive .k-photo-story:has(.su-cloth-home){padding-top:32px;padding-bottom:6px}
#su-dagje-uit #d-play .su-cloth-frame{margin-top:26px;margin-bottom:6px}
#su-dagje-uit #s-inside .su-cloth-frame{margin-top:34px;margin-bottom:24px}
#su-kinderfeestjes .p-opening .su-cloth-frame{margin-top:16px;margin-bottom:10px}
@media(max-width:759px){
 :is(#su-home-responsive,#su-dagje-uit,#su-kinderfeestjes) figure.su-cloth-frame{width:calc(100% - 48px);margin-left:24px;margin-right:24px}
 #su-kinderfeestjes .p-opening figure.su-cloth-frame{width:calc(100% - 48px)}
 #su-home-responsive figure.su-cloth-frame.su-cloth-home{width:calc(100% - 64px);margin-left:32px;margin-right:32px}
 .su-cloth-home{--cloth-size:104px}
 .su-cloth-day,.su-cloth-play{--cloth-size:90px}
 .su-cloth-camping{--cloth-size:88px}
 .su-cloth-party{--cloth-size:108px}
}
@media(max-width:359px){.su-cloth-home{--cloth-size:92px}.su-cloth-day,.su-cloth-play{--cloth-size:82px}}