:root {
  --bg: #0b0d17;
  --bg-raised: #141828;
  --text: #e8e6df;
  --muted: #9a98a6;
  --line: #2a2f45;
  --fibre: #3b4262;
  --light: #ffd27a;
  --light-soft: rgba(255, 210, 122, 0.18);
  --glow: rgba(255, 210, 122, 0.35);
  --on-light: #1a1406;
  --soon: #6f7491;
  --soon-fill: rgba(111, 116, 145, 0.15);
  --head: #232842;
  --hemi-line: #3a4062;
  --sulci: #343b5e;
  --sclera-line: #6d7396;
  --vit-a: #1e2338;
  --vit-b: #121524;
  --cornea: #8a90b5;
  --iris: #6f93c0;
  --lens: #8fb3d9;
  --lens-fill: rgba(160, 200, 235, 0.18);
  --map-sea: #0a0c16;
  --map-land: #1a1f33;
  --map-border: #2f3654;
  --dot-core: #fff4d6;
  --dot-edge: rgba(255, 180, 60, 0.9);
  --dot-text: #2a1d00;
  --dot-halo: rgba(255, 210, 122, 0.65);
  --dot-halo-far: rgba(255, 180, 60, 0.25);
  --dim-a: #c9c6d6;
  --dim-b: #7d7a92;
  --type: #9fd0ff;
  --type-line: #2e4a66;
  --off: #ff9b8a;
  --off-line: #6b3a33;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  color-scheme: dark;
}
/* light mode: chosen with the toggle in the header (theme.js); night is the default */
:root[data-theme="light"] {
  --bg: #f5f1e8;
  --bg-raised: #fffdf8;
  --text: #26232e;
  --muted: #625f6e;
  --line: #ddd5c4;
  --fibre: #bdb5a3;
  --light: #9a5b00;
  --light-soft: rgba(214, 140, 20, 0.14);
  --glow: rgba(230, 150, 30, 0.25);
  --on-light: #ffffff;
  --soon: #8f8b9c;
  --soon-fill: rgba(143, 139, 156, 0.12);
  --head: #d9d0bd;
  --hemi-line: #cbc1ab;
  --sulci: #e1d8c5;
  --sclera-line: #a8a193;
  --vit-a: #fdfbf6;
  --vit-b: #eee8da;
  --cornea: #a09aaa;
  --iris: #5b7fae;
  --lens: #7d9cc4;
  --lens-fill: rgba(91, 127, 174, 0.15);
  --map-sea: #f0ece2;
  --map-land: #e2dac8;
  --map-border: #c8bea7;
  --dot-core: #ffe7a8;
  --dot-edge: rgba(214, 120, 0, 0.95);
  --dot-text: #3a2400;
  --dot-halo: rgba(230, 140, 20, 0.45);
  --dot-halo-far: rgba(230, 140, 20, 0.15);
  --dim-a: #d6d3df;
  --dim-b: #8f8ba0;
  --type: #2b5f8f;
  --type-line: #a9c2da;
  --off: #b2402e;
  --off-line: #e2b5ab;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
}

a { color: var(--light); }

.top {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}

.home {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.intro h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  margin: 0;
  color: var(--light);
  text-shadow: 0 0 24px var(--glow);
}
.tagline { font-size: 1.15rem; margin: 6px 0 0; }
.hint { color: var(--muted); margin: 4px 0 0; }

.pathway svg { width: 100%; height: auto; max-height: 80vh; display: block; margin: 0 auto; }

.head ellipse, .head path { fill: none; stroke: var(--head); stroke-width: 2.5; stroke-linecap: round; }
.brain .hemi { fill: var(--bg-raised); stroke: var(--hemi-line); stroke-width: 2.5; }
.sulci { fill: none; stroke: var(--sulci); stroke-width: 3; stroke-linecap: round; }
.sclera { fill: url(#vitreous); stroke: var(--sclera-line); stroke-width: 2.5; }
.cornea { fill: var(--lens-fill); stroke: var(--cornea); stroke-width: 2; }
.iris { stroke: var(--iris); stroke-width: 6; stroke-linecap: round; }
.lens { fill: var(--lens-fill); stroke: var(--lens); stroke-width: 1.5; }

.fibres path { fill: none; stroke: var(--fibre); stroke-width: 5; stroke-linecap: round; }
.beam use {
  fill: none;
  stroke: var(--light);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 10 400;
  stroke-dashoffset: 410;
  filter: url(#glow);
  animation: travel 3.2s linear infinite;
  opacity: 0.85;
}
@keyframes travel { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .beam use { animation: none; stroke-dasharray: none; opacity: 0.25; }
}

.site { cursor: pointer; outline: none; }
.site .hit { fill: transparent; }
.site .hit-stroke { fill: none; stroke: transparent; stroke-width: 28; }
.site .label { font-family: var(--font-display); font-size: 24px; fill: var(--text); paint-order: stroke; stroke: var(--bg); stroke-width: 6px; stroke-linejoin: round; }
.site .status { font-size: 15px; fill: var(--muted); letter-spacing: 0.04em; paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; }
.site .shape { fill: none; stroke-width: 3; stroke-linecap: round; transition: stroke 0.2s, fill 0.2s; }
.site .shape.arc { stroke-width: 9; }
.site .shape.thin { stroke-width: 5; }

.site.open .shape { stroke: var(--light); filter: url(#glow); }
.site.open .shape:not(.arc):not(.thin) { fill: var(--light-soft); }
.site.open .status { fill: var(--light); }
.site.soon .shape { stroke: var(--soon); }
.site.soon .shape:not(.thin) { fill: var(--soon-fill); }

.site:hover .shape, .site:focus-visible .shape, .site.active .shape { stroke: var(--light); }
.site.soon:hover .shape, .site.soon:focus-visible .shape, .site.soon.active .shape { fill: var(--light-soft); }
.site:hover .label, .site:focus-visible .label, .site.active .label { fill: var(--light); }
.site:focus-visible .label { text-decoration: underline; }

.info {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  align-self: start;
}
.info h2 { font-family: var(--font-display); font-weight: 400; margin: 0 0 6px; color: var(--light); }
.info p { margin: 0; color: var(--text); }
.info .soon-note { color: var(--muted); margin-top: 8px; }

@media (min-width: 900px) {
  .home { grid-template-columns: minmax(0, 1fr) 300px; }
  .intro { grid-column: 1 / -1; }
  .info { position: sticky; top: 24px; margin-top: 80px; }
}

.foot {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
  padding: 16px;
  text-align: center;
}

.page { max-width: 800px; margin: 0 auto; padding: 32px 16px; }
.page h1 { font-family: var(--font-display); font-weight: 400; color: var(--light); }

/* ----- shared inner pages ----- */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.crumbs { color: var(--muted); font-size: 0.9rem; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--light); }

.wide { max-width: 1200px; margin: 0 auto; padding: 24px 16px 48px; }
.wide h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 5vw, 2.6rem); color: var(--light); margin: 0; text-shadow: 0 0 20px var(--glow); }
.lede { color: var(--muted); margin: 6px 0 20px; max-width: 60ch; }
.muted { color: var(--muted); font-size: 0.9rem; }
.empty { color: var(--muted); font-style: italic; }

.views { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin-bottom: 14px; }
.views button { background: none; border: 0; color: var(--muted); font: inherit; padding: 6px 16px; border-radius: 999px; cursor: pointer; }
.views button[aria-selected="true"] { background: var(--light); color: var(--on-light); }

.filters { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.filter-row + .filter-row { margin-top: 10px; }
.filter-label { color: var(--muted); font-size: 0.85rem; min-width: 54px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-group { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 2px; border: 1px dashed var(--line); border-radius: 999px; }
.chip { background: transparent; border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 0.85rem; padding: 3px 11px; border-radius: 999px; cursor: pointer; }
.chip:hover { border-color: var(--light); }
.chip[aria-pressed="true"] { background: var(--light-soft); border-color: var(--light); color: var(--light); }
.selects label { color: var(--muted); font-size: 0.85rem; display: inline-flex; gap: 6px; align-items: center; }
.selects select { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; font: inherit; font-size: 0.85rem; max-width: 160px; }
.link-btn { background: none; border: 0; color: var(--light); font: inherit; font-size: 0.85rem; cursor: pointer; text-decoration: underline; padding: 0; }
.count { margin: 10px 0 0; font-size: 0.85rem; color: var(--muted); }

#map { height: min(62vh, 560px); border-radius: 10px; border: 1px solid var(--line); background: var(--map-sea); }
.leaflet-container { font-family: var(--font); }
.leaflet-control-attribution { background: var(--bg-raised) !important; opacity: 0.85; color: var(--muted); }
.leaflet-control-attribution a { color: var(--muted); }
.leaflet-bar a { background: var(--bg-raised); color: var(--text); border-color: var(--line); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--bg-raised); color: var(--text); border: 1px solid var(--line); }
.leaflet-popup-content { margin: 10px 12px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
.glow-dot {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: radial-gradient(circle, var(--dot-core) 0%, var(--light) 45%, var(--dot-edge) 100%);
  box-shadow: 0 0 10px 3px var(--dot-halo), 0 0 26px 8px var(--dot-halo-far);
  color: var(--dot-text); font-size: 11px; font-weight: 700; cursor: pointer;
  animation: flicker 4s ease-in-out infinite;
}
.glow-dot.dim { background: radial-gradient(circle, var(--dim-a) 0%, var(--dim-b) 100%); box-shadow: 0 0 6px 2px var(--soon-fill); animation: none; }
@keyframes flicker { 50% { box-shadow: 0 0 14px 5px var(--dot-halo), 0 0 34px 12px var(--dot-halo); } }
@media (prefers-reduced-motion: reduce) { .glow-dot { animation: none; } }
.pop { display: grid; gap: 8px; }
.pop-item { display: grid; color: var(--text); text-decoration: none; }
.pop-item strong { color: var(--light); }
.pop-item span { font-size: 0.82rem; color: var(--muted); }
.map-note { color: var(--muted); font-size: 0.85rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; margin-top: 14px; }
.card { display: grid; gap: 3px; align-content: start; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; color: var(--text); text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s; }
.card:hover, .card:focus-visible { border-color: var(--light); box-shadow: 0 0 18px var(--light-soft); }
.card.inactive { opacity: 0.7; }
.card-name { font-family: var(--font-display); font-size: 1.1rem; color: var(--light); }
.card-pi { font-size: 0.9rem; }
.card-place { font-size: 0.85rem; color: var(--muted); }
.card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tag { font-size: 0.75rem; border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; color: var(--text); }
.tag.stage { border-color: var(--light); color: var(--light); }
.tag.type { color: var(--type); border-color: var(--type-line); }
.tag.off { color: var(--off); border-color: var(--off-line); }

.method-family > h2, .method-block > h2 { font-family: var(--font-display); font-weight: 400; color: var(--light); margin: 28px 0 0; }
.method-family .method-block h3 { font-weight: 500; margin: 16px 0 0; color: var(--text); }
.n { color: var(--muted); font-size: 0.8em; }

/* ----- group page ----- */
.page h2 { font-family: var(--font-display); font-weight: 400; color: var(--light); margin-top: 32px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.status-note { color: var(--muted); }
.button { display: inline-block; background: var(--light); color: var(--on-light); text-decoration: none; padding: 8px 16px; border-radius: 999px; font-weight: 600; box-shadow: 0 0 18px var(--glow); }
.facts { display: grid; gap: 8px; margin: 20px 0; }
.fact { display: grid; grid-template-columns: minmax(110px, 160px) 1fr; gap: 12px; }
.fact dt { color: var(--muted); }
.fact dd { margin: 0; }
.timeline { list-style: none; padding: 0 0 0 22px; margin: 0; border-left: 2px solid var(--glow); }
.timeline li { position: relative; padding: 6px 0 10px; display: grid; gap: 2px; }
.timeline li::before { content: ""; position: absolute; left: -28px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--light); box-shadow: 0 0 8px var(--light); }
.timeline .year { font-family: var(--font-display); color: var(--light); font-size: 1.1rem; }
.timeline a { color: var(--text); }
.timeline a:hover { color: var(--light); }
.timeline .journal { color: var(--muted); font-size: 0.85rem; font-style: italic; }
.src-box { margin-top: 28px; }
.src-box summary { cursor: pointer; color: var(--muted); }
.sources { font-size: 0.85rem; color: var(--muted); }
.sources a { word-break: break-all; }
#map:focus { outline: none; }
#map:focus-visible { outline: 2px solid var(--light); outline-offset: 2px; }

.vit-a { stop-color: var(--vit-a); }
.vit-b { stop-color: var(--vit-b); }
.theme-toggle { margin-left: 12px; background: none; border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 0.85rem; border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.theme-toggle:hover { border-color: var(--light); color: var(--light); }
.miss, .error { color: var(--off); }
.about-link { margin-left: auto; color: var(--muted); font-size: 0.9rem; text-decoration: none; }
.about-link:hover, .about-link[aria-current="page"] { color: var(--light); }

/* about page */
.prose { line-height: 1.65; }
.prose .lede { color: var(--text); font-size: 1.1rem; max-width: none; }
.prose h3 { margin: 22px 0 6px; font-weight: 500; }
.prose li { margin: 6px 0; }
.glossary { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 8px 18px; margin: 10px 0; }
.glossary dt { color: var(--light); }
.glossary dd { margin: 0; }
@media (max-width: 600px) { .glossary { grid-template-columns: minmax(0, 1fr); } .glossary dd { margin-bottom: 8px; } }
.plain-structure circle { fill: var(--soon-fill); stroke: var(--soon); stroke-width: 3; }