/* ─────────────────────────────────────────────────────────────────
   Synopticon shared site chrome
   ─────────────────────────────────────────────────────────────────
   Loaded from every page (homepage, charts, research, articles).
   Owns the cross-page styling for the site nav, the article TOC
   wheel, the article-nav (prev / back to top / next), and the
   hero image figure.

   Page-specific layout (hero card, essay container, fixed-vs-scroll
   nav positioning, etc.) stays in each page's own <style> block —
   this file only carries the chrome that's identical everywhere so
   adding a new page doesn't drift.

   Path: /site/landing/shared.css in dev; rewritten to /shared.css
   in prod by ops/scripts/build_site.sh.
   ───────────────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; }

/* ── Site nav — visual styling only.
   Each page still owns its container (<nav>) positioning.
   ──────────────────────────────────────────────────────────────── */

.nav-left  { display: flex; align-items: center; gap: 12px; }
.nav-right { display: flex; align-items: center; gap: 24px; }

.nav-logo {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
}
.nav-logo svg { display: block; width: 48px; height: 48px; }

.nav-wordmark {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 20px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase;
  color: #0C2F3F;
  background: linear-gradient(115deg, #0C2F3F 0%, #0C2F3F 45%, #6E94A8 50%, #0C2F3F 55%, #0C2F3F 100%);
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 1.6s ease-in-out;
}
.nav-logo:hover .nav-wordmark { background-position: -50% 0; }

.nav-link {
  font-size: 14px; font-weight: 500;
  color: #0C2F3F;
  text-decoration: none;
  border: none;
}
.nav-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nav-cta {
  font-size: 14px; font-weight: 600;
  color: white;
  text-decoration: none;
  background: #0C2F3F;
  border: none; border-radius: 8px;
  padding: 10px 20px;
  transition: background 0.15s;
}
.nav-cta:hover { background: #183E50; }

@media (max-width: 640px) {
  .nav-right { gap: 14px; }
}

/* ── TOC wheel — fixed left rail with click-to-expand panel.
   Used on article pages. Drop the markup + script in and it works.
   ──────────────────────────────────────────────────────────────── */

.toc-wheel {
  position: fixed; left: 16px; top: 50%; transform: translateY(-50%);
  z-index: 50;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.toc-ticks {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 10px; border-radius: 999px;
  cursor: pointer;
  background: transparent;
  transition: background 0.2s;
}
.toc-wheel:hover .toc-ticks { background: rgba(12,47,63,0.06); }
.toc-tick {
  display: block; height: 1.5px; width: 14px;
  background: rgba(12,47,63,0.32);
  border: none; border-radius: 2px;
  text-decoration: none;
  transition: width 0.15s, background 0.15s;
}
.toc-tick.h3 { width: 8px; }
.toc-tick.active { width: 22px; background: #0C2F3F; }
.toc-wheel:hover .toc-tick { background: rgba(12,47,63,0.55); }
.toc-wheel:hover .toc-tick.active { background: #0C2F3F; }

.toc-panel {
  position: absolute; left: calc(100% + 8px); top: 0;
  width: 300px; max-height: 70vh; overflow-y: auto;
  background: #FAF9F6;
  border: 1px solid rgba(12,47,63,0.12);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 4px 24px rgba(12,47,63,0.10);
  display: none;
}
.toc-wheel.open .toc-panel { display: block; }
.toc-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: #4A6B7A;
  margin-bottom: 14px;
}
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list li { margin-bottom: 8px; }
.toc-list a {
  display: block;
  font-size: 14px; color: #4A6B7A;
  text-decoration: none; line-height: 1.45;
  border: none;
  transition: color 0.15s;
}
.toc-list a:hover { color: #0C2F3F; }
.toc-list .active > a { color: #0C2F3F; font-weight: 600; }
.toc-list .h3 { padding-left: 16px; }
.toc-list .h3 a { font-size: 13px; }

@media (max-width: 1100px) {
  .toc-wheel { display: none; }
}

/* ── Article nav (prev / back to top / next) ───────────────────── */

.article-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 96px; padding-top: 24px;
  font-size: 15px; color: #8BA3B0;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.article-nav a,
.article-nav .back-to-top {
  color: #8BA3B0;
  text-decoration: none;
  background: none; border: none; padding: 0;
  font: inherit;
  cursor: pointer;
  transition: color 0.15s;
}
.article-nav a:hover,
.article-nav .back-to-top:hover { color: #0C2F3F; }

/* ── Hero image (figure) — used at the top of articles.
   Matches the title-card spot pattern on every article.
   ──────────────────────────────────────────────────────────────── */

.hero-image { margin: 32px 0 8px; }
.hero-image img {
  display: block; width: 100%; height: auto;
  border-radius: 12px;
  border: 1px solid rgba(12,47,63,0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.hero-image figcaption {
  font-size: 13px; color: #8BA3B0;
  line-height: 1.55;
  margin-top: 12px; max-width: 640px;
}