/* V27 — Mobile refinement, scoped to phone and small tablet widths.
   Desktop design and player javascript remain unchanged. */
@media (max-width: 900px) {
  html { scroll-padding-top: 76px; }
  body { overflow-x: clip; }
  .aboutgrid { gap: clamp(22px,4vw,40px); }
  .jr-v18-tool-panel { min-width:0; }
  .jr-v18-tool-list { min-width:0; }
  .jr-v18-skill-board { min-width:0; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 76px; }
  nav { min-height:66px; padding:12px 5%; gap:12px; align-items:center; }
  .logo {font-size:clamp(17px,4.8vw,21px); flex-shrink:0;}
  .navlinks {gap:clamp(10px,2.7vw,18px); display:flex; align-items:center; justify-content:flex-end; flex-wrap:nowrap; min-width:0;}
  .navlinks a {font-size:clamp(10px,2.5vw,12px); min-height:44px; display:inline-flex; align-items:center; white-space:nowrap;}
  .hero { min-height: min(680px, 90svh); padding:90px 6% 65px; }
  .hero h1 { font-size:clamp(42px,11vw,82px); letter-spacing:-.073em; overflow-wrap:normal; max-width:100%; margin:22px 0 30px; }
  .hero h2 { font-size:clamp(22px,5.7vw,30px); }
  .hero p {font-size:14px; line-height:1.8; max-width:38ch;}
  .jr-v25-marquee {max-width:100%; margin-top:28px;}
  .section { padding:64px 6%; }
  .heading {margin-bottom:32px;}
  .aboutgrid {grid-template-columns:minmax(0,1fr);gap:28px;}
  .portrait {width:min(100%,390px); margin:0 auto;}
  .aboutcopy { min-width:0; }
  .aboutcopy h3 {font-size:clamp(28px,7vw,36px);}
  .aboutcopy p,.aboutcopy a { overflow-wrap:break-word; }
  .jr-v25-specialties {flex-wrap:wrap; gap:8px;}
  .jr-v18-skills {display:block; margin-top:60px; min-width:0;}
  .jr-v18-skill-board {display:grid; grid-template-columns:minmax(0,1fr) !important; gap:12px; padding:20px 16px; border-radius:18px;}
  .jr-v18-skill {min-width:0; gap:12px; padding:7px 0; line-height:1.5; font-size:clamp(13px,3.6vw,16px);}
  .jr-v18-skill > span:last-child {min-width:0;overflow-wrap:break-word;}
  .jr-v18-icon {flex-shrink:0;}
  .jr-v18-tool-panels {grid-template-columns:minmax(0,1fr) !important;gap:20px;}
  .jr-v18-tool-panel {width:100%; min-width:0;}
  .jr-v18-tool-list {display:flex;flex-wrap:wrap; gap:9px;}
  .jr-v18-tool {max-width:100%; min-width:0; white-space:normal;}
  .jr-v18-tool-panel[aria-label="Software Toolkit"] .jr-v18-tool {min-height:51px;padding:9px 11px;gap:9px;}
  .jr-v18-tool-panel[aria-label="Software Toolkit"] .jr-v18-tool img {width:29px !important;height:29px !important;flex-basis:29px;}
  .work {padding:68px 5% 75px;}
  .work h2 {font-size:clamp(34px,8.1vw,53px);}
  .work .sub {padding:0 10px;margin:14px auto 26px;}
  .filters {display:flex; justify-content:center; gap:8px; margin-bottom:25px;}
  .filters button {min-height:44px;padding:11px 13px;font-size:11px; touch-action:manipulation;}
  .gallery {width:100%;max-width:100%;gap:26px;}
  .gallery .card {width:100%;max-width:100%;min-width:0;overflow:hidden;}
  .video-stage,.short-stage,.regular-stage {width:100% !important;aspect-ratio:16/9 !important;min-height:0 !important;height:auto !important;}
  .thumb-shell {width:100% !important;height:100% !important;}
  .thumb-shell .thumb-play {width:clamp(45px,12vw,64px);height:clamp(45px,12vw,64px);font-size:21px;}
  .gallery .card .meta {padding:15px 17px 18px;}
  .gallery .meta h3 {font-size:clamp(15px,4vw,19px);overflow-wrap:anywhere;}
  .jr-v18-footer {padding:80px 6% 38px;}
  .jr-v18-footer h2 {font-size:clamp(34px,9vw,57px);line-height:1.07;overflow-wrap:normal;}
  .jr-v18-contact {min-height:48px;display:inline-flex;align-items:center;justify-content:center;}
  .jr-v25-backtop {right:16px;bottom:16px;}
}
@media (max-width: 390px) {
  nav {padding-inline:4%;gap:6px;}
  .navlinks {gap:9px;}
  .navlinks a {font-size:10px;letter-spacing:0;}
  .hero h1 {font-size:clamp(37px,10.6vw,50px);}
  .filters {gap:7px;}
  .filters button {font-size:10px;padding-inline:11px;}
  .jr-v18-skill-board {padding:16px 12px;}
}
/* Keep native mobile interaction: no mouse-following decorations on touch. */
@media (hover:none), (pointer:coarse) {
  .joy-cursor,.joy-v11-canvas {display:none !important;}
  body,body * {cursor:auto;}
  button,a {cursor:pointer;touch-action:manipulation;}
  .hero::before {opacity:0 !important;}
  .jr-v25-hover-overlay {display:none !important;}
}
@media (prefers-reduced-motion:reduce) {
  .jr-v25-marquee-track {animation:none !important;}
}