.site-header{
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(21,16,9,.96),rgba(21,16,9,.84));
  backdrop-filter:blur(10px);
}
.site-header-inner{
  width:100%;
  max-width:1120px;
  height:60px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.site-brand{
  color:var(--ink)!important;
  font-family:var(--font-display,'Fraunces',serif);
  font-size:20px;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1;
  text-decoration:none!important;
  white-space:nowrap;
}
.site-brand span{color:var(--gold);font-style:italic}
.site-primary{display:flex;align-items:center;gap:28px}
/* Nav links share the homepage's editorial language: gold display type, a bullet,
   and a single rule underneath. Never a pill -- no enclosing border, no radius. */
.site-nav-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  color:var(--gold)!important;
  font-family:var(--font-display,'Fraunces',serif);
  font-size:14px;
  font-weight:500;
  line-height:1;
  background:transparent;
  border-bottom:1px solid var(--line);
  text-decoration:none!important;
  transition:background .22s,transform .22s,border-color .22s;
}
/* Weight is deliberately NOT changed on hover: reflowing six links every time the
   pointer crosses one shifts the whole row. */
.site-nav-link:hover,
.site-nav-link:focus-visible{
  background:rgba(232,180,88,.07);
  border-bottom-color:var(--gold-soft);
}
/* The gold dot in front of every nav link was removed 2026-07-28. Six of them across
   the header was decoration repeated once per item, not a signal: the link text and
   the hover tint already say what is clickable. The active-page marker is its own
   rule (the ::after bar below) and is untouched. */
/* Every link is gold now, so the current page cannot be signalled by colour or
   weight alone. The solid gold bar is drawn on its own layer so it survives the
   hover rule, sits above the 1px rest rule, and costs no layout shift. */
.site-nav-link.active{font-weight:700}
.site-nav-link.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:var(--gold);
}
/* Waking the engine. The Engine link leaves the site for a service that scales to
   zero, so the first visit after a quiet spell waits on a container boot -- measured
   at 4.6s after only 90s of idle. A plain navigation shows nothing at all while that
   happens: the old page just sits there, which reads as a dead click and invites two
   more, abandoning the request already on its way. The link greying out and renaming
   itself is the whole signal. It does not make the boot faster; it makes the wait
   legible, at the spot the pointer is already looking at.
   There was a progress bar across the header here too. It was removed: it measured
   nothing -- a timed animation guessing at a finish line this side cannot see -- and
   being 2px of gold on the header's bottom edge it was drawn identically to the
   active-page marker, so it read as the page indicator jumping under the logo. */
/* "Entering" is wider than "ENTER", so replacing the text in place would grow the link
   and shove every link to its right along -- a lurching header at the exact moment the
   page is leaving. The word is drawn as an overlay instead: the real label goes
   transparent, keeps its box, and the new one is painted over it out of flow, free to
   overhang into the 28px gap between links. Nothing moves. */
.site-nav-link.waking{color:transparent!important;pointer-events:none}
.site-nav-link.waking::before{
  content:"Entering…";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  white-space:nowrap;
}
/* The same "something is working" motion the buttons get, but through the letters
   rather than across a box. The button sweep cannot be reused here: .uibusy sets
   overflow:hidden, which would clip this overlay -- it deliberately overhangs into the
   28px gap between links -- and its band would travel across the link's own 46px box
   instead of the word sitting over it.
   So the gradient IS the text. Guarded by @supports because the fill has to go
   transparent for background-clip to show through, and without the clip that is simply
   invisible text; browsers that lack it keep the plain muted word. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .site-nav-link.waking::before{
    background:linear-gradient(90deg,var(--muted) 35%,var(--gold) 50%,var(--muted) 65%);
    background-size:300% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:wordsweep 1.5s linear infinite;
  }
}
@keyframes wordsweep{from{background-position:150% 0}to{background-position:-150% 0}}

/* Toggle is desktop-hidden; it only exists once the row stops fitting.
   Its box is .iconbtn now -- all that is left here is WHEN it shows. The
   selector carries .iconbtn too: shared-controls.css loads after this file, so
   a bare .site-nav-toggle{display:none} would lose to .iconbtn's inline-flex
   and the hamburger would sit on every desktop page. */
.iconbtn.site-nav-toggle{display:none}
.site-nav-toggle svg{width:18px;height:18px;display:block}
.site-nav-toggle .ico-close{display:none}
.site-nav-toggle[aria-expanded="true"] .ico-open{display:none}
.site-nav-toggle[aria-expanded="true"] .ico-close{display:block}

@media(max-width:520px){
  .site-header-inner{padding:0 16px;gap:14px}
  .site-nav-link{gap:5px;font-size:13px}
}

/* Six top-level items stop fitting a phone row well before 520px, so the drawer
   takes over here rather than letting the links crowd or wrap. */
@media(max-width:860px){
  .iconbtn.site-nav-toggle{display:inline-flex}
  .site-primary{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:6px 0 10px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,rgba(21,16,9,.99),rgba(21,16,9,.97));
    backdrop-filter:blur(10px);
  }
  .site-primary.open{display:flex}
  .site-primary .site-nav-link{
    min-height:46px;
    padding:0 24px;
    font-size:15px;
    border-bottom:1px solid rgba(56,44,30,.5);
  }
  .site-primary .site-nav-link:last-child{border-bottom:0}
  /* the drawer indents its links, so the overlay has to start at the text, not the box */
  .site-primary .site-nav-link.waking::before{left:24px}
  /* the drawer's own rule above is more specific than the shared hover rule and
     comes later, so the gold-soft rule has to be restated at this weight */
  .site-primary .site-nav-link:hover,
  .site-primary .site-nav-link:focus-visible{border-bottom-color:var(--gold-soft)}
}
@media(max-width:860px) and (max-width:520px){
  .site-primary .site-nav-link{padding:0 16px}
  .site-primary .site-nav-link.waking::before{left:16px}
}