/* Typography-first work cards */
.work-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.work-card{display:flex;flex-direction:column;align-items:flex-start;padding:22px 24px;min-height:190px;border:1px solid var(--line);background:#111;border-radius:3px}
.work-card:hover,.random-work:hover{border-color:var(--orange)}
.card-media{font-size:13px;letter-spacing:.06em;color:var(--orange);margin:0 0 10px}
.work-card .work-title{display:block;overflow:visible;margin:0 0 14px;font-size:20px;line-height:1.6;font-weight:650}
.work-card .work-rating{margin-top:auto}
.card-progress{font-size:13px;color:var(--muted);margin-top:8px}
.random-work{display:block;padding:28px 32px;border:1px solid var(--line);background:#111;border-radius:3px}
.random-work h3{font-size:28px;margin-bottom:14px}
.detail-layout{display:block;max-width:900px}
@media(max-width:1000px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.work-grid{grid-template-columns:1fr;gap:12px}.work-card{min-height:0;padding:20px}.work-card .work-title{font-size:19px;margin-bottom:12px}.work-card .work-rating{font-size:18px}.random-work{padding:22px}.random-work h3{font-size:22px}}

/* Category-tinted cards for the image-free edition. */
.work-card[data-media],.random-work[data-media]{
 background:color-mix(in srgb,var(--media-color,#aaa) 10%,#111);
 border-color:color-mix(in srgb,var(--media-color,#aaa) 45%,#222);
}
.work-card[data-media]:hover,.random-work[data-media]:hover{
 background:color-mix(in srgb,var(--media-color,#aaa) 16%,#111);
 border-color:var(--media-color,#aaa);
}
.work-card[data-media]:focus-visible,.random-work[data-media]:focus-visible{
 outline:2px solid var(--media-color,#aaa);outline-offset:4px;
}