/* Keep the work index visually consistent while each case keeps its own palette. */
#work .grid{align-items:start}
#work .project{display:flex;flex-direction:column;min-width:0}
#work .project .art{height:340px;border-radius:22px!important}
#work .project .project-title{min-height:26px}
#work .project .description{min-height:42px}
#work .project .tags{min-height:25px}

/* The Figma export gives the campus case a real visual anchor in the index. */
#work .web .work-snapshot{width:100%;height:100%;display:block;object-fit:cover;object-position:top center;filter:saturate(.94)}
#work .web .work-snapshot-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(245,248,255,.02),rgba(15,40,76,.22))}
#work .case-caption{position:absolute;left:24px;bottom:21px;font-size:10px;letter-spacing:.04em;color:#fff;text-shadow:0 1px 6px rgba(12,27,51,.45)}

.case-figure{margin:24px 0 28px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#eef4fc}
.case-figure img{display:block;width:100%;height:360px;object-fit:cover;object-position:top center}
.case-figure figcaption{padding:10px 14px;font-size:11px;color:var(--muted);letter-spacing:.04em}

@media(max-width:750px){
  #work .project .art{height:320px}
  #work .project .project-title,#work .project .description,#work .project .tags{min-height:0}
  .case-figure img{height:245px}
}