/* Instagram carousel viewer, shared by carousel/ and carousel/phone/ (the phone page only restyles the chrome). */
.car { position: relative; overflow: hidden; padding: clamp(52px, 8vh, 104px) 0 clamp(56px, 9vh, 104px); }
.car__viewer { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.cstage { position: relative; width: min(calc(100vw - 32px), 440px); aspect-ratio: 1080 / 1350; overflow: hidden; border-radius: 22px; background: var(--surface-2); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
  box-shadow: 0 0 0 1px var(--hair), 0 40px 90px -40px rgba(0, 42, 82, 0.45); }
.cstage:active { cursor: grabbing; }
.ctrack { display: flex; height: 100%; transition: transform 0.5s cubic-bezier(0.66, 0, 0.2, 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: 46px; height: 46px; padding: 0; border-radius: 50%; border: 1px solid var(--accent-line); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); cursor: pointer; transition: opacity 0.2s var(--ease); }
.cnav::before { content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px; border-top: 2.5px solid var(--accent); border-right: 2.5px solid var(--accent); }
.cnav--prev { left: 14px; } .cnav--prev::before { transform: rotate(-135deg); margin-left: 19px; }
.cnav--next { right: 14px; } .cnav--next::before { transform: rotate(45deg); margin-right: 19px; }
.cnav[disabled] { opacity: 0; pointer-events: none; }
.cdots { display: flex; gap: 0; }
.cdots button { width: 28px; height: 28px; border-radius: 50%; border: none; padding: 10px; background-clip: content-box; cursor: pointer; background-color: rgba(28, 27, 26, 0.2); transition: background 0.25s var(--ease), transform 0.25s var(--ease); }
.cdots button.is-on { background-color: var(--accent); transform: scale(1.3); }
.car__hint { margin: 0; font-size: 16px; color: var(--faint); }
.car__caption { margin: clamp(30px, 5vw, 48px) auto 0; max-width: 600px; background: var(--surface); border: 1px solid var(--hair); border-radius: 20px; padding: clamp(22px, 3vw, 30px); }
.car__caplabel { margin: 0 0 12px; font-family: var(--display); font-stretch: 125%; font-size: 14px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.car__captext { margin: 0; font-size: 18px; line-height: 1.62; color: var(--muted); white-space: pre-line; }
@media (prefers-reduced-motion: reduce) { .ctrack { transition: none; } }