/* Fine-outline navigation controls, sharing one baseline and control height. */
.nav-actions { flex-wrap:nowrap; flex-shrink:0; align-items:center; gap:10px; }
.nav-actions>.icon-button { width:44px; height:44px; flex:0 0 44px; }
.nav-actions .icon { width:20px; height:20px; }
.nav-motion {
  box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0; min-height:44px; height:44px; margin:0;
  border:1px solid var(--line); border-radius:0; background:transparent; color:var(--ink);
  text-decoration:none; font:400 18px/1.5 var(--sans);
  transition:color .16s ease-out,border-color .16s ease-out,background-color .16s ease-out;
}
.nav-motion { --motion-accent:#376b99; width:44px; padding:0; }
.nav-motion svg { display:block; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:square; stroke-linejoin:miter; }
.nav-motion .motion-play { display:none; }
.nav-motion[aria-pressed="true"] { color:var(--motion-accent); border-color:var(--motion-accent); }
.nav-motion[aria-pressed="true"] .motion-pause { display:none; }
.nav-motion[aria-pressed="true"] .motion-play { display:block; }
.nav-motion:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
#contact { scroll-margin-top:32px; }
@media(hover:hover) and (pointer:fine) {
  .nav-motion:hover { color:var(--motion-accent); border-color:var(--motion-accent); background:transparent; }
}
@media(max-width:639px) {
  .site-header .nav-wrap { display:flex; gap:8px; padding:10px 12px; }
  .site-header .brand { font-size:20px; gap:10px; letter-spacing:0; }
  .nav-actions { width:auto; min-width:0; gap:8px; }
}
@media(max-width:379px) {
  .site-header .nav-wrap { display:grid; grid-template-columns:minmax(0,1fr); }
  .site-header .brand { justify-self:start; }
  .nav-actions { width:100%; justify-content:flex-end; gap:8px; }
}
@media(prefers-reduced-motion:reduce) {
  .nav-motion { transition:none; }
}