.works-list { display: grid; gap: 18px; }
.work-card { position: relative; display: block; padding: 23px 54px 23px 25px; border: 1px solid #c6dfef; border-radius: 11px; background: var(--card); text-decoration: none; transition: background-color 120ms, border-color 120ms, box-shadow 120ms; }
.work-card:hover, .work-card:focus-visible { border-color: #608bac; background: #f5faff; box-shadow: 0 4px 12px rgb(33 62 89 / 9%); }
.work-composer { display: block; margin: 0 0 8px; color: var(--muted); font-size: 15.6px; font-weight: 700; }
.work-title, .work-detail-title { margin: 0 0 12px; color: var(--navy); line-height: 1.5; }
.work-title { font-size: 23.4px; }
.work-detail-title { font-size: 26px; }
.work-meta { margin: 4px 0; color: var(--muted); line-height: 1.7; }
.work-chevron { position: absolute; top: 50%; right: 22px; transform: translateY(-50%); font-size: 31.2px; }
.work-detail-heading, .work-detail-section { margin-bottom: 18px; padding: 24px; border: 1px solid var(--border); border-radius: 11px; background: white; }
.work-detail-section h3 { margin: 0 0 12px; font-size: 20.8px; }
.work-detail-section p, .work-detail-section ul { margin-top: 0; line-height: 1.8; }
.work-detail-section li + li { margin-top: 6px; }
.work-media-link, .work-reference { display: inline-block; padding: 10px 16px; border-radius: 7px; background: var(--navy); color: white; font-weight: 700; text-decoration: none; }
.work-media-link:hover, .work-media-link:focus-visible, .work-reference:hover, .work-reference:focus-visible { background: #174c82; }
.work-media-note { margin: 8px 0 0 !important; color: var(--muted); font-size: 13px; }

@media (max-width: 600px) {
  .work-card { padding: 18px 44px 18px 18px; }
  .work-title { font-size: 16.9px; }
  .work-detail-title { font-size: 19.5px; }
  .work-detail-heading, .work-detail-section { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .work-card { transition: none; }
}