.work-thumb { overflow: hidden; padding: 12px; background: linear-gradient(145deg, #dfe9eb, #9dabb4 72%, #c2c8c8); min-height: 260px; display: grid; place-items: center; }
.work-card:nth-child(3n+2) .work-thumb { background: linear-gradient(145deg, #dbe8e2, #8ea7aa 70%, #d7d8cc); }
.work-card:nth-child(3n+3) .work-thumb { background: linear-gradient(145deg, #c6ced9, #617484 70%, #d4cbc1); }
.photo-browser { width: 100%; height: 100%; min-height: 236px; background: #f8f8f4; border-radius: 9px; overflow: hidden; box-shadow: 0 12px 26px rgba(18,29,39,.27); transform: perspective(800px) rotateY(-3deg) rotateX(2deg); transition: transform .55s cubic-bezier(.19,1,.22,1), box-shadow .55s ease; }
.work-card:hover .photo-browser, .work-card:focus-within .photo-browser { transform: perspective(800px) rotateY(0) rotateX(0) scale(1.025); box-shadow: 0 20px 35px rgba(18,29,39,.36); }
.photo-browser-chrome { height: 25px; display: flex; align-items: center; gap: 16px; padding: 0 10px; background: #f4f2ef; border-bottom: 1px solid #deded9; color: #75828a; font: 9px Arial,sans-serif; }
.browser-lights { display: flex; gap: 4px; }
.browser-lights i { width: 5px; height: 5px; border-radius: 50%; background: #e5a9a0; }
.browser-lights i:nth-child(2) { background:#e6c68a; }
.browser-lights i:nth-child(3) { background:#9dcbb3; }
.browser-address { background:#fff; padding:3px 16px; border-radius:4px; flex:1; max-width:185px; text-align:center; }
.photo-browser-page { height: 211px; position: relative; isolation:isolate; overflow:hidden; background:#e5e8e7; }
.photo-browser-page > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .7s ease; z-index:-2; }
.work-card:hover .photo-browser-page > img { transform:scale(1.065); }
.photo-browser-page::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(11,20,25,.82),rgba(11,20,25,.44) 55%,transparent); z-index:-1; }
.photo-site-header { height:39px; padding:0 14px; display:flex; justify-content:space-between; align-items:center; background:rgba(252,250,244,.94); color:#18242c; font:9px Arial,sans-serif; letter-spacing:.08em; }
.photo-site-header strong { font:700 15px Georgia,serif; letter-spacing:.03em; }
.photo-site-header span { font-size:0; flex:none; width:15px; height:10px; border-top:2px solid currentColor; border-bottom:2px solid currentColor; position:relative; opacity:.55; }
.photo-site-header span::after { content:''; position:absolute; left:0; right:0; top:3px; border-top:2px solid currentColor; }
.photo-site-caption { position:absolute; left:19px; right:16px; bottom:20px; color:#fff; display:flex; flex-direction:column; align-items:flex-start; gap:7px; }
.photo-site-caption small { font:700 9px Arial,sans-serif; letter-spacing:.21em; text-transform:uppercase; }
.photo-site-caption > strong { max-width:250px; font: 600 clamp(20px,2.4vw,30px)/1.05 Georgia,serif; text-wrap:balance; text-shadow:0 2px 8px #15202a80; }
.photo-site-button { padding:6px 9px; border:1px solid #ffffffa3; background:#ffffff27; border-radius:2px; font:600 8px Arial,sans-serif; letter-spacing:.04em; }
@media (max-width:680px) { .work-thumb { min-height:245px; } .photo-browser { min-height:220px; } .photo-browser-page { height:195px; } }
@media (prefers-reduced-motion:reduce) { .photo-browser,.photo-browser-page > img { transition:none; } }