/* The final portfolio, adapted for phones without changing desktop layouts. */
@media(max-width:700px){
 html,body{max-width:100%;overflow-x:clip}
 body header,body.portfolio-page header,body.mobile-layout header{height:calc(58px + env(safe-area-inset-top,0px));padding:calc(6px + env(safe-area-inset-top,0px)) 4vw 6px;gap:12px}
 body header .brand img,body.portfolio-page header .brand img,body.mobile-layout header .brand img{width:68px;height:auto;max-height:30px;flex:none}
 body header nav,body.portfolio-page header nav,body.mobile-layout header nav{font-size:11px;gap:10px;white-space:nowrap;min-width:0}
 body header nav a{display:flex;align-items:center;min-height:44px}
 .work-page .page-wrap,.about-page .page-wrap,.contact-page .page-wrap,.portfolio-page .page-footer{width:90%;max-width:100%}
 .work-page .page-hero h1,.contact-editorial h1{font-size:28px;line-height:1.25;letter-spacing:-.025em}
 .work-page .page-hero p,.contact-lead,.about-profile p{font-size:15px;line-height:1.7}
 .work-page .filter-bar{gap:8px;margin:22px 0 16px}.work-page .filter-button{min-height:40px;padding:9px 11px;font-size:12px}
 .work-page .page-projects{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
 .work-page .project-tile{aspect-ratio:auto;min-height:240px}.work-page .project-tile>img{height:auto;aspect-ratio:1/1;object-fit:cover}.work-page .project-copy{padding:11px}.work-page .project-copy h3{font-size:12px;line-height:1.5;margin-top:7px;-webkit-line-clamp:3}.work-page .project-copy small{font-size:10px;line-height:1.4}
 .work-pagination{flex-wrap:wrap}.work-page .work-pagination a{width:42px;height:42px}
 .work-page .page-reels{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:160px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.page-reel{scroll-snap-align:start}.work-page .page-heading{align-items:flex-start;gap:10px}.work-page .page-heading h2{font-size:24px}.work-page .page-heading small{font-size:12px;text-align:right;max-width:130px}
 .work-page .page-cta{flex-direction:column;align-items:flex-start;gap:16px;padding:20px}.work-page .page-cta .brand-button{min-height:44px}
 .about-page .about-name{display:grid;grid-template-columns:110px minmax(0,1fr);gap:18px 14px}.about-title-block{min-width:0}.about-title-block h1{font-size:28px;line-height:1.15}.about-title-block>p{font-size:13px;line-height:1.6}.about-portrait{width:110px;height:155px;flex-basis:110px;margin:0}.about-portrait img{width:110px}.about-portrait-glass,.about-portrait::after{top:30px}.about-name>.about-instagram{grid-column:1/-1;font-size:14px;justify-self:end;margin:4px 0 8px}.about-title-block .socials{flex-wrap:wrap;gap:8px}.about-title-block .socials a{width:32px;height:32px}.about-title-block .socials img{width:17px;height:17px}
 .about-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.about-metrics strong{font-size:25px}.about-metrics span{font-size:12px}.about-ventures{border-left:0}.about-profile h2,.about-compact-section>h2{font-size:23px}.about-page .page-tools{grid-template-columns:1fr}.about-page .page-client-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 10px}.about-page .page-client img{width:48px;height:48px}.about-page .page-client span{font-size:11px;line-height:1.4}.about-contact-line{flex-wrap:wrap;gap:12px}.about-contact-line p,.about-contact-line a{font-size:14px}
 .contact-detail-row{grid-template-columns:1fr;gap:10px}.contact-write{grid-column:1;justify-self:start;min-height:44px}.contact-detail-value{font-size:clamp(16px,5.1vw,22px);overflow-wrap:anywhere}.contact-detail-label,.contact-small-note,.contact-detail-row p{font-size:14px;line-height:1.65}.contact-detail-row .socials{flex-wrap:wrap;gap:12px}.contact-detail-row .socials a,.page-footer .socials a{width:40px;height:40px}.contact-detail-row .socials img,.page-footer .socials img{width:20px;height:20px}
 #project-modal{width:94vw;max-height:90dvh;border-radius:16px}.project-glass{padding:16px}.project-top{display:flex;flex-direction:column-reverse;align-items:stretch;gap:14px}.project-actions{align-self:flex-end;gap:8px}.project-actions button,.project-external{width:40px;height:40px}.project-back{height:40px}.project-top h1,.project-page .project-top h1{font-size:24px;line-height:1.3}.project-layout,.project-page .project-layout{grid-template-columns:1fr;gap:20px}.project-story{max-height:none;font-size:15px;line-height:1.75}.project-video-list button{flex-basis:104px;min-height:80px}.project-share-panel{top:48px}.project-share-panel a,.project-share-panel .project-copy-link{min-height:42px}.project-page-wrap{width:92%;margin-top:calc(82px + env(safe-area-inset-top,0px))}
 #showreel-modal,#dragon-film-modal{width:min(94vw,calc((100dvh - 130px)*1.777778));padding:12px}.reel-top,.dragon-player-top{height:auto!important;min-height:40px!important;font-size:12px!important;gap:10px}.reel-window-actions{gap:7px}.reel-window-actions button,.dragon-player-close{width:36px!important;height:36px!important;flex:none}.reel-screen{min-height:0;aspect-ratio:16/9}.dragon-player-top small{font-size:10px}.dragon-player-bottom select{min-height:36px}
 .mobile-layout #scene-intro .intro-copy h1{font-size:clamp(28px,8.5vw,40px)}.mobile-layout #scene-intro .specialty{font-size:14px}.mobile-layout #scene-intro .intro-copy p{font-size:14px;line-height:1.6}.mobile-layout #scene-intro .socials{gap:10px}.mobile-layout #scene-intro .socials a{width:36px;height:36px}.mobile-layout #scene-intro .socials img{width:18px;height:18px}.mobile-layout .intro-actions{width:min(100%,310px)}.mobile-layout .browse-work-button{min-height:44px;font-size:14px}.mobile-layout .showreel-feature .showreel-label{font-size:14px}
 .mobile-layout #scene-clients .client-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 8px}.mobile-layout #scene-clients .client-logo{width:42px;height:42px;max-width:100%}.mobile-layout #scene-clients .client-name{font-size:10px;line-height:1.3}.mobile-layout #scene-services .service{min-height:62px;padding:12px;gap:12px}.mobile-layout #scene-services .service-copy>span{font-size:16px}.mobile-layout #scene-services .service-copy small{font-size:12px}.mobile-layout #scene-services .service-icon{width:36px;height:36px;flex-basis:36px}
 .mobile-layout #scene-work .work-card span,.mobile-layout #scene-reels .work-card span{font-size:12px;line-height:1.4}.mobile-layout .rail{-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}.mobile-layout .rail-arrow{width:32px;height:32px}.mobile-layout #scene-contact .socials a{width:36px;height:36px}.mobile-layout #scene-contact .socials img{width:18px;height:18px}.mobile-layout .dragon-journey-button{max-width:88vw;padding:10px 14px}.mobile-layout .dragon-journey-label{font-size:14px}.mobile-layout .dragon-journey-label small{font-size:12px}
}
@media(max-width:360px){body header nav,body.portfolio-page header nav{font-size:10px;gap:8px}body header .brand img,body.portfolio-page header .brand img{width:60px}.about-page .about-name{grid-template-columns:95px minmax(0,1fr);gap:12px}.about-portrait,.about-portrait img{width:95px}.about-title-block h1{font-size:25px}.work-page .project-copy{padding:9px}.work-page .project-copy h3{font-size:11px}}
@media(max-width:700px) and (orientation:landscape){#project-modal{max-height:94dvh}.project-layout,.project-page .project-layout{grid-template-columns:1.4fr 1fr}.project-top h1{font-size:20px}}

/* A phone always fills its real viewport, including preview links. */
@media(max-width:700px){html,body{width:100%;margin:0;padding:0}.stage,.portrait-preview .stage{width:100%;max-width:none;left:0;right:0;transform:none}body header,.portrait-preview header{width:100%;max-width:none;left:0;right:0;transform:none}.portrait-preview .transport{width:auto;left:5vw;right:5vw;transform:none}#film{width:100%;height:100%}}