/* Physical cut-paper seams. Loaded after reading.css so its calm palette and
   reading hierarchy stay intact, without flattening the editorial artwork. */
:root{
  --collage-overlap:clamp(24px,3.4vw,54px);
  --collage-edge:calc(var(--collage-overlap) * 1.4);
  --collage-side:polygon(
    calc(var(--collage-edge) * .84) 0,100% 0,100% 100%,
    calc(var(--collage-edge) * .22) 100%,calc(var(--collage-edge) * .31) 96%,
    calc(var(--collage-edge) * .25) 94%,calc(var(--collage-edge) * .49) 88%,
    calc(var(--collage-edge) * .43) 86%,calc(var(--collage-edge) * .66) 79%,
    calc(var(--collage-edge) * .58) 77%,calc(var(--collage-edge) * .71) 72%,
    calc(var(--collage-edge) * .46) 67%,calc(var(--collage-edge) * .49) 65%,
    calc(var(--collage-edge) * .19) 58%,calc(var(--collage-edge) * .23) 56%,
    0 51%,calc(var(--collage-edge) * .12) 47%,calc(var(--collage-edge) * .08) 45%,
    calc(var(--collage-edge) * .38) 38%,calc(var(--collage-edge) * .32) 36%,
    calc(var(--collage-edge) * .54) 31%,calc(var(--collage-edge) * .48) 29%,
    calc(var(--collage-edge) * .82) 22%,calc(var(--collage-edge) * .73) 20%,
    calc(var(--collage-edge) * .9) 16%,calc(var(--collage-edge) * .79) 13%,
    calc(var(--collage-edge) * .94) 8%,calc(var(--collage-edge) * .86) 6%,
    var(--collage-edge) 2%);
  --collage-horizontal:polygon(
    0 19px,5% 16px,8% 19px,15% 9px,18% 12px,25% 5px,28% 8px,
    34% 0,38% 6px,41% 4px,49% 16px,52% 12px,59% 22px,62% 18px,
    69% 24px,73% 17px,76% 20px,84% 9px,87% 12px,94% 3px,97% 7px,100% 2px,
    100% calc(100% - 9px),94% calc(100% - 4px),90% calc(100% - 7px),
    82% 100%,78% calc(100% - 3px),71% calc(100% - 1px),
    62% calc(100% - 12px),58% calc(100% - 9px),49% calc(100% - 18px),
    44% calc(100% - 12px),40% calc(100% - 15px),31% calc(100% - 6px),
    27% calc(100% - 9px),19% 100%,14% calc(100% - 5px),8% calc(100% - 2px),0 calc(100% - 11px));
}

@media screen and (min-width:681px){
  .shell .home-hero--recommendation .home-art,
  .poster .poster-art,.best-art{
    margin-left:calc(0px - var(--collage-overlap));
    clip-path:var(--collage-side);
  }
  /* Reserve the overlap inside the copy column; never place text on the art. */
  .shell .home-hero--recommendation .home-hero-copy,
  .poster .poster-copy,.best-hero-copy{
    padding-right:calc(36px + var(--collage-overlap));
  }
  .entry-spotlight .spotlight-art{
    --collage-edge:24px;
    clip-path:var(--collage-side);
  }
}
@media screen and (min-width:801px){
  .collection-art{margin-left:calc(0px - var(--collage-overlap));clip-path:var(--collage-side)}
  .collection-copy{padding-right:calc(36px + var(--collage-overlap))}
}
@media screen and (max-width:800px){
  .collection-art{margin-top:-14px;clip-path:var(--collage-horizontal)}
  .collection-copy{padding-bottom:36px}
}
@media screen and (max-width:680px){
  /* Keep the existing mobile visibility and content-first order. */
  .best-art,.poster[data-area="new"] .poster-art{
    margin-top:-14px;clip-path:var(--collage-horizontal);
  }
  .best-hero-copy{padding-bottom:32px}
  .poster[data-area="new"] .poster-copy{padding-bottom:41px}
}