.site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: 1.35rem; }
.brand { display: block; width: clamp(15rem, 24vw, 21rem); flex-shrink: 0; }
.brand img { width: 100%; height: auto; }
.status { display: inline-flex; align-items: center; gap: .65rem; color: var(--color-green); font-size: .875rem; letter-spacing: .035em; }
.status-dot { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; flex: none; }
.site-footer { padding-block: 1.5rem; color: var(--color-cream); background: var(--color-footer); }
.site-footer small { font-size: .875rem; }
@media (max-width: 40rem) {
  .header-inner { flex-direction: column; gap: .8rem; padding-block: 1.15rem; }
  .brand { width: min(19rem, 100%); }
  .status { font-size: .875rem; }
  .site-footer { text-align: center; }
}