/* Phones/short screens: sticky header shrinks to one compact bar (~52px) once you scroll,
   hides while scrolling down, comes back on scroll up. Same colors/fonts/icons. */
@media (max-width: 900px), (max-height: 520px) {
  .site-header { padding-top: env(safe-area-inset-top, 0px); transition: transform .22s ease; will-change: transform; }
  .site-header.hc-hidden { transform: translateY(-100%); }
  .site-header.hc-compact .header-inner { min-height: 0; height: 52px; flex-wrap: nowrap; padding-top: 0; padding-bottom: 0; overflow: hidden; }
  .site-header.hc-compact .nav,
  .site-header.hc-compact .header-tools,
  .site-header.hc-compact .brand-sub { display: none !important; }
  .site-header.hc-compact .brand-logo-plate img,
  .site-header.hc-compact .brand-logo-plate source + img { height: 32px; width: auto; }
  .site-header.hc-compact .brand-logo-plate { padding: 2px 4px; }
  .site-header.hc-compact .brand-name { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }