/* Warm Depth is the base; Ink adds a supporting plane beneath the artwork. */
.composition{isolation:isolate;padding-bottom:80px}
.composition::before{content:'';position:absolute;z-index:0;inset:72px 32px 0;background:var(--ah-ink);border-radius:var(--ah-radius-media);pointer-events:none}
.main-photo{z-index:1}
.work-note{margin-bottom:-32px}
.art-caption{position:relative;z-index:1;grid-column:7/-1;grid-row:2;margin:40px 64px -56px 0;max-width:36ch;color:var(--ah-bone);font-size:14px}
.depth-intro{padding-bottom:80px}
.method-portrait{overflow:visible;isolation:isolate}
.method-portrait::before{content:'';position:absolute;z-index:-1;inset:24px -16px -24px 24px;background:var(--ah-ink);border-radius:var(--ah-radius-media)}
.method-portrait img{border-radius:var(--ah-radius-media)}
.method-portrait figcaption{bottom:-8px;left:24px;right:-8px;box-shadow:var(--depth-shadow)}
.review-end .pick-row{margin-top:20px}
@media(max-width:1050px){
.art-caption{margin-right:48px;grid-column:7/-1}
}
@media(max-width:760px){
.variants{grid-template-columns:repeat(3,1fr)}
.composition{padding-bottom:32px}
.composition::before{inset:56px 8px 0 24px}
.work-note{grid-column:1/7;margin-bottom:-32px}
.art-caption{grid-column:2/-1;grid-row:2;margin:64px 32px 0 24px;max-width:38ch;justify-self:end}
.method-portrait::before{inset:16px -8px -16px 16px}
.method-portrait figcaption{left:12px;right:-4px;bottom:-8px}
}
@media(max-width:480px){
.composition{padding-bottom:24px}
.composition::before{inset:48px 0 0 12px}
.work-note{margin-bottom:0}
.art-caption{margin:24px 24px 0 36px;max-width:none}
.method-portrait{margin-right:8px}
.variants a{font-size:13px}
}


/* Scroll position controls the complete sequence in either direction. */
.workflow-choices{--choice-travel-x:-24px;--choice-travel-y:16px}
.workflow-choices [data-workflow]{--choice-start:.06;--choice-open:clamp(0,calc((var(--sc-p,0) - var(--choice-start)) * 3.2),1)}
.workflow-choices [data-workflow]:nth-child(2){--choice-start:.12}
.workflow-choices [data-workflow]:nth-child(3){--choice-start:.18}
.motion-ready .workflow-choices [data-workflow]{opacity:calc(.65 + var(--choice-open) * .35);transform:translate3d(calc((1 - var(--choice-open)) * var(--choice-travel-x)),calc((1 - var(--choice-open)) * var(--choice-travel-y)),0);transition:none}
.example-motion-stage{min-width:0}
.example-pane{--work-open:clamp(0,calc((var(--sc-p,0) - .06) * 2.6),1)}
.motion-ready .example-pane{transform:translate3d(calc((1 - var(--work-open)) * 20px),calc((1 - var(--work-open)) * 64px),0) scale(calc(.94 + var(--work-open) * .06));transform-origin:50% 75%}
.motion-ready .workflow-choices [data-workflow]:focus-visible{opacity:1!important;transform:none!important}
.motion-off .workflow-choices [data-workflow],.motion-off .example-pane{opacity:1!important;transform:none!important;transition:none!important}
@media(max-width:760px){
.workflow-choices{--choice-travel-x:0px}
.motion-ready .example-pane{transform:translate3d(0,calc((1 - var(--work-open)) * 40px),0) scale(calc(.98 + var(--work-open) * .02))}
}
@media(prefers-reduced-motion:reduce){
.motion-ready .workflow-choices [data-workflow],.motion-ready .example-pane{opacity:1!important;transform:none!important;transition:none!important}
}