/* ============================================================================
   Project (case-study) pages — /project/<slug>. These share the two-panel
   work shell (work-shell.css): a sticky rail (title, brand name and lead
   copy) beside a scrolling gallery column, top-aligned with the rail. The
   rail foot holds a plain back link here instead of the /work testimonial
   rotator.
   ============================================================================ */

.work-main { min-width: 0; }

/* lives in .work-rail-head, under the brand name */
.proj-lead { margin: var(--space-5) 0 0;
  font-family: 'Be Vietnam Pro', sans-serif; font-size: var(--text-sm); line-height: 1.6;
  color: rgba(235,233,217,.8); white-space: pre-line; text-wrap: pretty; }

.proj-grid { column-count: 2; column-gap: clamp(10px, 1.4vw, 22px); }
.proj-item { break-inside: avoid; margin: 0 0 clamp(10px, 1.4vw, 22px); border-radius: var(--radius-sm); overflow: hidden; background: var(--canvas-deep); position: relative; box-shadow: var(--shadow-md); }
.proj-item img { width: 100%; height: auto; display: block; }
/* video keeps its true aspect via a padded box; the Vimeo background player fills it */
.proj-video { position: relative; width: 100%; height: 0; }
.proj-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 700px) { .proj-grid { column-count: 1; } }

/* ---- back link (replaces the /work testimonial card in .work-rail-foot) —
   just the word and an arrow, no pill ---- */
.work-back { display: inline-flex; align-items: center; gap: var(--space-2);
  text-decoration: none; width: fit-content; }
.work-back svg { flex: none; width: 16px; height: 16px; color: var(--ink-strong); transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.work-back:hover svg { transform: translateX(-3px); color: var(--accent); }
.work-back span { font-family: 'Greed Narrow', sans-serif; font-weight: 600; font-size: var(--text-base); color: var(--ink-strong); transition: color var(--dur-fast) var(--ease); }
.work-back:hover span { color: var(--accent); }

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