/* One consistent phone layout, loaded after legacy breakpoint overrides. */
@media(max-width:760px){
 html,body{width:100%;margin:0;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
 body>header{height:auto;min-height:0;padding:10px 12px 5px;display:flex;flex-direction:column;align-items:center;gap:5px}
 header .brand{min-height:0;width:160px;max-width:55vw;padding:0;flex:none}
 header .brand .official-logo{width:100%;height:auto}
 header .header-nav{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0;align-self:auto}
 header .header-nav button,header .header-nav #aboutHeader{font-size:14px;min-height:42px;padding:8px 2px;white-space:nowrap}
 header .header-nav button:after{display:none}header .header-nav i{font-size:9px;margin-right:3px;padding:0;border:0}
 #portfolioMain{min-height:0;height:auto;display:block}
 #portfolioMain .explorer{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;min-height:0}
 #portfolioMain .view-head{margin:0 12px;padding:8px 0;min-height:0}
 #portfolioMain .view-head>div{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
 #portfolioMain .surface-title{font-size:18px;margin:0}
 #portfolioMain .surface-title:after{display:none}
 #portfolioMain .view-head p{font-size:11px;margin:0;max-width:none}
 .medium-rail{padding:6px 12px;z-index:7}
 .medium-rail>summary{display:block;width:100%;font-size:14px;min-height:44px;padding:10px 12px;box-sizing:border-box}
 .medium-rail>summary:before{content:'▸ ';}.medium-rail[open]>summary:before{content:'▾ ';}
 .medium-rail .medium-strip{position:static;width:100%;margin-top:7px;max-height:45vh;padding:8px;box-sizing:border-box;border-radius:5px}
 .medium-rail #mediumNav{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 .medium-rail #mediumNav button{min-height:44px;font-size:12px;padding:5px 6px;white-space:normal}
 .medium-rail #mediumNav button.medium-wide{grid-column:auto}
 .medium-rail #mediumNav button span{white-space:normal}.medium-rail #mediumNav small{font-size:10px}
 #portfolioMain .dimension-tools{margin:4px 12px 0;padding:6px 0;background:transparent}
 .dimension-row{display:block}.sphere-path{justify-content:center;min-height:0;margin-bottom:3px}
 #sphereLevel{font-size:12px;line-height:20px;display:block;text-align:center}
 #dimensionNav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;width:100%}
 #dimensionNav button{min-height:36px;font-size:11px;line-height:1.4;padding:5px 1px;white-space:nowrap}
 #dimensionNav button:before{width:4px;height:4px;margin-right:3px}
 #portfolioMain #stage{height:clamp(340px,calc(100svh - 320px),540px);min-height:340px;margin:0 6px;grid-row:4;grid-column:1}
 #portfolioMain .sphere-return{grid-column:1;grid-row:4;font-size:14px;min-height:44px;min-width:0;padding:8px 17px;margin:6px 0 0;z-index:6}
 footer{padding:12px;gap:8px;flex-wrap:wrap;font-size:10px}
 /* Each dialog owns its return row, keeping the button off the site header. */
 dialog{width:calc(100vw - 16px);max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:0;overflow:auto;overscroll-behavior:contain;border-radius:10px}
 :is(#viewer,#courseViewer,#groupDialog,#collectionDialog,#mediumDialog,#aboutDialog) .dialog-return-bar{position:sticky;top:0;display:flex;justify-content:center;align-items:center;height:auto;min-height:64px;padding:8px;background:var(--paper);z-index:1001}
 :is(#viewer,#courseViewer,#groupDialog,#collectionDialog,#mediumDialog,#aboutDialog) .dialog-return-bar>.close{position:static;transform:none;min-height:46px;font-size:16px;padding:8px 24px;min-width:120px}
 #mediumDialog .medium-content,#collectionDialog .collection-content,#groupDialog .group-header,#aboutDialog .about-content{padding:14px 14px 20px}
 #collectionFolders,#mediumCards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .group-card{padding:10px 8px;gap:6px}.preview-fan{height:145px}.preview-print{max-width:76%;height:125px}
 .folder-name{font-size:12px;line-height:1.6;-webkit-line-clamp:2}.folder-subtitle,.folder-count,.folder-open{font-size:11px}
 #groupGallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:10px 12px}
 #groupGallery .gallery-item img{height:auto;max-height:300px;width:100%;object-fit:contain}
 #viewer[open]{display:block}#viewer .art-stage{padding:12px;min-height:0;height:auto;max-height:none}
 #viewer .art-stage img{max-height:65dvh;width:auto;max-width:100%;object-fit:contain}
 #viewer .art-info{padding:16px}.art-nav button{min-height:44px;min-width:44px}
 #courseMain{display:block;height:auto;min-height:0}#courseMain[hidden]{display:none}
 #courseMain .view-head{position:sticky;top:0;margin:0;padding:8px 12px 12px;display:flex;flex-direction:column-reverse;gap:8px;z-index:10}
 #courseMain .view-head>div{width:100%}#courseMain .view-head p{max-width:none;font-size:12px}
 #courseBack{position:static;transform:none;min-height:46px;font-size:16px;padding:8px 20px;margin:0 auto}
 #courseScroll{overflow:visible;padding:10px 12px 20px}.course-overview{grid-template-columns:1fr;gap:14px}
 .course-cover img,.course-placeholder{height:200px}.course-cover-copy{padding:12px;gap:7px}
 #courseGrid.students{columns:2;column-gap:8px}#courseGrid.students .course-image{margin-bottom:8px}
 #courseGrid.scenes{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.course-image{padding:5px}
 #courseViewer .course-view-head{padding:12px;font-size:14px}#courseImageTitle{font-size:15px}
 #courseViewer #courseFull{max-height:65dvh;max-width:100%;height:auto}#courseViewer .dialog-return-bar{background:#151b24}
}
@media(max-width:360px){#dimensionNav button{font-size:10px}.preview-fan{height:125px}.preview-print{height:110px}}