/* Compact stages retain their animated drawing and readable type. Only the
   copy scrolls when it needs more room than the current viewport can supply. */
html.compact-journey{--art-height:clamp(180px,32svh,260px)}
.thread-ready.compact-journey .opening{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:100svh;min-height:0;padding:var(--header-room,104px) 0 54px;gap:22px;align-content:stretch}
.thread-ready.compact-journey .opening-copy,.thread-ready.compact-journey .scene-copy{min-height:0;min-width:0;max-height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#72909d transparent;padding-right:10px;scroll-padding-block:18px}
.thread-ready.compact-journey [data-thread-scroll]:focus-visible{outline:1px solid #72909d;outline-offset:5px}
.thread-ready.compact-journey .opening-art{width:100%;height:100%;min-height:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.thread-ready.compact-journey .opening-art>p{margin:0;font-size:1rem;line-height:1.3}
.thread-ready.compact-journey .source-mark{flex-shrink:0;max-width:100%;margin:0 auto}
.thread-ready.compact-journey .opening h1{font-size:clamp(2rem,4.1vw,3.8rem);line-height:1.08;margin:16px 0 20px}
.thread-ready.compact-journey .opening-copy>p:not(.eyebrow){font-size:1rem;line-height:1.55}
.thread-ready.compact-journey .opening-bottom{bottom:15px;padding-top:12px}
.thread-ready.compact-journey .scene-sticky{height:100svh;padding:24px 0 60px}
.thread-ready.compact-journey .scene-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:5%;height:100%;min-height:0;align-items:center;align-content:stretch}
.thread-ready.compact-journey .scene-copy{width:100%;max-width:none;grid-column:2;grid-row:1;text-align:left;align-self:center}
.thread-ready.compact-journey .scene-copy h2{font-size:clamp(2rem,3.3vw,3.25rem);margin:14px 0 20px;line-height:1.1}
.thread-ready.compact-journey .scene-copy h2 em{white-space:normal;display:inline}
.thread-ready.compact-journey .scene-copy>p:not(.eyebrow){font-size:1rem;line-height:1.5;max-width:none}
.thread-ready.compact-journey .shape-slot{grid-column:1;grid-row:1;width:100%;height:100%;min-height:0;margin:0}
.thread-ready.compact-journey .art-right .scene-copy{grid-column:1}.thread-ready.compact-journey .art-right .shape-slot{grid-column:2}
.thread-ready.compact-journey .scene-caption{bottom:16px;gap:16px}
.thread-ready.compact-journey .scene-caption>span:first-child{font-size:.9375rem;line-height:1.25}
.thread-ready.compact-journey .pin-note{bottom:0;font-size:.875rem;line-height:1.35;padding-inline:12px}
.thread-ready.compact-journey .scene-detail{display:block}
.thread-ready.compact-journey .small-example{margin-top:20px}
.thread-ready.compact-journey .small-example p,.thread-ready.compact-journey .small-example .example-feedback,.thread-ready.compact-journey .small-example .example-response,.thread-ready.compact-journey #ranking-list li{font-size:.875rem!important;line-height:1.5}
.thread-ready.compact-journey .motion-scene.access-scene{height:calc(100svh - var(--footer-room,100px));min-height:0}
.thread-ready.compact-journey .access-scene .scene-sticky{height:100%;padding:20px 0 58px}
.thread-ready.compact-journey .access-layout{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto;gap:18px 6%;height:100%;align-items:center}
.thread-ready.compact-journey .access-copy{grid-column:1;grid-row:1 / 3}
.thread-ready.compact-journey .access-scene .access-arrow{grid-column:2;grid-row:1;min-height:0;width:100%;height:100%;align-self:stretch}
.thread-ready.compact-journey .access-action{grid-column:2;grid-row:2;max-width:100%}
.thread-ready.compact-journey .access-action .sample-note{margin-top:14px;font-size:.75rem!important}
.thread-ready.compact-journey .access-scene .scene-caption{bottom:14px}
@media(max-width:760px){
 .thread-ready.compact-journey .wrap{width:calc(100% - 64px)}
 .thread-ready.compact-journey .site-header{width:calc(100% - 28px);height:auto;min-height:82px}
}
@media(max-width:760px) and (orientation:portrait){
 .thread-ready.compact-journey .opening{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) var(--art-height);gap:15px}
 .thread-ready.compact-journey .opening h1{font-size:clamp(2rem,7.8vw,3rem)}
 .thread-ready.compact-journey .opening-art{grid-row:2}
 .thread-ready.compact-journey .opening-copy{align-self:stretch}
 .thread-ready.compact-journey .opening-bottom{width:100%;font-size:.75rem;gap:8px}
 .thread-ready.compact-journey .scene-sticky{padding:18px 0 60px}
 .thread-ready.compact-journey .scene-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) var(--art-height);gap:16px}
 .thread-ready.compact-journey .scene-copy,.thread-ready.compact-journey .art-right .scene-copy{grid-column:1;grid-row:1;width:100%;align-self:stretch}
 .thread-ready.compact-journey .shape-slot,.thread-ready.compact-journey .art-right .shape-slot{grid-column:1;grid-row:2;height:100%;width:100%}
 .thread-ready.compact-journey .scene-copy h2{font-size:clamp(2rem,7.2vw,3rem)}
 .thread-ready.compact-journey .scene-copy h2 br{display:none}
 .thread-ready.compact-journey .scene-caption{width:calc(100% - 64px)}
 .thread-ready.compact-journey .scene-caption>span:first-child{font-size:.8125rem;max-width:80%}
 .thread-ready.compact-journey .access-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) var(--art-height) auto;gap:12px}
 .thread-ready.compact-journey .access-copy{grid-row:1;grid-column:1}
 .thread-ready.compact-journey .access-scene .access-arrow{grid-row:2;grid-column:1;height:100%}
 .thread-ready.compact-journey .access-action{grid-row:3;grid-column:1;width:100%}
 .thread-ready.compact-journey .access-action .sample-note{margin-top:12px;font-size:.75rem!important;line-height:1.4}
 .thread-ready.compact-journey .access-action .button{padding:13px 18px;font-size:.875rem}
}
@media(max-height:440px){
 .compact-journey .site-footer{min-height:60px;padding-block:14px;font-size:.75rem;gap:12px}
 .compact-journey .site-footer .brand{font-size:1.4rem}
 .thread-ready.compact-journey .chapter-links{gap:1px;max-height:calc(100svh - 16px);overflow:auto}
 .thread-ready.compact-journey .chapter-links a{min-height:32px}
 .thread-ready.compact-journey .access-action .sample-note{max-height:3em;overflow:auto}
}
@media(max-width:330px){.site-header{flex-wrap:wrap;justify-content:center;gap:0}.site-header .brand img{display:none}.site-header nav{gap:12px}}
@media(prefers-reduced-motion:reduce){
 /* The canvas and direct manipulation still work. Chapter changes use an
    immediate camera step, without the large cinematic pan or overlay. */
 html.thread-ready #continuous-thread,html.thread-ready #thread-hit-area,html.thread-ready #pin-controls{display:block!important}
 html.thread-ready .source-mark svg{opacity:0!important}
 html.thread-ready .source-static-lines{display:none!important}
 html.thread-ready .static-shape{visibility:hidden!important}
 html.thread-ready #keyboard-grip:not([hidden]){display:block!important}
 html.thread-ready .opening-track{height:235svh!important}
}

.thread-ready.compact-journey .access-copy .sample-note{font-size:.75rem!important;line-height:1.45;margin-top:18px}