/* The Institute site's header and footer (app/institute.py). Loaded on the Institute pages AND around the legacy
   rankings body, so every selector is ci-prefixed: the legacy stylesheet must not reach in, and nothing here may
   reach out. Colours come only from the palette tokens (app/site_palettes.py). */
.ci-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--ground);border-bottom:.5px solid var(--line-solid);font-family:var(--sans)}
.ci-header .ci-in{display:flex;align-items:center;gap:36px;min-height:68px;padding:8px var(--mlr);flex-wrap:wrap;max-width:none;margin:0}
.ci-logo{font:600 19px/1.2 var(--sans);letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
/* the narration icon's slot (kernel narration, listen-only): beside the mark, empty unless a narration is included */
.ci-listen{display:inline-flex;align-items:center;margin-left:-26px;margin-right:auto;min-width:0}
.ci-logo:hover{color:var(--ink)}
.ci-logo{display:inline-flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ci-mark{width:20px;height:20px;flex:none;fill:currentColor;align-self:center}
.ci-footer .ci-fl{display:flex;align-items:center;gap:10px}
.ci-arm{font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-left:12px;border-left:.5px solid var(--ink-4);align-self:center;padding-block:3px}
.ci-grp{display:flex;gap:28px}
.ci-grp + .ci-grp{padding-left:28px;border-left:.5px solid var(--line-solid)}
.ci-nav{display:flex;gap:28px;flex-wrap:wrap;background:none;border:0;padding:0;margin:0;position:static}
.ci-nav a{text-decoration:none;font:15px/1.4 var(--sans);color:var(--ink-2);background:none;border:0;padding:0;border-radius:0}
.ci-nav a:hover,.ci-nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;background:none}
.ci-ctas{display:flex;align-items:center;gap:18px}
.ci-lnk{font:15px/1.4 var(--sans);text-decoration:none;color:var(--ink-2)}
.ci-lnk:hover{color:var(--ink)}
.ci-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 15px/1.2 var(--sans);padding:10px 16px;border-radius:8px;text-decoration:none;cursor:pointer;border:.5px solid transparent;white-space:nowrap;transition:opacity .2s;box-shadow:none;text-transform:none;letter-spacing:0}
.ci-btn.ci-primary{background:var(--ink);color:var(--ground)}
.ci-btn.ci-secondary{background:var(--btn-2);border-color:var(--btn-2-line);color:var(--ink)}
.ci-btn:hover{opacity:.82}
.ci-btn:focus-visible,.ci-nav a:focus-visible,.ci-lnk:focus-visible,.ci-logo:focus-visible{outline:2px solid var(--ink-4);outline-offset:2px}
.ci-footer{background:var(--dark);color:var(--dark-ink-3);padding:56px var(--mlr) 36px;font:14px/1.5 var(--sans);border-top:.5px solid var(--dark-line)}
.ci-footer .ci-cols{display:grid;grid-template-columns:1.6fr repeat(3,minmax(0,1fr));gap:32px}
.ci-footer .ci-fl{color:var(--dark-ink);font-weight:600;font-size:18px}
.ci-footer p{margin:10px 0 0;max-width:26em}
.ci-footer h4{margin:0 0 12px;font:500 12px var(--mono);color:var(--dark-ink-4);text-transform:uppercase;letter-spacing:.06em}
.ci-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ci-footer a{text-decoration:none;color:inherit}.ci-footer a:hover{color:var(--dark-ink)}
.ci-footer .ci-legal{margin-top:48px;padding-top:18px;border-top:.5px solid var(--dark-line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:12.5px var(--mono);color:var(--dark-ink-4)}
.ci-short{display:none}
.ci-skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--ground);padding:8px 12px;z-index:100}
.ci-skip:focus{left:8px;top:8px}
@media (max-width:1280px){
  .ci-header .ci-in{gap:10px 24px;padding-block:10px 0}
  .ci-listen{margin-left:-14px}
  .ci-nav{order:3;width:100%;gap:22px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ci-nav::-webkit-scrollbar{display:none}
  .ci-nav a{flex:none;padding-block:10px}
  .ci-grp{gap:22px;flex:none}
  .ci-grp + .ci-grp{padding-left:22px}
}
@media (max-width:900px){
  .ci-footer .ci-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .ci-lnk{display:none}
  .ci-header .ci-in{gap:6px 12px}
  .ci-listen{margin-left:-4px}
  .ci-logo{font-size:17px;display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:3px;align-items:center}
  .ci-logo .ci-mark{grid-row:1 / span 2;width:26px;height:26px}
  .ci-arm{border-left:0;padding-left:0;font-size:10.5px;align-self:flex-start;padding-block:0}
  .ci-header .ci-btn{padding:8px 12px;font-size:14px}
  .ci-header .ci-long{display:none}
  .ci-header .ci-short{display:inline}
  .ci-footer .ci-cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.ci-btn{transition:none}}

.ci-footer .ci-legal-l{display:flex;gap:16px}.ci-footer .ci-legal-l a{color:inherit;text-decoration:none}.ci-footer .ci-legal-l a:hover{text-decoration:underline}