/* Phone experience (≤760px). Desktop is untouched: everything here lives inside the media query,
   and the JS-built pieces (tab bar, film carousel, filters, "next film") are hidden outside it. */
.jb-tabs,.jb-car-wrap,.jb-next,.jb-more,.jb-fold-btn,.jb-swipe{display:none}

@media(max-width:760px){
  html{scroll-padding-top:76px}
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}

  /* top bar: just the name and the language switch */
  .chrome{padding:11px 16px;flex-wrap:nowrap;row-gap:0}
  .chrome .c-mid{display:none}
  .chrome .c-name{gap:10px}

  /* bottom tab bar: reachable with the thumb */
  .jb-tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:62;padding:6px 10px calc(8px + env(safe-area-inset-bottom));
    background:rgba(13,12,10,.78);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-top:1px solid var(--line);
    font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
  .jb-tabs a{flex:1;text-align:center;padding:12px 4px 10px;color:var(--grey);position:relative;-webkit-tap-highlight-color:transparent}
  .jb-tabs a[aria-current="page"]{color:var(--bone)}
  .jb-tabs a[aria-current="page"]::after{content:"";position:absolute;left:30%;right:30%;top:0;height:2px;background:var(--accent)}
  .scroll-hint{bottom:calc(86px + env(safe-area-inset-bottom))}

  /* ---- Films: swipeable card carousel instead of the long index ---- */
  .index-list{display:none}
  #works .sec-head{margin-bottom:0}
  .jb-car-wrap{display:block;padding-top:3vh}
  .jb-filters{display:flex;gap:8px;overflow-x:auto;padding:0 20px 14px;scrollbar-width:none}
  .jb-filters::-webkit-scrollbar{display:none}
  .jb-filters button{flex:0 0 auto;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);background:none;border:1px solid var(--line);border-radius:999px;padding:9px 15px 8px}
  .jb-filters button.on{color:var(--bone);border-color:var(--accent)}
  .jb-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px 20px 6px;scrollbar-width:none;overscroll-behavior-x:contain}
  .jb-track::-webkit-scrollbar{display:none}
  .jb-card{flex:0 0 74vw;max-width:340px;scroll-snap-align:center;position:relative;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line);background:#000 center/cover no-repeat;display:flex;flex-direction:column;justify-content:flex-end;-webkit-tap-highlight-color:transparent}
  .jb-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,12,10,0) 38%,rgba(13,12,10,.92) 100%)}
  .jb-card>*{position:relative}
  .jb-card .num{position:absolute;left:14px;top:14px;font-size:11px;background:rgba(13,12,10,.6);padding:5px 9px}
  .jb-card .jb-play{position:absolute;right:14px;top:14px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(236,231,221,.7);display:flex;align-items:center;justify-content:center;font-size:13px;background:rgba(13,12,10,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .jb-card .jb-t{font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:clamp(22px,7.2vw,30px);line-height:.95;padding:0 16px;text-wrap:balance}
  .jb-card .jb-m{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);padding:10px 16px 16px}
  .jb-count{display:flex;align-items:center;gap:14px;padding:12px 20px 0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--grey)}
  .jb-count b{color:var(--bone);font-weight:400}
  .jb-count i{flex:1;height:2px;background:var(--line);position:relative;overflow:hidden}
  .jb-count i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:var(--accent);transition:width .25s}
  .jb-swipe{display:block;padding:8px 20px 0;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}

  /* ---- a film: the video leads; text, credits and stills stay quiet ---- */
  .project{padding-top:9vh}
  .p-body{padding:4vh 20px 0;gap:22px;grid-template-columns:minmax(0,1fr)}
  .p-body>*{min-width:0}
  .p-title{font-size:clamp(26px,8.4vw,44px);margin:10px 0 14px;overflow-wrap:anywhere}
  .p-title.t-sm{font-size:clamp(24px,7.6vw,38px)}
  .p-desc{font-size:15.5px}
  .p-desc.jb-clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .p-desc.jb-clamp.open{display:block;-webkit-line-clamp:unset}
  .jb-more,.jb-fold-btn{display:inline-block;background:none;border:0;color:var(--accent);font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:10px 0 0}
  .jb-fold-btn{display:flex;width:100%;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:16px 0;color:var(--grey)}
  .jb-fold-btn::after{content:"+";color:var(--accent);font-size:15px}
  .jb-fold-btn.open::after{content:"−"}
  .credits{border-top:0;margin-top:0}
  .credits.jb-fold dl{display:none}
  .credits.jb-fold.open dl{display:grid}
  .p-links{margin-top:22px;gap:10px}
  .watch,.cs-link{padding:14px 18px}

  /* stills: a small swipeable strip, clearly secondary to the video */
  .p-stills{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:10px;padding:3vh 20px 0;scrollbar-width:none;grid-template-columns:none}
  .p-stills::-webkit-scrollbar{display:none}
  .p-stills figure,.project.vfilm .p-stills figure,.p-stills.v-stills figure{flex:0 0 58%;scroll-snap-align:start;aspect-ratio:3/2;margin:0!important}
  .project.vfilm .p-stills figure,.p-stills.v-stills figure{flex-basis:42%;aspect-ratio:3/4}
  .jb-next{display:flex;justify-content:flex-end;padding:3vh 20px 0}
  .jb-next a{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--accent);color:var(--accent);padding:14px 18px}
  .jb-next a:active{background:var(--accent);color:var(--ink)}

  /* ---- case studies: steps one card at a time ---- */
  .cs-steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:12px;padding:0 20px 8px;margin-left:-20px;margin-right:-20px;scrollbar-width:none;grid-template-columns:none}
  .cs-steps::-webkit-scrollbar{display:none}
  .cs-step{flex:0 0 80%;scroll-snap-align:center}
  .cs-step p{max-width:none}
  .cs-story-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding:0 20px 6px;margin-left:-20px;margin-right:-20px;scrollbar-width:none;grid-template-columns:none}
  .cs-story-grid::-webkit-scrollbar{display:none}
  .cs-story-grid figure{flex:0 0 46%;scroll-snap-align:start}
  .jb-swipe.cs{padding:14px 0 0}

  /* ---- systems: cards swipe sideways inside each group ---- */
  .sy-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:14px;padding:0 20px 8px;margin-left:-20px;margin-right:-20px;grid-template-columns:none;scrollbar-width:none}
  .sy-grid::-webkit-scrollbar{display:none}
  .sy{flex:0 0 86%;scroll-snap-align:center}
  .sy-grid>.sy:only-child{flex-basis:100%}

  /* lightbox: easy to leave */
  .lightbox{touch-action:pan-y}
  #lb-close{padding:14px 18px}
}
@media(max-width:760px){
  .cs-head{grid-template-columns:minmax(0,1fr)}
  .cs-head>*{min-width:0}
  .cs-head h2,.cs-lead,.credits dd{overflow-wrap:anywhere}
  .credits dl{grid-template-columns:minmax(0,max-content) minmax(0,1fr)}
}
@media(max-width:760px){
  .chrome .c-chip{display:inline-block;font-size:8px;letter-spacing:.1em;padding:4px 9px 3px;white-space:nowrap}
  .chrome .c-name{gap:9px;align-items:center;min-width:0}
}
@media(max-width:372px){
  .chrome .c-name{flex-direction:column;align-items:flex-start;gap:5px}
}