/* ============================================================
   Cantillon Research — shared site chrome (nav + footer)
   Generated by scripts/inject_chrome.py. Edit this file, not
   the copies inside each page.

   LOADING ORDER MATTERS. This stylesheet is linked in <head>
   BEFORE each page's own inline <style>. Positioning rules
   below therefore use the bare `nav` / `footer` element
   selector on purpose: a page that already styles its own
   `nav {}` has equal specificity and comes later in source
   order, so the PAGE wins and its existing layout is
   preserved. Pages with no nav rule of their own (terminal,
   scanner) fall back to the sticky default here.

   Everything else is namespaced `.cr-` so it cannot collide
   with existing page classes such as .nav-links or .footer-col.
   Colours read the page's own custom properties where they
   exist, with literal fallbacks for pages that define none.
   ============================================================ */

nav { position: sticky; top: 0; z-index: 900; }
footer { display: block; }

/* ── nav shell ─────────────────────────────────────────── */
nav.cr-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0 2rem;
  min-height:64px;
  background:var(--bg, #0a0a0b);
  border-bottom:1px solid var(--border, rgba(255,255,255,.08));
  font-family:var(--sans, 'DM Sans', system-ui, -apple-system, sans-serif);
  box-sizing:border-box;
}
@supports (backdrop-filter: blur(16px)){
  nav.cr-nav{ background:rgba(10,10,11,.88); backdrop-filter:blur(16px); }
}
nav.cr-nav *,
footer.cr-footer *{ box-sizing:border-box; }

/* ── brand ─────────────────────────────────────────────── */
nav.cr-nav .cr-brand{
  display:flex; align-items:center; gap:.75rem;
  text-decoration:none; flex:0 0 auto;
}
nav.cr-nav .cr-brand-name{
  font-family:var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size:.68rem; font-weight:600; line-height:1.15;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold, #c5a250); white-space:nowrap;
}
nav.cr-nav .cr-brand-rule{
  width:1px; height:26px;
  background:var(--border, rgba(255,255,255,.14));
}
nav.cr-nav .cr-brand-sub{
  font-family:var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-3, #7a7773); white-space:nowrap;
}

/* ── links ─────────────────────────────────────────────── */
nav.cr-nav .cr-links{
  display:flex; align-items:center; gap:.25rem;
  list-style:none; margin:0; padding:0;
}
nav.cr-nav .cr-links > li{ margin:0; padding:0; position:relative; }
nav.cr-nav .cr-links a,
nav.cr-nav .cr-more-btn{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.5rem .7rem;
  font-family:var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size:.66rem; font-weight:400;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-2, #9a9690);
  text-decoration:none; white-space:nowrap;
  background:none; border:0; cursor:pointer;
  transition:color .18s ease;
}
nav.cr-nav .cr-links a:hover,
nav.cr-nav .cr-more-btn:hover{ color:var(--text-1, #f0ede6); }
nav.cr-nav .cr-links a[aria-current="page"]{
  color:var(--gold, #c5a250);
}
nav.cr-nav .cr-links a:focus-visible,
nav.cr-nav .cr-more-btn:focus-visible,
nav.cr-nav .cr-burger:focus-visible{
  outline:2px solid var(--gold, #c5a250); outline-offset:2px; border-radius:2px;
}

/* Members + Subscribe. High specificity so a page-level
   `nav a { }` rule cannot repaint them. */
nav.cr-nav .cr-links a.cr-members{ color:var(--text-1, #f0ede6); }
nav.cr-nav .cr-links a.cr-cta{
  color:#0a0a0b;
  background:var(--gold, #c5a250);
  border-radius:2px;
  padding:.45rem 1rem;
  font-weight:600;
  letter-spacing:.11em;
}
nav.cr-nav .cr-links a.cr-cta:hover{
  background:var(--gold-light, #e2c47a);
  color:#0a0a0b;
}

/* ── More dropdown ─────────────────────────────────────── */
nav.cr-nav .cr-more-btn svg{ width:8px; height:5px; fill:currentColor; }
nav.cr-nav .cr-drop{
  position:absolute; top:calc(100% + 6px); right:0;
  min-width:210px; padding:.4rem;
  display:none; flex-direction:column;
  background:var(--bg-3, #141417);
  border:1px solid var(--border, rgba(255,255,255,.1));
  border-radius:3px;
  box-shadow:0 12px 32px rgba(0,0,0,.5);
  z-index:1000;
}
nav.cr-nav .cr-more[data-open="true"] .cr-drop{ display:flex; }
nav.cr-nav .cr-drop a{
  padding:.55rem .7rem;
  font-size:.64rem;
  letter-spacing:.11em;
  color:var(--text-2, #9a9690);
}
nav.cr-nav .cr-drop a:hover{
  color:var(--text-1, #f0ede6);
  background:var(--bg-4, rgba(255,255,255,.05));
  border-radius:2px;
}

/* ── hamburger ─────────────────────────────────────────── */
nav.cr-nav .cr-burger{
  display:none;
  flex-direction:column; gap:4px;
  background:none; border:0; cursor:pointer;
  padding:.5rem; margin-left:auto;
}
nav.cr-nav .cr-burger span{
  display:block; width:20px; height:1.5px;
  background:var(--text-1, #f0ede6);
}

@media (max-width: 900px){
  nav.cr-nav{ flex-wrap:wrap; padding:0 1.1rem; }
  nav.cr-nav .cr-burger{ display:flex; }
  nav.cr-nav .cr-brand-rule,
  nav.cr-nav .cr-brand-sub{ display:none; }
  nav.cr-nav .cr-links{
    display:none;
    flex-basis:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:.4rem 0 1rem;
    border-top:1px solid var(--border, rgba(255,255,255,.08));
  }
  nav.cr-nav[data-menu="open"] .cr-links{ display:flex; }
  nav.cr-nav .cr-links a,
  nav.cr-nav .cr-more-btn{ padding:.75rem .3rem; font-size:.72rem; width:100%; }
  nav.cr-nav .cr-links a.cr-cta{ justify-content:center; margin-top:.5rem; }
  nav.cr-nav .cr-drop{
    position:static; display:flex; min-width:0;
    background:none; border:0; box-shadow:none;
    padding:0 0 0 .9rem;
  }
  nav.cr-nav .cr-more-btn svg{ display:none; }
}


/* Defensive: several pages style a bare `nav {position:fixed;top:0}`.
   Nothing inside the footer may ever be captured by that rule. */
footer.cr-footer nav,
footer.cr-footer .cr-foot-top{
  position:static !important; top:auto; left:auto; right:auto; z-index:auto;
}

/* ── footer ────────────────────────────────────────────── */
footer.cr-footer{
  background:var(--bg-2, #0f0f11);
  border-top:1px solid var(--border, rgba(255,255,255,.08));
  padding:3rem 2rem 1.75rem;
  font-family:var(--sans, 'DM Sans', system-ui, -apple-system, sans-serif);
  margin-top:4rem;
}
footer.cr-footer .cr-foot-top{
  display:grid;
  grid-template-columns:1.6fr repeat(4, 1fr);
  gap:2.25rem;
  max-width:1180px; margin:0 auto;
}
footer.cr-footer .cr-foot-name{
  display:block;
  font-family:var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size:.7rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold, #c5a250); margin-bottom:.7rem;
}
footer.cr-footer .cr-foot-brand p{
  margin:0; max-width:34ch;
  font-size:.82rem; line-height:1.65;
  color:var(--text-3, #7a7773);
}
footer.cr-footer .cr-foot-h{
  display:block;
  font-family:var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size:.58rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-1, #f0ede6); margin-bottom:.85rem;
}
footer.cr-footer .cr-foot-col ul{ list-style:none; margin:0; padding:0; }
footer.cr-footer .cr-foot-col li{ margin:0 0 .5rem; }
footer.cr-footer .cr-foot-col a{
  font-size:.8rem; line-height:1.5;
  color:var(--text-3, #7a7773);
  text-decoration:none;
  transition:color .18s ease;
}
footer.cr-footer .cr-foot-col a:hover{ color:var(--gold, #c5a250); }
footer.cr-footer .cr-foot-col a:focus-visible{
  outline:2px solid var(--gold, #c5a250); outline-offset:2px;
}
footer.cr-footer .cr-foot-bottom{
  display:flex; flex-wrap:wrap; gap:1rem;
  justify-content:space-between;
  max-width:1180px; margin:2.5rem auto 0;
  padding-top:1.25rem;
  border-top:1px solid var(--border, rgba(255,255,255,.06));
  font-family:var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-3, #5a5753);
}
@media (max-width: 860px){
  footer.cr-footer{ padding:2.25rem 1.1rem 1.5rem; }
  footer.cr-footer .cr-foot-top{ grid-template-columns:repeat(2, 1fr); gap:1.75rem; }
  footer.cr-footer .cr-foot-brand{ grid-column:1 / -1; }
}
@media (prefers-reduced-motion: reduce){
  nav.cr-nav *, footer.cr-footer *{ transition:none !important; }
}
