/* Real, self-hosted page captures. Frames contain no hidden interactive website. */
.work-grid--screens { gap:28px; }
.work-grid--screens .project { display:block; min-width:0; border:0; padding:0; }
.project-browser { overflow:hidden; border:1px solid #d8ddda; border-radius:13px; background:#fff; box-shadow:0 9px 25px #1737270a; transition:box-shadow .2s,border-color .2s; }
.project-browser-bar { display:flex; align-items:center; gap:10px; height:31px; padding:0 11px; background:#fafbf9; border-bottom:1px solid #e1e5e2; color:#6b756e; }
.project-browser-dots { display:flex; flex:none; gap:4px; }
.project-browser-dots i { width:5px; height:5px; border:1px solid #b9c3bc; border-radius:50%; }
.project-browser-address { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; font-size:8px; letter-spacing:.015em; }
.project-screen { aspect-ratio:4/3; overflow:hidden; background:#202620; }
.project-screen img { display:block; width:100%; height:100%; object-fit:contain; }
.work-grid--screens .project-name { margin-top:18px; gap:12px; align-items:center; }
.work-grid--screens .project-name h3 { font-size:18px; line-height:1.3; }
.work-grid--screens .project-name .project-visit { display:inline-flex; align-items:center; justify-content:flex-end; gap:5px; flex-shrink:0; color:var(--green,#1e8149); font-size:10px; line-height:1.4; }
.work-grid--screens .project>p { margin-top:5px; font-size:12px; }
.work-grid--screens .project:hover .project-browser,
.work-grid--screens .project:focus-visible .project-browser { border-color:#8caf96; box-shadow:0 11px 30px #17372718; }
.work-grid--screens .project:focus-visible { outline:2px solid var(--green,#1e8149); outline-offset:7px; border-radius:13px; }
@media(max-width:1000px) and (min-width:761px) {
  .work-grid--screens { gap:18px; }
  .work-grid--screens .project-name { flex-wrap:wrap; gap:7px; }
  .work-grid--screens .project-name .project-visit { font-size:10px; }
}
@media(max-width:760px) {
  .work-grid--screens { grid-template-columns:1fr; gap:31px; max-width:580px; margin-inline:auto; }
  .project-browser { border-radius:12px; }
  .project-browser-bar { height:32px; }
  .project-browser-address { font-size:9px; }
  .work-grid--screens .project-name { margin-top:15px; }
  .work-grid--screens .project-name h3 { font-size:19px; }
  .work-grid--screens .project-name .project-visit { font-size:11px; }
  .work-grid--screens .project>p { font-size:12px; margin-top:5px; }
}
@media(prefers-reduced-motion:reduce) { .project-browser { transition:none; } }