/* ===== Deep Antiquity — mobile / iPhone layer (website-mobile only) ===== */
/* Goal: as rich as desktop — KEEP the lantern, full menu, full controls. Only adapt layout. */
#m-burger{display:none}
@media(max-width:820px){
  html,body{overflow-x:hidden!important}

  /* ---------- the lantern STAYS (mystique) ----------
     It follows finger-drag (pointermove fires on touch) and auto-drifts when idle.
     Text sits above it, so copy stays readable while the light reveals the scene. */

  /* ---------- hamburger + full-screen overlay menu ---------- */
  #m-burger{display:flex;align-items:center;justify-content:center;position:fixed;top:10px;right:13px;z-index:100000;
    cursor:pointer;background:rgba(18,12,6,.92);border:1px solid rgba(245,180,99,.55);color:#f1ca8a;
    border-radius:11px;width:48px;height:44px;font-size:23px;backdrop-filter:blur(4px)}
  nav .r,nav .nav-links,#top .nl{display:none!important}        /* replaced by the overlay */
  #m-menu{position:fixed;inset:0;z-index:99999;background:rgba(6,4,2,.975);backdrop-filter:blur(10px);
    display:none;flex-direction:column;align-items:center;justify-content:center}
  #m-menu.on{display:flex}
  #m-close{position:absolute;top:14px;right:17px;color:#f1ca8a;font-size:30px;width:46px;height:46px;line-height:44px;text-align:center;cursor:pointer}
  #m-links{display:flex;flex-direction:column;align-items:center;width:100%;padding:0 20px}
  #m-links a{font-family:"Iowan Old Style","Hoefler Text",Georgia,serif;font-size:25px;font-weight:700;color:#ece3d2;padding:13px 8px;text-align:center;letter-spacing:.01em}
  #m-links a:active{color:#f5b463}

  /* ---------- readable, full-width layouts ---------- */
  .wrap{width:100vw!important;max-width:100vw!important;margin:0!important;padding:0 18px!important;box-sizing:border-box!important}
  .hero,header.hero{min-height:90vh!important}
  #hd{top:58px!important;width:92%!important}
  #cnt{top:60px!important;right:13px!important}
  #hint{font-size:11.5px!important}

  /* ---------- deep-dive / detail overlays full width ---------- */
  #dc,#dcard,#dt #dc{width:96vw!important;max-height:90vh!important}
  #dx,#dclose{top:13px!important;right:14px!important}

  /* ---------- the globe: FULLY-visible sea slider + title ---------- */
  #title{top:60px!important;left:16px!important;right:16px!important;max-width:none!important}
  #ctrl{left:12px!important;right:12px!important;width:auto!important;transform:none!important;bottom:18px!important}
  #journal{display:none!important}#found{display:none!important}

  /* ---------- UAP / video / portal grids stack ---------- */
  .vids{grid-template-columns:1fr!important}
  .stats{gap:12px!important}
  .portals a,.close a,.row a,.foot a{font-size:15px!important}
  /* ---------- kill horizontal overflow / text clipping ---------- */
  body{overflow-x:hidden!important}
  .wrap,header.hero,.hero,.sec,.cov,.close,footer,.tl,.quote,.stats,.vids,.act,.beat,.beat .card,.beat .wrap,.seek,.q{max-width:100vw!important;box-sizing:border-box!important}
  .hero h1{font-size:clamp(28px,8vw,42px)!important}
  .beat h2{font-size:clamp(25px,6.6vw,40px)!important}
  h2.t{font-size:clamp(24px,6vw,36px)!important}
  h1,h2,h3,p,.lead,.note,.big,.work,.quote .big{overflow-wrap:break-word!important}
  .hero p,.lead,.tl p,.cov p,.act p,.beat .note,.q p,.seek p,.quote .big,#db p,#dbody p{max-width:100%!important}
  .hero p,.lead,.act p,.q p,.seek p,.cov p,.tl p,.note,#db p{font-size:14px!important;line-height:1.62!important;word-break:break-word!important}
  .beat .note{font-size:14.5px!important}
}