.up-portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:36px}
.up-project-card{display:block;border:1px solid #d8e2ef;border-radius:14px;background:#fff;overflow:hidden;color:#15253d;text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s}
.up-project-card:hover{transform:translateY(-4px);border-color:#315bff;box-shadow:0 12px 30px #15334d12}
.up-project-card:focus-visible,.up-project-dialog button:focus-visible,.up-project-dialog a:focus-visible{outline:3px solid #315bff;outline-offset:4px}
.up-project-cover{aspect-ratio:4/3;background:#f0f4fa;overflow:hidden}
.up-project-cover img{width:100%;height:100%;object-fit:cover;display:block}
.up-project-summary{padding:22px}
.up-project-summary h3{font-size:19px;line-height:1.35;margin:0 0 12px}
.up-project-category{font-size:12px;line-height:1.65;color:#63758d;margin:0}
.up-project-action{display:flex;justify-content:space-between;font-size:14px;font-weight:700;color:#315bff;margin-top:22px}
.up-project-dialog{border:0;border-radius:18px;padding:0;width:min(960px,calc(100% - 32px));max-height:90dvh;color:#15253d;background:#fff;box-shadow:0 24px 90px #0004;overscroll-behavior:contain;margin:auto}
.up-project-dialog::backdrop{background:#0c172cb3;backdrop-filter:blur(5px)}
.up-project-detail{padding:0 40px 40px}
.up-project-toolbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #e3e9f1;padding:18px 0;color:#63758d;font-size:13px}
.up-close{border:1px solid #d8e2ef;border-radius:50%;background:#fff;width:40px;height:40px;line-height:1;font-size:28px;color:#15253d;cursor:pointer}
.up-project-description{padding:28px 0}
.up-project-description h2{font-size:clamp(24px,3vw,34px);line-height:1.2;letter-spacing:-.04em;margin:0 0 24px;max-width:760px}
.up-project-description h3,.up-project-gallery h3{font-size:15px;line-height:1.5;margin:24px 0 10px;letter-spacing:0}
.up-project-description p{font-size:15px;line-height:1.8;color:#52637a;margin:0 0 16px;white-space:pre-line}
.up-skill-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.up-skill-list li{padding:7px 12px;border-radius:20px;background:#eef2f7;font-size:12px;line-height:1.5}
.up-gallery-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.up-gallery-top h3{margin:0}.up-gallery-top span{font-size:13px;color:#63758d}
.up-gallery-media{border:1px solid #e3e9f1;border-radius:10px;background:#f6f8fc;overflow:hidden;display:grid;place-items:center;min-height:220px}
.up-gallery-media a{display:block;width:100%}
.up-gallery-media img,.up-gallery-media video{display:block;width:100%;height:auto;max-height:620px;object-fit:contain}
.up-gallery-caption{display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin:12px 0;font-size:12px;color:#63758d}
.up-gallery-caption p{margin:0;overflow-wrap:anywhere}.up-gallery-caption a{color:#315bff;flex-shrink:0;text-underline-offset:3px}
.up-gallery-controls{display:flex;justify-content:space-between;margin:18px 0}
.up-gallery-controls button{background:#fff;border:1px solid #d8e2ef;border-radius:8px;padding:10px 14px;color:#15253d;font:inherit;font-size:13px;cursor:pointer}
.up-gallery-thumbnails{display:flex;gap:9px;overflow-x:auto;padding:5px 3px 12px}
.up-gallery-thumbnails button{padding:0;flex:0 0 84px;width:84px;height:68px;overflow:hidden;border:2px solid transparent;border-radius:6px;background:#eef2f7;cursor:pointer}
.up-gallery-thumbnails button[aria-pressed=true]{border-color:#315bff}
.up-gallery-thumbnails img{width:100%;height:100%;object-fit:cover}
.up-video-thumb{display:grid;place-content:center;font-size:17px;color:#315bff;height:100%;padding:4px}
.up-video-thumb small{font-size:8px;line-height:1.2;margin-top:4px}
@media(max-width:1000px){.up-portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.up-portfolio-grid{grid-template-columns:1fr;gap:22px}.up-project-detail{padding:0 18px 24px}.up-project-dialog{max-height:94dvh;width:calc(100% - 16px)}.up-gallery-caption{flex-direction:column;gap:6px}.up-project-description h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){.up-project-card{transition:none}}

/* Compact project details and mobile gallery controls. */
.up-project-dialog,.up-project-dialog *{box-sizing:border-box}
.up-project-dialog{overflow-x:hidden;overflow-y:auto}
.up-project-detail,.up-project-description,.up-project-gallery{min-width:0;max-width:100%}
.up-project-description h2,.up-project-summary h3,.up-project-description p{overflow-wrap:anywhere}
.up-gallery-top{justify-content:flex-end}
.up-gallery-caption{justify-content:flex-end}
.up-close{min-width:44px;min-height:44px;flex-shrink:0}
.up-gallery-controls button{min-height:44px;min-width:112px;touch-action:manipulation}
.up-gallery-thumbnails{max-width:100%;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.up-gallery-thumbnails button{scroll-snap-align:center;touch-action:manipulation}
.up-gallery-media{touch-action:pan-y pinch-zoom}
@media(max-width:620px){.up-project-dialog{max-height:calc(100dvh - 16px)}.up-project-detail{padding:0 16px max(20px,env(safe-area-inset-bottom))}.up-project-toolbar{padding:10px 0}.up-project-description{padding:20px 0 12px}.up-project-description h2{font-size:23px;margin-bottom:18px}.up-gallery-media{min-height:0}.up-gallery-media img,.up-gallery-media video{max-height:62dvh}.up-gallery-caption{align-items:flex-end}.up-gallery-thumbnails button{flex-basis:72px;width:72px;height:60px}.up-project-description p{font-size:14px;line-height:1.75}}