/* Hanging Context shared header, navigation and footer. Every page on the site loads this file.
   Selectors are namespaced (.hcx, .hcx-*) so they sit beside the older shared.css without collisions.
   Desk pages follow the OS colour scheme; legacy pages (.hcx-legacy) follow data-theme only, like shared.css. */
@font-face{font-family:"Bricolage Grotesque";src:url("/fonts/BricolageGrotesque-latin-wght-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/JetBrainsMono-latin-wght-normal.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}

.hcx{
  --hcx-sheet:#FFFFFF;--hcx-ink:#0E1420;--hcx-muted:#505B6E;--hcx-rule:#D5DAE3;--hcx-cobalt:#2340E8;--hcx-chip:#EEF0F4;
  --hcx-display:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --hcx-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  color:var(--hcx-ink);
}
.hcx *,.hcx *::before,.hcx *::after{box-sizing:border-box}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hcx:not(.hcx-legacy){
  --hcx-sheet:#121722;--hcx-ink:#E8ECF3;--hcx-muted:#A3ADBF;--hcx-rule:#252D3B;--hcx-cobalt:#8A9BFF;--hcx-chip:#1B2230}}
:root[data-theme="dark"] .hcx{
  --hcx-sheet:#121722;--hcx-ink:#E8ECF3;--hcx-muted:#A3ADBF;--hcx-rule:#252D3B;--hcx-cobalt:#8A9BFF;--hcx-chip:#1B2230}

/* legacy pages: the chrome sits inside the old .page container, in normal flow */
.hcx-legacy{display:flex;flex-direction:column;gap:20px;width:100%;max-width:1180px;margin:0 auto;padding:20px 0 0;font-family:var(--hcx-display);font-size:16px;line-height:1.4;text-align:left}
.hcx-legacy.hcx-bottom{padding:28px 0 40px}
.hcx-legacy a{color:inherit;text-decoration:none}
.hcx-legacy ul{margin:0;padding:0}
.hcx-legacy header,.hcx-legacy nav,.hcx-legacy footer{position:static;background:none;box-shadow:none;margin:0}
.hcx-legacy footer.hcx-footer{background:var(--hcx-sheet);border:1px solid var(--hcx-rule)}

.hcx-skip{position:absolute;left:-999px;top:0;background:var(--hcx-ink);color:var(--hcx-sheet);padding:8px 12px;z-index:10}
.hcx-skip:focus{left:8px;top:8px}
.hcx a:focus-visible,.hcx button:focus-visible{outline:2px solid var(--hcx-cobalt);outline-offset:2px}

/* masthead */
.hcx-mast{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;border-bottom:3px solid var(--hcx-ink);padding-bottom:12px}
.hcx-logo{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--hcx-display);font-weight:800;font-size:clamp(26px,4.4vw,44px);letter-spacing:-.025em;text-decoration:none;line-height:1;color:var(--hcx-ink)}
.hcx-logo-mark{width:1.35em;height:1.35em;border-radius:4px;flex:0 0 auto}
.hcx-label{font-family:var(--hcx-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--hcx-muted);font-weight:500}
.hcx-tag{display:block;margin-top:6px;text-transform:none;letter-spacing:0;font-size:12.5px}
.hcx-muted{color:var(--hcx-muted)}
.hcx-edition{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;font-family:var(--hcx-mono);font-size:12px}
.hcx-edition-row{display:flex;gap:10px;align-items:center}
.hcx-theme{font:inherit;font-family:var(--hcx-mono);font-size:12px;background:var(--hcx-chip);color:var(--hcx-ink);border:1px solid var(--hcx-rule);border-radius:999px;padding:3px 10px;cursor:pointer}
.hcx-nav{display:flex;flex-wrap:wrap;gap:2px 18px;font-family:var(--hcx-display);font-weight:500;font-size:16px}
.hcx-nav a{text-decoration:none;padding-block:6px;border-bottom:2px solid transparent;color:var(--hcx-ink)}
.hcx-nav a:hover{border-color:var(--hcx-rule)}
.hcx-nav a[aria-current="page"]{border-color:var(--hcx-cobalt);color:var(--hcx-cobalt)}

/* footer */
.hcx-footer{background:var(--hcx-sheet);border:1px solid var(--hcx-rule);padding:clamp(16px,3vw,32px);display:flex;flex-direction:column;gap:24px;min-width:0}
.hcx-foot{border-top:3px solid var(--hcx-ink);padding-top:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px;font-family:var(--hcx-display);font-size:14.5px}
.hcx-foot ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.hcx-foot a{text-decoration:none;color:var(--hcx-muted)}
.hcx-foot a:hover{color:var(--hcx-ink);text-decoration:underline}
.hcx-foot-note{font-family:var(--hcx-mono);font-size:11.5px;color:var(--hcx-muted);margin:0}
.hcx-foot-note a{color:inherit;text-decoration:underline}
@media (prefers-reduced-motion:no-preference){.hcx-nav a{transition:border-color .15s,color .15s}}
@media print{.hcx-theme,.hcx-foot{display:none}}

/* phones: compact header, scrolling nav, 44px touch targets */
@media (max-width:820px){
  .hcx-mast{gap:4px 10px;align-items:center;padding-bottom:8px}
  .hcx-logo{font-size:26px}
  .hcx-tag{font-size:13px;margin-top:4px}
  .hcx-edition{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;text-align:left;gap:2px 10px;font-size:11.5px;flex:1 1 100%}
  .hcx-edition-row{order:2;margin-left:auto}
  .hcx-edition>span:nth-of-type(n+2){display:none}
  .hcx-nav{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;gap:0 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .hcx-nav::-webkit-scrollbar{display:none}
  .hcx-nav a{display:inline-flex;align-items:center;min-height:44px;padding-inline:8px;flex:0 0 auto}
  .hcx-theme{min-height:44px;padding-inline:14px}
}