/* Neurotopia — shared styles. Dark, readable long-form; CSS-only tabs (no JS, CSP-safe). */
:root{
  --bg:#1a1d1f; --panel:#23282b; --panel-2:#2a2f33; --line:#363c40;
  --text:#d7dbdc; --muted:#8b9298; --accent:#5a9fd4; --accent-2:#7fb6e2;
  --active:#c17a3f;
  --head:#eef1f2; --head-2:#eaeef0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Public Sans",system-ui,sans-serif;
  line-height:1.7; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px;margin:0 auto;padding:0 1.25rem}
a{color:var(--accent)}
a:hover{color:var(--accent-2)}

/* ---- site header ---- */
/* masthead — full-width wordmark banner (slogan baked into the image) */
.masthead{padding:2rem 0 1.2rem;text-align:center}
.masthead .logo-link{display:inline-block;line-height:0}
.masthead .logo{width:100%;max-width:660px;height:auto}

/* ---- page header ---- */
header.page{padding:2.5rem 0 1.5rem}
h1{font-size:clamp(1.7rem,5vw,2.4rem);font-weight:650;line-height:1.15;color:var(--head);margin-bottom:.55rem}
h1 .abbr{color:var(--accent)}
.subtitle{color:var(--accent);font-size:clamp(1.05rem,2.5vw,1.3rem);font-weight:500;line-height:1.2;margin:-.15rem 0 .7rem}
.lede{color:var(--muted);font-size:1rem;max-width:62ch}
.kicker{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--active);margin-bottom:.5rem}

.tagline{font-size:1.25rem;font-weight:650;color:var(--head-2);margin:1.5rem 0 .6rem}

/* CSS-only lightbox — enlarges a diagram on a DARK backdrop (no JS, CSP-safe) */
.lightbox{display:none;position:fixed;inset:0;z-index:200;background:rgba(18,21,23,.975);
  align-items:center;justify-content:center;padding:1.5rem}
.lightbox:target{display:flex}
.lightbox .lb-bg{position:absolute;inset:0}
.lightbox img{position:relative;max-width:96vw;max-height:90vh;width:auto;height:auto}
.lightbox .lb-x{position:absolute;top:.7rem;right:1.2rem;z-index:2;font-size:1.8rem;line-height:1;color:var(--muted);text-decoration:none}
.lightbox .lb-x:hover{color:var(--text)}

/* ---- layout: sidebar nav + content column ---- */
.layout{display:flex;gap:2.4rem;max-width:1000px;margin:0 auto;padding:1.9rem 1.25rem 0}
.layout > main{flex:1 1 auto;min-width:0}

/* sidebar — primary chips (concept / application) with nested section tabs.
   Tabs are CSS-only radios (no JS, CSP-safe); labels live in the sidebar,
   the hidden inputs sit first inside .layout so ~ can reach nav + main. */
.tabstate{position:absolute;opacity:0;pointer-events:none}
.sidenav{flex:0 0 190px;align-self:flex-start;position:sticky;top:1.1rem;font-size:.85rem}
.nav-tree,.nav-tree ul{list-style:none;margin:0;padding:0}
.nav-tree>li{margin-bottom:1.15rem}
.nav-tree .grp{display:block;text-decoration:none;font-weight:650;letter-spacing:.02em;color:var(--text);padding:.15rem .1rem}
.nav-tree .grp:hover{color:var(--accent-2)}
.nav-tree .grp.here{color:var(--active)}
.nav-tree .leaves{margin-top:.4rem;border-left:1px solid var(--line)}
.nav-tree .leaf{display:block;cursor:pointer;color:var(--muted);padding:.26rem .7rem;margin-left:-1px;
  border-left:2px solid transparent;line-height:1.35;user-select:none;transition:.12s}
.nav-tree .leaf:hover{color:var(--text)}

.panel{display:none;animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
#t1:checked~.sidenav label[for=t1],#t2:checked~.sidenav label[for=t2],#t3:checked~.sidenav label[for=t3],
#t4:checked~.sidenav label[for=t4],#t5:checked~.sidenav label[for=t5],#t6:checked~.sidenav label[for=t6],
#t7:checked~.sidenav label[for=t7],#t8:checked~.sidenav label[for=t8]{color:var(--text);font-weight:600;border-left-color:var(--active)}
#t1:checked~main #p1,#t2:checked~main #p2,#t3:checked~main #p3,#t4:checked~main #p4,
#t5:checked~main #p5,#t6:checked~main #p6,#t7:checked~main #p7,#t8:checked~main #p8{display:block}

/* stack sidebar above content on narrow screens */
@media (max-width:760px){
  .layout{flex-direction:column;gap:1rem;padding-top:1.3rem}
  .sidenav{position:static;flex:0 0 auto;width:100%;border-bottom:1px solid var(--line);padding-bottom:1.1rem}
}

/* ---- content ---- */
main{padding-bottom:1rem}
h2{font-size:1.3rem;font-weight:640;color:var(--head-2);margin:0 0 1rem;letter-spacing:.005em}
h3{font-size:1.03rem;font-weight:620;color:var(--accent-2);margin:2rem 0 .6rem;display:flex;gap:.55rem;align-items:baseline}
h3 .n{color:var(--active);font-variant-numeric:tabular-nums;font-size:.9em;flex:none}
.panel>h3:first-of-type{margin-top:.2rem}
p{margin:0 0 1rem}
.lead{color:var(--head-2);font-weight:600}
ul{margin:.2rem 0 1.15rem 1.15rem;padding:0}
li{margin:.35rem 0}
em{color:#e6eaeb;font-style:italic}

/* equation / emphasis callout */
.eqn{background:var(--panel);border-left:3px solid var(--accent);border-radius:0 6px 6px 0;
  padding:.9rem 1.1rem;margin:0 0 1.2rem;text-align:center;font-size:1.15rem;color:var(--head);letter-spacing:.02em}
.aside{background:var(--panel);border-left:3px solid var(--accent);border-radius:0 6px 6px 0;
  padding:.85rem 1rem;margin:0 0 1.2rem;font-size:.95rem;color:#c6cbcd}
.aside .xlabel{display:block;font-size:.68rem;letter-spacing:.14em;color:var(--accent);margin-bottom:.35rem}

/* citations — inline markers + per-section notes (CSS-only, CSP-safe) */
sup.cite{font-size:.62em;font-weight:600;margin-left:.05em}
sup.cite a{color:var(--accent);text-decoration:none}
sup.cite a:hover{color:var(--accent-2)}
.notes{margin:2.4rem 0 .2rem;padding-top:1.1rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted);line-height:1.55}
.notes .lbl{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--active);margin-bottom:.7rem}
.notes ol{margin:0;padding:0;list-style:none}
.notes li{margin:.45rem 0;padding-left:1.7rem;position:relative}
.notes li .num{position:absolute;left:0;color:var(--accent);text-decoration:none;font-variant-numeric:tabular-nums}
.notes li .num:hover{color:var(--accent-2)}
.notes li:target{color:var(--text)}
.notes .flag{color:var(--active)}
.notes li a:not(.num){color:var(--accent);text-decoration:none}
.notes li a:not(.num):hover{color:var(--accent-2);text-decoration:underline}

/* diagrams — small but readable, click to enlarge */
figure.diagram{margin:1.4rem auto;text-align:center}
figure.diagram a{display:inline-block;line-height:0}
figure.diagram img{width:100%;max-width:460px;height:auto}
figure.diagram figcaption{margin-top:.55rem;font-size:.8rem;color:var(--muted);line-height:1.5}

/* landing cards */
.cards{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:1.75rem 0}
a.card{display:block;text-decoration:none;color:inherit;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:8px;padding:1.35rem 1.4rem;transition:.15s}
a.card:hover{border-color:var(--accent);border-left-color:var(--accent-2);background:var(--panel-2);transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(90,159,212,.18)}
a.card .t{font-size:1.15rem;color:var(--accent-2);margin-bottom:.15rem}
a.card .k{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--active);margin-bottom:.5rem}
a.card p{color:var(--muted);font-size:.9rem;margin:0}
a.card .go{color:var(--accent);font-size:.8rem;margin-top:.75rem;display:block}

/* footer */
footer{border-top:1px solid var(--line);margin-top:3rem}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;padding:1.4rem 1.25rem 3rem}
footer .sig{font-size:.72rem;color:#5f666b;letter-spacing:.1em}
footer .projects{font-size:.72rem;letter-spacing:.02em;color:#4e5459}
footer .projects a{color:var(--muted);text-decoration:none;padding:0 .12rem}
footer .projects a:hover{color:var(--accent-2)}
footer .crosslink{font-size:.72rem}
footer .crosslink a{color:var(--muted);text-decoration:none}
footer .crosslink a:hover{color:var(--accent-2)}