/* Homepage project carousel. All geometry and controls stay inside this region. */
.work-coverflow { --cover-width: clamp(170px, 20.5vw, 250px); --cover-spread: .9; position: relative; max-width: 1000px; margin: 48px auto 0; isolation: isolate; }
.work-coverflow__stage { position: relative; height: calc(var(--cover-width) * 16 / 9 + 32px); overflow: hidden; overflow: clip; perspective: 1400px; touch-action: pan-y; cursor: grab; }
.work-coverflow__card { position: absolute; top: 50%; left: 50%; width: var(--cover-width); aspect-ratio: 9/16; border-radius: 12px; background: #0C0C0E; transform: translate(-50%, -50%); transition: transform 640ms cubic-bezier(.22,1,.36,1); user-select: none; -webkit-user-drag: none; }
.work-coverflow__card:not([data-active="true"]) { cursor: pointer; }
.work-coverflow__media { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; }
.work-coverflow__media::after { content: ''; position: absolute; inset: 0; background: #0C0C0E; opacity: var(--shade, 0); pointer-events: none; transition: opacity 640ms cubic-bezier(.22,1,.36,1); }
.work-coverflow__media img, .work-coverflow__media video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.work-coverflow__media video { position: absolute; inset: 0; opacity: 0; }
.work-coverflow__media video[data-ready="true"] { opacity: 1; }
.work-coverflow[data-dragging] .work-coverflow__stage { cursor: grabbing; }
.work-coverflow[data-dragging] .work-coverflow__card { transition: none; cursor: grabbing; }
.work-coverflow__arrow { position: absolute; top: calc(var(--cover-width) * 8 / 9 - 8px); z-index: 110; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #0C0C0E; border-radius: 16px; color: #0C0C0E; background: #FFFFFF; cursor: pointer; }
.work-coverflow__arrow--prev { left: 8px; }
.work-coverflow__arrow--next { right: 8px; }
.work-coverflow__arrow svg { width: 24px; height: 24px; }
/* A shallow solid strip leaves the central footage and captions unobstructed. */
.work-coverflow__caption { position: absolute; inset: auto 0 0; z-index: 2; padding: 10px 12px; border-radius: 0 0 12px 12px; background: #0C0C0E; color: #FFFFFF; pointer-events: none; }
.work-coverflow__card:not([data-active="true"]) .work-coverflow__caption { visibility: hidden; }
.work-coverflow__caption .mono { margin-bottom: 4px; font-size: 9px; line-height: 1.2; color: #F2F3F0; letter-spacing: .14em; }
.work-coverflow__caption h3 { font-size: clamp(14px, 1.4vw, 19px); line-height: 1.08; overflow-wrap: anywhere; }
.work-coverflow__cta { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; font: 700 10px/1.2 var(--font-label); letter-spacing: .1em; text-transform: uppercase; }
.work-coverflow__cta > span { font-size: 16px; line-height: 12px; color: #B6FF3B; }
.work-coverflow__controls { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.work-coverflow__dots { display: flex; }
.work-coverflow__dots button { display: grid; place-items: center; width: 36px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.work-coverflow__dots span { display: block; width: 8px; height: 8px; border-radius: 50%; background: #6E6F73; }
.work-coverflow__dots [aria-current="true"] span { width: 24px; border-radius: 4px; background: #B6FF3B; box-shadow: inset 0 0 0 1px #0C0C0E; }
.work-coverflow :focus-visible, .work-coverflow:focus-visible { outline: 2px solid #0C0C0E; outline-offset: 4px; }
.work-coverflow__card:focus-visible { outline: 3px solid #B6FF3B; outline-offset: -4px; }
@media (hover: hover) { .work-coverflow__arrow:hover { background: #B6FF3B; } }
@media (max-width: 760px) {
  .work-coverflow { --cover-width: clamp(180px, 56vw, 280px); --cover-spread: 1; margin-top: 32px; }
  .work-coverflow__stage { height: calc(var(--cover-width) * 16 / 9 + 48px); }
  .work-coverflow__arrow { width: 44px; height: 44px; top: calc(var(--cover-width) * 8 / 9 + 2px); }
  .work-coverflow__arrow--prev { left: 0; }
  .work-coverflow__arrow--next { right: 0; }
}
@media (prefers-reduced-motion: reduce) { .work-coverflow__card, .work-coverflow__media::after { transition: none; } }