/* Art direction: AI consciousness research nonprofit → serious, literary, confident
   Palette: Dark-only. Near-black bg, subtle gray surfaces. Iridescent accent (5%)
   Typography: Lora (display serif) + Satoshi (body sans-serif) — "neuroscience lab with taste"
   Density: Spacious — editorial, research org */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
  --font-display: 'Lora', Georgia, serif;
  --font-body: 'Satoshi', 'Inter', sans-serif;

  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3rem,     0.5rem  + 7vw,    8rem);

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --color-bg:             #0a0a0a;
  --color-surface:        #111111;
  --color-surface-2:      #161616;
  --color-surface-3:      #1a1a1a;
  --color-surface-offset: #1e1e1e;
  --color-divider:        #222222;
  --color-border:         #2a2a2a;

  --color-text:           #e0e0e0;
  --color-text-muted:     #999999;
  --color-text-faint:     #666666;

  --color-accent-start:   #4ecdc4;
  --color-accent-mid:     #556cd6;
  --color-accent-end:     #c678dd;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.4);
  --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.5);

  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;
  --content-full: 100%;
}

/* ============================================================
   ANIMATED IRIDESCENT GRADIENT
   ============================================================ */

@keyframes shimmer-bg {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.iridescent-line {
  height: 1px;
  border: none;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-accent-start),
    var(--color-accent-mid),
    var(--color-accent-end),
    transparent
  );
  background-size: 200% 100%;
  animation: shimmer-bg 8s ease-in-out infinite;
  opacity: 0.4;
}

/* ============================================================
   HERO LOGO — clean fade + scale entrance + holographic sheen
   ============================================================ */

.hero-logo-container {
  width: clamp(220px, 35vw, 380px);
  margin: 0 auto var(--space-8);
  position: relative;
}

.hero-logo-svg {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
  transform: scale(0.92);
  animation: logo-entrance 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

.hero-logo-svg path {
  fill: var(--color-text);
  stroke: none;
}

@keyframes logo-entrance {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Holographic sheen — SVG gradient fill controlled by JS.
   Paths transition between solid fill and gradient fill on mousemove. */

/* Legacy sheen overlay div — keep hidden, replaced by filter approach */
.hero-logo-sheen {
  display: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 547 408'%3E%3Cpath d='M265.868 387.979C236.268 402.692 204.801 408.705 171.468 406.019C145.141 403.899 120.571 396.409 97.7578 383.549C72.0578 369.055 51.1244 349.409 34.9578 324.609C14.9844 293.982 3.61111 260.599 0.837778 224.459C-0.652222 205.079-0.162223 186.969 2.36778 168.379C13.4278 87.0888 71.0678 14.6787 155.168 1.93874C169.454-0.227922 185.231-0.544601 202.498 0.988732C221.978 2.72873 242.928 9.08875 260.128 17.2588C269.301 21.6121 279.194 27.4654 289.808 34.8187C312.034 50.2121 330.591 69.0321 345.478 91.2787C357.068 108.619 362.398 125.729 349.598 144.589C341.668 156.279 330.318 166.249 320.148 174.899C309.021 184.352 297.968 193.005 286.988 200.859C286.9 200.921 286.795 200.954 286.688 200.954C286.58 200.954 286.476 200.921 286.388 200.859L277.028 194.559C276.975 194.522 276.931 194.473 276.902 194.416C276.872 194.359 276.857 194.295 276.858 194.231C276.859 194.167 276.876 194.104 276.908 194.047C276.939 193.991 276.984 193.943 277.038 193.909C279.338 192.462 281.944 190.612 284.858 188.359C301.718 175.309 319.168 161.829 332.438 147.709C336.178 143.729 339.418 139.315 342.158 134.469C350.638 119.509 340.378 104.419 331.788 91.7687C329.521 88.4287 324.891 82.7121 317.898 74.6187C316.731 73.2654 312.898 69.4154 306.398 63.0687C302.024 58.7954 297.924 55.1887 294.098 52.2487C283.218 43.8587 273.118 36.5587 261.528 30.8087C248.201 24.1887 234.584 19.1321 220.678 15.6388C210.024 12.9654 198.041 11.5654 184.728 11.4387C135.818 10.9587 91.6878 31.1887 59.7278 67.5487C11.6078 122.289 0.307787 201.489 21.3778 269.609C25.0278 281.399 30.2278 292.669 35.8678 303.699C37.6944 307.265 40.6911 312.169 44.8578 318.409C85.8378 379.749 159.128 408.369 230.818 389.189C234.978 388.075 238.391 386.999 241.058 385.959C247.018 383.629 250.488 382.479 252.898 381.029C253.312 380.775 253.788 380.638 254.276 380.633C254.763 380.628 255.244 380.754 255.668 380.999L265.908 386.909C266.002 386.965 266.079 387.045 266.132 387.141C266.184 387.238 266.209 387.346 266.205 387.456C266.201 387.565 266.168 387.672 266.11 387.764C266.053 387.857 265.972 387.932 265.878 387.979Z' fill='black'/%3E%3Cpath d='M267.278 214.479C267.295 214.49 267.309 214.505 267.319 214.523C267.329 214.541 267.335 214.561 267.336 214.581C267.337 214.602 267.333 214.622 267.325 214.641C267.317 214.659 267.304 214.676 267.288 214.689C254.554 224.049 242.541 233.402 231.248 242.749C225.001 247.915 219.364 253.112 214.338 258.339C209.518 263.359 203.788 270.539 201.008 276.249C195.348 287.899 201.668 299.769 208.328 309.779C215.688 320.829 224.948 332.069 234.968 341.609C242.888 349.149 247.368 353.209 255.518 359.499C269.798 370.532 284.891 378.929 300.798 384.689C332.228 396.069 365.368 398.319 397.578 390.699C443.258 379.889 482.148 350.469 505.858 309.869C534.598 260.659 540.418 199.969 526.098 145.129C510.978 87.2488 469.968 37.9788 412.378 19.1388C383.428 9.65876 350.858 9.05875 320.988 16.2487C310.908 18.6821 300.501 22.4921 289.768 27.6787C289.66 27.7309 289.54 27.7563 289.42 27.7528C289.3 27.7494 289.183 27.7171 289.078 27.6588L278.108 21.3287C278.027 21.282 277.961 21.2146 277.916 21.1336C277.87 21.0525 277.847 20.9608 277.849 20.8679C277.851 20.775 277.878 20.6843 277.927 20.6053C277.976 20.5263 278.046 20.4619 278.128 20.4188C307.221 5.36543 338.268-1.36457 371.268 0.228758C387.855 1.02876 402.998 3.72542 416.698 8.31876C439.518 15.9788 459.801 27.6321 477.548 43.2787C498.638 61.8587 515.698 86.0087 526.528 111.109C532.401 124.709 536.924 139.179 540.098 154.519C549.628 200.629 545.668 250.259 527.028 293.819C510.048 333.479 480.128 367.189 441.188 386.939C407.488 404.025 371.785 409.995 334.078 404.849C312.128 401.849 289.138 394.549 269.798 382.699C264.458 379.432 260.614 377.022 258.268 375.469C239.148 362.809 222.411 347.389 208.058 329.209C201.131 320.429 195.501 311.575 191.168 302.649C179.798 279.209 194.758 261.309 210.848 245.589C212.154 244.309 215.871 240.972 221.998 235.579C232.448 226.389 245.288 217.029 254.848 209.849C255.428 209.415 256.301 208.899 257.468 208.299C257.541 208.259 257.623 208.241 257.706 208.244C257.788 208.248 257.869 208.273 257.938 208.319L267.278 214.479Z' fill='black'/%3E%3Cpath d='M265.818 40.6787C241.538 57.4787 219.118 78.8787 204.488 104.499C198.078 115.719 196.678 126.969 204.618 137.909C212.258 148.439 221.178 156.859 229.458 163.729C235.471 168.722 238.691 171.405 239.118 171.779C247.558 179.149 253.978 183.539 264.128 191.689C266.121 193.289 271.121 196.905 279.128 202.539C285.401 206.952 290.401 210.572 294.128 213.399C311.968 226.929 325.738 237.889 338.968 251.019C341.314 253.339 344.161 256.602 347.508 260.809C357.648 273.559 360.338 287.289 353.188 302.949C350.628 308.555 348.164 313.089 345.798 316.549C337.471 328.722 328.171 339.775 317.898 349.709C313.428 354.039 307.438 358.899 303.208 362.709C298.808 366.669 292.788 369.999 289.078 373.529C288.96 373.639 288.81 373.708 288.649 373.726C288.489 373.744 288.327 373.71 288.188 373.629L277.938 367.709C277.875 367.672 277.822 367.62 277.785 367.557C277.747 367.495 277.726 367.424 277.723 367.352C277.72 367.28 277.735 367.209 277.768 367.146C277.8 367.082 277.848 367.028 277.908 366.989C286.668 361.122 293.858 355.782 299.478 350.969C311.024 341.082 321.434 330.002 330.708 317.729C334.921 312.162 338.544 306.525 341.578 300.819C347.748 289.189 346.818 279.279 338.798 268.939C333.628 262.269 327.138 255.129 319.828 248.929C303.928 235.439 294.788 228.459 275.028 213.499C265.088 205.969 255.418 199.679 246.748 192.749C238.208 185.909 228.828 178.789 220.458 171.199C214.284 165.599 210.688 162.312 209.668 161.339C203.614 155.592 198.364 149.439 193.918 142.879C184.608 129.149 185.958 114.369 193.678 100.409C208.338 73.8687 230.388 51.5287 255.528 34.3987C255.87 34.1667 256.284 34.0626 256.697 34.1046C257.11 34.1467 257.496 34.3321 257.788 34.6287C260.448 37.3387 263.058 38.1987 265.778 39.7687C265.856 39.8141 265.922 39.8786 265.97 39.9562C266.017 40.0338 266.043 40.1221 266.047 40.2128C266.051 40.3035 266.032 40.3937 265.992 40.4752C265.952 40.5566 265.892 40.6266 265.818 40.6787Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 547 408'%3E%3Cpath d='M265.868 387.979C236.268 402.692 204.801 408.705 171.468 406.019C145.141 403.899 120.571 396.409 97.7578 383.549C72.0578 369.055 51.1244 349.409 34.9578 324.609C14.9844 293.982 3.61111 260.599 0.837778 224.459C-0.652222 205.079-0.162223 186.969 2.36778 168.379C13.4278 87.0888 71.0678 14.6787 155.168 1.93874C169.454-0.227922 185.231-0.544601 202.498 0.988732C221.978 2.72873 242.928 9.08875 260.128 17.2588C269.301 21.6121 279.194 27.4654 289.808 34.8187C312.034 50.2121 330.591 69.0321 345.478 91.2787C357.068 108.619 362.398 125.729 349.598 144.589C341.668 156.279 330.318 166.249 320.148 174.899C309.021 184.352 297.968 193.005 286.988 200.859C286.9 200.921 286.795 200.954 286.688 200.954C286.58 200.954 286.476 200.921 286.388 200.859L277.028 194.559C276.975 194.522 276.931 194.473 276.902 194.416C276.872 194.359 276.857 194.295 276.858 194.231C276.859 194.167 276.876 194.104 276.908 194.047C276.939 193.991 276.984 193.943 277.038 193.909C279.338 192.462 281.944 190.612 284.858 188.359C301.718 175.309 319.168 161.829 332.438 147.709C336.178 143.729 339.418 139.315 342.158 134.469C350.638 119.509 340.378 104.419 331.788 91.7687C329.521 88.4287 324.891 82.7121 317.898 74.6187C316.731 73.2654 312.898 69.4154 306.398 63.0687C302.024 58.7954 297.924 55.1887 294.098 52.2487C283.218 43.8587 273.118 36.5587 261.528 30.8087C248.201 24.1887 234.584 19.1321 220.678 15.6388C210.024 12.9654 198.041 11.5654 184.728 11.4387C135.818 10.9587 91.6878 31.1887 59.7278 67.5487C11.6078 122.289 0.307787 201.489 21.3778 269.609C25.0278 281.399 30.2278 292.669 35.8678 303.699C37.6944 307.265 40.6911 312.169 44.8578 318.409C85.8378 379.749 159.128 408.369 230.818 389.189C234.978 388.075 238.391 386.999 241.058 385.959C247.018 383.629 250.488 382.479 252.898 381.029C253.312 380.775 253.788 380.638 254.276 380.633C254.763 380.628 255.244 380.754 255.668 380.999L265.908 386.909C266.002 386.965 266.079 387.045 266.132 387.141C266.184 387.238 266.209 387.346 266.205 387.456C266.201 387.565 266.168 387.672 266.11 387.764C266.053 387.857 265.972 387.932 265.878 387.979Z' fill='black'/%3E%3Cpath d='M267.278 214.479C267.295 214.49 267.309 214.505 267.319 214.523C267.329 214.541 267.335 214.561 267.336 214.581C267.337 214.602 267.333 214.622 267.325 214.641C267.317 214.659 267.304 214.676 267.288 214.689C254.554 224.049 242.541 233.402 231.248 242.749C225.001 247.915 219.364 253.112 214.338 258.339C209.518 263.359 203.788 270.539 201.008 276.249C195.348 287.899 201.668 299.769 208.328 309.779C215.688 320.829 224.948 332.069 234.968 341.609C242.888 349.149 247.368 353.209 255.518 359.499C269.798 370.532 284.891 378.929 300.798 384.689C332.228 396.069 365.368 398.319 397.578 390.699C443.258 379.889 482.148 350.469 505.858 309.869C534.598 260.659 540.418 199.969 526.098 145.129C510.978 87.2488 469.968 37.9788 412.378 19.1388C383.428 9.65876 350.858 9.05875 320.988 16.2487C310.908 18.6821 300.501 22.4921 289.768 27.6787C289.66 27.7309 289.54 27.7563 289.42 27.7528C289.3 27.7494 289.183 27.7171 289.078 27.6588L278.108 21.3287C278.027 21.282 277.961 21.2146 277.916 21.1336C277.87 21.0525 277.847 20.9608 277.849 20.8679C277.851 20.775 277.878 20.6843 277.927 20.6053C277.976 20.5263 278.046 20.4619 278.128 20.4188C307.221 5.36543 338.268-1.36457 371.268 0.228758C387.855 1.02876 402.998 3.72542 416.698 8.31876C439.518 15.9788 459.801 27.6321 477.548 43.2787C498.638 61.8587 515.698 86.0087 526.528 111.109C532.401 124.709 536.924 139.179 540.098 154.519C549.628 200.629 545.668 250.259 527.028 293.819C510.048 333.479 480.128 367.189 441.188 386.939C407.488 404.025 371.785 409.995 334.078 404.849C312.128 401.849 289.138 394.549 269.798 382.699C264.458 379.432 260.614 377.022 258.268 375.469C239.148 362.809 222.411 347.389 208.058 329.209C201.131 320.429 195.501 311.575 191.168 302.649C179.798 279.209 194.758 261.309 210.848 245.589C212.154 244.309 215.871 240.972 221.998 235.579C232.448 226.389 245.288 217.029 254.848 209.849C255.428 209.415 256.301 208.899 257.468 208.299C257.541 208.259 257.623 208.241 257.706 208.244C257.788 208.248 257.869 208.273 257.938 208.319L267.278 214.479Z' fill='black'/%3E%3Cpath d='M265.818 40.6787C241.538 57.4787 219.118 78.8787 204.488 104.499C198.078 115.719 196.678 126.969 204.618 137.909C212.258 148.439 221.178 156.859 229.458 163.729C235.471 168.722 238.691 171.405 239.118 171.779C247.558 179.149 253.978 183.539 264.128 191.689C266.121 193.289 271.121 196.905 279.128 202.539C285.401 206.952 290.401 210.572 294.128 213.399C311.968 226.929 325.738 237.889 338.968 251.019C341.314 253.339 344.161 256.602 347.508 260.809C357.648 273.559 360.338 287.289 353.188 302.949C350.628 308.555 348.164 313.089 345.798 316.549C337.471 328.722 328.171 339.775 317.898 349.709C313.428 354.039 307.438 358.899 303.208 362.709C298.808 366.669 292.788 369.999 289.078 373.529C288.96 373.639 288.81 373.708 288.649 373.726C288.489 373.744 288.327 373.71 288.188 373.629L277.938 367.709C277.875 367.672 277.822 367.62 277.785 367.557C277.747 367.495 277.726 367.424 277.723 367.352C277.72 367.28 277.735 367.209 277.768 367.146C277.8 367.082 277.848 367.028 277.908 366.989C286.668 361.122 293.858 355.782 299.478 350.969C311.024 341.082 321.434 330.002 330.708 317.729C334.921 312.162 338.544 306.525 341.578 300.819C347.748 289.189 346.818 279.279 338.798 268.939C333.628 262.269 327.138 255.129 319.828 248.929C303.928 235.439 294.788 228.459 275.028 213.499C265.088 205.969 255.418 199.679 246.748 192.749C238.208 185.909 228.828 178.789 220.458 171.199C214.284 165.599 210.688 162.312 209.668 161.339C203.614 155.592 198.364 149.439 193.918 142.879C184.608 129.149 185.958 114.369 193.678 100.409C208.338 73.8687 230.388 51.5287 255.528 34.3987C255.87 34.1667 256.284 34.0626 256.697 34.1046C257.11 34.1467 257.496 34.3321 257.788 34.6287C260.448 37.3387 263.058 38.1987 265.778 39.7687C265.856 39.8141 265.922 39.8786 265.97 39.9562C266.017 40.0338 266.043 40.1221 266.047 40.2128C266.051 40.3035 266.032 40.3937 265.992 40.4752C265.952 40.5566 265.892 40.6266 265.818 40.6787Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

/* Sheen opacity controlled via JS mousemove/mouseleave */

/* Holographic sheen on hero title text */
.hero__title {
  position: relative;
}

.hero__title-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  background: radial-gradient(
    250px circle at var(--mx, 50%) var(--my, 50%),
    rgba(78, 205, 196, 0.5) 0%,
    rgba(85, 108, 214, 0.35) 30%,
    rgba(198, 120, 221, 0.2) 55%,
    transparent 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Title sheen opacity controlled via JS mousemove/mouseleave */

/* Nav logo (small, static — no animation) */
.nav-logo-svg {
  width: 32px;
  height: auto;
}

.nav-logo-svg path {
  fill: var(--color-text);
  stroke: none;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); margin-bottom: var(--space-6); }
h3 { font-size: var(--text-lg); margin-bottom: var(--space-4); }

p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.container {
  max-width: var(--content-default);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container--narrow { max-width: var(--content-narrow); }
.container--wide { max-width: var(--content-wide); }

.section {
  padding-block: clamp(var(--space-8), 5vw, var(--space-16));
}

/* ============================================================
   HEADER / NAV
   ============================================================ */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-accent-start) 20%,
    var(--color-accent-mid) 50%,
    var(--color-accent-end) 80%,
    transparent 100%
  );
  opacity: 0.3;
  background-size: 200% 100%;
  animation: shimmer-bg 8s ease-in-out infinite;
}

.header--scrolled {
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding: var(--space-3) var(--space-6);
}

.header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: var(--space-3);
  color: var(--color-text);
}

.header__logo-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text);
}

.nav__list {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  align-items: center;
}

.nav__link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  letter-spacing: 0.02em;
  position: relative;
  padding: var(--space-1) 0;
  transition: color var(--transition-interactive);
}

.nav__link:hover { color: var(--color-text); }
.nav__link--active { color: var(--color-text); }

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent-start), var(--color-accent-mid), var(--color-accent-end));
  opacity: 0;
  transition: opacity var(--transition-interactive);
}

.nav__link:hover::after,
.nav__link--active::after { opacity: 1; }

/* Mobile nav */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: var(--space-2);
  cursor: pointer;
  background: none;
  border: none;
  -webkit-tap-highlight-color: transparent;
}

.nav__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

@media (max-width: 768px) {
  .nav__toggle { display: flex; }
  .header__logo-text { display: none; }
  .nav__list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(10, 10, 10, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-6);
  }
  .nav__list--open { display: flex; }
  .nav__link {
    padding: var(--space-2) 0;
    font-size: var(--text-base);
  }
  .nav__link::after {
    bottom: 2px;
  }
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--space-8) var(--space-6) var(--space-16);
  position: relative;
  overflow: hidden;
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
  opacity: 0;
  animation: hero-text-in 0.8s ease-out 1s forwards;
}

.hero__tagline {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 48ch;
  line-height: 1.5;
  opacity: 0;
  animation: hero-text-in 0.8s ease-out 1.3s forwards;
}

@keyframes hero-text-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Iridescent gradient orb behind logo — very subtle */
.hero::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(85, 108, 214, 0.06) 0%,
    rgba(78, 205, 196, 0.03) 40%,
    transparent 70%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  pointer-events: none;
  animation: pulse-orb 6s ease-in-out infinite;
}

@keyframes pulse-orb {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -55%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -55%) scale(1.1); }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Staggered children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.4s; }

.reveal-stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Parallax section divider */
.parallax-divider {
  height: 1px;
  position: relative;
  overflow: visible;
}

.parallax-divider .iridescent-line {
  position: relative;
}

/* ============================================================
   CARDS
   ============================================================ */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Iridescent shimmer on hover for research cards */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(78, 205, 196, 0.03) 30%,
    rgba(85, 108, 214, 0.05) 50%,
    rgba(198, 120, 221, 0.03) 70%,
    transparent 100%
  );
  transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 0;
}

.card:hover::before {
  left: 0;
}

.card:hover {
  border-color: rgba(85, 108, 214, 0.25);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  transform: translateY(-3px);
}

.card > * {
  position: relative;
  z-index: 1;
}

.card--link {
  text-decoration: none;
  display: block;
  cursor: pointer;
}

.card--link:hover {
  border-color: rgba(85, 108, 214, 0.3);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.card__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  line-height: 1.3;
}

.card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-interactive),
              color var(--transition-interactive),
              box-shadow var(--transition-interactive),
              transform var(--transition-interactive),
              border-color var(--transition-interactive);
}

.btn--primary {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  width: auto;
  align-self: flex-start;
}

.btn--primary:hover {
  background: var(--color-surface-3);
  border-color: rgba(85, 108, 214, 0.3);
  transform: translateY(-1px);
}

.btn--primary:active { transform: translateY(0); }

/* ============================================================
   TWO-COLUMN LAYOUT for Publications + Media
   ============================================================ */

.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

@media (min-width: 800px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
  .two-col--wide-media {
    grid-template-columns: 1fr 2fr;
  }
  .three-col {
    grid-template-columns: 3fr 4fr 4fr;
  }
  .pub-list--two-col {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: start;
  }
  .pub-list--two-col .pub-item--media {
    border-bottom: none;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    height: 100%;
    display: flex;
    align-items: stretch;
  }
  .pub-list--two-col .pub-item__link--media {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .pub-list--two-col .pub-item__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border: none;
    border-bottom: 1px solid var(--color-divider);
  }
  .pub-list--two-col .pub-item__text {
    padding: var(--space-3);
  }
}

/* ============================================================
   PUBLICATION / MEDIA LIST
   ============================================================ */

.pub-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pub-item {
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Iridescent shimmer on hover for pub items */
.pub-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(78, 205, 196, 0.03) 30%,
    rgba(85, 108, 214, 0.05) 50%,
    rgba(198, 120, 221, 0.03) 70%,
    transparent 100%
  );
  transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 0;
}

.pub-item:hover::before {
  left: 0;
}

.pub-item:hover {
  background: var(--color-surface);
}

.pub-item__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.pub-item__meta {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.pub-item__link {
  color: var(--color-text-muted);
  text-decoration: none;
  display: block;
  transition: color var(--transition-interactive);
}

.pub-item__link:hover { color: var(--color-text); }
.pub-item__link:hover .pub-item__title { color: var(--color-text); }

/* Media items with thumbnails */
.pub-item--media {
  padding: var(--space-3);
}

.pub-item__link--media {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-interactive);
}

.pub-item__link--media:hover { color: var(--color-text); }
.pub-item__link--media:hover .pub-item__title { color: var(--color-text); }

.pub-item__thumb {
  width: 100px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  border: 1px solid var(--color-divider);
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

.pub-item--media:hover .pub-item__thumb {
  opacity: 1;
}

.pub-item__text {
  min-width: 0;
}

/* Logo-style thumbnails for homepage (outlet wordmarks instead of screenshots) */
.pub-item__logo {
  width: 100px;
  height: 56px;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity 0.3s ease;
  border: none;
  border-radius: 0;
  filter: none;
}

.pub-item--media:hover .pub-item__logo {
  opacity: 0.85;
}

@media (max-width: 480px) {
  .pub-item__thumb {
    width: 72px;
    height: 40px;
  }
  .pub-item__logo {
    width: 72px;
    height: 40px;
  }
  .pub-item__link--media {
    gap: var(--space-3);
  }
}

/* ============================================================
   TEAM
   ============================================================ */

.team-member {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-8);
  align-items: center;
}

@media (max-width: 640px) {
  .team-member {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .team-member__photo { margin-inline: auto; }
}

.team-member__photo {
  width: 180px;
  height: 180px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  object-position: center 20%;
  /* Fix contrast — ensure natural rendering */
  filter: none;
  image-rendering: auto;
}

.team-member__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.team-member__role {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-4);
}

.team-member__bio {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 60ch;
}

/* ============================================================
   CONTACT / FORMS
   ============================================================ */

.form-group { margin-bottom: var(--space-5); }

.form-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.form-input,
.form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-interactive),
              box-shadow var(--transition-interactive);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-accent-mid);
  box-shadow: 0 0 0 3px rgba(85, 108, 214, 0.15);
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--color-text-faint); }

.form-textarea { min-height: 140px; resize: vertical; }

/* ============================================================
   EMAIL LINK
   ============================================================ */

.email-link {
  color: var(--color-text);
  text-decoration: none;
  position: relative;
  font-weight: 500;
  transition: color var(--transition-interactive);
}

.email-link:hover { color: var(--color-accent-start); }

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  padding: var(--space-10) var(--space-6);
  text-align: center;
}

.footer__inner {
  max-width: var(--content-default);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer__text {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.8;
}

/* ============================================================
   UTILITY
   ============================================================ */

.text-muted { color: var(--color-text-muted); }
.text-faint { color: var(--color-text-faint); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.text-center { text-align: center; }

.research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
  gap: var(--space-6);
}

.section-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-4);
}

.section-note {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-style: italic;
  margin-top: calc(-1 * var(--space-2));
  margin-bottom: var(--space-2);
}

.page-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
}

.page-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 56ch;
  line-height: 1.5;
}

.featured-pubs {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.blog-placeholder {
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.donate-section {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.callout {
  border-left: 2px solid var(--color-accent-mid);
  padding-left: var(--space-6);
  margin-block: var(--space-8);
}

.callout p {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-text);
  line-height: 1.6;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  z-index: 200;
  text-decoration: none;
}

.skip-link:focus { top: var(--space-2); }

/* ============================================================
   SMOOTH PARALLAX SCROLL EFFECTS
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .parallax-slow {
    will-change: transform;
  }
}

/* ============================================================
   EXPRESS INTEREST FORM
   ============================================================ */

.interest-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 480px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}

.form-optional {
  font-weight: 400;
  color: var(--color-text-faint);
}

.form-input {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.form-input:focus {
  border-color: var(--color-accent-mid);
  box-shadow: 0 0 0 2px rgba(85, 108, 214, 0.15);
}

.form-input::placeholder {
  color: var(--color-text-faint);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.5;
}

.form-status {
  font-size: var(--text-sm);
  min-height: 1.5em;
  margin-top: var(--space-2);
}

.form-status--success {
  color: var(--color-accent-start);
}

.form-status--error {
  color: #e06c75;
}

/* ============================================================
   TOOLTIP TERM
   ============================================================ */

.tooltip-term {
  position: relative;
  cursor: help;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.2);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
}

.tooltip-term__bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 300px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-style: italic;
  line-height: 1.5;
  letter-spacing: 0.01em;
  white-space: normal;
  text-decoration: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-interactive), transform var(--transition-interactive);
  z-index: 100;
}

/* Invisible bridge so cursor can travel from word to bubble */
.tooltip-term__bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 12px;
}

.tooltip-term:hover .tooltip-term__bubble,
.tooltip-term:focus .tooltip-term__bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.tooltip-term__link {
  color: var(--color-accent-start);
  text-decoration: underline;
  text-decoration-color: rgba(78, 205, 196, 0.4);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--transition-interactive), text-decoration-color var(--transition-interactive);
}

.tooltip-term__link:hover {
  color: #6ee0d8;
  text-decoration-color: rgba(78, 205, 196, 0.7);
}