/* Each header item has its own grid area; counts never compete with controls. */
main>header{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"brand presence controls";align-items:center;gap:12px}
main>header .brand{grid-area:brand;max-width:none;min-width:0}
main>header .brand-copy{display:block;min-width:0;color:inherit}
main>header .controls{grid-area:controls;margin:0;min-width:0}
main>header #online-presence{grid-area:presence;display:flex;align-items:center;justify-content:center;gap:5px;width:max-content;max-width:100%;margin:0;min-height:32px;padding:6px 9px;border:1px solid #387363;border-radius:20px;background:#093b36;color:#d8fbed;font:500 11px/1.3 system-ui,sans-serif;letter-spacing:0;white-space:nowrap}
main>header .controls button{white-space:nowrap}
@media(max-width:650px){
 main>header{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand presence" "controls controls";gap:8px;padding-bottom:9px}
 main>header .brand{font-size:9px;line-height:1.35;letter-spacing:.08em;gap:6px}
 main>header .brand-copy{max-width:115px}
 main>header .controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%}
 main>header .controls button{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:44px;padding:8px 6px;font-size:12px;line-height:1.2}
 main>header #online-presence{font-size:10px;min-height:30px;padding:5px 8px}
 .intro>div{min-width:0}.intro h1{overflow-wrap:normal}
}
@media(max-width:350px){main>header .brand{font-size:8px}main>header .brand-copy{max-width:94px}main>header #online-presence{font-size:9px;padding:5px 6px}main>header .controls button{font-size:11px}}