.portfolio{background:#080808;color:#eeeee9;margin:110px calc(-1 * var(--pad)) 0;padding:85px var(--pad) 70px;overflow:hidden}
.portfolio-heading{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:10%;max-width:1300px;margin:auto}.portfolio-kicker{font-size:11px!important;text-transform:uppercase;letter-spacing:.14em;line-height:1.6;margin-bottom:24px!important}.portfolio h2{font-size:clamp(48px,7.7vw,112px);font-weight:400;letter-spacing:-.065em;line-height:.97}.portfolio-intro{max-width:390px;justify-self:end;font-size:15px;line-height:1.75}.portfolio-hint{margin-top:26px!important;font-size:12px;color:#aaa}
.portfolio-field{position:relative;display:block;height:680px;max-width:1400px;margin:20px auto 30px;padding:0}.portfolio-fragment{display:block;position:absolute;left:var(--x);top:var(--y);width:calc(clamp(110px,12vw,165px) * var(--size));padding:14px 10px;min-width:0;transform:translate(-50%,-50%) rotate(var(--angle));z-index:1}.fragment-float{display:block;animation:portfolio-drift var(--duration) ease-in-out var(--delay) infinite alternate;animation-play-state:paused}.portfolio.is-visible:not(.is-still):not(.global-paused) .fragment-float{animation-play-state:running}.portfolio.is-selecting .fragment-float,.portfolio-field:focus-within .fragment-float{animation-play-state:paused!important}.portfolio-fragment img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1);opacity:.85;transition:opacity .3s,filter .3s}.portfolio-fragment:nth-child(3n) img{aspect-ratio:1}.portfolio-fragment:nth-child(5n) img{aspect-ratio:4/3}.portfolio-fragment:hover,.portfolio-fragment:focus-visible{z-index:3}.portfolio-fragment:hover img,.portfolio-fragment:focus-visible img{opacity:1}.fragment-caption{display:flex;gap:8px;align-items:start;font-size:9px;text-align:left;line-height:1.4;margin-top:8px;color:#bdbdb9}.fragment-caption>span:nth-child(2){flex:1;max-height:2.8em;overflow:hidden}.fragment-caption>b{font-size:13px;font-weight:400}.portfolio-endnote{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #373737;padding:18px 0 40px;font-size:12px;color:#aaa;gap:20px}.portfolio-endnote button{font-size:12px;text-decoration:underline;text-underline-offset:5px}.portfolio-people{display:grid;grid-template-columns:1fr 1fr;gap:12%;padding-top:30px}.portfolio-people h3{font-size:28px;font-weight:400;letter-spacing:-.03em;margin-bottom:16px}.portfolio-people p{font-size:14px;line-height:1.8;max-width:450px;color:#aaa}.portfolio-people a{display:inline-flex;gap:24px;padding:20px 0 6px;border-bottom:1px solid #777;font-size:12px}
@keyframes portfolio-drift{0%{transform:translate3d(calc(var(--dx) * -1),calc(var(--dy) * -.6),0) rotate(-3deg)}50%{transform:translate3d(calc(var(--dx) * .4),calc(var(--dy) * .35),0) rotate(1deg)}100%{transform:translate3d(var(--dx),var(--dy),0) rotate(3deg)}}
.portfolio-dialog{background:#0b0b0b;color:#eeeee9;border:1px solid #444;padding:0;width:min(1180px,94vw);max-width:none;max-height:92dvh;overflow:auto;overscroll-behavior:contain}.portfolio-dialog::backdrop{background:rgba(0,0,0,.88)}body.portfolio-open{overflow:hidden}.portfolio-close{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:20px;background:#0b0b0b;width:100%;height:56px;padding:0 24px;font-size:25px;border-bottom:1px solid #333}.portfolio-close span{font-size:12px}.project-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr);gap:38px;padding:28px}.project-main{display:block;width:100%;height:62vh;object-fit:contain;filter:grayscale(1)}.project-photo-nav{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:11px;color:#bbb}.project-photo-nav button{width:50px;font-size:24px}.project-copy{align-self:center;padding-right:10px}.project-copy h2{font-size:clamp(26px,3.6vw,48px);font-weight:400;letter-spacing:-.04em;line-height:1.08;margin-bottom:24px}.project-copy>p:not(.portfolio-kicker){font-size:14px;line-height:1.75;margin-bottom:22px}.project-copy .project-credit{font-size:11px!important;line-height:1.7!important;color:#aaa}.project-copy>a{font-size:12px;display:inline-flex;gap:20px;padding:10px 0;border-bottom:1px solid #777}.project-contact-sheet{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}.project-contact-sheet button{padding:0;width:55px;min-height:55px;border:1px solid transparent;opacity:.5}.project-contact-sheet button[aria-pressed=true]{border-color:#eee;opacity:1}.project-contact-sheet img{width:100%;height:55px;object-fit:cover;filter:grayscale(1)}

@media(max-width:900px){.portfolio-field{height:640px}.project-layout{gap:24px;grid-template-columns:minmax(0,1fr) minmax(240px,1fr)}.project-main{height:52vh}}
@media(max-width:600px){.portfolio{margin-top:65px;padding-top:50px;padding-bottom:45px}.portfolio-heading{grid-template-columns:1fr;gap:28px}.portfolio h2{font-size:62px}.portfolio-intro{justify-self:start;font-size:14px}.portfolio-hint{margin-top:12px!important}.portfolio-field{height:1080px;margin:10px -5px 20px}.portfolio-fragment{left:var(--mx);top:var(--my);width:calc(122px * var(--size));padding:12px 9px}.fragment-float{--dx:10px;--dy:16px}.fragment-caption{font-size:8px;gap:4px}.portfolio-endnote{align-items:start;font-size:10px;padding-bottom:20px}.portfolio-endnote button{font-size:11px;min-width:110px;margin-top:-12px}.portfolio-people{grid-template-columns:1fr;gap:40px}.portfolio-people h3{font-size:25px}.portfolio-dialog{width:calc(100vw - 20px);max-height:94dvh}.project-layout{grid-template-columns:1fr;padding:16px;gap:25px}.project-main{height:40dvh;min-height:200px}.project-copy{padding:0 5px 20px}.project-copy h2{font-size:32px}.project-copy .portfolio-kicker{margin-bottom:12px!important}.project-close{height:48px}.project-contact-sheet{margin-top:24px}}
@media(prefers-reduced-motion:reduce){.fragment-float{animation:none!important}.portfolio-fragment img{transition:none}}
.portfolio-dialog[open] .project-layout{animation:portfolio-reveal .22s ease-out}
@keyframes portfolio-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.portfolio-dialog[open] .project-layout{animation:none}}
/* A weightless field: actual trajectories replace the earlier CSS oscillation. */
.portfolio-fragment{left:0;top:0;will-change:transform}
.fragment-float{animation:none!important;transform:none}
.portfolio-visitor{position:absolute;left:0;top:0;width:40px;height:32px;pointer-events:none;opacity:0;z-index:0;will-change:transform}
.portfolio-visitor svg{width:100%;height:100%;overflow:visible;fill:none;stroke:#eeeee9;stroke-width:1.25;stroke-linejoin:round}
.visitor-flame{stroke-width:.75;opacity:.55}
.portfolio-shot{position:absolute;left:0;top:0;width:3px;height:3px;background:#eeeee9;pointer-events:none;border-radius:50%;z-index:0}
@media(max-width:600px){.portfolio-fragment{left:0;top:0}}
@media(prefers-reduced-motion:reduce){.portfolio-visitor,.portfolio-shot{display:none}}