/* The workbench remains usable when deliberately opened on a phone. */
.navigation-close,.navigation-backdrop{display:none}
@media(max-width:900px){
 :root{--sidebar:0px;--workbench-edge:24px}
 body.navigation-open{overflow:hidden}
 .workspace{margin-left:0;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
 .topbar{position:sticky;top:0;z-index:12;height:auto;min-height:72px;padding:10px var(--workbench-edge);gap:16px;background:var(--bg)}
 .mobile-menu{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:76px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;font:11px var(--mono)}
 .mobile-menu>span:first-child{font-size:17px}
 .breadcrumbs{min-width:0;gap:9px;font-size:10px}
 .breadcrumbs strong{overflow-wrap:anywhere}
 .top-actions{margin-left:auto}
 .motion-segments label>span{min-height:44px}
 .sidebar{width:min(340px,calc(100vw - 28px));height:100dvh;padding:24px;overflow-y:auto;overscroll-behavior:contain;transform:translateX(-110%);transition:transform .18s;box-shadow:none;z-index:40}
 .sidebar.mobile-open{transform:translateX(0);box-shadow:20px 0 70px #0005}
 .brand{font-size:16px;padding-right:36px;flex:none}
 .brand img{display:block}
 .brand-caption{font-size:6px}
 .navigation-close{display:grid;place-items:center;position:absolute;right:12px;top:18px;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font:26px/1 var(--mono)}
 .navigation-backdrop:not([hidden]){display:block;position:fixed;inset:0;background:#0009;z-index:35;cursor:default}
 .sidebar-label{margin:32px 12px 14px}
 .sidebar nav{gap:6px;flex:none}
 .nav-item{min-height:48px;padding:12px;gap:13px;font-size:13px}
 .nav-item small{display:block}
 .sidebar-note{margin:24px 12px;padding-top:0}
 .sidebar-note .attention-sensor,.sidebar-note .attention-readout{display:none}
 .sidebar-note p{margin:0 0 12px}
 .sidebar-bottom{margin-top:auto;padding:12px 0 calc(8px + env(safe-area-inset-bottom,0px));gap:16px;flex:none}
 .sidebar-bottom a,.sidebar-bottom button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;font-size:12px}
 .sidebar-bottom button{font-size:22px}
 main{padding:30px var(--workbench-edge);min-height:calc(100svh - 230px)}
 .hero{grid-template-columns:1.2fr 1fr;gap:24px}
 .hero h1{font-size:clamp(34px,5vw,44px)}
 .hero-intro{font-size:14px}
 .portrait{height:auto;min-height:300px;display:grid;grid-template-rows:auto 1fr auto;gap:12px;padding:0;overflow:visible}
 .portrait .stamp{position:static;justify-self:end;font-size:8px;line-height:1.5}
 .portrait-rig{width:240px;height:240px;max-width:100%;align-self:center}
 .portrait-meta{position:static;width:100%;gap:12px;align-items:center;flex-wrap:wrap;font-size:8px;line-height:1.7;letter-spacing:.5px}
 .portrait-meta .portrait-state{font-size:7px}
 .projects{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 .project{padding:22px;min-height:210px}
 .identity-strip{gap:16px;flex-wrap:wrap}
 .identity-strip .mono{font-size:10px;line-height:1.9;max-width:none}
 .replay{min-height:44px;font-size:10px;white-space:normal;text-align:left}
 .footer{padding:12px var(--workbench-edge) 24px;flex-wrap:wrap;align-items:center;font-size:9px;gap:8px 18px}
 .footer .experience-link{min-height:44px}
 .channel{left:0;bottom:var(--workbench-keyboard-inset,0px)}
 .channel-header{height:auto;min-height:60px;padding:14px var(--workbench-edge);gap:16px;font-size:11px;flex:none}
 .channel-action{font-size:10px}
 .channel-action span{margin-left:10px}
 .channel:not(.is-open) .channel-header{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
 .channel.is-open{display:flex;flex-direction:column;height:min(560px,calc(var(--workbench-viewport-height,100dvh) - 12px));border-radius:18px 18px 0 0;box-shadow:0 -20px 70px #0005}
 .channel-body{display:flex;flex-direction:column;flex:1;min-height:0;gap:12px;padding:12px var(--workbench-edge) calc(12px + env(safe-area-inset-bottom,0px))}
 .channel-disclosure{font-size:9px;line-height:1.6;letter-spacing:0;margin:0;flex:none}
 #chat-log{flex:1;min-height:0;max-height:none;overscroll-behavior:contain}
 #chat-log p{grid-template-columns:minmax(0,1fr);gap:4px;font-size:12px;margin:0 0 18px}
 #chat-log time{display:none}
 .quick-commands{gap:8px;overflow-x:auto;margin:0;flex:none;padding:2px}
 .quick-commands button{min-height:44px;padding:9px 14px;font-size:11px;flex:none}
 #chat-form{gap:10px;flex:none;padding-top:10px;min-height:55px}
 #chat-form label{font-size:10px}
 #chat-form label span{margin-left:4px}
 #chat-input{font-size:16px;min-height:44px}
 #chat-input::placeholder{font-size:12px}
 #chat-form button{min-width:44px;min-height:44px;border-radius:8px;background:var(--green);color:var(--ink)}
}
@media(max-width:700px){
 :root{--workbench-edge:22px}
 .topbar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;padding-top:8px;padding-bottom:8px}
 .breadcrumbs{justify-content:flex-end;flex-wrap:wrap;gap:4px 10px}
 .breadcrumbs>span:first-child{display:block;color:var(--text)}
 .breadcrumbs>span:nth-child(2){display:none}
 .breadcrumbs strong{font-size:9px;color:var(--faint)}
 .top-actions{grid-column:1/-1;width:100%;justify-content:space-between;gap:8px}
 .motion-control{gap:10px;font-size:9px}
 .motion-control>span{display:block}
 .motion-segments{padding:2px;gap:2px}
 .motion-segments label{min-width:43px}
 .motion-segments label>span{padding:4px 7px;min-height:44px}
 .top-actions .verdict-pill{display:block;font-size:7px;letter-spacing:0;white-space:nowrap}
 main{padding-top:24px;padding-bottom:24px}
 .eyebrow{font-size:8px;letter-spacing:1px;gap:8px;line-height:1.8;flex-wrap:wrap}
 .eyebrow:after{width:26px}
 .hero{gap:28px;padding:18px 0 24px}
 .hero h1{font-size:clamp(32px,9.5vw,48px);letter-spacing:-1.6px;line-height:1.15;margin:6px 0 18px}
 .hero-catchphrase{font-size:16px;line-height:1.6;margin-bottom:14px}
 .hero .hero-intro{font-size:14px;line-height:1.9}
 .actions{gap:16px;flex-wrap:wrap;margin-top:22px}
 .primary,.actions .text-link{min-height:48px;font-size:12px}
 .primary{padding:12px 18px}
 .actions .text-link{padding:8px}
 .portrait{width:100%;max-width:420px;align-self:center;gap:14px;min-height:0}
 .portrait-rig{width:clamp(210px,64vw,270px);height:clamp(210px,64vw,270px)}
 .portrait .stamp{justify-self:center;font-size:8px}
 .portrait-meta{justify-content:space-between;font-size:8px}
 .portrait-meta .portrait-state{font-size:7px}
 .identity-strip{display:grid;gap:8px;padding:16px 0;margin-bottom:28px}
 .replay{padding:8px 0}
 .section-head{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px}
 .section-head h2{font-size:23px;max-width:none}
 .section-head .text-link{font-size:11px;min-height:44px;white-space:normal}
 .section-meta{font-size:8px;line-height:1.8}
 .projects{grid-template-columns:1fr;gap:12px}
 .project{padding:22px;min-height:0}
 .project-top{margin-bottom:16px}
 .project h3{font-size:16px}
 .project p{font-size:13px;line-height:1.8}
 .project .tag{font-size:10px;margin-top:8px}
 .research{margin-top:32px}
 .research-row{grid-template-columns:minmax(0,1fr) 20px;padding:20px 0;gap:8px 14px}
 .research-row .case-id{font-size:9px;line-height:1.7}
 .research-row h3{font-size:15px;line-height:1.6}
 .research-row p{font-size:12px;line-height:1.8}
 .page-title{margin-bottom:26px}
 .page-title h1{font-size:clamp(30px,8vw,40px);letter-spacing:-1.2px;margin:20px 0 14px;overflow-wrap:anywhere}
 .page-title p,.timeline-entry p,.timeline-entry li,.hobby p{font-size:14px;line-height:1.9}
 .timeline-entry{gap:16px;padding:24px 0}
 .timeline-entry h2{font-size:22px;line-height:1.4}
 .timeline-entry>.mono,.org{font-size:11px;line-height:1.8}
 .hobby h2{font-size:21px}
 .filter-row{gap:8px}
 .filter-row button{min-height:44px;font-size:11px;padding:10px 12px}
 .social-link{flex-wrap:wrap;gap:8px;min-height:72px}
 .social-link small{font-size:11px;overflow-wrap:anywhere}
 .contact-hero{margin:28px 0}
 .contact-hero>a{font-size:clamp(20px,5.7vw,34px);line-height:1.6}
 .footer>span:nth-child(2){margin-left:auto}
 .footer .experience-link{flex-basis:100%;font-size:10px}
}
@media(min-width:560px) and (max-width:700px){.projects{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:360px){
 :root{--workbench-edge:18px}
 .motion-control{gap:6px}
 .motion-segments label{min-width:39px}
 .top-actions .verdict-pill{font-size:6px}
 .hero-catchphrase{font-size:15px}
}
@media(max-width:900px) and (max-height:440px){
 .sidebar-note{display:none}
 .sidebar-label{margin-top:18px}
 .channel-header{min-height:48px;padding-top:10px;padding-bottom:10px}
 .channel-body{gap:6px;padding-top:8px;padding-bottom:8px}
 .channel-disclosure{display:none}
 .quick-commands button{padding-top:6px;padding-bottom:6px}
}
@media(max-width:900px){
 .topbar,main,.footer,.channel-header,.channel-body{padding-left:max(var(--workbench-edge),env(safe-area-inset-left,0px));padding-right:max(var(--workbench-edge),env(safe-area-inset-right,0px))}
}