/* Phones (2026-10-19, critic pass on all five pages at 390px). Loaded last on every page.
   One type scale: 48 page heading, 36 home section heading, 28 card titles, 17 body, 15 labels, 14 small.
   One spacing scale: 64 between sheets, 96 before the footer, 32 inside sheets, 16 inside panels.
   Phone rules hold: everything centred, justified body text with a centred last line, plum only on buttons. */
@media (max-width: 640px) {
  /* Justified text: better hyphenation, no rivers. Romee's letter at body size on phones (about 40 characters a line). */
  .hero-c .letter p, .hero-c .room-note, .weeks-lead, .r-words, .note-text, .rec-note { hyphenate-limit-chars: 5 2 2; text-wrap: pretty; }
  .hero-c #journey .letter { font-size: var(--text-body); line-height: 1.6; }

  /* Home: rhythm between sections (the hero keeps its own spacing). */
  .hero-c #journey { padding-bottom: 64px; }
  .hero-c #sessions, .hero-c #library { padding-top: 0; padding-bottom: 64px; }
  .hero-c #journal { padding-top: 0; padding-bottom: 96px; }

  /* Home: inside the sheets, 32 steps. */
  .hero-c #sessions .journal-page > .h2 { margin-top: 32px; }
  .hero-c #sessions .journal-page > .room-note { margin-top: 16px; }
  .hero-c #sessions .latest, .hero-c #sessions .sheet > .latest { margin-top: 32px; margin-bottom: 32px; }
  .hero-c #sessions .journal-page > .all-weeks { margin-bottom: 32px; }
  .hero-c #library .journal-page, .hero-c #journal .journal-page { padding: 32px 16px; }
  .hero-c #library .journal-page .room-note, .hero-c #journal .journal-page .room-note { margin-top: 16px; }
  .hero-c #library .journal-page > .btn, .hero-c #journal .journal-page > .btn { margin-top: 32px; }

  /* Home session panel: 16 between the video and the boxes and between boxes; 12px side padding in the boxes. */
  .hero-c #sessions .latest .wk .rows { row-gap: 16px; }
  .hero-c #sessions .latest .wk .r:not(.r-video) { padding: 16px 12px; }

  /* Library caption: the ribbon fades out behind the words (home sheet and Library page). */
  .hero-c #library .journal-page::before { background: linear-gradient(180deg, rgb(252 250 250 / 0.94) 0%, rgb(252 250 250 / 0.9) 70%, rgb(252 250 250 / 0.5) 100%), url(/assets/web/ribbon-loop.jpg) 50% 40% / cover no-repeat; }
  .lib-intro::before { background: linear-gradient(180deg, rgb(252 250 250 / 0.94) 0%, rgb(252 250 250 / 0.9) 75%, rgb(252 250 250 / 0.5) 100%), url(/assets/web/ribbon-loop.jpg) 50% 40% / cover no-repeat; }

  /* Sessions page: intro line in the serif like the other pages; week selector as wide as the cards, centred; panel spacing. */
  .weeks-page .weeks-lead { font-family: var(--serif); font-size: var(--text-body); line-height: 1.6; }
  .weeks-page .dd { width: 100%; margin-inline: 0; }
  .weeks-page .dd-btn { position: relative; justify-content: center; padding: 10px 44px; }
  .weeks-page .dd-now { display: grid; justify-items: center; text-align: center; }
  .weeks-page .dd-chev { position: absolute; right: 20px; top: 50%; margin-top: -5px; transform: rotate(45deg); }
  .weeks-page .dd[data-open="true"] .dd-chev { margin-top: -1px; transform: rotate(-135deg); }
  .weeks-page .dd-week { font-size: var(--text-body); }
  .weeks-page .dd-sub { font-size: var(--text-small); }
  .weeks-page .wk .r-video { padding-bottom: 0; margin-bottom: 0; }
  .weeks-page .wk .r:not(.r-video) { margin-top: 16px; padding: 16px 12px; }
  body.weeks-page .wk .r-video + .r { margin-top: 16px; border-top: var(--line); }

  /* Touch targets: Library tabs 44px, the reading link 44px. */
  .seg { padding: 4px; }
  .seg button { min-height: 44px; }
  .r-link, .rec-read .rec-title { display: inline-flex; align-items: center; min-height: 44px; }

  /* Type scale: card titles 28, typed text and placeholders 17, the session line 17. */
  .hero-c .rec-title { font-size: var(--text-h3); }
  .rec-read .rec-title { font-family: var(--sans); font-size: var(--text-body); }
  .jr-write textarea, .ss-notes textarea { font-size: var(--text-body); line-height: 1.6; }
  .ss-when { font-size: var(--text-body); text-wrap: balance; }

  /* Journal: the checkbox row centred. */
  .jr-actions { align-items: center; }
  .jr-check { justify-content: center; }
}