/* =========================================================
   V4.4 — MOBILE EXPERIENCE REBUILD
   Mobile is treated as its own composition, not a scaled desktop.
   Targets iOS Safari / Chrome Android / small tablets.
   ========================================================= */

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  :root{
    --mobile-gutter:20px;
    --mobile-nav:68px;
  }

  html{
    width:100%;
    max-width:100%;
    overflow-x:clip;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    scroll-padding-top:var(--mobile-nav);
  }
  body{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:clip;
    overscroll-behavior-x:none;
  }
  main,
  main>section,
  .profile,
  .experience-section,
  .projects-section,
  .chapter-shift,
  .beyond-content,
  .contact-section{
    width:100%;
    max-width:100%;
    min-width:0;
    margin-inline:0;
  }

  /* Safari paint containment can create clipped / half-width sections. */
  .experience-path,
  .project-grid,
  .basketball-story,
  .music-story,
  .project-card,
  .photo-card,
  .project-card-media,
  .music-stage,
  .basketball-media figure,
  .education-photo-wrap{
    content-visibility:visible!important;
    contain:none!important;
    contain-intrinsic-size:none!important;
  }

  [data-reveal]{
    transform:translateY(10px);
    transition-duration:.52s;
  }

  /* ---------- NAV ---------- */
  .site-nav{
    height:var(--mobile-nav);
    padding-left:max(var(--mobile-gutter),env(safe-area-inset-left));
    padding-right:max(var(--mobile-gutter),env(safe-area-inset-right));
    width:100%;
    max-width:100%;
    background:rgba(8,8,8,.76);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .site-nav.scrolled{height:60px}
  .brand{gap:10px;min-width:0}
  .brand-logo{width:18px;height:34px;flex:0 0 auto}
  .brand span{
    font-size:1.06rem;
    line-height:1;
    white-space:nowrap;
    letter-spacing:-.01em;
  }
  .menu-button{width:42px;height:42px;display:grid;place-items:end center}
  .menu-button svg{width:25px;height:25px}

  .mobile-menu{padding:22px var(--mobile-gutter) 30px}
  .mobile-menu .brand span{font-size:1.12rem}
  .mobile-menu-links{gap:10px}
  .mobile-menu-links a{font-size:clamp(2.8rem,14vw,4.6rem);line-height:.93}

  /* ---------- HERO ---------- */
  .hero{
    width:100%;
    min-height:100svh;
    height:100svh;
    max-height:none;
  }
  .hero-media,
  .hero-overlay,
  .hero-halo,
  .grain{inset:0;width:100%;height:100%}
  .hero-media img{
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    object-position:58% center;
    transform:none;
  }
  .hero-overlay{
    background:
      linear-gradient(180deg,rgba(5,5,5,.16) 0%,rgba(5,5,5,.14) 31%,rgba(5,5,5,.56) 72%,rgba(5,5,5,.88) 100%),
      linear-gradient(90deg,rgba(5,5,5,.45) 0%,rgba(5,5,5,.12) 68%,rgba(5,5,5,.06) 100%);
  }
  .ghost-mark{display:none}
  .hero-copy{
    left:var(--mobile-gutter);
    right:var(--mobile-gutter);
    bottom:max(54px,6.5svh);
    top:auto;
    width:auto;
    max-width:340px;
    transform:none;
  }
  .eyebrow{
    font-size:8px;
    letter-spacing:.20em;
    line-height:1.5;
    margin-bottom:18px;
    max-width:280px;
  }
  .eyebrow:before{width:28px;flex:0 0 auto}
  .hero h1{
    font-size:clamp(2.8rem,12.4vw,4.1rem)!important;
    line-height:.91!important;
    letter-spacing:-.038em!important;
    max-width:330px!important;
  }
  .hero-line{padding-bottom:.04em}
  .hero-line span{white-space:nowrap}
  .hero-sub{
    max-width:295px;
    margin-top:20px;
    font-size:12px;
    line-height:1.62;
  }
  .hero-actions{margin-top:25px;gap:12px}
  .button{padding:14px 18px;font-size:8px}
  .text-link{display:none}
  .scroll-cue{display:none}
  .hero:after{height:72px}

  /* ---------- SHARED MOBILE TYPE ---------- */
  .section-heading{
    display:block;
    width:100%;
    max-width:100%;
    margin-bottom:58px!important;
  }
  .section-index{
    display:block;
    padding:0;
    margin-bottom:18px;
    font-size:7px;
    letter-spacing:.18em;
  }
  .section-heading h2{
    margin:0!important;
    max-width:100%!important;
    font-size:clamp(2.55rem,11vw,3.55rem)!important;
    line-height:.94!important;
    letter-spacing:-.035em!important;
  }
  .section-heading .section-lede,
  .section-heading .profile-intro{
    margin:26px 0 0!important;
    max-width:100%!important;
    grid-column:auto!important;
  }

  /* ---------- PROFILE / EDUCATION ---------- */
  .profile{
    padding:104px var(--mobile-gutter) 0!important;
    background:linear-gradient(180deg,#e2ddd4 0%,var(--paper) 35%,#d7d2c8 100%);
  }
  .profile-heading{margin-bottom:62px!important}
  .profile-intro p{
    font-size:12.5px!important;
    line-height:1.72!important;
    padding-bottom:15px;
  }
  .profile-intro p:first-child{font-size:13px!important}

  .education-scene{
    display:block!important;
    width:100%;
    max-width:100%;
    padding:0 0 74px!important;
  }
  .education-scene:before{display:none!important}
  .education-portrait{
    position:relative!important;
    top:auto!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 0 48px!important;
    justify-self:auto!important;
  }
  .education-photo-wrap{
    width:100%;
    overflow:hidden;
    background:transparent;
  }
  .education-photo-wrap:before{filter:blur(28px)}
  .education-photo-wrap:after{
    background:linear-gradient(180deg,transparent 86%,var(--paper) 100%)!important;
  }
  .education-photo-wrap img{
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center top!important;
  }
  .education-portrait figcaption{
    display:grid;
    grid-template-columns:1fr;
    gap:4px;
    font-size:6.5px;
  }
  .education-title{
    display:block!important;
    padding:18px 0 34px!important;
  }
  .education-title>span{display:block;margin-bottom:12px;font-size:7px}
  .education-title p{max-width:100%;font-size:12px;line-height:1.68}
  .education-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
    padding:30px 0 36px!important;
  }
  .education-logo{
    width:auto;
    height:auto!important;
    min-height:44px;
    padding:0!important;
    justify-content:flex-start!important;
  }
  .education-logo img,
  .education-logo-cuhk img,
  .education-logo-cqu img{
    max-width:118px!important;
    max-height:52px!important;
  }
  .education-meta{
    margin-bottom:13px;
    gap:5px!important;
    flex-direction:column!important;
    align-items:flex-start;
    font-size:7px;
  }
  .education-main h3{
    font-size:clamp(1.95rem,8.8vw,2.65rem)!important;
    line-height:.98!important;
    max-width:330px;
    margin-bottom:10px;
  }
  .education-main>strong{font-size:13px}
  .education-main>p{font-size:11px;line-height:1.55}
  .education-main ul{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .education-main li{font-size:10.5px;line-height:1.55}
  .skills-marquee{
    margin-inline:calc(var(--mobile-gutter) * -1)!important;
    width:calc(100% + var(--mobile-gutter) * 2);
  }
  .skills-track span{padding:17px 22px;font-size:8px}

  /* ---------- EXPERIENCE ---------- */
  .experience-section{
    padding:104px var(--mobile-gutter) 104px!important;
  }
  .experience-heading{margin-bottom:58px!important}
  .experience-heading h2{max-width:335px!important}
  .experience-heading .section-lede{font-size:12px;line-height:1.72;color:rgba(255,255,255,.56)}
  .experience-path{
    margin-left:0!important;
    border-top:1px solid var(--white-line);
    width:100%;
  }
  .experience-path:before,.experience-dot{display:none!important}
  .experience-trigger{
    display:grid!important;
    grid-template-columns:32px minmax(0,1fr) 28px!important;
    gap:11px!important;
    width:100%;
    padding:24px 0!important;
  }
  .experience-no{
    grid-column:1;
    grid-row:1/3;
    align-self:start;
    padding-top:1px;
    font-size:1.2rem!important;
  }
  .experience-primary{grid-column:2;min-width:0}
  .experience-primary strong{
    font-size:clamp(1.3rem,6.2vw,1.7rem)!important;
    line-height:1.02!important;
    overflow-wrap:anywhere;
  }
  .experience-primary span{font-size:8px;line-height:1.45;margin-top:7px}
  .experience-secondary{
    grid-column:2!important;
    grid-row:2!important;
    display:flex!important;
    flex-wrap:wrap;
    gap:5px 12px!important;
    font-size:6.5px!important;
    line-height:1.4;
  }
  .experience-plus{
    grid-column:3!important;
    grid-row:1/3!important;
    align-self:center;
    justify-self:end;
    font-size:22px;
  }
  .experience-detail-inner{
    display:block!important;
    padding:0!important;
  }
  .experience-item.open .experience-detail-inner{padding:0 0 26px!important}
  .experience-detail-inner>span{display:block;padding:0 0 13px;font-size:6.5px}
  .experience-detail-inner p{font-size:11px;line-height:1.68;padding:14px 0 14px 18px}

  /* ---------- PROJECTS ---------- */
  .projects-section{
    padding:104px var(--mobile-gutter) 112px!important;
    width:100%!important;
    background:linear-gradient(180deg,var(--paper) 0%,#d8d3ca 100%)!important;
  }
  .projects-heading{margin-bottom:58px!important}
  .projects-heading h2{max-width:300px!important}
  .projects-heading .section-lede{font-size:12px;line-height:1.7}
  .project-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    gap:20px!important;
  }
  .project-card{
    display:block;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:16px!important;
    overflow:hidden;
    text-align:left;
  }
  .project-card-top{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start!important;
    gap:4px 10px!important;
    padding-bottom:13px;
    font-size:6.5px;
  }
  .project-card h3{
    font-size:clamp(1.85rem,8.6vw,2.55rem)!important;
    line-height:.98!important;
    letter-spacing:-.032em!important;
    max-width:100%!important;
    margin:20px 0 18px!important;
    overflow-wrap:break-word;
  }
  .project-card-media{
    width:100%;
    aspect-ratio:16/10;
    padding:11px!important;
  }
  .project-card-media img{width:100%;height:100%;object-fit:contain}
  .project-card-foot{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:14px!important;
    padding-top:14px;
  }
  .project-card-foot p{max-width:100%!important;font-size:7px;line-height:1.55}

  /* ---------- CHAPTER SHIFT ---------- */
  .chapter-shift{
    height:auto!important;
    min-height:0!important;
    background:#0a0a0a;
  }
  .chapter-sticky{
    position:relative!important;
    top:auto!important;
    height:auto!important;
    min-height:0!important;
    overflow:hidden;
    padding:96px var(--mobile-gutter) 104px;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      'photoA'
      'copyA'
      'photoB'
      'copyB';
    gap:30px;
    background:linear-gradient(180deg,#d8d3ca 0%,#bdb7ae 48%,#0a0a0a 52%,#080808 100%);
  }
  .chapter-paper,.chapter-darkness,.chapter-grid,.chapter-progress{display:none!important}
  .chapter-photo{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    opacity:1!important;
    transform:none!important;
    margin:0!important;
    box-shadow:0 18px 42px rgba(0,0,0,.16);
  }
  .chapter-photo-a{grid-area:photoA}
  .chapter-photo-b{grid-area:photoB;margin-top:38px!important}
  .chapter-photo img{
    display:block;
    width:100%;
    height:auto!important;
    max-height:none;
    aspect-ratio:auto;
    object-fit:contain!important;
    transform:none!important;
  }
  .chapter-photo figcaption{font-size:6px}
  .chapter-copy{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-width:100%!important;
    opacity:1!important;
    transform:none!important;
  }
  .chapter-copy-a{grid-area:copyA;color:#111!important}
  .chapter-copy-b{grid-area:copyB;color:#fff!important}
  .chapter-copy>span{font-size:7px;margin-bottom:16px}
  .chapter-copy h2{
    font-size:clamp(2.65rem,11.5vw,3.75rem)!important;
    line-height:.94!important;
    letter-spacing:-.035em!important;
    max-width:330px!important;
  }
  .chapter-copy p{
    max-width:100%!important;
    margin:19px 0 0!important;
    font-size:11px!important;
    line-height:1.7!important;
  }
  .chapter-copy-a p{color:rgba(9,9,9,.66)!important}
  .chapter-copy-b p{color:rgba(255,255,255,.62)!important}

  /* ---------- PHOTOGRAPHY ---------- */
  .beyond-content{width:100%;overflow:hidden}
  .photography-module{
    width:100%;
    min-height:0!important;
    padding:96px 0 76px!important;
    overflow:hidden;
  }
  .photography-module .story-heading{
    display:block!important;
    width:100%;
    padding:0 var(--mobile-gutter) 28px!important;
  }
  .photography-module .story-heading>div{max-width:100%!important}
  .photography-module .story-heading h3{
    font-size:clamp(2.65rem,11.2vw,3.65rem)!important;
    line-height:.95!important;
    max-width:290px!important;
    margin:0;
  }
  .photography-module .story-heading p{
    max-width:330px!important;
    margin:24px 0 0!important;
    font-size:11px!important;
    line-height:1.68!important;
  }
  .gallery-controls{
    position:static!important;
    display:flex!important;
    justify-content:flex-end;
    align-items:center;
    width:100%;
    padding:0 var(--mobile-gutter) 22px;
  }
  .gallery-controls>span{display:none!important}
  .gallery-controls button{
    display:flex!important;
    min-height:38px;
    padding:0 13px;
    font-size:8px;
  }
  .photo-viewport{
    display:block!important;
    width:100%!important;
    min-height:0!important;
    overflow:hidden!important;
    touch-action:pan-y;
  }
  .photo-track{
    display:flex!important;
    align-items:center!important;
    gap:14px!important;
    width:max-content!important;
    min-height:0!important;
    padding:0 var(--mobile-gutter) 10px!important;
    animation-duration:125s!important;
  }
  .photo-card{
    display:block!important;
    flex:0 0 auto!important;
    width:auto!important;
    max-width:84vw!important;
    overflow:hidden!important;
  }
  .photo-card img{
    display:block!important;
    width:auto!important;
    height:clamp(300px,52svh,470px)!important;
    max-width:84vw!important;
    max-height:470px!important;
    object-fit:contain!important;
    opacity:1!important;
    visibility:visible!important;
  }

  /* ---------- BASKETBALL ---------- */
  .basketball-story{
    display:block!important;
    width:100%!important;
    padding:96px var(--mobile-gutter) 100px!important;
  }
  .basketball-copy{
    position:relative!important;
    top:auto!important;
    width:100%;
    max-width:100%;
  }
  .basketball-copy h3{
    font-size:clamp(2.55rem,10.8vw,3.5rem)!important;
    line-height:.96!important;
    max-width:300px!important;
  }
  .basketball-copy p{
    max-width:330px!important;
    margin-top:24px!important;
    font-size:11.5px!important;
    line-height:1.72!important;
  }
  .basketball-stat{margin-top:32px!important}
  .basketball-stat strong{font-size:4rem!important}
  .basketball-media{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:18px!important;
    width:100%;
    margin-top:50px;
  }
  .basketball-media figure,
  .basketball-team,
  .basketball-jersey{
    width:100%!important;
    max-width:100%!important;
    padding-top:0!important;
    justify-self:stretch!important;
  }
  .basketball-media img{width:100%!important;height:auto!important;object-fit:contain!important}
  .basketball-jersey{max-width:270px!important;margin-left:auto!important}

  /* ---------- CHINESE ORCHESTRA ---------- */
  .music-story{
    width:100%!important;
    padding:96px var(--mobile-gutter) 118px!important;
  }
  .music-stage{
    width:100%;
    margin-bottom:48px!important;
  }
  .music-stage img{width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important}
  .music-stage-caption{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    padding:12px 0 0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:4px!important;
    font-size:6px!important;
  }
  .music-stage-overlay{display:none!important}
  .music-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:32px!important;
    width:100%;
  }
  .music-title,.music-copy,.music-group{
    grid-column:1!important;
    grid-row:auto!important;
    width:100%;
    min-width:0;
  }
  .music-title h3{
    font-size:clamp(2.55rem,10.6vw,3.45rem)!important;
    line-height:.96!important;
    max-width:310px!important;
  }
  .music-copy{padding-top:0!important}
  .music-copy .music-lead{font-size:13px!important;line-height:1.58!important}
  .music-copy p{font-size:11.5px!important;line-height:1.72!important}
  .music-metrics{
    grid-template-columns:1fr 1fr!important;
    width:100%;
    margin-top:28px!important;
  }
  .music-metrics div{min-width:0;padding:16px!important}
  .music-metrics strong{font-size:2.45rem!important}
  .music-group{margin-top:4px!important}
  .music-group img{width:100%!important;height:auto!important}
  .sound-lines{display:none!important}

  /* ---------- CONTACT ---------- */
  .contact-section{
    width:100%!important;
    min-height:auto!important;
    padding:100px var(--mobile-gutter) calc(28px + env(safe-area-inset-bottom))!important;
  }
  .contact-shell{
    display:block!important;
    width:100%!important;
    min-height:0!important;
  }
  .contact-message{width:100%;max-width:100%}
  .contact-message>p{margin:20px 0 17px!important;font-size:7px;line-height:1.6}
  .contact-message h2,
  .contact-section h2{
    font-size:clamp(2.5rem,10.5vw,3.5rem)!important;
    line-height:.96!important;
    letter-spacing:-.034em!important;
    max-width:320px!important;
    margin:0!important;
  }
  .contact-panel{
    width:100%!important;
    max-width:100%!important;
    margin-top:54px;
    justify-self:auto!important;
  }
  .contact-panel-label{
    padding:14px 0 16px;
    font-size:6.5px;
    line-height:1.5;
  }
  .contact-action{
    grid-template-columns:36px minmax(0,1fr) 18px!important;
    gap:12px!important;
    width:100%;
    padding:17px 0!important;
  }
  .contact-icon{width:34px;height:34px}
  .contact-action b{font-size:9px}
  .contact-action small{
    font-size:8px;
    overflow-wrap:anywhere;
    line-height:1.45;
  }
  .contact-signoff{
    flex-wrap:wrap;
    gap:12px;
    font-size:6px;
    padding:16px 0;
  }
  .contact-section footer{
    display:flex!important;
    flex-direction:column;
    align-items:flex-start!important;
    gap:8px!important;
    width:100%;
    padding-top:20px;
    font-size:6px!important;
  }
  .contact-section footer span:nth-child(2){display:block!important}

  /* ---------- CASE STUDY ---------- */
  .case-overlay{width:100%;max-width:100%;overflow-x:hidden}
  .case-topbar{height:60px;padding:0 var(--mobile-gutter)!important}
  .case-title-block{
    display:block!important;
    padding:58px var(--mobile-gutter) 42px!important;
  }
  .case-title-block>span{margin-bottom:17px}
  .case-title-block h2{
    font-size:clamp(2.5rem,10.5vw,3.6rem)!important;
    line-height:.95!important;
    max-width:100%!important;
    overflow-wrap:anywhere;
  }
  .case-title-block p{margin-top:24px!important;font-size:11.5px!important;line-height:1.7!important}
  .case-image-stage{margin:0 var(--mobile-gutter)!important;padding:10px!important}
  .case-content{padding:58px var(--mobile-gutter) 86px!important}
  .case-role-grid{grid-template-columns:1fr!important;gap:28px!important;padding-bottom:50px!important}
  .case-role-grid strong{font-size:1.9rem!important}
  .case-facts{grid-template-columns:1fr 1fr!important}
  .case-facts>div{padding:25px 0!important}
  .case-facts>div+div{padding-left:14px!important}
  .case-facts>div:nth-child(3){border-left:0!important;padding-left:0!important}
  .case-facts>div:nth-child(n+3){border-top:1px solid var(--line)}
  .case-facts strong{font-size:2.6rem!important}
  .case-story-grid,.case-outcome{display:block!important;padding:58px 0!important}
  .case-story-grid h3{font-size:2.5rem!important;margin-bottom:34px!important}
  .case-responsibilities p{grid-template-columns:28px 1fr;gap:10px;font-size:11.5px;line-height:1.68}
  .case-outcome p{font-size:1.45rem!important;line-height:1.3!important}

  /* ---------- LIGHTBOX ---------- */
  .lightbox-stage{max-width:100vw!important;width:100%;padding:0 16px}
  .lightbox-stage img{max-width:100%!important;max-height:68svh!important}
  .lightbox-caption{width:100%!important;grid-template-columns:1fr!important;gap:8px!important;padding:15px 4px 0}
  .lightbox-caption p{font-size:10.5px}
  .lightbox-close{right:14px!important;top:14px!important}
  .lightbox-prev,.lightbox-next{width:42px!important;height:42px!important}
}

/* Narrow phones: iPhone SE / compact Android */
@media (max-width: 390px) {
  :root{--mobile-gutter:16px}
  .brand span{font-size:.98rem}
  .hero-copy{max-width:305px}
  .hero h1{font-size:clamp(2.6rem,12vw,3.65rem)!important}
  .section-heading h2{font-size:clamp(2.4rem,10.7vw,3.25rem)!important}
  .education-main h3{font-size:clamp(1.8rem,8.4vw,2.4rem)!important}
  .project-card h3{font-size:clamp(1.7rem,8.1vw,2.3rem)!important}
  .chapter-copy h2,.photography-module .story-heading h3,.basketball-copy h3,.music-title h3,.contact-message h2,.contact-section h2{font-size:clamp(2.35rem,10.4vw,3.25rem)!important}
}