/* Phone layouts: fluid type, contained portrait and comfortable touch targets. */
body{overflow-x:clip}img{max-width:100%}
@media(max-width:820px){
.wrap{padding-inline:clamp(16px,5vw,32px)}
.header{height:auto;min-height:80px;gap:16px;padding-block:16px}
nav{gap:12px;flex-wrap:wrap;justify-content:flex-end}nav a{display:inline-flex;align-items:center;min-height:44px}
.hero{grid-template-columns:minmax(0,1fr);padding-top:24px}.hero-copy{padding-bottom:8px}
h1{font-size:clamp(58px,17vw,100px);letter-spacing:-.065em}
.roles{font-size:clamp(12px,3.2vw,15px);gap:8px 12px}.intro{font-size:14px}
.hero-copy>.button{margin-bottom:12px;min-height:48px}.hero-copy>.text-link{margin:0 0 0 16px;min-height:44px;display:inline-flex;align-items:center}
.portrait-stage{width:100%;max-width:440px;height:auto;aspect-ratio:4/5;margin:24px auto 20px;overflow:clip}
.portrait-card{inset:20px 12% 44px;transform:rotate(3deg)}.portrait-card img{object-position:50% 35%}
/* Bounded rotating rings leave a visible gutter beside the portrait. */
.orbit,.orbit-two{width:98%;height:auto;aspect-ratio:1;inset:8% auto auto 1%;transform:scaleX(.94);rotate:0deg;border-color:#a2bf70;opacity:.8;animation:mobile-orbit-spin 9s linear infinite}
.orbit-two{width:96%;left:2%;top:9%;transform:scaleX(.86);border-style:dashed;border-color:#829c59;opacity:.55;animation-direction:reverse;animation-duration:13s}
.orbit::before,.orbit::after{content:'';position:absolute;top:50%;left:0;width:clamp(4px,1.4vw,6px);height:clamp(4px,1.4vw,6px);transform:translate(-50%,-50%);border-radius:50%;background:var(--green);box-shadow:0 0 10px #c6f36b80}
.orbit::after{left:100%;width:4px;height:4px}
.audio-label{left:8px;right:auto;top:auto;bottom:125px;max-width:calc(100% - 24px);padding:12px;gap:8px;transform:rotate(-3deg)}
.code-label{right:8px;bottom:55px;max-width:calc(100% - 24px);padding:12px 15px;gap:10px;transform:rotate(3deg)}
.stage-coordinate{left:12px;right:12px;bottom:8px;text-align:center;font-size:clamp(6px,1.6vw,7px);letter-spacing:1.4px}
.photo-bottom{left:14px;right:14px;gap:8px;font-size:6px;letter-spacing:1px}
.hero-footer>span:nth-child(2){display:none}.ticker{transform:none;margin-block:12px}
.section{padding-block:clamp(48px,10vw,70px)}
.about,.expertise-grid,.contact-layout{grid-template-columns:minmax(0,1fr);gap:24px}.about-copy{padding-top:0}
h2,.contact h2{font-size:clamp(30px,8.6vw,44px);letter-spacing:-.045em;overflow-wrap:break-word}.contact h2>.green{margin-left:10px}
.section-heading{display:block;margin-bottom:28px}.section-heading>p{margin-top:18px}
.expertise-card{padding:clamp(18px,5vw,28px)}h3{font-size:clamp(20px,5.5vw,25px);gap:10px}
.expertise-card>p{max-width:none;min-height:0;font-size:14px}
.code-art{font-size:clamp(8px,2.4vw,12px);height:auto;min-height:145px;overflow-wrap:anywhere}
.waveform{gap:3px}.waveform i{flex:1 1 3px;min-width:1px;max-width:4px}
.sound-button{min-height:48px;font-size:12px;align-items:center}
.contact-layout>div>p{font-size:14px}.email-link{font-size:clamp(18px,5vw,24px)}
form{padding-top:0}label{font-size:12px}input,textarea{font-size:16px;min-height:48px}form .button{min-height:52px}.form-status{font-size:12px}
.footer{display:grid;grid-template-columns:auto 1fr;gap:12px 20px;font-size:11px}.footer>span,.motion-toggle{justify-self:end}
.footer>a:last-of-type{min-height:44px;display:inline-flex;align-items:center}.motion-toggle{margin:0;min-height:44px}
}
@keyframes mobile-orbit-spin{from{rotate:0deg}to{rotate:360deg}}
@media(prefers-reduced-motion:reduce){.orbit,.orbit-two{animation:none}}
@media(max-width:360px){
.header{gap:8px}nav{gap:8px;font-size:10px}.nav-contact{padding-inline:10px}
.hero-copy>.button{display:flex;width:100%}.hero-copy>.text-link{margin-left:0}
.roles{gap:6px;letter-spacing:-.4px}.floating-label strong{font-size:9px}
.audio-label{bottom:110px}.code-label{font-size:10px;bottom:48px}.photo-bottom{bottom:12px}
}