.work-showcase { position: relative; isolation: isolate; overflow: hidden; border-block: 1px solid #302a33; background: #101014; padding: 100px 0 80px; }
.showcase-background, .showcase-shade { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.showcase-background { object-fit: cover; object-position: 35% 46%; }
.showcase-shade { background: linear-gradient(90deg, #0a080be6 0%, #0a080b99 43%, #0a080bda 100%), linear-gradient(0deg, #101014e6, transparent 30%, transparent 75%, #101014a6); }
.showcase-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); align-items: center; gap: 65px; }
.showcase-copy { padding-bottom: 30px; }
.showcase-copy h2 { font-family: Archivo, Arial, sans-serif; font-size: clamp(34px, 3.6vw, 53px); line-height: 1.12; letter-spacing: -.05em; margin-top: 24px; }
.showcase-copy h2 span { font-family: Georgia, serif; font-weight: 400; font-style: italic; letter-spacing: -.045em; color: #e0c690; }
.showcase-description { max-width: 290px; color: #c7bdcc; font-size: 12px; line-height: 1.9; margin-top: 24px; }
.showcase-project { border-left: 2px solid #ef238b; padding: 3px 0 3px 17px; margin: 35px 0 29px; min-height: 60px; }
.showcase-project p { color: #e0c690; font-size: 9px; text-transform: uppercase; letter-spacing: .16em; }
.showcase-project h3 { font-size: 15px; font-weight: 400; line-height: 1.5; margin-top: 8px; }
.showcase-copy .button { min-width: 220px; }
.showcase-carousel { min-width: 0; }
.showcase-instruction { display: flex; align-items: center; justify-content: space-between; font-size: 8px; color: #c2b5c9; letter-spacing: .17em; margin: 0 0 8px 8px; }
.showcase-instruction span { font-size: 22px; color: #c5a46d; }
.showcase-track { display: flex; align-items: center; gap: 26px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 9px; scrollbar-width: none; padding: 20px 9px 24px; cursor: grab; }
.showcase-track::-webkit-scrollbar { display: none; }
.showcase-track:after { content: ''; flex: 0 0 max(0px, calc(100% - 350px)); }
.showcase-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.showcase-card { flex: 0 0 320px; min-width: 0; border: 0; padding: 0; background: none; text-align: left; scroll-snap-align: start; transform: scale(.87); transform-origin: left center; opacity: .62; transition: transform .35s, opacity .35s; cursor: zoom-in; }
.showcase-card.is-active { transform: scale(1); opacity: 1; }
.showcase-photo { display: block; position: relative; border: 1px solid #b0a2b34d; border-radius: 13px; padding: 5px; background: #141218; box-shadow: 0 16px 40px #0006; overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.showcase-card.is-active .showcase-photo { border: 2px solid #ef238b; padding: 4px; box-shadow: 0 0 0 4px #ef238b12, 0 20px 45px #0008; }
.showcase-photo img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: contain; border-radius: 8px; pointer-events: none; }
.showcase-badge { position: absolute; top: 14px; left: 14px; border: 1px solid #c5a46d70; border-radius: 20px; padding: 5px 10px; font-size: 9px; color: #e0c690; background: #101014d9; }
.showcase-enlarge { position: absolute; right: 16px; bottom: 16px; border-radius: 50%; border: 1px solid #ffffff50; width: 35px; height: 35px; display: grid; place-items: center; background: #101014c9; color: #f2eee9; }
.showcase-card-label { display: flex; justify-content: space-between; gap: 15px; padding: 17px 4px 0; font-size: 11px; color: #f2eee9; }
.showcase-card-number { color: #e0c690; font-size: 10px; }
.showcase-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 9px; border-top: 1px solid #ffffff24; padding-top: 13px; }
.showcase-arrows { display: flex; gap: 9px; }
.showcase-arrows button { width: 44px; height: 44px; border: 1px solid #c5a46d80; border-radius: 50%; background: #10101480; color: #e0c690; font-size: 21px; transition: background .2s, border-color .2s; }
.showcase-arrows button:hover:enabled { border-color: #ef238b; background: #ef238b28; }
.showcase-arrows button:disabled { opacity: .3; cursor: default; }
.showcase-dots { display: flex; align-items: center; }
.showcase-dots button { display: grid; place-items: center; width: 26px; height: 44px; padding: 5px; border: 0; background: none; }
.showcase-dots span { display: block; width: 13px; height: 2px; background: #807284; transition: background .2s, height .2s; }
.showcase-dots button[aria-current=true] span { background: #ef238b; height: 4px; }
.showcase-counter { white-space: nowrap; color: #9c8da6; font-size: 10px; font-variant-numeric: tabular-nums; }
.showcase-counter > span:first-child { color: #e0c690; }
.showcase-empty { min-height: 280px; display: grid; place-items: center; border: 1px solid #ffffff24; color: #c7bdcc; padding: 30px; font-size: 12px; }
.showcase-portfolio-mobile { display: none; }
@media (max-width: 1100px) {
  .showcase-layout { gap: 35px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .showcase-card { flex-basis: 290px; }
  .showcase-track:after { flex-basis: max(0px, calc(100% - 320px)); }
  .showcase-dots button { width: 21px; }
}
@media (max-width: 760px) {
  .work-showcase { padding: 68px 0 45px; }
  .showcase-background { object-position: 36% center; }
  .showcase-shade { background: linear-gradient(0deg, #101014a6, #0a080b20 42%, #0a080b85 72%, #0a080bc9); }
  .showcase-layout { display: block; }
  .showcase-copy { padding-bottom: 22px; }
  .showcase-copy h2 { font-size: 37px; margin-top: 18px; }
  .showcase-copy h2 br { display: none; }
  .showcase-copy h2 span:before { content: ' '; }
  .showcase-description { margin-top: 15px; max-width: 320px; font-size: 11px; }
  .showcase-project { display: none; }
  .showcase-project h3 { font-size: 13px; margin-top: 5px; }
  .showcase-copy .button { display: none; }
  .showcase-carousel { margin-right: -24px; }
  .showcase-instruction { margin-right: 24px; font-size: 8px; }
  .showcase-track { gap: 12px; padding-top: 12px; padding-bottom: 18px; }
  .showcase-card { flex-basis: min(270px, 78%); transform: scale(.9); }
  .showcase-track:after { flex-basis: 22%; }
  .showcase-navigation { margin-right: 24px; gap: 8px; }
  .showcase-dots button { width: 20px; padding: 3px; }
  .showcase-card-label { padding-top: 12px; font-size: 10px; }
  .showcase-portfolio-mobile { display: inline-flex; margin: 25px 24px 0 9px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-card, .showcase-photo, .showcase-dots span { transition: none; }
}