/* Phone layouts use content height, so longer titles and Chinese copy cannot
   collide with controls. Loaded last on every portfolio route. */
@media (max-width:650px) {
  html { -webkit-text-size-adjust:100%; scroll-padding-top:76px; }
  header.nav:has(.site-tools) { min-height:64px; padding-inline:max(20px,env(safe-area-inset-left)); gap:8px; }
  html body.site-page header.nav::before,html body.site-page header.nav::after { display:none!important; }
  html body.site-page header.nav :is(a,button) { text-shadow:var(--nav-glow,none)!important; }
  header.nav .nav-back { flex:1 1 auto; white-space:nowrap; min-width:0; font-size:12px; letter-spacing:0; }
  header.nav .menu-toggle { min-width:44px; min-height:44px; padding:0 5px; font-size:12px; }
  header.nav .site-tools { gap:8px; margin-inline-start:0; font-size:12px; letter-spacing:0; }
  header.nav .site-tools .site-sound { min-width:44px; padding:10px; }
  header.nav .site-sound>span { display:none; }
  html body.site-page header.nav,html body.site-page header.nav.menu-open,html body.site-page header.nav .nav-links { background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:none!important; border:0!important; }
  html body header.nav .nav-links { top:64px; padding:18px 24px 28px; gap:4px; max-height:calc(100dvh - 64px); overflow-y:auto; overscroll-behavior:contain; border-radius:0; }
  html body header.nav .nav-links a { min-height:52px; display:flex; align-items:center; font-size:23px; }
  header.nav #language-options button { min-height:44px; }
  .site-page section[id],.site-page article[id] { scroll-margin-top:80px; }
  .site-page .content-section { padding-inline:7%; }
  .site-page .opening-description,.project-caption p,.project-one-line { font-size:14px; line-height:1.7; }
  .site-page .opening-actions a,.end a,.contact-detail-links a { min-height:44px; display:inline-flex; align-items:center; }
  .site-page .lightbox-head { min-height:64px; gap:8px; }
  .lightbox-head #lightbox-caption { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  .lightbox-head>div { flex-shrink:0; }
  .lightbox-head button { min-width:44px; min-height:44px; }
  .zoom-mark { opacity:.8; }

  /* The dial, navigation and category action each own a row. */
  body.projects-page .time-runway .time-world {
    position:relative; top:auto; height:auto; min-height:100svh;
    display:flex; flex-direction:column; gap:22px;
    padding:88px 0 max(28px,env(safe-area-inset-bottom));
    scroll-margin-top:0;
  }
  .projects-page .time-runway::after { display:none; }
  .projects-page .time-info { position:relative; inset:auto; order:0; width:88%; max-width:none; margin:0 auto; }
  .projects-page .time-info .time-current { font-size:25px; line-height:1.18; max-width:none; }
  .projects-page .time-info>p+p { font-size:14px; line-height:1.6; margin:10px 0 0; }
  .projects-page .time-world .time-stage { position:relative; inset:auto; order:1; flex:none; width:100%; height:calc(min(82vw,330px) * .75 + 120px); transform:none; }
  .projects-page .time-world .time-project { width:min(82vw,330px); max-width:none; }
  .projects-page .time-project-caption { margin-top:18px; padding-right:30px; }
  .projects-page .time-project:not(.is-centered) .time-project-caption { visibility:hidden; }
  .projects-page .time-project-caption h3 { font-size:28px; line-height:1.15; overflow-wrap:anywhere; }
  .projects-page .time-project-caption>span:first-child { font-size:10px; line-height:1.5; }
  .projects-page .time-heading { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); }
  .projects-page .time-future { display:none; }
  .projects-page .time-rail { position:relative; inset:auto; order:2; width:92%; margin:0 auto; }
  .projects-page .time-years { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:0; }
  .projects-page .time-years button { min-width:0; min-height:44px; padding:16px 0 8px; font-size:10px; }
  .projects-page .time-controls { position:relative; inset:auto; order:3; width:88%; margin:0 auto; display:grid; grid-template-columns:1fr auto; gap:10px 12px; font-size:12px; }
  .projects-page .time-controls>div { grid-column:1/-1; grid-row:1; display:grid; grid-template-columns:1fr auto 1fr; gap:16px; width:100%; }
  .projects-page .time-controls>div button { font-size:14px; min-height:44px; }
  .projects-page .time-count { font-size:11px; white-space:nowrap; }
  .projects-page .time-controls>p { grid-row:2; grid-column:1/-1; font-size:11px; text-align:center; }
  .projects-page .time-controls .category-toggle { grid-row:3; grid-column:1; padding:12px 0; font-size:15px; font-weight:500; color:#4b285e; text-align:left; min-height:48px; max-width:none; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; }
  .projects-page .time-controls .category-toggle::before { opacity:.4; }
  .project-shelves .shelf-nav { display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; padding:12px 6% 20px; }
  .project-shelves .shelf-nav a { display:flex; align-items:center; min-height:44px; font-size:13px; }
  .project-shelves .shelf-nav .category-close { grid-column:1/-1; justify-self:end; min-height:44px; }
  .project-shelf>header { flex-wrap:wrap; gap:12px; }
  .project-shelf>header>div { margin-left:auto; }
  .project-shelf button { width:44px; height:44px; }
  .project-shelves .shelf-image { height:auto; aspect-ratio:4/3; }
  .shelf-caption h3 { font-size:27px; }
  #projects-world .mic-guide { max-width:52%; }
  #projects-world .mic-guide>span { font-size:11px; line-height:1.5; margin-top:0; }
  #projects-world .hero-timeline-link { max-width:40%; font-size:12px; }

  .about-below .about-section { width:86%; }
  .about-below .about-personal-title { font-size:clamp(40px,10.5vw,56px); }
  .about-below .about-statement h2 { font-size:clamp(38px,10vw,50px); }
  .about-below .about-method dd,.about-below .cv-entry p { font-size:14px; }
  .about-below .about-project-name { overflow-wrap:anywhere; }
  .about-page .about-below-footer { padding-inline:7%; }
  .research-landing .research-intro h1 { font-size:clamp(58px,18vw,76px); }
  html[lang=zh-CN] .research-landing .research-intro h1 { font-size:clamp(44px,13vw,60px); }
  html[lang=zh-CN] .research-landing .direction-link h2 { font-size:clamp(23px,6.5vw,32px); }
  .research-page .universe-heading { padding-inline:6%; }
  .research-page .orbit-space { touch-action:pan-y pinch-zoom; cursor:grab; }
  .research-page .time-dial { touch-action:pan-x pinch-zoom; }
  .research-page .universe-controls { position:relative; inset:auto; flex-direction:row; justify-content:flex-end; margin:12px 6% 0; gap:22px; }
  .research-page .universe-controls>* { min-height:44px; font-size:12px; }
  .research-page .other-threads a { min-height:44px; display:flex; align-items:center; }
  .contact-stage { padding:96px 7% max(28px,env(safe-area-inset-bottom)); }
  .contact-motion-toggle { flex-shrink:0; width:44px; height:44px; }
  .contact-message .contact-statement { font-size:clamp(46px,13.8vw,62px); }
  .contact-details .contact-email { font-size:clamp(20px,6vw,25px); overflow-wrap:anywhere; }
}
@media (max-width:360px) {
  header.nav:has(.site-tools) { padding-inline:14px; gap:3px; }
  header.nav .site-tools { gap:3px; }
  .projects-page .time-controls .category-toggle { font-size:12px; }
  .about-below .about-project-row { grid-template-columns:minmax(0,1fr) 76px; }
  .about-below .about-project-preview { width:76px; }
  .research-landing .direction h2 { font-size:26px; }
}

/* Timeline typography scales with the composition, with readable lower bounds. */
.projects-page .time-info .time-current { font-size:clamp(30px,2.7vw,58px); line-height:1.12; }
.projects-page .time-info>p+p { font-size:clamp(15px,1.12vw,24px); line-height:1.55; margin-top:.65em; }
.projects-page .time-info { max-width:min(42vw,760px); }
.projects-page .time-years button { font-size:clamp(13px,1.12vw,24px); opacity:.78; }
.projects-page .time-years button[aria-pressed=true] { opacity:1; }
.projects-page .time-controls { font-size:clamp(14px,1.05vw,22px); }
.projects-page .time-controls>div button { font-size:inherit; }
.projects-page .time-controls>p { font-size:clamp(13px,.95vw,20px); opacity:.85; }
.projects-page .time-count { font-size:clamp(12px,.92vw,19px); }
.projects-page .time-controls>a { font-size:clamp(16px,1.3vw,27px); max-width:none; }
.projects-page .time-project-caption>span:first-child { font-size:clamp(11px,.85vw,18px); }
.projects-page .time-project-caption h3 { font-size:clamp(28px,2.25vw,48px); }
.projects-page .time-heading { width:86%; opacity:.34; top:35%; left:7%; }
.projects-page .time-heading h2 { font-size:clamp(60px,7.2vw,164px); line-height:1.04; letter-spacing:-.045em; }
@media (min-width:651px) and (max-width:1000px) {
  .projects-page .time-controls { flex-wrap:wrap; gap:8px 20px; }
  .projects-page .time-controls>p { flex-basis:100%; text-align:center; }
  .projects-page .time-controls>a { max-width:none; }
}
@media (max-width:650px) {
  .projects-page .time-info { max-width:none; }
  .projects-page .time-info .time-current { font-size:clamp(28px,7.4vw,40px); }
  .projects-page .time-info>p+p { font-size:clamp(15px,3.9vw,18px); }
  .projects-page .time-project-caption h3 { font-size:clamp(28px,7.4vw,38px); }
  .projects-page .time-project-caption>span:first-child { font-size:12px; }
  .projects-page .time-years button { font-size:clamp(11px,2.9vw,15px); }
  .projects-page .time-controls>div button { font-size:clamp(16px,4.2vw,20px); }
  .projects-page .time-controls>p { font-size:clamp(13px,3.5vw,16px); }
  .projects-page .time-count { font-size:13px; }
  .projects-page .time-controls>a { font-size:clamp(16px,4.3vw,20px); grid-column:1/-1; max-width:none; }
  .projects-page .time-heading { position:relative; inset:auto; order:0; width:88%; height:auto; margin:0 auto; padding:0; overflow:visible; clip-path:none; transform:none; opacity:.4; }
  .projects-page .time-heading h2 { font-size:clamp(36px,9.3vw,58px); }
}