/* Whole typography plate extracted from the supplied reference. */
.hero-reference-type .hero-type-art{position:relative;width:100%;aspect-ratio:1832/858;background:none;-webkit-mask:none;mask:none;z-index:0;pointer-events:none;margin:10px auto 0}
.hero.hero-reference-type h1.chinese-title,.hero.hero-reference-type .hero-tagline{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;transform:none!important}
.hero.hero-reference-type .people-stage{margin-top:clamp(-170px,-9vw,-60px)}
@media(max-width:760px){.hero-reference-type .hero-type-art{margin-top:30px}.hero.hero-reference-type .people-stage{margin-top:-15px}}
/* Keep the people visible in the first desktop viewport. */
@media(min-width:761px){
 .hero.hero-reference-type{height:calc(100svh - 96px);min-height:430px;max-height:940px;padding-top:0}
 .hero-reference-type .hero-type-art{position:absolute;top:8px;left:4%;width:92%;height:calc(100% - 190px);aspect-ratio:auto;margin:0;background-position:center top;background-color:transparent}
 .hero.hero-reference-type .people-stage{position:absolute;left:0;right:0;bottom:0;margin:0;padding-top:15px}
}

.hero-reference-type .hero-type-art img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center top}

/* Move both side phrases 15px inward from their existing edge positions. */
.hero-reference-type .hero-type-art .hero-type-left{object-position:left top;transform:translateX(-3vw);translate:15px 0}
.hero-reference-type .hero-type-art .hero-type-right{object-position:right top;transform:translateX(3vw);translate:-15px 0}

/* Temporary supplied artwork. Remove hero-type-experiment on the hero to restore the three original PNGs. */
.hero-reference-type .hero-type-art .hero-type-trial{display:none}
.hero-type-experiment .hero-type-art .hero-type-trial{display:block}
.hero-type-experiment .hero-type-art .hero-type-left,.hero-type-experiment .hero-type-art .hero-type-center,.hero-type-experiment .hero-type-art .hero-type-right{display:none}
@media(min-width:761px){.hero-type-experiment .hero-type-art{left:1%;width:98%}}
@media(max-width:760px){.hero-type-experiment .hero-type-art{aspect-ratio:2172/724}}

/* Original side phrases: independently sized to fill the space toward the center. */
@media(min-width:761px){
.hero-reference-type:not(.hero-type-experiment) .hero-type-art .hero-type-left,
.hero-reference-type:not(.hero-type-experiment) .hero-type-art .hero-type-right{width:106vw;height:auto;aspect-ratio:1832/858;top:48%;bottom:auto;transform:translateY(-50%);object-fit:contain}
.hero-reference-type:not(.hero-type-experiment) .hero-type-art .hero-type-left{left:-3vw;right:auto;object-position:left center}
.hero-reference-type:not(.hero-type-experiment) .hero-type-art .hero-type-right{right:-3vw;left:auto;object-position:right center}
}
/* Scale both side phrases to 90% of their previous size, keeping their anchors. */
.hero-reference-type .hero-type-art .hero-type-left,
.hero-reference-type .hero-type-art .hero-type-right{width:calc(90% - 18px)}
.hero-reference-type .hero-type-art .hero-type-right{left:auto;right:0}
@media(min-width:761px){
.hero-reference-type:not(.hero-type-experiment) .hero-type-art .hero-type-left,
.hero-reference-type:not(.hero-type-experiment) .hero-type-art .hero-type-right{width:calc(95.4vw - 18px)}
.hero-reference-type:not(.hero-type-experiment) .hero-type-art .hero-type-right{right:-3vw}
}

/* A soft diagonal sheen travels from lower left to upper right. */
.hero-reference-type .hero-type-art{isolation:isolate}
.hero-reference-type .hero-type-art::after{content:'';position:absolute;inset:-30%;z-index:2;pointer-events:none;background:linear-gradient(45deg,transparent 45%,rgba(255,255,255,.16) 48%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.16) 52%,transparent 55%);mix-blend-mode:screen;opacity:0;transform:translate(-85%,85%);animation:hero-type-sheen 15s cubic-bezier(.22,.61,.36,1) infinite}
@keyframes hero-type-sheen{0%,4.8%{opacity:0;transform:translate(-85%,85%)}6%{opacity:1}16.8%{opacity:1;transform:translate(85%,-85%)}18%,100%{opacity:0;transform:translate(85%,-85%)}}
@media(prefers-reduced-motion:reduce){.hero-reference-type .hero-type-art::after{animation:none;display:none}}