/* The illustrations remain bitmap art; live labels, clock hands and STAR nodes are interface layers. */
.chapter-nav { align-items: center; justify-content: space-between; }
.journey-location { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; font: 0.9rem/1.5 system-ui, sans-serif; }
.journey-location select, .goal-picker select { max-width: 100%; padding: 0.6rem; font: inherit; color: var(--ink); background: var(--paper-light); border: 1px solid var(--line); }
.journey-progress { color: var(--muted); font-size: 0.9rem; }
.illustration-column { justify-content: flex-start; padding-top: 2rem; position: sticky; top: 0; align-self: start; }
.stage { margin: 1rem 0; }
.stage .grinder-art, .stage .grinder-wheel { width: 63%; height: auto; left: 30%; top: 15%; }
.stage .grinder-wheel { clip-path: ellipse(10% 20% at 73% 43%); transform-origin: 73% 43%; z-index: 2; }
.stage .values-suitcase { width: 28%; height: 34%; left: 0; top: 60%; }
.grinder-slips { position: absolute; z-index: 4; left: 16%; right: 7%; top: 4%; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.paper-slip { display: inline-block; padding: 0.45rem 0.65rem; color: var(--blue); background: #fff8e8ed; border: 1px solid #a58b5b; font: italic 1rem/1.3 Georgia, serif; overflow-wrap: anywhere; max-width: 100%; box-shadow: 1px 3px 3px #37271812; }
.core-slips { top: 76%; left: 31%; right: 5%; }
.core-slips .paper-slip { font-size: clamp(1.1rem, 2vw, 1.8rem); }
.stage .figure-art { width: 85%; height: 88%; top: 3%; left: 7%; }
.carried-values { position: absolute; z-index: 5; top: 7%; left: 6%; right: 6%; display: flex; gap: 0.7rem; justify-content: space-between; flex-wrap: wrap; }
.figure-caption { position: absolute; bottom: 0; left: 5%; right: 5%; text-align: center; font: italic 1.2rem/1.5 Georgia, serif; }
.clock-assembly { position: absolute; width: 72%; aspect-ratio: 1; top: 3%; left: 14%; }
.stage .clock-art { width: 100%; height: 100%; inset: 0; }
.clock-hand { position: absolute; left: calc(50% - 1px); bottom: 50%; width: 2px; height: 25%; background: #493621; transform-origin: center bottom; z-index: 2; }
.hour-hand { height: 17%; width: 3px; transform: rotate(70deg); }
.morph-clock { opacity: 0; width: 77%; top: 3%; left: 11%; }
.stage[data-scene='clock'] .carried-values { top: auto; bottom: 7%; justify-content: center; }
.stage .classroom-art { width: 100%; height: 100%; inset: 0; }
.stage[data-scene='classroom'] .clock-assembly { width: 17%; top: 13%; left: 43%; }
.desk-choices { position: absolute; bottom: 8%; left: 5%; right: 5%; display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; z-index: 4; }
.desk-choices .paper-slip { font-size: 0.875rem; }
.ink-dust { position: absolute; inset: 15% 3%; opacity: 0; pointer-events: none; z-index: 6; }
.ink-dust i { position: absolute; width: 3px; height: 2px; background: #8d6539; box-shadow: 7px 5px 0 #b99551, -8px 10px 0 #96784870; }
.stage[data-scene='path'], .stage[data-scene='field'], .stage[data-scene='classroom'] { aspect-ratio: 1.4; }
.stage[data-scene='path'] { aspect-ratio: 1.0714; }
.stage .path-art { height: 100%; width: 280%; max-width: none; top: 0; left: 0; object-fit: fill; }
.stage[data-scene='path'] .carried-values { top: 20%; left: 22%; right: 15%; }
.path-marker { position: absolute; bottom: 0; left: 8%; right: 8%; z-index: 5; background: #fff8e8ed; padding: 0.65rem; text-align: center; font-style: italic; border-block: 1px solid var(--line); }
.stage .landscape-art { width: 100%; height: 100%; inset: 0; }
.sunset-wash { position: absolute; inset: 0; opacity: 0; background: linear-gradient(#0e1b34 0%, #a0645a 50%, #bd7b41); mix-blend-mode: multiply; z-index: 3; }
.star-chart { position: absolute; inset: 0; background: #13233b; border-radius: 45% 45% 5% 5%; overflow: hidden; }
.stage .star-atlas { inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; opacity: 0.65; }
.constellation-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.constellation-lines line { stroke: #f8dd9250; stroke-width: 0.25; stroke-dasharray: 1 2; }
.constellation-lines .connected { stroke: #f8dd92; stroke-width: 0.5; stroke-dasharray: none; }
.star-node { position: absolute; z-index: 4; transform: translate(-50%, -50%); padding: 0.6rem; background: #13233bf2; color: #fff1be; border-color: #beaa765e; font-size: clamp(0.85rem, 1.4vw, 1.2rem); white-space: nowrap; }
.star-node::before { content: '✦'; display: block; font-size: 1.6rem; line-height: 1.2; }
.star-node:hover, .star-node[aria-current] { background: #304366; border-color: #f8dd92; }
.star-node.kept::before { color: #fff; text-shadow: 0 0 16px #ffe5a5; }
.goal-picker { display: grid; gap: 0.5rem; margin: 1rem 0; }
.selected-goal { white-space: pre-wrap; padding: 0.8rem; border-block: 1px solid var(--line); line-height: 1.6; overflow-wrap: anywhere; }
.recall { margin: 1rem 0; border-top: 1px solid var(--line); padding-top: 0.7rem; }
.recall summary { cursor: pointer; color: var(--blue); }
.journey-complete { border-top: 2px solid var(--ochre); margin-top: 1.5rem; padding-top: 1rem; line-height: 1.7; }
.question-column { align-self: start; }
.concept { font-size: 1rem; }
.source-note, .value-option small, .animation-controls button, .notebook-footer { font-size: 0.875rem; }
@media (max-width: 900px) {
  .illustration-column { position: static; padding-top: 1rem; }
  .stage { max-width: 640px; }
  .journey-location { width: 100%; }
  .journey-location select { flex: 1; min-width: 0; }
}
@media (max-width: 480px) {
  .stage[data-scene='grinder'], .stage[data-scene='figure'], .stage[data-scene='clock'], .stage[data-scene='stars'] { aspect-ratio: 1; }
  .paper-slip { font-size: 0.875rem; padding: 0.35rem; }
  .folio { margin-inline: 0.5rem; }
  .star-node { font-size: 0.875rem; padding: 0.4rem; }
  .journey-progress { flex-basis: 100%; }
}