/* ============================================================================
   4 · Trích dẫn (story band)
   Design source: design/v3.0.1/reference/nam-yam-index.html  L167–174
   ============================================================================ */

#story {
  height: clamp(560px, 72vh, 760px);
  overflow: hidden;
  background: var(--ny-ink);
}

.ny-story__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.9);
}

.ny-story__shade {
  position: absolute; inset: 0;
  background: var(--ny-scrim-story);
}

.ny-story__copy {
  position: relative;
  height: 100%; width: 100%;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(16px, 2.2vh, 26px);
  padding: 0 var(--ny-pad);
}

.ny-story__copy blockquote {
  max-width: 680px;
  font: var(--ny-serif-regular) var(--ny-fs-quote)/1.06 var(--ny-serif);
  color: var(--ny-white);
  text-wrap: balance;
}

.ny-story__copy p {
  max-width: 680px;
  font: var(--ny-sans-light) var(--ny-fs-small)/1.7 var(--ny-sans);
  color: var(--ny-white-72);
}

@media (max-width: 760px) {
  #story { height: min(76svh, 560px); }
  .ny-story__bg   { object-position: 66% center; }
  .ny-story__copy { padding: 0 var(--ny-pad-sm); }
  .ny-story__copy blockquote,
  .ny-story__copy p { max-width: 100%; }
}