/* Native scrolling does the movement. No continuously running animation. */
.showcase{min-height:0;margin-top:30px;padding-bottom:64px;position:relative}
.portfolio-list{--card-size:min(76vw,560px);display:flex;gap:24px;position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scroll-behavior:smooth;scrollbar-width:thin;padding:30px max(0px,calc((100% - var(--card-size))/2)) 40px;align-items:center}
.project-slide,.portfolio-list>.work-card{flex:0 0 var(--card-size);min-width:0;scroll-snap-align:center;scroll-snap-stop:always}
.project-slide{container-type:scroll-state}
.project-slide .work-card{width:100%;transform-origin:center;transition:scale .3s ease,opacity .3s ease;box-shadow:0 16px 30px #12324a16}
.work-card>img{aspect-ratio:16/10;object-fit:cover;object-position:top;height:auto}
.card-info h3{font-size:clamp(18px,2vw,24px)}
.card-info p{font-size:14px}
.showcase-controls{margin-top:-30px;position:relative}
.showcase-controls button:disabled{opacity:.3;cursor:default}
.showcase-controls p{min-width:0;max-width:270px}
@container not scroll-state(snapped:inline){.project-slide .work-card{scale:.82;opacity:.55}.project-slide .work-card:focus-visible{opacity:1}}
@supports selector(::scroll-button(inline-start)) and selector(::scroll-marker){
  .portfolio-list{scrollbar-width:none;scroll-marker-group:after}
  .portfolio-list::scroll-marker-group{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:4px;align-items:center;justify-content:center}
  .project-slide::scroll-marker{content:" ";font-size:0;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle,#12324a55 0 6px,transparent 7px)}
  .project-slide::scroll-marker:target-current{background:radial-gradient(circle,#12324a 0 8px,transparent 9px)}
  .project-slide::scroll-marker:focus-visible{outline:3px solid #bd6b23;outline-offset:1px}
  .portfolio-list::scroll-button(*){position:absolute;bottom:8px;width:48px;height:48px;display:grid;place-items:center;border:1px solid #b9cbc7;border-radius:50%;background:var(--paper);color:var(--ink);font:24px Montserrat,Arial,sans-serif;cursor:pointer}
  .portfolio-list::scroll-button(inline-start){content:"←" / "Previous project";left:calc(50% - 145px)}
  .portfolio-list::scroll-button(inline-end){content:"→" / "Next project";right:calc(50% - 145px)}
  .portfolio-list::scroll-button(*):not(:disabled):hover{background:var(--mint)}
  .portfolio-list::scroll-button(*):focus-visible{outline:3px solid #bd6b23;outline-offset:3px}
  .portfolio-list::scroll-button(*):disabled{opacity:.3;cursor:default}
  .snap-ready+.showcase-controls{margin-top:0}
  .snap-ready+.showcase-controls button{display:none}
}
@media(max-width:700px){.showcase{min-height:0;margin-top:10px}.portfolio-list{gap:12px}.work-card{padding:10px}.card-info p{font-size:12px}.showcase-controls p{font-size:13px}.card-bar{font-size:10px}}
@media(prefers-reduced-motion:reduce){.portfolio-list{scroll-behavior:auto}.project-slide .work-card{transition:none}}
.motion-paused .portfolio-list{scroll-behavior:auto}.motion-paused .project-slide .work-card{transition:none}

.project-slide:nth-child(1)::scroll-marker{content:" " / "Cynefin Quest"}.project-slide:nth-child(2)::scroll-marker{content:" " / "Ty Llewelyn"}.project-slide:nth-child(3)::scroll-marker{content:" " / "TJ&H Plumbing & Heating"}