@layer nav-starlight {
  /* One blur surface in both themes. Both tints have identical alpha stops;
     only their colour changes. The old opaque dark coat is no longer used. */
  .nav-shell.editorial-nav[data-nav-starlight] {
    background: rgba(255,255,255,.055) !important;
    -webkit-backdrop-filter: blur(30px) saturate(128%) !important;
    backdrop-filter: blur(30px) saturate(128%) !important;
    transition: none !important;
  }
  .nav-shell.editorial-nav[data-nav-starlight]::before {display: none !important;}
  .nav-shell.editorial-nav[data-nav-starlight] > .nav-daylight {
    display: block !important;content: "" !important;inset: 0 !important;
    background: linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.035)),rgba(246,246,248,.36) !important;
    opacity: calc(1 - var(--nav-theme,0));
    -webkit-backdrop-filter: none !important;backdrop-filter: none !important;
    filter: none !important;
    transition: none !important;
  }
  .nav-shell.editorial-nav[data-nav-starlight]::after {display: none !important;}
  .nav-shell.editorial-nav[data-nav-starlight] :is(.navlinks a,.logo) {
    transition: none !important;
  }
  .nav-shell.editorial-nav > :is(.nav-daylight,.nav-twilight,.nav-dust-sky) {
    display: block !important;position: absolute !important;inset: 0 !important;
    z-index: 0 !important;border-radius: inherit !important;overflow: hidden !important;
    pointer-events: none !important;
    transition: none !important;
  }
  .nav-shell.editorial-nav > :is(.nav-twilight,.nav-dust-sky) {opacity: var(--nav-theme,0);}
  .nav-shell.editorial-nav > .nav-twilight {
    background: linear-gradient(180deg,rgba(19,27,50,.18),rgba(3,7,19,.035)),
      linear-gradient(112deg,rgba(39,30,47,.36) 0%,rgba(19,27,50,.36) 24%,rgba(11,17,35,.36) 43%,rgba(3,7,19,.36) 76%,rgba(2,3,5,.36) 100%) !important;
  }
  .nav-shell.editorial-nav > .nav-dust-sky {
    -webkit-mask-image: var(--nav-star-mask);mask-image: var(--nav-star-mask);
    -webkit-mask-size: 100% 100%;mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;
  }
  .nav-dust-plane {
    display: block;position: absolute;inset: -10px -24px;
    transform: translate3d(var(--nav-dust-x,0px),var(--nav-dust-y,0px),0);
    will-change: transform;transition: none;
  }
  .nav-dust-raster {position: absolute;display: block;inset: 0;pointer-events: none;}
  .nav-dust-pulse {
    display: block;position: absolute;border-radius: 50%;opacity: 0;
    transform: translate(-50%,-50%);box-shadow: none;filter: none;pointer-events: none;
  }
  /* Colour, logo and rim follow the same spatial blend, never a delayed
     class toggle. Preserve the two endpoint materials and their transparency. */
  .nav-shell.editorial-nav[data-nav-starlight] .navlinks a {
    color: color-mix(in srgb,#1d1d1f calc((1 - var(--nav-theme,0))*100%),rgba(255,255,255,.92)) !important;
  }
  .nav-shell.editorial-nav[data-nav-starlight] .logo {
    filter: brightness(0) invert(var(--nav-theme,0)) brightness(calc(1 + var(--nav-theme,0)*.22)) contrast(calc(1.45 - var(--nav-theme,0)*.45)) drop-shadow(0 0 .45px color-mix(in srgb,#000 calc((1 - var(--nav-theme,0))*100%),rgba(255,255,255,.7))) !important;
  }
  .nav-shell.editorial-nav[data-nav-starlight] {
    border-color: color-mix(in srgb,rgba(255,255,255,.72) calc((1 - var(--nav-theme,0))*100%),rgba(190,220,255,.28)) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb,rgba(255,255,255,.7) calc((1 - var(--nav-theme,0))*100%),rgba(220,240,255,.20)),
      inset 0 -4px 12px rgba(0,0,0,calc(var(--nav-theme,0)*.20)),
      0 calc(5px + var(--nav-theme,0)*3px) calc(24px + var(--nav-theme,0)*4px) color-mix(in srgb,rgba(24,34,50,.067) calc((1 - var(--nav-theme,0))*100%),rgba(0,0,0,.18)) !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-dust-plane {transform: none;will-change: auto;}
    .nav-shell.editorial-nav[data-nav-starlight],
    .nav-shell.editorial-nav[data-nav-starlight]::before,
    .nav-shell.editorial-nav[data-nav-starlight] > :is(.nav-twilight,.nav-dust-sky),
    .nav-shell.editorial-nav[data-nav-starlight] :is(.navlinks a,.logo) {transition: none !important;}
  }
}