/* Layout studies: preserve the approved UI tokens and the C process fill. */
:root{--depth-shadow:0 18px 48px -24px rgb(11 13 14 / .34)}
.study-intro{padding-block:32px 24px}.study-intro h1{font-size:clamp(2rem,3vw,2.75rem)}
.preview-label{margin-bottom:0}
.depth-intro{padding-block:48px 104px}
.intro-top{display:grid;grid-template-columns:1.2fr 1fr;align-items:end;gap:72px;margin-bottom:48px}
.intro-top h2{font-size:var(--ah-type-h2);line-height:1.055;letter-spacing:-.05em;max-width:13ch}
.intro-top h2 span{color:var(--ah-link)}
.intro-top p{font-size:var(--ah-type-body);color:var(--ah-muted);max-width:43ch;margin-bottom:20px}
.composition{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end;position:relative;--land:clamp(0,calc((var(--sc-p,0) - .16) * 2.8),1)}
.main-photo{grid-column:3/-1;grid-row:1;margin:0;position:relative;aspect-ratio:2.1;overflow:hidden;border-radius:24px;background:var(--ah-surface)}
.photo-inner{position:absolute;inset:-36px}
.photo-inner img{width:100%;height:100%;display:block;object-fit:cover;object-position:48% 48%}
.work-note{position:relative;z-index:2;grid-column:1/6;grid-row:1;padding:32px;background:var(--ah-surface);border:1px solid var(--ah-border);border-radius:12px;box-shadow:var(--depth-shadow);margin-bottom:-40px;transform-origin:30% 80%}
.note-label{font-size:14px;color:var(--ah-link);margin-bottom:12px}
.work-note h3{font-size:var(--ah-type-h3);line-height:1.15;letter-spacing:-.035em;margin-bottom:24px}
.handoff-line{display:flex;align-items:center;gap:12px;font-size:14px}
.handoff-line span:first-child{color:var(--ah-muted)}
.handoff-line svg{width:32px;height:24px;stroke:var(--ah-link);stroke-width:1.75;fill:none;flex:none}
.handoff-line strong{font-weight:650}
.art-caption{margin-top:64px;margin-left:auto;max-width:38ch;font-size:14px;color:var(--ah-muted)}
.motion-ready .work-note{transform:translate3d(calc((1 - var(--land)) * -36px),calc((1 - var(--land)) * 36px),0) rotate(calc((1 - var(--land)) * -3deg))}
.motion-ready .main-photo{clip-path:inset(0 calc((1 - var(--land)) * 8%) 0 0 round 24px)}
.examples{padding-block:88px;background:var(--ah-surface)}
.section-top{grid-template-columns:1fr 1fr;gap:72px;margin-bottom:48px}
.section-top h2{max-width:17ch}
.work-area{grid-template-columns:.9fr 1.1fr;align-items:center}
.workflow-choices button{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.035em;padding-block:24px}
.example-pane{background:var(--ah-ink);color:var(--ah-bone);border:0;padding:40px;min-height:340px}
.example-label{color:var(--ah-emerald)}
.example-pane h3{font-size:var(--ah-type-h3)}
.example-pane p{color:var(--ah-bone)}
.example-pane .example-label{color:var(--ah-emerald)}
.human-check{color:var(--ah-bone);border-color:#424b46}
.human-check svg{stroke:var(--ah-emerald)}
.example-pane .ah-link{color:var(--ah-emerald)}
.method{padding-block:104px}
.method-layout{grid-template-columns:.85fr 1.15fr;gap:88px}
.method-title h2{max-width:15ch}
.method-portrait{position:relative;margin:36px 0 0;max-width:380px;aspect-ratio:1.15;border-radius:24px;overflow:hidden}
.method-portrait img{width:100%;height:100%;object-fit:cover;object-position:73% 52%;display:block}
.method-portrait figcaption{position:absolute;bottom:16px;left:16px;right:16px;padding:12px 16px;background:var(--ah-surface);color:var(--ah-ink);font-size:14px;border-radius:8px}
.method-row{padding:28px 0}
.method-row:first-child{padding-top:0}
.method-row h3{font-size:28px}
.method-row p{font-size:18px}
.method-rows{align-self:start}
.close-section{background:var(--ah-bone);color:var(--ah-ink);padding:0}
.close-content{border-top:1px solid var(--ah-control-border);padding-block:48px 64px}
.close-content h2{max-width:18ch;font-size:var(--ah-type-h2)}
.review-end{background:var(--ah-surface);max-width:none;padding-block:40px}
.review-end-inner{max-width:1280px;margin-inline:auto}
.reviewer-line{display:inline-flex;align-items:center;gap:12px;margin-bottom:16px;color:var(--ah-muted);font-size:14px}
.reviewer-line::before{content:'';width:28px;height:1px;background:var(--ah-muted)}
/* The contrast version changes spatial relationships, not the identity. */
[data-direction=contrast] .depth-intro{padding-top:48px;padding-bottom:104px}
[data-direction=contrast] .intro-block{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));position:relative;align-items:center;padding-block:64px 40px;background:var(--ah-ink);color:var(--ah-bone);border-radius:24px}
[data-direction=contrast] .intro-top{grid-column:1/7;grid-row:1;display:block;margin:0;padding:0 56px 72px}
[data-direction=contrast] .intro-top h2{font-size:var(--ah-type-h2);margin-bottom:24px}
[data-direction=contrast] .intro-top h2 span{color:var(--ah-emerald)}
[data-direction=contrast] .intro-top p{color:var(--ah-bone)}
[data-direction=contrast] .intro-top .inline-link{color:var(--ah-emerald)}
[data-direction=contrast] .intro-top :focus-visible{outline-color:var(--ah-emerald)}
[data-direction=contrast] .composition{grid-column:7/-1;grid-row:1;grid-template-columns:repeat(6,minmax(0,1fr));align-self:stretch;margin-right:-24px;margin-top:-24px;margin-bottom:32px}
[data-direction=contrast] .main-photo{grid-column:1/-1;aspect-ratio:auto;min-height:420px;grid-row:1;overflow:hidden}
[data-direction=contrast] .photo-inner img{object-position:52% 50%}
[data-direction=contrast] .work-note{grid-column:1/-1;grid-row:1;align-self:end;margin:0 40px -64px -36px;padding:28px 32px;color:var(--ah-ink)}
[data-direction=contrast] .work-note h3{font-size:24px;margin-bottom:16px}
[data-direction=contrast] .art-caption{margin:20px 0 0 56px;max-width:42ch;grid-column:1/7;color:var(--ah-bone)}
[data-direction=contrast].motion-ready .work-note{transform:translate3d(0,calc((1 - var(--land)) * 48px),0)}
[data-direction=contrast].motion-ready .main-photo{clip-path:inset(0 0 calc((1 - var(--land)) * 10%) 0 round 24px)}
[data-direction=contrast] .examples{background:var(--ah-bone);padding-top:16px}
[data-direction=contrast] .work-area{grid-template-columns:1fr 1.2fr;align-items:start;gap:64px}
[data-direction=contrast] .example-pane{background:var(--ah-surface);color:var(--ah-ink);border:1px solid var(--ah-border);border-radius:12px}
[data-direction=contrast] .example-pane p{color:var(--ah-muted)}
[data-direction=contrast] .example-pane .example-label{color:var(--ah-link)}
[data-direction=contrast] .human-check{color:var(--ah-ink);border-color:var(--ah-border)}
[data-direction=contrast] .human-check svg{stroke:var(--ah-link)}
[data-direction=contrast] .method{max-width:none;background:var(--ah-surface);padding-inline:max(var(--ah-gutter),calc((100% - 1280px)/2))}
[data-direction=contrast] .method-layout{grid-template-columns:1fr 1fr}
[data-direction=contrast] .method-portrait{max-width:420px;aspect-ratio:1.8}
[data-direction=contrast] .method-portrait img{object-position:50% 60%}
[data-direction=contrast] .method-portrait figcaption{position:static;background:transparent;padding:16px 0}
[data-direction=contrast] .method-portrait{overflow:visible}
[data-direction=contrast] .method-portrait img{aspect-ratio:1.8;border-radius:24px}
[data-direction=contrast] .method-rows{background:var(--ah-bone);padding:32px;border-radius:12px}
[data-direction=contrast] .method-row:last-child{border-bottom:0}
.motion-off .work-note,.motion-off .main-photo{transform:none!important;clip-path:none!important}
.motion-off .photo-inner{transform:none!important}
@media(max-width:1050px){
.intro-top,.section-top{gap:36px}
.method-layout{gap:48px}
[data-direction=contrast] .intro-top{padding-inline:32px}
[data-direction=contrast] .art-caption{margin-left:32px}
[data-direction=contrast] .work-note{margin-left:-20px;margin-right:24px}
}
@media(max-width:760px){
.variants{grid-template-columns:repeat(2,1fr)}
.intro-top{grid-template-columns:1fr;gap:24px;margin-bottom:32px}
.intro-top h2{font-size:clamp(2.75rem,8vw,3.5rem);max-width:15ch}
.intro-top p{max-width:55ch}
.composition{grid-template-columns:repeat(8,minmax(0,1fr))}
.main-photo{grid-column:2/-1;aspect-ratio:1.6}
.work-note{grid-column:1/6;padding:24px;margin-bottom:-48px}
.work-note h3{font-size:24px;margin-bottom:16px}
.handoff-line{flex-wrap:wrap;gap:8px}
.art-caption{margin-top:72px}
.depth-intro{padding-bottom:64px}
.section-top,.work-area,.method-layout{grid-template-columns:1fr;gap:28px}
.examples{padding-block:56px}
.workflow-choices{flex-direction:column;gap:0}
.workflow-choices button{font-size:24px;padding-block:20px}
.workflow-choices button::after{display:block}
.example-pane{padding:28px;min-height:280px}
.method{padding-block:64px}
.method-title{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.method-title h2{font-size:36px;grid-column:1}
.method-title>p{grid-column:1}
.method-portrait{grid-column:2;grid-row:1/3;margin:0;aspect-ratio:.85}
.method-row p{font-size:16px}
[data-direction=contrast] .intro-block{display:block;padding:36px 24px 32px}
[data-direction=contrast] .intro-top{padding:0;margin-bottom:32px}
[data-direction=contrast] .composition{margin:0 -36px 0 24px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr))}
[data-direction=contrast] .main-photo{grid-column:1/-1;min-height:300px;aspect-ratio:1.8}
[data-direction=contrast] .work-note{grid-column:1/8;margin:0 0 -48px -36px;padding:24px}
[data-direction=contrast] .art-caption{margin:72px 0 0}
[data-direction=contrast] .depth-intro{padding-bottom:56px}
[data-direction=contrast] .work-area,[data-direction=contrast] .method-layout{grid-template-columns:1fr;gap:32px}
[data-direction=contrast] .method-portrait{aspect-ratio:1}
[data-direction=contrast] .method-portrait img{aspect-ratio:1}
}
@media(max-width:480px){
.motion-ready .work-note,[data-direction=contrast].motion-ready .work-note{transform:translate3d(0,calc((1 - var(--land)) * 12px),0)}
.study-intro h1{font-size:32px}
.composition{display:block}
.main-photo{aspect-ratio:1.3;margin-left:20px}
.work-note{width:calc(100% - 24px);margin-top:-48px;margin-bottom:0;padding:24px;transform:none}
.art-caption{margin-top:24px;max-width:none}
.intro-top h2{font-size:44px}
.method-title{display:block}
.method-portrait{margin-top:24px;max-width:none;aspect-ratio:1.8}
.method-portrait figcaption{left:12px;right:12px;bottom:12px}
[data-direction=contrast] .intro-block{padding-inline:20px}
[data-direction=contrast] .intro-top h2{font-size:40px}
[data-direction=contrast] .composition{margin:0 -28px 0 0;display:block}
[data-direction=contrast] .main-photo{margin:0 0 0 12px;min-height:260px;aspect-ratio:1.1}
[data-direction=contrast] .work-note{margin:-40px 28px 0 -8px;width:auto}
[data-direction=contrast] .art-caption{margin-top:24px}
[data-direction=contrast] .method-rows{padding:24px}
[data-direction=contrast] .method-portrait{aspect-ratio:auto}
[data-direction=contrast] .method-portrait img{aspect-ratio:1.8}
}
@media(prefers-reduced-motion:reduce){.work-note,.main-photo{transform:none!important;clip-path:none!important}}