/* Shared header, footer links and theme switch for every q-upid.com page. Uses each page's own tokens (--ink, --bg, --mute, --brand, --mono). */
:root{--hdr:78px}
@media(max-width:640px){:root{--hdr:80px}}
html{scroll-padding-top:calc(var(--hdr) + 12px)}
/* Locked: the header stays at the top while the page scrolls. */
header.sitehdr{position:sticky;top:0;z-index:50;background:var(--bg);display:flex;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:16px;padding-top:calc(16px + env(safe-area-inset-top,0px));border-bottom:3px double var(--ink);flex-wrap:wrap}
header.sitehdr .wm{display:block;color:var(--ink);line-height:0}
header.sitehdr .wm svg{height:34px;width:auto;display:block}
.sitenav{display:flex;align-items:center;gap:4px 18px;flex-wrap:wrap}
.sitenav a,.footnav a{font:600 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--mute)}
.sitenav a{padding:8px 0;border-bottom:2px solid transparent}
.sitenav a:hover,.footnav a:hover{color:var(--ink)}
.sitenav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--brand)}
.themebtn{font:600 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1.5px solid var(--ink);border-radius:3px;background:transparent;color:var(--ink);cursor:pointer}
.themebtn svg{width:16px;height:16px;flex:none}
.sitenav a:focus-visible,.footnav a:focus-visible,.themebtn:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.footnav{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 12px}
.footnav a{font-size:11px;padding:4px 0}
@media(max-width:640px){
  header.sitehdr{padding-block:8px;padding-top:calc(8px + env(safe-area-inset-top,0px));gap:4px}
  header.sitehdr .wm svg{height:26px}
  .sitenav{width:100%;flex-wrap:nowrap;overflow-x:auto;gap:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sitenav::-webkit-scrollbar{display:none}
  .sitenav a{white-space:nowrap;flex:none;padding:6px 0}
  .themebtn{order:-1;flex:none;padding:5px 9px}
}
@media print{header.sitehdr{position:static}header.sitehdr .sitenav,.footnav{display:none}}