.case-reel {
    --reel-card: clamp(240px, 24vw, 320px);
    --reel-gap: 18px;
    --reel-count: 3;
    width: 100%;
    max-width: min(100%, calc((var(--reel-card) + var(--reel-gap)) * var(--reel-count) - var(--reel-gap)));
    margin: 36px auto 44px;
}
.case-reel[hidden] { display: none; }
.case-reel-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.case-reel-heading h2 { margin: 0 0 5px; font-size: 20px; font-weight: 500; letter-spacing: -.04em; }
.case-reel-heading p { margin: 0; color: #6b6b6b; font-size: 12px; line-height: 1.5; }
.case-reel-controls { display: flex; gap: 6px; flex-shrink: 0; }
.case-reel-controls[hidden] { display: none; }
.case-reel-controls button { min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid #d7d7d7; background: #fff; color: #171717; font: inherit; font-size: 12px; cursor: pointer; }
.case-reel-controls button[data-reel-toggle] { min-width: 76px; }
.case-reel-controls button:hover { border-color: #171717; }
.case-reel-viewport { overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.case-reel-viewport.is-dragging { cursor: grabbing; }
.case-reel-viewport:focus-visible, .case-reel-controls button:focus-visible { outline: 2px solid #171717; outline-offset: 4px; }
.case-reel-track { display: flex; width: max-content; will-change: transform; }
.case-reel-group { display: flex; gap: var(--reel-gap); padding-right: var(--reel-gap); flex: none; }
.case-reel-card { flex: 0 0 var(--reel-card); width: var(--reel-card); margin: 0; }
.case-reel-link { display: block; cursor: pointer; }
.case-reel-link:focus-visible { outline: 2px solid #171717; outline-offset: -3px; }
.case-reel-viewport.is-dragging .case-reel-link { cursor: grabbing; }
.case-reel-card img { display: block; width: 100%; height: auto; aspect-ratio: 20 / 13; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.case-reel-card figcaption { margin-top: 11px; max-width: 100%; min-height: 40px; line-height: 1.5; font-size: 13px; color: #313131; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 600px) {
    .case-reel { --reel-card: min(76vw, 300px); --reel-gap: 14px; margin: 28px auto 34px; }
    .case-reel-heading { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
    .case-reel-heading h2 { font-size: 18px; }
    .case-reel-controls { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .case-reel-track { will-change: auto; } }