/* ═══ PHOTO · SECTION 5 — VERTICAL CLIP STRIP (hover to play, scrolls sideways) ═══ */
.clips{position:relative;padding:clamp(74px,12vh,150px) 0;border-top:1px solid var(--border)}
.clips-head{padding:0 var(--gut) clamp(30px,5vh,54px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.clips-head h2{margin-top:20px;font-size:clamp(1.6rem,4.2vw,3.3rem);line-height:1;max-width:16ch}
.clips-head .aside{font-size:12.5px;line-height:1.6;color:var(--dim);max-width:25ch;
  text-align:right;flex-shrink:0}
@media(max-width:760px){.clips-head{flex-direction:column;align-items:flex-start}
  .clips-head .aside{text-align:left}}
.clip-view{overflow-x:auto;overflow-y:hidden;padding:0 var(--gut) 6px;
  scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.clip-view::-webkit-scrollbar{display:none}
.clip-track{display:flex;gap:clamp(12px,1.8vw,24px);width:max-content}
.clip{position:relative;flex-shrink:0;width:clamp(200px,22vw,320px);aspect-ratio:9/16;
  overflow:hidden;background:var(--surface-alt);scroll-snap-align:center;
  opacity:0;transform:translateY(22px);
  transition:opacity .7s ease,transform .75s cubic-bezier(.16,1,.3,1)}
.clip.is-in{opacity:1;transform:none}
.clip .inner{position:absolute;inset:0}
.clip img,.clip video{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.34) brightness(.8);transition:filter .5s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
/* the clip sits over the still and fades in once it starts playing */
.clip video{position:absolute;inset:0;opacity:0;transition:opacity .45s ease,filter .5s ease}
.clip.playing video{opacity:1}
.clip:hover img,.clip:hover video{filter:grayscale(0) brightness(.96);transform:scale(1.03)}
.clip .ph{position:absolute;inset:0;display:grid;place-items:center;
  background:repeating-linear-gradient(36.5deg,#161616 0 14px,#111 14px 28px)}
.clip .ph i{font-style:normal;font-size:10px;letter-spacing:.16em;font-weight:600;color:var(--dim);
  text-align:center;line-height:1.8;padding:0 14px}
.clip .lbl{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:40px 14px 13px;
  background:linear-gradient(to top,rgba(8,8,8,.92),transparent)}
.clip .lbl b{display:block;font-size:11.5px;font-weight:700}
.clip .lbl em{display:block;font-style:normal;font-size:9.5px;letter-spacing:.16em;
  color:var(--muted);margin-top:5px}
.clip .flag{position:absolute;right:10px;top:10px;z-index:4;font-size:9px;letter-spacing:.13em;
  font-weight:700;color:#0A0A0A;background:var(--cut);padding:4px 7px}
.clip .mark{position:absolute;left:12px;top:12px;z-index:4;width:26px;height:26px;
  border:1px solid rgba(245,244,239,.5);border-radius:50%;display:grid;place-items:center;
  transition:background .35s ease,border-color .35s ease}
.clip:hover .mark{background:var(--cut);border-color:var(--cut)}
.clip .mark::after{content:"";width:0;height:0;margin-left:2px;
  border-left:7px solid var(--text);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;
  transition:border-left-color .35s ease}
.clip:hover .mark::after{border-left-color:#0A0A0A}
.clips-foot{padding:clamp(22px,3.6vh,34px) var(--gut) 0;font-size:10.5px;letter-spacing:.18em;
  color:var(--dim)}

@media(prefers-reduced-motion:reduce){
  .clip{opacity:1;transform:none}
  .clip video{display:none}
}