/* Echo's Now Playing scene (the same markup and styles as the home page) placed between two halves of a
   blog post. It sits OUTSIDE .article so the article's paragraph rules cannot reach the scene's text. */
.np1-embed{padding:6px 0 10px;margin:8px auto 28px;width:min(672px,calc(100vw - 48px));z-index:1;overflow:visible}
.np1-embed .np1-caps{margin-top:clamp(20px,3vh,32px)}
/* The three captions stay side by side at the article's width; they stack only on a phone. */
@media (min-width:601px){
  .np1-embed .np1-caps{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .np1-embed .np1-cap h3{font-size:18px}
  .np1-embed .np1-cap p{font-size:14.5px;line-height:1.5}
}
@media (max-width:600px){.np1-embed .np1-caps{gap:24px}.np1-embed .np1-cap h3{font-size:19px}.np1-embed .np1-cap p{font-size:15.5px}}
@media (max-width:760px){.np1-embed{padding:6px 0 4px}}
/* The scene's loops only run while it is near the screen (np-embed.js adds .anim-on). */
.np-gate .np1-embed:not(.anim-on),
.np-gate .np1-embed:not(.anim-on) *,
.np-gate .np1-embed:not(.anim-on) *::before,
.np-gate .np1-embed:not(.anim-on) *::after{animation-play-state:paused !important}
/* The second half of the article continues straight on from the scene. */
.article.np-after{padding-top:0}
.article.np-after>:first-child{margin-top:0}
/* No extra gap under the paragraph that introduces the scene. */
.article:has(+ .np1-embed){padding-bottom:0}
/* A single rival screenshot after the scene takes the full column instead of half of it. */
.shots-grid:has(>.shot:only-child){grid-template-columns:1fr}