/* Phone layouts: readable rows and deliberate control groups. */
@media (max-width:650px){
 body{background-attachment:scroll}
 .site{width:100%;margin:14px auto 12px;padding:0 8px}
 .masthead{margin:0 0 12px;align-items:center}
 .name{font-size:25px;letter-spacing:-.7px}
 .shell{border-radius:6px}
 .navigation[role=tablist]{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));min-height:0}
 .navigation[role=tablist]>.tab{grid-column:span 2;min-width:0;min-height:42px;padding:8px 5px;font-size:12px;line-height:1.3;overflow-wrap:normal;border-bottom:1px solid #b9b9b9}
 .navigation[role=tablist]>.tab:nth-child(3){border-right:0}
 .navigation[role=tablist]>.tab:nth-last-child(-n+2){grid-column:span 3;border-bottom:0}
 html[data-theme=dark] .navigation[role=tablist]>.tab{border-color:#65675e}
 .utility{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:7px 12px}
 .utility>.display-controls{margin:0;justify-content:center}
 .display-controls{gap:8px;min-width:0}
 .theme-toggle{min-height:34px;padding:5px 10px}
 .language-switch button{min-height:32px;min-width:36px;padding:6px 9px}
 .utility-links{justify-content:center;gap:0 20px;line-height:1.4}
 .utility-links>a{padding:7px 0;white-space:nowrap}
 .hero{padding:24px 16px 20px}
 .hero h1{font-size:clamp(29px,7.3vw,38px);line-height:1.08;letter-spacing:-1px;margin:0 0 10px}
 .subtitle{font-size:13px;line-height:1.5}
 .intro{font-size:12px;line-height:1.65;margin-top:10px}
 .section{padding:20px 16px;min-height:0}
 .section h1{font-size:31px;line-height:1.15;margin:0 0 12px}
 .section>p{margin:10px 0;line-height:1.7}
 .project{padding:16px}
 .project h2{font-size:14px;line-height:1.4;margin:0 0 7px;overflow-wrap:break-word}
 .project p{min-height:0;line-height:1.65;margin-bottom:8px}
 .project>a{padding:4px 0}
 .project-archive{margin-top:16px}
 .project-entry{padding:16px 0}
 .project-entry h2{font-size:15px;line-height:1.4}
 .project-entry details{margin-top:8px}
 .project-entry summary{padding:6px 0;line-height:1.6}
 .project-links{gap:6px 16px;margin-top:8px}
 .project-links>a{padding:4px 0}
 .latest-writing{padding:16px 16px 4px}
 .section-heading{align-items:center;gap:12px;flex-wrap:wrap}
 .section-heading>a{padding:4px 0}
 .post-list{margin-top:10px}
 .post,.latest-writing .post{padding:13px 0}
 .post h3{font-size:14px;line-height:1.5;margin:5px 0}
 .post p{font-size:12px;line-height:1.65}
 .post-meta{font-size:12px;gap:10px}
 .contact-note{margin-top:18px;padding:14px 0 0;overflow-wrap:anywhere}
 .about-links{margin-top:12px}
 footer{font-size:11px;padding:12px 0}
 .navigation:not([role=tablist]){padding:8px 12px;gap:6px 12px;align-items:center;font-size:12px;line-height:1.5}
 .navigation:not([role=tablist])>a{padding:6px 0}
 .navigation:not([role=tablist])>.display-controls{flex-basis:100%;justify-content:center;margin:0}
 .article{padding:20px 16px;font-size:18px;line-height:1.6}
 .article h1{font-size:30px;line-height:1.15;letter-spacing:-.4px;margin:0 0 14px}
 .meta{margin-bottom:18px}
 .body h2{font-size:23px;line-height:1.3;margin:26px 0 12px}
 .body h3{font-size:20px;line-height:1.35;margin:22px 0 10px}
 .body p{margin:13px 0}
 .body ul,.body ol{padding-left:22px}
 .body li{margin:5px 0}
 .body figure{margin:18px 0}
 .body pre{font-size:12px;line-height:1.6;padding:10px;max-width:100%;overscroll-behavior-x:contain}
 .body blockquote{margin:18px 0;padding:0 12px}
 .article-footer{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:24px;padding-top:12px}
 .article-footer>a{padding:6px 0;overflow-wrap:anywhere}
 .diagram-content{padding:12px}
 .diagram-heading{margin-bottom:12px}
 .workflow-flow,.chain-flow{grid-template-columns:minmax(0,1fr);gap:22px}
 .body .workflow-flow{padding:0}
 .body .workflow-flow>li{margin:0}
 .workflow-flow>li{min-height:50px;padding:9px 16px}
 .workflow-flow>li:not(:last-child)::after{content:"↓";left:calc(50% - 10px);top:100%;height:22px;display:grid;place-items:center}
 .step-number{position:absolute;left:9px}
 .diagram-bar{padding:5px 10px;gap:10px;letter-spacing:.3px}
 .body .explanation figcaption{padding:9px 10px;font-size:12px;line-height:1.6}
 .agent-cycle{grid-template-columns:16px minmax(0,1fr) 16px;grid-template-rows:auto 22px auto 22px auto auto auto}
 .cycle-node{min-height:54px;padding:9px 7px;line-height:1.5}
 .cycle-node small{font-size:11px;line-height:1.5}
 .feedback-label{padding:10px 2px 14px;line-height:1.5}
 .reflection{padding:0 12px 2px;margin-top:20px}
 .body .reflection h2{font-size:21px;margin-top:14px}
}
@media (max-width:480px){
 .projects{grid-template-columns:minmax(0,1fr)}
 .project,.project:nth-child(2){border-right:0;border-bottom:1px solid #ddd}
 .project:last-child{border-bottom:0}
 .project p{min-height:0}
 .hero h1{max-width:350px;margin-left:auto;margin-right:auto}
}

@media(max-width:650px){
 .masthead{grid-template-columns:66px minmax(0,1fr) 66px;gap:4px;margin:0 0 12px;min-height:40px}
 .masthead>.name{font-size:clamp(20px,5.7vw,25px);letter-spacing:.1px}
 .masthead>.theme-toggle{width:44px;min-height:36px;padding:5px 8px;justify-content:center}
 .masthead>.theme-toggle>[data-i18n]{display:none}
 .masthead .language-switch button{min-width:32px;padding:6px 5px}
 .utility{padding:3px 12px}
}