/* Detail view refinements */
.project-overlay { background: rgba(0,0,0,.88); backdrop-filter: blur(14px); }
.project-panel { background: transparent; border: 0; }
@media (max-width: 900px) {
  .project-top { display: flex; flex-direction: column; }
  .project-info { order: -1; }
}
.work-card:nth-child(6n+1) .video-placeholder{background:linear-gradient(135deg,#47352e,#151515)}
.work-card:nth-child(6n+2) .video-placeholder{background:linear-gradient(135deg,#18333c,#151515)}
.work-card:nth-child(6n+3) .video-placeholder{background:linear-gradient(135deg,#412d3d,#151515)}
.work-card:nth-child(6n+4) .video-placeholder{background:linear-gradient(135deg,#293b2d,#151515)}
.work-card:nth-child(6n+5) .video-placeholder{background:linear-gradient(135deg,#38353e,#151515)}
.work-card:nth-child(6n) .video-placeholder{background:linear-gradient(135deg,#4b4029,#151515)}
.wordmark{display:inline-flex;align-items:center;position:relative;overflow:visible}.wordmark span{margin-left:4px}.wordmark::after{content:'— VFX';position:absolute;left:100%;margin-left:10px;opacity:0;white-space:nowrap;font-size:.5em;font-weight:300;letter-spacing:-.015em;transition:opacity .14s ease}.wordmark:hover::after{opacity:1}
.header-actions a{display:inline-flex;align-items:center;gap:5px}.external-icon{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.project-main{width:auto;max-width:100%;height:auto;max-height:50vh}.main-video-wrap{width:fit-content;max-width:100%;margin-inline:auto}.breakdowns{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:72px}.breakdowns video,.breakdowns img{flex:0 0 calc((100% - 32px)/3);width:calc((100% - 32px)/3)}
@media(max-width:900px){.breakdowns video,.breakdowns img{flex-basis:calc((100% - 16px)/2);width:calc((100% - 16px)/2)}}
@media(max-width:520px){.breakdowns video,.breakdowns img{flex-basis:100%;width:100%}}

/* On desktop, credits occupy the same visual height as the main video. */
.project-info{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#5a5a5a transparent}
.project-info::-webkit-scrollbar{width:5px}
.project-info::-webkit-scrollbar-thumb{background:#555;border-radius:999px}
@media(max-width:900px){.project-info{height:auto!important;overflow:visible}}