/* The masthead, shared by all three pages.

   One file rather than a copy per page: it was inlined in the guide and the changelog
   generators, and adding a third copy to the landing page is how three navs quietly stop
   matching each other.

   Linked with a root-relative href so it resolves past each page's <base href="/Site/">.

   Two modes. On the guide and the changelog it is opaque from the start, because those pages
   begin at the top of their text. On the landing page it starts transparent with its wordmark
   hidden, so nothing is painted over the film burn, and it takes on its background and its
   wordmark once the hero has scrolled away. Add class "solid" for the first; add "over-hero"
   and let the page's own script toggle "past-hero" for the second. */

.top{position:sticky;top:0;z-index:50;
     border-bottom:1px solid var(--line);
     background:rgba(6,22,32,.72);
     backdrop-filter:saturate(140%) blur(10px);
     -webkit-backdrop-filter:saturate(140%) blur(10px)}
.top-in{max-width:var(--page);margin:0 auto;padding:0 30px;height:66px;
        display:flex;align-items:center;gap:30px}

.top-in .home{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.top-in .home img{height:26px;width:auto;display:block}
/* margin:0 is load-bearing. Both the landing page and the live stylesheet define a .beta that
   carries a 14px bottom margin, so the badge sits on the baseline of the 132px hero wordmark.
   In a centred flex row that margin is part of the badge's box, so it pushed the badge half of
   14px above the logo's centre. The changelog defines no .beta of its own, which is why that one
   page looked right and these two did not. */
.top-in .home .beta{margin:0;align-self:center;line-height:1;
                    font-size:9.5px;font-weight:700;letter-spacing:1.6px;color:var(--accent);
                    border:1px solid rgba(127,213,255,.45);padding:4px 7px;border-radius:999px}

.top-in a.lnk{color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:500;
              letter-spacing:.1px;transition:color .14s ease}
.top-in a.lnk:hover{color:var(--text)}
.top-in a[aria-current]{color:var(--accent)}

.top-in a.dl{color:#04161f;font-size:14px;font-weight:700;text-decoration:none;
             padding:9px 17px;border-radius:10px;white-space:nowrap;
             background:linear-gradient(180deg,#9ee0ff,#5cc0f2)}

/* --- the landing page's variant ------------------------------------------ */
/* Over the hero: no bar, no rule, no wordmark. The hero carries the wordmark at full size, so a
   second one in the bar would be the same mark twice on one screen. */
.top.over-hero{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
               border-bottom-color:transparent;margin-bottom:-66px;
               transition:background .25s ease, border-color .25s ease}
.top.over-hero .home{opacity:0;pointer-events:none;transition:opacity .25s ease}
/* The links keep the hero's own shadow while they sit on the film, which is what makes them
   readable over the bright part of the leak. */
.top.over-hero a.lnk,.top.over-hero a.dl{
  text-shadow:0 1px 2px rgba(4,14,22,.55),0 2px 22px rgba(4,14,22,.75)}
.top.over-hero a.dl{text-shadow:none}

/* Past it: the bar arrives, and the wordmark with it. */
.top.over-hero.past-hero{background:rgba(6,22,32,.72);
                         backdrop-filter:saturate(140%) blur(10px);
                         -webkit-backdrop-filter:saturate(140%) blur(10px);
                         border-bottom-color:var(--line)}
.top.over-hero.past-hero .home{opacity:1;pointer-events:auto}
.top.over-hero.past-hero a.lnk,.top.over-hero.past-hero a.dl{text-shadow:none}

@media (prefers-reduced-motion:reduce){
  .top.over-hero,.top.over-hero .home{transition:none}
}

@media (max-width:760px){
  .top.over-hero{margin-bottom:-60px}
  .top-in{gap:20px;height:60px;padding:0 20px}
  .top-in a.dl{padding:8px 13px}
}
@media (max-width:760px){
  .top,.top.over-hero,.top.over-hero.past-hero{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:#061620;border-bottom-color:var(--line);
    margin-bottom:0;transition:none}
  .top.over-hero .home{opacity:1;pointer-events:auto}
  .top.over-hero a.lnk,.top.over-hero a.dl{text-shadow:none}
}

@media (max-width:430px){
  .top-in{gap:14px;padding:0 16px}
  .top-in .home{gap:7px;min-width:0}
  .top-in .home img{height:22px}
  .top-in .home .beta{display:none}
  .top-in a.lnk{font-size:13.5px}
  .top-in a.dl{font-size:13px;padding:8px 11px}
}