/* Mobile refinement is intentionally isolated from the desktop composition. */
.mobile-menu-toggle{display:none}
.mobile-menu-toggle[hidden],#primary-nav[hidden]{display:none!important}

/* Keep the expanded catalogue navigation on one line on smaller laptops. */
@media(min-width:901px) and (max-width:1200px){
 .site-header{gap:16px}
 .site-header nav{gap:14px;flex-shrink:0}
 .site-header nav a{white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
 .site-header .news-menu{flex:0 1 180px;min-width:140px}
 .site-header .news-toggle{min-height:44px}
 .site-header .news-panel{width:300px;left:auto;right:0}
}

@media(max-width:900px){
 html{scroll-padding-top:24px}
 .site-header,.records-page .site-header{
  display:grid;grid-template-columns:minmax(72px,1fr) auto auto;align-items:center;
  gap:12px 8px;padding:20px 6vw;
  padding-top:max(20px,env(safe-area-inset-top));
  padding-left:max(6vw,env(safe-area-inset-left));
  padding-right:max(6vw,env(safe-area-inset-right));
  background:linear-gradient(#000b,#0005 70%,transparent)
 }
 .site-header:not(.mobile-nav-ready){position:relative;background:#080808}
 .site-header .brand{grid-column:1;grid-row:1;width:min(108px,100%);margin:0}
 .site-header .news-menu{
  position:static;inset:auto;grid-column:2;grid-row:1;
  width:108px;flex:none;margin:0;align-self:center
 }
 .site-header .news-toggle{
  min-height:44px;gap:8px;padding:10px;font-size:12px;line-height:1.4;
  letter-spacing:.03em;background:#08080855;border-color:#ffffff50
 }
 .site-header .news-toggle svg{flex-shrink:0;width:16px;height:16px}
 .site-header .news-panel{
  left:auto;right:max(6vw,env(safe-area-inset-right));top:calc(100% - 2px);
  width:min(336px,calc(100vw - max(6vw,env(safe-area-inset-left)) - max(6vw,env(safe-area-inset-right))));
  padding-top:12px
 }
 .site-header .news-menu.is-open .news-panel{
  max-height:calc(100svh - 100px - env(safe-area-inset-top));overflow-y:auto;
  overscroll-behavior:contain
 }
 .site-header .news-item{margin-inline:16px;padding-block:14px;gap:12px}
 .site-header .news-item img,.site-header .news-date-tile{width:62px;height:44px}
 .site-header .news-item time{font-size:10px;margin-bottom:4px}
 .site-header .news-item strong{font-size:13px;line-height:1.6}
 .site-header .news-all{min-height:48px;padding:14px 16px;font-size:12px}
 .site-header #primary-nav{
  grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  width:100%;margin:0;gap:4px;font-size:14px;align-items:stretch;
  padding:12px;border:1px solid #ffffff35;border-radius:8px;background:#101211f5
 }
 .site-header #primary-nav>a{
  display:flex;align-items:center;min-width:0;min-height:48px;padding:12px;
  line-height:1.5;white-space:normal;overflow-wrap:anywhere;border-radius:4px;
  animation:none;transition:background .2s,color .2s
 }
 .site-header #primary-nav>a:after{display:none}
 .site-header #primary-nav>a:hover{background:#ffffff09;color:#e2cc9a}
 .site-header #primary-nav>a:focus-visible{outline-offset:-2px;background:#ffffff09}
 .site-header.mobile-nav-ready #primary-nav{
  position:absolute;top:calc(100% - 2px);left:6vw;right:6vw;width:auto;
  left:max(6vw,env(safe-area-inset-left));right:max(6vw,env(safe-area-inset-right));
  max-height:calc(100svh - 110px - env(safe-area-inset-top));overflow-y:auto;
  overscroll-behavior:contain;box-shadow:0 20px 50px #0007
 }
 .mobile-nav-ready .mobile-menu-toggle{
  grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:center;
  gap:8px;min-width:72px;min-height:44px;padding:10px;border:1px solid #ffffff50;
  border-radius:4px;background:#08080855;color:#fff;font-size:12px;line-height:1.4;
  cursor:pointer;transition:background .2s,border-color .2s
 }
 .mobile-menu-toggle:hover,.mobile-menu-toggle[aria-expanded=true]{
  background:#ffffff12;border-color:#d8bd80
 }
 .mobile-menu-toggle:focus-visible{outline-offset:4px}
 .mobile-menu-icon{position:relative;display:block;width:16px;height:14px;flex:0 0 16px}
 .mobile-menu-icon:before,.mobile-menu-icon:after{
  content:"";position:absolute;left:0;width:16px;height:1px;background:currentColor;
  transition:transform .2s
 }
 .mobile-menu-icon:before{top:3px}.mobile-menu-icon:after{top:10px}
 .mobile-menu-open .mobile-menu-icon:before{transform:translateY(3.5px) rotate(45deg)}
 .mobile-menu-open .mobile-menu-icon:after{transform:translateY(-3.5px) rotate(-45deg)}
 .records-page .site-header{grid-template-columns:minmax(0,1fr) auto;background:#080808}
 .records-page .site-header .mobile-menu-toggle{grid-column:2}

 .hero{
  display:flex;flex-direction:column;justify-content:flex-end;height:auto;min-height:100svh;
  padding:132px 6vw max(116px,16svh)
 }
 .hero-copy{position:relative;inset:auto;max-width:100%;width:100%}
 .hero-copy>.eyebrow{font-size:clamp(17px,2.8vw,22px);margin-bottom:18px;letter-spacing:.14em}
 .hero h1{font-size:clamp(64px,12.5vw,112px);line-height:1;letter-spacing:-.045em;margin-bottom:22px}
 .hero-description{font-size:clamp(13px,1.8vw,16px);line-height:1.8;letter-spacing:.09em;margin-bottom:28px}
 .outline-button{min-height:52px;max-width:100%;padding:14px 20px;gap:32px;font-size:15px;line-height:1.5}
 .hero-bottom{
  left:max(6vw,env(safe-area-inset-left));right:max(6vw,env(safe-area-inset-right));
  bottom:max(24px,env(safe-area-inset-bottom));min-height:44px
 }
 .scroll-link,#video-toggle{width:44px;height:44px;min-height:44px}

 .about{
  height:auto;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);
  align-content:center;align-items:start;gap:32px;padding:80px 6vw 40px
 }
 .about-copy{max-width:640px;min-width:0}
 .about h2{font-size:clamp(36px,6.6vw,58px);line-height:1.3;margin-bottom:26px}
 .about-copy>p:not(.eyebrow){font-size:15px;line-height:1.95;margin-bottom:16px}
 .about-copy>p:last-child{margin-bottom:0}
 .about-stats{position:static;width:min(100%,560px);margin:0}
 .about-stats .impact-stats,.records-opening .impact-stats{gap:clamp(8px,2vw,18px);padding-top:20px}
 .about-stats .impact-stats strong,.records-opening .impact-stats strong{font-size:clamp(28px,5.8vw,44px)}
 .about-stats .impact-stats strong small,.records-opening .impact-stats strong small{font-size:12px;margin-left:2px}
 .about-stats .stat-approx,.records-opening .stat-approx{font-size:11px;margin-right:2px}
 .about-stats .impact-stats>div>span,.records-opening .impact-stats>div>span{font-size:11px;line-height:1.7;margin-top:8px}
 .about-stats .stats-date,.records-opening .stats-date{font-size:11px;line-height:1.8;margin-top:16px}
 .about-caption{position:static;font-size:10px;line-height:1.6;text-align:right;letter-spacing:.12em}

 .works{height:auto;min-height:0;padding:64px 6vw;gap:30px}
 .works-heading{align-items:flex-start;gap:20px;flex-direction:column}
 .works h2{font-size:clamp(30px,4.8vw,42px);line-height:1.4}
 .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px;width:100%}
 .work-meta{padding-top:14px}.work-meta h3{font-size:18px;line-height:1.6;white-space:normal}
 .work-meta>span{font-size:11px;line-height:1.6}
 .work-duration{font-size:11px;line-height:1.5}
 .collection-shortcuts{gap:10px;padding-top:24px;font-size:13px}
 .collection-shortcuts>a,.works-all.bilibili-button,.text-link{display:inline-flex;align-items:center;min-height:44px;line-height:1.6}
 .collection-shortcuts>a{padding:10px 14px}

 .practice{padding:64px 6vw;min-height:0}.practice:before{display:none}
 .practice-overview{min-width:0;padding-right:0;gap:40px}
 .practice-intro,.practice-list{min-width:0}
 .practice-intro h2{font-size:clamp(36px,5.5vw,48px);line-height:1.3}
 .practice-intro>p:not(.eyebrow){font-size:15px;line-height:1.95;max-width:none;margin-bottom:18px}
 .practice-list h3{font-size:22px;line-height:1.6}.practice-list p{font-size:14px;line-height:1.9}
 .practice-guide{
  position:static;display:inline-flex;flex-direction:row;align-items:center;gap:14px;
  margin:30px 0 0;min-height:44px;text-align:left;font-size:13px
 }
 .practice-guide br{display:none}.guide-circle{width:44px;height:44px;flex-shrink:0}
 .development-history{margin-top:56px}.project-history-heading{padding-bottom:22px}
 .project-history-heading h3{font-size:26px;line-height:1.5}
 .development-timeline:before{left:5px;top:10px;bottom:25px}
 .development-timeline li{grid-template-columns:1fr;gap:8px;padding:0 0 32px 28px}
 .development-timeline li:before{left:1px;top:8px}
 .timeline-year{font-size:15px;line-height:1.6}
 .development-timeline h4{font-size:20px;line-height:1.6;margin-bottom:8px}
 .development-timeline p{font-size:14px;line-height:1.95}

 .social{min-height:0;padding:64px 6vw}
 .social-heading{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:30px}
 .social-heading h2{font-size:30px;line-height:1.4}.social-heading p{font-size:13px;line-height:1.8}
 .social-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 .platform,.wechat summary{min-height:76px;padding:18px;gap:12px;font-size:15px}
 .qr-trigger{font-size:14px}.qr-action{max-width:80px;font-size:11px;line-height:1.6;text-align:right;white-space:normal}
 .join-block{grid-template-columns:minmax(0,1fr) auto;gap:32px;margin-top:48px;padding-top:40px}
 .join-block>div{min-width:0}.join-block h3{font-size:32px;line-height:1.5}
 .join-block p:not(.eyebrow){font-size:15px;line-height:1.9}
 .join-qr{justify-self:start}.join-qr img{width:160px;height:160px}.join-qr span{font-size:11px;line-height:1.8}
 .qr-dialog{max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)))}
 .qr-dialog-content{padding:44px 24px 26px}

 .site-footer{
  margin:0;padding:44px 6vw 28px;
  padding-bottom:max(28px,env(safe-area-inset-bottom));
  padding-left:max(6vw,env(safe-area-inset-left));padding-right:max(6vw,env(safe-area-inset-right))
 }
 .footer-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}
 .footer-main .footer-logo{grid-column:1/-1;width:125px}.footer-group{min-width:0}
 .footer-group h2{font-size:12px;margin-bottom:12px}
 .footer-group>a{max-width:100%;min-height:44px;margin:0;padding:10px 0;font-size:13px;line-height:1.8;overflow-wrap:anywhere}
 .footer-group>a>span{margin-left:8px}
 .footer-bottom{flex-direction:column;align-items:flex-start;gap:16px;margin-top:30px;padding-top:22px}
 .site-footer .footer-bottom p{width:auto;max-width:100%;font-size:11px;line-height:1.9;overflow-wrap:anywhere}

 .records-opening{padding:48px 6vw 40px}.records-opening h1{font-size:clamp(38px,6.5vw,58px);margin:24px 0}
 .records-lead{font-size:15px;line-height:1.9;margin-bottom:32px}
 .records-body{padding:32px 6vw 48px}.archive-heading{align-items:flex-start;gap:20px}
 .archive-heading h2,.archive-categories h2{font-size:28px;line-height:1.5}
 .record-filters{gap:8px;margin-bottom:30px}.record-filters button{min-height:44px;padding:10px 14px;font-size:13px;line-height:1.5}
 .archive-year{grid-template-columns:1fr;gap:26px;padding:32px 0}.archive-year>h3{font-size:32px}
 .archive-entry{grid-template-columns:1fr;gap:12px;padding:26px 0}.entry-date{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
 .entry-date>span{margin:0}.entry-copy{min-width:0}.entry-copy h4{font-size:22px;line-height:1.6;margin:8px 0 12px}
 .entry-copy>p{font-size:14px;line-height:1.95}.entry-watch{align-items:center;min-height:44px;font-size:13px;padding-block:10px;line-height:1.6}
 .entry-published{margin-left:0}.archive-categories{padding:40px 6vw 64px}
 .category-row{grid-template-columns:minmax(0,125px) minmax(24px,1fr) 40px;gap:12px;font-size:12px;line-height:1.7}
 .category-row strong{font-size:19px;white-space:nowrap}.archive-source{font-size:12px;line-height:1.9}
}

@media(max-width:700px){
 .practice-overview{grid-template-columns:1fr;gap:28px}
}

@media(max-width:600px){
 .hero h1{font-size:clamp(64px,18vw,90px)}
 .about{padding-top:64px;gap:28px}
 .work-grid,.social-links{grid-template-columns:1fr}
 .work-meta h3{font-size:19px}.work-grid{gap:30px}
 .collection-shortcuts>span{width:100%;margin:0 0 4px}
 .join-block{grid-template-columns:1fr;gap:30px}
}

@media(max-width:900px) and (max-height:520px) and (orientation:landscape){
 .site-header,.records-page .site-header{padding-top:max(12px,env(safe-area-inset-top));padding-bottom:12px}
 .site-header.mobile-nav-ready #primary-nav,.site-header .news-menu.is-open .news-panel{max-height:calc(100svh - 84px - env(safe-area-inset-top))}
 .hero{min-height:100svh;padding-top:100px;padding-bottom:84px}
 .hero-copy>.eyebrow{font-size:14px;margin-bottom:12px}
 .hero h1{font-size:56px;margin-bottom:12px}.hero-description{font-size:13px;margin-bottom:18px}
 .hero .outline-button{min-height:44px;padding:10px 16px;font-size:14px}
 .hero-bottom{bottom:max(16px,env(safe-area-inset-bottom))}
 .about{min-height:0;padding-block:56px 32px}
}

@media(prefers-reduced-motion:reduce){
 .mobile-menu-toggle,.mobile-menu-icon:before,.mobile-menu-icon:after{transition:none}
}