/* House theme: the institutional research identity.

   Loaded last on every page (build_site.py injects it just before </head>), so it
   overrides the tokens and type each page sets for itself. build_site.py also maps the
   pages' literal font stacks onto --jx-serif / --jx-sans / --jx-mono, so a page never
   needs to name a face.

   Light only, by design: a research document reads as paper. */

:root {
  --jx-measure: 68rem;

  --jx-serif: "Source Serif 4", Georgia, "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --jx-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
             "Hiragino Kaku Gothic ProN", sans-serif;
  --jx-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* page tokens every hand-written and generated page already uses */
  --paper: #ffffff;
  --panel: #ffffff;
  --wash: #f3f5f8;
  --ink: #0e1726;
  --ink-2: #333e4f;
  --ink-soft: #5f6a7a;
  --rule: #cdd4de;
  --rule-hair: #e3e7ed;
  --navy: #0b2a4f;
  --read: #1d5a8a;
  --judge: #a35f12;
  --judge-ink: #7c4709;
  --invest: #6b3f86;

  /* house additions */
  --jx-deep: #061a33;
  --jx-band: #0b2a4f;
  --jx-brass: #b08a3e;
  --jx-on-dark: #e8edf4;
  --jx-on-dark-soft: #9fb0c6;
  color-scheme: light;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--jx-sans);
  font-size: 15.5px;
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
}

.wrap { max-width: var(--jx-measure) !important; }
p { color: var(--ink-2); }
a { color: var(--read); text-decoration-thickness: 1px; }
a:hover { color: var(--navy); }

/* ---------------------------------------------------------------- headlines */

h1, h3, .s-title, .route h3, .claim b, .editor strong {
  font-family: var(--jx-serif);
}
h1 {
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -.018em;
  color: var(--ink);
  text-wrap: balance;
}
h3 { letter-spacing: -.008em; }
.standfirst {
  font-family: var(--jx-serif);
  font-size: 1.16rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* the report header block at the top of every page */
.head, .hero {
  padding: 2.6rem 0 1.6rem !important;
  border-bottom: 2px solid var(--navy) !important;
}
.eyebrow {
  font-family: var(--jx-sans);
  color: var(--jx-brass);
  font-weight: 600;
  letter-spacing: .16em;
  font-size: .7rem;
}
.meta, .byline {
  font-family: var(--jx-sans);
  color: var(--ink-soft);
  font-size: .78rem;
  letter-spacing: .01em;
}
.byline b { color: var(--ink); }

/* section heads: small caps over a navy rule, the convention of a printed note */
h2.sec {
  font-family: var(--jx-sans) !important;
  color: var(--navy) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  border-bottom: 2px solid var(--navy) !important;
  padding-bottom: .45rem !important;
}
aside h2.sec { border-bottom-color: var(--jx-brass) !important; }

.note, .rail-note, .rail-foot, .tag, .when, .note-line {
  font-family: var(--jx-sans);
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- figures */

.figure b, .metric b, .co-score, .cell, .qv, .prow .v, .r-v, .r-score, .kpi b {
  font-family: var(--jx-mono) !important;
  font-variant-numeric: tabular-nums;
}
.figure b { color: var(--navy); font-weight: 500; }

/* key-figure strip under a page header */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1.8rem 0 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.kpi { padding: .9rem 1rem .85rem 0; }
.kpi + .kpi { padding-left: 1rem; border-left: 1px solid var(--rule-hair); }
.kpi b {
  display: block;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--navy);
}
.kpi span {
  display: block;
  margin-top: .35rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
@media (max-width: 640px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(3) { padding-left: 0; border-left: 0; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--rule-hair); }
}

/* ---------------------------------------------------------------- tables and lists */

.colhead, .qhead {
  color: var(--navy) !important;
  border-bottom: 2px solid var(--navy) !important;
  font-family: var(--jx-sans) !important;
}
a.co, .colist .co { transition: background-color .12s; }
a.co:hover { background: var(--wash); }
.co-name { color: var(--ink); }
.co-code { font-family: var(--jx-mono) !important; }
.cell.none { color: var(--ink-soft) !important; opacity: .55; }

.prow, .qitem, .rating, .lens, .qa, .co, .claim { border-color: var(--rule-hair); }
.pillars { border-top: 2px solid var(--navy) !important; }

.status, .absent { background: var(--wash); }

/* route cards on the overview */
.route { border-top-width: 3px !important; }
.route h3 a { color: var(--ink); }

/* folding sections on a company page */
.sec-fold { border-top: 2px solid var(--navy) !important; }
.s-title { font-weight: 600; color: var(--ink); }
.jump {
  font-family: var(--jx-sans) !important;
  border-color: var(--rule) !important;
}
.jump a { color: var(--navy) !important; }

/* ---------------------------------------------------------------- masthead */

.jx-util {
  background: var(--jx-deep);
  color: var(--jx-on-dark-soft);
  font: 500 .68rem/1 var(--jx-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.jx-util .jx-inner {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .55rem;
}
.jx-util span:last-child { white-space: nowrap; }
@media (max-width: 640px) { .jx-util span:first-child { display: none; } }

.jx-bar {
  --jx-bg: var(--jx-band);
  --jx-ink: #ffffff;
  --jx-soft: var(--jx-on-dark-soft);
  --jx-rule: var(--jx-brass);
  background: var(--jx-band) !important;
  border-bottom: 3px solid var(--jx-brass) !important;
  font-family: var(--jx-sans) !important;
}
.jx-inner {
  max-width: var(--jx-measure) !important;
  padding-left: max(1.5rem, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(1.5rem, env(safe-area-inset-right, 0px)) !important;
}
.jx-row { padding: 1.15rem 0 .1rem !important; align-items: center !important; }
.jx-brand {
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  font-family: var(--jx-serif) !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  color: #ffffff !important;
}
.jx-brand small {
  font: 600 .6rem/1 var(--jx-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--jx-brass);
}
.jx-lang { color: var(--jx-on-dark-soft) !important; }
.jx-nav { padding: .5rem 0 0 !important; gap: 0 1.8rem !important; }
.jx-nav a {
  color: var(--jx-on-dark-soft) !important;
  font-size: .7rem !important;
  letter-spacing: .12em !important;
  padding: .55rem 0 .6rem !important;
  border-bottom: 3px solid transparent !important;
  margin-bottom: -3px;
}
.jx-nav a:hover { color: #ffffff !important; border-bottom-color: var(--jx-on-dark-soft) !important; }
.jx-nav a[aria-current] { color: #ffffff !important; border-bottom-color: #ffffff !important; }
.jx-nav a:focus-visible, .jx-brand:focus-visible, .jx-foot a:focus-visible {
  outline-color: #ffffff !important;
}

/* ---------------------------------------------------------------- footer */

.jx-foot {
  background: var(--jx-deep) !important;
  color: var(--jx-on-dark-soft) !important;
  border-top: 3px solid var(--jx-brass) !important;
  font-family: var(--jx-sans) !important;
  font-size: .78rem !important;
}
.jx-foot .jx-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1.4rem 3rem !important;
  padding-block: 2.2rem 2.4rem !important;
}
@media (max-width: 760px) { .jx-foot .jx-inner { grid-template-columns: 1fr; } }
.jx-foot p { max-width: none !important; color: var(--jx-on-dark-soft); }
.jx-foot strong, .jx-foot .jx-fbrand { color: #ffffff !important; }
.jx-foot .jx-fbrand { font: 600 1.15rem/1.2 var(--jx-serif); display: block; margin-bottom: .5rem; }
.jx-foot a { color: var(--jx-on-dark) !important; }
.jx-foot .jx-links { white-space: normal !important; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin-top: .9rem; }
.jx-foot .jx-links a { text-decoration: none !important; font-weight: 600; letter-spacing: .04em; }
.jx-foot .jx-links a:hover { text-decoration: underline !important; }
.jx-foot .jx-disc-h {
  font: 700 .64rem/1 var(--jx-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--jx-brass);
  margin: 0 0 .6rem;
}
.jx-foot .jx-disc p { font-size: .74rem; line-height: 1.6; margin: 0 0 .55rem; }
.head + .sec-fold, .head + details.sec-fold { margin-top: 1.4rem; }