.mastery-story{position:relative;background:#faf7ef url('../assets/images/story-parchment.png') center / 100% 100% no-repeat;color:#222821}
.mastery-story-stage{position:relative;display:grid;place-items:center;padding:110px 24px;min-height:95vh;isolation:isolate}
.mastery-story-copy{width:min(100%,560px);position:relative;z-index:2}
main>section#mastery-story h2{font:normal clamp(13px,1.25vw,19px)/1.5 Georgia,serif;letter-spacing:.3em;color:#89602c;margin:0 0 25px}
.mastery-story-passage{font:normal clamp(18px,1.42vw,25px)/1.4 Georgia,'Times New Roman',serif;margin:0}
.mastery-story-line{display:block;color:#62574b;transition:color 400ms ease,text-shadow 400ms ease;cursor:pointer}
.mastery-story-line.is-active{color:#201a16;text-shadow:.25px 0 currentColor}
.mastery-story-art{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.mastery-story-vignette{position:absolute;width:var(--art-width);left:var(--art-left);top:var(--art-top);transform:translate(-50%,-50%);height:auto;opacity:0;transition:opacity 500ms ease}
.mastery-story-vignette.is-active{opacity:1;transition-duration:1200ms}
/* The speaking scene spans both sides behind the stationary copy. */
.mastery-story-art .mastery-story-vignette:is([data-story-image="8"],[data-story-image="9"],[data-story-image="10"]){width:100%;max-width:none;height:auto;max-height:none;left:50%;top:55%;object-fit:contain}
@media(max-width:1100px){
 .mastery-story-art:has(:is([data-story-image="8"],[data-story-image="9"],[data-story-image="10"]).is-active){top:0;bottom:0;height:auto}
 .mastery-story-art .mastery-story-vignette:is([data-story-image="8"],[data-story-image="9"],[data-story-image="10"]){top:50%}
}
.mastery-story-vignette[data-story-image="7"]{max-height:85%;object-fit:contain}
@media(max-width:1100px){.mastery-story-art .mastery-story-vignette[data-story-image="7"]{left:30%;top:50%}}
.mastery-story-vignette[data-story-image="6"]{max-height:85%;object-fit:contain}
.mastery-story-vignette[data-story-image="3"],.mastery-story-vignette[data-story-image="4"],.mastery-story-vignette[data-story-image="5"]{max-height:85%;object-fit:contain}
@media(max-width:1100px){.mastery-story-art .mastery-story-vignette[data-story-image="5"]{left:30%;top:50%}}
@media(max-width:1100px){.mastery-story-art .mastery-story-vignette[data-story-image="3"]{left:30%;top:50%}}
@media(max-width:1100px){.mastery-story-art .mastery-story-vignette[data-story-image="1"]{left:30%;top:50%}}

@media(max-width:700px){
 .mastery-story-copy{width:min(100%,430px)}
 .mastery-story-passage{font-size:19px}
 .mastery-story-stage{padding:65px 7%}
 .mastery-story-vignette{left:var(--mobile-left,75%);top:var(--mobile-top,86%);width:var(--mobile-width,24%)}
}
@media(prefers-reduced-motion:reduce){
 .mastery-story-line{transition:none}
 .mastery-story-vignette{transition:none}
}
.mastery-story-line[data-story-step="9"]{margin-top:.65em}
@media(max-width:700px){.mastery-story-vignette[data-story-image="0"]{width:40%;left:74%;top:86%}}
.mastery-story-line:focus-visible{outline:1px solid #89602c;outline-offset:4px}
@media(max-width:700px){.mastery-story-stage:has(.mastery-story-vignette){padding-block:150px}}
/* Full bleed even when the rest of the page has its wide-screen width cap. */
@media(min-width:1801px){.mastery-story{width:100vw;margin-left:calc((1800px - 100vw)/2)}}
/* A separate lower illustration area keeps tablet/mobile copy unobstructed. */
@media(max-width:1100px){
 .mastery-story-stage{min-height:0;padding:75px 7%}
 .mastery-story-stage:has(.mastery-story-vignette){padding-top:75px;padding-bottom:300px}
 .mastery-story-art{top:auto;bottom:20px;height:260px}
 .mastery-story-vignette,.mastery-story-vignette[data-story-image="0"]{top:50%;left:70%;width:auto;max-width:48%;max-height:250px;object-fit:contain}
}
@media(max-width:700px){
 .mastery-story-stage:has(.mastery-story-vignette){padding-top:60px;padding-bottom:230px}
 .mastery-story-art{height:200px;bottom:15px}
 .mastery-story-vignette,.mastery-story-vignette[data-story-image="0"]{max-width:60%;max-height:190px}
}