/* A quiet, scroll-driven chapter marker for the fixed desktop rail. */
.hero-copy > .button { position: relative; top: 18px; }
.reading-journal[hidden] { display: none; }
.reading-journal {
  --journal-progress: 0;
  flex: 0 0 auto;
  width: 100%;
  max-width: 168px;
  margin: auto 0;
  padding-top: 30px;
  color: var(--muted);
}
.journal-book {
  position: relative;
  display: block;
  width: 150px;
  max-width: 96%;
  height: 100px;
  margin: 0 0 24px 2px;
  perspective: 700px;
  transform: rotate(-5deg);
  transition: transform .4s ease;
}
.journal-book:hover { transform: rotate(-2deg) translateY(-2px); }
.journal-book:focus-visible { outline: 1px solid var(--accent); outline-offset: 8px; }
.journal-book::before, .journal-book::after {
  content: '';
  position: absolute;
  inset: 3px -1px -3px;
  border: 1px solid #c5c8b454;
  border-radius: 2px 6px 6px 2px;
  transform: rotate(2deg);
  background: #32382c;
}
.journal-book::after { inset: 6px -2px -6px; z-index: -1; transform: rotate(4deg); }
.journal-page {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
}
.journal-page-left {
  left: 0;
  z-index: 1;
  padding: 10px;
  background: linear-gradient(90deg, #bfc4ac 0%, #d2d5c3 86%, #8f9580 100%);
  color: #384032;
  border-radius: 3px 0 0 3px;
  display: flex;
  flex-direction: column;
}
.journal-page-left small { font-size: 8px; letter-spacing: .08em; font-weight: 600; }
.journal-page-left strong { font-size: 38px; line-height: 1; font-weight: 400; letter-spacing: -.08em; margin-top: auto; }
.journal-page-left i { width: 23px; height: 1px; margin-top: 9px; background: #64705c80; }
.journal-page-right, .journal-turn { left: 50%; border-radius: 0 3px 3px 0; background: #505747; }
.journal-page-right { z-index: 1; }
.journal-page-right::after, .journal-turn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#18201450,transparent 20%); }
.journal-page img { width: 100%; height: 100%; object-fit: cover; display: block; }
.journal-turn { z-index: 3; transform-origin: left center; visibility: hidden; backface-visibility: visible; transform-style: preserve-3d; overflow: visible; }
.journal-turn img { border-radius: 0 3px 3px 0; backface-visibility: hidden; }
.journal-turn::after { backface-visibility: hidden; }
.journal-turn::before { content: ''; position: absolute; inset: 0; border-radius: 3px 0 0 3px; background: linear-gradient(90deg,#aeb69c,#d2d5c3 80%,#9aa488); transform: rotateY(180deg); backface-visibility: hidden; }
.journal-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.journal-caption > small { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.journal-count { font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.journal-title { display: block; min-height: 2.7em; margin-top: 9px; color: #dde1d2; font-size: 14px; line-height: 1.35; font-weight: 400; }
.journal-progress { height: 2px; overflow: hidden; margin-top: 15px; background: #dce2c629; border-radius: 2px; }
.journal-progress i { display: block; width: 100%; height: 100%; background: #c7d2b4; transform: scaleX(var(--journal-progress)); transform-origin: left; }
.rail-v7:has(.reading-journal:not([hidden])) .rail-bottom { margin-top: 0; }
@media (min-width: 761px) and (max-height: 900px) {
  .reading-journal { padding-top: 22px; }
  .journal-book { width: 118px; height: 79px; margin-bottom: 19px; }
  .journal-page-left { padding: 8px; }
  .journal-page-left strong { font-size: 30px; }
}
@media (min-width: 761px) and (max-height: 760px) {
  .journal-book { display: none; }
  .reading-journal { padding-top: 20px; }
  .journal-title { font-size: 12px; }
}
@media (max-width: 760px) { .reading-journal { display: none; } .hero-copy > .button { top: 12px; } }
@media (prefers-reduced-motion: reduce) { .journal-book { transition: none; } .journal-book:hover { transform: rotate(-5deg); } }