/* A loose visual rhythm with a consistent image-left, text-right reading order. */
.clean-work .page-intro{max-width:none;display:block;padding-bottom:72px}
.clean-work .project-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(24px,3.3vw,60px);align-items:center;margin:0 0 clamp(28px,3vw,48px);padding-top:0;border-top:0}
.clean-work .work-project-copy{grid-column:9/13;grid-row:1;min-width:0;padding-block:32px}
.clean-work .project-previews{grid-column:1/8;grid-row:1;display:block;min-width:0;width:90%;padding-top:24px}
.clean-work .project-row:nth-of-type(3n+2) .project-previews{margin-left:10%;padding-top:0}
.clean-work .project-row:nth-of-type(3n) .project-previews{margin-left:4%;padding-top:48px}
.clean-work .project-row:nth-of-type(3n+2) .work-project-copy{align-self:start;padding-top:56px}
.clean-work .work-project-period{margin:0 0 18px;color:var(--muted);font-size:13px;line-height:1.4}
.clean-work .project-heading{display:block;width:fit-content;max-width:100%;margin-bottom:24px}
.clean-work .project-heading h2{font-size:clamp(32px,3.7vw,58px);line-height:1.05;letter-spacing:-.035em;text-wrap:balance}
.clean-work .project-heading__arrow{display:inline-flex;vertical-align:middle;width:28px;height:28px;margin:0;white-space:nowrap}
.clean-work .project-heading__arrow svg{width:28px;height:28px}
.clean-work .project-heading__arrow svg path{stroke-width:4}
.clean-work .work-project-hero{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:clamp(18px,1.6vw,24px);line-height:1.45;letter-spacing:-.015em;margin:0;max-width:30ch;text-wrap:pretty}
.clean-work .project-preview,.clean-work .project-preview:only-child{display:block;max-width:none;margin:0;padding:0;min-width:0;background:transparent;overflow:visible;transform:rotate(-.8deg)}
.clean-work .project-row:nth-of-type(3n+2) .project-preview{transform:rotate(.9deg)}
.clean-work .project-row:nth-of-type(3n) .project-preview{transform:rotate(-.4deg)}
.clean-work .project-preview img{display:block;width:100%;height:auto;max-height:640px;object-fit:contain;object-position:left center}
.clean-work .project-preview.treatment-photo img{aspect-ratio:4/3;object-fit:contain}
.clean-work .project-preview a{display:block}
.clean-work .work-references{margin:0 0 80px}
/* Fill the desktop grid while giving descriptions a wider reading measure. */
@media(min-width:1024px){
 .clean-work .project-previews{width:100%}
 .clean-work .work-project-copy{grid-column:8/13;padding-left:24px}
 .clean-work .work-project-hero{max-width:40ch}
 .clean-work .project-row:nth-of-type(3n+2) .project-previews{margin-left:4%}
 .clean-work .project-row:nth-of-type(3n) .project-previews{margin-left:2%}
}
/* Keep the desktop composition intact; give tablet text half the row. */
@media(max-width:1023px){
 .clean-work .project-row{column-gap:clamp(24px,3vw,32px);margin-bottom:24px;align-items:start}
 .clean-work .project-previews{grid-column:1/7;padding-top:0}
 .clean-work .work-project-copy{grid-column:7/13;padding-block:0}
 .clean-work .project-row:nth-of-type(3n+2) .work-project-copy{padding-top:0}
 .clean-work .project-row:nth-of-type(3n) .project-previews{padding-top:24px}
 .clean-work .project-heading h2{font-size:clamp(28px,3.5vw,36px);line-height:1.12}
 .clean-work .work-project-hero{font-size:18px;max-width:38ch}
 .clean-work .project-preview img{max-height:520px}
 .clean-work .work-references{margin-bottom:56px}
}
@media(max-width:767px){
 .clean-work .page-intro{display:block;padding-bottom:42px}
 .clean-work .project-row{grid-template-columns:minmax(0,1fr);gap:24px;margin-bottom:clamp(20px,4vw,28px)}
 .clean-work .project-previews,.clean-work .project-row:nth-of-type(3n+2) .project-previews,.clean-work .project-row:nth-of-type(3n) .project-previews{grid-column:1;grid-row:1;padding-top:0;width:100%;margin-left:0}
 .clean-work .project-row:nth-of-type(3n+2) .project-previews{margin-left:0}
 .clean-work .work-project-copy,.clean-work .project-row:nth-of-type(3n+2) .work-project-copy{grid-column:1;grid-row:2;padding:0}
 .clean-work .project-heading{margin-bottom:18px}
 .clean-work .project-heading h2{font-size:clamp(28px,8.2vw,38px);line-height:1.12}
 .clean-work .work-project-period{margin-bottom:12px}
 .clean-work .work-project-hero{font-size:clamp(18px,4.6vw,20px);line-height:1.5;max-width:44ch}
 .clean-work .project-preview img{max-height:none}
 .clean-work .work-references{margin-bottom:40px}
}
@media(prefers-reduced-motion:reduce){.clean-work .project-heading__arrow{transition:none;transform:none!important}}
@media print{.clean-work .project-row{display:block;break-inside:avoid}.clean-work .project-previews{width:70%!important;margin:0!important;padding:0!important}.clean-work .project-preview{transform:none!important}.clean-work .work-project-copy{padding-block:24px!important}}
/* Keep the arrow in the title's text flow, including enhanced link labels. */

/* Keep one media frame: video when available, otherwise fading photographs. */
.clean-work .project-preview{position:relative}
.clean-work .project-preview .work-project-hit{position:absolute;inset:0;z-index:1}
.clean-work .project-preview .video-toggle{z-index:2}
.work-photo-sequence{position:relative}
.work-photo-sequence .work-photo:not(:first-child){display:none}
.work-photo-sequence.is-ready .work-photo{display:block;opacity:0;transition:opacity 900ms ease-in-out}
.work-photo-sequence.is-ready .work-photo:not(:first-child){position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.work-photo-sequence.is-ready .work-photo.is-current{opacity:1}
@media(prefers-reduced-motion:reduce){.work-photo-sequence.is-ready .work-photo{transition:none}}

/* Equal media canvases; offsets and the inner tilt retain the diagonal rhythm. */
.clean-work .project-preview{aspect-ratio:16/9}
.clean-work .project-preview .video-media,
.clean-work .project-preview .video-picture,
.clean-work .project-preview .work-photo-sequence{width:100%;height:100%;aspect-ratio:16/9}
.clean-work .project-preview img,
.clean-work .project-preview.treatment-photo img,
.clean-work .project-preview video,
.clean-work .project-preview .work-photo-sequence.is-ready .work-photo{width:100%;height:100%;max-height:none;aspect-ratio:16/9;object-fit:cover;object-position:center}

/* The row stays still; its media and copy reverse smoothly at viewport boundaries. */
html.arrival-boot:not(.motion-reduced) .clean-work .project-row:not(.work-arrival-ready) :is(.project-previews,.work-project-copy){opacity:0;transition:none}
@media(prefers-reduced-motion:no-preference){
 .clean-work{overflow-x:clip}
 .clean-work .project-previews{transition:transform 1100ms cubic-bezier(.22,1,.36,1),opacity 1000ms ease}
 .clean-work .work-project-copy{transition:opacity 1000ms ease}
 .clean-work .work-arrival-ready:not(.work-arrived) .project-previews{transform:translateX(clamp(-260px,-18vw,-100px));opacity:0}
 .clean-work .work-arrival-ready:not(.work-arrived) .work-project-copy{opacity:0}
 .clean-work .work-arrival-ready.work-arrived .work-project-copy{transition-delay:180ms}
 .clean-work .work-arrival-ready:not(.work-arrived){pointer-events:none}
 .clean-work .project-row:focus-within{pointer-events:auto}
 .clean-work .project-row:focus-within .project-previews{transform:none;opacity:1;transition:none}
 .clean-work .project-row:focus-within .work-project-copy{opacity:1;transition:none}
}
/* The CV prefooter uses the same vertical entrance at every viewport width. */
@media(prefers-reduced-motion:no-preference){
 .clean-work .editorial-about.work-about-ready{transition:opacity 650ms var(--ease)}
 .clean-work .editorial-about.work-about-ready > *{transition:translate 650ms var(--ease)}
 .clean-work .editorial-about.work-about-ready:not(.work-about-arrived){opacity:0;pointer-events:none}
 .clean-work .editorial-about.work-about-ready:not(.work-about-arrived) > *{translate:0 28px}
 .clean-work .editorial-about:focus-within{opacity:1;pointer-events:auto;transition:none}
 .clean-work .editorial-about:focus-within > *{translate:none;transition:none}
}
/* One-column cards move together, entering left and leaving right. */
@media(max-width:767px) and (prefers-reduced-motion:no-preference){
 .clean-work .work-arrival-ready .work-project-copy{transition:transform 1100ms cubic-bezier(.22,1,.36,1),opacity 1000ms ease}
 .clean-work .work-arrival-ready.work-arrived .work-project-copy{transition-delay:0ms}
 .clean-work .work-arrival-ready:not(.work-arrived) :is(.project-previews,.work-project-copy){transform:translateX(clamp(-260px,-18vw,-100px));opacity:0}
 .clean-work .work-arrival-ready.arrival-exiting:not(.work-arrived) :is(.project-previews,.work-project-copy){transform:translateX(clamp(100px,18vw,260px))}
 .clean-work .project-row:focus-within :is(.project-previews,.work-project-copy){transform:none;opacity:1;transition:none}
}
/* Retain the decoded frame while paused instead of flashing back to the poster. */
.clean-work .video-media.has-video-frame>video{opacity:1}
@media print{
 .clean-work .project-row .project-previews,.clean-work .project-row .work-project-copy{transform:none!important;opacity:1!important;transition:none!important;animation:none!important}
}