/* One content rail and spacing scale for the illustration concept. */
body[data-concept=play]{--play-content:1200px;--play-gutter:clamp(20px,4.5vw,72px);--play-space:clamp(64px,7vw,104px)}
body[data-concept=play] :is(.hero.wrap,.values.wrap,.impact.wrap,.map-section.wrap,.directory.wrap,.field-film.wrap){width:calc(100% - 2 * var(--play-gutter));max-width:var(--play-content);margin-inline:auto}
body[data-concept=play] .hero{padding-bottom:var(--play-space)}
body[data-concept=play] .story-scene{width:100%;max-width:none;margin:0;padding:0 0 var(--play-space);min-height:0}
body[data-concept=play] .story-container{width:calc(100% - 2 * var(--play-gutter));max-width:var(--play-content);grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(32px,4vw,64px)}
body[data-concept=play] .story-container .story-bubble{grid-column:1;grid-row:1;padding:clamp(26px,3vw,42px);border-radius:32px;align-self:center}
body[data-concept=play] .story-bubble h2{font-size:clamp(25px,2.6vw,36px)}
body[data-concept=play] .story-bubble :is(p,.intro-body){font-size:clamp(15px,1.35vw,18px);margin-top:22px}
body[data-concept=play] .story-bubble:after{top:58%;bottom:auto;left:auto;right:-26px;width:30px;height:34px;clip-path:polygon(0 0,100% 65%,0 100%);transform:none}
body[data-concept=play] .story-visual{grid-column:2;grid-row:1;margin:0;width:100%;align-self:center}
body[data-concept=play] .story-visual img{width:100%;height:auto;display:block}
body[data-concept=play] .project-scene .story-container{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
body[data-concept=play] .project-scene .story-bubble{grid-column:2}
body[data-concept=play] .project-scene .story-visual{grid-column:1}
body[data-concept=play] .project-bubble:after{left:-26px;right:auto;top:58%;bottom:auto;transform:scaleX(-1)}
body[data-concept=play] :is(.values,.impact,.map-section,.directory){padding-block:calc(var(--play-space) / 2)}
body[data-concept=play] .field-film{padding:0 0 calc(var(--play-space) / 2)}
body[data-concept=play] .value-items{max-width:1000px}
/* Stack before the text column becomes too narrow; keep text before its scene. */
@media(max-width:800px){
 body[data-concept=play] :is(.story-container,.project-scene .story-container){grid-template-columns:minmax(0,1fr);gap:20px;max-width:620px}
 body[data-concept=play] .story-container .story-bubble{grid-column:1;grid-row:1;padding:28px}
 body[data-concept=play] :is(.story-visual,.project-scene .story-visual){grid-column:1;grid-row:2;width:min(100%,440px);justify-self:center}
 body[data-concept=play] .story-bubble:after{top:auto;bottom:-24px;right:25%;left:auto;width:32px;height:28px;clip-path:polygon(0 0,100% 0,25% 100%);transform:none}
 body[data-concept=play] .project-bubble:after{left:25%;right:auto;transform:scaleX(-1)}
 body[data-concept=play] .story-bubble h2{font-size:clamp(25px,4vw,32px)}
}

/* Hero slogan and impact label refinements. */
body[data-concept=play]{--play-type-slogan:34px}
body[data-concept=play] .hero h1>span:first-child{font-weight:650}
body[data-concept=play] .hero>.manuscript-subtitle{font-size:var(--play-type-slogan);max-width:100%;margin-top:0}
body[data-concept=play] .hero>.manuscript-subtitle:before{content:"";display:block;width:72px;height:2px;background:currentColor;margin:28px auto 24px;opacity:.55}
body[data-concept=play] .manuscript-subtitle .subtitle-en{font-size:.7em;font-weight:750;letter-spacing:.13em;margin-top:12px}
body[data-concept=play] .impact .metric.primary{border-bottom:0}
body[data-concept=play] .metric.primary>p{padding-bottom:9.6px}
@media(max-width:760px){
 body[data-concept=play]{--play-type-slogan:clamp(22px,4.5vw,34px)}
 body[data-concept=play] .hero>.manuscript-subtitle:before{width:56px;margin:24px auto 20px}
 body[data-concept=play] .metric.primary>p{padding-bottom:7.2px}
}