/* ============================================================
   Practice Passion — shared mobile layer
   Linked after each page's inline styles so it wins the cascade.
   Desktop is untouched; everything here is scoped to breakpoints.
   ============================================================ */

/* ---------- global overflow guards (fix real causes + safety net) ---------- */
.eside,.emain,.copyurl{min-width:0}
.copyurl .u{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:740px){
  html,body{overflow-x:clip}

  /* ---------- header: two-deck, scrollable nav (mobile-native, no dead hamburger) ---------- */
  .util{display:none}
  header.top{position:static}
  header.top .wrap{flex-wrap:wrap;height:auto;padding-top:14px;padding-bottom:0;gap:0;row-gap:2px}
  .brand img{height:28px}
  .navtoggle{display:none !important}
  nav.main{display:flex !important;order:3;width:100%;overflow-x:auto;gap:24px;
    padding:10px 2px 14px;font-size:11.5px;letter-spacing:.09em;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  nav.main::-webkit-scrollbar{display:none}
  nav.main a{padding:2px 0;flex:0 0 auto}

  /* ---------- section rhythm ---------- */
  section.blk{padding:40px 0}
  .shead{flex-direction:column;align-items:flex-start;gap:6px}
  .shead .more{margin-top:-2px}
  .rule2{margin-bottom:22px}

  /* ---------- dark mastheads: tighter, type sized for phones ---------- */
  .smast .wrap,.emast .wrap{padding-top:40px;padding-bottom:36px}
  .seyebrow,.eeyebrow,.eyebrow{margin-bottom:14px;letter-spacing:.18em}
  .mlead{font-size:14px;margin-top:16px}
  .estats{gap:10px 18px;font-size:11px;margin-top:20px}
  .estats span+span::before{display:none}
  .smast-icon{width:48px;height:48px}
  .srule,.grule{margin-top:18px;margin-bottom:18px}
  .slog{font-size:15px}
  .sdesc{font-size:14px}

  /* series-specific mastheads */
  .vmast .wrap{padding-top:38px;padding-bottom:40px}
  .vicon{width:56px;height:56px}
  .vlockup{gap:14px}
  .vrule{margin:16px 0}
  .vlog{font-size:16px}
  .vdesc{font-size:14px;margin-bottom:20px}
  .vmeta{margin-bottom:0}
  .vsz-cap{margin-top:10px}
  .osmast{padding-left:0;padding-right:0}
  .oslockup{gap:12px;margin-top:12px}
  .osicon{width:48px}
  .ostitle{font-size:clamp(38px,12vw,48px);letter-spacing:.07em}
  .osdesc{font-size:14px}
  .osctas .btn-gold,.osctas .btn-line{width:100%;text-align:center}
  .pmast .wrap{padding:34px 24px}
  .phead{width:150px;height:150px}

  /* ---------- home ---------- */
  .native{grid-template-columns:1fr}
  .native .nimg{aspect-ratio:16/9}
  footer .wrap{flex-wrap:wrap;gap:26px 24px}
  footer .wrap>div{flex:1 1 42%;min-width:150px}

  /* ---------- watch pages ---------- */
  .crumb .wrap{padding:12px 24px;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
  .crumb .wrap::-webkit-scrollbar{display:none}
  .ebody{padding-top:22px;gap:34px}
  .etag{margin:16px 0 10px}
  .ebyline{font-size:11.5px;gap:6px 10px}
  .erule{margin:16px 0 20px}
  .writeup{font-size:16px}
  .writeup .lead{font-size:18px;padding-left:14px}
  .pull{font-size:18px;padding-left:16px}
  .ugrid{grid-template-columns:repeat(2,1fr) !important;gap:18px 14px}
  .presenting{flex-wrap:wrap;row-gap:4px}

  /* ---------- episodes index: compact app-style controls ---------- */
  .controls{top:0}
  .controls .wrap{padding-top:12px;padding-bottom:10px}
  .crow{gap:10px}
  .searchbox{flex:1 1 100%;min-width:0}
  #q{padding:12px 40px 12px 38px;font-size:16px} /* 16px stops iOS zoom-on-focus */
  .selwrap{flex:1 1 auto}
  .selwrap select{width:100%;font-size:11px;padding:11px 30px 11px 14px}
  .views{flex:0 0 auto}
  .views button{padding:10px 13px}
  .chips{flex-wrap:nowrap;overflow-x:auto;margin:12px -24px 0;padding:0 24px 6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;padding:9px 14px}
  .resbar{padding-top:12px}
  section.list{padding:20px 0 64px}
  .grid{gap:26px 18px}

  /* ---------- all-series page ---------- */
  .srow{padding:28px 0}
  .slock img{width:42px;height:42px}
  .slock{gap:12px;margin-bottom:10px}
  .smeta{gap:6px 16px;font-size:11px;margin-bottom:16px}
  .sctas .btn{width:100%;text-align:center;padding:15px 24px}

  /* ---------- leaders / profile ---------- */
  .featv{grid-template-columns:1fr}
  .plinks a{padding:10px 16px}

  /* ---------- pitch ---------- */
  .formwrap{padding:32px 24px 60px}
  .mast .wrap{padding:40px 24px 34px}
}

/* very small phones */
@media (max-width:390px){
  nav.main{gap:18px;font-size:11px}
  .estats{gap:8px 14px}
}