/* Read along (/read/<story id>): a picture with one big line of words under it. */
.ra { max-width: 34rem; margin: 0 auto; padding: 0 16px 2rem; text-align: center; }
.ra__page { margin: 1rem 0; }
.ra__still { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: contain; border-radius: 12px; }
.ra__text { margin-top: 1rem; font-size: clamp(1.4rem, 5vw, 2rem); line-height: 1.4; font-weight: 700; }
.ra__text span { transition: color .15s ease; color: #6b6b6b; }
.ra__text span.is-said { color: #1a1a1a; }
.ra__controls { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.ra__all { text-align: left; font-size: 1.25rem; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .ra__text span { transition: none; } }
/* inside a walk's overlay (?in=walk): the whole book fits the frame (picture, words and buttons; nothing to scroll),
   no site header */
.is-bare { background: #fff; }
.is-bare main { padding: 0; }
.ra--walk { display: flex; flex-direction: column; box-sizing: border-box; height: 100vh; height: 100dvh; max-width: 40rem;
  padding: 10px 12px 8px; }
.ra--walk .daily__kicker { margin: 0; }
.ra--walk .head { margin: 0 0 .25rem; font-size: clamp(1.25rem, 4.6vw, 1.9rem); line-height: 1.1; }
.ra--walk .ra__page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: .25rem 0 .5rem; }
.ra--walk .ra__still { flex: 1 1 0; min-height: 0; width: 100%; height: auto; max-height: none; }
.ra--walk .ra__text { flex: none; margin-top: .5rem; padding: 0 .6rem; font-size: clamp(1.1rem, 3.8vw, 1.6rem); line-height: 1.3; }
.ra--walk .ra__controls { flex: none; flex-wrap: nowrap; gap: .5rem; }
.ra--walk .ra__controls .btn { min-height: 52px; padding-inline: 1.1em; font-size: 1.1rem; }
.ra--walk .ra__count { flex: none; margin: .3rem 0 0; }
@media (max-width: 420px) { .ra--walk .ra__controls .btn { padding-inline: .8em; white-space: nowrap; } }
/* inside /today's story box (?in=today, templates/_storybox.html): the dialog's bar already says what it is */
.ra--today { padding-top: 6px; }
.ra--today .daily__kicker, .ra--today .head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ra--today .ra__page { margin-top: 0; }