/* Lettering belongs to the cloth. English uses the generated printed raster;
   the other editions use live text over its matching unprinted garment. */
.trash-conversation {
  display: block;
  align-self: center;
  min-width: 0;
  transform: none;
}
.comic-underpants {
  position: relative;
  container-type: inline-size;
  width: min(100%, 680px);
  aspect-ratio: 1;
  margin-inline: auto;
  transform: rotate(-4deg);
  isolation: isolate;
}
.underpants-raster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.underpants-blank { opacity: 0; }
/* Preserve equivalent English text for assistive technology. */
.underpants-copy {
  position: absolute;
  inset: 23% 20% 24%;
  z-index: 1;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  color: var(--ink);
  text-align: center;
}
html:is([data-edition="liv"], [data-edition="ccc"]) .underpants-printed { opacity: 0; }
html:is([data-edition="liv"], [data-edition="ccc"]) .underpants-blank { opacity: 1; }
html:is([data-edition="liv"], [data-edition="ccc"]) .underpants-copy {
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  clip-path: none;
  white-space: normal;
}
/* Positions scale with the drawing, keeping every line above the leg holes. */
.trash-conversation .underpants-copy .comic-heading-row,
.underpants-copy .comic-heading-row > div { display: contents; }
.trash-conversation .underpants-copy h2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  font: 14.4cqw/.86 Marker, var(--scribble-font);
  letter-spacing: -.02em;
  text-align: center;
  text-shadow: none;
  transform: rotate(-3deg);
}
.underpants-copy .title-period { color: var(--orange); }
.trash-conversation .underpants-copy .comic-description {
  position: absolute;
  top: 24%;
  left: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  font: 3.1cqw/1.2 var(--scribble-font);
  transform: rotate(1deg);
}
.trash-conversation .underpants-copy .archive-stamp {
  position: absolute;
  top: 40%;
  left: 0;
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  font: 3cqw/1.1 Marker, var(--scribble-font);
  text-align: center;
  transform: rotate(2deg);
}
.trash-conversation .underpants-copy .bin-title {
  position: absolute;
  top: 47%;
  left: 0;
  width: 100%;
  margin: 0;
  font: 10cqw/.94 Marker, var(--scribble-font);
  letter-spacing: -.035em;
  transform: rotate(1deg);
}
.underpants-copy .bin-title-lead {
  display: block;
  margin: 0 0 .5cqw;
  font: 3.6cqw/1 var(--scribble-font);
}
.underpants-copy .bin-title-main {
  display: inline-block;
  padding: 0;
  white-space: nowrap;
}
.underpants-copy .bin-title-main::before { inset: 65% -.07em 0 -.06em; }
.trash-conversation .underpants-copy .bin-dialogue {
  position: absolute;
  top: 72%;
  left: 0;
  width: 100%;
  margin: 0;
  font: 3.05cqw/1.15 var(--scribble-font);
}
.underpants-copy .bin-dialogue-line {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 1.4cqw;
  white-space: nowrap;
}
.underpants-copy .bin-dialogue-line + .bin-dialogue-line {
  margin: 1cqw 0 0;
  transform: rotate(-.8deg);
}
.underpants-copy .bin-dialogue-line > b { font: 2.5cqw/1.15 Marker, var(--scribble-font); }
.trash-conversation .underpants-copy > .hand-note {
  position: absolute;
  top: 89%;
  left: 0;
  display: block;
  width: 100%;
  margin: 0;
  font: 3.15cqw/1.15 Marker, var(--scribble-font);
  color: #a54928;
  transform: rotate(-3deg);
}
.trash-conversation > .edition-note {
  width: 100%;
  margin: 0 0 10px;
}
.trash-conversation > .trash-status {
  min-height: 18px;
  margin: 4px auto 0;
  font-size: 11px;
  text-align: center;
}
@media (max-width: 700px) {
  .comic-underpants { width: min(100%, 520px); }
  .trash-conversation > .edition-note { margin-bottom: 6px; }
  .trash-conversation > .trash-status { font-size: 8px; margin-top: 3px; }
}