/* Site shell: the masthead and footer shared by every page.
   Everything is namespaced .jx-* because the pages style bare nav, header, footer and a
   elements; properties those rules touch are reset explicitly here.

   One place for each thing: the bar carries the five destinations a reader comes for,
   the footer carries the publisher links (About, Method, Corrections). Nothing appears
   in both. Track hues are the validated palette in HANDOFF.md §6; they live on the
   landing page's route cards rather than in the bar. */

.jx-bar, .jx-foot {
  --jx-bg:#fbfaf8; --jx-ink:#14161a; --jx-soft:#6a6e78; --jx-rule:#d8d6d1;
  --jx-read:#2f6f9f; --jx-judge:#c2701c; --jx-invest:#8a4f9e;
}

.jx-bar {
  background:var(--jx-bg); color:var(--jx-ink);
  border-bottom:1px solid var(--jx-rule);
  font:13px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN",sans-serif;
}

/* The bar aligns to the page's own text measure: each page sets --jx-measure to its
   content width, so the wordmark sits directly above the headline instead of floating
   out at the window edge. */
.jx-inner {
  box-sizing:border-box; max-width:var(--jx-measure, 54rem); margin:0 auto;
  padding:0 1.5rem;
}

.jx-row {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; padding:1.5rem 0 .2rem;
}

.jx-brand {
  color:var(--jx-ink); text-decoration:none; border:0;
  font:600 1.75rem/1.05 Georgia,"Hiragino Mincho ProN","Noto Serif JP",serif;
  letter-spacing:-.022em;
}
.jx-brand:hover { color:var(--jx-ink); text-decoration:none; }
@media (max-width:640px) { .jx-brand { font-size:1.4rem; } }

.jx-lang { color:var(--jx-soft); font-size:.74rem; white-space:nowrap; }

.jx-nav {
  display:flex; flex-wrap:wrap; align-items:center; gap:0 1.5rem;
  margin:0; padding:.35rem 0 .6rem; border:0;
}
.jx-nav a {
  display:inline-flex; align-items:center;
  color:var(--jx-soft); text-decoration:none; font-weight:600;
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.3rem 0; border:0; border-bottom:2px solid transparent;
}
.jx-nav a:hover { color:var(--jx-ink); border-bottom-color:var(--jx-rule); }
.jx-nav a[aria-current] { color:var(--jx-ink); border-bottom-color:var(--jx-ink); }
.jx-nav a:focus-visible, .jx-brand:focus-visible, .jx-foot a:focus-visible {
  outline:2px solid var(--jx-ink); outline-offset:3px;
}

.jx-foot {
  display:block; margin:0; background:var(--jx-bg); color:var(--jx-soft);
  border-top:1px solid var(--jx-rule);
  font:12.5px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN",sans-serif;
}
.jx-foot .jx-inner {
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem 2rem;
  padding-top:1.4rem; padding-bottom:1.6rem;
}
.jx-foot p { margin:0; max-width:62ch; }
.jx-foot strong { color:var(--jx-ink); font-weight:600; }
.jx-foot a { color:var(--jx-ink); text-decoration:underline; text-underline-offset:2px; border:0; }
.jx-foot .jx-links { white-space:nowrap; }