/* Two complete conversations. Only the change of scene follows the scroll. */
.sb-story{--sb-nav:96px;background:var(--c-alt);position:relative}
.sb-stage{display:flex;flex-direction:column;gap:24px;padding-block:32px;max-width:1240px}
.sb-heading{display:flex;align-items:start;justify-content:space-between;gap:24px;flex-shrink:0}
.sb-heading h2{font-size:clamp(1.65rem,3vw,2.8rem);line-height:1.08;margin-top:8px}
.sb-heading>a{font-size:11px;color:var(--c-grey);white-space:nowrap;border-bottom:1px solid currentColor;margin-top:5px}
.sb-scenes{display:grid;gap:64px;min-height:0}
.sb-scene{display:grid;grid-template-columns:minmax(100px,180px) minmax(0,640px) minmax(100px,180px);grid-template-rows:auto 1fr;gap:18px 24px;align-items:center;min-width:0}
.sb-scene-header{grid-column:1/-1;display:flex;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:1px solid #c6cdc6}
.sb-scene-header>span{font-size:11px;color:var(--c-grey);font-variant-numeric:tabular-nums}
.sb-scene-header h3{font-size:18px;letter-spacing:-.025em}
.sb-scene-header p{font-size:12px;color:var(--c-grey);margin-left:auto!important}
.sb-actor{grid-row:2;align-self:center;text-align:center;min-width:0}
.sb-actor-left{grid-column:1}.sb-actor-right{grid-column:3}
.sb-actor img{width:100%;max-height:290px;object-fit:contain;object-position:bottom;user-select:none}
.sb-actor figcaption{padding-top:8px;display:flex;flex-direction:column;gap:4px;line-height:1.25}
.sb-actor figcaption strong{font-size:14px;font-weight:500}
.sb-actor figcaption small{font-size:10px;color:var(--c-grey)}
.sb-piotr img{transform:scaleX(-1)}
.sb-shared-robot{display:none}
.sb-dialogue{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:14px;min-width:0;align-self:center}
.sb-bubble{position:relative;max-width:94%;padding:16px 20px;border:1px solid #9aa69e;background:var(--paper);margin:0;align-self:flex-start}
.sb-bubble::after{content:"";position:absolute;left:-6px;top:24px;width:10px;height:10px;background:inherit;border-left:1px solid #9aa69e;border-bottom:1px solid #9aa69e;transform:rotate(45deg)}
.sb-bubble-right{align-self:flex-end}
.sb-bubble-right::after{left:auto;right:-6px;transform:rotate(225deg)}
.sb-bubble-label{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-bottom:7px}
.sb-bubble-label span{font-weight:400;opacity:.55;letter-spacing:0}
.sb-avatar{display:none}
.sb-bubble p{font-size:clamp(14px,1.3vw,18px);line-height:1.5;letter-spacing:-.015em}
.sb-bubble mark{background:linear-gradient(transparent 60%,#f9c51880 60%);color:inherit}
.sb-bubble-ai{background:#fcf8e7;border-color:#aa9e6f}
.sb-bubble-ai::after{border-color:#aa9e6f}
.sb-memory{display:flex;align-items:center;justify-content:center;gap:18px;padding-block:14px;border-block:1px dashed #a9b2aa;width:94%;align-self:center}
.sb-memory-route{display:flex;align-items:center;gap:8px;flex-shrink:0;color:var(--navy)}
.sb-memory-route>.icon{width:22px;height:22px}
.sb-memory-route>.sb-route-arrow{width:28px;stroke:#8e7625}
.sb-memory-brain{width:44px;height:44px;display:grid;place-items:center;background:var(--yellow);border:1px solid #b49b3c;border-radius:50%}
.sb-memory-brain .icon{width:27px;height:27px}
.sb-memory-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
.sb-memory-copy small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-grey)}
.sb-memory-copy strong{font-size:15px;font-weight:500;line-height:1.3;letter-spacing:-.02em}
.sb-memory-copy>span{font-size:11px;color:var(--c-grey)}
.sb-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid #c6cdc6;padding-top:12px;flex-shrink:0;color:var(--c-grey);font-size:10px}
.sb-navigation{display:none;align-items:center;gap:18px}
.sb-steps{display:flex;gap:6px}
.sb-steps i{display:block;width:28px;height:3px;background:#bec7be}
[data-scene="marta"] .sb-steps i:first-child,[data-scene="piotr"] .sb-steps i:last-child{background:var(--navy)}
.sb-transcript{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Hold Piotr for roughly 2–3 extra scroll gestures before releasing the scene. */
.sb-story.is-enhanced{height:calc((100svh - var(--sb-nav))*2 + 600px)}
.is-enhanced .sb-pin{position:sticky;top:var(--sb-nav);height:calc(100svh - var(--sb-nav))}
.is-enhanced .sb-stage{height:100%;gap:20px}
.is-enhanced .sb-scenes{position:relative;flex:1;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(min-content,1fr);gap:0;overflow:clip}
.is-enhanced .sb-scene{grid-area:1/1;pointer-events:none}
/* The outgoing person leaves first; the new person enters from the same left edge. */
.is-enhanced .sb-person{visibility:hidden;opacity:0;transform:translateX(calc(-100% - 24px));transition:transform .4s cubic-bezier(.4,0,.6,1),opacity .12s linear .28s,visibility 0s linear .4s}
.is-enhanced .is-active .sb-person{visibility:visible;opacity:1;transform:translateX(0);transition:transform .45s cubic-bezier(.2,.7,.2,1) .4s,opacity .12s linear .4s,visibility 0s linear .4s}
.is-enhanced .sb-scene-header,.is-enhanced .sb-dialogue{visibility:hidden;opacity:0;transition:opacity .18s ease,visibility 0s linear .18s}
.is-enhanced .is-active .sb-scene-header,.is-enhanced .is-active .sb-dialogue{visibility:visible;opacity:1;transition:opacity .22s ease .4s,visibility 0s linear .4s}
/* The scene copies preserve layout; one shared robot stays above both layers. */
.is-enhanced .sb-scene .sb-robot{visibility:hidden}
.is-enhanced .sb-shared-robot{display:block;position:absolute;grid-area:auto;align-self:auto;z-index:2;visibility:visible;pointer-events:none}
.is-enhanced .sb-navigation{display:flex}
@media(max-width:1000px){
  .sb-stage{padding-block:22px;gap:18px}
  .sb-scene{grid-template-columns:110px minmax(0,1fr) 110px;column-gap:18px;row-gap:14px}
  .sb-bubble{padding:13px 15px;max-width:96%}.sb-bubble p{font-size:15px}
  .sb-actor figcaption small{font-size:9px}.sb-dialogue{gap:12px}
}
@media(max-width:650px){
  .sb-stage{padding-block:18px;gap:16px}
  .sb-heading{gap:12px}.sb-heading h2{font-size:24px;margin-top:6px}
  .sb-heading .eyebrow{font-size:9px}.sb-heading>a{font-size:10px}
  .sb-scene{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;gap:12px}
  .sb-scene-header{gap:8px;padding-bottom:9px;flex-wrap:wrap}
  .sb-scene-header h3{font-size:15px}.sb-scene-header p{font-size:10px}
  .sb-scene>.sb-actor,.is-enhanced .sb-shared-robot{display:none}
  /* Leave room inside the clipped scene for the rotated speech-bubble tails. */
  .sb-dialogue{grid-column:1;grid-row:2;gap:10px;align-self:center;padding-inline:10px}
  .sb-bubble{max-width:93%;padding:12px 14px}.sb-bubble p{font-size:14px;line-height:1.4}
  .sb-bubble::after{top:31px}
  .sb-bubble-label{font-size:10px;margin-bottom:10px;gap:9px}
  .sb-bubble-right .sb-bubble-label{justify-content:flex-end}
  /* Crop the existing full-body artwork to a head portrait without new assets. */
  .sb-bubble-label .sb-avatar{display:block;position:relative;width:48px;height:48px;flex:0 0 48px;overflow:hidden;border-radius:50%;background:#e1e5df;opacity:1}
  .sb-avatar img{position:absolute;max-width:none;height:auto;width:340%;left:-111%;top:-5%;user-select:none}
  .sb-avatar-piotr img{width:400%;left:-157%;top:-5%;transform:scaleX(-1)}
  .sb-avatar-robot img{width:300%;left:-119%;top:-12%}
  .sb-memory{gap:12px;padding-block:12px;justify-content:start}
  .sb-memory-route{gap:5px}.sb-memory-route>.icon{width:17px;height:17px}.sb-memory-route>.sb-route-arrow{width:20px}
  .sb-memory-brain{width:34px;height:34px}.sb-memory-brain .icon{width:23px;height:23px}
  .sb-memory-copy small{font-size:8px}.sb-memory-copy strong{font-size:13px}.sb-memory-copy>span{font-size:10px}
  .sb-bottom{font-size:8px;padding-top:9px;gap:10px}.sb-navigation{gap:8px}
  .sb-steps i{width:18px}.is-enhanced .sb-stage{gap:14px}
}
@media(max-height:760px){
  .sb-stage{padding-block:16px}.is-enhanced .sb-stage{gap:14px}
  .sb-heading h2{font-size:26px;margin-top:5px}
  .sb-scene{row-gap:12px}.sb-scene-header{padding-bottom:8px}
  .sb-bubble{padding:11px 14px}.sb-bubble p{font-size:14px;line-height:1.4}.sb-dialogue{gap:10px}
  .sb-memory{padding-block:12px}.sb-memory-copy{gap:3px}.sb-actor img{max-height:220px}
}
@media(max-width:650px) and (max-height:740px){
  .sb-stage{padding-block:12px}.is-enhanced .sb-stage{gap:10px}
  .sb-heading h2{font-size:21px}.sb-heading .eyebrow{font-size:8px}
  .sb-scene{row-gap:9px}.sb-scene-header h3{font-size:14px}.sb-scene-header p{display:none}
  .sb-bubble-label .sb-avatar{width:40px;height:40px;flex-basis:40px}
  .sb-bubble-label{margin-bottom:7px}
  .sb-bubble::after{top:25px}
  .sb-bubble{padding:10px 12px}.sb-bubble p{font-size:13px}.sb-dialogue{gap:9px}
  .sb-memory{padding-block:9px}.sb-memory-copy strong{font-size:12px}
  .sb-bottom>span{max-width:90px;line-height:1.3}
}
@media(prefers-reduced-motion:reduce){.sb-story *{transition:none!important;animation:none!important}}
@media print{
  .sb-story.is-enhanced{height:auto}.sb-pin{position:static!important;height:auto!important}
  .sb-stage{height:auto!important}.sb-scenes,.sb-bottom,.sb-heading>a{display:none!important}
  .sb-transcript{position:static;width:auto;height:auto;margin:0;clip-path:none;white-space:normal;overflow:visible;padding-left:20px}
  .sb-transcript li{margin-block:12px}
}