/* A rubbish archive, assembled from separate badly drawn raster props. */
.archive-stamp{font-size:18px;text-align:right;transform:rotate(7deg);padding-right:12px}
.trash-layout{display:grid;grid-template-columns:minmax(190px,.65fr) minmax(0,2fr);gap:15px;align-items:center;margin-top:10px}
.trash-conversation{position:relative;z-index:2;transform:rotate(-2deg)}
.trash-conversation h3{font-size:clamp(35px,4vw,62px);line-height:1.02;margin:20px 0 24px;transform:rotate(2deg)}
.trash-conversation>p{font-family:var(--scribble-font);font-size:13px;line-height:1.9}
.trash-conversation .hand-note{color:#a54928;font-size:18px;margin:28px 0 22px;transform:rotate(-5deg)}
.trash-conversation .trash-status{font-size:10px;color:#71745d;min-height:38px;max-width:220px}
.trash-stage{position:relative;isolation:isolate;width:100%;aspect-ratio:3/2;min-width:0;margin-block:30px 0;overflow:visible}
/* The new bin asset is a true overhead view: the rim is the frame and its
   center is the floor. Keep the square image centered so objects read as
   things lying inside one circular container instead of a front/back stack. */
.trash-bin.bin-top{position:absolute;z-index:1;left:50%;top:50%;width:90%;height:auto;transform:translate(-50%,-50%);pointer-events:none;user-select:none}
.trash-prop{position:absolute;z-index:5;display:block;appearance:none;border:0;padding:0;background:transparent;min-width:44px;min-height:44px;transform:rotate(var(--prop-tilt)) scaleY(var(--prop-depth));transform-origin:50% 50%;transition:transform .22s steps(4),filter .22s;cursor:pointer;touch-action:manipulation;pointer-events:none}
.trash-prop img{width:100%;height:auto;pointer-events:auto;user-select:none;-webkit-user-drag:none}
.trash-prop{filter:drop-shadow(2px 3px 1px #171a1280) drop-shadow(3px 6px 4px #171a1247)}
.trash-prop:hover,.trash-prop:focus-visible{transform:translateY(-4px) rotate(calc(var(--prop-tilt) - 2deg)) scaleY(var(--prop-depth));filter:drop-shadow(2px 4px 1px #171a1280) drop-shadow(3px 8px 4px #171a1247)}
.trash-prop:focus-visible{outline:3px dashed var(--orange);outline-offset:6px}
/* One low pile on the floor: flat cover, loose bag and sideways foreground props. */
.prop-comic{left:25%;top:25%;width:36%;--prop-tilt:-24deg;--prop-depth:.88;z-index:6}
.prop-comic.is-lifted{opacity:0;pointer-events:none}
.prop-bag{left:51%;top:30%;width:31%;--prop-tilt:28deg;--prop-depth:.83;z-index:7}
.prop-eggplant{left:29%;top:45%;width:31%;--prop-tilt:55deg;--prop-depth:.96;z-index:8}
.prop-condoms{left:50%;top:53%;width:30%;--prop-tilt:63deg;--prop-depth:.83;z-index:9}
/* Empty corners of the foreground PNGs must let the comic and bag receive hits.
   These contours include a margin around the raster strokes. */
.prop-eggplant img{clip-path:polygon(82% 0,94% 0,94% 14%,96% 31%,93% 44%,89% 61%,82% 81%,71% 96%,56% 100%,30% 100%,14% 100%,8% 92%,9% 80%,16% 70%,27% 57%,37% 46%,44% 34%,44% 27%,42% 14%,62% 9%,70% 1%)}
.prop-condoms img{clip-path:polygon(30% 1%,81% 9%,80% 26%,88% 27%,87% 84%,84% 99%,16% 88%,15% 32%,22% 28%,20% 17%,29% 13%)}
.prop-comic.is-lifted img,.prop-bag.is-unzipping img{pointer-events:none}
.prop-eggplant:hover,.prop-eggplant:focus-visible{animation:aubergine-wriggle .65s steps(3) infinite}
.prop-bag.is-unzipping{z-index:12;animation:unzip-bag .75s ease-out both;pointer-events:none}
.bin-floor-note{position:absolute;z-index:2;left:50%;bottom:0;font:9px var(--scribble-font);letter-spacing:1px;color:#71745f;transform:translateX(-50%) rotate(-2deg);white-space:nowrap}
.comic-end{margin-top:34px}
@keyframes aubergine-wriggle{0%,100%{transform:translateY(-2px) rotate(calc(var(--prop-tilt) - 3deg)) scaleY(var(--prop-depth))}50%{transform:translateY(-4px) rotate(calc(var(--prop-tilt) + 4deg)) scaleY(var(--prop-depth))}}
@keyframes unzip-bag{0%{transform:rotate(var(--prop-tilt)) scaleY(var(--prop-depth))}30%{transform:translate(5%,-30%) rotate(-9deg) scale(1.12)}60%{transform:translate(5%,-30%) rotate(-3deg) scale(1.15)}100%{transform:translate(5%,-30%) rotate(-6deg) scale(1.15)}}

/* The native dialog keeps focus in the comic while its cover flies into it. */
.comic-reader{width:min(1080px,calc(100% - 28px));max-width:none;max-height:calc(100dvh - 24px);padding:0;border:0;background:transparent;box-shadow:none;clip-path:none;overflow:visible;transform:none}
.comic-reader::backdrop{background:#24271ee6;backdrop-filter:blur(4px)}
.book-shell{position:relative;padding:42px 70px 42px;background:url('/assets/trash/book-paper.webp') center/100% 100% no-repeat;filter:drop-shadow(8px 12px 0 #15180f60);max-height:calc(100dvh - 24px);overflow-y:auto;scrollbar-width:thin;transform:rotate(-.6deg)}
.is-extracting .book-shell{opacity:0;visibility:hidden}
.comic-extraction-clone{position:fixed;z-index:5;max-width:none;object-fit:contain;pointer-events:none;filter:drop-shadow(5px 9px 0 #15180f66);transform-origin:center}
.comic-reader .reader-top{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:0 0 22px;font-size:10px;letter-spacing:.3px}
.comic-reader .reader-close{border:0;min-height:44px;padding:10px 12px;background:var(--ink);color:var(--paper);clip-path:var(--rag-tight);font-size:10px;transform:rotate(2deg);flex-shrink:0}
.reader-edition-note{font:11px/1.6 var(--scribble-font);color:#7d482c;margin:-5px 0 20px;max-width:850px}
.book-pages{perspective:1100px;transform-style:preserve-3d;min-width:0}
.comic-reader .reader-figure{display:grid!important;grid-template-columns:1fr 1fr;gap:38px;align-items:center;width:100%!important;max-width:none;margin:0!important;padding:0;background:transparent;border:0;box-shadow:none!important;clip-path:none;transform:none!important;rotate:none!important;animation:none!important;transform-origin:left center;backface-visibility:hidden}
.comic-reader .reader-figure:hover{box-shadow:none;rotate:none}
.comic-reader .reader-figure .panel-art{background:transparent;overflow:visible;min-width:0;transform:rotate(-1deg)}
.comic-reader .reader-figure .panel-art>img{width:100%;height:min(49dvh,410px);max-height:none;aspect-ratio:auto;object-fit:contain;filter:none}
.comic-reader .reader-figure .panel-enlarge{display:none}
.comic-reader .reader-figure .panel-number{top:8px;left:8px;font-size:8px}
.comic-reader .reader-figure figcaption{display:flex;flex-direction:column;justify-content:center;gap:38px;min-height:0;min-width:0;border:0;padding:15px 20px 15px 12px;background:transparent}
.comic-reader .reader-figure .dialogue{display:block;transform:rotate(-1.5deg)}
.comic-reader .reader-figure .dusty-line{transform:rotate(1.5deg);padding-left:16px}
.comic-reader .reader-figure .speaker{display:block;font:10px var(--body-font);letter-spacing:1px;margin-bottom:10px}
.comic-reader .reader-figure .dialogue p{font:clamp(18px,2.2vw,27px)/1.5 var(--scribble-font);overflow-wrap:anywhere}
.comic-reader .reader-controls{display:flex;justify-content:space-between;align-items:center;margin:22px 0 0;gap:16px}
.comic-reader .reader-controls .button{min-height:44px;min-width:116px;font-size:10px;gap:16px}
.comic-reader .reader-controls>span{font:10px var(--scribble-font);white-space:nowrap}
.comic-reader .reader-hint{font:9px var(--scribble-font);letter-spacing:.5px;text-align:center;margin:18px 0 0;color:#696d56}
@media(max-width:900px){
  .trash-layout{grid-template-columns:180px minmax(0,1fr);gap:0}
  .trash-conversation h3{font-size:38px}.trash-conversation>p{font-size:11px}.trash-conversation .hand-note{font-size:15px}
  .book-shell{padding:34px 50px}.comic-reader .reader-figure{gap:25px}.comic-reader .reader-figure figcaption{padding:10px;gap:24px}
}
@media(max-width:600px){
  .archive-stamp{font-size:11px;padding:0;max-width:110px}.comic-heading-row{gap:15px}
  .trash-layout{display:block;margin-top:25px}
  .trash-conversation{display:grid;grid-template-columns:1fr 1.2fr;column-gap:20px;align-items:center;transform:rotate(-1deg)}
  .trash-conversation .eyebrow{grid-column:1/-1;font-size:8px}
  .trash-conversation h3{font-size:36px;margin:14px 0;grid-row:2/4}
  .trash-conversation>p{font-size:10px;line-height:1.8}
  .trash-conversation .hand-note{font-size:12px;margin:12px 0;transform:rotate(-5deg)}
  .trash-conversation .trash-status{grid-column:1/-1;font-size:8px;min-height:0;max-width:none;margin:10px 0 0}
  .trash-stage{aspect-ratio:1;margin:35px 0 15px}
  .trash-bin.bin-top{left:50%;top:50%;width:88%}
  .bin-floor-note{left:50%;font-size:7px;letter-spacing:0}
  .comic-end{margin-top:20px;flex-wrap:wrap;gap:16px}.comic-end .end-mark{font-size:22px}.comic-end>span:nth-child(2){display:none}
  .comic-reader{width:calc(100% - 16px);max-height:calc(100dvh - 16px)}
  .book-shell{padding:22px 22px 25px;background:var(--paper) url('/assets/paper.webp') center/500px repeat;clip-path:polygon(1% 1%,45% 0,98% 1%,100% 18%,99% 98%,76% 100%,2% 99%,0 82%);max-height:calc(100dvh - 16px)}
  .comic-reader .reader-top{font-size:7px;gap:10px;margin-bottom:13px}.comic-reader .reader-close{font-size:8px;padding:8px 10px}
  .reader-edition-note{font-size:10px;margin:0 0 14px}
  .comic-reader .reader-figure{grid-template-columns:1fr;gap:10px}
  .comic-reader .reader-figure .panel-art>img{height:min(38dvh,310px)}
  .comic-reader .reader-figure figcaption{padding:8px 6px;gap:15px}
  .comic-reader .reader-figure .dialogue{display:grid;grid-template-columns:41px 1fr;gap:10px}
  .comic-reader .reader-figure .speaker{font-size:8px;margin:4px 0 0}
  .comic-reader .reader-figure .dusty-line{padding-left:9px}
  .comic-reader .reader-figure .dialogue p{font-size:15px;line-height:1.45}
  .comic-reader .reader-controls{margin-top:14px;gap:8px}.comic-reader .reader-controls .button{min-width:85px;font-size:8px;padding:9px 12px;gap:8px}
  .comic-reader .reader-controls>span{font-size:8px}.comic-reader .reader-hint{font-size:7px;letter-spacing:0;line-height:1.6;margin-top:14px}
}
@media(prefers-reduced-motion:reduce){
  .trash-prop,.trash-prop:hover,.trash-prop:focus-visible{animation:none!important;transition:none;transform:rotate(var(--prop-tilt)) scaleY(var(--prop-depth))}
}