/* Selected projects: real screenshots, matching the existing site palette and type. */
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.work-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border); background: #09090c; color: inherit; text-decoration: none; transition: border-color .2s ease; }
.work-card-featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: center; }
/* Crop the 15px browser scrollbar captured at the right of each 1265px preview. */
.work-preview { overflow: hidden; background: #11131a; aspect-ratio: 1250 / 712; }
.work-preview img { display: block; width: calc(100% * 1265 / 1250); max-width: none; height: auto; }
.work-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 30px; }
.work-category { margin: 0 0 14px; color: #abb3c1; font-size: 10px; line-height: 1.5; letter-spacing: .14em; }
.work-copy h3 { margin: 0 0 15px; font-size: clamp(30px, 2.6vw, 38px); line-height: 1.12; }
.work-description { margin: 0 0 25px; color: #b8bdc8; font-size: 14px; line-height: 1.8; max-width: 48ch; }
.work-link { display: inline-flex; align-items: center; gap: 12px; margin-top: auto; color: var(--brand-green); font-size: 13px; line-height: 1.6; }
.work-link > span[aria-hidden] { font-size: 19px; }
.work-card:hover { border-color: #5d746b; }
.work-card:hover .work-link { text-decoration: underline; text-underline-offset: 5px; }
.work-card:focus-visible { outline: 2px solid var(--brand-green); outline-offset: 5px; }
.work-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 1000px) {
  .work-card-featured { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .work-copy { padding: 25px; }
  .work-copy h3 { font-size: 30px; }
}
@media (max-width: 700px) {
  .work-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .work-card-featured { display: flex; }
  .work-copy { padding: 25px 22px; }
  .site-header nav { gap: clamp(22px, 6vw, 38px); }
}
@media (prefers-reduced-motion: reduce) { .work-card { transition: none; } }