/* Bnome journal — the articles in the site's own language: the dark room, light type, grey second lines,
   monochrome. Loaded after each page's inline styles, so equal selectors here win; the old accent variables
   the inline styles still name (--pink, --purple, --accent-soft) are turned grey here. */
:root {
  color-scheme: dark;
  --ink: #f2f3f5;
  --text: #c6c2bb;
  --muted: #8b857c;
  --faint: #5f6168;
  --line: rgba(255, 255, 255, 0.08);
  --hairline: rgba(255, 255, 255, 0.05);
  --canvas: #0a0908;
  --panel: #121110;
  --bg-soft: #121110;
  --pink: #f2f3f5;
  --purple: #8b857c;
  --accent-soft: #c6c2bb;
  --display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
}

html, body { background: var(--canvas); color: var(--text); font-family: var(--display); }
body {
  background: radial-gradient(1100px 620px at 30% 0%, #15120f 0%, rgba(10, 9, 8, 0) 70%), var(--canvas);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(242, 243, 245, 0.22); color: #fff; }

/* the site's own bar, as on the front page and the journal */
.nav {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: flex-start; gap: 28px;
  height: 72px; padding: 0 44px; background: rgba(10, 9, 8, 0.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line);
}
.nav a { text-decoration: none; }
.logo { display: inline-flex; align-items: baseline; color: var(--ink); font: 500 23px var(--display); letter-spacing: -0.04em; }
.logo i { width: 6px; height: 6px; margin-left: 3px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 12px rgba(255, 255, 255, 0.7); }
.nav-links { display: flex; gap: 22px; font-size: 14.5px; }
.nav-links a, .nav-right a { color: var(--muted); }
.nav-links a:hover, .nav-right a:hover, .nav-right a[aria-current] { color: var(--ink); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 14.5px; }
.nav-cta, .nav-cta:hover {
  padding: 10px 16px; border-radius: 8px; background: var(--ink); color: #0a0908 !important;
  font-family: var(--display); font-size: 14.5px; font-weight: 500; box-shadow: none;
}
.nav-cta:hover { background: #fff; }
.lang-switch { display: inline-flex; padding: 2px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 0; }
.lang-switch button { border: 0; border-radius: 999px; background: none; color: var(--muted); }
.lang-switch button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.12); color: var(--ink); }

/* the article */
article { padding-top: 88px; }
.eyebrow, .post-eyebrow {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--muted); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.22em;
}
h1 { color: var(--ink); font-family: var(--display); font-weight: 300; letter-spacing: -0.04em; line-height: 1.04; }
.lede { color: var(--text); font-weight: 300; }
.byline { color: var(--faint); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.byline-dot, .post-meta-dot { background: var(--faint); }
.cover { border: 0; border-radius: 16px; background: var(--panel); }
h2 { color: var(--ink); font-family: var(--display); font-weight: 300; letter-spacing: -0.03em; padding-top: 28px; border-top: 1px solid var(--line); }
h3 { color: var(--ink); font-family: var(--display); font-weight: 500; }
p, li { color: var(--text); font-weight: 300; }
strong, b { color: var(--ink); font-weight: 500; }
a { color: var(--ink); text-decoration-color: rgba(242, 243, 245, 0.3); text-underline-offset: 3px; }
a:hover { color: #fff; text-decoration-color: var(--ink); }

pre, code { font-family: var(--mono); }
pre { background: var(--panel); border: 0; border-radius: 12px; color: #e6e4df; }
code { background: rgba(255, 255, 255, 0.07); color: #e6e4df; border: 0; border-radius: 5px; }
pre code { border: 0; color: inherit; background: none; }

.callout, blockquote {
  border-left: 2px solid rgba(242, 243, 245, 0.35); border-image: none; background: transparent;
  padding: 6px 0 6px 26px; border-radius: 0;
}
.callout p, blockquote p { color: var(--ink); font-size: 19px; font-weight: 300; line-height: 1.45; letter-spacing: -0.012em; }

/* tables */
table { color: var(--text); }
th, td { border-bottom: 1px solid var(--hairline); }
thead th { color: var(--faint); font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; border-bottom: 1px solid var(--line); }
tbody td:first-child { color: var(--ink); font-weight: 500; }
tbody tr td:nth-child(3), tbody tr td:last-child {
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); font-weight: 500;
}

/* research pages: charts, legends, method and sources */
figure.chart svg { border: 0; border-radius: 16px; filter: invert(1) hue-rotate(180deg) brightness(0.92); }
figure.chart figcaption { color: var(--faint); }
figure.chart figcaption b { color: var(--ink); }
.legend { color: var(--muted); }
.method { border: 0; border-radius: 16px; background: var(--panel); }
.method h3 { color: var(--muted); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; }
.method p, .method li { color: var(--muted); }
.method strong { color: var(--ink); }
.sources h3, .related h3 { color: var(--faint) !important; font-family: var(--mono); font-weight: 500; letter-spacing: 0.2em !important; font-size: 11px !important; }
.sources ol, .sources li { color: var(--muted); }
.related { border-top-color: var(--line) !important; }

/* the labs inside an article (Hungry Cells): monochrome controls around the simulation's own colours */
.lab-kicker, .ctl-val { color: var(--muted); }
.ctl input[type=range]::-webkit-slider-thumb { background: var(--ink); box-shadow: none; }
.ctl input[type=range]::-moz-range-thumb { background: var(--ink); box-shadow: none; }
.btn:hover { border-color: rgba(255, 255, 255, 0.25); color: var(--ink); }
.btn.primary, .btn.on { background: var(--ink); border-color: var(--ink); color: #0a0908; box-shadow: none; }
.btn.primary:hover { background: #fff; border-color: #fff; color: #0a0908; }

/* the call to try it */
.cta-card {
  position: relative; overflow: hidden; text-align: left; padding: 36px 36px 34px; border: 0; border-radius: 18px;
  background: radial-gradient(520px 200px at 0% 0%, rgba(222, 230, 244, 0.05), transparent 70%), var(--panel);
}
.cta-card h3 { color: var(--ink); font-size: 30px; font-weight: 300; letter-spacing: -0.03em; }
.cta-card p { color: var(--muted); }
.cta-btn, .cta-btn:hover {
  background: var(--ink); color: #0a0908; border-radius: 999px; font-family: var(--display); font-weight: 500;
  text-decoration: none; box-shadow: none;
}
.cta-btn:hover { background: #fff; }

footer {
  border-top: 1px solid var(--line); color: var(--faint); font-family: var(--display); font-size: 14px;
  letter-spacing: 0; text-transform: none; background: var(--canvas);
}
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--ink); }

@media (max-width: 860px) {
  .nav { padding: 0 20px; gap: 16px; }
  .nav-links { display: none; }
  .nav-right a:not(.nav-cta) { display: none; }
}