/* Home portfolio: a flat, steadily scrolling strip of site cards, like a client logo bar.
   Two identical sets sit side by side on one belt; the belt moves left by exactly one set, then repeats. */
.projects.strip{--cw:clamp(250px,22vw,320px);--gap:24px;display:block;max-width:none;margin:10px 0 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9% 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9% 91%,transparent);
  touch-action:pan-y}
.strip-belt{display:flex;width:max-content;animation:strip-loop 60s linear infinite;will-change:transform}
.strip.is-js .strip-belt{animation:none}
.strip:hover .strip-belt,.strip:focus-within .strip-belt{animation-play-state:paused}
@keyframes strip-loop{to{transform:translateX(-50%)}}
.strip-track{display:flex;margin:0;padding:0;list-style:none}
/* Spacing lives on each item (not the flex gap) so the two sets are exactly equal and the loop is seamless */
.strip-item{flex:none;width:var(--cw);margin-right:var(--gap);padding:6px 0}
.strip-card{display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:14px;background:#fbf9f2;color:var(--green);border:1px solid #173e3426;transition:border-color .25s}
.strip-shot{display:block;aspect-ratio:4/3;overflow:hidden;background:#e0e2d8;border-bottom:1px solid #173e341f}
.strip-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;-webkit-user-drag:none;user-select:none}
.strip-low .strip-shot img{object-position:50% 100%}
.strip-cap{display:flex;flex-direction:column;gap:3px;padding:13px 16px 15px}
.strip-cap b{font-weight:400;font-size:19px;letter-spacing:-.03em;line-height:1.2}
.strip-cap span{font-size:13.5px;line-height:1.35;color:var(--muted)}
.strip-card:hover,.strip-card:focus-visible{border-color:var(--teal)}
.strip-card:hover .strip-cap b,.strip-card:focus-visible .strip-cap b{color:var(--teal)}
.strip-card:focus-visible{outline:2px solid var(--rust);outline-offset:-2px}
.strip-all .strip-all-body{aspect-ratio:4/3;display:flex;flex-direction:column;justify-content:space-between;padding:18px;background:var(--green);color:var(--cream)}
.strip-all-body b{font-weight:400;font-size:30px;line-height:1;letter-spacing:-.05em}
.strip-all-go{align-self:flex-end;display:grid;place-items:center;width:44px;height:44px;border:1px solid currentColor;border-radius:50%}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

@media(max-width:600px){
  .projects.strip{--cw:min(280px,74vw);--gap:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6% 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6% 94%,transparent)}
  .strip-cap b{font-size:17px}
  .strip-cap span{font-size:13px}
}

/* Reduced motion: one set only, in a row you scroll yourself */
@media(prefers-reduced-motion:reduce){
  .projects.strip{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none;padding:0 0 10px;touch-action:auto}
  .strip-belt{animation:none!important;transform:none!important}
  .strip-clone{display:none}
  .strip-item{scroll-snap-align:start}
}