/* Narrow screens. Loaded after site.css so these always win. */

@media (max-width:900px){
  html,body{height:auto}
  body{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
  .deck{position:static;transform:none!important}
  .slide{height:auto;min-height:0;overflow:visible;display:block;
    padding:14vh var(--gutter) 12vh}
  .slide--hero{padding-top:12vh;padding-bottom:6vh}
  .slide--out{padding-bottom:18vh}
  .nav,.cue{display:none}

  .wrap,.wrap--split{display:flex;flex-direction:column;padding-inline:0;gap:0}
  .col-type{display:contents}
  .col-mech{order:3;width:100%;margin:2.2rem 0 0;display:block;position:static}
  .marker{order:1}
  .chapter,.wordmark{order:2}
  .rule{order:2}
  .lede,.tagline{order:4;margin-top:2rem}
  .subtitle{order:5}
  .more,.controls{order:6}
  .island{order:7}
  .field{order:3}

  .mech{display:block;height:auto;width:min(78vw,340px);max-width:100%;
    margin-left:auto;margin-right:auto}
  .mech--wide{width:100%}
  .plate{position:static;margin-top:1.2rem}
  .plate img{height:auto;width:min(78vw,340px);max-width:100%;margin-inline:auto}
  #grid{height:auto;width:min(72vw,300px);margin-inline:auto}
  .field{align-items:center}
  .fieldnote,.field .micro{text-align:center}

  .wordmark{font-size:clamp(2.8rem,15vw,5rem)}
  .chapter{font-size:clamp(1.9rem,8.5vw,2.8rem)}
  .lede{max-width:none}
  .island.open{max-height:44rem}
  .island p{max-width:none}
  #stair{position:static;width:100%!important;height:auto!important;
    margin-top:2rem;display:block!important}
  .ball{position:absolute}

  .plate:not(.open){display:none}
  .col-type>.disc{order:6}
  .slide{padding:9vh var(--gutter) 8vh}
  .slide--hero{padding-top:11vh;padding-bottom:4vh}
  .hint{display:block;margin:3.2rem auto 0;width:22px;height:22px;opacity:.34;
    animation:nudge 2.4s ease-in-out infinite}
  .hint span{display:block;width:12px;height:12px;margin:0 auto;
    border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
    transform:rotate(45deg)}
  @keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
  .slide--out .marker{position:static}
  .slide--out .wrap{text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .act{height:auto}
  .stage{position:static;height:auto;overflow:visible}
  .panel{position:static;min-height:100vh;opacity:1!important;transform:none!important}
  .ball{display:none}
  #grid circle{transform:scale(1);opacity:1;transition:none}
  .fieldnote{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  body{overflow:auto}
  .deck{position:static;transform:none!important}
  .slide{height:auto;min-height:100vh;padding-block:5rem}
  .nav{display:none}
  .ball{display:none}
  #grid circle{transform:scale(1);opacity:1;transition:none}
  .fieldnote{opacity:1}
}