/* Reyach mobile magazine controls, scoped to the 6 reader interfaces.
 * All desktop reader layouts and interaction mechanics are preserved.
 */
@media (max-width:760px){
  .magazine-shell{padding:0 14px}
  .reader-heading{
    padding:18px 0 14px;gap:10px;align-items:flex-start;
  }
  .reader-back{
    min-height:32px;display:inline-flex;align-items:center;
    margin:0 0 10px;font-size:11px;
  }
  .reader-overline{font-size:9px;letter-spacing:.13em;line-height:1.5}
  .reader-heading h1{
    font-size:clamp(33px,8.9vw,48px);
    line-height:1.04;margin:9px 0 10px;letter-spacing:-.038em;
  }
  .reader-heading p{font-size:12px;line-height:1.55;max-width:510px}
  .reader-area{padding:14px 0 32px}
  .reader-interface{display:flex;flex-direction:column;gap:11px}
  .reader-status-line{order:0;font-size:10px;letter-spacing:.1em}
  /* Put the page navigation above the image on mobile. Readers should not
     need to scroll below a 55vh spread just to discover their controls. */
  .reader-controls{
    order:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;align-items:stretch;
  }
  .reader-controls #control-prev{
    grid-column:1;grid-row:1;justify-self:stretch;
  }
  .reader-controls #control-next{
    grid-column:2;grid-row:1;justify-self:stretch;
  }
  .reader-controls .reader-control{
    min-width:0;min-height:44px;font-size:12px;
    padding:8px 11px;white-space:nowrap;
  }
  .reader-center-controls{
    grid-column:1/-1;grid-row:2;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;min-width:0;
  }
  .reader-center-controls #open-contents{grid-column:1;grid-row:2;width:100%}
  .reader-center-controls #control-fullscreen{grid-column:2;grid-row:2;width:100%}
  .reader-zoom-controls{
    grid-column:1/-1;grid-row:1;justify-self:stretch;
    width:100%;display:grid;
    grid-template-columns:52px minmax(60px,1fr) 52px;
    background:#18130e;border-color:rgba(224,183,122,.52);
  }
  .reader-zoom-controls .reader-control{min-height:44px}
  .reader-zoom-button{width:100%;font-size:24px!important;padding:5px!important}
  .reader-zoom-level{width:100%;min-width:0}
  .reader-stage{
    order:2;height:min(53svh,550px);min-height:290px;
    border-color:rgba(224,183,122,.4);
  }
  .reader-edge{
    width:46px;font-size:34px;
    opacity:.85;background:rgba(8,7,6,.31);
    touch-action:manipulation;
  }
  .reader-edge-right{background:rgba(8,7,6,.31)}
  .reader-instructions{
    order:3;text-align:left;font-size:12px;line-height:1.65;
    color:#c1b3a2;
  }
  .reader-download{
    order:4;display:flex;flex-wrap:wrap;flex-direction:row;
    align-items:center;justify-content:flex-start;
    gap:8px 20px;padding:14px 0 0;
  }
  .reader-download a{
    display:inline-flex;align-items:center;min-height:44px;
    color:#f2cb94;font-size:11px;line-height:1.4;
  }
  .reader-download>span{width:100%;font-size:11px}
  .contents-dialog{
    width:calc(100vw - 16px);max-height:calc(100dvh - 20px);
    padding:15px;border-radius:9px;
  }
  .contents-header{align-items:center;gap:12px}
  .contents-header h2{font-size:clamp(24px,6vw,35px)}
  .contents-header button{min-width:44px;min-height:44px}
  .contents-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .contents-entry{min-height:110px;padding:9px}
  .contents-entry span{font-size:12px;line-height:1.45}
  .issue-colophon{padding:26px 0 35px}
}
@media (max-width:365px){
  .reader-stage{height:46svh;min-height:250px}
  .reader-center-controls{gap:6px}
  .reader-heading h1{font-size:35px}
  .reader-controls .reader-control{font-size:11px}
  .contents-dialog{padding:12px}
}


/* Full viewport fallback for iOS/mobile browsers without Element.requestFullscreen. */
.reader-exit-mobile-fullscreen{display:none}
.magazine-page .reader-stage.is-mobile-fullscreen{
  position:fixed!important;inset:0!important;z-index:2000!important;
  width:100vw!important;height:100dvh!important;min-height:0!important;max-height:none!important;
  border:0!important;border-radius:0!important;
  background:#090807;overscroll-behavior:contain;
}
.magazine-page .reader-stage.is-mobile-fullscreen .reader-sheet:not(.is-zoomed){
  inset:clamp(12px,3vw,35px);
}
.magazine-page .reader-stage.is-mobile-fullscreen .reader-exit-mobile-fullscreen{
  display:inline-flex;align-items:center;justify-content:center;
  position:absolute;z-index:2100;right:max(12px,env(safe-area-inset-right));
  top:max(14px,env(safe-area-inset-top));
  min-height:44px;padding:10px 16px;
  border:1px solid rgba(224,183,122,.72);border-radius:24px;
  background:rgba(8,7,6,.9);color:#f3eadb;
  font:600 12px "DM Sans",Arial,sans-serif;
}
.magazine-page .reader-stage.is-mobile-fullscreen .reader-exit-mobile-fullscreen:focus-visible{
  outline:2px solid #efcc96;outline-offset:3px;
}