/* =========================================================
   PHONE-COMPATIBLE PRESENTATION
   ========================================================= */

@media (max-width:700px){

  html,
  body{
    width:100%;
    min-height:100%;
    margin:0;
    padding:0;
    overflow-x:hidden;
  }

  body{
    background-attachment:scroll !important;
    background-size:cover !important;
    background-position:center center !important;
  }

  img{
    max-width:100%;
    height:auto;
  }

  .smenu{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box;
    padding:12px 10px 8px;
    text-align:center !important;
    display:flex !important;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:8px 12px;
    z-index:1001;
  }

  .smenu a,
  .dmenu > a{
    margin:0 !important;
    font-size:20px !important;
    line-height:1.2 !important;
    letter-spacing:1px !important;
    text-decoration:none !important;
  }

  .dmenu{
    position:relative !important;
    display:inline-block !important;
  }

  .dmenu-content{
    top:32px !important;
    left:50% !important;
    min-width:260px !important;
    max-width:92vw;
    transform:translateX(-50%) !important;
  }

  .dmenu-content a{
    font-size:16px !important;
    line-height:1.25 !important;
    white-space:normal !important;
  }

  body.home-page{
    min-height:100vh;
    text-align:center;
  }

  .home-main,
  .home-banner{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    margin:0 auto !important;
    text-align:center !important;
  }

  .home-main{
    padding:26px 16px 10px !important;
  }

  .home-main h1{
    margin:22px 0 10px !important;
    font-size:38px !important;
    line-height:1.05 !important;
    white-space:normal !important;
  }

  .home-main p{
    margin:12px 0 !important;
    font-size:21px !important;
    line-height:1.25 !important;
  }

  .fastlink{
    display:inline-block !important;
    box-sizing:border-box;
    max-width:92vw;
    padding:10px 18px !important;
    font-size:20px !important;
    line-height:1.2 !important;
    text-decoration:none !important;
  }

  .home-banner img{
    display:block;
    width:min(92vw,520px);
    height:auto;
    margin:10px auto 0;
  }

  .fav-link{
    display:none !important;
  }

  .about-page{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding:24px 20px 52px !important;
    margin:0 auto !important;
  }

  .about-section{
    margin-bottom:38px !important;
  }

  .about-section h1{
    font-size:2rem !important;
    line-height:1.15 !important;
    margin:0 0 24px !important;
  }

  .about-section h2{
    font-size:1.45rem !important;
    line-height:1.2 !important;
  }

  .about-section p,
  .project-status{
    font-size:1.08rem !important;
    line-height:1.45 !important;
    margin:0 0 18px !important;
  }

  .project-card{
    padding:18px !important;
    margin-bottom:24px !important;
  }

  .return-link{
    margin-top:28px !important;
    font-size:1.1rem !important;
  }

  .content-column{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    margin:0 auto !important;
    padding:22px 18px 46px;
    text-align:center;
  }

  .content-column h1{
    margin:24px 0 20px !important;
    font-size:2rem !important;
    line-height:1.15 !important;
    white-space:normal !important;
  }

  .content-column p,
  .track-text{
    font-size:1.05rem !important;
    line-height:1.45 !important;
  }

  audio{
    max-width:94vw;
  }

  .home-link{
    margin-top:28px !important;
    font-size:1.5rem !important;
  }

  .scene{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    grid-template-rows:repeat(3,32vh) !important;
    width:100vw !important;
    height:auto !important;
    min-height:96vh;
  }

  .scene a{
    min-height:32vh;
    background-size:cover !important;
    background-position:center center !important;
  }

  #verse-intro{
    display:none !important;
  }

  body.interior{
    overflow:hidden;
  }

  .stage{
    min-height:100vh !important;
    height:100vh !important;
  }

  .topbar{
    top:12px !important;
    left:12px !important;
    right:12px !important;
    gap:10px !important;
  }

  .title h1{
    font-size:24px !important;
    letter-spacing:2px !important;
  }

  .title p{
    font-size:15px !important;
    letter-spacing:1px !important;
  }

  .home{
    font-size:22px !important;
    letter-spacing:1px !important;
  }

  .hotspot{
    left:18% !important;
    right:18% !important;
    top:46% !important;
    bottom:18% !important;
  }

  .hint{
    top:58% !important;
    bottom:auto !important;
    left:50% !important;
    transform:translate(-50%,-50%) !important;
    font-size:34px !important;
    opacity:.72 !important;
    white-space:nowrap;
  }

  .reader{
    padding:12px !important;
  }

  .reader-title{
    font-size:22px !important;
    letter-spacing:2px !important;
  }

  .reader-count,
  .progress{
    font-size:18px !important;
  }

  .close,
  .nav button{
    font-size:20px !important;
    padding:8px 12px !important;
    letter-spacing:2px !important;
  }

  .page{
    max-width:96vw !important;
    max-height:calc(100vh - 170px) !important;
  }

  .current-title{
    font-size:18px !important;
  }

  .nav{
    gap:10px !important;
  }
}


/* =========================================================
   PHONE VERSE HOME LINK
   ========================================================= */

@media (max-width:700px){

  .home-link{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:10px !important;
    z-index:9999 !important;

    margin:0 !important;
    padding:8px 0 !important;

    text-align:center !important;
    font-size:22px !important;
    line-height:1.2 !important;

    background:rgba(5,4,3,.72);
  }

  .home-link a{
    color:#e6c98a !important;
    text-decoration:none !important;
  }

  .scene{
    padding-bottom:56px !important;
    box-sizing:border-box;
  }

}