/* Site header (scripts/chrome.mjs siteHeader, behaviour in header.js). Two rows: the logo, a 1px line, then the
   five links spread across the width. Solid #020306 on every page; on the homepage it starts transparent over
   the globe. Under 768px a MENU button opens a full-screen menu instead of the link row. */
.site-header{position:sticky;top:0;z-index:50;color:#fff;background:#020306;padding-top:env(safe-area-inset-top);transition:background-color .2s ease,transform .3s ease,opacity 1s ease,visibility 0s}
.sh-top{position:relative;display:flex;align-items:center;justify-content:center;height:64px;padding:0 5vw;border-bottom:1px solid rgba(255,255,255,.2)}
.sh-logo{display:block;line-height:0}
.sh-logo img{display:block;width:44px;height:44px}
.sh-logo:focus-visible,.sh-nav a:focus-visible,.sh-menu:focus-visible,.sh-close:focus-visible,.sh-panel nav a:focus-visible{outline:2px solid #FECB00;outline-offset:4px}
.sh-nav{display:flex;justify-content:space-evenly;align-items:stretch;padding:0 5vw}
.sh-nav a{display:block;padding:16px 0 13px;font-size:12px;line-height:1.2;color:#fff;text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.sh-nav a:hover{border-bottom-color:rgba(255,255,255,.5)}
.sh-nav a[aria-current]{border-bottom-color:#FECB00}
.sh-menu,.sh-close{display:none;align-items:center;gap:10px;padding:10px 0;border:0;background:none;color:#fff;cursor:pointer;font-family:var(--font-label);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.sh-menu{position:absolute;left:5vw;top:50%;transform:translateY(-50%)}

/* Homepage: fixed and transparent over the globe; solid on hover, with focus inside, and once scrolled past the
   globe (is-solid). Past the globe it hides while scrolling down (is-hidden). intro-pending (index.html) keeps it
   out of sight until the last second of the planet's intro camera move. */
.site-header--home{position:fixed;left:0;right:0;background:transparent}
.site-header--home:hover,.site-header--home:focus-within,.site-header--home.is-solid{background:#020306}
.site-header--home.is-hidden:not(:focus-within){transform:translateY(-100%)}
.intro-pending .site-header--home{opacity:0;visibility:hidden;transition:none}

/* Full-screen menu: a modal dialog, so focus stays inside and Escape closes it. */
.sh-panel{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:calc(14px + env(safe-area-inset-top)) 5vw 40px;background:#020306;color:#fff;overflow-y:auto}
.sh-panel::backdrop{background:#020306}
.sh-panel[open]{display:flex;flex-direction:column}
.sh-close{display:inline-flex;align-self:flex-start}
.sh-panel nav{display:flex;flex-direction:column;margin-top:40px}
.sh-panel nav a{display:block;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.2);font-family:var(--font-serif);font-weight:400;font-size:40px;line-height:1.1;color:#fff;text-decoration:none}
.sh-panel nav a[aria-current]{color:#FECB00}
html:has(.sh-panel[open]){overflow:hidden}

@media(max-width:767px){
  .sh-top{height:56px}
  .sh-logo img{width:36px;height:36px}
  .sh-menu{display:inline-flex}
  .sh-nav{display:none}
}
@media(prefers-reduced-motion:reduce){.site-header{transition:background-color .2s ease,opacity 1s ease}}