/* Original photography, composed around the story in each section. */
.image-viewport{position:relative;min-width:0;overflow:hidden;background:var(--kor-blue-surface);aspect-ratio:3/2;isolation:isolate}
.image-viewport>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:translateY(var(--image-pan,0px)) scale(var(--image-zoom,1.001));transition:transform 1.05s var(--ease);clip-path:inset(0);border-radius:0}
[data-image-reveal].is-image-visible>img{transition:clip-path .95s var(--ease),transform 1.05s var(--ease)}
.image-caption{font-size:12px;line-height:1.65;color:var(--muted);letter-spacing:0;text-align:left}
.photo-composition{position:relative;min-width:0;isolation:isolate}

/* The hero combines the people behind the research and its working documents. */
.home-hero{overflow:clip}
.hero-grid{gap:70px;padding-block:74px 76px}
.hero-image{position:relative;min-width:0;margin:0 0 0 30px;border:0;overflow:visible;isolation:isolate}
.hero-image:before{content:'';position:absolute;inset:-18px -18px 82px 24px;border:1px solid #0083A955;z-index:-1;pointer-events:none}
.hero-detail{position:absolute;z-index:4;width:34%;left:-38px;bottom:66px;padding:7px;background:var(--egyptian-blue);box-shadow:0 12px 26px #03203D33;pointer-events:none}
.hero-detail .image-viewport{aspect-ratio:1.4}
.hero-detail img{object-position:50% 63%}
.hero-image figcaption{position:relative;z-index:5;padding:18px 0 0;border-top:1px solid #0083A955;margin-top:18px}
.hero-image figcaption:has([data-gallery-pause]){padding:18px 0 0}

/* Research choices have a staggered rhythm and captions that meet the image. */
.method-grid{display:grid;grid-template-columns:1.08fr 1fr 1fr;gap:30px;align-items:start}
.method-card{display:block;min-width:0}
.method-card:nth-child(2){margin-top:50px}
.method-card:nth-child(3){margin-top:18px}
.method-card .image-viewport{aspect-ratio:1.38}
.method-card:nth-child(2) .image-viewport{aspect-ratio:1.5}
.method-card:nth-child(3) .image-viewport{aspect-ratio:1.3}
.method-card:nth-child(1) img{object-position:47% 50%}
.method-card:nth-child(2) img{object-position:45% 50%}
.method-card:nth-child(3) img{object-position:37% 50%}
.method-card .card-title{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;margin:-23px 0 0 20px;padding:17px 0 4px 18px}
.method-card .card-title h3{font-size:21px}
.method-card>p{font-size:15px;line-height:1.7;color:var(--muted);margin:8px 0 0 38px;max-width:330px}
.method-card:is(:hover,:focus-visible) h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}

/* A full workshop view is paired with the detail of the work itself. */
.why-grid,.about-story{align-items:center}
.photo-story{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
.photo-story>.image-viewport{grid-column:1/-1;grid-row:1;aspect-ratio:3/2}
.photo-story>.image-viewport>img{object-position:50% 41%}
.photo-detail{position:relative;grid-column:8/-1;grid-row:2;z-index:2;padding:8px 0 0 8px;margin-top:-44px;background:var(--paper)}
.photo-detail .image-viewport{aspect-ratio:1.45}
.photo-detail img{object-position:50% 65%}
.photo-story>.image-caption{grid-column:1/8;grid-row:2;padding:17px 26px 0 0;max-width:280px}
.photo-story--about .photo-detail{grid-column:7/-1;background:#fff;margin-top:-34px}
.photo-story--about>.image-caption{grid-column:1/7}
.photo-story--about .photo-detail img{object-position:42% 58%}

/* The research report reads as a document study, rather than another portrait. */
.expertise-note{grid-template-columns:1fr 1fr;gap:90px}
.expertise-note>.photo-document{order:2}
.expertise-note>div{order:1}
.photo-document{padding:0 0 24px 24px}
.photo-document:before{content:'';position:absolute;inset:22px 24px 0 0;background:var(--kor-blue-surface);z-index:-1}
.photo-document .image-viewport{aspect-ratio:3/2}
.photo-document .image-caption{padding-top:17px}

/* Methods alternate across the page, keeping the complete scenes in view. */
.method-detail-grid{grid-template-columns:1fr 1fr;gap:84px}
.photo-method{width:100%;max-width:560px}
.photo-method:before{content:'';position:absolute;inset:22px -18px -18px 24px;background:var(--kor-blue-surface);z-index:-1}
.photo-method .image-viewport{aspect-ratio:560/373}
.photo-method--in-person img{object-position:48% 50%}
.photo-method--online:before{inset:-18px 24px 22px -18px;background:#D1E9EF}
.photo-method--online img{object-position:45% 50%}
.photo-method--ethnographic:before{inset:24px -18px -18px 24px;border:1px solid var(--line);background:transparent}
.photo-method--ethnographic img{object-position:40% 50%}
.method-detail--tint .photo-method{order:2}
.method-detail--tint .method-detail-copy{order:1}

/* Contact copy belongs to the worktable scene instead of sitting in another row. */
.contact-image{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end;gap:0;padding-bottom:108px;padding-top:5px}
.photo-contact{grid-column:1/10;grid-row:1}
.photo-contact .image-viewport{aspect-ratio:3/2}
.contact-image-copy{position:relative;z-index:2;grid-column:8/-1;grid-row:1;background:#fff;padding:35px 0 0 35px;margin-bottom:-30px}
.contact-image-copy .eyebrow{margin-bottom:18px}
.contact-image-copy h2{font-size:30px}

/* Reveal the photograph itself; labels, links and layout remain stable. */
@media(prefers-reduced-motion:no-preference){
 [data-image-reveal='rise'].is-image-ready:not(.is-image-visible)>img{clip-path:inset(100% 0 0 0)}
 [data-image-reveal='side'].is-image-ready:not(.is-image-visible)>img{clip-path:inset(0 100% 0 0)}
 [data-image-reveal='split'].is-image-ready:not(.is-image-visible)>img{clip-path:inset(0 50% 0 50%)}
 [data-image-reveal].is-image-ready:not(.is-image-visible)>img{--image-zoom:1.12}
 .motion-ready .hero-gallery{animation:kor-gallery-open 1.1s .1s var(--ease) both}
 @keyframes kor-gallery-open{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
}
@media(min-width:901px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .image-viewport>img[data-image-pan]{--image-zoom:1.085}
 .method-card:is(:hover,:focus-visible) .image-viewport>img{--image-zoom:1.115}
}
@media(max-width:1100px){
 .hero-grid{gap:48px;padding-block:62px 64px}
 .hero-image{margin-left:22px}
 .hero-detail{left:-28px;bottom:66px;width:35%}
 .method-grid{gap:24px}
 .method-card .card-title{margin-left:14px;padding-left:14px;gap:9px}
 .method-card .card-title h3{font-size:20px}
 .method-card>p{margin-left:28px;font-size:14px}
 .expertise-note,.method-detail-grid{gap:56px}
 .contact-image-copy{padding:26px 0 0 28px}
 .contact-image-copy h2{font-size:28px}
}
@media(max-width:900px){
 .hero-grid{gap:30px;padding-block:48px 52px}
 .hero-image{margin-left:12px}
 .hero-image:before{inset:-12px -12px 76px 18px}
 .hero-image .hero-gallery{aspect-ratio:1.35}
 .hero-detail{width:37%;left:-20px;bottom:68px;padding:5px}
 .hero-image figcaption,.hero-image figcaption:has([data-gallery-pause]){margin-top:14px;padding-top:14px;gap:10px}
 .method-grid{gap:20px}
 .method-card:nth-child(2){margin-top:35px}
 .method-card:nth-child(3){margin-top:12px}
 .method-card .card-title{margin-top:-15px;margin-left:10px;padding:13px 0 3px 10px}
 .method-card .card-title h3{font-size:19px}
 .method-card>p{margin-left:20px;font-size:13px}
 .photo-story>.image-caption{font-size:11px;padding-right:15px}
 .photo-detail{margin-top:-28px;padding:6px 0 0 6px}
 .photo-story--about .photo-detail{margin-top:-24px}
 .expertise-note,.method-detail-grid{gap:40px}
 .contact-image-copy{grid-column:7/-1;padding:24px 0 0 24px;margin-bottom:-48px}
 .contact-image-copy h2{font-size:26px}
 .photo-contact{align-self:start}
}
@media(max-width:767px){
 .hero-grid{gap:40px;padding-block:40px 34px}
 .hero-image{margin:10px 10px 0 14px}
 .hero-image .hero-gallery{aspect-ratio:3/2}
 .hero-image:before{inset:-12px -10px 75px 15px}
 .hero-detail{width:31%;left:-20px;bottom:64px;padding:5px}
 .hero-image figcaption,.hero-image figcaption:has([data-gallery-pause]){margin-top:14px;padding:13px 0 0;gap:12px}
 .hero-image [data-gallery-pause]{font-size:9px;padding:6px 8px}
 .hero-image figcaption>span{font-size:8px}
 .method-grid{grid-template-columns:1fr;gap:32px}
 .method-card,.method-card:nth-child(2),.method-card:nth-child(3){margin-top:0}
 .method-card .image-viewport,.method-card:nth-child(2) .image-viewport,.method-card:nth-child(3) .image-viewport{aspect-ratio:3/2}
 .method-card .card-title{margin:-23px 0 0 18px;padding:17px 0 3px 18px}
 .method-card .card-title h3{font-size:21px}
 .method-card>p{margin:8px 0 0 36px;font-size:14px;max-width:400px}
 .why-grid,.about-story{gap:32px}
 .photo-story>.image-viewport{aspect-ratio:3/2}
 .photo-detail{margin-top:-30px}
 .photo-story>.image-caption{font-size:11px;line-height:1.6;padding-top:14px}
 .photo-story--about .photo-detail{margin-top:-22px}
 .expertise-note,.method-detail-grid{grid-template-columns:1fr;gap:33px}
 .expertise-note>.photo-document{order:0}
 .expertise-note>div{order:0}
 .photo-document{padding:0 0 18px 18px}
 .photo-document:before{inset:18px 18px 0 0}
 .photo-document .image-caption{padding-top:14px;font-size:11px}
 .method-detail--tint .photo-method,.method-detail--tint .method-detail-copy{order:0}
 .photo-method{margin-bottom:7px;width:calc(100% - 14px)}
 .photo-method:before{inset:17px -14px -14px 18px}
 .photo-method--online{margin-left:14px}
 .photo-method--online:before{inset:-14px 18px 17px -14px}
 .photo-method--ethnographic:before{inset:18px -14px -14px 18px}
 .contact-image{display:block;padding-top:0;padding-bottom:58px}
 .contact-image-copy{width:calc(100% - 22px);margin:-23px 0 0 22px;padding:25px 0 0 22px}
 .contact-image-copy h2{font-size:28px}
 .contact-image-copy h2+p{font-size:15px}
 .image-viewport>img{--image-zoom:1.001}
}
@media(max-width:370px){
 .hero-image{margin-inline:12px 8px}
 .hero-detail{left:-17px;bottom:63px;width:31%}
 .hero-image figcaption,.hero-image figcaption:has([data-gallery-pause]){gap:8px}
 .hero-image figcaption>span{font-size:7px;letter-spacing:.055em}
 .hero-image [data-gallery-pause]{font-size:8px;padding:6px}
 .method-card .card-title h3{font-size:20px}
 .method-card>p{font-size:14px;margin-left:28px}
 .method-card .card-title{margin-left:14px;padding-left:14px}
 .photo-story>.image-caption{font-size:10px;padding-right:11px}
 .contact-image-copy{padding-left:18px}
}
@media(prefers-reduced-motion:reduce){
 .image-viewport>img{transform:none!important;clip-path:none!important;transition:none!important}
 .hero-gallery{animation:none!important}
}