/* HanAnHua v120 — About illustration stays above the right-side text and never overlaps copy */
.statement-with-art{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.statement-with-art .eyebrow,
.statement-with-art .statement-grid,
.statement-with-art .display,
.statement-with-art .statement-copy{
  position:relative;
  z-index:2;
}

/* Keep the right column as a normal document flow so the illustration can never cover text. */
.statement-with-art .statement-copy{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

.statement-art{
  position:relative;
  z-index:1;
  width:clamp(470px,35vw,650px);
  max-width:none;
  align-self:center;
  left:50%;
  translate:-50% 0;
  margin:0 auto clamp(14px,1.4vw,24px);
  pointer-events:none;
  user-select:none;
  opacity:.96;
  filter:drop-shadow(0 16px 22px rgba(17,17,17,.08));
  will-change:transform,opacity;
}

.statement-art img{
  display:block;
  width:100%;
  height:auto;
  transform-origin:50% 100%;
  animation:hanAboutArtFloat 5.9s 1.1s ease-in-out infinite;
}

html.js-ready.motion-enabled .statement-art{
  animation:hanAboutArtEnter .9s .24s cubic-bezier(.18,.82,.22,1) both;
}

@keyframes hanAboutArtEnter{
  from{opacity:0;transform:translateY(24px) scale(.97)}
  to{opacity:.96;transform:translateY(0) scale(1)}
}

@keyframes hanAboutArtFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(-.15deg)}
  50%{transform:translate3d(0,-7px,0) rotate(.15deg)}
}

/* Desktop/laptop: illustration is centered directly above the paragraph. */
@media (min-width:981px){
  .statement-with-art .statement-copy{
    align-self:end;
  }
  .statement-art{
    width:clamp(480px,35vw,650px);
    max-width:none;
    align-self:center;
    margin-left:auto;
    margin-right:auto;
  }
}

/* Medium windows: progressively reduce the art without changing the text position. */
@media (max-width:1280px){
  .statement-art{
    width:clamp(430px,37vw,560px);
  }
}

@media (max-width:1080px){
  .statement-art{
    width:clamp(380px,41vw,500px);
  }
}

/* When the about grid stacks, keep the image centered and fully separated from all text. */
@media (max-width:980px){
  .statement-with-art .statement-copy{
    width:100%;
  }
  .statement-art{
    width:min(78vw,650px);
    max-width:100%;
    left:auto;
    translate:none;
    margin:0 auto 22px;
  }
}

@media (max-width:720px){
  .statement-art{
    width:min(88vw,590px);
    margin-bottom:18px;
  }
}

@media (max-width:520px){
  .statement-art{
    width:min(94vw,520px);
    margin-bottom:16px;
  }
}

@media (max-width:390px){
  .statement-art{
    width:min(96vw,470px);
    margin-bottom:14px;
  }
}

/* Preserve gentle motion while keeping the image in layout flow. */
html.motion-lite .statement-art img{
  animation:hanAboutArtFloat 6.3s 1s ease-in-out infinite;
}

@media (prefers-reduced-motion:reduce){
  .statement-art,
  .statement-art img{
    animation:none!important;
    transform:none!important;
  }
}