/* =========================================================================
   Instagram carousel · shared slide + swipe styles (system B tokens).
   carousel/ shows it clean; carousel/phone/ restyles the same classes as Instagram.
   ========================================================================= */
.cstage { position: relative; width: 100%; aspect-ratio: 1080 / 1350; overflow: hidden; background: #0b0b0c;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.cstage:active { cursor: grabbing; }
.ctrack { display: flex; height: 100%; transition: transform .45s cubic-bezier(.25, .8, .25, 1); will-change: transform; }
.ctrack.no-anim { transition: none; }
.cslide { min-width: 100%; height: 100%; }
.cslide img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; pointer-events: none; }

.cnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--hair); background: rgba(11, 11, 12, .5); backdrop-filter: blur(8px); cursor: pointer; padding: 0;
  transition: opacity .2s var(--ease), background .2s var(--ease); }
.cnav::before { content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px;
  border-top: 2.2px solid var(--ink); border-right: 2.2px solid var(--ink); }
.cnav--prev { left: 12px; }
.cnav--prev::before { transform: translateX(2px) rotate(-135deg); }
.cnav--next { right: 12px; }
.cnav--next::before { transform: translateX(-2px) rotate(45deg); }
.cnav[disabled] { opacity: 0; pointer-events: none; }

.cdots { display: flex; gap: 8px; justify-content: center; }
.cdots button { width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(243, 242, 238, .25);
  transition: background .25s var(--ease), transform .25s var(--ease); }
.cdots button.is-on { background: var(--accent); transform: scale(1.25); }

@media (prefers-reduced-motion: reduce) { .ctrack { transition: none; } }