/* ═══════════════════════════════════════════════════════════════
   NETWORK PSYCHOMETRICS — SHARED THEME
   Import this file in every page of the site.
   ═══════════════════════════════════════════════════════════════ */

/* ─── GOOGLE FONTS ─── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Mono:wght@300;400;500&display=swap');

/* ─── RESET ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── DESIGN TOKENS ─── */
:root {
  --ink:    #070a10;
  --paper:  #faf7f2;
  --muted:  #9FC1CC;
  --teal:   #2dd4bf;
  --amber:  #f59e0b;
  --yellow: #f7b801;
  --dim:    #111827;
  --border: rgba(45, 212, 191, 0.15);
}

:root.light {
  --ink:    #ffffff;
  --paper:  #1a1f2e;
  --teal:   #0d9488;
  --amber:  #d97706;
  --yellow: #f59e0b;
  --muted:  #4b5563;
  --dim:    #f0f0f0;
  --border: rgba(13, 148, 136, 0.2);
}

/* ─── BASE ─── */
html { scroll-behavior: smooth; }

body {
  background:   var(--ink);
  color:        var(--paper);
  font-family:  'DM Mono', monospace;
  font-weight:  300;
  overflow-x:   hidden;
  cursor:       crosshair;
  transition:   background 0.4s ease, color 0.4s ease;
}

nav, footer {
  transition: background 0.4s ease, border-color 0.4s ease;
}

/* ─── TYPOGRAPHY ─── */
h1 {
  font-family:   'Cormorant Garamond', serif;
  font-size:     clamp(3.5rem, 8vw, 8rem);
  font-weight:   300;
  line-height:   0.95;
  letter-spacing: -0.01em;
  max-width:     18ch;
  opacity:       0;
  animation:     fadeUp 0.9s 0.5s ease forwards;
}

h1 em,
h2 em {
  font-style: italic;
  color: var(--teal);
}

h2 {
  font-family:  'Cormorant Garamond', serif;
  font-size:    clamp(2.8rem, 5vw, 5rem);
  font-weight:  300;
  line-height:  1.1;
  margin-bottom: 1.5rem;
}

blockquote {
  font-family:  'Cormorant Garamond', serif;
  font-size:    clamp(1.6rem, 3vw, 2.6rem);
  font-weight:  300;
  font-style:   italic;
  line-height:  1.5;
  color:        var(--paper);
  position:     relative;
}

blockquote::before {
  content:    '"';
  font-size:  8rem;
  color:      var(--teal);
  opacity:    0.15;
  position:   absolute;
  top:        -2rem;
  left:       -2rem;
  line-height: 1;
  font-style: normal;
}

/* ─── CANVAS BACKGROUND (used on index) ─── */
#canvas {
  position: fixed;
  inset:    0;
  z-index:  0;
  opacity:  0.65;
}

:root.light #canvas {
  opacity: 0.49;
}

/* ─── PAGE HEADER (inner pages) ─── */
.page-header {
  position:      relative;
  z-index:       1;
  padding:       12rem 10vw 5rem;
  border-bottom: 1px solid var(--border);
  overflow:      hidden;
}

#header-canvas {
  position:       absolute;
  top:            0;
  left:           0;
  width:          100%;
  height:         100vh;
  z-index:        0;
  opacity:        0.65;
  pointer-events: none;
}

:root.light #header-canvas { opacity: 0.49; }

.page-header-content {
  position: relative;
  z-index:  1;
}

.page-header .hero-tag {
  font-size:      1.05rem;
  letter-spacing: 0.18em;
  color:          var(--teal);
  text-transform: uppercase;
  margin-bottom:  1.5rem;
  opacity:        0;
  animation:      fadeUp 0.8s 0.3s ease forwards;
}

.page-header .hero-tag::before {
  content:      '//';
  margin-right: 0.6rem;
  opacity:      0.5;
}

.page-header h1 {
  font-size: clamp(2.8rem, 6vw, 6rem);
  max-width: 22ch;
}

.page-header .hero-sub {
  margin-top:  2rem;
  max-width:   80ch;
  font-size:   1.2rem;
  line-height: 2;
  color:       var(--muted);
  opacity:     0;
  animation:   fadeUp 0.8s 0.5s ease forwards;
}

/* ─── NAV ─── */
nav {
  position:        fixed;
  top: 0; left: 0; right: 0;
  z-index:         100;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.25rem 3rem;
  border-bottom:   1px solid var(--border);
  backdrop-filter: blur(12px);
  background:      rgba(7, 10, 16, 0.6);
}

:root.light nav {
  background: rgba(255, 255, 255, 0.75);
}

.logo {
  font-family:     'Cormorant Garamond', serif;
  font-size:       1.3rem;
  font-weight:     300;
  letter-spacing:  0.08em;
  color:           #ffffff;
  text-transform:  uppercase;
  text-decoration: none;
}

:root.light .logo       { color: #000000; }
:root.light .logo:hover { color: var(--teal); }

.logo span {
  color:   var(--teal);
  opacity: 1;
}

nav ul {
  list-style: none;
  display:    flex;
  gap:        2.5rem;
}

nav a {
  text-decoration: none;
  color:           var(--muted);
  font-size:       1.05rem;
  letter-spacing:  0.15em;
  text-transform:  uppercase;
  transition:      color 0.3s;
}

nav a:hover { color: var(--teal); }

nav a.active { color: var(--teal); }

.nav-cta {
  padding:    0.5rem 1.2rem;
  border:     1px solid var(--teal);
  color:      var(--teal) !important;
  transition: background 0.3s, color 0.3s !important;
}

.nav-cta:hover {
  background: var(--teal) !important;
  color:      var(--ink)  !important;
}

/* ─── THEME TOGGLE ─── */
#theme-toggle {
  background:     transparent;
  border:         1px solid var(--border);
  color:          var(--muted);
  font-family:    'DM Mono', monospace;
  font-size:      0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding:        0.4rem 0.8rem;
  cursor:         pointer;
  transition:     border-color 0.3s, color 0.3s;
  display:        flex;
  align-items:    center;
  gap:            0.4rem;
}

#theme-toggle:hover {
  border-color: var(--teal);
  color:        var(--teal);
}

/* ─── HAMBURGER / MOBILE NAV TOGGLE ─── */
#nav-toggle {
  display:     none;
  background:  transparent;
  border:      1px solid var(--border);
  color:       var(--muted);
  font-size:   1.1rem;
  line-height: 1;
  padding:     0.35rem 0.65rem;
  cursor:      pointer;
  transition:  border-color 0.3s, color 0.3s;
}
#nav-toggle:hover { border-color: var(--teal); color: var(--teal); }

/* ─── OUTLINE LINK BUTTONS (shared site style) ─── */
.member-links {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.5rem;
}

.member-link {
  display:         inline-flex;
  align-items:     center;
  gap:             0.3rem;
  font-size:       0.85rem;
  letter-spacing:  0.14em;
  text-transform:  uppercase;
  text-decoration: none;
  padding:         0.24rem 0.65rem;
  border:          1px solid var(--border);
  color:           var(--muted);
  transition:      border-color 0.3s, color 0.3s, background 0.3s;
}

.member-link:hover { border-color: var(--teal); color: var(--teal); }

:root.light .member-link       { border-color: rgba(26,31,46,0.2); }
:root.light .member-link:hover { background: var(--teal); border-color: var(--teal); color: #fff; }

/* ─── BUTTONS ─── */
.btn-primary {
  padding:        0.9rem 2.2rem;
  background:     var(--teal);
  color:          var(--ink);
  font-family:    'DM Mono', monospace;
  font-size:      1.05rem;
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border:         none;
  cursor:         pointer;
  transition:     background 0.3s, transform 0.2s;
  text-decoration: none;
  display:        inline-block;
}

.btn-primary:hover {
  background: #5eead4;
  transform:  translateY(-2px);
}

.btn-ghost {
  padding:        0.9rem 2.2rem;
  background:     transparent;
  color:          var(--muted);
  font-family:    'DM Mono', monospace;
  font-size:      1.05rem;
  font-weight:    400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border:         1px solid var(--border);
  cursor:         pointer;
  transition:     border-color 0.3s, color 0.3s, background 0.3s;
  text-decoration: none;
  display:        inline-block;
}

.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }

:root.light .btn-ghost       { border-color: rgba(26,31,46,0.2); }
:root.light .btn-ghost:hover { background: var(--teal); border-color: var(--teal); color: #fff; }

/* ─── SECTION LAYOUT ─── */
section {
  position: relative;
  z-index:  1;
}

.section-inner {
  max-width: 1200px;
  margin:    0 auto;
  padding:   8rem 3rem;
}

.section-tag {
  font-size:      0.95rem;
  letter-spacing: 0.2em;
  color:          var(--teal);
  text-transform: uppercase;
  margin-bottom:  1rem;
}

.section-tag::before {
  content: '// ';
  opacity: 0.5;
}

/* ─── INNER-PAGE CONTENT SECTIONS ─── */
.pub-section,
.team-section {
  border-top:      1px solid var(--border);
  background:      rgba(17, 24, 39, 0.5);
  backdrop-filter: blur(4px);
}

:root.light .pub-section,
:root.light .team-section {
  background: rgba(0, 0, 0, 0.04);
}

/* ─── FORM ELEMENTS ─── */
input, textarea {
  background:  transparent;
  border:      1px solid var(--border);
  padding:     0.9rem 1.2rem;
  color:       var(--paper);
  font-family: 'DM Mono', monospace;
  font-size:   0.9rem;
  font-weight: 300;
  outline:     none;
  transition:  border-color 0.3s;
  width:       100%;
}

input::placeholder,
textarea::placeholder {
  color:   var(--muted);
  opacity: 0.6;
}

input:focus,
textarea:focus { border-color: var(--teal); }

textarea { resize: none; height: 100px; }

:root.light input,
:root.light textarea { color: var(--paper); }

/* ─── FOOTER ─── */
footer {
  position:        relative;
  z-index:         1;
  border-top:      1px solid var(--border);
  padding:         2rem 3rem;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  background:      rgba(7, 10, 16, 0.8);
}

:root.light footer { background: rgba(255, 255, 255, 0.85); }

footer p {
  font-size:      0.75rem;
  color:          var(--muted);
  letter-spacing: 0.1em;
}

.footer-links {
  display: flex;
  gap:     2rem;
}

.footer-links a {
  font-size:      0.75rem;
  color:          var(--muted);
  text-decoration: none;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition:     color 0.3s;
}

.footer-links a:hover  { color: var(--teal); }
.footer-links a.active { color: var(--teal); }

/* ─── SCROLL REVEAL ─── */
.reveal {
  opacity:    0;
  transform:  translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
  opacity:   1;
  transform: translateY(0);
}

/* ─── TOOLTIP / EDGE LABEL ─── */
.edge-label {
  position:       fixed;
  font-size:      0.72rem;
  color:          var(--teal);
  letter-spacing: 0.1em;
  pointer-events: none;
  z-index:        999;
  opacity:        0;
  transition:     opacity 0.3s;
  background:     rgba(7, 10, 16, 0.85);
  padding:        0.3rem 0.6rem;
  border:         1px solid var(--border);
  white-space:    nowrap;
}

/* ─── INLINE HYPERLINKS (dark mode only) ─── */
:root:not(.light) a:not([class]) {
  color: #5eead4;
  transition: color 0.2s;
}
:root:not(.light) a:not([class]):hover {
  color: var(--teal);
}

/* ─── ANIMATIONS ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes rotate {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%,100% { opacity: 0.3; transform: scale(1);   }
  50%     { opacity: 0.6; transform: scale(1.2); }
}

@keyframes scanline {
  to { left: 200%; }
}

/* ─── FILTER BAR & DROPDOWNS ─── */
/* ─── FILTER BAR ─── */
.filter-bar {
  display:       flex;
  flex-wrap:     wrap;
  gap:           0.6rem;
  margin-bottom: 4rem;
  overflow:      visible;
  position:      relative;
  z-index:       10;
}

.filter-btn {
  background:     transparent;
  border:         1px solid var(--border);
  color:          var(--muted);
  font-family:    'DM Mono', monospace;
  font-size:      0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding:        0.45rem 1.1rem;
  cursor:         pointer;
  transition:     border-color 0.3s, color 0.3s, background 0.3s;
}

.filter-btn:hover,
.filter-btn.active {
  border-color: var(--teal);
  color:        var(--teal);
}

.filter-btn[data-filter="all"]:hover,
.filter-btn[data-filter="all"].active {
  border-color: var(--paper);
  color:        var(--paper);
}

.filter-btn[data-filter="preprint"]:hover,
.filter-btn[data-filter="preprint"].active {
  border-color: var(--amber);
  color:        var(--amber);
}

.filter-btn[data-filter="chapter"]:hover,
.filter-btn[data-filter="chapter"].active {
  border-color: #f08080;
  color:        #f08080;
}

.filter-btn[data-filter="software"]:hover,
.filter-btn[data-filter="software"].active {
  border-color: #e76f51;
  color:        #e76f51;
}

/* ─── TOPICS DROPDOWN ─── */
.filter-dropdown { position: relative; }

.filter-dropdown-btn {
  background:     transparent;
  border:         1px solid var(--border);
  color:          var(--muted);
  font-family:    'DM Mono', monospace;
  font-size:      0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding:        0.45rem 1.1rem;
  cursor:         pointer;
  transition:     border-color 0.3s, color 0.3s;
  display:        flex;
  align-items:    center;
  gap:            0.5rem;
}

.filter-dropdown-btn:hover,
.filter-dropdown-btn.active {
  border-color: var(--teal);
  color:        var(--teal);
}

.filter-dropdown-arrow {
  font-size:  0.65rem;
  opacity:    0.6;
  transition: transform 0.2s;
}

.filter-dropdown.open .filter-dropdown-arrow { transform: rotate(180deg); }

.filter-dropdown-menu {
  display:        none;
  position:       absolute;
  top:            calc(100% + 4px);
  left:           0;
  z-index:        200;
  background:     var(--dim);
  border:         1px solid var(--border);
  min-width:      180px;
  flex-direction: column;
}

.filter-dropdown.open .filter-dropdown-menu { display: flex; }

.filter-dropdown-item {
  background:     transparent;
  border:         none;
  border-bottom:  1px solid var(--border);
  color:          var(--muted);
  font-family:    'DM Mono', monospace;
  font-size:      0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding:        0.6rem 1.1rem;
  cursor:         pointer;
  text-align:     left;
  transition:     color 0.2s, background 0.2s;
  white-space:    nowrap;
}

.filter-dropdown-item:last-child { border-bottom: none; }

.filter-dropdown-item:hover,
.filter-dropdown-item.active {
  color:      var(--teal);
  background: rgba(45,212,191,0.05);
}


/* ─── LIGHT MODE: filter bar & dropdowns ─── */
:root.light .filter-btn {
  border-color: rgba(26,31,46,0.2);
  color:        var(--muted);
}

:root.light .filter-btn:hover,
:root.light .filter-btn.active {
  background:   var(--teal);
  border-color: var(--teal);
  color:        #fff;
}

:root.light .filter-btn[data-filter="all"]:hover,
:root.light .filter-btn[data-filter="all"].active {
  background:   var(--paper);
  border-color: var(--paper);
  color:        #fff;
}

:root.light .filter-btn[data-filter="preprint"]:hover,
:root.light .filter-btn[data-filter="preprint"].active {
  background:   var(--amber);
  border-color: var(--amber);
  color:        #fff;
}

:root.light .filter-btn[data-filter="chapter"]:hover,
:root.light .filter-btn[data-filter="chapter"].active {
  background:   #f08080;
  border-color: #f08080;
  color:        #fff;
}

:root.light .filter-btn[data-filter="software"]:hover,
:root.light .filter-btn[data-filter="software"].active {
  background:   #e76f51;
  border-color: #e76f51;
  color:        #fff;
}

:root.light .filter-dropdown-btn {
  border-color: rgba(26,31,46,0.2);
  color:        var(--muted);
}

:root.light .filter-dropdown-btn:hover,
:root.light .filter-dropdown-btn.active {
  background:   var(--teal);
  border-color: var(--teal);
  color:        #fff;
}

:root.light .filter-dropdown-menu {
  background: var(--dim);
  border-color: rgba(26,31,46,0.15);
}

:root.light .filter-dropdown-item {
  color:        var(--paper);
  border-bottom-color: rgba(26,31,46,0.1);
}

:root.light .filter-dropdown-item:hover,
:root.light .filter-dropdown-item.active {
  background:   var(--teal);
  color:        #fff;
}

:root.light .filter-dropdown-item[data-topic="aesthetics"]:hover,
:root.light .filter-dropdown-item[data-topic="aesthetics"].active          { background: #b5e48c; color: #111827; }
:root.light .filter-dropdown-item[data-topic="creativity"]:hover,
:root.light .filter-dropdown-item[data-topic="creativity"].active          { background: #f9c74f; color: #111827; }
:root.light .filter-dropdown-item[data-topic="neuroscience"]:hover,
:root.light .filter-dropdown-item[data-topic="neuroscience"].active        { background: #fec3a6; color: #111827; }
:root.light .filter-dropdown-item[data-topic="personality"]:hover,
:root.light .filter-dropdown-item[data-topic="personality"].active         { background: #b56576; color: #fff;    }
:root.light .filter-dropdown-item[data-topic="psychometric-networks"]:hover,
:root.light .filter-dropdown-item[data-topic="psychometric-networks"].active { background: #c77dff; color: #111827; }
:root.light .filter-dropdown-item[data-topic="semantic-networks"]:hover,
:root.light .filter-dropdown-item[data-topic="semantic-networks"].active   { background: #94d2bd; color: #111827; }

/* ─── LIGHT MODE SECTION OVERRIDES ─── */
:root.light body        { background: var(--ink); color: var(--paper); }
:root.light #about      { background: rgba(0, 0, 0, 0.04); }
:root.light #applications { background: rgba(0, 0, 0, 0.04); }

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  nav { padding: 1rem 1.5rem; }

  #nav-toggle { display: block; }

  nav ul {
    display:         none;
    position:        absolute;
    top:             100%;
    left:            0; right: 0;
    flex-direction:  column;
    gap:             0;
    background:      rgba(7, 10, 16, 0.97);
    border-top:      1px solid var(--border);
    backdrop-filter: blur(16px);
    padding:         1rem 0;
    z-index:         99;
  }
  nav.nav-open ul { display: flex; }
  nav ul li a     { display: block; padding: 0.85rem 1.5rem; font-size: 1.0rem; }
  :root.light nav.nav-open ul { background: rgba(255, 255, 255, 0.97); }

  .section-inner { padding: 5rem 1.5rem; }
  .page-header            { padding: 8rem 1.5rem 3rem; }
  .page-header .hero-sub  { font-size: 1.05rem; }
  footer { flex-direction: column; gap: 1rem; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 1rem; }
}

@media (max-width: 1024px) {
  .section-inner { padding: 6rem 2.5rem; }
}