/* One unchanged engraving follows a single wool cable through the exhibition. */
#content{position:relative}
.story-thread{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:1}
.thread-map{display:block;width:100%;height:100%;overflow:visible}
.story-actor{
  --story-hand-width:360px;--story-hand-angle:0deg;--story-rail-inset:225px;
  position:absolute;left:0;top:0;z-index:6;width:var(--story-hand-width);
  aspect-ratio:var(--hand-aspect-ratio,1);pointer-events:none;
  transform-origin:var(--tip-x,15.03%) var(--tip-y,8.453%);
  opacity:0;transition:none;isolation:isolate;will-change:auto;
}
.story-actor[data-mode]{opacity:1}
.story-hand-rig,.needle-hand{position:relative;width:100%;aspect-ratio:var(--hand-aspect-ratio,1);transform:none;animation:none}
.needle-hand>img{display:block;width:100%;height:100%;object-fit:contain;opacity:1;animation:none;transition:none}
body[data-theme] #content .story-actor .needle-hand>img{filter:none;mix-blend-mode:normal}
.needle-yarn-connector{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.story-actor .needle-star{display:none}

/* The interior plies/fibres belong to one cable, not parallel decorative lines.
   Burgundy and its muted fibre light remain the same physical material in both themes. */
.story-thread,.story-actor{
  --yarn-edge:#361720;--yarn-body:#592638;--yarn-ply:#703548;
  --yarn-shade:#48202e;--yarn-light:#996673;
}
.yarn-segment path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.story-stroke{stroke:var(--yarn-edge);stroke-width:6;opacity:1}
.yarn-core{stroke:var(--yarn-body);stroke-width:5.15}
.yarn-ply{stroke-width:2.15;stroke:var(--yarn-ply)}
.yarn-ply--1{stroke:var(--yarn-shade)}
.yarn-ply-light{stroke:var(--yarn-light);stroke-width:.62;opacity:.8}
.yarn-fibre{stroke:#9a6976;stroke-width:.24;opacity:.65}
.yarn-fuzz{stroke:#754454;stroke-width:.32;opacity:.78}
.story-thread,.thread-map,.story-actor,.story-hand-rig{overflow-anchor:none}
html,body{overflow-x:clip}

/* Each drawing has its own clear stage. The hand never traverses semantic copy,
   thumbnails or artwork: travel uses the outside margin between these stages. */
.thread-moment,.thread-moment--seal{height:650px;pointer-events:none}
.thread-moment .stitch-stage{left:auto;right:55px;width:300px;height:220px;top:85px}
.thread-moment>p{top:95px}
.thread-moment--seal .stitch-stage{height:200px}
@media(max-width:1000px){
  .story-actor{--story-hand-width:280px;--story-rail-inset:155px}
  .thread-moment .stitch-stage{width:250px;right:45px}
}
@media(max-width:650px){
  .story-actor{--story-hand-width:230px;--story-rail-inset:65px}
  .thread-moment,.thread-moment--seal{height:560px}
  .thread-moment>p{top:22px}
  .thread-moment .stitch-stage{top:100px;right:20px;width:180px;height:160px}
  .story-stroke{stroke-width:4.8}
  .yarn-core{stroke-width:4.05}
  .yarn-ply{stroke-width:1.75}
  .yarn-ply-light{stroke-width:.52}
}
@media(prefers-reduced-motion:reduce){
  .story-actor,.story-hand-rig,.needle-hand{animation:none!important;transition:none!important}
}