/* Responsive stage: retain the immersive art while making the story usable
   on classroom laptops, tablets, portrait displays and touchscreens. */
#app{height:100vh;height:100svh}

@media (max-width:1100px),(max-height:680px),(orientation:portrait){
  #app{display:block!important;min-height:100vh;min-height:100svh}
  #small{display:none!important}
  body{overflow:hidden;overscroll-behavior:none}
  header{left:20px;right:20px;height:66px;gap:12px}
  .wordmark{font-size:13px;white-space:nowrap}
  .wordmark span{font-size:8px;letter-spacing:1px;margin-top:4px}
  .top-actions{gap:clamp(5px,1.5vw,14px);justify-content:flex-end}
  .top-actions button{font-size:clamp(9px,1.1vw,12px);white-space:nowrap}
  .top-actions #index{padding:9px 12px}
  .top-actions #index span{margin-left:8px}
  main{inset:66px 0 78px;perspective:none;overflow:hidden}
  .slide,.slide.active,.slide.exit-forward,.slide.exit-backward,.slide.from-backward,.slide.from-backward.active{
    inset:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding:clamp(18px,4vh,34px) clamp(20px,5vw,58px) 88px;
    transform:none;transition:opacity .38s ease,visibility .38s ease;will-change:opacity;
  }
  .slide>.copy,.slide.hero>.copy,.slide.wide>.copy{
    width:min(100%,780px);max-width:100%;margin:auto;transform:none;will-change:auto;
  }
  .slide.wide>.copy{width:100%}
  h1{font-size:clamp(48px,9.4vw,100px);letter-spacing:clamp(-5px,-.6vw,-2px);line-height:.98}
  h2,.wide h2,.question h2{font-size:clamp(34px,6.8vw,64px);letter-spacing:-2px;line-height:1.02}
  .eyebrow{font-size:10px;letter-spacing:1.7px;margin-bottom:18px}
  .lede{font-size:clamp(16px,2.2vw,20px);line-height:1.55;max-width:620px}
  .hero .lede{font-size:clamp(16px,2.2vw,20px)}
  .family{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
  .family article{padding:clamp(15px,2.4vw,22px)}
  .family .initial{margin-bottom:18px}
  .family .change{min-height:0;font-size:clamp(15px,2vw,18px)}
  .acts,.themes{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}
  .acts button,.themes button{padding:clamp(12px,2vw,20px);min-width:0}
  .acts h3,.themes h3{font-size:clamp(17px,2.5vw,24px);margin:12px 0 8px}
  .acts p,.themes p{font-size:clamp(13px,1.8vw,16px);line-height:1.45}
  .themes button{min-height:150px}
  .opinion-prompts{gap:12px;margin:18px 0}
  .opinion-prompts span{font-size:clamp(15px,2vw,18px)}
  footer{left:0;right:0;height:76px;gap:clamp(8px,2vw,20px);padding:0 20px;background:linear-gradient(180deg,#090d1600,#090d16eF 30%)}
  .footer-info{min-width:0;gap:9px;white-space:nowrap}
  #count{font-size:12px}
  #sectionLabel{max-width:18vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
  #steps{max-width:none;min-width:35px;gap:3px}
  #steps button{min-width:3px;height:24px}
  #steps button:before{top:11px;height:2px}
  #steps button[aria-current=true]:before{top:10px;height:4px}
  .keyboard-hint{font-size:0;gap:3px;letter-spacing:0;white-space:nowrap}
  .keyboard-hint kbd{font-size:10px;padding:3px 5px}
  .navigation[hidden]{display:flex!important}
  .navigation{gap:6px;margin-left:0}
  .navigation button{height:39px;border-radius:22px;border-color:#a5b4d54a}
  .navigation #prev{width:39px;font-size:18px}
  .navigation #next{min-width:92px;padding:0 13px;gap:8px;font-size:11px}
  .stage-caption{right:20px;bottom:80px;gap:9px;font-size:8px;letter-spacing:1px}
  .stage-caption button{padding:7px 10px;font-size:10px}
  #chapterStamp{right:20px;top:77px;font-size:9px}
  #stage{inset:0;border-radius:0;opacity:.58;touch-action:pan-y}
  #stage:after{background:linear-gradient(90deg,#080b13dc,transparent 100%),linear-gradient(0deg,#080b13c9,transparent 65%)}
  body[data-layout=wide] #stage:after{background:#080d16b8}
  .noise{inset:0;border-radius:0}
  #menu{top:60px;right:14px;width:min(320px,calc(100vw - 28px));max-height:calc(100svh - 78px)}
  #notes{left:14px;right:14px;bottom:82px;max-height:min(58svh,420px);padding:17px 18px;border-radius:14px}
  #notes ol{display:block;padding-left:22px}
  #notes li{font-size:14px;margin:8px 0}
  #notesEvidence{font-size:12px}
  dialog{width:min(650px,calc(100vw - 28px));max-height:calc(100svh - 32px);padding:28px 22px}
}

@media (max-width:700px){
  header{left:14px;right:14px;height:58px}
  .wordmark{font-size:11px;letter-spacing:.3px}
  .wordmark span{font-size:7px;letter-spacing:.7px}
  .top-actions{gap:3px}
  .top-actions button{font-size:9px;padding:7px 6px}
  .top-actions #motion,.top-actions #full{display:none}
  .top-actions #index{padding:8px 10px}
  main{inset:58px 0 70px}
  .slide,.slide.active,.slide.exit-forward,.slide.exit-backward,.slide.from-backward,.slide.from-backward.active{padding:22px 19px 94px}
  h1{font-size:clamp(44px,12vw,76px);letter-spacing:-3px}
  h2,.wide h2,.question h2{font-size:clamp(32px,8.5vw,48px);letter-spacing:-1.8px;margin-bottom:18px}
  .eyebrow{font-size:9px;letter-spacing:1.3px;margin-bottom:15px}
  .family{grid-template-columns:1fr 1fr;gap:8px}
  .family article{padding:13px 12px;border-radius:11px}
  .family .initial{font-size:9px;margin-bottom:12px}
  .family h3{font-size:20px;margin-bottom:12px}
  .family .old{font-size:12px;margin-top:10px}
  .family .change{font-size:14px}
  .acts,.themes{grid-template-columns:1fr;gap:8px}
  .acts button,.themes button{padding:14px 16px}
  .acts h3,.themes h3{font-size:20px;margin:8px 0}
  .acts p,.themes p{font-size:14px}
  .themes button{min-height:0}
  .themes small,.acts span{font-size:9px}
  .comparison{margin:15px 0 10px}
  .exchange{gap:9px;font-size:16px;flex-wrap:wrap}
  .exchange .arrow{min-width:55px}
  .exchange .arrow span{font-size:28px}
  .exchange .arrow b{font-size:8px}
  .big-fact{gap:24px}
  .big-fact strong{font-size:29px}
  .thought{font-size:17px;margin:18px 0}
  .insight{font-size:15px}
  .evidence{font-size:11px}
  footer{height:68px;padding:0 13px;gap:7px}
  .footer-info{gap:6px}
  #sectionLabel{display:none}
  #steps{gap:2px}
  .keyboard-hint{display:none}
  .navigation{gap:4px}
  .navigation button{height:36px}
  .navigation #prev{width:35px}
  .navigation #next{min-width:82px;padding:0 10px}
  .stage-caption{right:14px;bottom:72px}
  .stage-caption #objectLabel{max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #chapterStamp{right:15px;top:66px}
  #notes{bottom:74px}
}

@media (max-width:390px){
  .wordmark span{display:none}
  .top-actions #notesButton{max-width:76px;overflow:hidden;text-overflow:ellipsis}
  .slide,.slide.active,.slide.exit-forward,.slide.exit-backward,.slide.from-backward,.slide.from-backward.active{padding-left:15px;padding-right:15px}
  footer{padding:0 9px;gap:5px}
  .navigation #next{min-width:74px;padding:0 8px}
}

@media (prefers-reduced-motion:reduce){
  .slide,.slide>.copy,.slide *{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}