/* The original HTML remains the line-layout source and no-JS fallback. */
.journal-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 2; transform: translateZ(0); }
.has-journal-svg .handwriting-layer { visibility: hidden; }
.journal-svg-emotion { cursor: pointer; }
.journal-svg-emotion:focus { outline: none; }
.journal-svg-emotion:focus-visible:not([data-pointer-focus]) { outline: 1px solid var(--paper); outline-offset: 2px; }
.journal-emotion-label { position: absolute; z-index: 5; pointer-events: none; white-space: nowrap; border-radius: 999px; padding: 5px 10px 6px; font: 700 12px/1 var(--body); transform: translateY(-100%); transform-origin: bottom left; text-transform: capitalize; }
.journal-emotion-label[hidden] { display: none; }
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .hero-scroll.has-mobile-journal { height: 650svh; margin-bottom: 0; clip-path: none; padding-bottom: 0; }
  /* Only the clipping surface follows collapsing browser toolbars.
     Keep the animation scroll distance above in stable small-viewport units. */
  .has-mobile-journal .hero-stage { height: 100dvh; min-height: 0; }
  .has-mobile-journal .hero-visual { top: 0; left: 0; width: 100%; height: 100%; transform: none; }
  .has-mobile-journal .journal-composition { left: 0; top: 0; transform-origin: top left; }
  .has-mobile-journal .tangent-annotations { display: none; }
}
/* A readable, unpinned alternative: no animation is needed to reach either page. */
@media (prefers-reduced-motion: reduce) {
  .hero-scroll .hero-visual { height: auto; }
  .hero-scroll .journal-composition { position: relative; left: auto; top: auto; width: 100%; height: auto; transform: none; }
  .hero-scroll .journal-paper, .hero-scroll .journal-composition::after, .hero-scroll .emotion-highlights { display: none; }
  .hero-scroll .handwriting-layer { display: flex; position: relative; inset: auto; gap: 40px; justify-content: center; flex-wrap: wrap; visibility: visible; }
  .hero-scroll .journal-composition .handwriting-page { position: relative; inset: auto; width: min(286px, 100%); font-size: 23px; line-height: 25px; letter-spacing: -.442px; color: var(--paper); background: none; -webkit-text-fill-color: currentColor; }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  /* Extra scroll room at the locked journal and completed annotations. */
  .hero-scroll { height: 340svh; }
}