/* Fluid spacing and character-specific motion. */
body[data-concept=play] .hero>.manuscript-subtitle{font-size:clamp(20px,2.25vw,34px);font-weight:650;line-height:1.5;margin:26px auto 30px;max-width:1000px;word-break:keep-all;padding-inline:12px}
body[data-concept=play] #app{padding-bottom:0}
body[data-concept=play] .contact{width:100%;max-width:none;margin:0;border-radius:0;padding:clamp(40px,6vw,90px) max(6vw,calc((100vw - 1450px)/2)) max(90px,7vw);background:#153269}
body[data-concept=play] .contact-grid{max-width:1450px;margin:auto}
body[data-concept=play] .hero-art.hero-ensemble{width:min(1120px,100%);height:clamp(320px,42vw,550px)}
body[data-concept=play] .hero-cup{height:105%;width:47%;left:27%;top:0}
body[data-concept=play] .hero-person{height:78%;width:30%;left:0;top:22%}
body[data-concept=play] .hero-walker{height:68%;width:27%;right:0;top:30%}
body[data-concept=play] .hero-drops{height:28%;width:15%;right:15%;top:0}
body[data-concept=play] .story-scene{margin-block:clamp(24px,4vw,65px);padding-top:clamp(35px,5vw,80px)}
body[data-concept=play] .intro-scene{min-height:clamp(620px,48vw,760px)}
body[data-concept=play] .project-scene{min-height:clamp(660px,50vw,800px)}
body[data-concept=play] .intro-person{height:clamp(320px,30vw,480px);bottom:15px}
body[data-concept=play] .project-person{height:clamp(370px,35vw,550px);bottom:10px}
body[data-concept=play] .field-film{padding-block:clamp(30px,5vw,70px)}
body[data-concept=play] .values,body[data-concept=play] .impact,body[data-concept=play] .directory{padding-block:clamp(50px,7vw,105px)}
.character-rig{height:100%;width:100%}.character-rig svg{display:block;width:100%;height:100%;overflow:visible}
.rig-eye{transform-box:fill-box;transform-origin:center;animation:character-blink 5.8s ease-in-out infinite}
.person-senior .rig-eye{animation-name:character-smile;animation-duration:6.4s}
.rig-sip{transform-origin:310px 332px;animation:character-sip 6.8s ease-in-out infinite}
.rig-leg{transform-origin:355px 470px;animation:character-step 1.6s ease-in-out infinite}
.rig-leg-right{animation-delay:-.8s}
.rig-torso{animation:character-rise .8s ease-in-out infinite}
.character-rig:not(.playing) :is(.rig-eye,.rig-sip,.rig-leg,.rig-torso){animation-play-state:paused}
@keyframes character-blink{0%,42%,47%,100%{transform:scaleY(1)}44%,45%{transform:scaleY(.12)}}
@keyframes character-smile{0%,40%,62%,100%{transform:scaleY(1)}45%,56%{transform:scaleY(.55)}}
@keyframes character-sip{0%,12%,85%,100%{transform:rotate(0)}28%,62%{transform:rotate(-9deg)}42%{transform:rotate(-7deg)}}
@keyframes character-step{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes character-rise{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
body.reduced :is(.rig-eye,.rig-sip,.rig-leg,.rig-torso){animation:none}
@media(prefers-reduced-motion:reduce){.rig-eye,.rig-sip,.rig-leg,.rig-torso{animation:none}}
@media(max-width:1000px) and (min-width:761px){
body[data-concept=play] .story-bubble{width:70%;padding:35px}
body[data-concept=play] .story-bubble h2{font-size:32px}
body[data-concept=play] .intro-person{width:30%;height:330px;left:0;bottom:0}
body[data-concept=play] .project-person{width:30%;height:370px;right:0;bottom:0}
body[data-concept=play] .intro-scene{min-height:640px}
body[data-concept=play] .project-scene{min-height:700px}
}
@media(max-width:760px){
body[data-concept=play] .hero{padding-top:clamp(32px,8vw,60px)}
body[data-concept=play] .hero>.manuscript-subtitle{font-size:clamp(20px,3.5vw,26px);margin-block:22px;max-width:560px}
body[data-concept=play] .hero-art.hero-ensemble{height:clamp(280px,58vw,410px);margin-top:22px}
body[data-concept=play] .story-scene{min-height:0;padding:30px 5% 250px;margin-block:25px}
body[data-concept=play] .story-bubble{padding:clamp(24px,5vw,36px);width:100%;border-radius:30px}
body[data-concept=play] .story-bubble h2{font-size:clamp(25px,4.4vw,32px)}
body[data-concept=play] .story-bubble p{font-size:16px}
body[data-concept=play] .intro-person{height:245px;width:50%;left:2%;bottom:0}
body[data-concept=play] .intro-cup{height:200px;width:32%;right:0;bottom:10px}
body[data-concept=play] .project-person{height:265px;width:45%;right:5%;bottom:0}
body[data-concept=play] .project-flower{height:130px;width:24%;left:3%;bottom:40px}
body[data-concept=play] .project-scene{padding-bottom:270px}
body[data-concept=play] .map-section{padding-top:30px;margin-top:15px;padding-bottom:35px}
body[data-concept=play] .contact-grid>div+div{margin-top:26px}
body[data-concept=play] .contact-grid a{font-size:clamp(24px,5vw,32px)}
body[data-concept=flow] .photo-journey{min-height:0}
body[data-concept=flow] .photo-journey .photo-ribbon{height:740px}
body[data-concept=flow] .journey-photo{top:calc(var(--y) * .7);max-width:180px}
body[data-concept=flow] .map-section{padding-block:38px 0}
body[data-concept=flow] .list-mode .album-stage{padding-block:40px}
body[data-concept=flow] .gallery-heading h2{font-size:clamp(34px,7vw,48px)}
body[data-concept=flow] .location-row h3{font-size:clamp(23px,4.6vw,30px);word-break:keep-all;overflow-wrap:break-word}
body .review-tools{max-width:calc(100% - 24px);gap:10px;padding:10px 14px}
body .review-tools :is(button,a){font-size:12px;white-space:nowrap}
}
@media(max-width:480px){
body[data-concept=play] .hero-art.hero-ensemble{height:280px;width:100%}
body[data-concept=play] .illustrated-value{padding:28px 24px 200px}
body[data-concept=play] .illustrated-value h3{font-size:clamp(26px,7vw,33px)}
body[data-concept=play] .illustrated-value .manuscript-english{font-size:17px!important}
body[data-concept=play] .illustrated-value p{font-size:16px}
body[data-concept=play] .value-illustration{height:210px;width:53%;right:1%}
body[data-concept=play] .value:nth-child(2) .value-illustration{height:230px}
body[data-concept=play] .directory-heading{padding-right:70px;min-height:100px}
body[data-concept=play] .directory-person{width:78px;height:110px}
body[data-concept=flow] .photo-journey .photo-ribbon{height:710px}
body[data-concept=flow] .editorial-copy{padding:30px 20px}
body[data-concept=flow] .intro-copy h2{font-size:28px}
body[data-concept=flow] .value:first-child h3{font-size:30px}
body[data-concept=flow] .value h3{font-size:27px}
}