/* Separate audience-film studies; the approved composer is inherited intact. */
:root{--audience-ink:var(--studio-ink);--audience-paper:var(--studio-paper)}
body{background:var(--audience-paper)}
.sth.audience-hero{position:relative;display:block;isolation:isolate;height:100svh;min-height:0;padding:0;overflow:hidden;background:var(--audience-ink)}
.audience-stage,.audience-poster,.audience-film,.audience-grain{position:absolute;inset:0;width:100%;height:100%}
.audience-stage{overflow:hidden}.audience-poster,.audience-film{object-fit:cover;object-position:50% 50%;display:block}
.audience-film{opacity:0}.audience-hero.is-playing .audience-film,.audience-hero.is-ready .audience-film{opacity:1}
.audience-grain{pointer-events:none;object-fit:cover;mix-blend-mode:overlay;opacity:.5;z-index:2}
.audience-copy{position:absolute;z-index:3;top:clamp(30px,5.5svh,76px);left:5%;width:90%;text-align:center;color:var(--studio-white);pointer-events:none}
.audience-copy h1{margin:0 auto 20px;max-width:1150px;font-weight:700;font-size:clamp(42px,4.7vw,80px);line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.audience-copy h1 span{display:block}.audience-copy p{font-weight:400;font-size:var(--hero-subhead-size);line-height:1.45;text-wrap:balance;max-width:680px;margin:0 auto}
.audience-phrase{white-space:nowrap}
.audience-stage:after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,15,18,.35),transparent 39%,transparent 78%,rgba(10,15,18,.14));pointer-events:none}
.audience-controls{position:absolute;z-index:4;right:12px;bottom:12px;display:flex;gap:8px}
.audience-controls[hidden]{display:none}
.audience-controls button{display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;color:var(--studio-white);position:relative;padding:0;cursor:pointer}
.audience-controls button:before{content:'';position:absolute;inset:4px;border:1.5px solid currentColor;border-radius:50%;pointer-events:none}
.audience-controls svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.audience-controls .pause-icon{stroke-width:3}.play-icon{display:none;fill:currentColor;stroke:none}.film-toggle[aria-pressed=true] .pause-icon{display:none}.film-toggle[aria-pressed=true] .play-icon{display:block}
.sound-on{display:none}.sound-toggle[aria-pressed=true] .sound-on{display:block}.sound-toggle[aria-pressed=true] .sound-off{display:none}
.audience-controls button:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:50%}
.has-media-notice .film-status{position:absolute;clip:auto;clip-path:none;width:auto;height:auto;overflow:visible;white-space:normal;z-index:5;right:24px;bottom:82px;max-width:260px;padding:12px 16px;background:var(--audience-ink);color:var(--studio-white);font-size:14px;line-height:1.4;border-radius:12px}
.audience-bridge{min-height:65svh;padding:110px 24px 140px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.audience-bridge h2{font-size:clamp(38px,4.6vw,68px);line-height:1.05;letter-spacing:-.04em;margin:20px 0 28px;font-weight:650}
.audience-bridge p{max-width:600px;font-size:18px;line-height:1.6;text-wrap:balance;margin:0}.audience-bridge .audience-context{font-size:15px;color:var(--studio-blue)}
.prefooter{min-height:720px}.sth-dock{z-index:10}
/* Keep the hospital copy above Grandma's forward lean in the reading take. */
@media(min-width:1101px){body[data-audience="pediatric"] .audience-copy{top:24px}body[data-audience="pediatric"] .audience-copy h1{font-size:clamp(42px,4.1vw,64px);margin-bottom:12px}body[data-audience="pediatric"] .audience-film,body[data-audience="pediatric"] .audience-poster{object-position:50% 0}}
@media(max-width:1100px){.audience-copy h1{font-size:clamp(38px,5.5vw,60px)}.audience-copy p{max-width:550px}}
@media(max-width:700px){.sth.audience-hero{min-height:0}.audience-copy{top:28px;left:6%;width:88%}.audience-copy h1{font-size:clamp(32px,8.1vw,44px);margin-bottom:16px}.audience-copy p{line-height:1.4;max-width:330px}.audience-bridge{padding:85px 24px 100px;min-height:60svh}.audience-bridge p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.audience-grain{display:none}}
/* Classroom copy gets a quiet olive-taupe wash, sized to the text block.
   Its fade ends 32px below the subheader, including when lines reflow. */
body[data-audience="classroom"] .audience-stage:after{background:linear-gradient(to bottom,transparent 78%,rgba(10,15,18,.14))}
body[data-audience="classroom"] .audience-copy{--copy-top:clamp(30px,5.5svh,76px);top:var(--copy-top)}
body[data-audience="classroom"] .audience-copy:before{content:'';position:absolute;z-index:-1;pointer-events:none;left:50%;width:100vw;transform:translateX(-50%);top:calc(-1 * var(--copy-top));bottom:-32px;background:linear-gradient(to bottom,rgba(66,62,46,.34) 0%,rgba(66,62,46,.30) 72%,rgba(66,62,46,0) 100%)}
@media(max-width:700px){body[data-audience="classroom"] .audience-copy{--copy-top:28px}}

/* Short landscape phones need a stable canvas for copy and controls. */
@media (orientation:landscape) and (max-width:1000px) and (max-height:600px){
  .sth.audience-hero{height:640px;min-height:640px;max-height:none}
}