.portfolio-heading{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);gap:clamp(32px,7vw,110px);align-items:end;margin-bottom:42px}.portfolio-heading h2{margin-bottom:0}.portfolio-heading>p{font-size:16px;line-height:1.6;color:var(--muted);max-width:520px}.portfolio-heading>p strong{display:block;color:#1687b8;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}.portfolio-wall{columns:3 330px;column-gap:16px}.portfolio-piece{display:inline-block;width:100%;margin:0 0 16px;padding:0;border:1px solid var(--line);background:white;color:var(--ink);text-align:left;font:inherit;cursor:zoom-in;break-inside:avoid;vertical-align:top;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.portfolio-piece figure{margin:0}.portfolio-piece img{display:block;width:100%;height:auto;background:#dfe8eb}.portfolio-piece figcaption{display:grid;gap:4px;padding:17px 18px 19px;border-top:4px solid var(--blue)}.portfolio-piece figcaption span{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#137da9}.portfolio-piece figcaption strong{font-size:20px;line-height:1.2}.portfolio-piece figcaption small{font-size:12px;line-height:1.45;color:var(--muted)}.portfolio-piece:hover{transform:translateY(-3px);border-color:#1687b8;box-shadow:0 14px 30px #17252a1a}.portfolio-piece:focus-visible{outline:4px solid var(--blue);outline-offset:3px}.gallery-note{padding:16px;background:var(--ice);border-left:4px solid var(--blue)}
.design-lightbox{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#081318;color:white}.design-lightbox::backdrop{background:#081318}.lightbox-shell{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto}.lightbox-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px clamp(16px,3vw,40px);border-bottom:1px solid #ffffff30;background:#0d1b21}.lightbox-bar>div{display:grid;gap:3px}.lightbox-bar span,.lightbox-caption small{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--blue2)}.lightbox-bar strong{font-size:16px}.lightbox-close,.lightbox-nav{display:grid;place-items:center;width:48px;height:48px;border:1px solid #ffffff55;background:#172a31;color:white;font:inherit;cursor:pointer}.lightbox-close span{font-size:32px;line-height:1;color:white}.lightbox-close:hover,.lightbox-close:focus-visible,.lightbox-nav:hover,.lightbox-nav:focus-visible{background:var(--blue);border-color:var(--blue);color:#061319;outline:3px solid white;outline-offset:2px}.lightbox-stage{min-height:0;display:grid;grid-template-columns:64px minmax(0,1fr) 64px;gap:clamp(10px,2vw,28px);align-items:center;padding:24px clamp(16px,3vw,42px)}.lightbox-stage img{justify-self:center;max-width:100%;max-height:calc(100dvh - 190px);width:auto;height:auto;object-fit:contain;box-shadow:0 14px 54px #0008}.lightbox-caption{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px 28px;align-items:baseline;padding:16px clamp(16px,3vw,40px) 19px;border-top:1px solid #ffffff30;background:#0d1b21}.lightbox-caption strong{font-size:17px}.lightbox-caption span{font-size:13px;line-height:1.5;color:#c9d6da}.lightbox-caption small{white-space:nowrap}.design-lightbox[open]{animation:lightbox-in .18s ease-out}@keyframes lightbox-in{from{opacity:0}to{opacity:1}}
@media(max-width:760px){.portfolio-heading{grid-template-columns:1fr}.portfolio-wall{columns:2 230px}.lightbox-stage{grid-template-columns:48px minmax(0,1fr) 48px;padding:16px 10px;gap:7px}.lightbox-nav{width:44px;height:44px}.lightbox-caption{grid-template-columns:1fr auto}.lightbox-caption span{grid-column:1/-1;grid-row:2}.lightbox-stage img{max-height:calc(100dvh - 225px)}}
@media(max-width:500px){.portfolio-wall{columns:1}.portfolio-piece{margin-bottom:14px}.portfolio-piece figcaption{padding:14px 15px 16px}.lightbox-bar{padding:10px 12px}.lightbox-bar>div span{display:none}.lightbox-stage{grid-template-columns:44px minmax(0,1fr) 44px}.lightbox-caption{padding:12px 14px 15px}.lightbox-caption span{font-size:12px}.lightbox-stage img{max-height:calc(100dvh - 215px)}}
@media(prefers-reduced-motion:reduce){.portfolio-piece{transition:none}.portfolio-piece:hover{transform:none}.design-lightbox[open]{animation:none}}
@media(forced-colors:active){.portfolio-piece figcaption{border-top-color:CanvasText}.portfolio-piece:focus-visible,.lightbox-close:focus-visible,.lightbox-nav:focus-visible{outline:3px solid Highlight}}