/* Original client models posed to the approved illustration. */
.scroll-character { cursor:default; pointer-events:none; }
.scroll-character img { display:block; transition:none; opacity:1; }
.scroll-hero #hero-title { max-width:24ch; margin-inline:auto; text-wrap:balance; }

/* The hand and standard share one coordinate system at every viewport width. */
.scroll-warrior-scene {
  position:absolute; z-index:4; left:6%; bottom:4%; width:29.8%;
  aspect-ratio:1183/1500; pointer-events:none;
}
.scroll-hero .scroll-warrior-scene .scroll-character--warrior {
  position:relative; inset:auto; width:100%; height:auto;
}
.scroll-hero .scroll-warrior-scene .scroll-character--warrior img {
  width:100%; height:auto;
}
.scroll-warrior-standard {
  position:absolute; z-index:0; width:70%; height:auto;
  left:1.885%; top:-37%; filter:drop-shadow(2px 5px 5px #21150733);
}
.scroll-hero .scroll-character--ninja {
  right:5.6%; bottom:1.5%; width:20.4%; height:auto;
}
.scroll-hero .scroll-character--ninja img { width:100%; height:auto; }

/* Rear standards belong to substantial carved stone pillars. */
.scroll-standard:before { content:none; }
.scroll-standard img { display:block; width:100%; height:auto; }
.scroll-hero .scroll-standard--chunjo {
  left:25.5%; top:20.5%; bottom:auto; width:8.5%; height:auto; opacity:.94;
}
.scroll-hero .scroll-standard--jinno {
  right:21.6%; top:22.4%; bottom:auto; width:8.5%; height:auto; opacity:.94;
}
.scroll-presentation .scroll-character img {
  width:100%; height:100%; object-fit:contain; object-position:center bottom;
}
.scroll-presentation .scroll-character--sura { left:-7.5%; width:28%; }
.scroll-presentation .scroll-character--shaman { z-index:7; }
@media(min-width:851px) {
  .scroll-hero { height:55.3vw; }
  .scroll-hero-copy { padding-top:5vw; }
  .scroll-hero-logo { width:25vw; height:14.5vw; }
  .scroll-hero h1 { font-size:clamp(18px,1.9vw,38px); margin-bottom:.7vw; }
  .scroll-hero-facts { margin-bottom:1vw; }
  .scroll-launch { font-size:clamp(13px,1.2vw,20px); }
  .scroll-hero-buttons { margin:1.6vw 0 .8vw; }
  .scroll-hero-buttons .scroll-button {
    min-width:15.5vw; min-height:3.8vw; padding:.9vw 1.8vw;
    font-size:clamp(12px,1.1vw,16px);
  }
  .scroll-explore { margin-top:2vw; }
  .scroll-presentation {
    height:27.6vw; margin-top:-1.05vw;
    padding:2.5vw 0 3vw 18.3%; grid-template-columns:28vw 33vw; gap:1.1vw;
  }
  .scroll-preview { width:100%; margin-inline:0; }
  .scroll-presentation .scroll-character { height:94%; bottom:0; }
  .scroll-presentation-copy { text-align:center; }
  .scroll-presentation h2 { font-size:clamp(24px,2.7vw,50px); }
  .scroll-presentation p:not(.scroll-eyebrow) { font-size:clamp(14px,1.15vw,16px); }
  .scroll-presentation .scroll-character--sura { left:1%; width:24%; height:124%; bottom:-30%; }
  .scroll-presentation .scroll-character--shaman { right:.5%; width:26%; height:118%; bottom:-24%; }
}
@media(max-width:850px) {
  .scroll-warrior-scene { left:1%; width:40%; bottom:3%; }
  .scroll-hero .scroll-character--ninja { right:2%; width:26%; bottom:2%; }
  .scroll-presentation .scroll-character--sura { left:-10%; width:33%; }
  .scroll-hero .scroll-standard--chunjo { left:24%; top:33%; width:9%; }
  .scroll-hero .scroll-standard--jinno { right:16%; top:32%; width:10%; }
}
@media(max-width:540px) {
  .scroll-hero-logo { width:250px; height:145px; }
  .scroll-hero h1 { font-size:25px; }
  .scroll-presentation { background-size:auto 100%; }
  .scroll-warrior-scene { left:1%; width:52%; bottom:4%; }
  .scroll-warrior-standard { width:64%; left:2.3825%; top:-8%; }
  .scroll-hero .scroll-character--ninja { right:5%; width:36%; bottom:4%; }
  .scroll-presentation .scroll-character--sura { left:-8%; width:55%; }
  .scroll-hero .scroll-standard--chunjo { left:42%; top:auto; bottom:80px; width:13%; }
  .scroll-hero .scroll-standard--jinno { right:7%; top:auto; bottom:65px; width:15%; }
}