/* Adventure with Alphabet — About page desktop line placement
   Based on the creator-supplied About the Creators Word layout.
   Manual line boundaries are honored on large screens; tablet/mobile
   return to natural wrapping so text remains comfortable and responsive. */

.about-aligned-page .about-manual-lines {
  text-wrap: pretty;
}

.about-aligned-page .about-manual-line {
  display: block;
}

/* Give the opening creator copy enough room to use the requested line rhythm. */
.about-aligned-page .founders-prelude {
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr) !important;
  gap: clamp(34px, 3.25vw, 54px) !important;
}

.about-aligned-page .founders-simple-image {
  width: min(100%, 330px) !important;
}

.about-aligned-page .founders-simple-copy {
  max-width: none !important;
  width: 100% !important;
}

.about-aligned-page .founders-simple-copy h2 {
  margin-top: 0 !important;
  margin-bottom: 22px !important;
}

/* Keep the intended Word-document line breaks crisp on roomy desktop screens. */
@media (min-width: 1360px) {
  .about-aligned-page .about-manual-line {
    white-space: nowrap;
  }

  /* The creators section has the longest requested desktop lines. */
  .about-aligned-page .founders-simple-copy > .about-manual-lines,
  .about-aligned-page .founders-quote .about-manual-lines {
    font-size: 0.96rem !important;
    line-height: 1.76 !important;
  }

  /* Character text columns need a little more room for the supplied lines. */
  .about-aligned-page .about-character-kasia .about-character-copy,
  .about-aligned-page .about-character-mati .about-character-copy {
    max-width: 980px !important;
  }
}

/* On narrower desktops/tablets, preserve paragraph grouping while allowing
   the browser to wrap naturally rather than overflow the card. */
@media (max-width: 1359px) {
  .about-aligned-page .about-manual-line {
    display: inline;
    white-space: normal;
  }

  .about-aligned-page .about-manual-line + .about-manual-line::before {
    content: " ";
  }
}

@media (max-width: 980px) {
  .about-aligned-page .founders-prelude {
    grid-template-columns: 1fr !important;
  }

  .about-aligned-page .founders-simple-image {
    width: min(100%, 360px) !important;
  }
}