@media (max-width:760px){
  #scrollSpace{height:1610vh}
  .hud-name{display:none}
  .hud-tl{top:16px;left:16px}
  .mark{width:30px;height:30px;font-size:11px}
  #audioBtn{top:16px;right:16px;padding:8px 11px;font-size:9px;letter-spacing:.16em}
  #sectLabel{left:16px;bottom:16px;font-size:9px;letter-spacing:.22em}
  #sectLabel .rule{width:26px}
  #scrollCue{bottom:26px;font-size:9px;letter-spacing:.3em}
  #scrollCue .stem{height:34px}
  .eyebrow{font-size:9px;letter-spacing:.3em;margin-bottom:14px}

  .proj,.proj.right{justify-content:center;align-items:center;padding:0}
  .panel{margin:0;width:92vw;max-width:92vw;padding:24px 20px 22px;
    backdrop-filter:blur(8px);max-height:80vh;overflow:hidden}
  .panel .idx{top:20px;right:20px;font-size:9px}
  .panel h3{font-size:1.35rem;line-height:1.12}
  .panel p{margin-top:12px;font-size:.83rem;line-height:1.55}
  .chips{margin-top:14px;gap:6px}
  .chip{font-size:9px;padding:4px 7px;letter-spacing:.1em}
  .plinks{margin-top:18px;gap:18px}
  .plinks a{font-size:10px;letter-spacing:.16em}

  #heroSub{margin-top:18px;font-size:.88rem;line-height:1.6;max-width:88vw}
  #heroRole{font-size:10px;letter-spacing:.32em}
  .heroRule{height:42px;margin-top:24px}
  #diveSec h3{letter-spacing:.34em}
  #socialSec .sub{font-size:.85rem}
  .cards{margin-top:30px;gap:10px}
  .card{width:29vw;max-width:150px;padding:20px 8px 16px;backdrop-filter:blur(8px)}
  .card svg{width:24px;height:24px}
  .card .cname{margin-top:12px;font-size:9px;letter-spacing:.16em}
  .card .chandle{font-size:8px;word-break:break-all;line-height:1.35}
  #endQuote{margin-top:24px;font-size:1rem}
  #endMono{font-size:9px;letter-spacing:.2em}
}
@media (max-height:560px){
  .proj,.proj.right{justify-content:center;align-items:center;padding:0}
  .panel{margin:0;width:min(620px,88vw);max-width:88vw;padding:16px 20px 15px;
    backdrop-filter:blur(8px);max-height:92vh;overflow:hidden}
  .panel .idx{top:14px;right:16px;font-size:9px}
  .panel h3{font-size:1.15rem;line-height:1.12}
  .panel p{margin-top:9px;font-size:.78rem;line-height:1.45}
  .eyebrow{margin-bottom:9px;font-size:9px;letter-spacing:.26em}
  .chips{margin-top:11px;gap:5px}
  .chip{font-size:9px;padding:3px 6px;letter-spacing:.08em}
  .plinks{margin-top:13px;gap:16px}
  .plinks a{font-size:10px;letter-spacing:.14em}
  #scrollCue{display:none}
  #heroSub{margin-top:12px;font-size:.85rem;line-height:1.5}
  .heroRule{height:24px;margin-top:14px}
  #socialSec .sub{font-size:.8rem}
  .cards{margin-top:18px;gap:10px}
  .card{width:130px;padding:14px 10px 12px}
  .card svg{width:20px;height:20px}
  .card .cname{margin-top:9px;font-size:9px}
  .card .chandle{font-size:8px;word-break:break-all}
  #endQuote{margin-top:16px;font-size:.95rem}
  .endRule{margin-top:18px}
  #endMono{margin-top:14px;font-size:9px}
}
@media (prefers-reduced-motion:reduce){
  #heroName .ltr{transition:opacity .4s ease}
  #scrollCue .stem{animation:none}
}