/* Collage cut-outs (Kate's licensed Feelsoul packs). They live in the empty side margins of a
   section, never over its content: each item's width shrinks with the margin and they hide on
   narrower screens. --g = the margin at a 1440px window; --t top as % of the section; --w width. */
.jl section:has(> .cl){position:relative}
.jl .cl{position:absolute;inset:0;pointer-events:none;z-index:1}
.jl .cl img{position:absolute;top:var(--t);height:auto;width:max(0px,min(var(--w),calc(50cqw - 720px + var(--g) * 1px - 34px)));transform:rotate(var(--r));filter:drop-shadow(1px 2px 1.5px rgba(50,15,22,.22)) drop-shadow(5px 12px 14px rgba(50,15,22,.14))}
.jl .cl .cl-l{right:calc(50% + 720px - var(--g) * 1px + 16px)}
.jl .cl .cl-r{left:calc(50% + 720px - var(--g) * 1px + 16px)}
@container jl (max-width:1299px){.jl .cl img{display:none}}
/* phones: the collage stays visible. Pieces sit on the seams between sections (top or bottom
   corner), half on the paper above or below, clear of the words. --mt/--mb nudge one piece. */
@container jl (max-width:760px){
  .jl .cl img.m,.jl .cl img.mb{display:block;width:var(--mw,86px);left:auto;right:10px;z-index:3}
  .jl .cl img.m{top:var(--mt,-38px)}
  .jl .cl img.mb{top:auto;bottom:var(--mb,-34px)}
  .jl .cl img.m.cl-l,.jl .cl img.mb.cl-l,.jl .cl img.mf.cl-r{right:auto;left:10px}
  .jl .cl img.mf.cl-l{left:auto;right:10px}
}
@media (prefers-reduced-motion:no-preference){.jl .cl img{transition:transform .4s ease}}