/* ========================================
   KAVINDA GUNASEKARA — MOTION PORTFOLIO
   Dark cinematic + Gcore-inspired animation
   Liquid glass nav + Interactive globe hero
   ======================================== */

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

:root {
  /* Dark Theme (default) */
  --bg-primary: #080810;
  --bg-secondary: #0c0c18;
  --bg-card: #12121e;
  --text-primary: #e8e4f0;
  --text-secondary: #a0a0b8;
  --text-muted: #6a6a80;
  --accent: #ff8c20;
  --accent-light: #ffaa50;
  --accent-dark: #cc6600;
  --accent-glow: rgba(255, 140, 30, 0.15);
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.12);
  --shadow: rgba(0, 0, 0, 0.3);
  --shadow-strong: rgba(0, 0, 0, 0.5);
  --glass: rgba(12, 12, 24, 0.7);
  --glass-border: rgba(255, 255, 255, 0.08);
  --nav-bg: rgba(8, 8, 16, 0.6);
  --hero-gradient: radial-gradient(ellipse at 50% 50%, rgba(30, 15, 50, 0.4) 0%, rgba(8, 8, 16, 1) 70%);
  --card-gradient: linear-gradient(135deg, rgba(20, 20, 35, 0.8), rgba(15, 15, 25, 0.4));
  --book-bg: #14141e;
  --book-spine: #1a1a28;
  --book-shadow: rgba(0, 0, 0, 0.5);
  --expand-overlay: rgba(0, 0, 0, 0.8);

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-script: 'Cormorant Garamond', 'Georgia', serif;

  /* Spacing */
  --section-padding: clamp(80px, 12vh, 140px);
  --container-max: 1280px;
  --gutter: clamp(20px, 4vw, 48px);

  /* Transitions */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* === LIGHT THEME — Clean White Default === */
[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fb;
  --bg-card: #ffffff;
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #9ca3af;
  --accent: #FF8C1E;
  --accent-light: #ffaa50;
  --accent-dark: #e07010;
  --accent-glow: rgba(255, 140, 30, 0.12);
  --border: rgba(17, 24, 39, 0.08);
  --border-strong: rgba(17, 24, 39, 0.15);
  --shadow: rgba(17, 24, 39, 0.06);
  --shadow-strong: rgba(17, 24, 39, 0.14);
  --glass: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(17, 24, 39, 0.07);
  --nav-bg: rgba(255, 255, 255, 0.85);
  --hero-gradient: radial-gradient(ellipse at 50% 50%, rgba(255, 200, 100, 0.08) 0%, rgba(255, 255, 255, 1) 70%);
  --card-gradient: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(248,249,251,0.8));
  --book-bg: #ffffff;
  --book-spine: #e5e7eb;
  --book-spine-edge: #d1d5db;
  --book-shadow: rgba(17, 24, 39, 0.12);
  --expand-overlay: rgba(17, 24, 39, 0.55);
  --book-page-left-bg: linear-gradient(to right, rgba(243,244,246,0.98), #ffffff);
  --expand-hint-color: rgba(17, 24, 39, 0.4);
}

html {
  /* scroll-behavior intentionally NOT set — smooth-scroll.js handles
     window scrolling with macOS-style inertia. Setting it here causes
     each per-frame window.scrollTo() in the JS engine to also trigger
     a native smooth animation, and the two fight (visible bounce). */
  font-size: 16px;
  /* Stop scroll chaining at the document root so nested scrollers don't tug
     the whole page when they hit their edge — kills a common source of jank
     on touchpads. */
  overscroll-behavior-y: contain;
}

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.7;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  /* Specific transitions instead of "all" — keeps background/color animated
     without giving the browser license to also transition layout properties. */
  transition: background 0.6s var(--ease-smooth), color 0.6s var(--ease-smooth);
}

body.overlay-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }

/* =========================================
   LOADING SCREEN
   ========================================= */
.loader-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #080810;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.loader-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-globe-wrap {
  position: relative;
  width: 80px;
  height: 80px;
}

.loader-ring {
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: loaderSpin 1.2s linear infinite;
}

.loader-ring-2 {
  inset: 8px;
  border-top-color: transparent;
  border-right-color: rgba(255, 140, 30, 0.4);
  animation-duration: 1.8s;
  animation-direction: reverse;
}

.loader-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 12px;
  transform: translate(-50%, -50%);
  background: var(--accent);
  border-radius: 50%;
  animation: loaderPulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(255, 140, 30, 0.5);
}

@keyframes loaderSpin { to { transform: rotate(360deg); } }
@keyframes loaderPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 50% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.6; } }

.loader-text {
  display: flex;
  gap: 3px;
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.loader-letter {
  color: var(--accent);
  opacity: 0;
  animation: loaderLetter 1.5s ease infinite;
  animation-delay: calc(var(--i) * 0.1s);
}

@keyframes loaderLetter {
  0%, 100% { opacity: 0.2; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-4px); }
}

/* =========================================
   NAVBAR — LIQUID GLASS / POP STYLE
   ========================================= */
.navbar {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: calc(100% - 40px);
  max-width: 1200px;
  padding: 0 8px;
  border-radius: 20px;
  background: var(--nav-bg);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  transition: all 0.5s var(--ease-smooth);
}

.navbar.scrolled {
  top: 10px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3), 0 0 60px rgba(255, 140, 30, 0.03);
  border-color: rgba(255, 140, 30, 0.08);
}

.navbar.hidden { transform: translateX(-50%) translateY(-120%); }

.nav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 12px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}

.nav-logo-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(255, 140, 30, 0.3);
  animation: logoPulse 3s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

.nav-logo-icon::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent 50%);
  pointer-events: none;
}

@keyframes logoPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(255, 140, 30, 0.3); }
  50% { box-shadow: 0 4px 22px rgba(255, 140, 30, 0.5); }
}

.logo-svg {
  width: 26px;
  height: 26px;
  display: block;
}

.logo-svg .logo-k {
  stroke: #fff;
  stroke-width: 2.8;
}

.logo-text-group {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 1px;
}

.logo-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.logo-surname {
  font-family: var(--font-script);
  font-size: 0.72rem;
  font-weight: 400;
  font-style: italic;
  color: var(--accent);
  letter-spacing: 0.04em;
  line-height: 1.1;
  opacity: 0.85;
}

[data-theme="light"] .logo-name {
  color: #2c1810;
}

[data-theme="light"] .logo-surname {
  color: var(--accent);
}

[data-theme="light"] .nav-logo-icon {
  box-shadow: 0 4px 14px rgba(208, 104, 0, 0.25);
}

@keyframes logoPulsLight {
  0%, 100% { box-shadow: 0 4px 14px rgba(208, 104, 0, 0.25); }
  50% { box-shadow: 0 4px 22px rgba(208, 104, 0, 0.4); }
}

[data-theme="light"] .nav-logo-icon {
  animation-name: logoPulsLight;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-link {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  padding: 7px 14px;
  border-radius: 10px;
  position: relative;
  transition: all 0.3s var(--ease-smooth);
}

.nav-link:hover, .nav-link.active {
  color: var(--text-primary);
  background: rgba(255, 140, 30, 0.08);
}

.nav-link.active {
  color: var(--accent);
}

.nav-link-cv {
  background: rgba(255, 140, 30, 0.1) !important;
  border: 1px solid rgba(255, 140, 30, 0.2);
  color: var(--accent) !important;
  padding: 6px 14px !important;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-link-cv:hover {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent);
}

/* ============================================================
   NAV CONTENT DROPDOWN
   Hover (desktop) + click (mobile / keyboard) reveal of grouped
   content links: Projects, Articles, Blogs, Publications.
   ============================================================ */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  padding: 7px 14px;
  border-radius: 10px;
  transition: all 0.3s var(--ease-smooth);
}
.nav-dropdown-toggle:hover,
.nav-dropdown.open .nav-dropdown-toggle,
.nav-dropdown-toggle.active {
  color: var(--text-primary);
  background: rgba(255, 140, 30, 0.08);
}
.nav-dropdown-toggle.active { color: var(--accent); }
.nav-dropdown-caret {
  font-size: 0.6rem;
  transition: transform 0.25s var(--ease-smooth);
  opacity: 0.85;
}
.nav-dropdown.open .nav-dropdown-caret { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 280px;
  padding: 8px;
  background: var(--bg-card, rgba(20, 20, 24, 0.96));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.32), 0 4px 12px rgba(0,0,0,0.18);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--ease-smooth), transform 0.22s var(--ease-smooth);
  z-index: 1200;
}
.nav-dropdown-menu::before {
  /* invisible bridge so hover doesn't drop when crossing the gap */
  content: '';
  position: absolute;
  top: -10px; left: 0; right: 0; height: 10px;
}
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.nav-dropdown-item > i {
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 0.95rem;
  color: var(--accent, #ff8c1e);
  width: 24px;
  text-align: center;
}
.nav-dropdown-label {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.nav-dropdown-sub {
  font-size: 0.7rem;
  color: var(--text-muted, rgba(255,255,255,0.55));
  letter-spacing: 0.01em;
  line-height: 1.3;
  margin-top: 2px;
}
.nav-dropdown-item:hover {
  background: rgba(255, 140, 30, 0.10);
  transform: translateX(2px);
}
.nav-dropdown-item:hover .nav-dropdown-label { color: var(--accent, #ff8c1e); }

[data-theme="light"] .nav-dropdown-menu {
  background: rgba(255, 252, 247, 0.97);
  border-color: rgba(44, 24, 16, 0.10);
  box-shadow: 0 16px 48px rgba(44, 24, 16, 0.18), 0 4px 12px rgba(44, 24, 16, 0.08);
}

/* Mobile: dropdown becomes inline within the open nav drawer */
@media (max-width: 720px) {
  .nav-dropdown { width: 100%; flex-direction: column; align-items: stretch; }
  .nav-dropdown-toggle { justify-content: space-between; width: 100%; }
  .nav-dropdown-menu {
    position: static;
    transform: none;
    min-width: 0;
    width: 100%;
    margin-top: 4px;
    box-shadow: none;
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    background: rgba(255,255,255,0.03);
    display: none;
    opacity: 1;
    pointer-events: auto;
  }
  .nav-dropdown.open .nav-dropdown-menu { display: block; transform: none; }
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-toggle {
  width: 36px;
  height: 36px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: all 0.3s var(--ease-smooth);
}

.theme-toggle:hover {
  background: rgba(255, 140, 30, 0.15);
  color: var(--accent);
  border-color: rgba(255, 140, 30, 0.3);
}

.btn-get-in-touch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 10px;
  border: none;
  transition: all 0.3s var(--ease-smooth);
  box-shadow: 0 4px 16px rgba(255, 140, 30, 0.25);
  white-space: nowrap;
}

.btn-get-in-touch:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(255, 140, 30, 0.4);
}

.btn-get-in-touch i {
  font-size: 0.7rem;
  transition: transform 0.3s ease;
}

.btn-get-in-touch:hover i { transform: translateX(3px); }

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.nav-hamburger span {
  width: 22px;
  height: 2px;
  background: var(--text-primary);
  transition: all 0.3s var(--ease-smooth);
  border-radius: 1px;
}

/* =========================================
   HERO SECTION — GLOBE + CINEMATIC
   ========================================= */
.hero {
  min-height: 100vh;
  background: var(--bg-primary);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Floating orbs background */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  pointer-events: none;
}

.hero-orb-1 {
  width: 500px; height: 500px;
  top: -10%;
  right: -5%;
  background: radial-gradient(circle, rgba(255, 100, 20, 0.3), transparent 70%);
  animation: orbFloat1 12s ease-in-out infinite;
}

.hero-orb-2 {
  width: 400px; height: 400px;
  bottom: 0;
  left: -5%;
  background: radial-gradient(circle, rgba(120, 50, 200, 0.2), transparent 70%);
  animation: orbFloat2 15s ease-in-out infinite;
}

.hero-orb-3 {
  width: 300px; height: 300px;
  top: 40%;
  left: 50%;
  background: radial-gradient(circle, rgba(255, 160, 50, 0.15), transparent 70%);
  animation: orbFloat3 10s ease-in-out infinite;
}

@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-30px, 20px) scale(1.05); }
  66% { transform: translate(20px, -15px) scale(0.95); }
}

@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(25px, -20px) scale(1.08); }
  66% { transform: translate(-15px, 15px) scale(0.92); }
}

@keyframes orbFloat3 {
  0%, 100% { transform: translate(-50%, 0) scale(1); opacity: 0.3; }
  50% { transform: translate(-50%, -20px) scale(1.1); opacity: 0.5; }
}

/* Particles */
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255, 160, 60, 0.5);
  border-radius: 50%;
  animation: particleDrift var(--dur) linear infinite;
  opacity: 0;
}

@keyframes particleDrift {
  0% { opacity: 0; transform: translateY(0) translateX(0); }
  10% { opacity: var(--opacity); }
  90% { opacity: var(--opacity); }
  100% { opacity: 0; transform: translateY(-100vh) translateX(var(--drift)); }
}

.hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 120px var(--gutter) 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 100vh;
  gap: 0;
  z-index: 2;
}

/* Globe */
.hero-globe-container {
  position: relative;
  width: 100%;
  max-width: 650px;
  aspect-ratio: 1;
  justify-self: center;
  animation: globeEntrance 1.5s var(--ease-out) forwards;
  opacity: 0;
  animation-delay: 0.3s;
}

@keyframes globeEntrance {
  0% { opacity: 0; transform: scale(0.7) rotate(-5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

#globeCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

.globe-glow {
  position: absolute;
  inset: -15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 120, 20, 0.08) 30%, transparent 70%);
  pointer-events: none;
  animation: globeGlow 4s ease-in-out infinite;
}

@keyframes globeGlow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

/* Hero Content */
.hero-content {
  position: relative;
  z-index: 3;
  padding-left: 20px;
  animation: heroContentEntrance 1.2s var(--ease-out) forwards;
  opacity: 0;
  animation-delay: 0.6s;
}

@keyframes heroContentEntrance {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(255, 140, 30, 0.08);
  border: 1px solid rgba(255, 140, 30, 0.2);
  border-radius: 30px;
  margin-bottom: 24px;
  animation: badgePulse 3s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { border-color: rgba(255, 140, 30, 0.2); }
  50% { border-color: rgba(255, 140, 30, 0.4); }
}

.badge-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: dotBlink 2s ease-in-out infinite;
}

@keyframes dotBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.hero-badge span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero-heading {
  margin-bottom: 16px;
}

.hero-line {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  overflow: hidden;
}

.hero-line-1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--text-secondary);
  animation: lineReveal 0.8s var(--ease-out) forwards;
  animation-delay: 0.8s;
  opacity: 0;
  transform: translateY(100%);
}

.hero-line-2 {
  font-size: clamp(2.8rem, 5.5vw, 4.5rem);
  color: var(--text-primary);
  animation: lineReveal 0.8s var(--ease-out) forwards;
  animation-delay: 1s;
  opacity: 0;
  transform: translateY(100%);
  background: linear-gradient(135deg, var(--text-primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes lineReveal {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

.hero-subtitle {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 16px;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out) 1.2s forwards;
}

.hero-desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 480px;
  margin-bottom: 32px;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out) 1.4s forwards;
}

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin-bottom: 40px;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out) 1.6s forwards;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: 12px;
  transition: all 0.3s var(--ease-smooth);
  white-space: nowrap;
}

.hero-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  box-shadow: 0 6px 24px rgba(255, 140, 30, 0.3);
}

.hero-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(255, 140, 30, 0.4);
}

.hero-btn-primary i {
  animation: bounceDown 2s ease-in-out infinite;
}

@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

.hero-btn-outline {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(8px);
}

.hero-btn-outline:hover {
  background: rgba(255, 140, 30, 0.1);
  border-color: rgba(255, 140, 30, 0.3);
  transform: translateY(-2px);
}

/* Hero Stats */
.hero-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out) 1.8s forwards;
}

.hero-stat { text-align: center; }

.hero-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.hero-stat-label {
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-top: 4px;
}

.hero-stat-divider {
  width: 1px;
  height: 30px;
  background: var(--border);
}

/* Social bar */
.hero-social-bar {
  position: absolute;
  left: var(--gutter);
  bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 4;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out) 2s forwards;
}

.hero-social-link {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
  transition: all 0.3s var(--ease-smooth);
  background: rgba(255, 255, 255, 0.03);
}

.hero-social-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(255, 140, 30, 0.08);
  transform: translateY(-3px);
}

.hero-social-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, var(--border-strong), transparent);
}

/* Scroll indicator */
.hero-scroll-indicator {
  position: absolute;
  right: var(--gutter);
  bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 4;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out) 2.2s forwards;
}

.scroll-mouse {
  width: 22px;
  height: 34px;
  border: 2px solid var(--text-muted);
  border-radius: 11px;
  position: relative;
}

.scroll-wheel {
  width: 3px;
  height: 8px;
  background: var(--accent);
  border-radius: 2px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollWheel 2s ease-in-out infinite;
}

@keyframes scrollWheel {
  0% { opacity: 1; top: 6px; }
  100% { opacity: 0; top: 18px; }
}

.hero-scroll-indicator span {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* =========================================
   SECTION SHARED STYLES
   ========================================= */
.section { padding: var(--section-padding) 0; position: relative; }
.section-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }

.section-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 48px;
}

.label-num {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.label-line {
  width: 40px;
  height: 1px;
  background: var(--accent);
}

.label-text {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: 48px;
}

.section-title em {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

.block-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 32px;
  color: var(--text-primary);
}

/* =========================================
   ABOUT SECTION
   ========================================= */
.about { background: var(--bg-secondary); }

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-bottom: 64px;
  align-items: start;
  justify-items: stretch;
}

/* Both columns share the same internal track and start at the same vertical
   baseline so the section reads as a perfectly symmetrical pair. */
.about-left,
.about-right {
  width: 100%;
  min-width: 0; /* prevent grid blowout on narrow viewports */
  display: flex;
  flex-direction: column;
}

/* Constrain both columns to the same comfortable reading measure so the
   typographic block on the left mirrors the portrait+text block on the
   right. Both align flush to their inner column edge for a balanced feel. */
.about-left  { padding-top: 8px; max-width: 480px; }
.about-right { max-width: 480px; }

.about-lead {
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-top: 24px;
}

.about-text p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.about-text strong { color: var(--text-primary); font-weight: 600; }

/* Stats Bar */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 48px;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  margin-bottom: 64px;
  position: relative;
  overflow: hidden;
}

.stats-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,140,30,0.03), transparent, rgba(255,140,30,0.02));
  pointer-events: none;
}

.stat-item { text-align: center; }

.stat-number {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.stat-suffix {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--accent);
}

.stat-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 8px;
}

/* Education Timeline */
.timeline { position: relative; padding-left: 32px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--border-strong);
}

.timeline-item {
  display: flex;
  gap: 24px;
  padding-bottom: 32px;
  position: relative;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -36px; top: 6px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-secondary);
  box-shadow: 0 0 10px rgba(255, 140, 30, 0.3);
}

.timeline-year {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  min-width: 50px;
  padding-top: 2px;
}

.timeline-content h4 { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.timeline-content p { font-size: 0.85rem; color: var(--text-secondary); }
.timeline-note { font-size: 0.8rem !important; color: var(--text-muted) !important; font-style: italic; margin-top: 4px; }

/* =========================================
   RESEARCH SECTION
   ========================================= */
.research-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.research-card {
  padding: 40px 32px;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  transition: all 0.4s var(--ease-smooth);
  position: relative;
  overflow: hidden;
}

.research-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}

.research-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px var(--shadow-strong), 0 0 30px rgba(255, 140, 30, 0.05);
  border-color: rgba(255, 140, 30, 0.2);
}

.research-card:hover::before { transform: scaleX(1); }

.card-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(255, 140, 30, 0.1);
  color: var(--accent);
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.research-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.research-card p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* Expand Button */
.expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 8px 18px;
  border: 1.5px solid var(--accent);
  border-radius: 24px;
  background: transparent;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s var(--ease-smooth);
}

.expand-btn:hover {
  background: var(--accent);
  color: #fff;
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(255, 140, 30, 0.3);
}

.expand-btn i { font-size: 0.68rem; transition: transform 0.3s var(--ease-out); }
.expand-btn:hover i { transform: translateX(3px); }

.pub-expand-btn { padding: 6px 14px; margin-top: 0; flex-shrink: 0; align-self: center; }
.pub-expand-btn span { display: none; }

/* =========================================
   PROJECTS SECTION
   ========================================= */
.projects { background: var(--bg-secondary); }
.projects-list { margin-bottom: 64px; }

.project-item {
  padding: 40px 0;
  border-bottom: 1px solid var(--border);
  transition: all 0.4s var(--ease-smooth);
  cursor: default;
}

.project-item:first-child { border-top: 1px solid var(--border); }
.project-item:hover { padding-left: 20px; }

.project-meta { display: flex; justify-content: space-between; margin-bottom: 12px; }
.project-client { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.project-year { font-size: 0.8rem; color: var(--text-muted); letter-spacing: 0.05em; }

.project-title {
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px; line-height: 1.3;
}

.project-desc { font-size: 0.9rem; line-height: 1.7; color: var(--text-secondary); margin-bottom: 16px; max-width: 800px; }

.project-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }

.tag {
  padding: 4px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-muted);
  transition: all 0.3s var(--ease-smooth);
}

.project-item:hover .tag { border-color: var(--accent); color: var(--accent); }

/* Countries Block */
.countries-block { text-align: center; }
.country-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.country-tags span {
  padding: 8px 18px;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: 24px;
  font-size: 0.82rem; font-weight: 500;
  color: var(--text-secondary);
  backdrop-filter: blur(6px);
  transition: all 0.3s var(--ease-smooth);
}

.country-tags span:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* =========================================
   PUBLICATIONS
   ========================================= */
.pub-list { margin-bottom: 40px; }

.pub-item {
  display: flex;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
  transition: all 0.3s var(--ease-smooth);
  align-items: flex-start;
}

.pub-item:first-child { border-top: 1px solid var(--border); }
.pub-item:hover { padding-left: 12px; }

.pub-year {
  font-family: var(--font-display);
  font-size: 0.9rem; font-weight: 600;
  color: var(--accent);
  min-width: 50px; padding-top: 4px;
}

.pub-content { flex: 1; }
.pub-content h4 { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; line-height: 1.4; }
.pub-authors { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 4px; }
.pub-journal { font-size: 0.82rem; color: var(--accent); font-style: italic; }

.pub-more {
  text-align: center;
  padding: 32px;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.pub-more p { font-size: 0.9rem; color: var(--text-secondary); font-style: italic; margin-bottom: 12px; }

.pub-scholar-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border: 1.5px solid var(--accent);
  border-radius: 30px;
  color: var(--accent);
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.06em;
  transition: all 0.3s var(--ease-smooth);
}

.pub-scholar-link:hover { background: var(--accent); color: #fff; }

/* =========================================
   CONTACT
   ========================================= */
.contact { background: var(--bg-secondary); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.contact-lead { font-size: 1.1rem; line-height: 1.7; color: var(--text-secondary); margin-top: 16px; }

.contact-links { display: flex; flex-direction: column; gap: 16px; }

.contact-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 28px;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  transition: all 0.4s var(--ease-smooth);
  position: relative;
  overflow: hidden;
}

.contact-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,140,30,0.05), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.contact-link:hover::before { opacity: 1; }

.contact-link:hover {
  border-color: rgba(255, 140, 30, 0.3);
  transform: translateX(8px);
  box-shadow: 0 8px 30px var(--shadow);
}

.contact-link i { font-size: 1.2rem; color: var(--accent); width: 24px; text-align: center; }
.contact-link span { font-size: 0.9rem; font-weight: 500; color: var(--text-primary); }

/* =========================================
   EXPAND OVERLAY — Redesigned Two-Pane Modal
   (Design from Google Drive 'Ui designed' folder)
   ========================================= */
.expand-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-smooth);
}

.expand-overlay.active { opacity: 1; pointer-events: auto; }

.expand-overlay-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.expand-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  height: 85vh;
  max-height: 800px;
}

/* Close button — top-right, dark pill */
.expand-close {
  position: absolute;
  top: 16px; right: 16px; z-index: 50;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  transition: all 0.25s ease;
}

.expand-close:hover {
  background: rgba(0, 0, 0, 0.65);
  transform: scale(1.08);
}

/* Two-pane modal window */
.expand-book {
  width: 100%; height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border-radius: 2rem;
  box-shadow: 0 32px 80px rgba(0,0,0,0.35), 0 8px 32px rgba(0,0,0,0.15);
  overflow: hidden;
  /* No animation by default — only animate when overlay is active */
  opacity: 0;
  transform: scale(0.95) translateY(10px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.expand-overlay.active .expand-book {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* LEFT PANE — scrollable content */
.book-page-left {
  height: 100%;
  overflow-y: auto;
  padding: 48px 40px;
  background: #fff;
  border-right: 1px solid #f3f4f6;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}

.book-page-left::-webkit-scrollbar { width: 6px; }
.book-page-left::-webkit-scrollbar-track { background: transparent; }
.book-page-left::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }
.book-page-left::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* RIGHT PANE — image / content area */
.book-page-right {
  height: 100%;
  position: relative;
  background: #f3f4f6;
  overflow: hidden;
}

/* Image pane & placeholder */
.modal-image-pane {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-right-content {
  align-items: flex-start;
  overflow-y: auto;
  padding: 0;
}

.modal-right-inner {
  padding: 48px 40px;
  width: 100%;
}

.modal-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #9ca3af;
  text-align: center;
  padding: 24px;
}

.modal-image-placeholder p {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #9ca3af;
}

/* ---- LEFT PANE TYPOGRAPHY (new design) ---- */

/* Eyebrow / category line */
.book-page .bp-category {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.book-page .bp-category-text {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.book-page .bp-category-line {
  flex: 1;
  height: 1px;
  background: #fed7aa;
}

/* Title */
.book-page .bp-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 700;
  line-height: 1.1;
  color: #111827;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

/* Core tag pills (date, budget, org) */
.book-page .bp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.book-page .bp-meta-tag {
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid #fed7aa;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
}

/* Description text */
.book-page .bp-text {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #4b5563;
  font-weight: 300;
  margin-bottom: 16px;
}

/* Location / country pills */
.book-page .bp-locations {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.book-page .bp-location-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  color: #f97316;
}

.book-page .bp-location-pill svg { flex-shrink: 0; }

/* Divider */
.book-page .bp-divider {
  width: 100%;
  height: 1px;
  background: #f3f4f6;
  margin-bottom: 24px;
}

/* Stats cards */
.book-page .bp-stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.book-page .bp-stat {
  padding: 20px;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.book-page .bp-stat-num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 4px;
}

.book-page .bp-stat-label {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9ca3af;
}

/* Direct link */
.book-page .bp-direct-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 40px;
  transition: color 0.2s;
}

.book-page .bp-direct-link:hover { color: var(--accent-dark); }

/* Section title */
.book-page .bp-section-title {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

/* Related content chips */
.book-page .bp-related-wrap {
  margin-top: auto;
  padding-top: 16px;
}

.book-page .bp-related-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.book-page .bp-related-chip {
  padding: 6px 14px;
  background: linear-gradient(135deg, #FF8C1E, #FFA94D);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  border: 1px solid rgba(255,140,30,0.55);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 2px 8px rgba(255,140,30,0.18);
}

.book-page .bp-related-chip:hover {
  background: linear-gradient(135deg, #E07410, #FF8C1E);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,140,30,0.32);
}

/* Quote block */
.book-page .bp-quote {
  padding: 18px 22px;
  margin: 16px 0;
  background: linear-gradient(135deg, rgba(255,140,30,0.06), rgba(255,255,255,0.5));
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-family: var(--font-script);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.7;
  color: #111827;
}

/* List */
.book-page .bp-list {
  list-style: none;
  margin-bottom: 16px;
}

.book-page .bp-list li {
  font-size: 0.88rem;
  line-height: 1.7;
  color: #4b5563;
  padding: 6px 0 6px 20px;
  position: relative;
  border-bottom: 1px solid #f3f4f6;
}

.book-page .bp-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 14px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Dark theme overrides for new modal */
[data-theme="dark"] .expand-book {
  background: #14141e;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 8px 32px rgba(0,0,0,0.3);
}

[data-theme="dark"] .book-page-left {
  background: #14141e;
  border-right-color: rgba(255,255,255,0.06);
}

[data-theme="dark"] .book-page-right {
  background: #0c0c18;
}

[data-theme="dark"] .modal-image-placeholder p {
  color: #6a6a80;
}

[data-theme="dark"] .book-page .bp-title {
  color: #e8e4f0;
}

[data-theme="dark"] .book-page .bp-text {
  color: #a0a0b8;
}

[data-theme="dark"] .book-page .bp-stat {
  background: #1a1a2e;
  border-color: rgba(255,255,255,0.06);
  box-shadow: none;
}

[data-theme="dark"] .book-page .bp-divider {
  background: rgba(255,255,255,0.06);
}

[data-theme="dark"] .book-page .bp-location-pill {
  background: rgba(255,140,30,0.1);
  border-color: rgba(255,140,30,0.3);
  color: #ffaa50;
}

[data-theme="dark"] .book-page .bp-quote {
  background: linear-gradient(135deg, rgba(255,140,30,0.08), rgba(20,20,30,0.5));
  color: #e8e4f0;
}

[data-theme="dark"] .book-page .bp-list li {
  color: #a0a0b8;
  border-bottom-color: rgba(255,255,255,0.05);
}

[data-theme="dark"] .book-page .bp-related-chip {
  background: linear-gradient(135deg, rgba(255,140,30,0.85), rgba(255,170,80,0.95));
  border-color: rgba(255,140,30,0.55);
  color: #fff;
}

[data-theme="dark"] .book-page .bp-related-chip:hover {
  background: linear-gradient(135deg, #FF8C1E, #FFA94D);
}

[data-theme="dark"] .book-page .bp-meta-tag {
  border-color: rgba(255,140,30,0.4);
  color: var(--accent);
}

[data-theme="dark"] .book-page .bp-category-line {
  background: rgba(255,140,30,0.2);
}

[data-theme="dark"] .expand-close {
  background: rgba(0,0,0,0.5);
  border-color: rgba(255,255,255,0.2);
  color: #fff;
}

[data-theme="dark"] .modal-right-content {
  background: rgba(20,20,30,0.95);
}

[data-theme="dark"] .modal-right-inner {
  color: #e8e4f0;
}

/* =========================================
   FOOTER
   ========================================= */
.footer {
  padding: 48px 0;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.footer[hidden] { display: none; }

.footer-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.footer p { font-size: 0.82rem; color: var(--text-secondary); }
.footer-sub { margin-top: 8px; font-size: 0.72rem !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }

/* Footer legal links + Privacy/Terms modal (Round 11 — security hardening) */
.footer-legal { margin-top: 14px !important; font-size: 0.78rem !important; display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.footer-legal-link { color: var(--text-secondary); text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.footer-legal-link:hover { color: var(--accent); border-bottom-color: currentColor; }
.footer-legal-sep { color: var(--text-muted); opacity: 0.6; }

.legal-modal { position: fixed; inset: 0; z-index: 6000; display: none; align-items: center; justify-content: center; padding: 24px; }
.legal-modal.open { display: flex; }
.legal-backdrop { position: absolute; inset: 0; background: rgba(8, 8, 16, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.legal-sheet { position: relative; width: 100%; max-width: 680px; max-height: 82vh; overflow-y: auto; background: var(--bg-secondary); border: 1px solid var(--border-strong); border-radius: 16px; padding: 34px 34px 38px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); animation: legalIn .25s ease; }
@keyframes legalIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.legal-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-strong); background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.legal-close:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); }
.legal-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.7rem; margin: 0 0 6px; color: var(--text-primary); }
.legal-body { font-size: 0.9rem; line-height: 1.7; color: var(--text-secondary); }
.legal-body h3 { font-size: 0.98rem; margin: 20px 0 6px; color: var(--text-primary); }
.legal-body p { margin: 0 0 12px; }
.legal-body a { color: var(--accent); }
.legal-updated { font-size: 0.78rem; opacity: 0.6; margin-top: 18px !important; }

/* =========================================
   SCROLL REVEAL ANIMATIONS
   ========================================= */
[data-scroll-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

[data-scroll-reveal="right"] {
  opacity: 0;
  transform: translateX(40px);
}

[data-scroll-reveal].revealed {
  opacity: 1;
  transform: translate(0, 0);
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0;
  }

  .hero-globe-container {
    max-width: 420px;
    margin: 0 auto;
    order: -1;
  }

  .hero-content {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-desc { text-align: center; }
  .hero-stats { justify-content: center; }
  .hero-social-bar { display: none; }
  .hero-scroll-indicator { display: none; }

  .research-grid { grid-template-columns: repeat(2, 1fr); }

  .expand-container { width: 95vw; height: 85vh; }
}

@media (max-width: 768px) {
  .navbar {
    width: calc(100% - 24px);
    top: 10px;
    border-radius: 16px;
  }

  .nav-links {
    display: none;
    position: fixed;
    top: 80px; left: 12px; right: 12px;
    background: var(--nav-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    flex-direction: column;
    padding: 20px;
    gap: 8px;
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.3);
  }

  .nav-links.open { display: flex; }
  .nav-hamburger { display: flex; }
  .btn-get-in-touch span { display: none; }
  .btn-get-in-touch i { margin: 0; }
  .btn-get-in-touch { padding: 8px 14px; }

  .logo-surname { display: none; }
  .logo-name { font-size: 0.9rem; }

  .hero-inner {
    padding-top: 100px;
    min-height: auto;
  }

  .hero-globe-container {
    max-width: 300px;
  }

  .hero-line-1 { font-size: 1.6rem; }
  .hero-line-2 { font-size: 2.2rem; }

  .hero-actions { flex-direction: column; width: 100%; }
  .hero-btn { justify-content: center; width: 100%; }

  .hero-stats { flex-wrap: wrap; gap: 16px; }
  .hero-stat-divider { display: none; }

  .about-grid, .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
    padding: 32px 24px;
    gap: 24px;
  }

  .research-grid { grid-template-columns: 1fr; }
  .project-title { font-size: 1.15rem; }
  .pub-item { flex-direction: column; gap: 8px; }
  .pub-expand-btn { align-self: flex-start; }

  .expand-book { grid-template-columns: 1fr; grid-template-rows: 1fr auto; border-radius: 1.5rem; }
  .book-page-left { border-right: none; border-bottom: 1px solid #f3f4f6; max-height: 55vh; padding: 28px 24px; }
  .book-page-right { min-height: 200px; }
  .expand-container { width: 96vw; height: 90vh; max-height: none; }
}

@media (max-width: 480px) {
  .hero-line-1 { font-size: 1.3rem; }
  .hero-line-2 { font-size: 1.8rem; }
  .section-title { font-size: 1.8rem; }
  .stats-bar { grid-template-columns: 1fr 1fr; }
  .stat-number { font-size: 2.2rem; }
}

/* =========================================
   LIGHT THEME specific overrides
   ========================================= */
[data-theme="light"] .hero { background: var(--bg-primary); }
[data-theme="light"] .hero-orb-1 { background: radial-gradient(circle, rgba(208,104,0,0.15), transparent 70%); }
[data-theme="light"] .hero-orb-2 { background: radial-gradient(circle, rgba(100,60,150,0.1), transparent 70%); }
[data-theme="light"] .hero-orb-3 { background: radial-gradient(circle, rgba(208,130,50,0.1), transparent 70%); }
[data-theme="light"] .particle { background: rgba(208, 104, 0, 0.3); }
[data-theme="light"] .loader-screen { background: #f5efe6; }
[data-theme="light"] .loader-letter { color: var(--accent); }

/* === LIGHT THEME — Expand Overlay (new modal is already light-first) === */
[data-theme="light"] .expand-overlay-bg {
  background: rgba(17, 24, 39, 0.45);
}
/* Research cards in light theme */
[data-theme="light"] .research-card {
  background: rgba(255,255,255,0.65);
  border-color: rgba(44,24,16,0.08);
}
[data-theme="light"] .research-card:hover {
  background: rgba(255,255,255,0.85);
  border-color: rgba(208,104,0,0.2);
  box-shadow: 0 20px 50px rgba(44,24,16,0.1), 0 0 30px rgba(208,104,0,0.04);
}
[data-theme="light"] .card-icon {
  background: rgba(208,104,0,0.08);
}
/* Expand button in light theme */
[data-theme="light"] .expand-btn {
  border-color: var(--accent);
  color: var(--accent);
}
[data-theme="light"] .expand-btn:hover {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 16px rgba(208,104,0,0.2);
}
/* Stats bar light theme */
[data-theme="light"] .stats-bar {
  background: rgba(255,255,255,0.5);
  border-color: rgba(44,24,16,0.08);
}
/* Timeline light theme */
[data-theme="light"] .timeline::before {
  background: rgba(44,24,16,0.12);
}
[data-theme="light"] .timeline-item::before {
  border-color: var(--bg-secondary);
}

/* =========================================
   GLOBAL FOOTPRINT SECTION (.gf-*)
   ========================================= */
.tc-section {
  padding: var(--section-padding) 0;
  background: var(--bg-primary);
  position: relative;
}

.gf-wrapper {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Header */
.gf-header {
  margin-bottom: 48px;
}

.gf-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.gf-label-num {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.gf-label-line {
  width: 40px;
  height: 1px;
  background: var(--accent);
}

.gf-label-text {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.gf-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.gf-title em {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

.gf-subtitle {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 720px;
}

/* Filter Pills */
.gf-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.gf-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 30px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.3s var(--ease-smooth);
}

.gf-filter:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.gf-filter.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.gf-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: rgba(255,255,255,0.15);
  font-size: 0.68rem;
  font-weight: 700;
}

.gf-filter:not(.active) .gf-filter-count {
  background: rgba(255,140,30,0.08);
  color: var(--accent);
}

/* Card Grid */
.gf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

/* Country Card */
.gf-card {
  position: relative;
  padding: 28px 24px 22px;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.35s var(--ease-smooth);
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  animation: gfCardIn 0.45s var(--ease-out) forwards;
  border-top: 3px solid var(--card-accent, var(--accent));
}

@keyframes gfCardIn {
  to { opacity: 1; transform: translateY(0); }
}

.gf-card-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.gf-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 44px var(--shadow-strong), 0 0 0 1px rgba(255,140,30,0.12);
  border-color: rgba(255,140,30,0.25);
}

.gf-card.gf-card-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 16px 44px var(--shadow-strong);
}

.gf-card-hover-line {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--card-accent, var(--accent)), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}

.gf-card:hover .gf-card-hover-line { transform: scaleX(1); }

.gf-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.gf-card-flag {
  font-size: 2.2rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}
.gf-card-flag img { display: block; }

.gf-card-region-badge {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 3px 10px;
  border: 1px solid rgba(255,140,30,0.25);
  border-radius: 12px;
  background: rgba(255,140,30,0.06);
}

.gf-card-body { margin-bottom: 16px; }

.gf-card-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.gf-card-org {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  line-height: 1.4;
}

.gf-card-years {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.gf-card-years i { color: var(--accent); font-size: 0.68rem; }

.gf-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.gf-card-role {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 8px;
}

.gf-card-arrow {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 0.7rem;
  flex-shrink: 0;
  transition: all 0.3s var(--ease-smooth);
}

.gf-card:hover .gf-card-arrow {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateX(3px);
}

/* Detail Panel */
.gf-detail-panel {
  position: relative;
  padding: 40px 48px;
  background: var(--card-gradient);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  margin-bottom: 40px;
  display: none;
  backdrop-filter: blur(12px);
  overflow: hidden;
  animation: gfDetailIn 0.4s var(--ease-out) forwards;
}

@keyframes gfDetailIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.gf-detail-panel.open {
  display: block;
}

.gf-detail-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--detail-accent, var(--accent)), transparent);
}

.gf-detail-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--ease-smooth);
}

.gf-detail-close:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: rotate(90deg);
}

.gf-detail-inner {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: start;
}

.gf-detail-flag {
  width: 96px;
  height: 72px;
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 18px rgba(0,0,0,0.32);
  line-height: 1;
}
.gf-detail-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gf-detail-name {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.1;
}

.gf-detail-region {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.gf-detail-badges {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gf-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.02);
}

.gf-badge i { color: var(--accent); font-size: 0.72rem; }

.gf-detail-desc {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.gf-detail-highlights {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.gf-detail-highlights li {
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.gf-detail-highlights li i {
  color: var(--accent);
  font-size: 0.72rem;
  flex-shrink: 0;
}

/* Stats Row */
.gf-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 40px;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: 16px;
  text-align: center;
  margin-top: 16px;
}

.gf-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 8px;
}

.gf-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Responsive GF */
@media (max-width: 768px) {
  .gf-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .gf-detail-inner { grid-template-columns: 1fr; gap: 24px; }
  .gf-detail-panel { padding: 28px 20px; }
  .gf-detail-highlights { grid-template-columns: 1fr; }
  .gf-stats-row { grid-template-columns: repeat(2, 1fr); padding: 28px 20px; gap: 16px; }
}

@media (max-width: 480px) {
  .gf-grid { grid-template-columns: 1fr; }
  .gf-filters { gap: 8px; }
  .gf-filter { padding: 6px 12px; font-size: 0.72rem; }
}

/* =========================================
   NETWORK DIAGRAM SECTION (.nd-*)
   ========================================= */
.nd-section {
  padding: var(--section-padding) 0;
  background: var(--bg-secondary);
  position: relative;
}

.nd-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Header */
.nd-header {
  margin-bottom: 48px;
}

.nd-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.nd-label-num  { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; color: var(--accent); }
.nd-label-line { width: 40px; height: 1px; background: var(--accent); }
.nd-label-text { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }

.nd-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.nd-title em { font-family: var(--font-script); font-style: italic; color: var(--accent); font-weight: 400; }

.nd-subtitle {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 700px;
}

/* Main Layout */
.nd-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
}

/* Sidebar */
.nd-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 90px;
}

.nd-sidebar-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.nd-sidebar-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (max-width: 1280px) {
  .nd-sidebar-split {
    grid-template-columns: 1fr;
  }
}

.nd-sidebar-block {
  padding: 20px;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(8px);
}

.nd-sidebar-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nd-sidebar-title i { color: var(--accent); }

/* Filter Buttons */
.nd-filter-group { display: flex; flex-direction: column; gap: 6px; }

.nd-filter-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s var(--ease-smooth);
  text-align: left;
}

.nd-filter-btn:hover {
  background: rgba(255,140,30,0.06);
  color: var(--text-primary);
}

.nd-filter-btn.active {
  background: rgba(255,140,30,0.1);
  border-color: rgba(255,140,30,0.2);
  color: var(--accent);
}

.nd-filter-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nd-dot-all {
  background: linear-gradient(135deg, #6c3fc5, #0e8a8a, #1a7a4a, #c0305a, #1a5fa8);
}

/* Layout Buttons */
.nd-layout-btns { display: flex; gap: 8px; }

.nd-layout-btn {
  flex: 1;
  padding: 8px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s var(--ease-smooth);
  text-align: center;
}

.nd-layout-btn:hover { border-color: var(--accent); color: var(--accent); }
.nd-layout-btn.active { background: rgba(255,140,30,0.12); border-color: var(--accent); color: var(--accent); }

/* Stats Mini */
.nd-stats-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.nd-stat-mini { text-align: center; }
.nd-stat-num { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--accent); line-height: 1; }
.nd-stat-lbl { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; display: block; }

/* ── Quick Jump directory: search input ─────────────────────────────── */
.nd-dir-search-wrap {
  position: relative;
  margin-bottom: 10px;
}
.nd-dir-search-icon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 11px;
  pointer-events: none;
}
.nd-dir-search-input {
  width: 100%;
  padding: 7px 10px 7px 28px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(16, 22, 32, 0.62);
  color: var(--text-primary);
  font-size: 12px;
  outline: none;
  transition: border-color .2s ease, background .2s ease;
}
.nd-dir-search-input:focus {
  border-color: rgba(255,140,30,0.55);
  background: rgba(16, 22, 32, 0.85);
}

/* ── Quick Jump directory: collapsible groups ───────────────────────── */
.nd-node-directory {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Bounded: never overruns the sidebar / viewport */
  max-height: min(620px, calc(100vh - 260px));
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  scroll-padding-top: 44px;
  scroll-behavior: smooth;
}
/* Make each group's HEADER sticky inside the scrollable directory so it
   never gets clipped when the user scrolls long lists (fixes overlap bug). */
.nd-node-directory .nd-dir-group {
  /* Stack groups vertically; ensure each is its own scroll context */
  position: relative;
}
.nd-node-directory .nd-dir-group-header {
  /* Non-sticky: a sticky header covered (sliced) the tail items of the
     previous group as they scrolled under it. With per-group internal scroll
     removed, headers can scroll normally with their content — nothing is ever
     hidden behind a header. */
  position: relative;
  z-index: 1;
}

.nd-dir-group {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  background: rgba(12, 16, 24, 0.55);
  overflow: hidden;
}

.nd-dir-group-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease;
}
.nd-dir-group-header:hover {
  background: rgba(255,140,30,0.06);
}
.nd-dir-group-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.18);
}
.nd-dir-group-icon {
  color: var(--text-muted);
  font-size: 11px;
  width: 12px;
  text-align: center;
}
.nd-dir-group-label {
  flex: 1;
  text-align: left;
  letter-spacing: 0.02em;
}
.nd-dir-group-count {
  font-size: 10.5px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.06);
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 600;
}
.nd-dir-group-chev {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform .25s ease;
}
.nd-dir-group.is-open .nd-dir-group-chev {
  transform: rotate(180deg);
}

.nd-dir-group-body {
  display: none;
  flex-direction: column;
  gap: 7px;
  padding: 8px 8px 12px 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  /* Each open section is its OWN bounded scroll box — scroll up/down inside
     the Projects / Organisations / etc. dropdown. Headers are non-sticky
     (see above) so items are never sliced/covered at the scroll edge. */
  max-height: 230px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,140,30,0.35) transparent;
}
.nd-dir-group-body::-webkit-scrollbar { width: 5px; }
.nd-dir-group-body::-webkit-scrollbar-track { background: transparent; }
.nd-dir-group-body::-webkit-scrollbar-thumb {
  background: rgba(255,140,30,0.30);
  border-radius: 3px;
}
.nd-dir-group-body::-webkit-scrollbar-thumb:hover { background: rgba(255,140,30,0.55); }
.nd-dir-group.is-open .nd-dir-group-body {
  display: flex;
}

.nd-dir-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 4px;
  margin: 0;
}

.nd-node-jump {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(16, 22, 32, 0.55);
  color: var(--text-secondary);
  border-radius: 7px;
  padding: 9px 11px;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: all .2s ease;
  line-height: 1.4;
  /* Full label always visible — wrap long names instead of clipping. */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.nd-node-jump:hover {
  border-color: rgba(255,140,30,0.5);
  color: var(--text-primary);
  background: rgba(255,140,30,0.12);
}

/* Custom scrollbar for the directory */
.nd-node-directory::-webkit-scrollbar { width: 6px; }
.nd-node-directory::-webkit-scrollbar-track { background: transparent; }
.nd-node-directory::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 3px;
}
.nd-node-directory::-webkit-scrollbar-thumb:hover {
  background: rgba(255,140,30,0.4);
}

/* Node Info Panel */
.nd-node-info {
  padding: 18px 20px;
  background: var(--card-gradient);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.28s var(--ease-smooth), transform 0.28s var(--ease-smooth);
}

.nd-node-info.nd-node-info-visible {
  opacity: 1;
  transform: translateY(0);
}

.nd-node-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.nd-node-info-type {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.nd-node-info-close {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.nd-node-info-close:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.nd-node-info-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.3;
}

.nd-node-info-detail {
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ===========================================================
   Session 6 / FIX 2 + 3 — NODE INFO POPUP: TAGS & EXT-LINKS
   Renders the backend-supplied tags and external links inside
   the network-diagram node info popup. Each tag is a clickable
   chip styled to match the rest of the system (orange accent,
   subtle glass background) — no plain-text labels.
   =========================================================== */
.nd-node-tags,
.nd-node-extlinks {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
}
.nd-node-tags-label,
.nd-node-extlinks-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffb066;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nd-node-tags-label i,
.nd-node-extlinks-label i { font-size: 10px; opacity: .85; }
.nd-node-tags-list,
.nd-node-extlinks-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nd-node-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,140,30,.32);
  background: linear-gradient(135deg, rgba(255,140,30,.16), rgba(255,140,30,.08));
  color: #ffd4a3;
  font-size: 11.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
  max-width: 100%;
}
.nd-node-tag i { font-size: 9.5px; opacity: .85; }
.nd-node-tag span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.nd-node-tag:hover {
  transform: translateY(-1px);
  border-color: rgba(255,140,30,.55);
  background: linear-gradient(135deg, rgba(255,140,30,.28), rgba(255,140,30,.16));
  color: #ffe7ce;
  box-shadow: 0 4px 12px rgba(255,140,30,.18);
}
.nd-node-tag:active { transform: translateY(0); }
.nd-node-tag:focus-visible {
  outline: 2px solid rgba(255,140,30,.6);
  outline-offset: 2px;
}

.nd-node-extlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(16,22,32,0.65);
  color: #e8eaf0;
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  max-width: 100%;
}
.nd-node-extlink i { font-size: 9.5px; opacity: .85; color: #ffb066; }
.nd-node-extlink span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.nd-node-extlink:hover {
  transform: translateY(-1px);
  border-color: rgba(255,140,30,.45);
  background: rgba(40,28,16,0.85);
}

/* Tag-jump result panel slot (when tag click injects a related-content
   list inline below the tags). Adds a subtle "fresh result" feel. */
.nd-tag-jump-result,
.kg-tag-panel { animation: ndTagPanelIn .22s ease-out; }
@keyframes ndTagPanelIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   RELATED-CONTENT PANEL (Session 22 redesign)
   Shared by content popups, network-node popups and the timeline
   panel (all via KGInterconnect.renderPanelFor → renderInterlinkPanel).
   Class-based + theme-aware (was hardcoded dark inline styles), with a
   bounded SCROLL container so 10+ related items scroll inside the panel.
   ============================================================ */
.kg-rel-panel {
  margin-top: 16px; padding: 14px 14px 12px; border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
}
.kg-rel-panel-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent, #ff8c1e); margin-bottom: 12px;
}
.kg-rel-count {
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 7px; border-radius: 999px;
  background: rgba(255,140,30,0.16); color: var(--accent, #ff8c1e);
}
.kg-rel-cards {
  display: flex; flex-direction: column; gap: 8px;
  max-height: clamp(220px, 42vh, 360px);
  overflow-y: auto; overflow-x: hidden;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,140,30,0.4) transparent;
}
.kg-rel-cards::-webkit-scrollbar { width: 8px; }
.kg-rel-cards::-webkit-scrollbar-thumb { background: rgba(255,140,30,0.38); border-radius: 999px; }
.kg-rel-cards::-webkit-scrollbar-track { background: transparent; }
/* subtle "more below" affordance only when the list actually scrolls */
.kg-rel-cards[data-count="0"] { display: none; }
.kg-rel-card {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.75);
  color: var(--text-primary, #1a1a2e);
  font-size: 13px; line-height: 1.3; border-radius: 12px;
  padding: 9px 12px; cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.kg-rel-card:hover {
  border-color: var(--accent, #ff8c1e);
  background: rgba(255,140,30,0.08);
  transform: translateX(2px);
  box-shadow: 0 4px 14px rgba(255,140,30,0.14);
}
.kg-rel-ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,140,30,0.14); color: var(--accent, #ff8c1e); font-size: 12px;
}
.kg-rel-label {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.kg-rel-arrow { flex: 0 0 auto; font-size: 10px; opacity: .4; }

/* Dark theme surfaces */
[data-theme="dark"] .kg-rel-panel { border-color: rgba(255,255,255,0.10); background: rgba(255,255,255,0.03); }
[data-theme="dark"] .kg-rel-card  { border-color: rgba(255,255,255,0.10); background: rgba(16,22,32,0.72); color: #e8eaf0; }
[data-theme="dark"] .kg-rel-card:hover { background: rgba(255,140,30,0.16); border-color: var(--accent, #ff8c1e); }

@media (prefers-reduced-motion: reduce) {
  .kg-rel-card { transition: none; }
  .kg-rel-card:hover { transform: none; }
}

/* Light theme adaptations for the tag/link chips */
[data-theme="light"] .nd-node-tags,
[data-theme="light"] .nd-node-extlinks {
  border-color: rgba(17,24,39,0.10);
  background: rgba(17,24,39,0.03);
}
[data-theme="light"] .nd-node-tag {
  color: #b85a00;
  background: linear-gradient(135deg, rgba(208,104,0,.14), rgba(208,104,0,.06));
  border-color: rgba(208,104,0,.32);
}
[data-theme="light"] .nd-node-tag:hover {
  color: #8a4400;
  background: linear-gradient(135deg, rgba(208,104,0,.22), rgba(208,104,0,.10));
}
[data-theme="light"] .nd-node-extlink {
  background: rgba(255,255,255,0.85);
  border-color: rgba(17,24,39,0.14);
  color: #1f2937;
}
[data-theme="light"] .nd-node-extlink:hover {
  border-color: rgba(208,104,0,.38);
  background: rgba(255,247,238,0.95);
}

/* Canvas Wrap */
.nd-canvas-wrap {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card-gradient);
  overflow: hidden;
  backdrop-filter: blur(8px);
  min-height: 520px;
}

.nd-hint {
  position: absolute;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  padding: 6px 16px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
  transition: opacity 0.5s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nd-svg { display: block; width: 100%; }

/* SVG node/link styles (inline via D3 – these are fallback/overrides) */
.nd-link {
  stroke-linecap: round;
  transition: stroke 0.22s ease, stroke-width 0.22s ease, opacity 0.22s ease;
}
.nd-link-label { font-family: var(--font-body); pointer-events: none; user-select: none; }
.nd-node { cursor: grab; }
.nd-node:active { cursor: grabbing; }
.nd-node-label { font-family: var(--font-body); user-select: none; pointer-events: none; }

/* ===========================================================
   Session 6 / FIX 4 — POLISHED NODE VISUALS
   Pure SVG visuals get refined transitions so the redesigned
   aura, ring, and circle layers feel premium and smooth. The
   layout / structure / hit-testing are unchanged — this only
   adds animation polish on top of what JS already renders.
   =========================================================== */
.nd-node .nd-circle,
.nd-node .nd-ring,
.nd-node .nd-aura,
.nd-node .nd-highlight,
.nd-node .nd-shine,
.nd-node .nd-node-label {
  transition: opacity 0.22s ease, stroke-width 0.22s ease, transform 0.25s cubic-bezier(.16,.84,.44,1);
}
/* Lift the node slightly on hover — feels tactile without affecting
   the underlying force layout (transform-origin centred via translate). */
.nd-node.nd-node-hover .nd-circle {
  stroke-width: 2.4;
  filter: brightness(1.06) saturate(1.08);
}
.nd-node.nd-node-hover .nd-ring {
  stroke-width: 2.4;
  /* gentle pulse */
  animation: ndRingPulse 1.6s ease-in-out infinite;
}
@keyframes ndRingPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.06); opacity: 0.85; }
}
/* Hovered node label gets a touch brighter for readability */
.nd-node.nd-node-hover .nd-node-label { fill: #ffffff; }

/* Light theme — slightly less aggressive shadow + more saturated rim */
[data-theme="light"] .nd-node .nd-highlight { fill: rgba(255,255,255,0.32); }
[data-theme="light"] .nd-node .nd-shine     { fill: rgba(255,255,255,0.55); }

/* Zoom Controls */
.nd-zoom-controls {
  position: absolute;
  bottom: 16px; right: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 10;
}

.nd-zoom-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--glass);
  color: var(--text-secondary);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: all 0.25s ease;
}

.nd-zoom-btn:hover {
  background: rgba(255,140,30,0.15);
  color: var(--accent);
  border-color: rgba(255,140,30,0.3);
}

/* Responsive ND */
@media (max-width: 1024px) {
  .nd-layout { grid-template-columns: 1fr; }
  .nd-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .nd-sidebar-block { flex: 1; min-width: 180px; }
}

@media (max-width: 768px) {
  .nd-sidebar { flex-direction: column; }
  .nd-sidebar-block { width: 100%; }
  .nd-stats-mini { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================
   COUNTRIES OF EXPERIENCE — Notion-Style
   ========================================= */
.countries-section { background: var(--bg-secondary); }

.countries-intro {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 720px;
  margin-bottom: 40px;
}

.countries-notion-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Region Block — Notion collapsible toggle */
.notion-region-block {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.35s var(--ease-smooth);
  backdrop-filter: blur(8px);
}

.notion-region-block:hover {
  border-color: rgba(255,140,30,0.15);
}

.notion-region-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  cursor: pointer;
  transition: background 0.25s ease;
  user-select: none;
}

.notion-region-header:hover {
  background: rgba(255,140,30,0.04);
}

.notion-region-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(255,140,30,0.1);
  color: var(--accent);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.notion-region-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.notion-region-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(255,140,30,0.1);
  border: 1px solid rgba(255,140,30,0.2);
  padding: 2px 10px;
  border-radius: 12px;
  letter-spacing: 0.05em;
}

.notion-region-toggle {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  transition: all 0.3s var(--ease-smooth);
}

.notion-region-toggle:hover {
  background: rgba(255,140,30,0.1);
  color: var(--accent);
  border-color: var(--accent);
}

.notion-region-block .notion-region-toggle i {
  transition: transform 0.35s var(--ease-smooth);
}

.notion-region-block.collapsed .notion-region-toggle i {
  transform: rotate(-90deg);
}

.notion-region-content {
  max-height: 800px;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-smooth), opacity 0.3s ease, padding 0.4s ease;
  opacity: 1;
  padding: 0 24px 16px;
}

.notion-region-block.collapsed .notion-region-content {
  max-height: 0;
  opacity: 0;
  padding: 0 24px;
}

/* Country Row — Notion table-like row */
.notion-country-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.notion-country-row {
  display: grid;
  grid-template-columns: 48px 36px 1fr 120px 180px 32px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s var(--ease-smooth);
  border-bottom: 1px solid var(--border);
}
/* Country ISO code badge */
.notion-country-code {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  padding: 3px 6px;
  text-align: center;
  font-family: var(--font-mono, monospace);
  line-height: 1;
  text-transform: uppercase;
  transition: all 0.25s ease;
}
.notion-country-row:hover .notion-country-code {
  background: rgba(255,140,30,0.1);
  border-color: rgba(255,140,30,0.35);
  color: var(--accent);
}

.notion-country-row:last-child { border-bottom: none; }

.notion-country-row:hover {
  background: rgba(255,140,30,0.06);
  transform: translateX(4px);
}

.notion-country-flag {
  font-size: 1.9rem;
  line-height: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  flex-shrink: 0;
}
.notion-country-row:hover .notion-country-flag {
  transform: scale(1.12);
  box-shadow: 0 4px 16px rgba(255,140,30,0.22);
  border-color: rgba(255,140,30,0.3);
}

.notion-country-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.notion-country-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.notion-country-role {
  font-size: 0.78rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notion-country-years {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255,255,255,0.03);
  white-space: nowrap;
}

.notion-country-org {
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notion-country-arrow {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  font-size: 0.65rem;
  transition: all 0.3s var(--ease-smooth);
  flex-shrink: 0;
}

.notion-country-row:hover .notion-country-arrow {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateX(2px);
}

@media (max-width: 768px) {
  .notion-country-row {
    grid-template-columns: 40px 28px 1fr 28px;
  }
  .notion-country-years, .notion-country-org { display: none; }
}

/* =========================================
   COUNTRIES — Compact horizontal carousel
   - Region tabs at the top
   - Horizontal scrolling card rail (drag/wheel/tap-arrow)
   - Vertical page scroll is never blocked
   ========================================= */
.ccarousel {
  position: relative;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 18px 14px;
  backdrop-filter: blur(8px);
}

.ccarousel-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.ccarousel-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.25s var(--ease-smooth);
  font-family: inherit;
}
.ccarousel-tab i { font-size: 0.78rem; opacity: 0.85; }
.ccarousel-tab .ccarousel-tab-count {
  font-style: normal;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(255,255,255,0.05);
  padding: 1px 7px;
  border-radius: 10px;
  letter-spacing: 0.04em;
}
.ccarousel-tab:hover {
  border-color: rgba(255,140,30,0.35);
  color: var(--text-primary);
  background: rgba(255,140,30,0.05);
}
.ccarousel-tab.active {
  background: rgba(255,140,30,0.12);
  border-color: rgba(255,140,30,0.55);
  color: var(--accent);
}
.ccarousel-tab.active .ccarousel-tab-count {
  background: rgba(255,140,30,0.18);
  color: var(--accent);
}

.ccarousel-viewport {
  position: relative;
  display: flex;
  align-items: stretch;
}

.ccarousel-rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 4px 12px;
  flex: 1;
  /* Touch behaviour: allow native horizontal pan, but never lock the page
     vertically — `pan-y` lets the user scroll the page even if their finger
     starts inside the rail. */
  touch-action: pan-x pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.ccarousel-rail::-webkit-scrollbar { display: none; }
.ccarousel-rail.is-dragging { cursor: grabbing; scroll-behavior: auto; }

.ccarousel-card {
  flex: 0 0 240px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: left;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.25s var(--ease-smooth), border-color 0.25s ease,
              background 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}
.ccarousel-card.hidden { display: none; }
.ccarousel-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,140,30,0.35);
  background: rgba(255,140,30,0.04);
  box-shadow: 0 12px 28px -10px rgba(0,0,0,0.5),
              0 0 0 1px rgba(255,140,30,0.1) inset;
}
.ccarousel-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ccarousel-card-flag {
  font-size: 1.7rem;
  line-height: 1;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transition: transform 0.25s ease;
  overflow: hidden;
  flex-shrink: 0;
}
.ccarousel-card-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 9px;
}
.ccarousel-card-flag.flag-img-failed { font-size: 1.7rem; }
.ccarousel-card:hover .ccarousel-card-flag { transform: scale(1.08); }
.ccarousel-card-code {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  padding: 3px 7px;
  font-family: var(--font-mono, monospace);
  text-transform: uppercase;
  transition: all 0.25s ease;
}
.ccarousel-card:hover .ccarousel-card-code {
  color: var(--accent);
  background: rgba(255,140,30,0.1);
  border-color: rgba(255,140,30,0.35);
}
.ccarousel-card-body { flex: 1; min-width: 0; }
.ccarousel-card-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 4px 0 4px;
  line-height: 1.2;
}
.ccarousel-card-role {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ccarousel-card-org {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.ccarousel-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ccarousel-card-years {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(255,255,255,0.03);
  white-space: nowrap;
}
.ccarousel-card-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.62rem;
  transition: all 0.3s var(--ease-smooth);
}
.ccarousel-card:hover .ccarousel-card-arrow {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateX(2px);
}

/* Nav arrow buttons */
.ccarousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(15,15,26,0.75);
  backdrop-filter: blur(6px);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: all 0.25s var(--ease-smooth);
  font-size: 0.75rem;
}
.ccarousel-nav:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.ccarousel-nav.disabled {
  opacity: 0.3;
  pointer-events: none;
}
.ccarousel-nav-prev { left: -6px; }
.ccarousel-nav-next { right: -6px; }

/* Progress bar at the bottom indicating scroll position */
.ccarousel-progress {
  height: 3px;
  width: 100%;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  margin-top: 4px;
  overflow: hidden;
}
.ccarousel-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(255,140,30,0.35), var(--accent));
  border-radius: 999px;
  transition: width 0.15s linear;
}

/* Edge fade hints — subtle gradient shadow on left/right of the rail */
.ccarousel-viewport::before,
.ccarousel-viewport::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 12px;
  width: 28px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.9;
}
.ccarousel-viewport::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg-secondary, rgba(11,11,20,0.6)) 0%, transparent 100%);
}
.ccarousel-viewport::after {
  right: 0;
  background: linear-gradient(-90deg, var(--bg-secondary, rgba(11,11,20,0.6)) 0%, transparent 100%);
}

@media (max-width: 768px) {
  .ccarousel { padding: 14px 12px 10px; }
  .ccarousel-card { flex-basis: 220px; padding: 14px; }
  .ccarousel-nav { display: none; }
  .ccarousel-tab { padding: 6px 11px; font-size: 0.72rem; }
}

/* Light theme support */
[data-theme="light"] .ccarousel { background: rgba(255,255,255,0.6); border-color: rgba(44,24,16,0.1); }
[data-theme="light"] .ccarousel-card { background: rgba(255,255,255,0.55); border-color: rgba(44,24,16,0.08); }
[data-theme="light"] .ccarousel-card:hover { background: rgba(208,104,0,0.06); }
[data-theme="light"] .ccarousel-nav { background: rgba(255,255,255,0.85); }

/* =========================================
   COUNTRY MODAL — Viewport Center
   ========================================= */
.country-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-smooth);
}

.country-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.country-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--expand-overlay);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.country-modal-container {
  position: relative;
  z-index: 2;
  width: 90vw;
  max-width: 640px;
  max-height: 80vh;
  background: var(--book-bg);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px var(--book-shadow), 0 0 0 1px rgba(255,140,30,0.08);
  transform: scale(0.9) translateY(30px);
  transition: transform 0.45s var(--ease-spring), opacity 0.35s ease;
  opacity: 0;
}

.country-modal-overlay.active .country-modal-container {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.country-modal-close {
  position: absolute;
  top: 16px; right: 16px; z-index: 10;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--book-bg);
  color: var(--text-primary);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s var(--ease-smooth);
}

.country-modal-close:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: rotate(90deg);
}

.country-modal-content {
  padding: 40px;
  overflow-y: auto;
  max-height: 80vh;
  scrollbar-width: thin;
}

.country-modal-content::-webkit-scrollbar { width: 4px; }
.country-modal-content::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }

/* Modal internal styles */
.cm-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.cm-flag { font-size: 3.5rem; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2)); }

.cm-title-block { flex: 1; }

.cm-name {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 6px;
}

.cm-region {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.cm-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.cm-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.02);
}

.cm-badge i { color: var(--accent); font-size: 0.75rem; }

.cm-desc {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.cm-highlights-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cm-highlights-title i { color: var(--accent); font-size: 0.8rem; }

.cm-highlights {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cm-highlights li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  transition: border-color 0.3s ease;
}

.cm-highlights li:hover { border-color: rgba(255,140,30,0.25); }
.cm-highlights li i { color: var(--accent); font-size: 0.72rem; flex-shrink: 0; }

@media (max-width: 640px) {
  .cm-highlights { grid-template-columns: 1fr; }
  .country-modal-content { padding: 28px 20px; }
  .cm-name { font-size: 1.5rem; }
  .cm-flag { font-size: 2.5rem; }
}

/* =========================================
   ARTICLES & BLOGS — Notion-Style
   ========================================= */
.articles-section { background: var(--bg-primary); }

.articles-intro {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 720px;
  margin-bottom: 40px;
}

.notion-articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
}

.notion-article-card {
  padding: 32px 28px;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  transition: all 0.35s var(--ease-smooth);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.notion-article-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}

.notion-article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 44px var(--shadow-strong), 0 0 0 1px rgba(255,140,30,0.12);
  border-color: rgba(255,140,30,0.2);
}

.notion-article-card:hover::before { transform: scaleX(1); }

.notion-article-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid rgba(255,140,30,0.2);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(255,140,30,0.06);
  margin-bottom: 16px;
}

.notion-article-badge i { font-size: 0.65rem; }

.notion-article-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 12px;
}

.notion-article-excerpt {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.notion-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.notion-article-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.notion-article-meta i { color: var(--accent); font-size: 0.68rem; }

@media (max-width: 768px) {
  .notion-articles-grid { grid-template-columns: 1fr; }
}

/* =========================================
   NOTION-STYLE ENHANCEMENTS for Projects & Publications
   ========================================= */
/* Projects — Enhanced Notion card feel */
.project-item {
  position: relative;
  overflow: hidden;
}

.project-item::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform 0.3s var(--ease-out);
}

.project-item:hover::after { transform: scaleY(1); }

/* Publication items — enhanced Notion feel */
.pub-item {
  position: relative;
}

.pub-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform 0.3s var(--ease-out);
  border-radius: 1px;
}

.pub-item:hover::before { transform: scaleY(1); }

/* =========================================
   NETWORK DIAGRAM — Search & Path highlight
   ========================================= */
.nd-search-wrap {
  position: relative;
}

.nd-search-input {
  width: 100%;
  padding: 10px 14px 10px 36px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-family: var(--font-body);
  outline: none;
  transition: all 0.3s var(--ease-smooth);
}

.nd-search-input::placeholder { color: var(--text-muted); }

.nd-search-input:focus {
  border-color: var(--accent);
  background: rgba(255,140,30,0.04);
  box-shadow: 0 0 0 3px rgba(255,140,30,0.1);
}

.nd-search-icon {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.75rem;
  pointer-events: none;
}

/* Path highlight legend */
.nd-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.nd-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.nd-legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── CLEAN SIDEBAR (single column, grouped & compact) ───────────────── */
.nd-sidebar-clean {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 90px;
}
.nd-sidebar-clean .nd-sidebar-block {
  padding: 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nd-sidebar-clean .nd-sidebar-title {
  margin-bottom: 0;
  font-size: 0.7rem;
}

/* Compact filter pills — wrap into 2-3 across */
.nd-filter-group-compact {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}
.nd-filter-group-compact .nd-filter-btn {
  flex: 1 1 calc(50% - 3px);
  padding: 6px 8px;
  font-size: 0.72rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  gap: 6px;
}
.nd-filter-group-compact .nd-filter-btn[data-group="all"] {
  flex: 1 1 100%;
}

.nd-country-filter-compact {
  margin-top: 0;
  padding: 7px 10px;
  font-size: 12px;
}

/* Country related panel only renders when a country is picked — small text */
.nd-sidebar-clean .nd-country-rel {
  margin-top: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 11px;
  color: rgba(230,232,239,0.78);
  line-height: 1.5;
}
.nd-sidebar-clean .nd-country-rel strong { color: #ffb066; }

/* View block: layout buttons + tight 4-up stat row */
.nd-view-block {
  gap: 10px;
}
.nd-stats-mini-compact {
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.nd-stats-mini-compact .nd-stat-num {
  font-size: 1.05rem;
}
.nd-stats-mini-compact .nd-stat-lbl {
  font-size: 0.6rem;
  margin-top: 2px;
}

/* Tighter quick-jump list — already capped, just shorten visually */
.nd-sidebar-clean .nd-node-directory {
  max-height: 420px;
}
/* Ensure node-jump items wrap labels and never overflow horizontally */
.nd-node-jump {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Hide the old legend rows in case any stale markup is around */
.nd-sidebar-clean .nd-legend { display: none; }

/* Color legend for node groups */
.nd-color-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-top: 4px;
}

.nd-color-legend-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.nd-color-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.nd-color-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.12);
}

/* Fullscreen toggle */
.nd-fullscreen-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--glass);
  color: var(--text-secondary);
  font-size: 0.78rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  transition: all 0.25s ease;
}

.nd-fullscreen-btn:hover {
  background: rgba(255,140,30,0.15);
  color: var(--accent);
  border-color: rgba(255,140,30,0.3);
}

.nd-canvas-wrap.nd-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  border-radius: 0;
  max-height: none;
  min-height: 100vh;
}

/* Tooltip for nodes */
.nd-tooltip {
  position: fixed;
  z-index: 10001;
  padding: 10px 16px;
  background: var(--book-bg);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 8px 24px var(--shadow-strong);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: 280px;
}

.nd-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.nd-tooltip-name {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.nd-tooltip-detail {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* =========================================
   ENHANCED ANIMATIONS
   ========================================= */
@keyframes modalScaleIn {
  from { transform: scale(0.85) translateY(40px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stagger animation for notion rows */
.notion-country-row {
  opacity: 0;
  animation: slideInUp 0.4s var(--ease-out) forwards;
}

.notion-country-row:nth-child(1)  { animation-delay: 0.02s; }
.notion-country-row:nth-child(2)  { animation-delay: 0.04s; }
.notion-country-row:nth-child(3)  { animation-delay: 0.06s; }
.notion-country-row:nth-child(4)  { animation-delay: 0.08s; }
.notion-country-row:nth-child(5)  { animation-delay: 0.10s; }
.notion-country-row:nth-child(6)  { animation-delay: 0.12s; }
.notion-country-row:nth-child(7)  { animation-delay: 0.14s; }
.notion-country-row:nth-child(8)  { animation-delay: 0.16s; }

/* Article cards stagger */
.notion-article-card {
  opacity: 0;
  animation: slideInUp 0.5s var(--ease-out) forwards;
}
.notion-article-card:nth-child(1) { animation-delay: 0.05s; }
.notion-article-card:nth-child(2) { animation-delay: 0.10s; }
.notion-article-card:nth-child(3) { animation-delay: 0.15s; }
.notion-article-card:nth-child(4) { animation-delay: 0.20s; }
.notion-article-card:nth-child(5) { animation-delay: 0.25s; }
.notion-article-card:nth-child(6) { animation-delay: 0.30s; }

/* =========================================
   REMOVE OLD TRAVEL CAROUSEL (replaced by Countries)
   ========================================= */
.tc-section { display: none; }

/* =========================================
   LIGHT THEME — New Section Overrides
   ========================================= */
[data-theme="light"] .countries-section { background: var(--bg-secondary); }
[data-theme="light"] .notion-region-block { background: rgba(255,255,255,0.6); border-color: rgba(44,24,16,0.1); }
[data-theme="light"] .notion-region-icon { background: rgba(208,104,0,0.1); }
[data-theme="light"] .notion-country-row:hover { background: rgba(208,104,0,0.06); }
[data-theme="light"] .notion-country-arrow { border-color: rgba(44,24,16,0.15); }
[data-theme="light"] .notion-country-row:hover .notion-country-arrow { background: var(--accent); color: #fff; border-color: var(--accent); }

[data-theme="light"] .country-modal-container { background: var(--bg-card); border-color: rgba(44,24,16,0.12); }
[data-theme="light"] .country-modal-close { background: var(--bg-card); }
[data-theme="light"] .cm-badge { background: rgba(255,255,255,0.5); border-color: rgba(44,24,16,0.1); }
[data-theme="light"] .cm-highlights li { background: rgba(255,255,255,0.4); border-color: rgba(44,24,16,0.08); }

[data-theme="light"] .notion-article-card { background: rgba(255,255,255,0.6); border-color: rgba(44,24,16,0.1); }
[data-theme="light"] .notion-article-badge { border-color: rgba(208,104,0,0.2); background: rgba(208,104,0,0.06); }

[data-theme="light"] .nd-search-input { background: rgba(255,255,255,0.5); border-color: rgba(44,24,16,0.12); color: var(--text-primary); }
[data-theme="light"] .nd-search-input:focus { border-color: var(--accent); background: rgba(208,104,0,0.04); }
[data-theme="light"] .nd-tooltip { background: var(--bg-card); border-color: rgba(44,24,16,0.12); }

/* =========================================
   PUBLICATION SECTION — Notion toggle enhancement
   ========================================= */
.pub-list {
  position: relative;
}

.pub-toggle-wrap {
  text-align: center;
  margin-top: 16px;
}

/* =========================================
   SMOOTH SCROLL — Section transitions
   ========================================= */
.section {
  will-change: transform;
}

/* Notion-style divider between sections */
.countries-section::before,
.articles-section::before {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: var(--accent);
  opacity: 0.3;
  margin: 0 auto 40px;
}

/* =========================================
   RESPONSIVE POLISH
   ========================================= */
@media (max-width: 480px) {
  .notion-region-header { padding: 14px 16px; gap: 10px; }
  .notion-region-title { font-size: 0.95rem; }
  .notion-country-row { padding: 12px 10px; gap: 10px; }
  .notion-country-flag { font-size: 1.3rem; }
  .notion-country-name { font-size: 0.88rem; }
  .country-modal-content { padding: 24px 16px; }
  .cm-name { font-size: 1.3rem; }
  .cm-flag { font-size: 2rem; }
  .cm-badges { gap: 6px; }
  .cm-badge { padding: 6px 10px; font-size: 0.75rem; }
  .notion-article-card { padding: 24px 20px; }
  .notion-article-title { font-size: 1rem; }
}

/* =============================================
   NOTION-STYLE REDESIGN — Projects, Publications,
   Articles & Blogs
   ============================================= */

/* Shared intro paragraph */
.notion-section-intro {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 720px;
  margin-bottom: 36px;
}

/* =============================================
   PROJECTS — Notion Roadmap Database
   ============================================= */

/* Database Wrapper */
.ndb-wrapper {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(8px);
}

/* Toolbar */
.ndb-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.ndb-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ndb-view-icon { color: var(--accent); font-size: 0.85rem; }
.ndb-view-title { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--text-primary); }
.ndb-view-count { font-size: 0.72rem; color: var(--text-muted); padding: 2px 8px; background: rgba(255,140,30,0.08); border-radius: 6px; }

.ndb-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Filter Pills */
.ndb-filter-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.ndb-pill {
  padding: 5px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ndb-pill i { font-size: 0.65rem; }
.ndb-pill:hover { border-color: var(--accent); color: var(--accent); }
.ndb-pill.active { background: rgba(255,140,30,0.1); border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* View Toggle */
.ndb-view-toggle { display: flex; gap: 2px; background: var(--bg-secondary); border-radius: 6px; padding: 2px; }
.ndb-view-btn {
  width: 30px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  color: var(--text-muted); font-size: 0.72rem;
  cursor: pointer; border-radius: 4px;
  transition: all 0.2s;
}
.ndb-view-btn:hover { color: var(--accent); }
.ndb-view-btn.active { background: var(--accent); color: #fff; }

/* TABLE VIEW */
.ndb-table-view { display: none; }
.ndb-active-view { display: block; }
.ndb-table { width: 100%; overflow-x: auto; }
.ndb-thead {
  display: grid;
  grid-template-columns: 90px 1fr 140px 150px 100px 60px 40px;
  gap: 0;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,140,30,0.02);
  position: sticky;
  top: 0;
  z-index: 3;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* FIX 4 — Scrollable container for Projects table view
 * Smooth momentum scrolling that preserves the sticky header above.
 * Designed to be inert when content is short (no scrollbars shown).
 */
.ndb-scroll-container {
  max-height: clamp(420px, 64vh, 720px);
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;      /* momentum scrolling on iOS */
  overscroll-behavior: contain;            /* don't scroll the page when bouncing */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,140,30,0.45) transparent;
  border-radius: 0 0 14px 14px;
  scroll-padding-top: 56px;                /* keep rows clear of sticky thead */
}
.ndb-scroll-container::-webkit-scrollbar { width: 8px; }
.ndb-scroll-container::-webkit-scrollbar-track { background: transparent; }
.ndb-scroll-container::-webkit-scrollbar-thumb {
  background: rgba(255,140,30,0.35);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 0.2s ease;
}
.ndb-scroll-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255,140,30,0.65);
  background-clip: padding-box;
}
/* Subtle fade hint at the bottom edge while content is scrollable */
.ndb-table-view { position: relative; }
.ndb-table-view::after {
  content: "";
  position: absolute;
  left: 0; right: 8px;                     /* leave room for scrollbar */
  bottom: 0;
  height: 28px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.18));
  border-radius: 0 0 14px 14px;
  opacity: 0.6;
}
@media (max-width: 768px) {
  .ndb-scroll-container { max-height: clamp(360px, 70vh, 600px); }
}
@media (prefers-reduced-motion: reduce) {
  .ndb-scroll-container { scroll-behavior: auto; }
}
.ndb-th {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 4px 8px;
}
.ndb-tbody { display: flex; flex-direction: column; }
.ndb-row {
  display: grid;
  grid-template-columns: 90px 1fr 140px 150px 100px 60px 40px;
  gap: 0;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  transition: all 0.25s var(--ease-smooth);
  cursor: pointer;
  opacity: 0;
  animation: slideInUp 0.35s var(--ease-out) forwards;
}
.ndb-row:nth-child(1) { animation-delay:0.02s; }
.ndb-row:nth-child(2) { animation-delay:0.04s; }
.ndb-row:nth-child(3) { animation-delay:0.06s; }
.ndb-row:nth-child(4) { animation-delay:0.08s; }
.ndb-row:nth-child(5) { animation-delay:0.10s; }
.ndb-row:nth-child(6) { animation-delay:0.12s; }
.ndb-row:nth-child(7) { animation-delay:0.14s; }
.ndb-row:nth-child(8) { animation-delay:0.16s; }
.ndb-row:nth-child(9) { animation-delay:0.18s; }
.ndb-row:nth-child(10) { animation-delay:0.20s; }

.ndb-row:last-child { border-bottom: none; }

/* Hover: only a faint left accent + very subtle tint — never washes out inner badges */
.ndb-row:hover {
  background: rgba(255,140,30,0.025);
  box-shadow: inset 3px 0 0 var(--accent);
}
/* Protect all coloured inner elements so they keep their original colours on hover */
.ndb-row:hover .ndb-status,
.ndb-row:hover .ndb-domain-tag,
.ndb-row:hover .ndb-priority,
.ndb-row:hover .ndb-tl-fill,
.ndb-row:hover .ndb-timeline-bar,
.ndb-row:hover .ndb-client-badge,
.ndb-row:hover .ndb-project-icon,
.ndb-row:hover .ndb-open-btn {
  filter: none !important;
  opacity: 1 !important;
  background-color: inherit;
}
/* Only brighten the text slightly */
.ndb-row:hover .ndb-project-name { color: var(--accent); }
.ndb-row:hover .ndb-open-btn { border-color: var(--accent); color: var(--accent); }

.ndb-td { padding: 4px 8px; font-size: 0.82rem; }

/* Status badges */
.ndb-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.ndb-status i { font-size: 0.55rem; }
.ndb-status-active { background: rgba(52,199,89,0.12); color: #34c759; }
.ndb-status-done { background: rgba(88,86,214,0.1); color: #8884d8; }

/* Project name + icon */
.ndb-col-project { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ndb-project-icon {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: rgba(255,140,30,0.08);
  color: var(--accent);
  font-size: 0.75rem;
  flex-shrink: 0;
}
.ndb-project-info { min-width: 0; }
.ndb-project-name { display: block; font-weight: 600; font-size: 0.85rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndb-project-sub { display: block; font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Client badge */
.ndb-client-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.ndb-client-badge i { color: var(--accent); font-size: 0.62rem; }

/* Timeline bar */
.ndb-col-period { display: flex; flex-direction: column; gap: 4px; }
.ndb-timeline-bar {
  width: 100%;
  height: 4px;
  background: var(--border-strong);
  border-radius: 2px;
  overflow: hidden;
}
.ndb-tl-fill { display: block; height: 100%; border-radius: 2px; }
.ndb-tl-active .ndb-tl-fill { background: linear-gradient(90deg, #34c759, #30d158); animation: pulseGlow 2s ease-in-out infinite; }
.ndb-tl-done .ndb-tl-fill { background: linear-gradient(90deg, var(--accent), #8884d8); }
@keyframes pulseGlow { 0%,100% { opacity:1; } 50% { opacity:0.6; } }
.ndb-period-text { font-size: 0.68rem; color: var(--text-muted); }

/* Domain tags */
.ndb-domain-tag {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ndb-domain-agri { background: rgba(52,199,89,0.1); color: #34c759; }
.ndb-domain-env { background: rgba(59,130,246,0.1); color: #3b82f6; }
.ndb-domain-disaster { background: rgba(255,69,58,0.1); color: #ff453a; }
.ndb-domain-cap { background: rgba(255,159,10,0.1); color: #ff9f0a; }

/* Priority badges (Notion roadmap style) */
.ndb-priority {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  text-align: center;
}
.ndb-p1 { background: rgba(255,69,58,0.12); color: #ff453a; }
.ndb-p2 { background: rgba(255,159,10,0.12); color: #ff9f0a; }
.ndb-p3 { background: rgba(88,86,214,0.1); color: #8884d8; }

/* Open button */
.ndb-open-btn {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.62rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  padding: 0;
}
.ndb-open-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* BOARD VIEW */
.ndb-board-view { display: none; padding: 20px; }
.ndb-board-view.ndb-active-view { display: block; }
.ndb-board-cols { display: flex; gap: 16px; overflow-x: auto; min-height: 300px; }
.ndb-board-col { flex: 1; min-width: 260px; }
.ndb-board-col-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 10px 14px; border-radius: 8px 8px 0 0;
  margin-bottom: 8px;
}
.ndb-board-col-header span {
  font-size: 0.65rem; font-weight: 700; padding: 1px 6px;
  border-radius: 4px; background: rgba(255,255,255,0.1);
}
.ndb-bch-active { background: rgba(52,199,89,0.08); color: #34c759; }
.ndb-bch-done { background: rgba(88,86,214,0.06); color: #8884d8; }

.ndb-board-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 8px;
  transition: all 0.2s;
  cursor: pointer;
}
.ndb-board-card:hover { border-color: rgba(255,140,30,0.2); transform: translateY(-2px); box-shadow: 0 4px 12px var(--shadow); }
.ndb-bc-domain { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.04em; }
.ndb-bc-title { font-family: var(--font-display); font-size: 0.88rem; font-weight: 600; color: var(--text-primary); margin: 8px 0 4px; line-height: 1.3; }
.ndb-bc-sub { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 10px; }
.ndb-bc-footer { display: flex; align-items: center; justify-content: space-between; }

/* TIMELINE VIEW */
.ndb-timeline-view { display: none; padding: 20px; overflow-x: auto; }
.ndb-timeline-view.ndb-active-view { display: block; }
.ndb-tl-track { min-width: 700px; }
.ndb-tl-axis {
  display: flex; justify-content: space-between;
  padding: 0 10px 12px;
  border-bottom: 2px solid var(--border-strong);
  margin-bottom: 16px;
}
.ndb-tl-year { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.04em; }
.ndb-tl-lanes { display: flex; flex-direction: column; gap: 8px; }
.ndb-tl-lane {
  position: relative;
  height: 32px;
  display: flex;
  align-items: center;
}
.ndb-tl-lane-bar {
  position: absolute;
  left: var(--start);
  width: var(--width);
  height: 8px;
  border-radius: 4px;
}
.ndb-tl-bar-active { background: linear-gradient(90deg, #34c759, #30d158); animation: pulseGlow 2s ease-in-out infinite; }
.ndb-tl-bar-done { background: linear-gradient(90deg, var(--accent-dark), var(--accent)); }
.ndb-tl-lane-label {
  position: absolute;
  left: calc(var(--start) + var(--width) + 8px);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* OLD — keep for compat */
.notion-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.notion-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s var(--ease-smooth);
  letter-spacing: 0.02em;
}

.notion-filter-pill i { font-size: 0.72rem; }

.notion-filter-pill:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255,140,30,0.04);
}

.notion-filter-pill.active {
  background: rgba(255,140,30,0.1);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.notion-pill-count {
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(255,140,30,0.15);
  color: var(--accent);
  padding: 1px 7px;
  border-radius: 6px;
  line-height: 1.4;
}

/* Projects Container */
.notion-projects-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Individual Project Block */
.notion-project-block {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s var(--ease-smooth);
}

.notion-project-block:hover {
  border-color: rgba(255,140,30,0.15);
  box-shadow: 0 2px 12px var(--shadow);
}

/* Project Header — Clickable toggle row */
.notion-project-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  transition: background 0.2s ease;
  user-select: none;
}

.notion-project-header:hover {
  background: rgba(255,140,30,0.03);
}

.notion-project-toggle {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 0.65rem;
  flex-shrink: 0;
  transition: all 0.3s var(--ease-smooth);
}

.notion-project-toggle i {
  transition: transform 0.3s var(--ease-smooth);
}

.notion-project-block.collapsed .notion-project-toggle i {
  transform: rotate(-90deg);
}

.notion-project-toggle:hover {
  background: rgba(255,140,30,0.1);
  color: var(--accent);
}

.notion-project-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255,140,30,0.08);
  color: var(--accent);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.notion-project-head-content {
  flex: 1;
  min-width: 0;
}

.notion-project-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 4px;
}

.notion-project-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.notion-project-client,
.notion-project-period {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}

.notion-project-client i,
.notion-project-period i {
  color: var(--accent);
  font-size: 0.65rem;
}

.notion-project-status {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 6px;
}

.notion-status-active {
  background: rgba(52,199,89,0.12);
  color: #34c759;
  border: 1px solid rgba(52,199,89,0.25);
}

.notion-status-completed {
  background: rgba(88,86,214,0.1);
  color: #8884d8;
  border: 1px solid rgba(88,86,214,0.2);
}

.notion-project-expand {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s var(--ease-smooth);
  margin: 0;
  padding: 0;
}

.notion-project-expand:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Project Body — Collapsible */
.notion-project-body {
  padding: 0 20px 20px 70px;
  max-height: 300px;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-smooth), opacity 0.3s ease, padding 0.3s ease;
  opacity: 1;
}

.notion-project-block.collapsed .notion-project-body {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.notion-project-desc {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.notion-project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.notion-tag {
  padding: 3px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: all 0.25s var(--ease-smooth);
  background: rgba(255,255,255,0.02);
}

.notion-project-block:hover .notion-tag {
  border-color: rgba(255,140,30,0.2);
  color: var(--accent);
}

/* Project block animation */
.notion-project-block {
  opacity: 0;
  animation: slideInUp 0.4s var(--ease-out) forwards;
}

.notion-project-block:nth-child(1)  { animation-delay: 0.02s; }
.notion-project-block:nth-child(2)  { animation-delay: 0.04s; }
.notion-project-block:nth-child(3)  { animation-delay: 0.06s; }
.notion-project-block:nth-child(4)  { animation-delay: 0.08s; }
.notion-project-block:nth-child(5)  { animation-delay: 0.10s; }
.notion-project-block:nth-child(6)  { animation-delay: 0.12s; }
.notion-project-block:nth-child(7)  { animation-delay: 0.14s; }
.notion-project-block:nth-child(8)  { animation-delay: 0.16s; }
.notion-project-block:nth-child(9)  { animation-delay: 0.18s; }
.notion-project-block:nth-child(10) { animation-delay: 0.20s; }

/* =============================================
   PUBLICATIONS — Notion Block Layout
   ============================================= */

/* Publication Stats Bar */
.notion-pub-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 28px 40px;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 36px;
  backdrop-filter: blur(8px);
  flex-wrap: wrap;
}

.notion-pub-stat-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.notion-pub-stat-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255,140,30,0.08);
  color: var(--accent);
  font-size: 0.82rem;
}

.notion-pub-stat-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.notion-pub-stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.notion-pub-stat-divider {
  width: 1px;
  height: 36px;
  background: var(--border-strong);
}

/* Publication Groups */
.notion-pub-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.notion-pub-group {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s var(--ease-smooth);
  backdrop-filter: blur(8px);
}

.notion-pub-group:hover {
  border-color: rgba(255,140,30,0.12);
}

.notion-pub-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  transition: background 0.2s ease;
  user-select: none;
}

.notion-pub-group-header:hover {
  background: rgba(255,140,30,0.03);
}

.notion-pub-group-toggle {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 0.65rem;
  flex-shrink: 0;
  transition: all 0.3s var(--ease-smooth);
}

.notion-pub-group-toggle i {
  transition: transform 0.3s var(--ease-smooth);
}

.notion-pub-group.collapsed .notion-pub-group-toggle i {
  transform: rotate(-90deg);
}

.notion-pub-group-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255,140,30,0.08);
  color: var(--accent);
  font-size: 0.82rem;
  flex-shrink: 0;
}

.notion-pub-group-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.notion-pub-group-count {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(255,140,30,0.1);
  border: 1px solid rgba(255,140,30,0.2);
  padding: 2px 10px;
  border-radius: 10px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.notion-pub-group-content {
  max-height: 2000px;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-smooth), opacity 0.3s ease, padding 0.4s ease;
  opacity: 1;
  padding: 0 20px 12px;
}

.notion-pub-group.collapsed .notion-pub-group-content {
  max-height: 0;
  opacity: 0;
  padding: 0 20px;
}

/* Publication Row */
.notion-pub-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 12px;
  border-radius: 8px;
  border-bottom: 1px solid var(--border);
  transition: all 0.25s var(--ease-smooth);
  cursor: pointer;
}

.notion-pub-row:last-child {
  border-bottom: none;
}

.notion-pub-row:hover {
  background: rgba(255,140,30,0.04);
  transform: translateX(4px);
}

.notion-pub-year-badge {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(255,140,30,0.08);
  padding: 3px 10px;
  border-radius: 6px;
  margin-top: 2px;
}

.notion-pub-info {
  flex: 1;
  min-width: 0;
}

.notion-pub-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 4px;
}

.notion-pub-authors {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  line-height: 1.4;
}

.notion-pub-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.notion-pub-journal,
.notion-pub-citations {
  font-size: 0.75rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 5px;
}

.notion-pub-journal i,
.notion-pub-citations i {
  color: var(--accent);
  font-size: 0.65rem;
}

.notion-pub-highlight {
  color: #ff6b35 !important;
  font-weight: 600;
}

.notion-pub-highlight i {
  color: #ff6b35 !important;
}

.notion-pub-expand-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.68rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s var(--ease-smooth);
  margin-top: 2px;
  padding: 0;
}

.notion-pub-expand-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Publication Footer */
.notion-pub-footer {
  text-align: center;
}

.notion-scholar-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  background: var(--card-gradient);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.3s var(--ease-smooth);
}

.notion-scholar-link:hover {
  border-color: var(--accent);
  background: rgba(255,140,30,0.06);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--shadow);
}

.notion-scholar-link i:first-child {
  color: var(--accent);
}

.notion-link-arrow {
  font-size: 0.72rem;
  opacity: 0.5;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.notion-scholar-link:hover .notion-link-arrow {
  opacity: 1;
  transform: translate(2px, -2px);
}

/* =============================================
   PUBLICATIONS — Notion Database Table
   ============================================= */
.npub-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 28px;
}
.npub-metric {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding: 8px 16px;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.npub-metric i { color: var(--accent); font-size: 0.75rem; }
.npub-metric strong { color: var(--accent); font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; }

/* Publication Database */
.npub-db {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(8px);
}
.npub-db-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.npub-db-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.npub-db-title i { color: var(--accent); font-size: 0.82rem; }
.npub-db-controls { display: flex; gap: 6px; }
.npub-sort-btn, .npub-filter-btn {
  padding: 5px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.72rem;
  cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  transition: all 0.2s;
}
.npub-sort-btn:hover, .npub-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.npub-sort-btn.active { background: rgba(255,140,30,0.1); border-color: var(--accent); color: var(--accent); }

/* Filter Row */
.npub-filter-row {
  display: flex;
  gap: 4px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  max-height: 50px;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}
.npub-filter-row.collapsed {
  max-height: 0;
  opacity: 0;
  padding: 0 20px;
  overflow: hidden;
}
.npub-era-pill {
  padding: 4px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.7rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.npub-era-pill:hover { border-color: var(--accent); color: var(--accent); }
.npub-era-pill.active { background: rgba(255,140,30,0.1); border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* Column Header */
.npub-header {
  display: grid;
  grid-template-columns: 60px 1fr 130px 80px 90px 36px;
  gap: 0;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,140,30,0.02);
}
.npub-h {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 4px 6px;
}

/* Publication Rows */
.npub-rows { display: flex; flex-direction: column; }
.npub-row {
  display: grid;
  grid-template-columns: 60px 1fr 130px 80px 90px 36px;
  gap: 0;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  transition: all 0.2s;
  cursor: pointer;
  opacity: 0;
  animation: slideInUp 0.35s var(--ease-out) forwards;
}
.npub-row:nth-child(1) { animation-delay:0.01s; }
.npub-row:nth-child(2) { animation-delay:0.02s; }
.npub-row:nth-child(3) { animation-delay:0.03s; }
.npub-row:nth-child(4) { animation-delay:0.04s; }
.npub-row:nth-child(5) { animation-delay:0.05s; }
.npub-row:nth-child(6) { animation-delay:0.06s; }
.npub-row:nth-child(7) { animation-delay:0.07s; }
.npub-row:nth-child(8) { animation-delay:0.08s; }
.npub-row:nth-child(9) { animation-delay:0.09s; }
.npub-row:nth-child(10) { animation-delay:0.10s; }
.npub-row:nth-child(11) { animation-delay:0.11s; }
.npub-row:nth-child(12) { animation-delay:0.12s; }
.npub-row:nth-child(13) { animation-delay:0.13s; }
.npub-row:nth-child(14) { animation-delay:0.14s; }
.npub-row:nth-child(15) { animation-delay:0.15s; }
.npub-row:nth-child(16) { animation-delay:0.16s; }

.npub-row:last-child { border-bottom: none; }
.npub-row:hover { background: rgba(255,140,30,0.04); }
.npub-row-highlight { background: rgba(255,107,53,0.04); }
.npub-row-highlight:hover { background: rgba(255,107,53,0.08); }

.npub-c { padding: 4px 6px; font-size: 0.82rem; }
.npub-year {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(255,140,30,0.08);
  padding: 2px 8px;
  border-radius: 5px;
}
.npub-c-title h4 { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); line-height: 1.35; margin-bottom: 2px; }
.npub-c-title h4 .npub-fire { color: #ff6b35; font-size: 0.72rem; margin-left: 4px; }
.npub-authors { font-size: 0.72rem; color: var(--text-muted); line-height: 1.4; }
.npub-journal-name { font-size: 0.72rem; color: var(--text-secondary); }

/* Citation badges */
.npub-cite-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 6px;
  background: rgba(255,140,30,0.08);
  color: var(--accent);
}
.npub-cite-high { background: rgba(255,140,30,0.15); color: #ff8c20; }
.npub-cite-top { background: rgba(255,107,53,0.18); color: #ff6b35; font-weight: 800; }

/* Type badges */
.npub-type {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.npub-type-journal { background: rgba(59,130,246,0.1); color: #3b82f6; }
.npub-type-conf { background: rgba(168,85,247,0.1); color: #a855f7; }
.npub-type-preprint { background: rgba(255,159,10,0.1); color: #ff9f0a; }

.npub-open {
  width: 24px; height: 24px;
  border-radius: 5px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.6rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  padding: 0;
}
.npub-open:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Footer */
.npub-footer { text-align: center; margin-top: 28px; }
.npub-scholar-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  background: var(--card-gradient);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.3s;
}
.npub-scholar-link:hover {
  border-color: var(--accent); background: rgba(255,140,30,0.06);
  color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--shadow);
}
.npub-scholar-link i:first-child { color: var(--accent); }

/* =============================================================
   PUBLICATIONS — MODERN ACADEMIC REDESIGN (Session: FIX 2)
   -------------------------------------------------------------
   Layered on top of the legacy .npub-* rules so the backend
   DOM contract (#npubRows / .npub-row / data-era / data-cite /
   .expand-btn / #npubSortBtn / #npubFilterToggle / #npubFilterRow
   / .npub-era-pill) keeps working unchanged. Only presentation
   is upgraded.
   ============================================================= */

/* Section ambient — subtle premium gradient + grid texture */
.publications.publications-v2 {
  position: relative;
  overflow: hidden;
}
.publications.publications-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,140,30,0.04), transparent 70%),
    radial-gradient(ellipse 40% 40% at 100% 100%, rgba(59,130,246,0.03), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.publications.publications-v2 .section-inner { position: relative; z-index: 1; }

/* ----- Hero block (intro + metrics rail) ----- */
.npub2-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: end;
  margin: 18px 0 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.npub2-hero-text { max-width: 640px; }
.npub2-title {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 6px 0 14px;
}
.npub2-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--accent, #ff8c1e), #ff6b35);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.npub2-subtitle {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 18px;
  max-width: 56ch;
}
.npub2-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.npub2-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,140,30,0.14), rgba(255,107,53,0.08));
  border: 1px solid rgba(255,140,30,0.32);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  transition: transform 0.25s var(--ease-out, ease), border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.npub2-cta-primary:hover {
  transform: translateY(-2px);
  border-color: var(--accent, #ff8c1e);
  background: linear-gradient(135deg, rgba(255,140,30,0.22), rgba(255,107,53,0.14));
  box-shadow: 0 12px 28px -12px rgba(255,140,30,0.45);
  color: var(--text-primary);
}
.npub2-cta-primary i:first-child { color: var(--accent, #ff8c1e); }
.npub2-cta-arrow { font-size: 0.72rem; opacity: 0.7; transition: transform 0.2s; }
.npub2-cta-primary:hover .npub2-cta-arrow { transform: translate(2px, -2px); opacity: 1; }
.npub2-cta-meta {
  font-size: 0.74rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.npub2-cta-meta i { color: #22c55e; font-size: 0.7rem; }

/* Metrics rail — replaces flat chip strip with framed numeric callouts */
.npub2-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(108px, 1fr));
  gap: 10px;
  padding: 18px 22px;
  background: var(--card-gradient, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  position: relative;
}
.npub2-metric {
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  text-align: center;
  gap: 4px;
  padding: 6px 4px;
  border: none;
  background: transparent;
  border-right: 1px solid var(--border);
}
.npub2-metric:last-child { border-right: none; }
.npub2-metric-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,140,30,0.10);
  color: var(--accent, #ff8c1e);
  font-size: 0.78rem;
  margin-bottom: 2px;
}
.npub2-metric-icon-gold {
  background: linear-gradient(135deg, rgba(255,184,28,0.20), rgba(255,140,30,0.10));
  color: #ffb81c;
}
.npub2-metric-num { line-height: 1; }
.npub2-metric-num strong {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, var(--text-primary), color-mix(in srgb, var(--text-primary) 60%, transparent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.npub2-metric-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
}

/* ----- Toolbar: search + type filter + actions ----- */
.npub2-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 380px) 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}
.npub2-search {
  position: relative;
  display: flex;
  align-items: center;
}
.npub2-search-icon {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  font-size: 0.82rem;
  pointer-events: none;
}
.npub2-search-input {
  width: 100%;
  height: 42px;
  padding: 0 38px 0 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card-gradient, rgba(255,255,255,0.04));
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.npub2-search-input::placeholder { color: var(--text-muted); }
.npub2-search-input:focus {
  border-color: var(--accent, #ff8c1e);
  box-shadow: 0 0 0 3px rgba(255,140,30,0.14);
  background: var(--bg-primary, #0e1117);
}
.npub2-search-clear {
  position: absolute;
  right: 8px;
  width: 26px; height: 26px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: none;
  align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.npub2-search-clear:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.npub2-search.has-value .npub2-search-clear { display: inline-flex; }

.npub2-toolbar-right {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.npub2-typefilter {
  display: inline-flex;
  background: var(--card-gradient, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
}
.npub2-typechip {
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}
.npub2-typechip:hover { color: var(--text-primary); }
.npub2-typechip.active {
  background: rgba(255,140,30,0.14);
  color: var(--accent, #ff8c1e);
}
.npub2-typedot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  background: var(--text-muted);
}
.npub2-typedot-journal { background: #3b82f6; }
.npub2-typedot-conf,
.npub2-typedot-conference { background: #a855f7; }
.npub2-typedot-preprint { background: #ff9f0a; }
.npub2-typedot-book { background: #14b8a6; }

.npub2-sort-btn, .npub2-filter-btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 0.76rem;
  font-weight: 600;
}

/* Era bar — restyle the existing era pills row */
.npub2-erabar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  margin-bottom: 14px;
  background: var(--card-gradient, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 12px;
  max-height: none;
  border-bottom: 1px solid var(--border);
}
.npub2-erabar.collapsed {
  max-height: 0;
  opacity: 0;
  padding: 0 16px;
  margin: 0;
  border-color: transparent;
  overflow: hidden;
}
.npub2-erabar-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-right: 6px;
  border-right: 1px solid var(--border);
  margin-right: 4px;
}
.npub2-erabar-label i { color: var(--accent, #ff8c1e); font-size: 0.7rem; }
.npub2-era-pill {
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.74rem;
}

/* Result bar */
.npub2-resultbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  padding: 0 4px;
}
.npub2-result-count {
  font-size: 0.84rem;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.npub2-result-count i { color: var(--accent, #ff8c1e); font-size: 0.78rem; }
.npub2-result-count strong {
  color: var(--text-primary);
  font-weight: 700;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.05rem;
}
.npub2-result-hint {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ----- Card grid container — overrides the legacy table look ----- */
.npub2-db {
  background: transparent;
  border: none;
  backdrop-filter: none;
  padding: 0;
  overflow: visible;
}
.npub2-header-legacy {
  display: none !important;  /* hidden, kept in DOM for audits */
}

/* The grid itself — responsive 1/2/3 columns */
.npub2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  padding: 0;
}

/* ----- Publication CARD ----- */
.npub2-grid .npub-row,
.npub2-grid .npub2-card {
  display: grid;
  grid-template-columns: 6px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'rail head'
    'rail title'
    'rail foot';
  align-items: stretch;
  padding: 0;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--card-gradient, rgba(255,255,255,0.04)) 100%, transparent),
    color-mix(in srgb, var(--bg-primary, #0e1117) 80%, transparent));
  background-color: var(--bg-primary, #0e1117);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: transform 0.28s var(--ease-out, cubic-bezier(.16,1,.3,1)),
              border-color 0.28s,
              box-shadow 0.28s,
              background 0.28s;
}

/* Coloured rail — citation tier */
.npub2-grid .npub-row::before,
.npub2-card-rail {
  content: '';
  grid-area: rail;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  width: 100%;
  display: block;
}
.npub2-grid .npub-row[data-cite-tier='top']::before,
.npub2-card[data-cite-tier='top']  .npub2-card-rail { background: linear-gradient(180deg, #ff8c1e, #ff6b35); }
.npub2-grid .npub-row[data-cite-tier='high']::before,
.npub2-card[data-cite-tier='high'] .npub2-card-rail { background: linear-gradient(180deg, #ffb86c, #ff8c1e); }
.npub2-grid .npub-row[data-cite-tier='mid']::before,
.npub2-card[data-cite-tier='mid']  .npub2-card-rail { background: linear-gradient(180deg, #4dabf7, #3b82f6); }
.npub2-grid .npub-row[data-cite-tier='low']::before,
.npub2-card[data-cite-tier='low']  .npub2-card-rail { background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04)); }

/* Card hover — lift + accent glow */
.npub2-grid .npub-row:hover,
.npub2-grid .npub2-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent, #ff8c1e) 55%, var(--border));
  box-shadow:
    0 18px 38px -22px rgba(0,0,0,0.55),
    0 0 0 1px color-mix(in srgb, var(--accent, #ff8c1e) 15%, transparent);
  background-color: color-mix(in srgb, var(--bg-primary, #0e1117) 92%, var(--accent, #ff8c1e));
}

.npub2-grid .npub-row-highlight,
.npub2-grid .npub2-card-highlight {
  border-color: rgba(255,107,53,0.35);
  background-color: color-mix(in srgb, var(--bg-primary, #0e1117) 88%, #ff6b35);
}
.npub2-grid .npub-row-highlight::after,
.npub2-grid .npub2-card-highlight::after {
  content: 'FEATURED';
  position: absolute;
  top: 12px;
  right: -28px;
  transform: rotate(35deg);
  background: linear-gradient(90deg, #ff6b35, #ff8c1e);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 3px 32px;
  pointer-events: none;
  box-shadow: 0 4px 10px -2px rgba(255,107,53,0.4);
}

/* Card head — year + type chip */
.npub2-card-head,
.npub2-grid .npub-row > .npub-c-year:first-of-type {
  grid-area: head;
}
.npub2-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px 8px 16px;
}
.npub2-card-year .npub-year {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,140,30,0.10);
  color: var(--accent, #ff8c1e);
  border: 1px solid rgba(255,140,30,0.18);
  font-family: var(--font-display, Georgia, serif);
}
.npub2-card-typewrap { display: inline-flex; }
.npub2-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Card title block — center the visual weight */
.npub2-card-titlecell,
.npub2-grid .npub-row .npub-c-title {
  grid-area: title;
  padding: 4px 18px 12px 16px;
}
.npub2-card-title,
.npub2-grid .npub-row .npub-c-title h4 {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: 1.05rem;
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.npub2-card-authors,
.npub2-grid .npub-row .npub-authors {
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card footer — journal + citations + open action */
.npub2-card-foot,
.npub2-grid .npub-row > .npub-c-journal {
  grid-area: foot;
}
.npub2-card-foot {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px 12px 16px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.015));
}
.npub2-card-journalcell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0;
}
.npub2-card-jicon {
  color: var(--text-muted);
  font-size: 0.78rem;
  flex-shrink: 0;
}
.npub2-card-journal {
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Citation pill — quote icon + number, tier-coloured */
.npub2-card-citecell { padding: 0; flex-shrink: 0; }
.npub2-card-cite {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  min-width: auto;
  font-size: 0.7rem;
  border-radius: 6px;
  background: rgba(255,140,30,0.08);
  color: var(--accent, #ff8c1e);
  transition: background 0.2s, transform 0.2s;
}
.npub2-card-cite i { font-size: 0.62rem; opacity: 0.8; }
.npub2-card-cite strong { font-size: 0.82rem; font-weight: 800; }
.npub2-card-cite[data-tier='top'] {
  background: linear-gradient(135deg, rgba(255,107,53,0.20), rgba(255,140,30,0.12));
  color: #ff6b35;
}
.npub2-card-cite[data-tier='high'] {
  background: rgba(255,140,30,0.15);
  color: #ff8c20;
}
.npub2-card-cite[data-tier='mid'] {
  background: rgba(59,130,246,0.10);
  color: #4dabf7;
}
.npub2-grid .npub-row:hover .npub2-card-cite { transform: scale(1.04); }

/* Open action button — circular */
.npub2-card-actcell { padding: 0; }
.npub2-card-open {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-strong, var(--border));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
  text-decoration: none;
  font-size: 0.7rem;
}
.npub2-card-open:hover {
  background: var(--accent, #ff8c1e);
  color: #fff;
  border-color: var(--accent, #ff8c1e);
  transform: translate(2px, -2px);
}

/* Fire icon (highlighted papers) */
.npub2-grid .npub-fire { color: #ff6b35; font-size: 0.78rem; margin-left: 6px; vertical-align: middle; }

/* Empty state */
.npub2-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 56px 24px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: var(--card-gradient, rgba(255,255,255,0.02));
}
.npub2-empty-icon {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,140,30,0.08);
  color: var(--accent, #ff8c1e);
  font-size: 1.2rem;
}
.npub2-empty h4 {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.1rem;
  margin: 0 0 6px;
  color: var(--text-primary);
}
.npub2-empty p { color: var(--text-muted); font-size: 0.88rem; margin: 0 0 16px; }
.npub2-empty-reset {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid var(--border-strong, var(--border));
  background: transparent;
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.npub2-empty-reset:hover {
  border-color: var(--accent, #ff8c1e);
  background: rgba(255,140,30,0.06);
  color: var(--accent, #ff8c1e);
}

/* Filtered-out state (set by JS) */
.npub2-grid .npub-row.npub2-hidden,
.npub2-grid .npub2-card.npub2-hidden {
  display: none !important;
}

/* =============================================================
   PUBLICATION CARD — OVERLAP / LAYOUT HOTFIXES
   -------------------------------------------------------------
   Surgical fixes for the redesigned card. Keeps the redesign
   intact, fixes only the overlapping text / spacing collisions
   that appeared in the new layout. No DOM changes.
   ============================================================= */

/* 1) Legacy .npub-row padding + 6-col grid leak — neutralise INSIDE the new grid only.
      The redesign already declares its own grid-template-areas; the old padding
      caused content to push past the card border on narrow widths. */
.npub2-grid .npub-row {
  padding: 0 !important;
  grid-template-columns: 6px 1fr !important;
}

/* 2) Make sure children .npub-c cells don't drag in legacy padding inside cards */
.npub2-grid .npub-row .npub-c { padding: 0; }

/* 3) Card head — prevent year + type chip + featured ribbon collision.
      `min-width: 0` lets the type chip flex; padding-right increased to
      give the rotated FEATURED ribbon clearance so it never overlaps. */
.npub2-card-head {
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 6px;
  padding: 14px 18px 8px 16px;
}
.npub2-card-year { min-width: 0; flex-shrink: 0; }
.npub2-card-typewrap { min-width: 0; flex-shrink: 1; max-width: 100%; }
.npub2-type-chip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 4) FEATURED ribbon — ensure it can never overlap the type chip / title.
      Reserve right-side padding on the head of featured cards. */
.npub2-grid .npub-row-highlight .npub2-card-head,
.npub2-grid .npub2-card-highlight .npub2-card-head {
  padding-right: 70px;
}
.npub2-grid .npub-row-highlight::after,
.npub2-grid .npub2-card-highlight::after {
  z-index: 2;
  pointer-events: none;
}

/* 5) Title block — guarantee separation from head + footer. Override any
      legacy margin-bottom: 2px coming from .npub-c-title h4. */
.npub2-card-titlecell,
.npub2-grid .npub-row .npub-c-title {
  min-width: 0;
  padding: 6px 18px 14px 16px;
}
.npub2-card-title,
.npub2-grid .npub-row .npub-c-title h4 {
  margin: 0 0 8px !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.npub2-card-authors,
.npub2-grid .npub-row .npub-authors {
  margin: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 6) Card footer — fix journal-name vs cite-badge vs open-button collisions.
      • min-width: 0 on the journal cell so ellipsis actually engages
      • slightly larger gap so the cite pill never touches the open btn
      • allow wrap on small screens so nothing overflows the card edge */
.npub2-card-foot {
  gap: 12px;
  padding: 10px 16px 14px 16px;
  min-width: 0;
}
.npub2-card-journalcell {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.npub2-card-journal {
  display: block;
  min-width: 0;
  max-width: 100%;
}
.npub2-card-citecell,
.npub2-card-actcell { flex-shrink: 0; }

/* 7) Fire (highlight) icon — keep on the same baseline as title, don't push line height */
.npub2-grid .npub-fire {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

/* 8) Toolbar / metrics: avoid the search input colliding with the type chips
      on mid widths (≥641 and ≤900) where the redesign squeezed both into one row. */
.npub2-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.npub2-toolbar-right {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.npub2-typefilter { flex-wrap: wrap; gap: 6px; }

/* 9) Era bar — make pills wrap cleanly on small/mid widths instead of overflowing */
.npub2-erabar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 8px;
  align-items: center;
}

/* 10) Result bar — keep count + hint from colliding when hint is long */
.npub2-resultbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
}

/* 11) Tablet (≤980): single-column toolbar, full-width search, give cards more
       breathing room so titles + footer don't get pinched. */
@media (max-width: 980px) {
  .npub2-toolbar { grid-template-columns: 1fr; }
  .npub2-toolbar-right { justify-content: flex-start; }
  .npub2-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
}

/* 12) Mobile (≤640): single column, larger touch targets, looser line-clamps,
       guarantee the footer wraps before colliding. */
@media (max-width: 640px) {
  .npub2-grid { grid-template-columns: 1fr; gap: 12px; }
  .npub2-card-head {
    padding: 12px 14px 6px 14px;
  }
  .npub2-grid .npub-row-highlight .npub2-card-head,
  .npub2-grid .npub2-card-highlight .npub2-card-head {
    padding-right: 64px;
  }
  .npub2-card-titlecell,
  .npub2-grid .npub-row .npub-c-title {
    padding: 4px 14px 12px 14px;
  }
  .npub2-card-foot {
    padding: 10px 14px 12px 14px;
    gap: 10px;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'journal cite'
      'journal action';
    row-gap: 8px;
  }
  .npub2-card-journalcell { grid-area: journal; }
  .npub2-card-citecell    { grid-area: cite; justify-self: end; }
  .npub2-card-actcell     { grid-area: action; justify-self: end; }
}

/* 13) Very narrow (≤380): stack footer into one column so nothing overlaps */
@media (max-width: 380px) {
  .npub2-card-foot {
    grid-template-columns: 1fr;
    grid-template-areas:
      'journal'
      'cite'
      'action';
  }
  .npub2-card-citecell,
  .npub2-card-actcell { justify-self: start; }
}

/* 14) FEATURED ribbon — hide on very narrow screens (it has no room) */
@media (max-width: 380px) {
  .npub2-grid .npub-row-highlight::after,
  .npub2-grid .npub2-card-highlight::after { display: none; }
  .npub2-grid .npub-row-highlight .npub2-card-head,
  .npub2-grid .npub2-card-highlight .npub2-card-head { padding-right: 14px; }
}

/* Footer scholar CTA — premium two-line layout */
.npub2-footer { margin-top: 36px; }
.npub2-scholar-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border-radius: 14px;
  background: var(--card-gradient, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  text-decoration: none;
  text-align: left;
  transition: transform 0.25s var(--ease-out), border-color 0.25s, box-shadow 0.25s;
}
.npub2-scholar-link:hover {
  transform: translateY(-3px);
  border-color: var(--accent, #ff8c1e);
  box-shadow: 0 16px 36px -18px rgba(255,140,30,0.5);
}
.npub2-scholar-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(255,140,30,0.18), rgba(255,107,53,0.10));
  color: var(--accent, #ff8c1e);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.npub2-scholar-body { display: flex; flex-direction: column; gap: 2px; }
.npub2-scholar-line1 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-display, Georgia, serif);
}
.npub2-scholar-line2 {
  font-size: 0.74rem;
  color: var(--text-muted);
}
.npub2-scholar-arrow { color: var(--text-muted); font-size: 0.78rem; transition: transform 0.2s, color 0.2s; }
.npub2-scholar-link:hover .npub2-scholar-arrow { color: var(--accent, #ff8c1e); transform: translate(3px, -3px); }

/* ----- Responsive ----- */
@media (max-width: 980px) {
  .npub2-hero { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .npub2-metrics { grid-template-columns: repeat(4, 1fr); }
  .npub2-toolbar { grid-template-columns: 1fr; }
  .npub2-toolbar-right { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .npub2-metrics { grid-template-columns: repeat(2, 1fr); padding: 14px; }
  .npub2-metric:nth-child(2) { border-right: none; }
  .npub2-grid { grid-template-columns: 1fr; }
  .npub2-result-hint { display: none; }
  .npub2-erabar { padding: 10px 12px; }
  .npub2-erabar-label { width: 100%; border-right: none; padding-right: 0; }
  .npub2-card-title,
  .npub2-grid .npub-row .npub-c-title h4 { font-size: 1rem; -webkit-line-clamp: 4; }
}

/* Light theme tweaks — keep readability on the white theme */
[data-theme='light'] .npub2-grid .npub-row,
[data-theme='light'] .npub2-grid .npub2-card {
  background-color: #ffffff;
  background-image: linear-gradient(180deg, rgba(0,0,0,0.005), rgba(0,0,0,0.02));
}
[data-theme='light'] .npub2-grid .npub-row:hover,
[data-theme='light'] .npub2-grid .npub2-card:hover {
  background-color: #fffaf3;
}
[data-theme='light'] .npub2-card-foot {
  background: rgba(0,0,0,0.015);
}
[data-theme='light'] .npub2-metric-num strong {
  color: #1a1f2e;
  background: none;
  -webkit-text-fill-color: initial;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .npub2-grid .npub-row,
  .npub2-grid .npub2-card,
  .npub2-card-open,
  .npub2-card-cite,
  .npub2-scholar-link,
  .npub2-cta-primary { transition: none !important; transform: none !important; }
}

/* =============================================
   ARTICLES — Notion Gallery Cards
   ============================================= */
.articles-section { background: var(--bg-primary); }

.nart-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.nart-tab {
  padding: 6px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 500;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: all 0.2s;
}
.nart-tab i { font-size: 0.65rem; }
.nart-tab:hover { border-color: var(--accent); color: var(--accent); }
.nart-tab.active { background: rgba(59,130,246,0.1); border-color: #3b82f6; color: #3b82f6; font-weight: 600; }

/* Gallery Grid */
.nart-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Horizontal-scroll Articles gallery (with right-side arrow) */
.nart-gallery-wrap { position: relative; }
.nart-gallery-scroll {
  display: flex;
  flex-wrap: nowrap;
  grid-template-columns: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  gap: 16px;
  padding: 4px 56px 18px 4px;
  scrollbar-width: thin;
}
.nart-gallery-scroll::-webkit-scrollbar { height: 8px; }
.nart-gallery-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 8px; }
.nart-gallery-scroll::-webkit-scrollbar-thumb { background: rgba(59,130,246,0.35); border-radius: 8px; }
.nart-gallery-scroll::-webkit-scrollbar-thumb:hover { background: rgba(59,130,246,0.55); }
.nart-gallery-scroll > .nart-card {
  flex: 0 0 320px;
  min-width: 280px;
  max-width: 360px;
  scroll-snap-align: start;
}
.nart-gallery-scroll > .nart-card.nart-featured { flex: 0 0 420px; max-width: 460px; }
.nart-scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card-gradient, rgba(20,20,28,0.92));
  color: var(--accent, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 6px 20px var(--shadow, rgba(0,0,0,0.35));
  transition: transform 0.2s var(--ease-out), background 0.2s, opacity 0.2s, border-color 0.2s;
  font-size: 1rem;
  backdrop-filter: blur(8px);
}
.nart-scroll-arrow:hover { transform: translateY(-50%) scale(1.08); border-color: rgba(59,130,246,0.6); color: #3b82f6; }
.nart-scroll-arrow:disabled, .nart-scroll-arrow[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.nart-scroll-arrow-right { right: 6px; }
.nart-scroll-arrow-left { left: 6px; opacity: 0; pointer-events: none; }
.nart-gallery-wrap.is-scrolled .nart-scroll-arrow-left { opacity: 1; pointer-events: auto; }
.nart-gallery-wrap.is-end .nart-scroll-arrow-right { opacity: 0.35; pointer-events: none; }
@media (max-width: 720px) {
  .nart-gallery-scroll > .nart-card { flex: 0 0 78%; }
  .nart-gallery-scroll > .nart-card.nart-featured { flex: 0 0 88%; }
  .nart-scroll-arrow { width: 38px; height: 38px; }
}

/* =============================================
   Vertical-scroll Blogs container
   Fixed: proper spacing, no overlap, scroll works
   inside the fixed-height area, mask removed (it
   was clipping hover-transformed cards).
   ============================================= */
.nblog-list-wrap {
  position: relative;
  /* Provide a clean frame around the scroll area */
  border-radius: 14px;
  background: rgba(168, 85, 247, 0.02);
  border: 1px solid var(--border);
  padding: 12px;
}
.nblog-list-scroll {
  max-height: 560px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 4px 12px 4px 4px; /* room for translateX(4px) hover + scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 85, 247, 0.45) transparent;
  border-radius: 10px;
  /* IMPORTANT: no mask-image — it was clipping hovered cards mid-transform */
  display: block;
  /* Stable scrollbar so layout doesn't jump on overflow toggles */
  scrollbar-gutter: stable;
}
.nblog-list-scroll::-webkit-scrollbar { width: 8px; }
.nblog-list-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 8px; }
.nblog-list-scroll::-webkit-scrollbar-thumb { background: rgba(168, 85, 247, 0.40); border-radius: 8px; }
.nblog-list-scroll::-webkit-scrollbar-thumb:hover { background: rgba(168, 85, 247, 0.65); }

/* Light theme support */
[data-theme="light"] .nblog-list-wrap {
  background: rgba(168, 85, 247, 0.025);
}
[data-theme="light"] .nblog-list-scroll::-webkit-scrollbar-track {
  background: rgba(44,24,16,0.04);
}

@media (max-width: 720px) {
  .nblog-list-wrap { padding: 8px; }
  .nblog-list-scroll { max-height: 480px; padding-right: 8px; }
}

.nart-card {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.3s var(--ease-smooth);
  cursor: pointer;
  position: relative;
  opacity: 0;
  animation: slideInUp 0.4s var(--ease-out) forwards;
}
.nart-card:nth-child(1) { animation-delay: 0.03s; }
.nart-card:nth-child(2) { animation-delay: 0.06s; }
.nart-card:nth-child(3) { animation-delay: 0.09s; }
.nart-card:nth-child(4) { animation-delay: 0.12s; }
.nart-card:nth-child(5) { animation-delay: 0.15s; }
.nart-card:hover { border-color: rgba(59,130,246,0.2); transform: translateY(-4px); box-shadow: 0 8px 28px var(--shadow); }

/* Card Cover */
.nart-card-cover {
  height: 120px;
  background: linear-gradient(135deg, rgba(255,140,30,0.15), rgba(59,130,246,0.1));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.nart-cover-ai { background: linear-gradient(135deg, rgba(168,85,247,0.15), rgba(59,130,246,0.1)); }
.nart-cover-disaster { background: linear-gradient(135deg, rgba(255,69,58,0.12), rgba(255,159,10,0.08)); }
.nart-cover-code { background: linear-gradient(135deg, rgba(52,199,89,0.12), rgba(88,86,214,0.08)); }
.nart-cover-wash { background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(52,199,89,0.08)); }
.nart-cover-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, var(--bg-card) 100%);
}
.nart-cover-icon {
  font-size: 2.5rem;
  color: var(--accent);
  opacity: 0.2;
  transition: all 0.3s;
  z-index: 1;
}
.nart-card:hover .nart-cover-icon { opacity: 0.4; transform: scale(1.1); }

.nart-featured-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  background: var(--accent);
  color: #fff;
  border-radius: 5px;
  z-index: 2;
  display: flex; align-items: center; gap: 4px;
}
.nart-featured-badge i { font-size: 0.55rem; }

/* Featured card spans full width */
.nart-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
.nart-featured .nart-card-cover { height: auto; min-height: 220px; }
.nart-featured .nart-card-body { padding: 24px; display: flex; flex-direction: column; justify-content: center; }

/* Card Body */
.nart-card-body { padding: 16px; }
.nart-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.nart-category { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #3b82f6; }
.nart-date { font-size: 0.68rem; color: var(--text-muted); }
.nart-title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--text-primary); line-height: 1.35; margin-bottom: 8px; transition: color 0.2s; }
.nart-card:hover .nart-title { color: #3b82f6; }
.nart-excerpt { font-size: 0.82rem; line-height: 1.6; color: var(--text-secondary); margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nart-featured .nart-excerpt { -webkit-line-clamp: 4; }
.nart-card-footer { display: flex; align-items: center; justify-content: space-between; }
.nart-tags { display: flex; gap: 4px; }
.nart-tag { font-size: 0.62rem; font-weight: 600; padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--text-muted); }
.nart-readtime { font-size: 0.68rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.nart-readtime i { font-size: 0.58rem; color: #3b82f6; }

/* =============================================
   BLOGS — Notion Magazine Style
   ============================================= */
.blogs-section { background: var(--bg-secondary); }

/* Blog Hero */
.nblog-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}
.nblog-hero:hover { border-color: rgba(168,85,247,0.2); box-shadow: 0 8px 32px var(--shadow); }
.nblog-hero-accent {
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #a855f7, var(--accent));
  border-radius: 4px 0 0 4px;
}
.nblog-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a855f7;
  margin-bottom: 12px;
}
.nblog-hero-badge i { font-size: 0.65rem; }
.nblog-hero-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 12px;
  transition: color 0.2s;
}
.nblog-hero:hover .nblog-hero-title { color: #a855f7; }
.nblog-hero-excerpt {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 16px;
  max-width: 600px;
}
.nblog-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.nblog-hero-meta span { display: flex; align-items: center; gap: 5px; }
.nblog-hero-meta i { font-size: 0.62rem; color: #a855f7; }
.nblog-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 120px;
}
.nblog-hero-icon-large { font-size: 4rem; color: #a855f7; opacity: 0.15; transition: all 0.3s; }
.nblog-hero:hover .nblog-hero-icon-large { opacity: 0.3; transform: scale(1.1); }
.nblog-hero-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(168,85,247,0.15) 1px, transparent 1px);
  background-size: 8px 8px;
  opacity: 0.5;
  border-radius: 12px;
}

/* Blog Posts List */
.nblog-list {
  display: flex;
  flex-direction: column;
  gap: 14px; /* prevents overlap & gives breathing room between cards */
}
.nblog-post {
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 20px 24px;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.3s var(--ease-smooth), border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  position: relative;
  overflow: hidden;
  flex-shrink: 0; /* keep height inside scroller — no squishing */
  opacity: 0;
  animation: slideInUp 0.4s var(--ease-out) forwards;
}
.nblog-post:nth-child(1) { animation-delay: 0.03s; }
.nblog-post:nth-child(2) { animation-delay: 0.06s; }
.nblog-post:nth-child(3) { animation-delay: 0.09s; }
.nblog-post:nth-child(4) { animation-delay: 0.12s; }
.nblog-post::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: #a855f7;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s;
}
.nblog-post:hover::before { transform: scaleY(1); }
.nblog-post:hover { border-color: rgba(168,85,247,0.15); transform: translateX(4px); box-shadow: 0 4px 16px var(--shadow); }

.nblog-post-number {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--border-strong);
  line-height: 1;
  min-width: 36px;
  display: flex;
  align-items: flex-start;
  padding-top: 4px;
}
.nblog-post:hover .nblog-post-number { color: rgba(168,85,247,0.3); }

.nblog-post-content { flex: 1; min-width: 0; }
.nblog-post-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.nblog-post-cat {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: 5px;
}
.nblog-post-cat i { font-size: 0.6rem; }
.nblog-cat-field { background: rgba(255,159,10,0.1); color: #ff9f0a; }
.nblog-cat-tech { background: rgba(59,130,246,0.1); color: #3b82f6; }
.nblog-cat-story { background: rgba(52,199,89,0.1); color: #34c759; }
.nblog-cat-personal { background: rgba(168,85,247,0.1); color: #a855f7; }
.nblog-post-date { font-size: 0.72rem; color: var(--text-muted); }
.nblog-post-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--text-primary); line-height: 1.35; margin-bottom: 8px; transition: color 0.2s; }
.nblog-post:hover .nblog-post-title { color: #a855f7; }
.nblog-post-excerpt { font-size: 0.85rem; line-height: 1.65; color: var(--text-secondary); margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nblog-post-footer { display: flex; align-items: center; justify-content: space-between; }
.nblog-post-tags { display: flex; gap: 4px; }
.nblog-tag { font-size: 0.62rem; font-weight: 600; padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--text-muted); transition: all 0.2s; }
.nblog-post:hover .nblog-tag { border-color: rgba(168,85,247,0.2); color: #a855f7; }
.nblog-post-read { font-size: 0.68rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.nblog-post-read i { font-size: 0.58rem; color: #a855f7; }
.nblog-post-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 28px; flex-shrink: 0;
  color: var(--text-muted); font-size: 0.75rem;
  opacity: 0; transition: all 0.3s;
}
.nblog-post:hover .nblog-post-arrow { opacity: 1; color: #a855f7; transform: translateX(4px); }

/* =============================================
   ARTICLES & BLOGS — OLD (compat)
   ============================================= */

.notion-content-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notion-content-card {
  display: flex;
  align-items: stretch;
  gap: 18px;
  padding: 20px 22px;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all 0.3s var(--ease-smooth);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.notion-content-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s var(--ease-out);
  border-radius: 0 2px 2px 0;
}

.notion-content-card:hover::before {
  transform: scaleY(1);
}

.notion-content-card:hover {
  border-color: rgba(255,140,30,0.15);
  box-shadow: 0 4px 16px var(--shadow);
  transform: translateX(4px);
}

.notion-content-left {
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}

.notion-content-icon-wrap {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.notion-icon-article {
  background: rgba(59,130,246,0.1);
  color: #3b82f6;
}

.notion-icon-blog {
  background: rgba(168,85,247,0.1);
  color: #a855f7;
}

.notion-content-body {
  flex: 1;
  min-width: 0;
}

.notion-content-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}

.notion-content-category {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.notion-content-date {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}

.notion-content-date i {
  font-size: 0.62rem;
  color: var(--text-muted);
}

.notion-content-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 8px;
  transition: color 0.25s ease;
}

.notion-content-card:hover .notion-content-title {
  color: var(--accent);
}

.notion-content-excerpt {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notion-content-footer {
  display: flex;
  align-items: center;
  gap: 14px;
}

.notion-content-read-time {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}

.notion-content-read-time i {
  font-size: 0.62rem;
  color: var(--accent);
}

.notion-content-tag {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 2px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  letter-spacing: 0.03em;
}

.notion-content-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  transition: all 0.3s var(--ease-smooth);
  opacity: 0;
}

.notion-content-card:hover .notion-content-arrow {
  opacity: 1;
  color: var(--accent);
  transform: translateX(4px);
}

/* Blog cards — purple accent */
.notion-card-blog::before {
  background: #a855f7;
}

.notion-card-blog:hover .notion-content-title {
  color: #a855f7;
}

/* Content card stagger animation */
.notion-content-card {
  opacity: 0;
  animation: slideInUp 0.4s var(--ease-out) forwards;
}

.notion-content-card:nth-child(1) { animation-delay: 0.03s; }
.notion-content-card:nth-child(2) { animation-delay: 0.06s; }
.notion-content-card:nth-child(3) { animation-delay: 0.09s; }
.notion-content-card:nth-child(4) { animation-delay: 0.12s; }
.notion-content-card:nth-child(5) { animation-delay: 0.15s; }

/* Blog accent color in dark theme */
[data-theme="dark"] .notion-icon-blog { background: rgba(168,85,247,0.12); }
[data-theme="dark"] .notion-icon-article { background: rgba(59,130,246,0.12); }

/* Section dividers */
.blogs-section::before {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: #a855f7;
  opacity: 0.3;
  margin: 0 auto 40px;
}

/* =============================================
   LIGHT THEME — Redesign Overrides
   ============================================= */
/* Projects Database */
[data-theme="light"] .ndb-wrapper,
[data-theme="light"] .npub-db,
[data-theme="light"] .npub-metric,
[data-theme="light"] .nart-card,
[data-theme="light"] .nblog-hero,
[data-theme="light"] .nblog-post {
  background: rgba(255,255,255,0.7);
  border-color: rgba(44,24,16,0.08);
}
[data-theme="light"] .ndb-wrapper:hover { background: transparent; }
[data-theme="light"] .ndb-row:hover {
  background: rgba(208,104,0,0.025);
  box-shadow: inset 3px 0 0 var(--accent);
}
[data-theme="light"] .npub-row:hover { background: rgba(208,104,0,0.03); }
[data-theme="light"] .ndb-row:hover .ndb-project-name { color: var(--accent); }
[data-theme="light"] .ndb-pill { border-color: rgba(44,24,16,0.1); }
[data-theme="light"] .ndb-pill.active { background: rgba(208,104,0,0.08); border-color: var(--accent); }
[data-theme="light"] .ndb-view-toggle { background: rgba(44,24,16,0.04); }
[data-theme="light"] .ndb-view-btn.active { background: var(--accent); }
[data-theme="light"] .ndb-board-card { background: rgba(255,255,255,0.8); border-color: rgba(44,24,16,0.06); }
[data-theme="light"] .ndb-board-card:hover { border-color: rgba(208,104,0,0.2); }
[data-theme="light"] .ndb-project-icon { background: rgba(208,104,0,0.06); }
[data-theme="light"] .ndb-status-active { background: rgba(52,199,89,0.08); }
[data-theme="light"] .ndb-status-done { background: rgba(88,86,214,0.06); }

/* Publications */
[data-theme="light"] .npub-era-pill { border-color: rgba(44,24,16,0.1); }
[data-theme="light"] .npub-era-pill.active { background: rgba(208,104,0,0.08); border-color: var(--accent); }
[data-theme="light"] .npub-sort-btn, [data-theme="light"] .npub-filter-btn { border-color: rgba(44,24,16,0.1); }
[data-theme="light"] .npub-year { background: rgba(208,104,0,0.06); }
[data-theme="light"] .npub-scholar-link { background: rgba(255,255,255,0.6); border-color: rgba(44,24,16,0.1); }

/* Articles */
[data-theme="light"] .nart-tab { border-color: rgba(44,24,16,0.1); }
[data-theme="light"] .nart-tab.active { background: rgba(59,130,246,0.08); }
[data-theme="light"] .nart-card:hover { border-color: rgba(59,130,246,0.2); box-shadow: 0 8px 28px rgba(44,24,16,0.06); }
[data-theme="light"] .nart-tag { border-color: rgba(44,24,16,0.1); }
[data-theme="light"] .nart-card-cover { opacity: 0.85; }

/* Blogs */
[data-theme="light"] .nblog-hero:hover { border-color: rgba(168,85,247,0.2); }
[data-theme="light"] .nblog-post:hover { border-color: rgba(168,85,247,0.15); box-shadow: 0 4px 16px rgba(44,24,16,0.06); }
[data-theme="light"] .nblog-tag { border-color: rgba(44,24,16,0.1); }
[data-theme="light"] .nblog-post:hover .nblog-tag { border-color: rgba(168,85,247,0.2); }

/* OLD compat overrides */
[data-theme="light"] .notion-filter-pill { border-color: rgba(44,24,16,0.12); color: var(--text-secondary); }
[data-theme="light"] .notion-filter-pill.active { background: rgba(208,104,0,0.08); border-color: var(--accent); color: var(--accent); }
[data-theme="light"] .notion-project-block { background: rgba(255,255,255,0.6); border-color: rgba(44,24,16,0.08); }
[data-theme="light"] .notion-tag { background: rgba(255,255,255,0.5); border-color: rgba(44,24,16,0.1); }
[data-theme="light"] .notion-pub-group { background: rgba(255,255,255,0.6); border-color: rgba(44,24,16,0.08); }
[data-theme="light"] .notion-pill-count { background: rgba(208,104,0,0.1); }

/* =============================================
   RESPONSIVE — All Redesigned Sections
   ============================================= */
@media (max-width: 768px) {
  /* Projects Table — Stack on mobile */
  .ndb-thead { display: none; }
  .ndb-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
  }
  .ndb-col-project { flex-wrap: wrap; }
  .ndb-project-name, .ndb-project-sub { white-space: normal; }
  .ndb-toolbar { flex-direction: column; align-items: flex-start; }
  .ndb-filter-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ndb-filter-pills::-webkit-scrollbar { display: none; }
  .ndb-pill { white-space: nowrap; flex-shrink: 0; }
  .ndb-board-cols { flex-direction: column; }
  .ndb-board-col { min-width: auto; }

  /* Publications Table — Stack on mobile */
  .npub-header { display: none; }
  .npub-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
  }
  .npub-metrics { gap: 8px; }
  .npub-metric { padding: 6px 12px; font-size: 0.78rem; }
  .npub-db-toolbar { flex-direction: column; align-items: flex-start; }

  /* Articles Gallery */
  .nart-gallery { grid-template-columns: 1fr; }
  .nart-featured { grid-template-columns: 1fr; }
  .nart-featured .nart-card-cover { min-height: 140px; }
  .nart-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nart-tabs::-webkit-scrollbar { display: none; }
  .nart-tab { white-space: nowrap; flex-shrink: 0; }

  /* Blog Hero */
  .nblog-hero { grid-template-columns: 1fr; padding: 24px; }
  .nblog-hero-visual { display: none; }
  .nblog-hero-title { font-size: 1.2rem; }

  /* Blog posts */
  .nblog-post { gap: 12px; padding: 16px; }
  .nblog-post-number { font-size: 1.2rem; min-width: 28px; }
  .nblog-post-arrow { display: none; }
}

@media (max-width: 480px) {
  .ndb-pill { padding: 4px 10px; font-size: 0.68rem; }
  .ndb-view-toggle { display: none; }
  .nart-gallery { gap: 10px; }
  .nart-card-cover { height: 90px; }
  .nblog-post-number { display: none; }
  .nblog-post-excerpt { -webkit-line-clamp: 2; }
  .npub-filter-row { gap: 3px; }
  .npub-era-pill { padding: 3px 8px; font-size: 0.65rem; }
}

/* =========================================================
   ================== NEW 2026 ADDITIONS ===================
   ========================================================= */

/* ---------- HERO: globe hint ---------- */
.globe-hint {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(15, 15, 26, 0.75);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 140, 30, 0.28);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  pointer-events: none;
  animation: globeHintFloat 3.2s ease-in-out infinite;
}
.globe-hint i { color: var(--accent); }
@keyframes globeHintFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.85; }
  50%      { transform: translateX(-50%) translateY(-4px); opacity: 1; }
}
#globeCanvas {
  cursor: grab;
  user-select: none;
  touch-action: none;
}

/* ---------- ABOUT: portrait on the right ---------- */
.about-portrait {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 28px;
}
.about-portrait-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  aspect-ratio: 16 / 11;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255,140,30,0.10), rgba(255,255,255,0.02));
  border: 1px solid rgba(255, 140, 30, 0.22);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.about-portrait-frame:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,140,30,0.35),
    0 0 40px rgba(255,140,30,0.15);
}
.about-portrait-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.02);
  transition: transform 1.2s var(--ease-out);
}
.about-portrait-frame:hover .about-portrait-img {
  transform: scale(1.04);
}
.about-portrait-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11,11,20,0.85) 100%);
  display: flex;
  align-items: flex-end;
  padding: 18px;
  pointer-events: none;
}
.about-portrait-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(15,15,26,0.85);
  border: 1px solid rgba(255,140,30,0.35);
  border-radius: 999px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
}
.about-portrait-badge i { color: var(--accent); font-size: 0.72rem; }
/* Corner accents */
.about-portrait-corner {
  position: absolute;
  width: 22px; height: 22px;
  border-color: var(--accent);
  border-style: solid;
  border-width: 0;
  opacity: 0.85;
  pointer-events: none;
}
.about-portrait-corner-tl { top: 10px;    left: 10px;  border-top-width: 2px;    border-left-width: 2px;  border-top-left-radius: 6px; }
.about-portrait-corner-tr { top: 10px;    right: 10px; border-top-width: 2px;    border-right-width: 2px; border-top-right-radius: 6px; }
.about-portrait-corner-bl { bottom: 10px; left: 10px;  border-bottom-width: 2px; border-left-width: 2px;  border-bottom-left-radius: 6px; }
.about-portrait-corner-br { bottom: 10px; right: 10px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 6px; }

.about-portrait-meta {
  margin-top: 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.about-portrait-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}
.about-portrait-title {
  font-size: 0.78rem;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

/* ============================================================
   ECOSYSTEM SECTION — section shell kept; body replaced by the
   PROFESSIONAL JOURNEY TIMELINE (horizontal, dual-rail).
   ============================================================ */
.ecosystem { background: var(--bg-primary); position: relative; overflow: hidden; }
.ecosystem::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 140, 30, 0.06), transparent 55%),
    radial-gradient(circle at 15% 80%, rgba(0, 232, 237, 0.05), transparent 55%),
    radial-gradient(circle at 85% 20%, rgba(255, 0, 139, 0.04), transparent 55%);
  pointer-events: none;
}

/* ---------- Stage shell (dark, glassy, framed) ---------- */
.journey-stage {
  position: relative;
  margin-top: 40px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(15,15,26,0.6), rgba(11,11,20,0.95)),
    radial-gradient(circle at center, rgba(255,140,30,0.08), transparent 55%);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 0 80px rgba(0,0,0,0.5);
  overflow: hidden;
  isolation: isolate;
}

/* ---------- Loader (timeline-scoped) ---------- */
.journey-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(11,11,20,0.92);
  z-index: 10;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.journey-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}
.journey-spinner {
  width: 46px; height: 46px;
  border: 4px solid rgba(255,255,255,0.10);
  border-top-color: var(--accent, #ff8c20);
  border-radius: 50%;
  animation: journeySpin 1s linear infinite;
}
@keyframes journeySpin { to { transform: rotate(360deg); } }
.journey-loader-text {
  margin: 0;
  color: rgba(255,255,255,0.55);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ---------- Edge fades + scrollable viewport ---------- */
.journey-fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 6;
  transition: opacity 0.3s ease;
}
.journey-fade-left  { left: 0;  background: linear-gradient(to right, rgba(11,11,20,0.95), rgba(11,11,20,0)); }
.journey-fade-right { right: 0; background: linear-gradient(to left,  rgba(11,11,20,0.95), rgba(11,11,20,0)); }
.journey-stage[data-at-start="true"]  .journey-fade-left  { opacity: 0; }
.journey-stage[data-at-end="true"]    .journey-fade-right { opacity: 0; }

.journey-viewport {
  width: 100%;
  height: clamp(620px, 88vh, 880px);
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scroll-behavior: smooth;
  scrollbar-color: var(--accent, #ff8c20) rgba(255,255,255,0.06);
  scrollbar-width: thin;
}
.journey-viewport.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.journey-viewport::-webkit-scrollbar { height: 8px; }
.journey-viewport::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
.journey-viewport::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--accent, #ff8c20), var(--accent-light, #ffaa50));
  border-radius: 4px;
}

/* Reveal animation for the stage on first scroll-in */
.journey-stage {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.journey-stage.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Wrapper / canvas ---------- */
.journey-wrapper {
  position: relative;
  min-width: 1900px;
  height: 100%;
  padding: 40px;
  user-select: none;
}

/* ---------- Central dashed axis ---------- */
.journey-axis {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    rgba(255,210,122,0.55) 0,
    rgba(255,210,122,0.55) 10px,
    transparent 10px,
    transparent 20px
  );
  z-index: 2;
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(255,140,30,0.25);
}

/* ---------- COVID period band ---------- */
.journey-covid-range {
  position: absolute;
  top: calc(50% - 14px);
  height: 28px;
  border-top: 2px dashed rgba(239, 68, 68, 0.65);
  border-bottom: 2px dashed rgba(239, 68, 68, 0.65);
  background: linear-gradient(180deg,
    rgba(239,68,68,0.10),
    rgba(239,68,68,0.04));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  border-radius: 2px;
}
.journey-covid-label {
  color: #ff6b6b;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-shadow: 0 0 14px rgba(239,68,68,0.45);
}
.journey-covid-years {
  position: absolute;
  top: -22px;
  font-size: 0.7rem;
  color: rgba(248, 113, 113, 0.85);
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* ---------- Timeline node (top + bottom variants) ---------- */
.journey-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  width: 240px;
  z-index: 5;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s;
  outline: none;
}
.journey-node:hover { transform: translateY(-3px) scale(1.03); z-index: 7; }
.journey-node-focused {
  outline: 2px solid rgba(255, 140, 30, 0.8);
  outline-offset: 5px;
  border-radius: 16px;
}
.journey-node:focus-visible {
  filter: drop-shadow(0 0 8px var(--accent, #ff8c20));
}

/* TOP: card sits above the axis; line drops down to a dot at midline; date below dot */
.journey-node-top {
  bottom: 50%;
  padding-bottom: 0;
  transform-origin: bottom center;
}
.journey-node-top .journey-line {
  margin-top: 12px;
}
.journey-node-top .journey-dot {
  margin-top: 0;
}
.journey-node-top .journey-date {
  margin-top: 8px;
  position: absolute;
  bottom: -28px;
}

/* BOTTOM: dot at midline at top; date right under dot; line drops; card below */
.journey-node-bottom {
  top: 50%;
  transform-origin: top center;
}
.journey-node-bottom .journey-dot { margin-top: 0; }
.journey-node-bottom .journey-date-bottom {
  margin-top: 6px;
  position: static;
}
.journey-node-bottom .journey-line { margin-top: 4px; }
.journey-node-bottom .journey-card { margin-top: 14px; }

/* ---------- Dot + connecting line ---------- */
.journey-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent, #ff8c20);
  border: 3px solid #0b0b14;
  box-shadow:
    0 0 0 2px var(--accent, #ff8c20),
    0 0 14px rgba(255,140,30,0.55);
  position: relative;
  z-index: 6;
  flex-shrink: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.journey-node:hover .journey-dot {
  transform: scale(1.25);
  box-shadow:
    0 0 0 2px var(--accent-light, #ffaa50),
    0 0 22px rgba(255,170,80,0.85);
}
.journey-dot-accent {
  background: #3b82f6;
  box-shadow: 0 0 0 2px #3b82f6, 0 0 14px rgba(59,130,246,0.6);
}
.journey-node:hover .journey-dot-accent {
  box-shadow: 0 0 0 2px #60a5fa, 0 0 22px rgba(96,165,250,0.85);
}

.journey-line {
  width: 0;
  border-left: 1.5px dashed rgba(255,210,122,0.55);
  flex-shrink: 0;
}

/* ---------- Date label ---------- */
.journey-date {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  white-space: nowrap;
  padding: 3px 10px;
  background: rgba(15,15,26,0.85);
  border: 1px solid rgba(255,140,30,0.35);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.journey-date-bottom { /* same look, just positioned in flow */ }

/* ---------- Card / content block ---------- */
.journey-card {
  background: rgba(20,20,32,0.85);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
  width: 100%;
  max-width: 240px;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.journey-node:hover .journey-card {
  border-color: rgba(255,140,30,0.45);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,140,30,0.25);
}
.journey-card-edu {
  background: linear-gradient(135deg, rgba(255,140,30,0.18), rgba(255,140,30,0.05));
  border-color: rgba(255,140,30,0.35);
}

.journey-card-title {
  display: block;
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.35;
  color: rgba(255,255,255,0.95);
  margin-bottom: 4px;
}
.journey-card-sub {
  display: block;
  font-size: 0.74rem;
  color: rgba(255,255,255,0.65);
  margin-bottom: 4px;
}
.journey-card-org {
  display: block;
  font-weight: 600;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.85);
  margin-top: 2px;
}
.journey-card-line {
  display: block;
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.85);
  margin-bottom: 6px;
}
.journey-card-mega {
  display: block;
  font-weight: 900;
  font-size: 1.85rem;
  letter-spacing: 0.02em;
  color: #93c5fd;
  text-shadow: 0 0 18px rgba(59,130,246,0.45);
  margin-top: 4px;
}
.journey-card-link {
  display: inline-block;
  margin-top: 4px;
  color: #60a5fa;
  font-size: 0.78rem;
  text-decoration: underline;
  text-decoration-color: rgba(96,165,250,0.4);
  text-underline-offset: 3px;
}
.journey-card-link:hover { color: #93c5fd; }
.journey-card-note {
  margin: 8px 0 0;
  font-size: 0.68rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.55);
}

/* Color helpers (echoed from original timeline) */
.journey-c-orange       { color: var(--accent-light, #ffaa50); }
.journey-c-orange-soft  { color: rgba(255,170,80,0.78); }
.journey-c-blue         { color: #60a5fa; }
.journey-c-blue-strong  { color: #93c5fd; }
.journey-c-green        { color: #6ee7b7; }

/* ---------- Badges row ---------- */
.journey-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
}
.journey-badges-row { align-items: center; }

.journey-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  line-height: 1.2;
}
.journey-badge-blue        { background: rgba(59,130,246,0.18); color: #93c5fd; border: 1px solid rgba(59,130,246,0.35); }
.journey-badge-green       { background: rgba(34,197,94,0.18);  color: #86efac; border: 1px solid rgba(34,197,94,0.35); }
.journey-badge-blue-soft   { background: rgba(59,130,246,0.10); border: 1px solid rgba(59,130,246,0.25); width: 26px; height: 26px; padding: 0; }
.journey-badge-green-soft  { background: rgba(34,197,94,0.10); border: 1px solid rgba(34,197,94,0.25); width: 26px; height: 26px; padding: 0; }
.journey-badge-outline     { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.20); color: rgba(255,255,255,0.85); font-size: 0.55rem; padding: 3px 6px; }
.journey-badge-outline-red { background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.55); color: #fca5a5; }
.journey-badge-solid-blue  { background: #2563eb; color: #fff; }
.journey-badge-solid-cyan  { background: #0891b2; color: #fff; }
.journey-badge-solid-green { background: #15803d; color: #fff; }
.journey-badge-solid-red   { background: #b91c1c; color: #fff; }
.journey-badge-circle      { border-radius: 50%; width: 28px; height: 28px; padding: 0; font-size: 0.58rem; }
.journey-badge-lg          { width: 44px; height: 44px; font-size: 0.7rem; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.95); border: 1px solid rgba(255,255,255,0.15); }
.journey-badge-tiny        { font-size: 0.55rem; color: rgba(255,255,255,0.5); letter-spacing: 0.05em; max-width: 110px; line-height: 1.25; text-align: left; }

/* ---------- Drag-to-scroll hint chip ---------- */
.journey-scroll-hint {
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(15,15,26,0.85);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,140,30,0.25);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  z-index: 8;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.journey-scroll-hint i { color: var(--accent, #ff8c20); animation: journeyArrowPulse 1.6s ease-in-out infinite; }
@keyframes journeyArrowPulse {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
.journey-stage[data-hint-hidden="true"] .journey-scroll-hint { opacity: 0; }

/* ---------- Side detail panel + backdrop ---------- */
.journey-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 9000;
}
.journey-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.journey-panel {
  position: fixed;
  top: 0; right: 0;
  width: min(420px, 92vw);
  height: 100vh;
  background: linear-gradient(180deg, #0e0e1a, #0b0b14);
  border-left: 1px solid rgba(255,140,30,0.25);
  box-shadow: -16px 0 50px rgba(0,0,0,0.55);
  padding: 56px 36px 36px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 9001;
}
.journey-panel.is-open {
  transform: translateX(0);
}
.journey-panel-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.journey-panel-close:hover {
  background: rgba(255,140,30,0.12);
  border-color: rgba(255,140,30,0.4);
  color: var(--accent-light, #ffaa50);
  transform: rotate(90deg);
}
.journey-panel-body { color: rgba(255,255,255,0.85); }
.journey-panel-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent, #ff8c20);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.journey-panel-title {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 6px;
}
.journey-panel-org {
  color: #93c5fd;
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0 0 18px;
}
.journey-panel-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(255,140,30,0.45), transparent);
  margin: 18px 0 22px;
}
.journey-panel-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  margin: 0 0 10px;
}
.journey-panel-desc {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
  margin: 0 0 22px;
}
.journey-panel-impact {
  border-left: 3px solid var(--accent, #ff8c20);
  background: linear-gradient(90deg, rgba(255,140,30,0.10), rgba(255,140,30,0));
  padding: 14px 16px;
  border-radius: 0 10px 10px 0;
}
.journey-panel-impact p {
  margin: 0;
  color: var(--accent-light, #ffaa50);
  font-size: 0.92rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.55;
}
.journey-panel-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 32px;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--accent, #ff8c20), var(--accent-dark, #cc6600));
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.journey-panel-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255,140,30,0.35);
  filter: brightness(1.05);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .journey-viewport { height: clamp(560px, 80vh, 760px); }
  .journey-wrapper { min-width: 1750px; padding: 32px; }
  .journey-card { max-width: 220px; padding: 12px 14px; }
  .journey-card-title { font-size: 0.82rem; }
  .journey-card-mega { font-size: 1.55rem; }
}
@media (max-width: 768px) {
  .journey-viewport { height: 580px; }
  .journey-wrapper { min-width: 1600px; padding: 24px; }
  .journey-node { width: 200px; }
  .journey-card { max-width: 200px; padding: 10px 12px; }
  .journey-card-title { font-size: 0.78rem; }
  .journey-card-sub { font-size: 0.68rem; }
  .journey-date { font-size: 0.7rem; padding: 2px 8px; }
  .journey-scroll-hint { font-size: 0.62rem; padding: 5px 10px; }
  .journey-panel { padding: 56px 24px 24px; }
  .journey-panel-title { font-size: 1.3rem; }
}

/* ---------- PROJECTS: Visual Diagram CTA ---------- */
.proj-diagram-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0 32px;
}
.proj-diagram-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(255,140,30,0.12), rgba(255,140,30,0.03));
  border: 1px solid rgba(255,140,30,0.35);
  border-radius: 16px;
  cursor: pointer;
  color: var(--text-primary);
  text-decoration: none;
  text-align: left;
  font-family: inherit;
  transition: all 0.35s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.proj-diagram-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,140,30,0.15), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.proj-diagram-btn:hover {
  transform: translateY(-3px);
  border-color: rgba(255,140,30,0.7);
  box-shadow: 0 18px 40px rgba(255,140,30,0.18), 0 0 0 1px rgba(255,140,30,0.3);
}
.proj-diagram-btn:hover::before { transform: translateX(100%); }
.pdb-icon {
  width: 48px; height: 48px; flex: 0 0 48px;
  display: grid; place-items: center;
  background: rgba(255,140,30,0.15);
  border: 1px solid rgba(255,140,30,0.35);
  border-radius: 12px;
  color: var(--accent);
  font-size: 1.2rem;
}
.pdb-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.pdb-title { font-size: 0.98rem; font-weight: 600; color: var(--text-primary); }
.pdb-sub   { font-size: 0.78rem; color: var(--text-secondary); }
.pdb-arrow {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
  color: var(--accent);
  transition: transform 0.35s;
}
.proj-diagram-btn:hover .pdb-arrow { transform: translateX(4px) rotate(-8deg); background: rgba(255,140,30,0.2); }
.proj-diagram-btn-alt { background: linear-gradient(135deg, rgba(0,232,237,0.08), rgba(0,232,237,0.02)); border-color: rgba(0,232,237,0.3); }
.proj-diagram-btn-alt .pdb-icon { background: rgba(0,232,237,0.15); border-color: rgba(0,232,237,0.35); color: #00E8ED; }
.proj-diagram-btn-alt .pdb-arrow { color: #00E8ED; }
.proj-diagram-btn-alt:hover { border-color: rgba(0,232,237,0.6); box-shadow: 0 18px 40px rgba(0,232,237,0.15); }

/* ---------- PROJECT DIAGRAM MODAL ---------- */
.pdiag-modal {
  position: fixed; inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}
.pdiag-modal.pdiag-open { display: flex; animation: pdiagFadeIn 0.3s ease; }
@keyframes pdiagFadeIn { from { opacity: 0; } to { opacity: 1; } }
.pdiag-backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 5, 10, 0.82);
  backdrop-filter: blur(6px);
}
.pdiag-sheet {
  position: relative;
  width: min(1280px, 96vw);
  height: min(860px, 94vh);
  background: linear-gradient(180deg, #0d0d18 0%, #070711 100%);
  border: 1px solid rgba(255,140,30,0.25);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,140,30,0.1);
  animation: pdiagSlideUp 0.35s var(--ease-out);
}
@keyframes pdiagSlideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.pdiag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.pdiag-title {
  display: flex; align-items: center; gap: 12px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
}
.pdiag-title i { color: var(--accent); }
.pdiag-actions { display: flex; align-items: center; gap: 6px; }
.pdiag-zoom-btn,
.pdiag-close {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
  border-radius: 10px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: all 0.2s;
  font-size: 0.85rem;
}
.pdiag-zoom-btn:hover,
.pdiag-close:hover {
  background: rgba(255,140,30,0.15);
  border-color: rgba(255,140,30,0.45);
  color: #fff;
}
.pdiag-close:hover { background: rgba(244, 63, 94, 0.2); border-color: rgba(244, 63, 94, 0.5); }

.pdiag-body {
  flex: 1;
  overflow: hidden;
  cursor: grab;
  position: relative;
  background:
    radial-gradient(circle at center, rgba(255,140,30,0.06), transparent 60%),
    linear-gradient(180deg, #07070f, #0b0b16);
}
.pdiag-body:active { cursor: grabbing; }
.pdiag-svg { width: 100%; height: 100%; display: block; user-select: none; }

.pdiag-foot {
  padding: 10px 22px;
  border-top: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.55);
  font-size: 0.78rem;
  background: rgba(0,0,0,0.25);
}
.pdiag-foot i { color: var(--accent); margin-right: 6px; }

/* Diagram nodes */
.pdiag-link { filter: drop-shadow(0 0 4px currentColor); }
.pdiag-label {
  fill: rgba(255,255,255,0.95);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body, 'Inter', sans-serif);
}
.pdiag-sub {
  fill: rgba(255,255,255,0.55);
  font-size: 11px;
  font-family: monospace;
}
.pdiag-sublabel {
  fill: rgba(255,255,255,0.85);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-body, 'Inter', sans-serif);
}
.pdiag-subsub {
  fill: rgba(255,255,255,0.45);
  font-size: 9.5px;
  font-family: monospace;
}
.pdiag-node, .pdiag-subnode { transition: transform 0.25s; }
.pdiag-node:hover, .pdiag-subnode:hover {
  filter: drop-shadow(0 0 12px rgba(255, 140, 30, 0.6));
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .proj-diagram-cta { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .about-portrait-frame { max-width: 260px; }
  .globe-hint { font-size: 0.65rem; padding: 5px 10px; }
  .pdiag-sheet { width: 98vw; height: 92vh; border-radius: 14px; }
  .pdiag-head { padding: 12px 14px; }
  .pdiag-title { font-size: 0.95rem; }
}

/* ================================================================
   COBE GLOBE — DOM-based country dots (rebuilt)
   - Real <button> elements overlaid on the WebGL canvas
   - Reliable hover & click via native pointer events
   - Side label that auto-flips left/right and nudges to avoid overlap
   ================================================================ */
.hero-globe-container { overflow: visible; }

.cobe-dot-layer {
  position: absolute;
  inset: 0;
  pointer-events: none; /* layer is transparent; only dots receive events */
  z-index: 5;
}

.cobe-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;          /* generous hitbox so dots are easy to click */
  height: 28px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  /* transform is applied each frame in JS */
  transform: translate3d(0, 0, 0) translate(-50%, -50%);
  transition: opacity 0.25s ease;
  display: block;
  font-family: inherit;
}

/* Visible orange dot — visually small, hitbox stays large */
.cobe-dot-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff8c1e;
  box-shadow:
    0 0 0 2px rgba(255, 140, 30, 0.18),
    0 0 10px 2px rgba(255, 140, 30, 0.55);
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  pointer-events: none;
}

.cobe-dot:hover .cobe-dot-inner,
.cobe-dot.is-hovered .cobe-dot-inner,
.cobe-dot:focus-visible .cobe-dot-inner {
  background: #ffae5c;
  transform: translate(-50%, -50%) scale(1.45);
  box-shadow:
    0 0 0 3px rgba(255, 140, 30, 0.28),
    0 0 18px 4px rgba(255, 140, 30, 0.85);
}

/* Dots that have rotated to the back of the globe — fade out, disable */
.cobe-dot.is-back {
  opacity: 0;
  pointer-events: none;
}

/* Side label — appears next to the dot on hover */
.cobe-dot-label {
  position: absolute;
  top: 50%;
  /* horizontal placement set by .label-left / .label-right modifiers */
  transform: translateY(calc(-50% + var(--label-nudge-y, 0px)));
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 140, 30, 0.55);
  background: rgba(9, 12, 18, 0.92);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
}

.cobe-dot.label-right .cobe-dot-label {
  left: calc(50% + 14px);
}
.cobe-dot.label-left .cobe-dot-label {
  right: calc(50% + 14px);
}

/* Connector line from dot to label */
.cobe-dot-label::before {
  content: '';
  position: absolute;
  top: 50%;
  width: 8px;
  height: 1px;
  background: rgba(255, 140, 30, 0.7);
  transform: translateY(-50%);
}
.cobe-dot.label-right .cobe-dot-label::before { left: -8px; }
.cobe-dot.label-left .cobe-dot-label::before { right: -8px; }

/* Show the label only on hover/focus and only for front-facing dots */
.cobe-dot:hover .cobe-dot-label,
.cobe-dot.is-hovered .cobe-dot-label,
.cobe-dot:focus-visible .cobe-dot-label {
  opacity: 1;
}

/* Lift the hovered dot above its siblings so its label is never clipped */
.cobe-dot:hover,
.cobe-dot.is-hovered,
.cobe-dot:focus-visible {
  z-index: 10;
}

.kg-country-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.kg-country-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 140, 30, 0.25);
  background: rgba(255, 140, 30, 0.08);
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
}

button.kg-country-tag {
  appearance: none;
}

.kg-country-tag:hover,
.kg-country-tag:focus-visible {
  border-color: rgba(255, 140, 30, 0.55);
  background: rgba(255, 140, 30, 0.16);
  color: var(--text-primary);
}

.kg-country-tag i {
  color: var(--accent);
  font-size: 10px;
}

/* Publication tag chips — reuse country-tag pill style for visual parity
   with Research/Experience interconnection chips, but slightly tinted to
   signal "tag" vs "country" semantics. Same click target / a11y rules. */
.kg-pub-tag-chips {
  margin-top: 12px;
}
.kg-pub-tag-chips .kg-country-tag {
  border-color: color-mix(in srgb, var(--accent, #ff8c1e) 28%, transparent);
  background: color-mix(in srgb, var(--accent, #ff8c1e) 8%, transparent);
}
.kg-pub-tag-chips .kg-country-tag:hover,
.kg-pub-tag-chips .kg-country-tag:focus-visible {
  border-color: color-mix(in srgb, var(--accent, #ff8c1e) 55%, transparent);
  background: color-mix(in srgb, var(--accent, #ff8c1e) 16%, transparent);
}
.kg-pub-tag-chips .kg-country-tag i {
  font-size: 9px;
  opacity: 0.85;
}

.nd-country-filter-wrap {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.nd-country-filter {
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(15, 17, 22, 0.82);
  color: #e6e8ef;
  font-size: 12px;
  padding: 8px 10px;
}

.nd-country-rel {
  margin-top: 10px;
  font-size: 11px;
  color: rgba(230,232,239,0.78);
  line-height: 1.5;
}

.nd-country-rel strong {
  color: #ffb066;
}

@media (max-width: 768px) {
  .cobe-dot { width: 32px; height: 32px; }            /* even bigger hitbox on touch */
  .cobe-dot-inner { width: 10px; height: 10px; }
  .cobe-dot-label { font-size: 0.55rem; padding: 4px 8px; }
}

/* =========================================================
   FLOATING AI ASSISTANT WIDGET (site-wide)
   Collapsed: circular floating button bottom-right
   Expanded: 400x600 panel anchored to bottom-right
   ========================================================= */
.kg-fab-ai {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(12, 15, 22, 0.95), rgba(20, 24, 33, 0.95));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 140, 30, 0.35);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(255, 140, 30, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9998;
  transition: transform 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.25s, border-color 0.25s;
  animation: kg-fab-float 3.5s ease-in-out infinite;
  color: #FF8C1E; /* drives currentColor in the SVG mark */
}
/* Light mode FAB: white bg + orange mark */
[data-theme="light"] .kg-fab-ai {
  background: linear-gradient(135deg, #ffffff, #fff7ed);
  border-color: rgba(255, 140, 30, 0.45);
  box-shadow:
    0 8px 24px rgba(17, 24, 39, 0.10),
    0 0 0 1px rgba(255, 140, 30, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  color: #f97316;
}
[data-theme="light"] .kg-fab-ai:hover {
  border-color: rgba(255, 140, 30, 0.7);
  box-shadow:
    0 12px 32px rgba(17, 24, 39, 0.14),
    0 0 24px rgba(255, 140, 30, 0.20);
}
/* Header / welcome marks pick up orange in both themes */
.kg-ai-logo, .kg-ai-w-logo { color: #FF8C1E; }
[data-theme="light"] .kg-ai-logo,
[data-theme="light"] .kg-ai-w-logo { color: #f97316; }
/* Subtle slow rotation on the orbit ring of the welcome mark */
.kg-ai-brand-lg ellipse { transform-origin: 32px 32px; }
.kg-fab-ai:hover {
  transform: scale(1.08) translateY(-3px);
  border-color: rgba(255, 140, 30, 0.65);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(255, 140, 30, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* Gentle orbital spin on the AI brand mark */
.kg-fab-ai .kg-ai-brand,
.kg-ai-logo .kg-ai-brand,
.kg-ai-msg-avatar-a svg {
  transition: transform 0.4s ease;
}
.kg-fab-ai:hover .kg-ai-brand { transform: scale(1.06); }
.kg-ai-brand-lg { animation: kg-brand-pulse 4s ease-in-out infinite; }
@keyframes kg-brand-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,140,30,0)); }
  50%      { transform: scale(1.04); filter: drop-shadow(0 0 8px rgba(255,140,30,0.35)); }
}
.kg-ai-w-logo svg { width: 56px; height: 56px; }
/* Light mode adapts the welcome tile background */
[data-theme="light"] .kg-ai-brand-lg rect:first-of-type {
  fill: rgba(255,140,30,0.10);
  stroke: rgba(255,140,30,0.28);
}
@keyframes kg-fab-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.kg-fab-ai-badge {
  position: absolute;
  top: 6px; right: 6px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
  animation: kg-fab-pulse 2s ease-in-out infinite;
}
@keyframes kg-fab-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
  50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

/* Panel */
.kg-ai-panel {
  position: fixed;
  right: 24px;
  bottom: 96px;
  width: 400px;
  height: min(620px, calc(100vh - 120px));
  max-width: calc(100vw - 48px);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.96);
  transition: opacity 0.25s, transform 0.25s cubic-bezier(.4,0,.2,1), visibility 0.25s;
  pointer-events: none;
}
.kg-ai-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.kg-ai-panel-inner {
  width: 100%; height: 100%;
  background: linear-gradient(180deg, rgba(10, 13, 18, 0.96), rgba(15, 17, 23, 0.96));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow:
    0 24px 72px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #ececec;
  font-family: 'Inter', system-ui, sans-serif;
}

/* Header */
.kg-ai-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.kg-ai-header-left { display: flex; align-items: center; gap: 10px; }
.kg-ai-logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255, 140, 30, 0.08);
  border: 1px solid rgba(255, 140, 30, 0.15);
  display: inline-flex; align-items: center; justify-content: center;
}
.kg-ai-header-title {
  font-size: 14px; font-weight: 600; color: #ececec;
  letter-spacing: -0.01em;
}
.kg-ai-header-sub {
  font-size: 11px; color: #9ba3b8;
  display: flex; align-items: center; gap: 5px;
}
.kg-ai-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,0.6);
}
.kg-ai-header-right { display: flex; gap: 4px; }
.kg-ai-icon-btn {
  width: 30px; height: 30px; border-radius: 8px;
  background: transparent; color: #9ba3b8;
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.kg-ai-icon-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }

/* Body */
.kg-ai-body {
  flex: 1;
  overflow-y: auto;
  display: flex; flex-direction: column;
  min-height: 0;
}
.kg-ai-body::-webkit-scrollbar { width: 6px; }
.kg-ai-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

.kg-ai-welcome {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 24px 20px;
  gap: 8px;
}
.kg-ai-w-logo {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.kg-ai-w-hello {
  font-size: 15px; font-weight: 500; color: #9ba3b8;
  margin: 0;
}
.kg-ai-w-title {
  font-size: 17px; font-weight: 600; color: #ececec;
  margin: 0; letter-spacing: -0.01em;
}
.kg-ai-w-desc {
  font-size: 12px; color: #9ba3b8;
  margin: 4px 0 16px;
  max-width: 300px;
  line-height: 1.55;
}
.kg-ai-w-prompts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  max-width: 320px;
}
.kg-ai-w-prompt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: #ececec;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
  font-family: inherit;
}
.kg-ai-w-prompt:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,140,30,0.25);
}

/* Thread */
.kg-ai-thread {
  padding: 16px;
  display: flex; flex-direction: column; gap: 16px;
}
.kg-ai-msg {
  display: flex; gap: 10px; align-items: flex-start;
}
.kg-ai-msg-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.kg-ai-msg-avatar-u {
  background: linear-gradient(135deg, #FFB066, #FF8C1E);
  color: #fff;
}
.kg-ai-msg-avatar-a {
  background: rgba(255, 140, 30, 0.12);
  color: #FF8C1E;
  border: 1px solid rgba(255, 140, 30, 0.2);
}
.kg-ai-msg-b { flex: 1; min-width: 0; }
.kg-ai-msg-role { font-size: 11px; font-weight: 600; color: #ececec; margin-bottom: 3px; }
.kg-ai-msg-bubble {
  font-size: 13px; line-height: 1.6; color: #d1d5db;
  word-wrap: break-word; overflow-wrap: break-word;
}
.kg-ai-msg-bubble strong { color: #ececec; font-weight: 600; }
.kg-ai-msg-bubble code {
  background: rgba(255, 140, 30, 0.08);
  color: #FFB266;
  padding: 1px 5px; border-radius: 4px;
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: 12px;
}
.kg-ai-typing {
  display: inline-flex; gap: 3px; align-items: center; padding: 3px 0;
}
.kg-ai-typing span {
  width: 5px; height: 5px; border-radius: 50%;
  background: #9ba3b8;
  animation: kg-ai-typing-bounce 1.4s infinite ease-in-out;
}
.kg-ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.kg-ai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes kg-ai-typing-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.6; }
  40% { transform: scale(1); opacity: 1; }
}

/* Composer */
.kg-ai-composer-wrap {
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.kg-ai-composer {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 5px 5px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.kg-ai-composer:focus-within {
  border-color: rgba(255, 140, 30, 0.4);
  box-shadow: 0 0 0 3px rgba(255, 140, 30, 0.12);
}
.kg-ai-comp-btn {
  width: 30px; height: 30px;
  background: transparent; border: none; border-radius: 50%;
  color: #9ba3b8; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
  font-size: 13px;
}
.kg-ai-comp-btn:hover { background: rgba(255,255,255,0.08); color: #ececec; }
.kg-ai-mic-btn.recording {
  background: #ef4444 !important;
  color: #fff !important;
  animation: kg-ai-mic-pulse 1.1s ease-in-out infinite;
}
@keyframes kg-ai-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
  50% { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
}
.kg-ai-input {
  flex: 1; min-width: 0;
  background: transparent; color: #ececec;
  border: none; outline: none;
  font-family: inherit; font-size: 13px;
  padding: 7px 4px;
}
.kg-ai-input::placeholder { color: #6b7280; }
.kg-ai-send-btn {
  width: 30px; height: 30px;
  background: #ececec; color: #000;
  border: none; border-radius: 50%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  transition: transform 0.12s;
}
.kg-ai-send-btn:hover:not(:disabled) { transform: scale(1.06); }
.kg-ai-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.kg-ai-composer-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
  font-size: 10px; color: #6b7280;
}
.kg-ai-model {
  background: rgba(255,255,255,0.04);
  color: #c3c9d6;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 10px; font-weight: 500;
  cursor: pointer; outline: none;
  font-family: inherit;
}
/* Model picker hidden from visitors — send logic still reads the default
   selected option (openai/gpt-oss-120b) via .value on the hidden select. */
#kgAiModel { display: none !important; }
.kg-ai-rec {
  display: inline-flex; align-items: center; gap: 4px;
  color: #ef4444; font-weight: 500; font-size: 10px;
}
.kg-ai-rec-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #ef4444;
  animation: kg-ai-mic-pulse 1.1s ease-in-out infinite;
}
.kg-ai-foot-note {
  flex: 1; text-align: right; color: #6b7280;
}

/* Mobile */
@media (max-width: 500px) {
  .kg-ai-panel {
    right: 12px; bottom: 82px;
    width: calc(100vw - 24px);
    height: calc(100vh - 110px);
  }
  .kg-fab-ai { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .kg-ai-w-prompts { grid-template-columns: 1fr; }
}

/* Light theme compat */
[data-theme="light"] .kg-ai-panel-inner {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,252,0.98));
  border-color: rgba(0,0,0,0.08);
  color: #111;
}
[data-theme="light"] .kg-ai-header-title { color: #111; }
[data-theme="light"] .kg-ai-header-sub { color: #5a5a6a; }
[data-theme="light"] .kg-ai-w-title { color: #111; }
[data-theme="light"] .kg-ai-w-desc { color: #5a5a6a; }
[data-theme="light"] .kg-ai-w-prompt {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
  color: #111;
}
[data-theme="light"] .kg-ai-msg-bubble { color: #333; }
[data-theme="light"] .kg-ai-msg-role { color: #111; }
[data-theme="light"] .kg-ai-composer {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .kg-ai-input { color: #111; }
[data-theme="light"] .kg-ai-send-btn { background: #111; color: #fff; }
[data-theme="light"] .kg-ai-icon-btn { color: #5a5a6a; }
[data-theme="light"] .kg-ai-icon-btn:hover { background: rgba(0,0,0,0.06); color: #111; }

/* ================================================================
   PROFESSIONAL JOURNEY TIMELINE
   Replaces the previous .eco-* network map inside #ecosystem.
   Horizontal scroll, dual-rail layout with click-to-open detail panel.
   Adapted from "code to make the timeline" reference, restyled
   for the site's dark, accent-orange aesthetic.
   ================================================================ */

/* ---- Stage container ---- */
.journey-stage {
  position: relative;
  margin-top: 32px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(15,15,26,0.92), rgba(11,11,20,0.98)),
    radial-gradient(circle at 20% 30%, rgba(255,140,30,0.07), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(0,232,237,0.05), transparent 55%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 80px rgba(0,0,0,0.5), 0 20px 60px rgba(0,0,0,0.3);
  overflow: hidden;
  isolation: isolate;
}

/* ---- Loader (shown only in JS-enhanced mode) ---- */
.journey-loader {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(11,11,20,0.96);
  z-index: 50;
  transition: opacity 0.6s ease-out, visibility 0.6s;
}
.journey-stage.journey-enhanced .journey-loader {
  display: flex;
}
.journey-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.journey-spinner {
  width: 46px;
  height: 46px;
  border: 4px solid rgba(255,255,255,0.08);
  border-top-color: var(--accent, #ff8c20);
  border-radius: 50%;
  animation: journeySpin 1s linear infinite;
}
.journey-loader-text {
  margin: 0;
  color: rgba(255,255,255,0.55);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
@keyframes journeySpin {
  to { transform: rotate(360deg); }
}

/* ---- Edge fades to communicate horizontal scroll ---- */
.journey-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 70px;
  z-index: 30;
  pointer-events: none;
  transition: opacity 0.3s;
}
.journey-fade-left {
  left: 0;
  background: linear-gradient(90deg, rgba(11,11,20,0.95), transparent);
  opacity: 0;
}
.journey-fade-right {
  right: 0;
  background: linear-gradient(270deg, rgba(11,11,20,0.95), transparent);
}
.journey-stage[data-scroll="start"] .journey-fade-left { opacity: 0; }
.journey-stage[data-scroll="middle"] .journey-fade-left,
.journey-stage[data-scroll="end"] .journey-fade-left { opacity: 1; }
.journey-stage[data-scroll="end"] .journey-fade-right { opacity: 0; }

/* ---- Scroll hint chip ---- */
.journey-scroll-hint {
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(15,15,26,0.85);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,140,30,0.3);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  z-index: 40;
  transition: opacity 0.5s;
  pointer-events: none;
}
.journey-scroll-hint.is-hidden { opacity: 0; }
.journey-scroll-hint i {
  color: var(--accent, #ff8c20);
  animation: journeyArrowSlide 1.6s ease-in-out infinite;
}
@keyframes journeyArrowSlide {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

/* ---- Horizontal scroll viewport ---- */
.journey-viewport {
  width: 100%;
  height: clamp(640px, 80vh, 820px);
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scroll-behavior: smooth;
  scrollbar-color: rgba(255,140,30,0.5) rgba(255,255,255,0.05);
  scrollbar-width: thin;
}
.journey-viewport.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}
.journey-viewport::-webkit-scrollbar { height: 8px; }
.journey-viewport::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
.journey-viewport::-webkit-scrollbar-thumb {
  background: rgba(255,140,30,0.45);
  border-radius: 4px;
}
.journey-viewport::-webkit-scrollbar-thumb:hover { background: rgba(255,140,30,0.7); }

/* ---- Reveal-on-scroll wrapper ---- */
.journey-wrapper {
  position: relative;
  min-width: 1900px;
  height: 100%;
  padding: 40px;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.journey-stage.journey-enhanced .journey-wrapper {
  opacity: 0;
  transform: translateX(-40px);
}
.journey-stage.journey-enhanced .journey-wrapper.is-revealed {
  opacity: 1;
  transform: translateX(0);
}

/* ---- Central dashed axis ---- */
.journey-axis {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    rgba(255,140,30,0.55) 0,
    rgba(255,140,30,0.55) 10px,
    transparent 10px,
    transparent 22px
  );
  z-index: 10;
  box-shadow: 0 0 12px rgba(255,140,30,0.18);
}

/* ---- COVID-19 highlighted period ---- */
.journey-covid-range {
  position: absolute;
  top: calc(50% - 18px);
  height: 36px;
  border-top: 2px dashed rgba(239, 68, 68, 0.7);
  border-bottom: 2px dashed rgba(239, 68, 68, 0.7);
  background: rgba(239, 68, 68, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
  border-radius: 4px;
}
.journey-covid-label {
  position: absolute;
  top: -22px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #ef4444;
  text-shadow: 0 0 8px rgba(239,68,68,0.35);
}
.journey-covid-years {
  position: absolute;
  bottom: -20px;
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(239,68,68,0.75);
}

/* ---- Timeline node (a milestone) ---- */
.journey-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease, opacity 0.5s ease;
  width: 240px;
  margin-left: -120px; /* center on the `left:` anchor */
  z-index: 20;
  outline: none;
}
.journey-stage.journey-enhanced .journey-node {
  opacity: 0;
  transform: translateY(14px);
}
.journey-stage.is-revealed .journey-node {
  opacity: 1;
  transform: translateY(0);
}
.journey-node:hover { transform: translateY(-2px) scale(1.03); }
.journey-node:focus-visible {
  outline: 2px solid var(--accent, #ff8c20);
  outline-offset: 6px;
  border-radius: 8px;
}
.journey-node:hover .journey-dot,
.journey-node:focus-visible .journey-dot {
  box-shadow: 0 0 0 3px var(--accent, #ff8c20),
              0 0 18px rgba(255,140,30,0.7);
}

/* Top vs bottom orientation */
.journey-node-top    { bottom: 50%; align-items: center; }
.journey-node-bottom { top: 50%;    align-items: center; }
.journey-node-top    > .journey-card { order: 1; margin-bottom: 0; }
.journey-node-top    > .journey-line { order: 2; }
.journey-node-top    > .journey-dot  { order: 3; }
.journey-node-top    > .journey-date { order: 4; margin-top: 8px; }
.journey-node-bottom > .journey-dot  { order: 1; }
.journey-node-bottom > .journey-date.journey-date-bottom { order: 2; margin-top: 8px; margin-bottom: 4px; }
.journey-node-bottom > .journey-line { order: 3; }
.journey-node-bottom > .journey-card { order: 4; margin-top: 0; }

/* The connecting dashed line from node-card to dot */
.journey-line {
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.35) 0,
    rgba(255,255,255,0.35) 4px,
    transparent 4px,
    transparent 8px
  );
}

/* The dot on the central axis */
.journey-dot {
  width: 14px;
  height: 14px;
  background: var(--accent, #ff8c20);
  border: 3px solid #0b0b14;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--accent, #ff8c20),
              0 0 12px rgba(255,140,30,0.55);
  position: relative;
  flex-shrink: 0;
  transition: box-shadow 0.3s, transform 0.3s;
}
.journey-dot::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(255,140,30,0.4);
  animation: journeyDotPulse 2.4s ease-in-out infinite;
}
@keyframes journeyDotPulse {
  0%, 100% { transform: scale(1);   opacity: 0.6; }
  50%      { transform: scale(1.6); opacity: 0; }
}
.journey-dot-accent {
  background: #ff8c20;
  box-shadow: 0 0 0 2px #ff8c20,
              0 0 16px rgba(255,140,30,0.85);
}

/* Date label */
.journey-date {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  white-space: nowrap;
}
.journey-date-bottom { color: rgba(255,255,255,0.7); }

/* ---- Card (the milestone content block) ---- */
.journey-card {
  background: rgba(20, 20, 35, 0.85);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 22px rgba(0,0,0,0.4);
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
  max-width: 240px;
}
.journey-node:hover .journey-card,
.journey-node:focus-visible .journey-card {
  border-color: rgba(255,140,30,0.55);
  box-shadow: 0 10px 32px rgba(0,0,0,0.5),
              0 0 22px rgba(255,140,30,0.18);
}
.journey-card-edu {
  background: linear-gradient(135deg, rgba(255,140,30,0.14), rgba(255,140,30,0.04));
  border-color: rgba(255,140,30,0.35);
}
.journey-card-title {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.35;
  color: rgba(255,255,255,0.95);
}
.journey-card-line {
  display: block;
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  text-align: left;
}
.journey-card-line + .journey-card-line { margin-top: 4px; }
.journey-card-sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
}
.journey-card-org {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.78);
}
.journey-card-mega {
  display: block;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #4f8aff;
  line-height: 1;
  margin-top: 4px;
  text-shadow: 0 0 12px rgba(79,138,255,0.4);
}
.journey-card-link {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--accent-light, #ffaa50);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.journey-card-link:hover { color: #fff; }
.journey-card-note {
  font-size: 0.7rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.55);
  margin: 4px 0 0;
}

/* Tinted text helpers */
.journey-c-orange       { color: var(--accent, #ff8c20); }
.journey-c-orange-soft  { color: var(--accent-light, #ffaa50); }
.journey-c-blue         { color: #6aa6ff; }
.journey-c-blue-strong  { color: #4f8aff; }
.journey-c-green        { color: #4ade80; }

/* ---- Badges (mini logos / tags) ---- */
.journey-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.journey-badges-row { gap: 8px; }
.journey-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 4px;
  white-space: nowrap;
  text-transform: uppercase;
  line-height: 1;
}
.journey-badge-circle {
  width: 28px; height: 28px;
  padding: 0;
  border-radius: 50%;
  text-transform: none;
}
.journey-badge-lg { width: 42px; height: 42px; font-size: 0.7rem; }
.journey-badge-tiny {
  font-size: 0.55rem;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.03em;
  max-width: 90px;
  text-align: left;
  line-height: 1.2;
}
.journey-badge-blue       { background: rgba(79,138,255,0.18); color: #b5cdff; }
.journey-badge-blue-soft  { background: rgba(79,138,255,0.1);  border: 1px solid rgba(79,138,255,0.3); }
.journey-badge-green      { background: rgba(74,222,128,0.16); color: #b6f0c8; }
.journey-badge-green-soft { background: rgba(74,222,128,0.1);  border: 1px solid rgba(74,222,128,0.3); }
.journey-badge-outline    {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 0.55rem;
  padding: 3px 6px;
}
.journey-badge-outline-red {
  background: rgba(239,68,68,0.08);
  color: #fda4af;
  border: 1px solid rgba(239,68,68,0.45);
  font-size: 0.6rem;
}
.journey-badge-solid-blue  { background: #2563eb; color: #fff; }
.journey-badge-solid-cyan  { background: #0891b2; color: #fff; }
.journey-badge-solid-green { background: #15803d; color: #fff; }
.journey-badge-solid-red   { background: #b91c1c; color: #fff; }

/* ---- Backdrop + slide-in detail panel ---- */
.journey-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 9000;
}
.journey-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.journey-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 92vw);
  height: 100vh;
  background: linear-gradient(180deg, #14141f 0%, #0d0d18 100%);
  border-left: 1px solid rgba(255,140,30,0.28);
  box-shadow: -20px 0 60px rgba(0,0,0,0.55);
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 9100;
  overflow-y: auto;
  padding: 64px 36px 36px;
  color: rgba(255,255,255,0.92);
}
.journey-panel.is-open { transform: translateX(0); }
.journey-panel-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.journey-panel-close:hover {
  background: rgba(255,140,30,0.18);
  color: var(--accent-light, #ffaa50);
  transform: rotate(90deg);
}
.journey-panel-eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,140,30,0.35);
  background: rgba(255,140,30,0.08);
  color: var(--accent-light, #ffaa50);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
}
.journey-panel-title,
.journey-panel-body h3 {
  margin: 0 0 6px;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
}
.journey-panel-org {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent-light, #ffaa50);
  margin-bottom: 16px;
}
.journey-panel-rule {
  height: 1px;
  background: linear-gradient(90deg, rgba(255,140,30,0.5), transparent);
  margin: 4px 0 22px;
}
.journey-panel-section-label,
.journey-panel-eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin: 0 0 8px;
}
.journey-panel-desc {
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
  margin: 0 0 24px;
}
.journey-panel-impact {
  background: rgba(255,140,30,0.08);
  border-left: 3px solid var(--accent, #ff8c20);
  padding: 14px 16px;
  border-radius: 6px;
  font-size: 0.88rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--accent-light, #ffaa50);
}
/* Interconnection / Tags chips on the milestone detail panel.
   Reuses the existing .kg-rel-link visual language so timeline tags
   look identical to every other related-content surface on the site. */
.journey-panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}
.journey-panel-tag.kg-rel-link {
  border: 1px solid rgba(255,140,30,0.35);
  background: rgba(255,140,30,0.10);
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.journey-panel-tag.kg-rel-link:hover {
  background: rgba(255,140,30,0.22);
  border-color: rgba(255,140,30,0.55);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255,140,30,0.25);
}
[data-theme="light"] .journey-panel-tag.kg-rel-link {
  color: #4b3a20;
  background: rgba(255,140,30,0.10);
  border-color: rgba(255,140,30,0.42);
}
[data-theme="light"] .journey-panel-tag.kg-rel-link:hover {
  background: rgba(255,140,30,0.18);
}

/* ── Curated cross-content interconnections (related_content) ──
   Vertical list of link cards rendered inside the milestone side
   panel. Each card has thumb + type label + title + arrow. Hovers
   lift like a button and show the accent border. */
.journey-panel-related {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 22px;
}
.journey-panel-rel-card.kg-rel-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.18s ease;
  color: inherit;
}
.journey-panel-rel-card.kg-rel-link:hover {
  background: rgba(255,140,30,0.10);
  border-color: rgba(255,140,30,0.45);
  transform: translateX(2px);
  box-shadow: 0 6px 18px rgba(255,140,30,0.18);
}
.journey-panel-rel-thumb {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255,255,255,0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.journey-panel-rel-thumb-icon {
  color: var(--accent, #ff8c20);
  font-size: 16px;
}
.journey-panel-rel-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.journey-panel-rel-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, #ff8c20);
  opacity: 0.92;
}
.journey-panel-rel-title {
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.journey-panel-rel-arrow {
  flex: 0 0 auto;
  font-size: 11px;
  opacity: 0.55;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.journey-panel-rel-card.kg-rel-link:hover .journey-panel-rel-arrow {
  opacity: 1;
  transform: translateX(3px);
  color: var(--accent, #ff8c20);
}
[data-theme="light"] .journey-panel-rel-card.kg-rel-link {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .journey-panel-rel-card.kg-rel-link:hover {
  background: rgba(255,140,30,0.06);
  border-color: rgba(255,140,30,0.45);
}
[data-theme="light"] .journey-panel-rel-title {
  color: #2a2a2a;
}
[data-theme="light"] .journey-panel-rel-thumb {
  background: rgba(0,0,0,0.04);
}

.journey-panel-cta {
  display: block;
  width: 100%;
  margin-top: 32px;
  padding: 12px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent, #ff8c20), var(--accent-dark, #cc6600));
  color: #fff;
  border: none;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.journey-panel-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255,140,30,0.35);
}

/* ---- Light-theme overrides ---- */
[data-theme="light"] .journey-stage {
  background:
    linear-gradient(180deg, #fcfdff 0%, #f8fafc 100%);
  border-color: rgba(148,163,184,0.22);
  box-shadow: inset 0 0 60px rgba(148,163,184,0.08), 0 14px 44px rgba(15,23,42,0.08);
}
[data-theme="light"] .journey-loader { background: #ffffff; }
[data-theme="light"] .journey-loader-text { color: #64748b; }
[data-theme="light"] .journey-fade-left  { background: linear-gradient(90deg, #fff, transparent); }
[data-theme="light"] .journey-fade-right { background: linear-gradient(270deg, #fff, transparent); }
[data-theme="light"] .journey-axis {
  background: repeating-linear-gradient(to right, #94a3b8 0, #94a3b8 10px, transparent 10px, transparent 22px);
  box-shadow: none;
}
[data-theme="light"] .journey-card {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
}
[data-theme="light"] .journey-card-title { color: #355e85; font-weight: 700; }
[data-theme="light"] .journey-card-line  { color: #355e85; }
[data-theme="light"] .journey-card-org   { color: #4b5563; }
[data-theme="light"] .journey-card-sub   { color: #5b7288; }
[data-theme="light"] .journey-card-note  { color: #5b7288; }
[data-theme="light"] .journey-c-blue         { color: #355e85; }
[data-theme="light"] .journey-c-blue-strong  { color: #355e85; }
[data-theme="light"] .journey-c-green        { color: #355e85; }
[data-theme="light"] .journey-c-orange       { color: #d97706; }
[data-theme="light"] .journey-c-orange-soft  { color: #f59e0b; }
[data-theme="light"] .journey-line {
  background: repeating-linear-gradient(to bottom, #cbd5e1 0, #cbd5e1 4px, transparent 4px, transparent 8px);
}
[data-theme="light"] .journey-dot { border-color: #fff; }
[data-theme="light"] .journey-date { color: #525f70; font-weight: 700; }
[data-theme="light"] .journey-node:hover .journey-card,
[data-theme="light"] .journey-node:focus-visible .journey-card {
  border-color: transparent;
  box-shadow: none;
}
[data-theme="light"] .journey-node:hover { transform: translateY(-2px) scale(1.02); }
[data-theme="light"] .journey-wrapper {
  min-width: 1860px;
}
[data-theme="light"] .journey-viewport {
  height: clamp(560px, 72vh, 760px);
}
[data-theme="light"] .journey-badge-blue       { background: #dbeafe; color: #1e40af; }
[data-theme="light"] .journey-badge-green      { background: #dcfce7; color: #15803d; }
[data-theme="light"] .journey-badge-outline    { background: #fff; color: #1e293b; border-color: #cbd5e1; }
[data-theme="light"] .journey-badge-tiny       { color: #94a3b8; }
[data-theme="light"] .journey-panel {
  background: #ffffff;
  color: #1e293b;
  border-left-color: rgba(0,0,0,0.08);
  box-shadow: -16px 0 40px rgba(0,0,0,0.12);
}
[data-theme="light"] .journey-panel-close {
  background: #f1f5f9;
  color: #334155;
  border-color: #e2e8f0;
}
[data-theme="light"] .journey-panel-eyebrow {
  color: #b45309;
  border-color: rgba(180,83,9,0.35);
  background: rgba(180,83,9,0.08);
}
[data-theme="light"] .journey-panel-title,
[data-theme="light"] .journey-panel-body h3 { color: #0f172a; }
[data-theme="light"] .journey-panel-org { color: #c2410c; }
[data-theme="light"] .journey-panel-section-label,
[data-theme="light"] .journey-panel-eyebrow { color: #94a3b8; }
[data-theme="light"] .journey-panel-desc { color: #475569; }
[data-theme="light"] .journey-panel-impact {
  background: rgba(255,140,30,0.08);
  color: #9a3412;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .journey-viewport { height: clamp(620px, 75vh, 760px); }
}
@media (max-width: 768px) {
  .journey-stage { border-radius: 18px; }
  .journey-viewport { height: 640px; }
  .journey-wrapper { min-width: 1700px; padding: 32px 24px; }
  .journey-node { width: 200px; margin-left: -100px; }
  .journey-card { padding: 10px 12px; }
  .journey-card-title { font-size: 0.78rem; }
  .journey-card-line  { font-size: 0.72rem; }
  .journey-card-mega  { font-size: 1.3rem; }
  .journey-scroll-hint { font-size: 0.62rem; padding: 5px 10px; }
  .journey-panel { padding: 60px 24px 28px; }
  .journey-panel-body h3 { font-size: 1.3rem; }
}
@media (max-width: 480px) {
  .journey-viewport { height: 580px; }
  .journey-wrapper { min-width: 1600px; }
  .journey-node { width: 170px; margin-left: -85px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .journey-wrapper,
  .journey-loader,
  .journey-panel,
  .journey-backdrop,
  .journey-card,
  .journey-node,
  .journey-dot::after,
  .journey-spinner {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================
   NETWORK DIAGRAM V2 — Redesigned UI
   Based on Google Drive design spec
   ========================================= */

/* Layout */
.nd-layout-v2 {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  align-items: start;
}

/* Sidebar */
.nd-sidebar-v2 {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: 90px;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.nd-sb-section {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nd-sb-section:last-child { border-bottom: none; }
.nd-sb-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.nd-sb-section-icon { color: var(--accent); font-size: 0.7rem; }
.nd-sb-section-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Search */
.nd-search-wrap-v2 { position: relative; }
.nd-search-input-v2 {
  width: 100%;
  padding: 9px 14px 9px 34px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-family: var(--font-body);
  outline: none;
  transition: all 0.3s var(--ease-smooth);
}
.nd-search-input-v2::placeholder { color: var(--text-muted); }
.nd-search-input-v2:focus {
  border-color: var(--accent);
  background: rgba(255,140,30,0.04);
  box-shadow: 0 0 0 3px rgba(255,140,30,0.1);
}
.nd-search-icon-v2 {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.72rem;
  pointer-events: none;
}

/* Filter Chips */
.nd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s var(--ease-smooth);
  font-family: var(--font-body);
}
.nd-chip:hover {
  background: rgba(255,140,30,0.08);
  color: var(--text-primary);
  border-color: rgba(255,140,30,0.25);
}
.nd-chip.active {
  background: rgba(255,140,30,0.12);
  border-color: var(--accent);
  color: var(--accent);
}
.nd-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Country Select */
.nd-country-select {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: rgba(255,255,255,0.03);
  color: var(--text-primary);
  font-size: 0.78rem;
  padding: 8px 10px;
  outline: none;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color 0.2s ease;
}
.nd-country-select:focus { border-color: var(--accent); }

/* Layout Toggle */
.nd-layout-toggle { display: flex; gap: 6px; }
.nd-toggle-btn {
  flex: 1;
  padding: 7px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s var(--ease-smooth);
  text-align: center;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nd-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
.nd-toggle-btn.active {
  background: rgba(255,140,30,0.12);
  border-color: var(--accent);
  color: var(--accent);
}
.nd-toggle-icon { font-size: 0.65rem; }

/* Stats Grid */
.nd-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.nd-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: center;
}
.nd-stat-card-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.nd-stat-card-lbl {
  display: block;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 3px;
}

/* Legend Grid */
.nd-legend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.nd-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.73rem;
  color: var(--text-secondary);
}
.nd-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
}

/* Canvas Wrap V2 */
.nd-canvas-wrap-v2 {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card-gradient);
  overflow: hidden;
  backdrop-filter: blur(8px);
  min-height: 540px;
}
.nd-canvas-wrap-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* Hint pill V2 */
.nd-hint-v2 {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  padding: 5px 14px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
  transition: opacity 0.5s ease;
  display: flex;
  align-items: center;
  gap: 7px;
  backdrop-filter: blur(8px);
}

/* Zoom Controls V2 */
.nd-zoom-v2 {
  position: absolute;
  bottom: 16px; right: 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 10;
  background: var(--glass);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.nd-zoom-v2 .nd-zoom-btn {
  width: 36px; height: 36px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.78rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.nd-zoom-v2 .nd-zoom-btn:hover {
  background: rgba(255,140,30,0.12);
  color: var(--accent);
}
.nd-zoom-divider { height: 1px; background: var(--border); margin: 0 6px; }

/* Fullscreen V2 */
.nd-fs-v2 {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--glass);
  color: var(--text-secondary);
  font-size: 0.78rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: all 0.25s ease;
  z-index: 10;
}
.nd-fs-v2:hover {
  background: rgba(255,140,30,0.15);
  color: var(--accent);
  border-color: rgba(255,140,30,0.3);
}

/* Node Info Panel V2 */
.nd-node-info-v2 {
  position: absolute;
  top: 14px; right: 56px;
  width: 280px;
  max-height: calc(100% - 28px);
  overflow-y: auto;
  padding: 18px 20px;
  background: var(--glass);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  z-index: 20;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.28s var(--ease-smooth), transform 0.28s var(--ease-smooth);
}
.nd-node-info-v2.nd-node-info-visible { opacity: 1; transform: translateX(0); }
.nd-node-info-v2::-webkit-scrollbar { width: 4px; }
.nd-node-info-v2::-webkit-scrollbar-track { background: transparent; }
.nd-node-info-v2::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

/* Light theme overrides V2 */
[data-theme="light"] .nd-sidebar-v2 {
  background: rgba(255,255,255,0.95);
  border-color: rgba(17,24,39,0.1);
  box-shadow: 0 4px 24px rgba(17,24,39,0.06);
}
[data-theme="light"] .nd-sb-section { border-bottom-color: rgba(17,24,39,0.08); }
[data-theme="light"] .nd-search-input-v2 {
  background: rgba(255,255,255,0.8);
  border-color: rgba(17,24,39,0.15);
  color: var(--text-primary);
}
[data-theme="light"] .nd-search-input-v2:focus {
  border-color: var(--accent);
  background: rgba(208,104,0,0.03);
}
[data-theme="light"] .nd-chip { border-color: rgba(17,24,39,0.12); }
[data-theme="light"] .nd-chip:hover { background: rgba(208,104,0,0.06); }
[data-theme="light"] .nd-chip.active { background: rgba(208,104,0,0.1); border-color: var(--accent); }
[data-theme="light"] .nd-country-select {
  background: rgba(255,255,255,0.8);
  border-color: rgba(17,24,39,0.15);
  color: var(--text-primary);
}
[data-theme="light"] .nd-toggle-btn { border-color: rgba(17,24,39,0.12); }
[data-theme="light"] .nd-stat-card { background: rgba(255,255,255,0.8); border-color: rgba(17,24,39,0.08); }
[data-theme="light"] .nd-canvas-wrap-v2 { background: rgba(248,249,251,0.95); border-color: rgba(17,24,39,0.1); }
[data-theme="light"] .nd-canvas-wrap-v2::before {
  background-image: radial-gradient(circle, rgba(17,24,39,0.06) 1px, transparent 1px);
}
[data-theme="light"] .nd-hint-v2 { background: rgba(255,255,255,0.85); border-color: rgba(17,24,39,0.1); }
[data-theme="light"] .nd-zoom-v2 { background: rgba(255,255,255,0.9); border-color: rgba(17,24,39,0.12); }
[data-theme="light"] .nd-fs-v2 { background: rgba(255,255,255,0.9); border-color: rgba(17,24,39,0.12); }
[data-theme="light"] .nd-node-info-v2 { background: rgba(255,255,255,0.95); border-color: rgba(17,24,39,0.12); }
[data-theme="light"] .nd-legend-item { color: var(--text-secondary); }
[data-theme="light"] .nd-dir-search-input {
  background: rgba(255,255,255,0.7);
  border-color: rgba(17,24,39,0.12);
  color: var(--text-primary);
}

/* Responsive V2 */
@media (max-width: 1100px) {
  .nd-layout-v2 { grid-template-columns: 260px 1fr; gap: 20px; }
}
@media (max-width: 900px) {
  .nd-layout-v2 { grid-template-columns: 1fr; }
  .nd-sidebar-v2 { position: static; flex-direction: row; flex-wrap: wrap; }
  .nd-sb-section { flex: 1; min-width: 200px; }
  .nd-node-info-v2 { width: 240px; }
}
@media (max-width: 640px) {
  .nd-sidebar-v2 { flex-direction: column; }
  .nd-sb-section { width: 100%; }
  .nd-stats-grid { grid-template-columns: repeat(4, 1fr); }
  .nd-node-info-v2 {
    position: fixed;
    top: auto; bottom: 16px; right: 16px; left: 16px;
    width: auto; max-height: 50vh;
  }
}

/* =========================================================
   FIX-PROMPT — UI consistency (orange/white theme)
   Coverage:
   - AI assistant: light-mode adaptation + remove purple hues
   - Network diagram menu: light-mode adaptation, themed legend
   - Connected Impact timeline: fullscreen toggle + slower side panel
   - Popup: enforce orange/white chips (no gray mismatch)
   ========================================================= */

/* ---- AI Assistant: user avatar in pure orange (no purple) ---- */
.kg-ai-msg-avatar-u {
  background: linear-gradient(135deg, #FF8C1E, #ffb066) !important;
  color: #fff;
}

/* ---- AI Assistant: light-mode adaptation ---- */
[data-theme="light"] .kg-fab-ai {
  background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);
  border-color: rgba(255, 140, 30, 0.45);
  box-shadow:
    0 8px 32px rgba(255, 140, 30, 0.18),
    0 0 18px rgba(255, 140, 30, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.6);
}
[data-theme="light"] .kg-ai-panel-inner {
  background: linear-gradient(180deg, #ffffff 0%, #fffaf3 100%);
  border-color: rgba(17, 24, 39, 0.08);
  color: #1f2937;
  box-shadow: 0 24px 72px rgba(17, 24, 39, 0.18), inset 0 1px 0 rgba(255,255,255,0.6);
}
[data-theme="light"] .kg-ai-header { border-bottom-color: rgba(17, 24, 39, 0.08); }
[data-theme="light"] .kg-ai-header-title { color: #111827; }
[data-theme="light"] .kg-ai-header-sub { color: #6b7280; }
[data-theme="light"] .kg-ai-w-hello { color: #6b7280; }
[data-theme="light"] .kg-ai-w-title { color: #111827; }
[data-theme="light"] .kg-ai-w-desc { color: #6b7280; }
[data-theme="light"] .kg-ai-w-prompt {
  background: rgba(255, 247, 237, 0.6);
  border-color: rgba(255, 140, 30, 0.18);
  color: #1f2937;
}
[data-theme="light"] .kg-ai-w-prompt:hover {
  background: rgba(255, 140, 30, 0.10);
  border-color: rgba(255, 140, 30, 0.45);
}
[data-theme="light"] .kg-ai-icon-btn { color: #6b7280; }
[data-theme="light"] .kg-ai-icon-btn:hover { background: rgba(255, 140, 30, 0.10); color: #f97316; }
[data-theme="light"] .kg-ai-msg-role { color: #111827; }
[data-theme="light"] .kg-ai-msg-bubble { color: #374151; }
[data-theme="light"] .kg-ai-msg-bubble strong { color: #111827; }
[data-theme="light"] .kg-ai-thread { color: #1f2937; }
[data-theme="light"] .kg-ai-composer-wrap { border-top-color: rgba(17,24,39,0.08); }
[data-theme="light"] .kg-ai-composer {
  background: rgba(255,255,255,0.85);
  border-color: rgba(17,24,39,0.1);
}
[data-theme="light"] .kg-ai-input { color: #111827; background: transparent; }
[data-theme="light"] .kg-ai-input::placeholder { color: #9ca3af; }
[data-theme="light"] .kg-ai-comp-btn { color: #6b7280; }
[data-theme="light"] .kg-ai-comp-btn:hover { color: #f97316; background: rgba(255,140,30,0.08); }

/* ---- Network diagram: themed legend dots (orange palette + neutral white) ---- */
.nd-legend-dot,
.nd-chip-dot {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
}
[data-theme="light"] .nd-legend-dot,
[data-theme="light"] .nd-chip-dot {
  box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.06);
}

/* Network sidebar: ensure light-mode text & cards aren't gray-on-gray */
[data-theme="light"] .nd-sidebar-v2 {
  background: linear-gradient(180deg, #ffffff 0%, #fffaf3 100%);
  border-color: rgba(17, 24, 39, 0.08);
  box-shadow: 0 4px 24px rgba(17, 24, 39, 0.06);
}
[data-theme="light"] .nd-sb-section-title { color: #6b7280; }
[data-theme="light"] .nd-toggle-btn { color: #4b5563; background: rgba(255,255,255,0.6); }
[data-theme="light"] .nd-toggle-btn:hover { color: #f97316; }
[data-theme="light"] .nd-toggle-btn.active {
  background: rgba(255, 140, 30, 0.12);
  border-color: #f97316;
  color: #f97316;
}
[data-theme="light"] .nd-stat-card {
  background: #ffffff;
  border-color: rgba(17, 24, 39, 0.08);
}
[data-theme="light"] .nd-stat-card-num { color: #f97316; }
[data-theme="light"] .nd-stat-card-lbl { color: #9ca3af; }
[data-theme="light"] .nd-legend-item { color: #4b5563; }
[data-theme="light"] .nd-country-select {
  background: #ffffff;
  border-color: rgba(17, 24, 39, 0.12);
  color: #1f2937;
}

/* Network canvas + zoom controls: themed in light mode */
[data-theme="light"] .nd-canvas-wrap-v2 {
  background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%);
  border-color: rgba(17, 24, 39, 0.08);
}
[data-theme="light"] .nd-canvas-wrap-v2::before {
  background-image: radial-gradient(circle, rgba(255, 140, 30, 0.10) 1px, transparent 1px);
}
[data-theme="light"] .nd-zoom-v2 {
  background: rgba(255,255,255,0.9);
  border-color: rgba(17, 24, 39, 0.1);
  box-shadow: 0 4px 16px rgba(17, 24, 39, 0.08);
}
[data-theme="light"] .nd-zoom-v2 .nd-zoom-btn { color: #4b5563; }
[data-theme="light"] .nd-zoom-v2 .nd-zoom-btn:hover { color: #f97316; background: rgba(255, 140, 30, 0.10); }
[data-theme="light"] .nd-zoom-divider { background: rgba(17, 24, 39, 0.08); }
[data-theme="light"] .nd-fs-v2 {
  background: rgba(255,255,255,0.9);
  border-color: rgba(17, 24, 39, 0.1);
  color: #4b5563;
}
[data-theme="light"] .nd-fs-v2:hover { color: #f97316; border-color: #f97316; }
[data-theme="light"] .nd-hint-v2 {
  background: rgba(255,255,255,0.85);
  border-color: rgba(17, 24, 39, 0.1);
  color: #6b7280;
}

/* Network "Quick Jump" / directory: orange/white themed */
[data-theme="light"] .nd-dir-search-input,
[data-theme="light"] .nd-search-input-v2 {
  background: rgba(255,255,255,0.9);
  border-color: rgba(17, 24, 39, 0.12);
  color: #1f2937;
}

/* ---- Popups: replace gray "Explore Related Content" chips with orange/white themed pills ---- */
.book-page .bp-related-chip {
  background: #fff7ed !important;
  color: #f97316 !important;
  border: 1px solid #fed7aa !important;
  font-weight: 600;
}
.book-page .bp-related-chip:hover {
  background: #FF8C1E !important;
  color: #ffffff !important;
  border-color: #FF8C1E !important;
}
[data-theme="dark"] .book-page .bp-related-chip {
  /* still light/orange chip for the white popup card; keep as-is */
}

/* ---- Connected Impact: fullscreen mode ---- */
.journey-stage {
  position: relative;
}
.journey-fs-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 30;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 140, 30, 0.35);
  color: #FF8C1E;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  font-size: 14px;
}
.journey-fs-btn:hover {
  background: rgba(255, 140, 30, 0.15);
  color: #ffaa50;
  border-color: rgba(255, 140, 30, 0.6);
  transform: scale(1.06);
}
[data-theme="light"] .journey-fs-btn {
  background: #ffffff;
  color: #f97316;
  border-color: rgba(255, 140, 30, 0.4);
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.08);
}
[data-theme="light"] .journey-fs-btn:hover {
  background: #fff7ed;
  color: #ea580c;
}

/* Fullscreen mode container — NEW STRATEGY (stage stays in-place).
   The stage uses position:fixed to cover the viewport without being
   moved out of its DOM section. Crucially we set transform:none and
   will-change:auto here to override the .is-revealed transform that
   would otherwise create a containing block and trap the panel.
*/
.journey-stage.is-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  width: 100dvw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 9500 !important;
  background: var(--bg, #0a0d12);
  padding: 56px 16px 24px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 0 !important;
  /* CRITICAL: defeat .journey-stage's transform / will-change so it
     does NOT become a containing block for its fixed-position panel
     children. Without these overrides the panel would be positioned
     relative to the stage instead of the viewport. */
  transform: none !important;
  -webkit-transform: none !important;
  filter: none !important;
  will-change: auto !important;
  contain: none !important;
  opacity: 1 !important;
  /* Prevent ancestor overflow from clipping the fixed stage */
  overflow: hidden !important;
}
[data-theme="light"] .journey-stage.is-fullscreen {
  background: #fffaf3;
}
.journey-stage.is-fullscreen .journey-viewport {
  flex: 1;
  height: 100% !important;
  max-height: none !important;
}
.journey-stage.is-fullscreen .journey-fs-btn {
  top: 14px;
  right: 14px;
}
body.journey-fs-lock { overflow: hidden; }

/* ---- Connected Impact: slower right-side milestone panel ----
   The panel slides in noticeably slower for a smoother, more
   cinematic feel. Inside elements stagger in gracefully. */
.journey-panel {
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.journey-backdrop {
  transition: opacity 0.85s ease !important;
}

/* Subtle stagger of inside content for a smoother feel */
.journey-panel.is-open .journey-panel-eyebrow,
.journey-panel.is-open .journey-panel-title,
.journey-panel.is-open .journey-panel-org,
.journey-panel.is-open .journey-panel-rule,
.journey-panel.is-open .journey-panel-section-label,
.journey-panel.is-open .journey-panel-desc,
.journey-panel.is-open .journey-panel-impact,
.journey-panel.is-open .journey-panel-cta {
  animation: journeyPanelFadeIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.journey-panel.is-open .journey-panel-eyebrow     { animation-delay: 0.18s; }
.journey-panel.is-open .journey-panel-title       { animation-delay: 0.26s; }
.journey-panel.is-open .journey-panel-org         { animation-delay: 0.34s; }
.journey-panel.is-open .journey-panel-rule        { animation-delay: 0.40s; }
.journey-panel.is-open .journey-panel-section-label { animation-delay: 0.46s; }
.journey-panel.is-open .journey-panel-desc        { animation-delay: 0.52s; }
.journey-panel.is-open .journey-panel-impact      { animation-delay: 0.60s; }
.journey-panel.is-open .journey-panel-cta         { animation-delay: 0.70s; }
@keyframes journeyPanelFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dual icon swap on fullscreen button */
.journey-fs-btn .journey-fs-icon-collapse { display: none; }
.journey-stage.is-fullscreen .journey-fs-btn .journey-fs-icon-expand { display: none; }
.journey-stage.is-fullscreen .journey-fs-btn .journey-fs-icon-collapse { display: inline-block; }

/* Toggle the two icons inside the fullscreen button */
.journey-fs-btn .journey-fs-icon-expand { display: inline-block; }
.journey-fs-btn .journey-fs-icon-collapse { display: none; }
.journey-stage.is-fullscreen .journey-fs-btn .journey-fs-icon-expand { display: none; }
.journey-stage.is-fullscreen .journey-fs-btn .journey-fs-icon-collapse { display: inline-block; }

/* Ensure side panel + backdrop sit above the fullscreen stage */
.journey-stage.is-fullscreen ~ .journey-panel,
.journey-stage.is-fullscreen ~ .journey-backdrop,
body.journey-fs-lock .journey-panel,
body.journey-fs-lock .journey-backdrop {
  z-index: 9700 !important;
}
body.journey-fs-lock .journey-panel { z-index: 9750 !important; }

/* =========================================================
   FIX-PROMPT v3 — Theme cleanup + Fullscreen polish
   - Network UI: replace gray dropdown headers/buttons with orange/white
   - Timeline date pills: replace gray with themed orange/white
   - Fullscreen: smooth viewport expansion, no clipping/glitch
   ========================================================= */

/* ---------- 1. NETWORK UI — kill gray, apply orange/white ---------- */

/* Quick Jump dropdown group headers (Research Areas / Projects / Collaborators / Organisations)
   NOTE: We use the higher-specificity selector `.nd-node-directory .nd-dir-group...`
   to override the earlier dark-theme rule (line ~2664) which uses the same selector
   with !important. Without matching specificity the orange theme would lose. */
/* FIX 4 (session-13): every rule below is now SCOPED to [data-theme="light"].
   Previously these forced light-theme orange/white styling UNCONDITIONALLY with
   !important, which leaked into dark theme (white panel on a dark page). Scoping
   to [data-theme="light"] lets dark theme fall back to the variable-based
   .nd-sidebar-v2 / .nd-chip / etc. dark styles defined earlier. */
[data-theme="light"] .nd-node-directory .nd-dir-group,
[data-theme="light"] .nd-dir-group {
  background: rgba(255, 247, 237, 0.85) !important;
  border: 1px solid rgba(255, 140, 30, 0.25) !important;
  border-radius: 10px !important;
}
[data-theme="light"] .nd-node-directory .nd-dir-group-header,
[data-theme="light"] .nd-dir-group-header {
  /* Solid base layer + gradient overlay so sticky scrolling stays readable */
  background:
    linear-gradient(90deg, rgba(255,140,30,0.14), rgba(255,140,30,0.06)),
    #fff7ed !important;
  color: #c2410c !important;
  font-weight: 700 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .nd-node-directory .nd-dir-group-header:hover,
[data-theme="light"] .nd-dir-group-header:hover {
  background:
    linear-gradient(90deg, rgba(255,140,30,0.22), rgba(255,140,30,0.10)),
    #ffedd5 !important;
}
[data-theme="light"] .nd-node-directory .nd-dir-group-icon,
[data-theme="light"] .nd-dir-group-icon { color: #f97316 !important; }
[data-theme="light"] .nd-node-directory .nd-dir-group-label,
[data-theme="light"] .nd-dir-group-label { color: #c2410c !important; }
[data-theme="light"] .nd-node-directory .nd-dir-group-count,
[data-theme="light"] .nd-dir-group-count {
  background: #ffffff !important;
  color: #f97316 !important;
  border: 1px solid rgba(255,140,30,0.35) !important;
  font-weight: 700 !important;
}
[data-theme="light"] .nd-node-directory .nd-dir-group-chev,
[data-theme="light"] .nd-dir-group-chev { color: #f97316 !important; }
[data-theme="light"] .nd-node-directory .nd-dir-group-body,
[data-theme="light"] .nd-dir-group-body {
  background: #ffffff !important;
  border-top: 1px solid rgba(255,140,30,0.18) !important;
}
/* Coloured dot per group — keep small accent visible against light bg */
[data-theme="light"] .nd-node-directory .nd-dir-group-dot,
[data-theme="light"] .nd-dir-group-dot {
  border: 1px solid rgba(255,140,30,0.35) !important;
}
[data-theme="light"] .nd-node-jump {
  background: #fffaf3 !important;
  border: 1px solid rgba(255,140,30,0.20) !important;
  color: #4b2e16 !important;
}
[data-theme="light"] .nd-node-jump:hover {
  background: #ffedd5 !important;
  border-color: #f97316 !important;
  color: #c2410c !important;
}

/* Layout toggle (Force / Radial) — replace gray with orange/white themed */
[data-theme="light"] .nd-toggle-btn {
  background: #ffffff !important;
  border: 1px solid rgba(255,140,30,0.30) !important;
  color: #9a4a14 !important;
}
[data-theme="light"] .nd-toggle-btn:hover {
  background: #fff7ed !important;
  border-color: #f97316 !important;
  color: #c2410c !important;
}
[data-theme="light"] .nd-toggle-btn.active {
  background: linear-gradient(135deg, rgba(255,140,30,0.18), rgba(255,140,30,0.08)) !important;
  border-color: #f97316 !important;
  color: #c2410c !important;
}

/* Filter chips (All / Research / Projects / Collabs / Orgs) */
[data-theme="light"] .nd-chip {
  background: #ffffff !important;
  border: 1px solid rgba(255,140,30,0.28) !important;
  color: #9a4a14 !important;
}
[data-theme="light"] .nd-chip:hover {
  background: #fff7ed !important;
  border-color: #f97316 !important;
  color: #c2410c !important;
}
[data-theme="light"] .nd-chip.active {
  background: linear-gradient(135deg, rgba(255,140,30,0.18), rgba(255,140,30,0.08)) !important;
  border-color: #f97316 !important;
  color: #c2410c !important;
}

/* Country select dropdown */
[data-theme="light"] .nd-country-select {
  background: #ffffff !important;
  border: 1px solid rgba(255,140,30,0.28) !important;
  color: #4b2e16 !important;
}
[data-theme="light"] .nd-country-select:focus,
[data-theme="light"] .nd-country-select:hover {
  border-color: #f97316 !important;
}

/* Stat cards (37 NODES, 60 LINKS, 22 PAPERS, 306 CITES) */
[data-theme="light"] .nd-stat-card {
  background: #ffffff !important;
  border: 1px solid rgba(255,140,30,0.20) !important;
}
[data-theme="light"] .nd-stat-card-num { color: #f97316 !important; }
[data-theme="light"] .nd-stat-card-lbl { color: #9a4a14 !important; }

/* Search inputs */
[data-theme="light"] .nd-search-input-v2,
[data-theme="light"] .nd-dir-search-input {
  background: #ffffff !important;
  border: 1px solid rgba(255,140,30,0.25) !important;
  color: #4b2e16 !important;
}
[data-theme="light"] .nd-search-input-v2:focus,
[data-theme="light"] .nd-dir-search-input:focus {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 3px rgba(255,140,30,0.10) !important;
  background: #fffaf3 !important;
}
[data-theme="light"] .nd-search-icon-v2,
[data-theme="light"] .nd-dir-search-icon { color: #f97316 !important; }

/* Section titles (QUICK JUMP, NODE TYPES) */
[data-theme="light"] .nd-sb-section-title { color: #c2410c !important; }
[data-theme="light"] .nd-sb-section-icon { color: #f97316 !important; }

/* Sidebar overall */
[data-theme="light"] .nd-sidebar-v2 {
  background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%) !important;
  border: 1px solid rgba(255,140,30,0.20) !important;
}
[data-theme="light"] .nd-sb-section { border-bottom-color: rgba(255,140,30,0.15) !important; }

/* Legend item text */
[data-theme="light"] .nd-legend-item { color: #4b2e16 !important; }

/* ---------- 2. TIMELINE DATE PILLS — kill gray, apply orange/white ---------- */
/* Targets the SEP 2016 / OCT 2016 / 2016-2017 etc. capsules in the timeline. */
.journey-date,
.journey-date-bottom {
  background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%) !important;
  color: #c2410c !important;
  border: 1px solid rgba(255,140,30,0.45) !important;
  box-shadow: 0 2px 8px rgba(255,140,30,0.18) !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
}

[data-theme="light"] .journey-date,
[data-theme="light"] .journey-date-bottom {
  background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%) !important;
  color: #c2410c !important;
  border: 1px solid rgba(255,140,30,0.55) !important;
  box-shadow: 0 2px 8px rgba(255,140,30,0.20) !important;
}

/* Hover lift on date pill (subtle) */
.journey-node:hover .journey-date,
.journey-node:hover .journey-date-bottom {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
  border-color: #f97316 !important;
  color: #9a3412 !important;
}


/* =========================================================
   FULLSCREEN TIMELINE — DEFINITIVE FIX (v7)
   Strategy: JS portals .journey-stage to <body> on enter, so it
   has NO ancestor that can break position:fixed.
   These rules then just style the now-body-level fullscreen stage.
   No :has() tricks, no ancestor neutralisers needed.
   ========================================================= */

/* When portaled, stage is a direct body child. Make it own the screen. */
.journey-stage.is-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  width: 100dvw !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 64px 20px 28px !important;
  z-index: 10000 !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: var(--bg, #0a0d12);
  /* Defeat the .journey-stage scroll-reveal transform */
  transform: none !important;
  -webkit-transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  transition: none !important;
  animation: journeyFsFadeIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
[data-theme="light"] .journey-stage.is-fullscreen {
  background: linear-gradient(180deg, #ffffff 0%, #fffaf3 100%) !important;
}
@keyframes journeyFsFadeIn {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}

/* Inner viewport: fill the fullscreen overlay, only horizontal scroll */
.journey-stage.is-fullscreen .journey-viewport {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border-radius: 12px !important;
}

/* Wrapper keeps min-width so timeline scrolls horizontally,
   stretches vertically to fill the overlay */
.journey-stage.is-fullscreen .journey-wrapper {
  height: 100% !important;
  min-height: 100% !important;
  transform: none !important;
}

/* Edge fades span the full overlay height */
.journey-stage.is-fullscreen .journey-fade,
.journey-stage.is-fullscreen .journey-fade-left,
.journey-stage.is-fullscreen .journey-fade-right {
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
}

/* Fullscreen exit (collapse) button — clearly visible, themed */
.journey-stage.is-fullscreen .journey-fs-btn {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: 42px !important;
  height: 42px !important;
  z-index: 10010 !important;
  background: rgba(255,140,30,0.18) !important;
  border: 1px solid rgba(255,140,30,0.7) !important;
  color: #ffaa50 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35) !important;
}
[data-theme="light"] .journey-stage.is-fullscreen .journey-fs-btn {
  background: #ffffff !important;
  color: #f97316 !important;
  border-color: rgba(255,140,30,0.6) !important;
  box-shadow: 0 4px 16px rgba(17,24,39,0.10) !important;
}

/* Loader / hint stay in the right spot inside fullscreen */
.journey-stage.is-fullscreen .journey-loader { top: 50% !important; }
.journey-stage.is-fullscreen .journey-scroll-hint {
  top: 80px !important;
}

/* Page lock while fullscreen is active — NEW STRATEGY (no portal).
   We pin the body in place with position:fixed and a negative top
   offset (JS sets body.style.top = `-${scrollY}px`). This:
     • Prevents ALL underlying-page scrolling (focus(), scroll-anchor,
       deep-link routers, IntersectionObserver retargeting, etc.)
     • Preserves the user's visual scroll position perfectly.
     • Is the same bulletproof pattern modern lightboxes / dialogs use.
   On exit, JS clears body.style.top and calls window.scrollTo(savedY).
*/
html.journey-fs-lock-html {
  overflow: hidden !important;
}
body.journey-fs-lock {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* ============================================================
   ROOT-CAUSE FIX: kill ancestor containing-block effects so the
   in-place fullscreen stage truly covers the viewport.
   ----
   `.section { will-change: transform }` (line ~4481) makes EVERY
   section a containing block for `position: fixed` descendants.
   This was the real reason the previous code needed to portal the
   stage to <body>. With will-change overridden when fullscreen is
   active, the stage's `position: fixed; inset: 0` correctly anchors
   to the viewport — no portal needed.
   ============================================================ */
body.journey-fs-lock #timeline,
body.journey-fs-lock .section.ecosystem {
  will-change: auto !important;
  transform: none !important;
  filter: none !important;
  contain: none !important;
  /* The pinned body uses position:fixed so the section's normal
     positioning doesn't matter — but we keep position:relative
     for any scoped pseudo-elements that rely on it. */
}

/* When fullscreen, the stage's panel/backdrop are children of the
   stage but use position:fixed. Since the stage now has
   transform:none, the panel correctly anchors to the viewport. */
.journey-stage.is-fullscreen .journey-panel {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 10030 !important;
}
.journey-stage.is-fullscreen .journey-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10020 !important;
}

/* Hide site overlays (navbar, FAB) so they don't float on top
   of the fullscreen timeline. The exit button is the only thing
   the user needs to interact with. */
body.journey-fs-lock .navbar,
body.journey-fs-lock #kgFabAi,
body.journey-fs-lock .kg-ai-panel:not(.open),
body.journey-fs-lock .kg-ai-fab,
body.journey-fs-lock .floating-ai-widget {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* If side panel opens INSIDE fullscreen, keep it on top */
body.journey-fs-lock .journey-panel,
body.journey-fs-lock .journey-backdrop {
  z-index: 10020 !important;
}
body.journey-fs-lock .journey-panel { z-index: 10030 !important; }

/* =========================================================
   FIX-PROMPT v4 — Final UI/UX cleanup
   1. COVID-19 label: clean, single, non-overlapping
   2. Timeline fullscreen: restore wheel + drag interaction
   ========================================================= */

/* ---------- 1. COVID-19 label de-duplication ---------- */
/* The two earlier definitions of .journey-covid-label (lines ~6229 and ~7635)
   conflict with the dashed band border, creating an apparent "overlapping"
   look. We pin a single, clean label cleanly ABOVE the band, kill any
   duplicate-looking text-shadow, and ensure z-index is correct. */
.journey-covid-range {
  /* Keep the band visually distinct and ensure label sits above it */
  overflow: visible !important;
}
.journey-covid-range .journey-covid-label,
.journey-covid-label {
  position: absolute !important;
  top: -26px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: auto !important;
  display: inline-block !important;
  padding: 2px 10px !important;
  background: rgba(255, 247, 237, 0.95) !important;
  border: 1px solid rgba(239, 68, 68, 0.55) !important;
  border-radius: 999px !important;
  color: #ef4444 !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.06em !important;
  /* Remove the heavy glow that visually looks like a duplicate */
  text-shadow: none !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.18) !important;
  z-index: 6 !important;
  white-space: nowrap !important;
  pointer-events: none;
}
.journey-covid-range .journey-covid-years,
.journey-covid-years {
  position: absolute !important;
  top: auto !important;
  bottom: -22px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  color: rgba(239, 68, 68, 0.82) !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  pointer-events: none;
}
[data-theme="light"] .journey-covid-range .journey-covid-label,
[data-theme="light"] .journey-covid-label {
  background: #ffffff !important;
  color: #dc2626 !important;
  border-color: rgba(220, 38, 38, 0.45) !important;
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.12) !important;
}

/* ---------- 2. Timeline fullscreen interaction restore ----------
   In fullscreen, the stage is portaled to <body> and uses position:fixed.
   Some prior rules / ancestor leftovers can leave the viewport with 
   `pointer-events: none` or zero height before flex resolves, blocking 
   the wheel + drag handlers. We force the viewport to be a fully 
   interactive flex child filling the available height. */
body.journey-fs-lock,
html.journey-fs-lock-html {
  /* Make sure wheel events can still reach children inside the locked body */
  pointer-events: auto !important;
}
.journey-stage.is-fullscreen {
  /* Ensure flex child (viewport) gets real height to scroll inside */
  display: flex !important;
  flex-direction: column !important;
  pointer-events: auto !important;
}
.journey-stage.is-fullscreen .journey-viewport {
  /* Restore the horizontal scroll container completely */
  flex: 1 1 auto !important;
  min-height: 0 !important;        /* critical for flex-child overflow */
  height: auto !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  pointer-events: auto !important;
  cursor: grab !important;
  touch-action: pan-x !important;  /* allow horizontal touch gestures */
  -webkit-overflow-scrolling: touch;
}
.journey-stage.is-fullscreen .journey-viewport.is-dragging {
  cursor: grabbing !important;
}
/* Ensure the inner wrapper still has its full natural width so there is
   actually something to scroll horizontally to in fullscreen. */
.journey-stage.is-fullscreen .journey-wrapper {
  height: 100% !important;
  pointer-events: auto !important;
}
/* Make sure timeline nodes remain clickable in fullscreen */
.journey-stage.is-fullscreen .journey-node {
  pointer-events: auto !important;
}
/* Stop the fade overlays from intercepting wheel/drag events */
.journey-stage.is-fullscreen .journey-fade,
.journey-stage.is-fullscreen .journey-scroll-hint {
  pointer-events: none !important;
}

/* ============================================================
   TIMELINE FILTER PANEL
   Search bar + Year-range dropdown + Tag multi-select
   Positioned above the journey-stage inside the timeline section.
   ============================================================ */

/* ── Panel wrapper ─────────────────────────────────────────── */
.tl-filter-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 14px 18px;
  background: var(--glass-bg, rgba(255,255,255,0.06));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.10));
  border-radius: 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
  z-index: 30;
}

[data-theme="light"] .tl-filter-panel {
  background: rgba(255,255,255,0.80);
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}

/* ── Filter groups ─────────────────────────────────────────── */
.tl-filter-group {
  position: relative;
  flex-shrink: 0;
}

.tl-filter-search-group {
  flex: 1 1 200px;
  min-width: 180px;
}

/* ── Search input ──────────────────────────────────────────── */
.tl-search-wrap {
  display: flex;
  align-items: center;
  background: var(--input-bg, rgba(255,255,255,0.08));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 0 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
[data-theme="light"] .tl-search-wrap {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.14);
}
.tl-search-wrap:focus-within {
  border-color: var(--accent, #ff8c20);
  box-shadow: 0 0 0 3px rgba(255,140,32,0.15);
}
.tl-search-icon {
  color: var(--text-muted, rgba(255,255,255,0.4));
  font-size: 13px;
  margin-right: 8px;
  flex-shrink: 0;
}
[data-theme="light"] .tl-search-icon { color: rgba(0,0,0,0.35); }

.tl-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  padding: 9px 0;
  font-size: 13.5px;
  color: var(--text-primary, #fff);
  font-family: inherit;
  min-width: 0;
}
[data-theme="light"] .tl-search-input { color: #1a1a2e; }
.tl-search-input::placeholder { color: var(--text-muted, rgba(255,255,255,0.35)); }
[data-theme="light"] .tl-search-input::placeholder { color: rgba(0,0,0,0.35); }
/* Remove default search-input clear button (we have our own) */
.tl-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.tl-search-clear {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0 4px 6px;
  color: var(--text-muted, rgba(255,255,255,0.4));
  font-size: 12px;
  transition: color 0.2s;
  flex-shrink: 0;
}
.tl-search-clear:hover { color: var(--accent, #ff8c20); }

/* ── Dropdown trigger buttons ──────────────────────────────── */
.tl-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: var(--input-bg, rgba(255,255,255,0.08));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text-primary, rgba(255,255,255,0.85));
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
[data-theme="light"] .tl-dropdown-trigger {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.14);
  color: #1a1a2e;
}
.tl-dropdown-trigger:hover,
.tl-dropdown-trigger[aria-expanded="true"] {
  border-color: var(--accent, #ff8c20);
  box-shadow: 0 0 0 3px rgba(255,140,32,0.12);
}
.tl-dropdown-trigger[aria-expanded="true"] {
  background: rgba(255,140,32,0.10);
}
[data-theme="light"] .tl-dropdown-trigger[aria-expanded="true"] {
  background: rgba(255,140,32,0.08);
}

.tl-caret {
  font-size: 11px;
  opacity: 0.6;
  transition: transform 0.2s;
}
.tl-dropdown-trigger[aria-expanded="true"] .tl-caret {
  transform: rotate(180deg);
}

/* ── Dropdown panels ───────────────────────────────────────── */
.tl-dropdown-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  background: var(--surface-2, #1a1a2e);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
  z-index: 200;
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
[data-theme="light"] .tl-dropdown-panel {
  background: #ffffff;
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
}
.tl-dropdown-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ── Year range panel ──────────────────────────────────────── */
.tl-year-fields {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.tl-year-field-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tl-year-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.5;
  color: var(--text-primary, #fff);
}
[data-theme="light"] .tl-year-label { color: #1a1a2e; }
.tl-year-input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text-primary, #fff);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -moz-appearance: textfield;
}
[data-theme="light"] .tl-year-input {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.14);
  color: #1a1a2e;
}
.tl-year-input::-webkit-inner-spin-button,
.tl-year-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.tl-year-input:focus {
  border-color: var(--accent, #ff8c20);
  box-shadow: 0 0 0 3px rgba(255,140,32,0.15);
}
.tl-year-sep {
  color: var(--text-muted, rgba(255,255,255,0.4));
  font-size: 14px;
  padding-top: 18px;
  flex-shrink: 0;
}
.tl-year-error {
  font-size: 12px;
  color: #f87171;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tl-year-sugg-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.45;
  margin: 10px 0 6px;
  color: var(--text-primary, #fff);
}
[data-theme="light"] .tl-year-sugg-label { color: #1a1a2e; }
.tl-year-sugg-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.tl-year-sugg-btn {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,140,32,0.35);
  background: rgba(255,140,32,0.08);
  color: var(--accent, #ff8c20);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
[data-theme="light"] .tl-year-sugg-btn {
  border-color: rgba(255,140,32,0.4);
  background: rgba(255,140,32,0.06);
}
.tl-year-sugg-btn:hover {
  background: rgba(255,140,32,0.20);
  border-color: rgba(255,140,32,0.60);
}
.tl-year-clear-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 6px 10px;
  background: none;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--text-muted, rgba(255,255,255,0.55));
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  width: 100%;
  justify-content: center;
}
[data-theme="light"] .tl-year-clear-btn {
  border-color: rgba(0,0,0,0.10);
  color: rgba(0,0,0,0.45);
}
.tl-year-clear-btn:hover {
  color: var(--accent, #ff8c20);
  border-color: rgba(255,140,32,0.35);
  background: rgba(255,140,32,0.06);
}

/* ── Tag panel ─────────────────────────────────────────────── */
.tl-tag-panel {
  min-width: 240px;
  max-height: 380px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 12px;
}
.tl-tag-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.35);
  font-size: 12px;
  flex-shrink: 0;
}
[data-theme="light"] .tl-tag-search-wrap {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.10);
  color: rgba(0,0,0,0.35);
}
.tl-tag-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary, #fff);
  min-width: 0;
}
[data-theme="light"] .tl-tag-search-input { color: #1a1a2e; }
.tl-tag-search-input::placeholder { color: rgba(255,255,255,0.3); }
[data-theme="light"] .tl-tag-search-input::placeholder { color: rgba(0,0,0,0.3); }
.tl-tag-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 60px;
  max-height: 220px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.tl-tag-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-primary, rgba(255,255,255,0.80));
  text-align: left;
  transition: background 0.15s, color 0.15s;
  width: 100%;
}
[data-theme="light"] .tl-tag-item { color: #1a1a2e; }
.tl-tag-item:hover {
  background: rgba(255,140,32,0.10);
  color: var(--accent, #ff8c20);
}
.tl-tag-item.is-selected {
  background: rgba(255,140,32,0.14);
  color: var(--accent, #ff8c20);
}
[data-theme="light"] .tl-tag-item.is-selected {
  background: rgba(255,140,32,0.10);
}
.tl-tag-check {
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(255,255,255,0.20);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
[data-theme="light"] .tl-tag-check { border-color: rgba(0,0,0,0.20); }
.tl-tag-item.is-selected .tl-tag-check {
  background: var(--accent, #ff8c20);
  border-color: var(--accent, #ff8c20);
  color: #fff;
}
.tl-tag-item:not(.is-selected) .tl-tag-check i { display: none; }
.tl-tag-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tl-tag-empty {
  padding: 12px 10px;
  font-size: 13px;
  opacity: 0.5;
  margin: 0;
  color: var(--text-primary, #fff);
}
[data-theme="light"] .tl-tag-empty { color: #1a1a2e; }
.tl-tag-footer {
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: 8px;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
[data-theme="light"] .tl-tag-footer { border-color: rgba(0,0,0,0.08); }
.tl-tag-logic-note {
  font-size: 11px;
  opacity: 0.45;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-primary, #fff);
}
[data-theme="light"] .tl-tag-logic-note { color: #1a1a2e; }
.tl-tag-footer .tl-year-clear-btn {
  width: auto;
  margin-top: 0;
}

/* ── Active filter chips row ───────────────────────────────── */
.tl-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  width: 100%;
  min-height: 0;
}
.tl-active-chips:empty { display: none; }

.tl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 12px;
  background: rgba(255,140,32,0.14);
  border: 1px solid rgba(255,140,32,0.30);
  border-radius: 20px;
  font-size: 12.5px;
  color: var(--accent, #ff8c20);
  white-space: nowrap;
  animation: tlChipIn 0.2s ease;
}
[data-theme="light"] .tl-chip {
  background: rgba(255,140,32,0.09);
  border-color: rgba(255,140,32,0.30);
}
@keyframes tlChipIn {
  from { opacity:0; transform:scale(0.85); }
  to   { opacity:1; transform:scale(1); }
}
.tl-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: inherit;
  opacity: 0.65;
  font-size: 10px;
  display: flex;
  align-items: center;
  transition: opacity 0.15s, color 0.15s;
}
.tl-chip-remove:hover { opacity: 1; color: #fff; }
[data-theme="light"] .tl-chip-remove:hover { color: #000; }

/* ── Filter meta / result count bar ───────────────────────── */
.tl-filter-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  font-size: 13px;
  color: var(--text-muted, rgba(255,255,255,0.45));
  flex-wrap: wrap;
}
[data-theme="light"] .tl-filter-meta { color: rgba(0,0,0,0.45); }

.tl-reset-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--text-muted, rgba(255,255,255,0.55));
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
[data-theme="light"] .tl-reset-all {
  border-color: rgba(0,0,0,0.12);
  color: rgba(0,0,0,0.45);
}
.tl-reset-all:hover {
  color: var(--accent, #ff8c20);
  border-color: rgba(255,140,32,0.35);
  background: rgba(255,140,32,0.06);
}

/* ── Journey node — animated state ────────────────────────── */
/* Nodes being hidden/shown by the filter use inline style transitions
   driven by the FLIP animation engine. We ensure will-change hints are
   applied so the GPU handles the compositing layer for smooth motion. */
.journey-node {
  will-change: transform, opacity;
  /* Ensure pointer-events follow the hidden state set by the filter */
}
.journey-node[data-tl-hidden="1"] {
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ── Responsive tweaks ─────────────────────────────────────── */
@media (max-width: 640px) {
  .tl-filter-panel {
    padding: 12px 12px;
    gap: 8px;
  }
  .tl-filter-search-group {
    flex: 1 1 100%;
  }
  .tl-dropdown-panel {
    min-width: 220px;
  }
  .tl-year-panel {
    left: 0;
    right: 0;
    min-width: unset;
  }
}

/* =============================================================
   FIX 2 — Publication popup detail rows + hover preview
   -------------------------------------------------------------
   Adds:
     • .bp-pub-meta-table — clean key/value rows inside the
       publication detail popup (left pane)
     • .bp-pub-authors    — author byline with icon
     • .bp-pub-links      — DOI / external link buttons
     • .npub2-card hover preview — small abstract snippet that
       fades in (no overlap, no layout shift)
   ============================================================= */

/* Publication popup — author byline */
.book-page .bp-pub-authors {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary, #cfd6e6);
  margin: -4px 0 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.book-page .bp-pub-authors i {
  color: var(--accent, #ff8c1e);
  opacity: 0.8;
  margin-top: 4px;
  flex-shrink: 0;
}

/* Publication popup — details table (left pane) */
.book-page .bp-pub-meta-table {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 6px 0 12px;
}
.book-page .bp-pub-meta-row {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 8px 12px;
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  font-size: 13px;
  line-height: 1.45;
}
.book-page .bp-pub-meta-key {
  color: var(--text-muted, #9ba3b8);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.book-page .bp-pub-meta-key i {
  color: var(--accent, #ff8c1e);
  opacity: 0.85;
  font-size: 11px;
}
.book-page .bp-pub-meta-val {
  color: var(--text-primary, #e8eaf0);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.book-page .bp-pub-meta-val strong {
  color: var(--accent, #ff8c1e);
  font-weight: 800;
}

/* Publication popup — external links (right pane) */
.book-page .bp-pub-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 12px;
}
.book-page .bp-pub-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 10px;
  background: rgba(255,140,30,0.06);
  color: var(--text-primary, #e8eaf0);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
  word-break: break-word;
}
.book-page .bp-pub-link i {
  color: var(--accent, #ff8c1e);
  font-size: 12px;
  flex-shrink: 0;
}
.book-page .bp-pub-link:hover {
  background: rgba(255,140,30,0.14);
  border-color: var(--accent, #ff8c1e);
  transform: translateX(2px);
}

/* Mobile — stack the meta key/value */
@media (max-width: 640px) {
  .book-page .bp-pub-meta-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* -------------------------------------------------------------
   Publication CARD hover preview
   On hover, fade in the excerpt as a small bottom-anchored
   tooltip INSIDE the card. Uses position:absolute + the card's
   relative positioning — never causes layout shift, never
   overlaps the title or footer (clipped by overflow:hidden).
   ------------------------------------------------------------- */
.npub2-grid .npub2-card[data-excerpt] {
  /* ensure tooltip is positioned against the card */
  position: relative;
}
.npub2-grid .npub2-card[data-excerpt]::after,
.npub2-grid .npub2-card[data-excerpt-hover]::after {
  /* unrelated to FEATURED ::after; scoped by [data-excerpt] selector */
}

/* The dedicated hover preview element rendered inside the card.
   FIX (theme + overlap): floats BELOW the card (top:100%) instead of
   sitting over the title. Uses the same site-theme tokens as the
   parent .npub2-card so the look matches Research/Experience cards
   exactly — no more black overlay covering the title.

   The parent .npub2-card sets overflow:hidden (to clip its rail
   gradient and FEATURED ribbon). We restore overflow:visible only on
   hover, and only when the preview is present, so the tooltip can
   escape the card bounds without breaking the FEATURED ribbon clip
   in the idle state. */
.npub2-grid .npub2-card:hover,
.npub2-grid .npub2-card:focus-within,
.npub2-grid .npub-row:hover,
.npub2-grid .npub-row:focus-within {
  overflow: visible;
}

.npub2-card-preview {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;             /* float just below the card — never overlaps title/footer */
  margin-top: 6px;
  padding: 12px 14px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-secondary, #cfd6e6);
  /* Match the site theme — same tokens used by .npub2-card itself */
  background: var(--bg-primary, #0e1117);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--card-gradient, rgba(255,255,255,0.04)) 100%, transparent),
    color-mix(in srgb, var(--bg-primary, #0e1117) 96%, transparent));
  background-color: var(--bg-primary, #0e1117);
  border: 1px solid color-mix(in srgb, var(--accent, #ff8c1e) 35%, var(--border));
  border-radius: 12px;
  box-shadow:
    0 18px 38px -22px rgba(0, 0, 0, 0.55),
    0 0 0 1px color-mix(in srgb, var(--accent, #ff8c1e) 12%, transparent);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 20;           /* above siblings, below modal overlay */
  max-height: 6em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
/* Light-theme parity — use the light-theme tokens automatically. */
[data-theme='light'] .npub2-card-preview {
  background: #ffffff;
  color: var(--text-secondary, #2c3340);
  border-color: color-mix(in srgb, var(--accent, #d06800) 30%, var(--border, #e5e7eb));
  box-shadow:
    0 18px 38px -22px rgba(0, 0, 0, 0.18),
    0 0 0 1px color-mix(in srgb, var(--accent, #d06800) 10%, transparent);
}
/* Subtle accent rail on the left to echo the card's citation-tier rail */
.npub2-card-preview::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent, #ff8c1e), color-mix(in srgb, var(--accent, #ff8c1e) 60%, transparent));
  border-radius: 12px 0 0 12px;
  opacity: 0.75;
}
.npub2-grid .npub2-card:hover .npub2-card-preview,
.npub2-grid .npub2-card:focus-within .npub2-card-preview,
.npub2-grid .npub-row:hover .npub2-card-preview,
.npub2-grid .npub-row:focus-within .npub2-card-preview {
  opacity: 1;
  transform: translateY(0);
}
/* Hide preview when there's no excerpt to show */
.npub2-card-preview:empty { display: none; }

/* Small-screen / mobile — preview is unnecessary, popup is one tap away. */
@media (max-width: 640px) {
  .npub2-card-preview { display: none !important; }
}

/* =================================================================
   KG SEARCH BAR (FIX 1/2/3 — Projects / Articles / Blogs search)
   -----------------------------------------------------------------
   Intelligent search with live suggestions dropdown.
   Used by Projects, Articles, Blogs sections.
   ================================================================= */
.kg-search-bar {
  position: relative;
  margin: 0 0 18px 0;
  z-index: 30;
}
.kg-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(16, 22, 32, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 0 12px;
  height: 48px;
  transition: all 0.2s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.kg-search-input-wrap:focus-within {
  border-color: rgba(255, 140, 30, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 140, 30, 0.12);
  background: rgba(20, 26, 38, 0.85);
}
.kg-search-icon {
  color: #ffb066;
  font-size: 14px;
  margin-right: 10px;
  flex-shrink: 0;
}
.kg-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  color: #e8eaf0;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 0;
}
.kg-search-input::placeholder {
  color: #8b94a8;
  font-weight: 400;
}
.kg-search-input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.kg-search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  color: #cfd6e6;
  cursor: pointer;
  font-size: 11px;
  margin-left: 6px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.kg-search-clear:hover { background: rgba(255, 140, 30, 0.25); color: #fff; }
.kg-search-bar.has-query .kg-search-clear { display: inline-flex; }

/* Suggestions dropdown */
.kg-search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 360px;
  overflow-y: auto;
  background: #0e1117;
  border: 1px solid rgba(255, 140, 30, 0.28);
  border-radius: 14px;
  box-shadow:
    0 24px 64px -20px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 140, 30, 0.08);
  z-index: 40;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 140, 30, 0.4) transparent;
}
.kg-search-suggestions::-webkit-scrollbar { width: 8px; }
.kg-search-suggestions::-webkit-scrollbar-thumb { background: rgba(255, 140, 30, 0.4); border-radius: 8px; }
.kg-search-suggestions[hidden] { display: none; }

.kg-search-suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: #e8eaf0;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.kg-search-suggestion:hover,
.kg-search-suggestion.is-active {
  background: rgba(255, 140, 30, 0.14);
  color: #ffd4a3;
}
.kg-search-suggestion-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 140, 30, 0.16);
  color: #ffb066;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.kg-search-suggestion-body { flex: 1; min-width: 0; }
.kg-search-suggestion-title {
  font-weight: 600;
  font-size: 13.5px;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kg-search-suggestion-sub {
  font-size: 11.5px;
  color: #8b94a8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kg-search-suggestion mark {
  background: rgba(255, 140, 30, 0.25);
  color: #ffd4a3;
  padding: 0 2px;
  border-radius: 3px;
}
.kg-search-suggestions-empty {
  padding: 14px 12px;
  font-size: 13px;
  color: #8b94a8;
  text-align: center;
}

/* Light theme parity */
[data-theme='light'] .kg-search-input-wrap {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.10);
}
[data-theme='light'] .kg-search-input { color: #1a1d24; }
[data-theme='light'] .kg-search-input::placeholder { color: #6b7280; }
[data-theme='light'] .kg-search-suggestions {
  background: #ffffff;
  border-color: rgba(208, 104, 0, 0.30);
}
[data-theme='light'] .kg-search-suggestion { color: #1a1d24; }
[data-theme='light'] .kg-search-suggestion:hover,
[data-theme='light'] .kg-search-suggestion.is-active {
  background: rgba(208, 104, 0, 0.10);
  color: #c95a00;
}
[data-theme='light'] .kg-search-suggestion-sub { color: #6b7280; }

/* Mobile tweaks */
@media (max-width: 640px) {
  .kg-search-input-wrap { height: 44px; }
  .kg-search-input { font-size: 13px; }
  .kg-search-suggestions { max-height: 280px; }
}

/* Row/card hidden state used by search filter */
.kg-search-hidden { display: none !important; }

/* =================================================================
   PUBLICATIONS SCROLLABLE CONTAINER (FIX 4)
   -----------------------------------------------------------------
   Wraps #npubRows in a fixed-height scroll viewport with smooth
   momentum scrolling. Layout/card design is preserved.
   ================================================================= */
.npub2-scroll-shell {
  position: relative;
  max-height: min(72vh, 820px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 4px 10px 4px;
  border-radius: 16px;
  /* iOS momentum scrolling */
  -webkit-overflow-scrolling: touch;
  /* Scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 140, 30, 0.45) transparent;
  /* Smooth scroll behaviour */
  scroll-behavior: smooth;
  /* Soft fade at top/bottom */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.npub2-scroll-shell::-webkit-scrollbar { width: 10px; }
.npub2-scroll-shell::-webkit-scrollbar-track { background: transparent; }
.npub2-scroll-shell::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 140, 30, 0.55), rgba(255, 140, 30, 0.25));
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.npub2-scroll-shell::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(255, 140, 30, 0.85), rgba(255, 140, 30, 0.45));
  background-clip: padding-box;
}

/* When inside the scroll shell, prevent the grid empty-state padding from
   eating the whole height — keep it normal. */
.npub2-scroll-shell .npub2-grid { padding: 6px 6px 12px 6px; }

@media (max-width: 768px) {
  .npub2-scroll-shell { max-height: 70vh; }
}

/* =================================================================
   PUBLICATIONS HOVER PREVIEW — REMOVED (FIX 4)
   -----------------------------------------------------------------
   The hover preview popup is intentionally hidden. Click popup
   (the publication detail modal) still works.
   ================================================================= */
.npub2-card-preview { display: none !important; }
.npub2-grid .npub2-card:hover,
.npub2-grid .npub2-card:focus-within,
.npub2-grid .npub-row:hover,
.npub2-grid .npub-row:focus-within { overflow: hidden; }

/* =============================================================
   SESSION-FIX (FIX 4 — Articles/Blogs Country-Tag Overlap Bug)
   ------------------------------------------------------------
   Country tags (`.kg-country-tags`) were being injected into
   `.nart-card-footer` / `.nblog-post-footer`, both of which are
   `display:flex; justify-content:space-between` rows shared with
   `.nart-readtime` / `.nblog-post-arrow`. The flex layout pushed
   the country chips into the same row as the read-time text and
   they visually overlapped on narrow cards.

   The JS now mounts the chips into the card BODY (above the
   footer). These rules harden the layout so chips always wrap
   cleanly on their own row, regardless of the host element.
   ============================================================= */
.nart-card-body .kg-country-tags,
.nblog-post-body .kg-country-tags,
.nblog-hero-content .kg-country-tags {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 4px;
  flex-basis: 100%;
  order: 99;            /* always at the bottom of the body block */
}

/* Belt-and-braces: if any old DOM still puts chips inside a
   footer, force them to break onto their own line. */
.nart-card-footer .kg-country-tags,
.nblog-post-footer .kg-country-tags,
.nblog-hero-meta .kg-country-tags {
  flex-basis: 100%;
  width: 100%;
  margin-top: 8px;
  order: 99;
}

/* Make footer wrap when it ends up next to the chips on narrow
   cards, so .nart-readtime / .nblog-post-arrow never sit on top
   of (or behind) the chip row. */
.nart-card-footer,
.nblog-post-footer {
  flex-wrap: wrap;
  row-gap: 8px;
}

/* Tighter chip sizing inside article/blog cards so a long list of
   countries doesn't push the card height up dramatically. */
.nart-card .kg-country-tag,
.nblog-post .kg-country-tag,
.nblog-hero .kg-country-tag {
  font-size: 10.5px;
  padding: 2px 7px;
}