/* Shared phone and tablet layouts, applied after each visual style. */
img,svg,video,iframe {max-width:100%}
main,section,article,.hero-bottom,.hero-illustration,.project-info,.case-layout,.case-content,.guide-heading,.timeline-row>div {min-width:0}
p,h1,h2,h3,li,dd,figcaption,.source-note,.case-facts {overflow-wrap:break-word}
@media(max-width:900px){
 .header{position:relative;gap:8px;padding:14px 5%;min-height:78px;align-items:center}
 .header .identity{flex:1;min-width:0;font-size:20px;letter-spacing:-.025em}
 .identity-sub{font-size:10px;line-height:1.5;white-space:normal}
 .header .theme-toggle{flex:0 0 44px;width:44px;height:44px;margin:0}
 .header .mobile-menu{display:block;flex:0 0 54px;min-width:54px;min-height:44px;padding:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:600 12px var(--font);white-space:nowrap}
 .header nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:30;margin:0;padding:12px 5%;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:4px}
 .header nav.open{display:flex}
 .header nav a{display:flex;align-items:center;min-height:44px;padding:10px 12px}
 .style-bar{flex-wrap:wrap;gap:8px;padding:12px 5%}
 .style-label{flex-basis:100%}
 .style-options{display:flex;flex:1;gap:6px;min-width:0}
 .style-options button{flex:1;min-height:44px;white-space:nowrap;padding:9px 8px;font-size:11px}
 .motion-toggle{margin:0;min-height:44px}
 .hero-bottom{gap:28px}
 .case-layout{grid-template-columns:1fr;gap:24px}
 .case-aside{position:static;display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--line);padding-bottom:16px}
 .case-aside a{min-height:44px;display:flex;align-items:center;padding:8px}
 .case-aside>span{width:100%}
 .case-facts{gap:20px}
 .figure-button{max-width:100%}
 .viewer-top,.viewer-bottom{flex-wrap:wrap;gap:10px;padding:12px 16px}
 .viewer-top h2{flex:1;min-width:0}
 .viewer-top button,.viewer-bottom button{min-width:44px;min-height:44px}
 .viewer-bottom a{min-height:44px;display:flex;align-items:center}
 #viewer-body{height:auto;max-height:65dvh;min-height:35dvh;padding:12px}
 dialog{max-height:95dvh;max-width:calc(100vw - 20px);overflow:auto}
}
@media(max-width:720px){
 .wrap{max-width:90%;width:90%}
 .header .identity{font-size:18px}
 .hero h1,.case-hero h1,.artwork-page h1,.archive-page h1,.resume-page h1{font-size:clamp(34px,10vw,58px);line-height:1.1}
 .hero .eyebrow{white-space:normal}
 .wabi-collage{height:auto;aspect-ratio:1/1.05}
 .wabi-credit{font-size:8px;max-width:65%}
 .hero-statement>div{min-width:0}
 .hero-statement span{white-space:normal}
 .hero-statement>p{font-size:clamp(20px,6vw,26px)}
 .portfolio-guide form{display:flex;flex-wrap:wrap;gap:8px;padding:12px}
 .portfolio-guide input{width:100%;min-width:0;flex:1 1 100%;font-size:16px;min-height:48px}
 .portfolio-guide form>button{min-height:44px;width:100%}
 .guide-prompts{gap:8px}
 .guide-prompts button{min-height:44px;padding:10px 12px;font-size:12px}
 .guide-foot{align-items:flex-start;gap:12px;flex-wrap:wrap}
 .guide-foot button{min-height:44px}
 .project-visual{max-width:100%;min-width:0}
 .project-tag{max-width:75%;white-space:normal}
 .project-info{gap:12px}
 .project-info h3{font-size:24px}
 .archive-controls{display:flex;flex-direction:column;align-items:stretch;gap:12px}
 .archive-controls input,.archive-controls select{width:100%;min-width:0;min-height:48px;font-size:16px}
 .archive-grid,.artwork-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}
 .archive-item h2{overflow-wrap:anywhere}
 .primary-link{min-height:48px;display:inline-flex;align-items:center;justify-content:center;text-align:center;max-width:100%;white-space:normal}
 .pixel-terminal{width:100%;min-width:0;box-sizing:border-box}
 .pixel-tools,.pixel-actions{display:flex;flex-wrap:wrap;gap:10px}
 .pixel-tools select{font-size:16px;min-height:44px}
 .pixel-palette{display:flex;flex-wrap:wrap;gap:8px}
 .pixel-palette .pixel-swatch{width:30px;height:30px;flex:0 0 30px}
 .pixel-custom input{min-height:44px}
 .pixel-actions button{min-height:44px;flex:1 1 110px;white-space:normal}
 .pixel-grid{touch-action:none;user-select:none;-webkit-user-select:none}
 .terminal-top{flex-wrap:wrap;gap:8px}
}
@media(max-width:360px){.style-options small{display:none}.archive-grid,.artwork-grid{grid-template-columns:1fr}.case-facts{grid-template-columns:1fr}.editorial-card>strong{font-size:42px}.contact h2{font-size:40px}.hero-illustration .round-link{font-size:10px}}
@media(max-width:900px){.style-options{flex:1 1 100%}.motion-toggle{flex:0 1 100%;width:100%}}
@media(min-width:721px) and (max-width:900px){[data-style=original] .hero-bottom{display:block}[data-style=original] .hero-bottom>p{width:auto;max-width:650px}[data-style=original] .hero-illustration{margin-top:24px}}
@media(max-width:600px){.case-results{grid-template-columns:1fr;gap:22px}.case-results>div{min-width:0}.case-results strong{font-size:clamp(25px,7vw,34px);overflow-wrap:anywhere}.case-results span{display:block;overflow-wrap:anywhere}}
@media(max-width:360px){.editorial-card>strong{font-size:38px!important;overflow-wrap:anywhere;max-width:100%}}