.works-section{position:relative;padding:70px var(--gutter) 110px;background:var(--paper);isolation:isolate}
.works-rule{width:86px;height:1px;background:rgba(41,45,40,.24);margin:0 auto 30px}
.works-heading{font:200 clamp(66px,8.5vw,132px)/1.08 Roboto,Arial,sans-serif;letter-spacing:-.025em;text-align:center;margin:0 0 34px}
.works-stage{position:relative;width:100%;height:500px;scroll-margin-top:110px}
.work-card{position:absolute;left:50%;top:50%;width:clamp(225px,22vw,290px);margin:0;z-index:var(--layer);transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--angle));opacity:var(--depth);filter:blur(var(--blur));animation:works-drift var(--duration) ease-in-out var(--delay) infinite;transform-origin:0 0;will-change:transform,translate}
@keyframes works-drift{0%,100%{translate:0 0}50%{translate:var(--drift-x) var(--drift-y)}}
.work-visual{position:relative;display:block;width:100%;aspect-ratio:4/3;padding:0;border:0;border-radius:0;overflow:hidden;background:#e4e6dc;box-shadow:0 12px 32px rgba(31,39,24,.08)}
.work-visual img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.work-card figcaption{display:none;margin:0;padding:12px 0 0;min-height:76px;text-align:left;color:var(--ink);line-height:1.5}
.work-title{display:block;font:400 12.5px/1.45 Roboto,Arial,sans-serif;letter-spacing:.015em;text-wrap:pretty}
.work-place{display:block;font:300 11px/1.5 Roboto,Arial,sans-serif;color:var(--muted);margin-top:5px;letter-spacing:.02em}
.works-open{position:absolute;inset:0;z-index:100;width:100%;height:100%;background:transparent;border:0;padding:0;cursor:pointer}
.works-open:focus-visible{outline:1px solid var(--line);outline-offset:8px}
.works-open[hidden]{display:none}
.works-stage.is-expanded{height:auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px 20px;align-items:start}
.is-expanded .work-card{position:relative;left:auto;top:auto;width:auto;transform:none;translate:none;opacity:1;filter:none;animation:none;will-change:auto}
.is-expanded .work-visual{box-shadow:none}
.is-expanded .work-card figcaption{display:block}
.is-expanded .work-visual img{transition:transform .8s cubic-bezier(.2,.65,.25,1)}
.is-expanded .work-visual:hover img{transform:scale(1.025)}
.works-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.works-preview{border:0;padding:0;background:var(--paper);color:var(--ink);width:min(900px,calc(100vw - 60px));max-height:calc(100dvh - 50px)}
.works-preview::backdrop{background:rgba(18,24,16,.68);backdrop-filter:blur(5px)}
.works-preview>img{width:100%;max-height:calc(100dvh - 190px);object-fit:contain;background:#171b14}
.works-preview .close-button{position:absolute;right:10px;top:10px;background:rgba(250,249,246,.92);z-index:1}
.works-preview-copy{padding:20px 28px 25px}
.works-preview h3{font:300 22px/1.4 Roboto,Arial,sans-serif;margin:0 0 6px}
.works-preview p{font:300 13px/1.6 Roboto,Arial,sans-serif;color:var(--muted);margin:0}
@media(max-width:1000px) and (min-width:651px){.works-stage.is-expanded{column-gap:15px}.work-title{font-size:12px}.work-place{font-size:10.5px}.work-card figcaption{min-height:80px}}
@media(max-width:650px){.works-section{padding:50px 22px 70px}.works-heading{font-size:66px;margin-bottom:25px}.works-stage{height:380px}.work-card{width:185px;transform:translate(-50%,-50%) translate(calc(var(--x)*.55),calc(var(--y)*.7)) rotate(var(--angle))}.works-stage.is-expanded{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}.is-expanded .work-card{transform:none}.works-preview{width:calc(100vw - 28px)}}
@media(prefers-reduced-motion:reduce){.work-card{animation:none}.is-expanded .work-visual img{transition:none}}

/* Four quiet, upright image layers with an adjacent architectural note. */
.works-intro{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:clamp(40px,7vw,110px);max-width:1120px;margin:0 auto}
.works-intro .works-stage{height:470px}
.works-stage:not(.is-expanded) .work-card{width:clamp(220px,23vw,300px);transform:translate(-50%,-50%) translate(var(--x),var(--y))}
.works-stage:not(.is-expanded) .work-card:nth-child(n+5){visibility:hidden;opacity:0;animation:none}
.works-stage:not(.is-expanded) .work-card:nth-child(1){--x:20px;--y:20px;--depth:1;--blur:0px}
.works-stage:not(.is-expanded) .work-card:nth-child(2){--x:-55px;--y:-65px;--depth:.7;--blur:0px}
.works-stage:not(.is-expanded) .work-card:nth-child(3){--x:65px;--y:-110px;--depth:.42;--blur:.3px}
.works-stage:not(.is-expanded) .work-card:nth-child(4){--x:-35px;--y:105px;--depth:.5;--blur:.2px}
.works-intro-copy{padding:20px 0 35px}
.works-eyebrow{font:300 10px/1.6 Roboto,Arial,sans-serif;letter-spacing:.15em;color:var(--muted);margin:0 0 24px}
.works-intro-copy h3{font:200 clamp(30px,3vw,43px)/1.3 Roboto,Arial,sans-serif;letter-spacing:-.02em;margin:0 0 25px}
.works-intro-copy>p:not(.works-eyebrow){font:300 14px/1.95 Roboto,Arial,sans-serif;color:#65695f;margin:0 0 18px}
.works-explore{border:0;border-bottom:1px solid #c6c8be;background:none;padding:8px 0;font:300 12px/1.5 Roboto,Arial,sans-serif;color:var(--ink);cursor:pointer;margin-top:12px}
.works-explore span{margin-left:24px}
.works-intro.is-open{display:block;max-width:none}
.works-intro.is-open .works-intro-copy{display:none}
.works-intro.is-open .works-stage{height:auto}
@media(max-width:850px){.works-intro{gap:28px}.works-intro-copy>p:not(.works-eyebrow){font-size:12px}.works-intro-copy br{display:none}.works-intro-copy h3 br{display:block}.works-stage:not(.is-expanded) .work-card{width:220px}}
@media(max-width:650px){.works-intro{grid-template-columns:1fr;gap:12px}.works-intro .works-stage{height:390px}.works-intro-copy{max-width:340px;margin:auto;padding:0 0 25px}.works-intro-copy>p:not(.works-eyebrow){font-size:14px}.works-intro.is-open .works-stage{height:auto}}


/* One principal image and two quiet satellites. */
.works-intro{grid-template-columns:1.3fr 1fr;gap:clamp(55px,7vw,110px);max-width:1190px}
.works-intro .works-stage:not(.is-expanded){height:520px}
.works-stage:not(.is-expanded) .work-card{visibility:hidden;opacity:0;animation:none;transform:none;left:0;top:0;filter:none}
.works-stage:not(.is-expanded) .work-card.collage-preview{visibility:visible;opacity:1;width:var(--collage-width);left:var(--collage-left);top:var(--collage-top);z-index:var(--collage-layer);animation:works-drift var(--duration) ease-in-out var(--delay) infinite;filter:none;transform:none;--drift-x:1px;--drift-y:-4px;transition:transform 1s cubic-bezier(.2,.65,.25,1)}
.works-stage:not(.is-expanded) .collage-preview .work-visual{aspect-ratio:var(--collage-ratio);box-shadow:none;background:var(--paper)}
.works-stage:not(.is-expanded) .collage-preview img{filter:saturate(.88) contrast(.97);object-fit:cover}
.collage-1{--collage-width:76%;--collage-left:10%;--collage-top:27%;--collage-ratio:3/2;--collage-layer:5}
.collage-2{--collage-width:32%;--collage-left:68%;--collage-top:8%;--collage-ratio:4/3;--collage-layer:6}
.collage-3{--collage-width:36%;--collage-left:0%;--collage-top:66%;--collage-ratio:3/2;--collage-layer:7}
.works-stage:not(.is-expanded) .collage-preview figcaption{display:block;position:absolute;top:100%;left:0;min-height:0;padding-top:8px;opacity:0;transition:opacity .8s ease;pointer-events:none}
.works-stage:not(.is-expanded) .collage-preview .work-title{font-size:10px;font-weight:300;letter-spacing:.04em;color:var(--muted)}
.works-stage:not(.is-expanded) .collage-preview .work-place{display:none}
.works-stage:not(.is-expanded):hover .collage-preview figcaption,.works-stage:not(.is-expanded):focus-within .collage-preview figcaption{opacity:1}
@media(hover:hover){.works-stage:not(.is-expanded):hover .collage-2{transform:translate(5px,-6px)}.works-stage:not(.is-expanded):hover .collage-3{transform:translate(-5px,6px)}}
.works-intro-copy{padding:20px 0;max-width:360px}
.works-intro-copy>p:not(.works-eyebrow){line-height:2;margin-bottom:21px;text-wrap:pretty}
@media(max-width:1000px) and (min-width:651px){.works-intro .works-stage:not(.is-expanded){height:440px}.works-intro-copy h3{font-size:32px}}
@media(max-width:650px){.works-intro{grid-template-columns:1fr;gap:12px}.works-intro .works-stage:not(.is-expanded){height:auto;aspect-ratio:1/1}.works-intro-copy{max-width:360px}}
@media(prefers-reduced-motion:reduce){.works-stage:not(.is-expanded) .work-card.collage-preview{animation:none;transition:none}.works-stage:not(.is-expanded) .collage-preview figcaption{transition:none}}

/* Five photographs, three sizes, one shared frame proportion. */
.collage-1{--collage-width:76%;--collage-left:12%;--collage-top:32%;--collage-ratio:3/2;--collage-layer:5}
.collage-2{--collage-width:32%;--collage-left:68%;--collage-top:14%;--collage-ratio:3/2;--collage-layer:6}
.collage-3{--collage-width:32%;--collage-left:0%;--collage-top:73%;--collage-ratio:3/2;--collage-layer:6}
.collage-4{--collage-width:24%;--collage-left:4%;--collage-top:20%;--collage-ratio:3/2;--collage-layer:7}
.collage-5{--collage-width:24%;--collage-left:74%;--collage-top:78%;--collage-ratio:3/2;--collage-layer:7}
.works-stage.is-transitioning{pointer-events:none}
.works-stage.is-transitioning .collage-preview figcaption{opacity:0!important}
.works-collapse-wrap{text-align:center;margin-top:42px}
.works-collapse-wrap[hidden]{display:none}
.works-collapse{font:300 12px/1.5 Roboto,Arial,sans-serif;letter-spacing:.04em;border:0;border-bottom:1px solid #c6c8be;background:none;padding:8px 0;color:var(--muted);cursor:pointer}
.works-collapse span{margin-left:28px}
.works-collapse:focus-visible{outline:1px solid var(--ink);outline-offset:8px}