/* =========================================================
   RSM v026 · HEADER / DIRECT INSIDER-VIDEOS NAVIGATION + AUTHENTIC BRAND SYSTEM
   - more visual weight on desktop
   - logo + burger only in the closed mobile/tablet header
   - subtle glass bar visible before scrolling
   ========================================================= */

/* Wide and regular desktop: give the central navigation the
   presence it needs without forcing smaller laptop widths. */
@media (min-width:1221px){
  .site-header{padding:15px 0}
  .site-header.is-scrolled,
  .site-header.menu-open{padding:10px 0}

  .nav-shell{
    width:min(1620px,calc(100% - 32px));
    grid-template-columns:minmax(230px,1fr) auto minmax(220px,1fr);
    gap:16px;
    min-height:60px;
  }

  .desktop-nav{
    gap:3px;
    padding:6px;
    border-radius:15px;
  }

  .site-header .nav-link{
    padding:13px 11px;
    font-size:11.5px;
    letter-spacing:.74px;
  }

  .nav-actions{gap:8px}

  .site-header .nav-cta,
  .site-header .nav-login{
    min-height:46px;
    padding-inline:15px;
    font-size:10px;
  }
}

/* Large monitors: restore the premium, spacious navigation. */
@media (min-width:1500px){
  .nav-shell{
    width:min(1660px,calc(100% - 42px));
    grid-template-columns:minmax(250px,1fr) auto minmax(240px,1fr);
    gap:20px;
  }

  .desktop-nav{gap:4px;padding:6px}

  .site-header .nav-link{
    padding:15px 15px;
    font-size:13.1px;
    letter-spacing:.84px;
  }

  .site-header .nav-cta,
  .site-header .nav-login{
    min-height:49px;
    padding-inline:19px;
    font-size:10.7px;
  }

  .brand-copy strong{font-size:clamp(20px,1.35vw,25px)}
}

/* Smaller desktop/laptop widths: still larger than v015,
   but compact enough to keep every item on one line. */
@media (min-width:1221px) and (max-width:1399px){
  .nav-shell{
    width:min(1580px,calc(100% - 24px));
    grid-template-columns:minmax(184px,1fr) auto minmax(174px,1fr);
    gap:8px;
  }

  .desktop-nav{gap:1px;padding:4px}

  .nav-link{
    padding:11px 8px;
    font-size:10.8px;
    letter-spacing:.52px;
  }

  .nav-actions{gap:5px}

  .nav-cta,
  .nav-login{
    min-height:43px;
    padding-inline:11px;
    font-size:9.3px;
  }

  .brand-copy strong{font-size:19px}
  .brand-copy span{letter-spacing:1.9px}
}

/* Tablet and mobile: the closed header is deliberately quiet.
   The two actions remain available inside the opened menu. */
@media (max-width:1220px){
  .site-header{
    padding:10px 0;
    background:rgba(5,5,5,.66);
    border-bottom-color:rgba(243,182,64,.12);
    box-shadow:0 9px 30px rgba(0,0,0,.20);
    -webkit-backdrop-filter:blur(16px) saturate(118%);
    backdrop-filter:blur(16px) saturate(118%);
  }

  .site-header.is-scrolled,
  .site-header.menu-open{
    padding:10px 0;
    background:rgba(4,4,4,.92);
    border-bottom-color:rgba(255,255,255,.09);
    box-shadow:0 17px 48px rgba(0,0,0,.42);
    -webkit-backdrop-filter:blur(20px) saturate(125%);
    backdrop-filter:blur(20px) saturate(125%);
  }

  .nav-shell{
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
  }

  .nav-actions{
    grid-column:2;
    gap:0;
  }

  /* Only hide the actions that sit directly in the closed header.
     The same classes inside .mobile-actions stay visible. */
  .nav-actions > .nav-cta,
  .nav-actions > .nav-login{display:none!important}

  .menu-toggle{display:block}
}

@media (max-width:700px){
  .site-header{
    padding:9px 0;
    background:rgba(5,5,5,.72);
  }

  .site-header.is-scrolled,
  .site-header.menu-open{
    padding:9px 0;
    background:rgba(4,4,4,.94);
  }

  .nav-shell{
    width:calc(100% - 24px);
    min-height:52px;
    gap:10px;
  }

  .brand{max-width:calc(100vw - 82px)}
  .brand-copy strong{font-size:17px}
  .brand-copy span{font-size:6.7px;letter-spacing:2px}

  .menu-toggle{
    width:42px;
    height:42px;
    flex:0 0 42px;
    background:rgba(0,0,0,.50);
  }
}

/* Final cascade guard: older breakpoint rules above must never restore the
   compact two-line logo sizing on mobile. */
@media (max-width:1220px){
  body.iv-body .site-header .brand-logo-header,
  body.iv-body .site-header.is-scrolled .brand-logo-header,
  body.iv-body .site-header.menu-open .brand-logo-header{
    width:min(270px,calc(100vw - 100px));
    max-width:none;
    height:auto;
    object-fit:contain;
    object-position:left center;
  }
}

/* v106 — mobile uses the same single-line brand asset and visual size as the
   main site header. The burger leaves enough horizontal room for it. */
@media (max-width:1220px){
  .site-header .brand-logo-header,
  .site-header.is-scrolled .brand-logo-header,
  .site-header.menu-open .brand-logo-header{
    width:min(270px,calc(100vw - 100px));
    max-width:none;
    height:auto;
    object-fit:contain;
    object-position:left center;
  }
}

@media (max-width:430px){
  .brand-copy strong{font-size:15.8px}
  .brand-copy span{font-size:6.1px;letter-spacing:1.5px}
}

/* =========================================================
   RSM v019 · STABLE MOBILE HEADER HEIGHT
   Scrolling now changes only glass opacity, border and shadow.
   Vertical spacing stays fixed so the authentic logo and its
   subtle shadow always retain the same breathing room.
   ========================================================= */
@media (max-width:1220px){
  .site-header,
  .site-header.is-scrolled,
  .site-header.menu-open{
    padding-top:10px;
    padding-bottom:10px;
    overflow:visible;
  }
}
@media (max-width:700px){
  .site-header,
  .site-header.is-scrolled,
  .site-header.menu-open{
    padding-top:9px;
    padding-bottom:9px;
  }
  .nav-shell{min-height:52px}
}

/* =========================================================
   RSM v018 · AUTHENTIC LOGO SYSTEM
   Uses the supplied Reality Shifting Marketing mark instead
   of the former CSS/SVG approximation across header + footer.
   ========================================================= */
.brand{
  gap:0;
  line-height:0;
}
.brand-picture{
  display:block;
  flex:0 0 auto;
  line-height:0;
}
.brand-logo{
  display:block;
  width:auto;
  height:auto;
  max-width:none;
  object-fit:contain;
}
.brand-logo-header{
  width:258px;
  filter:drop-shadow(0 5px 18px rgba(0,0,0,.58)) drop-shadow(0 0 12px rgba(243,182,64,.08));
  transform-origin:left center;
  transition:filter .28s ease,opacity .28s ease,transform .28s ease;
}
.brand:hover .brand-logo-header{
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.64)) drop-shadow(0 0 16px rgba(243,182,64,.14));
}
.site-header.is-scrolled .brand-logo-header,
.site-header.menu-open .brand-logo-header{
  filter:drop-shadow(0 4px 15px rgba(0,0,0,.66)) drop-shadow(0 0 10px rgba(243,182,64,.07));
}
.footer-brand{
  justify-content:flex-start;
  min-width:230px;
}
.brand-logo-footer{
  width:255px;
  opacity:.76;
  filter:drop-shadow(0 5px 18px rgba(0,0,0,.48)) drop-shadow(0 0 10px rgba(243,182,64,.05));
  transition:opacity .22s ease,filter .22s ease;
}
.footer-brand:hover .brand-logo-footer{
  opacity:.9;
  filter:drop-shadow(0 5px 20px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(243,182,64,.09));
}

@media (min-width:1500px){
  .brand-logo-header{width:305px}
}
@media (min-width:1221px) and (max-width:1499px){
  .brand-logo-header{width:245px}
}
@media (min-width:1400px) and (max-width:1499px){
  .brand-logo-header{width:270px}
}
@media (max-width:1220px){
  .brand-logo-header{width:214px}
  .brand{max-width:calc(100vw - 84px)}
}
@media (max-width:980px){
  .footer-brand{min-width:0}
  .brand-logo-footer{width:250px}
}
@media (max-width:700px){
  .brand{gap:0}
  .brand-logo-header{width:186px}
  .brand-logo-footer{width:222px}
}
@media (max-width:430px){
  .brand-logo-header{width:170px}
  .brand-logo-footer{width:210px}
}
@media (max-width:350px){
  .brand-logo-header{width:158px}
}

/* =========================================================
   RSM v020 LEGACY · MOBILE HEADER OPTICAL CONTAINMENT
   - scrolled/menu-open bar is effectively opaque
   - hero lettering can no longer bleed through the header
   - mobile content uses 16px visual edge spacing + safe areas
   - softer lower edge avoids the "cropped bar" impression
   ========================================================= */
@media (max-width:1220px){
  .site-header{
    isolation:isolate;
    background:linear-gradient(180deg,rgba(7,7,7,.90),rgba(4,4,4,.86));
    border-bottom-color:rgba(243,182,64,.10);
    box-shadow:0 8px 25px rgba(0,0,0,.26);
  }

  .site-header.is-scrolled,
  .site-header.menu-open{
    background:linear-gradient(180deg,#070707 0%,#040404 100%);
    border-bottom-color:rgba(243,182,64,.11);
    box-shadow:0 13px 34px rgba(0,0,0,.52),0 1px 0 rgba(255,255,255,.018);
    -webkit-backdrop-filter:blur(22px) saturate(118%);
    backdrop-filter:blur(22px) saturate(118%);
  }

  .site-header::after{
    content:"";
    position:absolute;
    z-index:0;
    left:0;
    right:0;
    bottom:-1px;
    height:1px;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(243,182,64,.16) 20%,rgba(255,255,255,.07) 50%,rgba(243,182,64,.16) 80%,transparent);
    opacity:.72;
  }

  .site-header .nav-shell{position:relative;z-index:1}
}

@media (max-width:700px){
  .site-header,
  .site-header.is-scrolled,
  .site-header.menu-open{
    padding-top:calc(9px + env(safe-area-inset-top,0px));
    padding-bottom:9px;
  }

  .nav-shell{
    width:auto;
    margin-left:max(16px,env(safe-area-inset-left,0px));
    margin-right:max(16px,env(safe-area-inset-right,0px));
    min-height:52px;
  }

  .menu-toggle{margin-right:0}

  .mobile-menu{
    padding-top:calc(82px + env(safe-area-inset-top,0px));
    padding-left:max(18px,env(safe-area-inset-left,0px));
    padding-right:max(18px,env(safe-area-inset-right,0px));
  }
}



/* =========================================================
   RSM v021 · PIXEL-STABLE MOBILE / TABLET HEADER
   The mobile header no longer has separate visual states.
   Scrolling and menu opening may still toggle classes for page
   logic, but height, background, lower edge, shadow, blur and
   logo rendering stay pixel-identical at every scroll position.
   ========================================================= */
@media (max-width:1220px){
  .site-header,
  .site-header.is-scrolled,
  .site-header.menu-open{
    box-sizing:border-box;
    height:calc(77px + env(safe-area-inset-top,0px));
    min-height:calc(77px + env(safe-area-inset-top,0px));
    max-height:calc(77px + env(safe-area-inset-top,0px));
    padding-top:calc(10px + env(safe-area-inset-top,0px));
    padding-bottom:10px;
    background:linear-gradient(180deg,#070707 0%,#040404 100%);
    border-bottom-color:rgba(243,182,64,.11);
    box-shadow:0 13px 34px rgba(0,0,0,.52),0 1px 0 rgba(255,255,255,.018);
    -webkit-backdrop-filter:blur(22px) saturate(118%);
    backdrop-filter:blur(22px) saturate(118%);
    transition:none;
    transform:none;
  }

  .site-header .nav-shell,
  .site-header.is-scrolled .nav-shell,
  .site-header.menu-open .nav-shell{
    height:56px;
    min-height:56px;
    max-height:56px;
  }

  .site-header::after,
  .site-header.is-scrolled::after,
  .site-header.menu-open::after{
    bottom:-1px;
    height:1px;
    opacity:.72;
    background:linear-gradient(90deg,transparent,rgba(243,182,64,.16) 20%,rgba(255,255,255,.07) 50%,rgba(243,182,64,.16) 80%,transparent);
    transition:none;
  }

  /* The Video Blog has a more specific body-qualified legacy
     scroll rule. Neutralize it here so those 16 pages are static too. */
  body.iv-body .site-header,
  body.iv-body .site-header.is-scrolled,
  body.iv-body .site-header.menu-open{
    background:linear-gradient(180deg,#070707 0%,#040404 100%);
    border-bottom-color:rgba(243,182,64,.11);
    box-shadow:0 13px 34px rgba(0,0,0,.52),0 1px 0 rgba(255,255,255,.018);
    -webkit-backdrop-filter:blur(22px) saturate(118%);
    backdrop-filter:blur(22px) saturate(118%);
  }

  .site-header .brand-logo-header,
  .site-header.is-scrolled .brand-logo-header,
  .site-header.menu-open .brand-logo-header{
    filter:drop-shadow(0 4px 15px rgba(0,0,0,.66)) drop-shadow(0 0 10px rgba(243,182,64,.07));
    transform:none;
    transition:none;
  }
}

@media (max-width:700px){
  .site-header,
  .site-header.is-scrolled,
  .site-header.menu-open{
    height:calc(71px + env(safe-area-inset-top,0px));
    min-height:calc(71px + env(safe-area-inset-top,0px));
    max-height:calc(71px + env(safe-area-inset-top,0px));
    padding-top:calc(9px + env(safe-area-inset-top,0px));
    padding-bottom:9px;
  }

  .site-header .nav-shell,
  .site-header.is-scrolled .nav-shell,
  .site-header.menu-open .nav-shell{
    height:52px;
    min-height:52px;
    max-height:52px;
  }
}

@media (max-width:1220px){
  body.iv-body .site-header .brand-logo-header,
  body.iv-body .site-header.is-scrolled .brand-logo-header,
  body.iv-body .site-header.menu-open .brand-logo-header{
    width:min(270px,calc(100vw - 100px));
    max-width:none;
    height:auto;
    object-fit:contain;
    object-position:left center;
  }
}