.ev-index { background: #111; padding-bottom: 72px; }
.ev-index-items { list-style: none; padding: 0; margin: 0 auto; width: 84%; }
.ev-index-link { display: flex; gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid #333; }
.ev-index-name { font-size: clamp(22px, 4.4vw, 64px); line-height: 1.08; letter-spacing: -.04em; font-weight: 500; }
.ev-index-year { color: #b8b8b8; font: 12px var(--tb-mono); }
.ev-index-static-image { width: clamp(86px, 18vw, 240px); height: auto; object-fit: contain; border-radius: 4px; flex-shrink: 0; }
.ev-index-previews { display: none; }
.ev-index-link:focus-visible, .ev-index-preview:focus-visible { outline: 2px solid #ddd; outline-offset: 5px; border-radius: 4px; }
.ev-index.is-animated .ev-index-track { height: calc(var(--app-vh, 100vh) + var(--index-travel, 0px)); margin-top: calc(-1 * var(--index-entry-space, 0px)); }
.ev-index.is-animated .ev-index-pin { position: sticky; top: 0; height: var(--app-vh, 100vh); overflow: hidden; }
.ev-index.is-animated .ev-index-items { position: absolute; inset: 0; width: 100%; margin: 0; }
.ev-index.is-animated .ev-index-row { position: absolute; top: 0; left: 0; width: 65%; min-height: 112px; display: flex; align-items: center; will-change: transform; }
.ev-index.is-animated .ev-index-link { position: relative; width: 100%; padding: 14px 0; border: 0; display: block; opacity: .3; }
.ev-index.is-animated .ev-index-link:focus-visible { opacity: 1 !important; }
.ev-index.is-animated .ev-index-year { display: none; }
.ev-index.is-animated .ev-index-static-image { display: none; }
.ev-index.is-animated .ev-index-previews { display: block; position: absolute; left: 3%; top: 50%; transform: translateY(-50%); width: clamp(100px, 22vw, 280px); height: clamp(180px, calc(var(--app-vh, 100vh) * .32), 320px); z-index: 2; }
.ev-index-preview { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .32s var(--tb-ease), visibility 0s .32s; }
.ev-index-preview.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.ev-index-preview img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; display: block; }
@media (max-width: 700px) {
  .ev-index { padding-bottom: 40px; }
  .ev-index-link { gap: 16px; }
  .ev-index-name { font-size: 21px; line-height: 1.12; letter-spacing: -.035em; }
  .ev-index-year { display: none; }
  .ev-index.is-animated .ev-index-row { width: 64%; min-height: 112px; }
  .ev-index.is-animated .ev-index-previews { left: 4%; width: 24%; height: calc(var(--app-vh, 100vh) * .24); }
}
@media (prefers-reduced-motion: reduce) { .ev-index-preview { transition: none; } }