/* Shared work choreography for 08 r1 and variants A–E. Load after study-08.css. */
.study08.s8-refined{
 --s8-pace:1;
 --s8-work-distance:clamp(65svh,calc(76svh * var(--s8-pace)),85svh);
 --s8-work-tail:20svh;
 --s8-stage-height:min(500px,calc(100svh - 140px));
}

/* Default/no-JS/short-screen view: every drawing stays beside its own copy. */
.study08.s8-refined .s8-work-layout{display:block}
.study08.s8-refined .s8-work-stage{display:none;position:relative;top:0}
.study08.s8-refined .s8-work-list{min-width:0}
.study08.s8-refined .s8-work-list::after{content:none}
.study08.s8-refined .s8-work-entry{
 display:grid;grid-template-columns:25px minmax(0,1fr) 220px;
 gap:30px;align-items:center;min-height:280px;height:auto;padding:35px 0;
}
.study08.s8-refined .s8-work-entry>div{grid-column:2;grid-row:1;padding-right:0;min-width:0}
.study08.s8-refined .s8-number{grid-column:1;grid-row:1;align-self:start}
.study08.s8-refined .s8-work-inline{
 display:block;position:static;grid-column:3;grid-row:1;
 width:220px;height:220px;object-fit:contain;justify-self:center;margin:0;
}

/* Opacity and reveal belong to each pane, never to a shared active-pane timer. */
.study08.s8-refined .s8-work-pane{
 --s8-work-fill:1;--s8-work-reveal:1;--s8-work-shift:0;--s8-work-alpha:0;
 visibility:visible;opacity:var(--s8-work-alpha);transition:none;pointer-events:none;
}
.study08.s8-refined .s8-work-pane.is-current{--s8-work-alpha:1;opacity:var(--s8-work-alpha)}
.study08.s8-refined .s8-work-word,
.study08.s8-refined .s8-work-mask{transition:none}

/* A single, bounded stage; scroll remains entirely native. */
@media(min-width:1000px) and (min-height:700px){
 .study08.s8-refined.s8-work-enabled:not(.motion-off) .s8-work-layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(55px,7vw,100px);align-items:start;
 }
 .study08.s8-refined.s8-work-enabled:not(.motion-off) .s8-work-stage{
  display:block;position:sticky;height:var(--s8-stage-height);
  top:calc((100svh - var(--s8-stage-height))/2);align-self:start;
 }
 .study08.s8-refined.s8-work-enabled:not(.motion-off) .s8-work-panes{
  height:calc(var(--s8-stage-height) - 82px);
 }
 .study08.s8-refined.s8-work-enabled:not(.motion-off) .s8-work-entry{
  grid-template-columns:25px minmax(0,1fr);gap:24px;
  min-height:var(--s8-work-distance);padding:70px 0;align-content:center;align-items:start;
 }
 .study08.s8-refined.s8-work-enabled:not(.motion-off) .s8-work-entry>div{
  grid-column:2;grid-row:1;align-self:center;
 }
 .study08.s8-refined.s8-work-enabled:not(.motion-off) .s8-number{
  grid-column:1;grid-row:1;align-self:start;
 }
 .study08.s8-refined.s8-work-enabled:not(.motion-off) .s8-work-inline{display:none}
 .study08.s8-refined.s8-work-enabled:not(.motion-off) .s8-work-list::after{
  content:'';display:block;height:var(--s8-work-tail);
 }
}

@media(max-width:760px){
 .study08.s8-refined .s8-work-entry{
  grid-template-columns:22px minmax(0,1fr);gap:13px;
  align-items:start;min-height:0;padding:35px 0 45px;
 }
 .study08.s8-refined .s8-work-entry>div{grid-column:2;grid-row:2}
 .study08.s8-refined .s8-number{grid-column:1;grid-row:2;align-self:start}
 .study08.s8-refined .s8-work-inline{
  grid-column:1/-1;grid-row:1;width:min(240px,100%);height:230px;
  margin:0 0 18px;justify-self:center;
 }
}

/* OS preference is also enforced directly in CSS if the script is unavailable. */
@media(prefers-reduced-motion:reduce){
 .study08.s8-refined.s8-work-enabled:not(.motion-off) .s8-work-layout{display:block}
 .study08.s8-refined.s8-work-enabled:not(.motion-off) .s8-work-stage{display:none}
 .study08.s8-refined.s8-work-enabled:not(.motion-off) .s8-work-list::after{content:none}
 .study08.s8-refined.s8-work-enabled:not(.motion-off) .s8-work-entry{
  grid-template-columns:25px minmax(0,1fr) 220px;gap:30px;min-height:280px;padding:35px 0;
 }
 .study08.s8-refined.s8-work-enabled:not(.motion-off) .s8-work-inline{
  display:block;position:static;grid-column:3;grid-row:1;width:220px;height:220px;margin:0;
 }
}
@media(prefers-reduced-motion:reduce) and (max-width:760px){
 .study08.s8-refined.s8-work-enabled:not(.motion-off) .s8-work-entry{
  grid-template-columns:22px minmax(0,1fr);gap:13px;min-height:0;padding:35px 0 45px;
 }
 .study08.s8-refined.s8-work-enabled:not(.motion-off) .s8-work-entry>div{grid-column:2;grid-row:2}
 .study08.s8-refined.s8-work-enabled:not(.motion-off) .s8-number{grid-column:1;grid-row:2;align-self:start}
 .study08.s8-refined.s8-work-enabled:not(.motion-off) .s8-work-inline{
  grid-column:1/-1;grid-row:1;width:min(240px,100%);height:230px;margin:0 0 18px;
 }
}