/* =====================================================================
   Black out a poem: la página donde se tachan palabras.
   Pasos, botones, editor, lámina e impresión vienen de css/catch-poem.css.
   ===================================================================== */
.post .prose + .cp-step { margin-top: var(--space-5xl); }

/* la página: como una hoja suelta sobre la mesa */
.bo-page {
  max-width: var(--measure-text);
  padding: var(--space-4xl) var(--space-4xl);
  background: var(--color-light); border: var(--border-hair) solid var(--color-rule);
  font-size: var(--text-article); line-height: var(--leading-article);
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
  cursor: var(--bo-cursor);
}
.bo-page p { margin: 0 0 var(--space-xl); }
.bo-page p:last-child { margin-bottom: 0; }

/* cada palabra es un botón: se tacha con un trazo de rotulador (y se recupera con otro clic) */
.bo-word {
  padding: 0 var(--space-3xs); margin: 0 calc(var(--space-3xs) * -1);
  font: inherit; color: inherit; background: none; border: 0; border-radius: var(--radius-track);
  cursor: var(--bo-cursor);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.bo-word:hover { color: var(--color-accent); }
.bo-word:focus-visible { outline: var(--focus-ring); outline-offset: 0; }
.bo-word.out { background: var(--color-ink); color: var(--color-ink); }
.bo-word.out:hover { background: var(--color-ink-soft); color: var(--color-ink-soft); }
/* con manchas de tinta: cada palabra tachada, una mancha redonda e irregular (cuatro formas que se alternan) */
.bo-page.blobs .bo-word.out { display: inline-block; margin: 0; line-height: var(--leading-story); border-radius: 48% 52% 44% 56% / 62% 46% 54% 38%; transform: scale(1.12, 1.25); }
.bo-page.blobs .bo-word.out:nth-of-type(4n+1) { border-radius: 58% 42% 60% 40% / 45% 60% 40% 55%; transform: scale(1.15, 1.3) rotate(-2deg); }
.bo-page.blobs .bo-word.out:nth-of-type(4n+2) { border-radius: 40% 60% 46% 54% / 55% 42% 58% 45%; transform: scale(1.1, 1.35) rotate(3deg); }
.bo-page.blobs .bo-word.out:nth-of-type(4n+3) { border-radius: 64% 36% 52% 48% / 40% 58% 42% 60%; transform: scale(1.18, 1.2) rotate(-4deg); }
.bo-tool { margin: 0 0 var(--space-xl); }

.bo-reading { max-width: var(--measure-text); margin: var(--space-xl) 0 0; font-size: var(--text-base); line-height: var(--leading-loose); }
.bo-reading span:first-child { color: var(--color-text-soft); }
#bo-reading { color: var(--color-accent); }

@media (max-width: 760px) {
  .bo-page { padding: var(--space-3xl) var(--space-xl); }
}