/* A compact visual index, between the masthead and the main campaign. */
.story-rail { display: flex; align-items: center; gap: 30px; padding: 18px var(--page-gutter); background: #f6f6f2; border-bottom: 1px solid var(--color-rule); }
.story-rail-intro { width: 146px; flex-shrink: 0; }
.story-rail-intro .eyebrow { font-size: 7px; letter-spacing: .16em; color: var(--color-muted); margin-bottom: 6px; }
.story-rail h2 { font-size: 28px; line-height: 1.05; letter-spacing: -.025em; }
.story-rail-controls { display: flex; gap: 3px; margin-top: 7px; }
.story-rail-controls .icon-button { width: 44px; height: 44px; }
.story-rail-controls .icon { width: 16px; height: 16px; }
.story-track { min-width: 0; flex: 1; display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; padding: 5px; margin: -5px; }
.story-track::-webkit-scrollbar { display: none; }
.story-tile { position: relative; flex: 0 0 118px; width: 118px; height: 118px; overflow: clip; text-align: start; scroll-snap-align: start; background: #ddd; white-space: normal; }
.story-tile img { width: 100%; height: 100%; object-fit: cover; filter: none; transition: transform 500ms var(--ease-out); -webkit-user-drag: none; }
.story-tile .duo-image-composition > img { width: 50%; object-fit: contain; }
.story-tile::after { content: ''; position: absolute; inset: 30% 0 0; background: linear-gradient(transparent, #000b); pointer-events: none; }
.story-tile-caption { position: absolute; z-index: 1; inset-inline: 10px; bottom: 10px; display: flex; align-items: flex-end; justify-content: space-between; gap: 7px; color: white; font-size: 10px; line-height: 1.4; }
.story-tile-caption .icon { width: 13px; height: 13px; }
.story-tile-index { position: absolute; z-index: 1; top: 8px; inset-inline-start: 9px; color: white; font-size: 7px; text-shadow: 0 1px 5px #0009; }
.story-tile:is(:hover,:focus-visible) img { transform: scale(1.06); }
.story-tile:focus-visible { outline-offset: -3px; outline-color: white; }
.story-track.is-dragging { scroll-snap-type: none; }
.story-track.is-dragging, .story-track.is-dragging * { cursor: grabbing !important; user-select: none; }
[dir=rtl] .story-rail h2 { font-family: var(--font-body); font-size: 20px; line-height: 1.6; letter-spacing: 0; }
@media (hover:hover) and (pointer:fine) {
  .story-track, .story-tile { cursor: grab; user-select: none; }
}
@media (max-width:760px) {
  .story-rail { display: block; padding-block: 14px 16px; }
  .story-rail-intro { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
  .story-rail-intro .eyebrow { display: none; }
  .story-rail h2 { font-size: 23px; }
  .story-rail-controls { margin: 0; gap: 0; }
  .story-rail-controls .icon-button { width: 44px; height: 44px; }
  .story-track { gap: 10px; margin-inline-end: calc(-1 * var(--page-gutter)); padding-inline-end: var(--page-gutter); }
  .story-tile { flex-basis: 94px; width: 94px; height: 94px; }
  .story-tile-caption { inset-inline: 8px; bottom: 8px; font-size: 9px; }
  [dir=rtl] .story-rail h2 { font-size: 17px; }
}
@media (prefers-reduced-motion:reduce) { .story-tile:is(:hover,:focus-visible) img { transform: none; } }
html[data-motion=reduce] .story-tile:is(:hover,:focus-visible) img { transform: none; }