/* SlowDen universal responsive safety layer.
   Keeps every public page usable from 240px foldable covers to large desktop/TV screens. */
:where(html){-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
:where(body){min-width:0;overflow-x:hidden}
:where(img,video,canvas,svg){max-width:100%}
:where(img,video){height:auto}
:where(iframe){max-width:100%}
:where(p,li,h1,h2,h3,h4,a,span,summary,label){overflow-wrap:anywhere}
:where(button,input,select,textarea){max-width:100%;min-width:0}
:where(.wrap,.content,.main,.softcard,.info,.faq,.sd-form,.route,.card,.gc){min-width:0}

/* Tablets and narrow laptops */
@media (max-width:1024px){
  :where(.wrap,.content){max-width:100%}
  :where(.grid,.cards){align-items:stretch}
  :where(header.top,header){padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
}

/* Phones and book-style foldables */
@media (max-width:700px){
  :where(body){padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  :where(input,select,textarea){font-size:16px!important} /* prevents iOS focus zoom */
  :where(button,.btn,.pb,[role="button"]){min-height:44px}
  :where(.wrap){padding-left:14px!important;padding-right:14px!important}
  :where(.softcard,.sd-form,.route,.faq details){padding-left:14px!important;padding-right:14px!important}
  :where(.acts,.row2){min-width:0}
  :where(.row2){flex-wrap:wrap}
  :where(.row2>*){max-width:100%}
  :where(table){display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  :where(pre,code){max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}
  :where(footer.ft,.site-foot){padding-bottom:max(22px,env(safe-area-inset-bottom))}
}

/* Small/outer screens on flip phones and compact mobiles */
@media (max-width:380px){
  :where(h1){font-size:clamp(1.55rem,9vw,1.9rem)!important;line-height:1.08}
  :where(h2){line-height:1.18}
  :where(.wrap,.content){padding-left:10px!important;padding-right:10px!important}
  :where(.softcard,.sd-form,.route,.faq details){border-radius:12px!important;padding-left:12px!important;padding-right:12px!important}
  :where(.acts){grid-template-columns:1fr!important;gap:10px!important}
  :where(.btn,.btn-soft,.sd-form button){width:100%;justify-content:center;text-align:center;white-space:normal}
  :where(.chips){gap:7px}
  :where(.chip){padding:9px 11px!important;font-size:.84rem!important}
  :where(.stars){gap:3px!important;justify-content:space-between}
  :where(.star svg){width:clamp(35px,15vw,46px)!important;height:clamp(35px,15vw,46px)!important}
  :where(.grid,.cards){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  :where(.ctitle,.gc .t){padding-left:8px!important;padding-right:8px!important;font-size:.76rem!important}
  :where(.ccred,.cred){padding-left:8px!important;padding-right:8px!important;font-size:.62rem!important}
}

/* Very narrow flip-phone cover displays */
@media (max-width:280px){
  :where(.grid,.cards,.routes,.site-foot){grid-template-columns:1fr!important}
  :where(.home){position:static!important;display:block;text-align:right;margin-bottom:8px}
  :where(.wrap,.content){padding-left:8px!important;padding-right:8px!important}
  :where(.crumbs){font-size:.72rem}
}

/* Landscape phones and short foldable panels */
@media (max-height:500px) and (orientation:landscape){
  :where(.stage,.player){height:100dvh}
  :where(.stage .pbar,.player .pbar){padding-top:6px!important;padding-bottom:6px!important;gap:6px!important}
  :where(.stage .pbar .pt,.player .pbar .pt){font-size:.82rem!important}
  :where(.stage .pbar .pb,.player .pbar button){min-height:36px!important;padding:5px 9px!important;font-size:.7rem!important}
  :where(.ploading){top:44px!important}
}

/* Homepage navigation and cards */
@media (max-width:600px){
  .main header{flex-wrap:wrap}
  .main header .search{padding:9px 12px;min-width:0}
  .main header .hlogo{flex:none;max-width:30vw;object-fit:contain}
  .main header .hbtn{display:inline-flex!important;flex:0 0 auto}
  .banner .bimg{display:grid!important;width:38px!important;height:38px!important}
  /* The original layout hid these below 560px. Keep every action available instead: the row
     scrolls sideways on very narrow screens and uses real 44px touch targets. */
  .main header .htabs{
    display:flex!important;order:3;width:100%;margin-left:0;gap:7px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:1px 0 3px
  }
  .main header .htabs::-webkit-scrollbar{display:none}
  .main header .htabs>a,.main header .htabs>button{
    flex:0 0 auto;min-height:44px;white-space:nowrap;scroll-snap-align:start;
    padding:9px 14px;font-size:.78rem
  }
  /* Portfolio/About and information-panel tabs also remain reachable instead of wrapping into
     clipped rows inside their overlays. */
  .me .tabs,#info .tabs{
    display:flex!important;max-width:100%;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain
  }
  .me .tabs::-webkit-scrollbar,#info .tabs::-webkit-scrollbar{display:none}
  .me .tabs .tab,#info .tabs .tab{flex:0 0 auto;white-space:nowrap;min-height:44px}
  .rowhead{min-width:0}.rowhead h2{min-width:0}
  .rowhead .all{flex:none}
  .player .pbar{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
  .pbar .pcred,.stage .pbar .pcred,header .cred{
    display:block!important;min-width:0;max-width:34vw;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;font-size:.65rem!important
  }
  .player iframe{padding-bottom:env(safe-area-inset-bottom)}
}

@media (max-width:340px){
  .rail{width:44px!important}.main{margin-left:44px!important}
  .rail .logo,.ricon,.meicon{width:36px!important;height:36px!important;border-radius:11px!important}
  .main header{padding:9px 8px!important;gap:6px!important}
  .main header .hlogo{display:block!important;height:20px!important;max-width:42vw}
  .main header .search{order:2;flex-basis:100%;max-width:none}
  .main .content{padding-left:8px!important;padding-right:8px!important}
  .banner{padding:11px!important;border-radius:13px!important}
  .jam-promo{padding:10px!important}
}

/* Touch devices do not depend on hover-only affordances. */
@media (hover:none){
  .card:hover,.gc:hover{transform:none}
  .thumb .ov{display:grid;opacity:0} /* remains available to keyboard focus without covering art */
  .card:focus-visible .thumb .ov{opacity:1}
  :where(a,button,.card,.ricon,.chip){-webkit-tap-highlight-color:rgba(167,121,255,.25)}
}

/* Large displays: keep text readable rather than stretching paragraphs wall-to-wall. */
@media (min-width:1920px){
  :where(.wrap){max-width:1280px}
  :where(.info,.lead,.faq){max-width:820px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}