/* The original header: full-width and transparent over the hero video, large logo left,
   big bold uppercase nav with the active page in red. Solid black returns on scroll.
   Loads after site.css and motion.css and overrides their header rules. */

.site-header { position: sticky; top: 0; z-index: 90; background: transparent; border-bottom: 0; backdrop-filter: none; transition: background .3s ease, box-shadow .3s ease; }
.site-header.scrolled { background: rgba(0, 0, 0, .96); backdrop-filter: blur(10px); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .9); }

.header-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; min-height: 96px; }
.site-header.scrolled .header-row { min-height: 74px; }

.logo img { width: 205px; transition: width .3s ease; }
.site-header.scrolled .logo img { width: 160px; }

.site-nav { justify-self: start; display: flex; align-items: center; gap: 52px; padding-left: clamp(10px, 6vw, 90px); }
.site-nav a { color: var(--white); font: 700 18px/1 var(--body); text-transform: uppercase; letter-spacing: .4px; padding: 6px 0; }
.site-nav a::after { display: none !important; }
.site-nav a:hover { color: var(--red); background: none; }
.site-nav a.on { color: var(--red); background: none; }

.head-wa { display: none; }

/* The page's first hero slides under the transparent bar, so the video sits behind the nav. */
.hero-video, .chan-hero { margin-top: -97px; }
.chan-hero { padding-top: 97px; }
.hero { margin-top: -97px; padding-top: 190px; }

@media (max-width: 1100px) {
  .site-nav { gap: 30px; padding-left: 10px; }
  .site-nav a { font-size: 15px; }
  .logo img { width: 160px; }
}
@media (max-width: 720px) {
  .site-header { background: rgba(0, 0, 0, .94); }
  .header-row { min-height: 70px; grid-template-columns: auto 1fr auto; }
  .logo img { width: 140px; }
  .site-nav { position: fixed; inset: 70px 0 auto 0; background: #050505; border-bottom: 1px solid var(--line); flex-direction: column; padding: 24px; display: none; gap: 18px; }
  .site-nav.open { display: flex; }
  .hero-video, .chan-hero, .hero { margin-top: 0; }
  .hero { padding-top: 72px; }
  .chan-hero { padding-top: 0; }
}