/* Reader-only responsive spacing fix. No application logic or other UI is changed. */
.reader-body {
  width: 100%;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.35rem;
  padding-right: 1.35rem;
}

.reader-body p.r-p {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  text-align: justify;
  text-justify: inter-word;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* Phones keep the current reading layout. */
@media (max-width: 640px) {
  .reader-body {
    max-width: 40rem;
    padding-left: 1.3rem;
    padding-right: 1.3rem;
  }
}

/* iPad/tablet portrait: use much more of the available screen width. */
@media (min-width: 641px) and (max-width: 1024px) {
  .reader-body {
    width: 100%;
    max-width: 56rem;
    padding-left: clamp(1.6rem, 4vw, 2.4rem);
    padding-right: clamp(1.6rem, 4vw, 2.4rem);
  }
}

/* Tablet landscape / desktop: expand with the viewport but keep a readable line length. */
@media (min-width: 1025px) {
  .reader-body {
    width: min(92vw, 68rem);
    max-width: 68rem;
    padding-left: clamp(2rem, 3.5vw, 3rem);
    padding-right: clamp(2rem, 3.5vw, 3rem);
  }
}