/* ========================================
   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: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.7;
  overflow-x: hidden;
  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 var(--border);
}

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

/* =========================================
   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(480px, calc(100vh - 360px));
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  scroll-padding-top: 40px;
  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 {
  position: sticky;
  top: 0;
  z-index: 2;
  /* Header gets its own opaque bg so items scrolling under it stay readable */
  background: rgba(12, 16, 24, 0.96) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.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: 4px;
  padding: 6px 8px 8px 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  /* Cap the per-group expanded list so other groups stay visible */
  max-height: 220px;
  overflow-y: auto;
  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: 6px;
  padding: 6px 9px;
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
  transition: all .2s ease;
  line-height: 1.3;
}

.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);
}

/* 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; }
.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; }

/* 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);
}
.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); }

/* =============================================
   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;
}

.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;
}
.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);
}
.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 */
.journey-stage.is-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9500 !important;
  background: var(--bg, #0a0d12);
  padding: 56px 16px 24px !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  border-radius: 0 !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. */
.nd-node-directory .nd-dir-group,
.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;
}
.nd-node-directory .nd-dir-group-header,
.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;
}
.nd-node-directory .nd-dir-group-header:hover,
.nd-dir-group-header:hover {
  background:
    linear-gradient(90deg, rgba(255,140,30,0.22), rgba(255,140,30,0.10)),
    #ffedd5 !important;
}
.nd-node-directory .nd-dir-group-icon,
.nd-dir-group-icon { color: #f97316 !important; }
.nd-node-directory .nd-dir-group-label,
.nd-dir-group-label { color: #c2410c !important; }
.nd-node-directory .nd-dir-group-count,
.nd-dir-group-count {
  background: #ffffff !important;
  color: #f97316 !important;
  border: 1px solid rgba(255,140,30,0.35) !important;
  font-weight: 700 !important;
}
.nd-node-directory .nd-dir-group-chev,
.nd-dir-group-chev { color: #f97316 !important; }
.nd-node-directory .nd-dir-group-body,
.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 */
.nd-node-directory .nd-dir-group-dot,
.nd-dir-group-dot {
  border: 1px solid rgba(255,140,30,0.35) !important;
}
.nd-node-jump {
  background: #fffaf3 !important;
  border: 1px solid rgba(255,140,30,0.20) !important;
  color: #4b2e16 !important;
}
.nd-node-jump:hover {
  background: #ffedd5 !important;
  border-color: #f97316 !important;
  color: #c2410c !important;
}

/* Layout toggle (Force / Radial) — replace gray with orange/white themed */
.nd-toggle-btn {
  background: #ffffff !important;
  border: 1px solid rgba(255,140,30,0.30) !important;
  color: #9a4a14 !important;
}
.nd-toggle-btn:hover {
  background: #fff7ed !important;
  border-color: #f97316 !important;
  color: #c2410c !important;
}
.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) */
.nd-chip {
  background: #ffffff !important;
  border: 1px solid rgba(255,140,30,0.28) !important;
  color: #9a4a14 !important;
}
.nd-chip:hover {
  background: #fff7ed !important;
  border-color: #f97316 !important;
  color: #c2410c !important;
}
.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 */
.nd-country-select {
  background: #ffffff !important;
  border: 1px solid rgba(255,140,30,0.28) !important;
  color: #4b2e16 !important;
}
.nd-country-select:focus,
.nd-country-select:hover {
  border-color: #f97316 !important;
}

/* Stat cards (37 NODES, 60 LINKS, 22 PAPERS, 306 CITES) */
.nd-stat-card {
  background: #ffffff !important;
  border: 1px solid rgba(255,140,30,0.20) !important;
}
.nd-stat-card-num { color: #f97316 !important; }
.nd-stat-card-lbl { color: #9a4a14 !important; }

/* Search inputs */
.nd-search-input-v2,
.nd-dir-search-input {
  background: #ffffff !important;
  border: 1px solid rgba(255,140,30,0.25) !important;
  color: #4b2e16 !important;
}
.nd-search-input-v2:focus,
.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;
}
.nd-search-icon-v2,
.nd-dir-search-icon { color: #f97316 !important; }

/* Section titles (QUICK JUMP, NODE TYPES) */
.nd-sb-section-title { color: #c2410c !important; }
.nd-sb-section-icon { color: #f97316 !important; }

/* Sidebar overall */
.nd-sidebar-v2 {
  background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%) !important;
  border: 1px solid rgba(255,140,30,0.20) !important;
}
.nd-sb-section { border-bottom-color: rgba(255,140,30,0.15) !important; }

/* Legend item text */
.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. */
body > .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"] body > .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 */
body > .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 */
body > .journey-stage.is-fullscreen .journey-wrapper {
  height: 100% !important;
  min-height: 100% !important;
  transform: none !important;
}

/* Edge fades span the full overlay height */
body > .journey-stage.is-fullscreen .journey-fade,
body > .journey-stage.is-fullscreen .journey-fade-left,
body > .journey-stage.is-fullscreen .journey-fade-right {
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
}

/* Fullscreen exit (collapse) button — clearly visible, themed */
body > .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"] body > .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 */
body > .journey-stage.is-fullscreen .journey-loader { top: 50% !important; }
body > .journey-stage.is-fullscreen .journey-scroll-hint {
  top: 80px !important;
}

/* Page lock while fullscreen is active.
   We lock both <html> and <body> so absolutely nothing scrolls
   behind the timeline. The portaled stage is the only visible thing. */
html.journey-fs-lock-html,
body.journey-fs-lock {
  overflow: hidden !important;
  height: 100vh !important;
  height: 100dvh !important;
}
body.journey-fs-lock {
  position: relative;
}

/* 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;
}