/* ============================================================
   /work/ethan-welch-third/, page-local styles (loaded after
   css/main.css). The case-study layout: prose column, figure
   frames (reusing .work-row__visual), pairs, and the at-a-glance
   list. Everything else is main.css components.
   ============================================================ */

.case__meta { color:var(--muted); margin-top:var(--s-5); letter-spacing:0.08em; text-transform:none; }
.case__hero { margin-top:var(--s-7); }

.case__figure { margin:0; }
.case__figure img, .case__figure video { width:100%; height:100%; object-fit:cover; display:block; }
.case__pair { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5); }
.case__caption { color:var(--muted); margin-top:var(--s-3); max-width:var(--text-max); }

.case h2 { margin-bottom:var(--s-5); max-width:26ch; }
.case__body { max-width:var(--text-max); }
.case__body p { margin-bottom:var(--s-5); color:var(--ink); font-size:var(--fs-body-lg); line-height:1.6; }
.case__body p:last-child { margin-bottom:0; }
.case__body em { font-style:normal; color:var(--green-600); }

.case__media { margin-top:var(--s-7); display:flex; flex-direction:column; gap:var(--s-6); }

.case__lines { max-width:var(--text-max); margin-top:var(--s-6); }
.case__lines > div { display:flex; gap:var(--s-4); padding:var(--s-3) 0; border-top:1px solid var(--border-light); }
.case__lines > div:last-child { border-bottom:1px solid var(--border-light); }
.case__lines dt { text-transform:uppercase; color:var(--muted); min-width:132px; padding-top:2px; }
.case__lines dd { color:var(--ink); }

.case__note { max-width:var(--text-max); color:var(--muted); }
.case__next { display:flex; gap:var(--s-5); flex-wrap:wrap; align-items:center; margin-top:var(--s-6); }

@media (max-width:720px) {
  .case__pair { grid-template-columns:1fr; }
  .case__lines > div { flex-direction:column; gap:var(--s-1); }
  .case__lines dt { min-width:0; }
}