/* The same four scenes, with a shorter mobile canvas and flexible text rows. */
@media(max-width:680px) {
 #experience {--mobile-story-height:clamp(650px,78svh,740px)}
 #experience .visual-stage {
  height:var(--mobile-story-height);
  min-height:0;
  margin-bottom:calc(-1 * var(--mobile-story-height));
 }
 #experience .visual-stage canvas {transform:translateY(-20px)}
 #experience .story-chapter {
  height:auto;
  min-height:var(--mobile-story-height);
  padding:100px 20px 78px;
  display:grid;
  grid-template-rows:auto minmax(150px,1fr) auto;
  gap:0;
  align-content:stretch;
  justify-content:stretch;
 }
 #experience .chapter-top,
 #experience .chapter-bottom {
  position:relative;
  inset:auto;
  width:100%;
  max-width:420px;
 }
 #experience .chapter-top {grid-row:1}
 #experience .chapter-bottom {grid-row:3;padding-top:0;background:none}
 #experience .story-chapter h1 {font-size:clamp(44px,12.8vw,68px)}
 #experience .story-chapter h2 {font-size:clamp(38px,10.8vw,56px);max-width:420px}
 #experience .chapter-top>.eyebrow {font-size:8px;line-height:1.6;margin-bottom:17px}
 #experience .chapter-bottom>p {font-size:13px;line-height:1.7}
 #experience .chapter-next {bottom:27px}
 #experience .chapter-fine {font-size:7px}
 #experience .stage-caption {bottom:13px}
}
@media(max-width:370px) {
 #experience .story-chapter {padding-inline:16px}
 #experience .chapter-top>.eyebrow {font-size:7px}
}