.archive-marquee-section { margin-block: 64px 40px; padding-top: 40px; border-top: 1px solid var(--line); }
.archive-marquee { --row-height: clamp(140px, 15vw, 220px); --marquee-gap: 16px; position: relative; isolation: isolate; }
.archive-marquee-rows { display: grid; gap: var(--marquee-gap); overflow: hidden; }
.archive-marquee-row { overflow: hidden; }
.archive-marquee-track { display: flex; width: max-content; will-change: transform; animation: archive-drift var(--duration, 300s) linear infinite; animation-play-state: paused; }
.archive-marquee-group { display: flex; flex: none; gap: var(--marquee-gap); padding-right: var(--marquee-gap); }
.archive-marquee-group img { display: block; flex: none; width: calc(var(--row-height) * var(--ratio)); height: var(--row-height); object-fit: contain; filter: grayscale(1); }
.archive-marquee-row:nth-child(2) .archive-marquee-track { animation-direction: reverse; }
.archive-marquee.is-running .archive-marquee-track { animation-play-state: running; }
.archive-marquee.is-paused .archive-marquee-track { animation-play-state: paused; }
.archive-marquee-link { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: #fff; }
.archive-marquee-link::before, .archive-marquee-link::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.archive-marquee-link::before { background: linear-gradient(transparent 40%, rgba(24,26,29,.3) 70%, var(--paper) 100%); }
.archive-marquee-link::after { background: linear-gradient(transparent 0%, rgba(0,73,151,.16) 22%, rgba(0,76,158,.82) 52%, rgba(0,51,110,.55) 73%, rgba(24,26,29,0) 100%); opacity: 0; transition: opacity .4s ease; }
.archive-marquee-link span { position: relative; z-index: 1; font-size: clamp(28px, 3vw, 44px); font-weight: 400; opacity: 0; transition: opacity .4s ease; }
.archive-marquee-link:hover { text-decoration: none; }
.archive-marquee-link:focus-visible { outline-offset: 6px; }
.archive-marquee-link:focus-visible::after, .archive-marquee-link:focus-visible span { opacity: 1; }
@keyframes archive-drift { to { transform: translate3d(-50%, 0, 0); } }
@media (hover: hover) {
  .archive-marquee:hover .archive-marquee-link::after, .archive-marquee:hover .archive-marquee-link span { opacity: 1; }
}
@media (hover: none) {
  .archive-marquee-link::after, .archive-marquee-link span { opacity: 1; }
}
@media (max-width: 700px) {
  .archive-marquee-section { margin-block: 36px 24px; padding-top: 24px; }
  .archive-marquee { --marquee-gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .archive-marquee:not(.is-motion-enabled) .archive-marquee-track { animation: none; will-change: auto; }
  .archive-marquee-link::after, .archive-marquee-link span { transition: none; }
}