/* Site bar for essay companion pages: the home page's masthead structure and type,
   coloured by each essay's own palette tokens (with the sepia defaults as fallback). */
.sitebar{
  position:relative; z-index:2; max-width:1080px; margin:0 auto;
  padding:1.1rem clamp(14px,4vw,40px) 1rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:500; font-size:.74rem; line-height:1.4; letter-spacing:.14em; text-transform:uppercase;
  -webkit-font-smoothing:antialiased;
}
.sitebar::after{
  content:""; position:absolute; left:clamp(14px,4vw,40px); right:clamp(14px,4vw,40px); bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--rule,#8a6e4b) 12%,var(--rule,#8a6e4b) 88%,transparent);
}
.sitebar a{color:var(--ink-soft,#583f1f); text-decoration:none; transition:color .2s}
.sitebar a:hover{color:var(--ink,#332010)}
.sitebar a:focus-visible{outline:2px solid var(--focus,#1f3a5f); outline-offset:4px; border-radius:2px}
.sitebar .home{display:inline-flex; align-items:center; gap:.6em; white-space:nowrap; font-size:.8rem; letter-spacing:.18em; color:var(--ink,#332010)}
.sitebar .home svg{flex:none; width:14px; height:14px; color:var(--brass,#b58c5a)}
.sitebar nav{display:flex; gap:1.6rem}
/* link from a companion page back to its essay, set in the page's own type */
.essay-source{margin:1.1rem auto 0; font-style:italic}
.essay-source a{color:var(--ink,#332010); text-decoration:underline; text-decoration-color:var(--rule,#8a6e4b);
  text-decoration-thickness:1px; text-underline-offset:.22em}
.essay-source a:hover{text-decoration-color:currentColor}
.essay-source a:focus-visible{outline:2px solid var(--focus,#1f3a5f); outline-offset:3px}
@media (max-width:560px){
  .sitebar{flex-direction:column; gap:.45rem}
  .sitebar nav{gap:1.3rem}
}
@media (max-width:400px){
  .sitebar .home{letter-spacing:.14em}
  .sitebar nav{gap:1rem; letter-spacing:.1em; font-size:.7rem}
}
@media (prefers-reduced-motion: reduce){ .sitebar a{transition:none} }