/* Compact, symmetrical branding keeps the sticky header clear of the video.
   Preserve the approved artwork, complete wordmark and original proportions. */
.hub-header .header-inner {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,220px) minmax(0,1fr);
  align-items:center;
  gap:0 24px;
  padding:8px 28px 0;
}
.hub-header .header-state-seal {width:72px;max-width:100%;justify-self:center;}
.hub-header .header-state-seal img {display:block;width:100%;height:auto;object-fit:contain;}
.hub-header .header-wordmark {display:block;width:100%;max-width:220px;justify-self:center;}
.hub-header .header-wordmark img {display:block;width:100%;height:auto;object-fit:contain;}
.hub-header .header-inner > .button {
  justify-self:center;
  width:88px;
  max-width:100%;
  min-height:44px;
  margin:0;
  padding:8px;
  font-size:.8125rem;
  white-space:nowrap;
}
.hub-header .hub-navigation {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  width:auto;
  margin:0 auto;
  padding:0 16px;
  gap:0 38px;
}
.hub-header .hub-navigation a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:8px 4px;
}
.hub-header + main .hero {padding-top:16px;}
.hub-header + main .hero h1 {margin-bottom:12px;}
.hub-header + main .hero-summary {margin-bottom:16px;}
.hub-header + main .hero-media {
  /* Fallback uses vh; svh also leaves room for mobile browser controls. */
  --video-room:max(96px,calc(100vh - var(--hub-header-height,170px) - 64px));
  --video-room:max(96px,calc(100svh - var(--hub-header-height,170px) - 64px));
  max-width:min(1040px,calc(var(--video-room) * 16 / 9));
  scroll-margin-top:0;
}
.hub-header + main .hero-media video {
  width:100%;
  height:auto;
  max-height:var(--video-room);
  aspect-ratio:16/9;
  object-fit:contain;
}
@media(max-width:600px) {
  .hub-header .header-inner {
    grid-template-columns:76px minmax(0,160px) 76px;
    justify-content:center;
    gap:0 8px;
    padding:6px 12px 0;
  }
  .hub-header .header-wordmark {max-width:160px;}
  .hub-header .header-state-seal {width:52px;}
  .hub-header .header-inner > .button {width:76px;padding:8px 4px;}
  .hub-header .hub-navigation {justify-content:space-evenly;gap:0 8px;padding:0 12px;}
  .hub-header .hub-navigation a {font-size:.875rem;}
}
@media(max-height:480px) {
  .hub-header .header-inner {
    grid-template-columns:minmax(76px,1fr) minmax(0,136px) minmax(76px,1fr);
    gap:0 12px;
    padding:4px 12px 0;
  }
  .hub-header .header-wordmark {max-width:136px;}
  .hub-header .header-state-seal {width:44px;}
  .hub-header .header-inner > .button {width:76px;}
  .hub-header .hub-navigation a {font-size:.875rem;}
}