@media (max-width:860px){
  :root{--story-bottom:calc(36px + env(safe-area-inset-bottom))}
  html,body{height:100%;overflow:hidden}
  .scroller{position:fixed;inset:58px 0 var(--story-bottom);display:flex;overflow:hidden;scroll-snap-type:none;padding:0;touch-action:pan-y}
  .page,.page.final{flex:0 0 100%;min-height:0;height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(120px,32%) minmax(0,1fr);padding:0;border:0}
  .media{height:100%;min-height:0;padding:10px 12px 0}
  .media img,.page.final .media img{position:absolute;inset:10px 12px 0;width:calc(100% - 24px);height:calc(100% - 10px);max-height:none;object-fit:contain;border-radius:16px;box-shadow:none}
  .prose,.page.final .prose{width:100%;height:100%;min-height:0;padding:18px var(--pad) 12px;margin:0;overflow-y:auto;overscroll-behavior-y:contain;touch-action:pan-y}
  .prose h2,.page.final h2{font-size:clamp(1.55rem,6.8vw,2rem);line-height:1.08;letter-spacing:normal;margin:0 0 12px}
  .prose p{font-size:1rem;line-height:1.6;margin-bottom:12px}
  .kicker{margin-bottom:8px}
  .page.is-balanced,.page.final.is-balanced{display:flex;flex-direction:column;justify-content:center;gap:24px;padding:24px 0}
  .page.is-balanced .media{flex:0 0 min(34%,250px);height:min(34%,250px);padding:0}
  .page.is-balanced .media img{inset:0 12px;height:100%}
  .page.is-balanced .prose{flex:0 0 auto;height:auto;padding:0 var(--pad);overflow:visible}
  .page.is-balanced .prose p:last-child{margin-bottom:0}
  .story-slide-caption{background:linear-gradient(125deg,rgba(255,255,255,.09),rgba(255,255,255,.018) 40%,rgba(255,255,255,.04));border-color:rgba(255,255,255,.19);box-shadow:inset 0 1px 1px rgba(255,255,255,.32),inset 1px 0 1px rgba(180,216,255,.12),inset 0 -1px 1px rgba(255,255,255,.12),0 8px 24px rgba(0,0,0,.16);backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%)}
  .story-slide-caption::before{opacity:.32}
  .dots{display:flex;bottom:calc(6px + env(safe-area-inset-bottom));gap:0;width:max-content;max-width:100%;padding:0;background:none}
  .dot{width:16px;height:24px}
  .dot.outside-window{display:none}
  .dot::before{width:4px;height:4px;background:rgba(233,237,243,.3)}
  .dot.window-edge::before{width:3px;height:3px;background:rgba(233,237,243,.2)}
  .dot.active::before{width:5px;height:5px;background:var(--accent);box-shadow:0 0 5px rgba(168,211,255,.25)}
  .nav{display:none}
  #turnOverlay{bottom:var(--story-bottom)}
  #turnOverlay.book-sheet .page{height:100%;width:100%}
  #turnOverlay.book-sheet .prose{scrollbar-width:none}
}