/* Live paper and controls stay visible; only the old raster fades behind them. */
.navigation-scene { position:fixed;inset:0;width:100vw;height:100dvh;z-index:1;pointer-events:none }
#content:focus { outline: none }
.capsule-item[data-navigation-pending] { outline: 1px solid var(--muted); outline-offset: 3px }
body.motif-arriving::before, body.motif-arriving .pointer-field { animation: motif-settle 280ms cubic-bezier(.16,1,.3,1) }
@keyframes motif-settle { from { opacity: .72 } to { opacity: 1 } }
/* auto preserves native find-in-page and keyboard navigation; measured dimensions replace estimates after first render. */
@supports (content-visibility: auto) {
  .artist-grid > .artist-portal { content-visibility: auto; contain-intrinsic-block-size: auto 330px }
  .album-grid > .album-sleeve { content-visibility: auto; contain-intrinsic-block-size: auto 405px }
  .art-grid > .art-card { content-visibility: auto; contain-intrinsic-block-size: auto 360px }
  .image-sequence > figure { content-visibility: auto; contain-intrinsic-block-size: auto 650px }
  @media (max-width:700px) {
    .artist-grid > .artist-portal { contain-intrinsic-block-size: auto 255px }
    .album-grid > .album-sleeve { contain-intrinsic-block-size: auto 240px }
    .art-grid > .art-card { contain-intrinsic-block-size: auto 280px }
    .image-sequence > figure { contain-intrinsic-block-size: auto 370px }
  }
}
@media print {
  .artist-grid > .artist-portal, .album-grid > .album-sleeve,
  .art-grid > .art-card, .image-sequence > figure { content-visibility: visible }
}


.capsule-mark { animation: none }

/* The title and link stay visible while only the real cover is pending. */
img[data-cover-src]:not([data-cover-state='ready']):not([data-cover-state='error']) { color: transparent; opacity: 0 }
img[data-cover-state='ready'][data-cover-reveal] { animation: cover-arrive 160ms cubic-bezier(.16,1,.3,1) }
@keyframes cover-arrive { from { opacity: .55 } to { opacity: 1 } }
.cover-error { position: absolute; inset: 20% 10%; z-index: 4; display: grid; place-items: center; padding: 12px; background: var(--paper); color: var(--ink); font: 16px/1.6 'Site Sans',sans-serif; text-align: center; pointer-events: none }
img[data-cover-state='error'] { opacity: 0 }
@media (prefers-reduced-motion:reduce) { img[data-cover-reveal] { animation: none } }

/* Selector parity for the real image inside the no-script fallback. */
.sleeve-art > noscript > img { width: 100%; aspect-ratio: 1; position: relative; z-index: 1; object-fit: contain; border-radius: 2px; box-shadow: 0 9px 23px rgba(20,25,20,.13) }