/* The portrait reference is preserved as one proportional drawing, not a masonry grid. */
.portfolio-mosaic{background:#0c0c0b;color:#e9e5dd;position:relative;overflow:clip;padding:85px 0 75px}
.mosaic-artboard{position:relative;width:min(100%,660px);aspect-ratio:660/1160;margin-inline:auto;container-type:inline-size}
.mosaic-canvas{display:block;width:100%;height:100%;overflow:visible}
.mosaic-intro{position:absolute;z-index:2;left:8.18%;top:0;pointer-events:none}
.mosaic-rule{display:block;width:6.6cqw;height:1px;background:#ddd8ce;margin-bottom:4.2cqw}
.mosaic-intro h2{font-size:7.9cqw;font-weight:400;line-height:1.02;letter-spacing:-.035em;color:inherit;max-width:none;margin:0}
.mosaic-intro p{margin-top:4.2cqw;font-size:1.65cqw;font-weight:500;letter-spacing:.14em;white-space:nowrap;color:#e2ded5}
.mosaic-intro p span{margin-inline:2.4cqw;color:#c8c2b6}
.mosaic-photo-tone{fill:#0c0c0b;opacity:.12;pointer-events:none}
.mosaic-seam{fill:none;stroke:#d9ccbb;stroke-opacity:.68;stroke-width:.7;stroke-linejoin:round;pointer-events:none}
.mosaic-project{outline:none;cursor:pointer}
.mosaic-project:hover .mosaic-seam,.mosaic-project:focus-visible .mosaic-seam{stroke:#fff;stroke-width:2;stroke-opacity:1}
.mosaic-project:hover .mosaic-photo-tone,.mosaic-project:focus-visible .mosaic-photo-tone{opacity:0}
.mosaic-project:focus-visible .mosaic-photo-tone{fill:#e3cea0;opacity:.15}
.mosaic-explore{position:absolute;left:22%;top:90%;width:57.3%;height:5%;min-height:44px;border:1px solid #ddd5c5;display:flex;align-items:center;justify-content:center;gap:4cqw;color:inherit;background:#0c0c0b;font-size:2.2cqw;letter-spacing:.21em;text-transform:uppercase}
.mosaic-explore .icon{width:4.8cqw;height:4.8cqw;transform:rotate(45deg)}
.mosaic-explore:hover{background:#e9e5dd;color:#0c0c0b}
.mosaic-explore:focus-visible{outline:2px solid #fff;outline-offset:6px}
.mosaic-signature{position:absolute;bottom:0;left:16.8%;right:16.8%;display:flex;align-items:center;justify-content:space-between;gap:5cqw;font-size:1.8cqw;letter-spacing:.32em;color:#d4cec4;white-space:nowrap}
.mosaic-signature span{height:1px;flex:1;background:#82796d}
@media(min-width:1100px){.portfolio-mosaic{padding-block:110px 90px}}
@media(max-width:660px){.portfolio-mosaic{padding-block:60px 75px}.mosaic-explore{font-size:max(10px,2.2cqw)}.mosaic-intro p{font-size:max(7.2px,1.65cqw)}.mosaic-intro p span{margin-inline:1.7cqw}.mosaic-signature{bottom:-20px;font-size:max(8px,1.8cqw)}}
@media(prefers-reduced-motion:reduce){.mosaic-piece{transform:none!important;opacity:1!important}}
:root[data-motion=off] .mosaic-piece{transform:none!important;opacity:1!important}