/* Shared header and creed navigation. */
.site-nav{display:flex;align-items:center;gap:4px}
.site-nav a{
  display:flex;align-items:center;color:var(--ui-text);text-decoration:none;
  font:400 10px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;
  padding:9px 12px;transition:background-color .15s,color .15s;
  /* The header carries no ground, so legibility lives on the glyph. */
  text-shadow:var(--glyph,0 1px 2px #0a0908,0 1px 14px #0a0908cc);
}
/* A ground of its own makes the glyph shadow redundant. */
.site-nav a:focus-visible{background:var(--ui-ink);color:var(--ui-text-hi);--glyph:none}
.site-nav .tab[aria-current]{background:var(--ui-current);color:#0a0908;--glyph:none}
.site-nav .icon{padding:9px}
.site-nav svg{width:15px;height:15px;fill:currentColor;display:block;filter:drop-shadow(0 1px 3px #0a0908)}
.site-nav .sep{width:1px;height:14px;margin:0 8px;background:var(--ui-rule)}
.site-nav .studio{padding:7px 10px}
.site-nav .studio img{height:20px;width:auto;display:block;filter:drop-shadow(0 1px 3px #0a0908)}

.site-header{
  position:fixed;z-index:70;top:0;left:0;right:0;
  display:flex;justify-content:flex-end;
  padding:20px var(--frame) 28px;
  visibility:visible;
  /* The empty strip is scene, not chrome: it must pass the pointer through. */
  pointer-events:none;
  transition:opacity .22s var(--ease-out),transform .22s var(--ease-out),visibility 0s;
}
.site-header .site-nav{pointer-events:auto}
.site-header .site-nav > :last-child{margin-right:-10px}
body:has(.hero-runway):not(.past-hero) .site-nav .tab[aria-current]{background:none;color:var(--ui-current);--glyph:initial}
body.at-creed .site-header{
  opacity:0;transform:translateY(-8px);visibility:hidden;pointer-events:none;
  transition-delay:0s,0s,.22s;
}

/* The cave: the nav is only as lit as the torch leaves it. */
body.in-cave .site-nav{opacity:calc(.3 + .7 * var(--beam,0))}
body.in-cave .site-nav:focus-within{opacity:1}

.creed__nav{justify-self:center;margin-top:clamp(40px,7vh,72px)}
.creed__nav .site-nav{justify-content:center;flex-wrap:wrap;row-gap:10px}

@media(hover:hover) and (pointer:fine){
  .site-nav a:hover{background:var(--ui-ink);color:var(--ui-text-hi);--glyph:none}
  .site-nav .tab[aria-current]:hover{background:var(--ui-current-hi)}
  body:has(.hero-runway):not(.past-hero) .site-nav .tab[aria-current]:hover{background:var(--ui-ink);color:var(--ui-text-hi);--glyph:none}
  .site-nav .studio:hover img{filter:brightness(1.1) drop-shadow(0 1px 3px #0a0908)}
  body.in-cave .site-nav:hover{opacity:1}
}

@media(max-width:720px){
  .site-header{padding:14px var(--frame) 20px}
  .site-nav{gap:2px}
  .site-nav a{font-size:9px;letter-spacing:.18em;padding:8px 9px}
  .site-nav .sep{display:none}
  .site-header .site-nav > :last-child{margin-right:-8px}
  .site-nav .studio{padding:6px 8px}
  .site-nav .studio img{height:17px}
}
/* Four tabs plus the icons and the studio mark. The band runs tighter to the
   edge than the page frame, which the row needs to clear a 360px screen on
   one line; wrapping is the backstop below that, so it can never push the
   page sideways. */
@media(max-width:480px){
  .site-header{padding-left:16px;padding-right:16px}
  .site-header .site-nav{flex-wrap:wrap;justify-content:flex-end;row-gap:6px}
  .site-nav a{letter-spacing:.14em;padding:8px 6px}
  .site-nav .icon{padding:8px 6px}
  .site-nav .studio{padding:6px 6px}
}
@media(prefers-contrast:more){
  body.in-cave .site-nav{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .site-header,.site-nav a{transition:none}
  body.at-creed .site-header{transition-delay:0s}
}