/* Selected Work showcase (design upgrade 2026-11-07). Footage is never darkened: names sit on a solid navy band. */
.sc{--sc-ease:cubic-bezier(.16,1,.3,1);margin-top:clamp(22px,4vw,40px)}
.sc-item{position:relative;background:#0C121B}
.sc-media{position:relative;overflow:hidden;background:#090E15;cursor:pointer}
.sc-media img,.sc-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sc-loop{opacity:0;transition:opacity .6s var(--sc-ease)}
.sc-item.sc-live .sc-loop{opacity:1}
.sc-full{position:absolute;inset:0;width:100%;height:100%;background:#000;z-index:3;object-fit:contain}
.sc-play{position:absolute;left:50%;top:50%;z-index:2;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;
  border:1px solid rgba(255,255,255,.75);background:rgba(12,18,27,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .4s var(--sc-ease),background-color .2s}
.sc-play svg{width:22px;height:22px;margin-left:3px;fill:currentColor}
.sc-media:hover .sc-play{transform:scale(1.06);background:rgba(12,18,27,.55)}
.sc-play:focus-visible{outline:2px solid #A9BED2;outline-offset:4px}
.sc-band{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:16px 2px 4px}
.sc-k{margin:0 0 8px;font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:#E7DFD0}
.sc-name{margin:0;font-family:'Inter',system-ui,sans-serif;font-weight:600;letter-spacing:-.02em;line-height:1.05;color:#F2EEE6;font-size:clamp(22px,5.6vw,30px)}
.sc-n{font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.2em;color:#93A0AE;white-space:nowrap}
.sc-n b{color:#D9B26A;font-weight:500}
.sc-item.sc-playing .sc-play{display:none}

/* phones and small tablets: swipe cards, one loop at a time */
@media (max-width:1023px){
  .sc{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-left:calc(-1*clamp(16px,5vw,64px));margin-right:calc(-1*clamp(16px,5vw,64px));padding:0 clamp(16px,5vw,64px) 6px;scroll-padding:0 clamp(16px,5vw,64px)}
  .sc::-webkit-scrollbar{display:none}
  .sc-item{flex:0 0 82%;scroll-snap-align:start;background:none}
  .sc-media{aspect-ratio:4/5;border-radius:12px}
  .sc-item.sc-playing .sc-media{aspect-ratio:auto;height:auto}
  .sc-item.sc-playing.sc-wide .sc-media{aspect-ratio:16/9}
  .sc-item.sc-playing.sc-tall .sc-media{aspect-ratio:9/16}
  .sc-band{padding:14px 2px 0}
  .sc-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
  .sc-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22);transition:background-color .3s,width .3s}
  .sc-dots i.on{width:18px;border-radius:3px;background:#D9B26A}
}
/* desktop: each film fills the screen in turn */
@media (min-width:1024px){
  .sc{display:grid;gap:clamp(40px,6vw,72px)}
  .sc-media{height:min(calc(100vh - 220px),760px);min-height:460px;border-radius:16px;border:1px solid rgba(255,255,255,.09)}
  .sc-item.sc-tall .sc-media img,.sc-item.sc-tall .sc-media video{object-fit:contain;background:#090E15}
  .sc-band{padding:22px 4px 0;border-top:0}
  .sc-name{font-size:clamp(34px,4vw,56px)}
  .sc-dots{display:none}
}
@media (prefers-reduced-motion:reduce){.sc-loop{display:none}.sc-play,.sc-loop{transition:none}}