/* Visual essay rhythm for long-form Stories. */
.nma-story-visual{
  width:min(1120px,calc(100vw - 32px));
  margin:clamp(2.4rem,7vw,5.5rem) 50%;
  transform:translateX(-50%);
  border:1px solid rgba(53,239,255,.22);
  border-radius:26px;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(19,5,35,.97),rgba(4,1,12,.99));
  box-shadow:0 28px 90px rgba(0,0,0,.42),0 0 42px rgba(122,66,255,.12);
}
.nma-story-visual-image{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#05010d}
.nma-story-visual-image::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 65%,rgba(4,1,12,.45));
}
.nma-story-visual img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease,filter .55s ease}
.nma-story-visual:hover img{transform:scale(1.018);filter:saturate(1.05) contrast(1.02)}
.nma-story-visual figcaption{padding:clamp(1rem,3vw,1.65rem)}
.nma-story-visual figcaption>p{margin:0;color:#fff;font:700 clamp(1rem,2vw,1.3rem)/1.45 'Manrope',sans-serif}
.nma-story-visual figcaption>div{display:flex;flex-wrap:wrap;gap:.55rem 1rem;margin-top:.85rem;color:rgba(255,255,255,.62);font:500 .68rem/1.55 'IBM Plex Mono',ui-monospace,monospace}
.nma-story-visual figcaption span{flex:1 1 420px}
.nma-story-visual figcaption a{color:var(--nma-cyan,#35efff);text-decoration:none}
.nma-story-visual figcaption a:hover{text-decoration:underline}
@media (max-width:700px){
  .nma-story-visual{width:calc(100vw - 20px);border-radius:18px;margin-top:2.5rem;margin-bottom:2.5rem}
  .nma-story-visual-image{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){.nma-story-visual img{transition:none}.nma-story-visual:hover img{transform:none}}
