/* ============================================================
   SuppLux — mobile edition (<= 860px)

   A separate design for phones, loaded after styles.css. The desktop
   layout is not touched: every rule here is scoped to small screens or
   touch devices. Content is unchanged; only its composition is.

   Idea: the vertical journey. On a phone the route becomes a line down the
   left edge - a metro line - with one numbered station per chapter, set
   level with that chapter's station chip. The Earth rides the line; all
   copy lives to the right of it, so nothing is ever drawn over the text.
   ============================================================ */

/* desktop: the mobile-only pieces do not exist */
.nav-burger,.m-menu{display:none}

@media (max-width:860px){
  :root{
    --m-gutter:22px;                 /* outer margin */
    --rail-x:27px;                   /* the route's line, from the left edge */
    --m-col:60px;                    /* where the copy starts, clear of the line */
    --m-ease:cubic-bezier(.22,.61,.36,1);
  }

  /* ---------------- nav: brand · menu ---------------- */
  .nav-inner{padding:0 var(--m-gutter);gap:12px}
  .nav-brand img{height:24px}
  .nav-cta{display:none}             /* lives in the menu and in the finale */
  .nav-burger{
    display:inline-flex;align-items:center;gap:10px;
    height:38px;margin-left:auto;padding:0 14px 0 16px;
    border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 22%,transparent);
    border-radius:999px;background:none;color:inherit;cursor:pointer;
    font:600 11px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;
    -webkit-tap-highlight-color:transparent;
  }
  .nav-burger b{font-weight:600}
  .nav-burger i{position:relative;display:block;width:16px;height:10px}
  .nav-burger i::before,.nav-burger i::after{
    content:"";position:absolute;left:0;right:0;height:1.6px;border-radius:2px;background:currentColor;
    transition:transform .4s var(--ease),top .4s var(--ease);
  }
  .nav-burger i::before{top:1px}
  .nav-burger i::after{top:7px}
  .nav.is-scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(247,249,253,.96)}
  .nav.is-scrolled.is-dark{background:rgba(7,11,19,.94)}
  .nav.m-open{color:#fff;background:transparent!important;border-color:transparent!important}
  .nav.m-open .logo-light{display:block}
  .nav.m-open .logo-dark{display:none}
  .nav.m-open .nav-burger i::before{top:4px;transform:rotate(45deg)}
  .nav.m-open .nav-burger i::after{top:4px;transform:rotate(-45deg)}

  /* ---------------- menu: the same line, four stations ---------------- */
  .m-menu{
    display:flex;flex-direction:column;
    position:fixed;inset:0;z-index:99;overflow-y:auto;
    padding:calc(var(--nav-h) + 26px) var(--m-gutter) calc(24px + env(safe-area-inset-bottom));
    color:#fff;
    background:
      radial-gradient(80% 50% at 100% 105%,rgba(47,109,255,.34),transparent 70%),
      radial-gradient(60% 40% at 0% 0%,rgba(47,109,255,.16),transparent 70%),
      #060b13;
    opacity:0;visibility:hidden;
    transition:opacity .35s var(--m-ease),visibility 0s linear .35s;
  }
  .m-menu.is-open{opacity:1;visibility:visible;transition:opacity .35s var(--m-ease)}
  .m-menu a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
  .m-menu-main{position:relative;display:flex;flex-direction:column;gap:6px;padding-left:44px}
  /* the line the stations sit on, drawn in as the menu opens */
  .m-menu-main::before{
    content:"";position:absolute;left:12px;top:22px;bottom:22px;width:1.5px;
    background:linear-gradient(180deg,#8bb7ff,rgba(47,109,255,.35));
    transform-origin:top;transform:scaleY(0);
    transition:transform .7s var(--ease) .05s;
  }
  .m-menu.is-open .m-menu-main::before{transform:scaleY(1)}
  .m-menu-main a{
    position:relative;display:flex;align-items:baseline;gap:14px;padding:12px 0;
    font-size:clamp(34px,10.5vw,44px);font-weight:600;letter-spacing:-.025em;line-height:1;
    opacity:0;transform:translateX(-10px);
    transition:opacity .45s var(--m-ease),transform .6s var(--ease);
  }
  .m-menu-main a::before{               /* the station */
    content:"";position:absolute;left:-38px;top:50%;width:13px;height:13px;margin-top:-6.5px;
    border-radius:50%;border:1.5px solid #8bb7ff;background:#060b13;
    box-shadow:0 0 0 4px rgba(47,109,255,.12);
  }
  .m-menu-main a:active::before{background:#8bb7ff}
  .m-menu-main em{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.16em;color:#8bb7ff;order:2}
  .m-menu-sub{
    display:flex;gap:22px;margin:34px 0 0 44px;padding-top:22px;
    border-top:1px solid rgba(139,183,255,.14);
  }
  .m-menu-sub a{font-size:15px;font-weight:500;color:rgba(255,255,255,.72);opacity:0;transition:opacity .45s var(--m-ease)}
  .m-menu-cta{
    display:flex;align-items:center;justify-content:space-between;
    margin-top:auto;padding:18px 22px;border-radius:18px;
    background:linear-gradient(135deg,#3a79ff,#2356e0);
    font-size:16px;font-weight:600;
    box-shadow:0 18px 40px rgba(34,98,255,.35);
    opacity:0;transform:translateY(12px);
    transition:opacity .45s var(--m-ease),transform .6s var(--ease);
  }
  .m-menu-cta::after{content:"→";font-size:18px}
  .m-menu.is-open .m-menu-main a,
  .m-menu.is-open .m-menu-sub a,
  .m-menu.is-open .m-menu-cta{opacity:1;transform:none;transition-delay:calc(.08s + var(--i) * 55ms)}
  .m-menu.is-open .m-menu-sub a{opacity:.72}
  html.m-lock,html.m-lock body{overflow:hidden}

  /* ---------------- landing: shorter hold, no empty screen ---------------- */
  #hero{min-height:220vh;min-height:220svh}

  /* ---------------- chapters: composed for one column ---------------- */
  .chapter{min-height:0;padding:96px 0 84px}
  .chapter .sec-content{padding:0 var(--m-gutter) 0 var(--m-col)}
  .chapter-grid{gap:34px}
  .chapter-copy,.chapter-media{max-width:none}
  .chapter-media{margin-top:6px}

  /* station row: the chip, then its line of detail - wrapped, not cut */
  .chapter-top{
    display:flex;flex-direction:column;align-items:flex-start;gap:10px;
    margin-bottom:26px;padding-bottom:18px;
  }
  .chapter-top-meta{
    max-width:none;white-space:normal;overflow:visible;text-overflow:clip;
    font-size:10.5px;line-height:1.55;letter-spacing:.14em;opacity:.72;text-align:left;
  }
  .chapter-kicker{margin-bottom:12px;font-size:11px;letter-spacing:.2em}
  .chapter-title{font-size:clamp(31px,8.8vw,40px);line-height:1.06;letter-spacing:-.025em}
  .chapter-lede{margin-top:16px;font-size:16px;line-height:1.62}
  .chapter-points{margin-top:22px;gap:10px}
  .chapter-points li{font-size:14.5px}
  .chapter-stats{margin-top:26px;padding-top:20px;gap:18px}
  .stat{padding-right:16px}
  .stat + .stat{padding-left:16px}
  .stat-num{font-size:28px}
  .ghost{right:-4%;top:40px;font-size:38vw;opacity:.55}

  /* the route: labels give way to the numbered stations on the line */
  .plabel{display:none}
  #ball{width:26px;height:26px}
  .p-track{animation:none}           /* a dash animation along the whole page repaints every frame */

  /* ---------------- lighter rendering ---------------- */
  .hud-chip,.fin-foot,.plabel{-webkit-backdrop-filter:none;backdrop-filter:none}
}

@media (max-width:380px){
  :root{--m-gutter:18px;--rail-x:23px;--m-col:52px}
  .chapter-title{font-size:30px}
}

@media (max-width:860px) and (prefers-reduced-motion:reduce){
  .m-menu,.m-menu *,.m-menu-main::before,.nav-burger i::before,.nav-burger i::after{transition:none!important}
}

/* off-screen sections stop their decorative loops (script.js, small screens) */
.lite .is-offscreen,.lite .is-offscreen *,.lite .is-offscreen *::before,.lite .is-offscreen *::after{animation-play-state:paused!important}

/* touch: the Earth layer is sized to the large viewport, so the toolbar
   sliding in and out does not resize (and re-allocate) the canvas */
@media (hover:none) and (pointer:coarse){
  #earth-stage{bottom:auto;height:100vh;height:100lvh}
}