/* ==========================================================================
   Vively — project detail page additions (clips grid + fact list).
   New file so no cached stylesheet can mask it. Loaded last on work.html.
   ========================================================================== */

/* The banner files are authored at 16:9. The hero was forcing 21:9, which
   sliced roughly 130px off the top and bottom — on Juno that took the top of
   the wordmark and the models' chins. Matching the source ratio means nothing
   is cropped on any project. */
.proj-banner{ aspect-ratio:16/9; object-position:50% 50%; }

.proj-facts dd{ font-size:14px; font-weight:700; line-height:1.55; }
.proj-facts dd.small{ font-size:13px; font-weight:600; color:var(--ink-70); }

.proj-figures{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; margin-bottom:14px;
}
.proj-figures div{ background:var(--bg); padding:18px 20px; }
.proj-figures dt{
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-50); margin-bottom:6px;
}
.proj-figures dd{ margin:0; font-size:22px; font-weight:800; letter-spacing:-.02em; }

.proj-clips{ margin-top:56px; }
.proj-clips h2{ font-size:19px; margin-bottom:18px; }
.clip-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.clip{
  position:relative; aspect-ratio:9/16; border-radius:10px; overflow:hidden;
  background:var(--panel); border:1px solid var(--line);
}
.clip video, .clip img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.clip-empty{
  grid-column:1 / -1; padding:26px; border:1px dashed var(--line-strong);
  border-radius:12px; text-align:center; font-size:13.5px; color:var(--ink-50);
}
@media (max-width:900px){ .clip-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){
  .proj-clips{ margin-top:36px; }
  .clip-grid{ gap:10px; }
  .proj-figures dd{ font-size:19px; }
  .proj-figures div{ padding:14px 16px; }
}