/* Modern Portfolio Design - Dark Hero Section */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Nunito:wght@200&family=JetBrains+Mono:wght@300;400;600;700&display=swap');

:root {
  --primary: #ffffff;
  --text-light: #b3b3b3;
  --bg-dark: #000000;
  --bg-darker: #000000;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: 'JetBrains Mono', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #ffffff;
  line-height: 1.6;
  background: var(--bg-darker);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Hero Section */
.hero-section {
  background: #000000;
  padding: 80px 8vw 48px;
  min-height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --parallax-x: 0;
  --parallax-y: 0;
}

@keyframes gradientShift {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes floatSubtle {
  0%, 100% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(15px, -10px);
  }
}

@keyframes floatSubtleDelayed {
  0%, 100% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(-20px, 10px);
  }
}

@keyframes accentPulse {
  0%, 100% {
    opacity: 0.15;
    stroke-width: 2;
  }
  50% {
    opacity: 0.25;
    stroke-width: 2.5;
  }
}

@keyframes accentPulseDelayed {
  0%, 100% {
    opacity: 0.12;
    stroke-width: 2;
  }
  50% {
    opacity: 0.22;
    stroke-width: 2.5;
  }
}

@keyframes meshShift {
  0% {
    transform: translate3d(calc(var(--parallax-x) * 10px - 16px), calc(var(--parallax-y) * 10px + 8px), 0) scale(1);
    filter: hue-rotate(0deg);
  }
  50% {
    transform: translate3d(calc(var(--parallax-x) * 10px + 12px), calc(var(--parallax-y) * 10px - 10px), 0) scale(1.02);
    filter: hue-rotate(10deg);
  }
  100% {
    transform: translate3d(calc(var(--parallax-x) * 10px - 8px), calc(var(--parallax-y) * 10px + 14px), 0) scale(1.01);
    filter: hue-rotate(-6deg);
  }
}

@keyframes gridDrift {
  0% {
    background-position: 0 0, 0 0;
  }
  100% {
    background-position: 160px 140px, -160px -140px;
  }
}

@keyframes gridPulse {
  0%, 100% {
    opacity: 0.22;
  }
  50% {
    opacity: 0.36;
  }
}

@keyframes heroGlow {
  0% {
    text-shadow:
      0 0 6px rgba(255, 255, 255, 0.25),
      8px 0 18px rgba(59, 130, 246, 0.35),
      -8px 0 18px rgba(236, 72, 153, 0.32),
      0 0 32px rgba(14, 165, 233, 0.22),
      0 0 48px rgba(236, 72, 153, 0.14);
  }
  50% {
    text-shadow:
      0 0 8px rgba(255, 255, 255, 0.3),
      12px 0 22px rgba(59, 130, 246, 0.42),
      -12px 0 22px rgba(236, 72, 153, 0.4),
      0 0 36px rgba(14, 165, 233, 0.26),
      0 0 56px rgba(236, 72, 153, 0.18);
  }
  100% {
    text-shadow:
      0 0 7px rgba(255, 255, 255, 0.28),
      10px 0 20px rgba(59, 130, 246, 0.38),
      -10px 0 20px rgba(236, 72, 153, 0.36),
      0 0 40px rgba(14, 165, 233, 0.24),
      0 0 60px rgba(236, 72, 153, 0.16);
  }
}

.float-subtle {
  animation: floatSubtle 6s ease-in-out infinite;
}

.float-subtle-delayed {
  animation: floatSubtleDelayed 8s ease-in-out infinite 2s;
}

.accent-line {
  animation: accentPulse 4s ease-in-out infinite;
}

.accent-line-delayed {
  animation: accentPulseDelayed 5s ease-in-out infinite 1.5s;
}

.hero-svg-bg {
  display: none;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 12% 28%, rgba(59, 130, 246, 0.16), transparent 30%),
    radial-gradient(circle at 78% 18%, rgba(14, 165, 233, 0.18), transparent 32%),
    radial-gradient(circle at 70% 70%, rgba(236, 72, 153, 0.12), transparent 34%);
  opacity: 0.9;
  filter: blur(18px);
  animation: meshShift 16s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

.hero-section::after {
  content: '';
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 140px 140px;
  opacity: 0.2;
  animation: gridDrift 40s linear infinite;
  transform: translate3d(calc(var(--parallax-x) * 12px), calc(var(--parallax-y) * 12px), 0);
  pointer-events: none;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 680px;
  margin: 0;
  text-align: left;
  user-select: text;
  transform: translate3d(calc(var(--parallax-x) * 6px), calc(var(--parallax-y) * 6px), 0);
  transition: transform 0.25s ease;
}

.hero-name {
  font-size: 4rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.35rem;
  letter-spacing: -0.4px;
  line-height: 1.1;
  position: relative;
  display: inline-flex;
  align-items: center;
  animation: heroGlow 6s ease-in-out infinite alternate;
}

.hero-name::before {
  display: none;
}

.hero-title {
  font-size: 0.95rem;
  color: var(--text-light);
  margin: 0 0 1rem;
  font-family: 'JetBrains Mono', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  letter-spacing: 0.15px;
}

.hero-title::before,
.hero-title::after {
  display: none;
}

.hero-title::selection {
  background: transparent;
  color: #60a5fa;
}

.hero-title::-moz-selection {
  background: transparent;
  color: #60a5fa;
}

.hero-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 400;
  letter-spacing: 0.5px;
  margin-bottom: 2.25rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  background: transparent !important;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.hero-subtitle::selection {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
}

.hero-subtitle::-moz-selection {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
}

.experience-terminal {
  margin-top: 2.2rem;
  position: relative;
  background: #0b0b0b;
  border: 1px solid #1a1a1a;
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  width: 100%;
  max-width: 680px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transform: translate3d(calc(var(--parallax-x) * 4px), calc(var(--parallax-y) * 4px), 0);
  transition: transform 0.25s ease, border-color 0.3s ease;
}

.experience-terminal::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 3px;
  border-radius: 14px;
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0) 0deg,
    rgba(255, 255, 255, 0) 200deg,
    rgba(255, 255, 255, 0.95) 235deg,
    rgba(255, 255, 255, 0.55) 255deg,
    rgba(255, 255, 255, 0.18) 275deg,
    rgba(255, 255, 255, 0) 320deg,
    rgba(255, 255, 255, 0) 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) border-box,
    linear-gradient(#000 0 0) padding-box;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  mask:
    linear-gradient(#000 0 0) border-box,
    linear-gradient(#000 0 0) padding-box;
  mask-composite: exclude;
  opacity: 0.8;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.14);
  animation: terminalOrbit 6s linear infinite;
  transform-origin: center;
  pointer-events: none;
}

.terminal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  color: #9a9a9a;
  border-bottom: 1px solid #111;
  padding-bottom: 0.6rem;
  margin-bottom: 0.85rem;
}

.terminal-label {
  font-weight: 600;
  color: #cfcfcf;
}

.terminal-status {
  padding: 0.18rem 0.55rem;
  border: 1px solid #1f1f1f;
  border-radius: 10px;
  background: #0f0f0f;
  font-size: 0.72rem;
  color: #c5c5c5;
  letter-spacing: 0.08em;
}

.terminal-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.terminal-line {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: 'JetBrains Mono', monospace;
  color: #f5f5f5;
  font-size: 1rem;
  min-height: 1.5rem;
}

.prompt {
  color: #8a8a8a;
}

.typed-text {
  color: #f5f5f5;
  letter-spacing: 0.15px;
}

.typed-cursor {
  display: inline-block;
  width: 10px;
  height: 18px;
  background: #f5f5f5;
  margin-left: 4px;
  animation: cursorBlink 1s steps(2, start) infinite;
}

@keyframes cursorBlink {
  0%, 50% { opacity: 1; }
  50.1%, 100% { opacity: 0; }
}

@keyframes terminalOrbit {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.terminal-hint {
  color: #7a7a7a;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  margin: 0.1rem 0 0;
}

.news-section {
  background: #050505;
  color: #f0f0f0;
  padding: 56px 8vw 80px;
  border-top: 1px solid #111;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.pubs-section {
  background: #040404;
  color: #f0f0f0;
  padding: 64px 8vw 90px;
  border-top: 1px solid #0f0f0f;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.news-header {
  max-width: 680px;
  width: 100%;
  margin: 0 0 1.8rem;
}

.news-kicker {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  color: #8a8a8a;
  margin-bottom: 0.35rem;
}

.news-header h2 {
  font-size: 2.1rem;
  margin: 0 0 0.4rem;
  color: #ffffff;
  letter-spacing: -0.6px;
}

.news-subtitle {
  color: #9b9b9b;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

.news-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  width: 100%;
  max-width: 680px;
  margin: 0;
}

.news-card {
  position: relative;
  background: #0b0b0b;
  border: 1px solid #1a1a1a;
  border-radius: 16px;
  padding: 1.15rem 1.25rem 1.05rem 1.75rem;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  opacity: 0;
  transform: translateY(18px) scale(0.995);
  --card-index: 0;
  transform-origin: 20% 50%;
  transition-delay: calc(var(--card-index) * 60ms);
}

.news-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.news-card:hover {
  border-color: #2a2a2a;
  background: linear-gradient(145deg, rgba(12, 12, 12, 0.98), rgba(9, 9, 9, 0.98));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32), 0 0 18px rgba(59, 130, 246, 0.08);
}

.news-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(59, 130, 246, 0.06), transparent 38%);
  opacity: 0;
  transform: translate3d(-8%, 0, 0);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}

.news-card:hover::after {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.news-meta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.55rem;
  font-family: 'JetBrains Mono', monospace;
  padding-left: 14px;
}

.news-meta::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.news-location {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid #1f1f1f;
  background: transparent;
  color: #d7d7d7;
  letter-spacing: 0.04em;
}

.news-location i {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
}

.news-date {
  font-family: 'JetBrains Mono', monospace;
  color: #a5a5a5;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  padding: 0;
  border: none;
}

.news-card h3 {
  color: #ffffff;
  font-size: 1.15rem;
  margin: 0 0 0.4rem;
  letter-spacing: -0.3px;
}

.news-card p {
  color: #b4b4b4;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.pubs-header {
  max-width: 680px;
  width: 100%;
  margin: 0 0 1.6rem;
}

.pubs-kicker {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  color: #8a8a8a;
  margin-bottom: 0.35rem;
}

.pubs-title-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.pubs-header h2 {
  font-size: 2.1rem;
  margin: 0 0 0.4rem;
  color: #ffffff;
  letter-spacing: -0.6px;
}

.pubs-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 680px;
  width: 100%;
  margin: 0;
}

.pub-card {
  position: relative;
  background: #0a0a0a;
  border: 1px solid #141414;
  border-radius: 14px;
  padding: 1.1rem 1.2rem 1.1rem 1.5rem;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.25s ease, background-color 0.25s ease;
  opacity: 0;
  transform: translateY(14px) scale(0.995);
  --card-index: 0;
  transition-delay: calc(var(--card-index) * 50ms);
  overflow: hidden;
}

.pub-card::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 1.2rem;
  bottom: 1.2rem;
  width: 3px;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.7), rgba(236, 72, 153, 0.5));
  border-radius: 6px;
  opacity: 0.8;
}

.pub-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(59, 130, 246, 0.08), transparent 38%);
  opacity: 0;
  transform: translate3d(-10%, 0, 0);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}

.pub-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.pub-card:hover {
  border-color: #1f1f1f;
  background: linear-gradient(145deg, rgba(10, 10, 10, 0.98), rgba(7, 7, 7, 0.98));
}

.pub-card:hover::after {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.pub-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.4rem;
  font-family: 'JetBrains Mono', monospace;
}

.pub-venue {
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid #1f1f1f;
  color: #d7d7d7;
  background: transparent;
  letter-spacing: 0.04em;
}

.pub-year {
  color: #8f8f8f;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
}

.pub-title {
  color: #ffffff;
  font-size: 1.1rem;
  margin: 0 0 0.3rem;
  letter-spacing: -0.25px;
}

.pub-authors {
  color: #a5a5a5;
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.6;
}

.author-me {
  color: #ffffff;
  font-weight: 700;
}

.site-footer {
  display: flex;
  justify-content: center;
  text-align: left;
  padding: 32px 8vw 48px;
  background: #040404;
  color: #7f7f7f;
  border-top: 1px solid #0f0f0f;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.site-footer p {
  margin: 0;
  max-width: 680px;
  width: 100%;
  text-align: left;
}

/* Skills/Tech Stack */
.tech-stack {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 2rem 0 2.5rem;
}

.tech-badge {
  background: rgba(12, 18, 34, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #dfe8ff;
  padding: 0.6rem 1.3rem;
  border-radius: 22px;
  font-size: 0.92rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.tech-badge:hover {
  background: rgba(34, 52, 92, 0.9);
  border-color: rgba(89, 126, 255, 0.7);
  box-shadow: 0 0 24px rgba(59, 130, 246, 0.45);
  transform: translateY(-2px);
}

/* CTA Buttons */
.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 2.5rem 0;
}

.btn-primary {
  position: relative;
  background: linear-gradient(135deg, rgba(24, 37, 77, 0.9), rgba(12, 18, 34, 0.95));
  color: white;
  border: 1px solid rgba(99, 132, 255, 0.65);
  padding: 1rem 2.4rem;
  border-radius: 16px;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  font-size: 1.05rem;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(59, 130, 246, 0.35);
}

.btn-primary:hover {
  background: linear-gradient(135deg, rgba(44, 64, 128, 0.95), rgba(22, 31, 60, 0.95));
  border-color: rgba(132, 182, 255, 0.9);
  box-shadow:
    0 14px 40px rgba(59, 130, 246, 0.45),
    0 0 30px rgba(59, 130, 246, 0.45);
  transform: translateY(-2px) scale(1.01);
}

.btn-secondary {
  background: rgba(18, 27, 46, 0.9);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1rem 2.4rem;
  border-radius: 16px;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  font-size: 1.05rem;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

.btn-secondary:hover {
  border-color: #fff;
  box-shadow: 0 10px 28px rgba(255, 255, 255, 0.12);
  transform: translateY(-2px) scale(1.01);
}

/* Social Icons in Hero */
.hero-social {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-start;
  margin-top: 0.8rem;
  white-space: nowrap;
}

.hero-social-link {
  position: relative;
  padding: 0.35rem 0.55rem;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
  font-size: 1.2rem;
}

.hero-social-link:hover {
  color: #ffffff;
  transform: translateY(-2px);
}

.hero-social-link::before,
.hero-social-link::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', 'Inter', sans-serif;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.hero-social-link::before {
  content: '[';
  left: -0.35rem;
}

.hero-social-link::after {
  content: ']';
  right: -0.35rem;
}

.hero-social-link:hover::before,
.hero-social-link:hover::after {
  color: rgba(255, 255, 255, 0.85);
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

.scroll-indicator p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.scroll-arrow {
  display: inline-block;
  animation: bounce 2s infinite;
  font-size: 1.5rem;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* Header */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--border-color);
  padding: 1.5rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.site-header > div {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
  text-decoration: none;
  letter-spacing: -0.5px;
}

.site-title:hover {
  color: var(--primary);
}

/* Navigation */
.site-nav {
  display: flex;
  gap: 2rem;
  margin: 0;
}

.site-nav a {
  color: var(--text-light);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.site-nav a:hover {
  color: var(--primary);
}

/* Main layout */
.site-content {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 3rem auto;
  padding: 0 2rem;
}

/* Sidebar */
.sidebar {
  position: sticky;
  top: 100px;
  height: fit-content;
}

.author-bio {
  text-align: left;
  padding: 0;
}

.author-name {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
  letter-spacing: -0.5px;
}

.author-tagline {
  color: var(--primary);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.8rem;
}

.author-location {
  color: var(--text-light);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

/* Social links */
.social-links {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.social-link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-dark);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  font-size: 1.1rem;
}

.social-link:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Page content */
.page-content {
  background: #fff;
  padding: 0;
}

.page-content h1 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  color: var(--text-dark);
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1.2;
}

.page-content h2 {
  font-size: 1.8rem;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  color: var(--text-dark);
  font-weight: 700;
  letter-spacing: -0.5px;
}

.page-content h3 {
  font-size: 1.2rem;
  margin: 1.5rem 0 0.8rem;
  color: var(--text-dark);
  font-weight: 600;
}

.page-content p {
  margin-bottom: 1.2rem;
  color: var(--text-light);
  font-weight: 400;
  font-size: 1rem;
}

.page-content a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.page-content a:hover {
  border-bottom-color: var(--primary);
}

/* Lists */
.page-content ul, .page-content ol {
  margin-bottom: 1.5rem;
  margin-left: 1.5rem;
  color: var(--text-light);
}

.page-content li {
  margin-bottom: 0.5rem;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.btn:hover {
  background: var(--primary-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Code blocks */
code {
  background: var(--bg-light);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  color: var(--accent);
}

pre {
  background: var(--bg-light);
  padding: 1.5rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--border-color);
}

pre code {
  background: none;
  padding: 0;
  color: var(--text-dark);
}

/* Footer */
.site-footer {
  display: flex;
  justify-content: flex-start;
  text-align: left;
  padding: 32px 8vw 48px;
  background: #040404;
  color: #7f7f7f;
  border-top: 1px solid #0f0f0f;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.site-footer p {
  margin: 0;
  max-width: 680px;
  width: 100%;
  text-align: left;
}

/* Adjusted rectangle height to exclude subtitle */
.glowing-rectangle {
  background: linear-gradient(135deg, rgba(58, 58, 158, 0.8), rgba(255, 0, 255, 0.8));
  box-shadow: 0 0 60px rgba(255, 0, 255, 0.6), 0 0 100px rgba(58, 58, 158, 0.8);
  border-radius: 20px;
  padding: 10px; /* Reduced padding further */
  text-align: center;
  height: auto; /* Adjust height dynamically */
  max-width: 600px; /* Limit width for better alignment */
  margin: 0 auto; /* Center the rectangle */
}

/* Ensure text inside the rectangle is styled appropriately */
.glowing-rectangle h1 {
  font-size: 3rem;
  color: white;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
  margin: 0; /* Remove margin to fit better */
}

/* Updated button styles for glowing border */
.glowing-button {
  background: transparent;
  border: 2px solid rgba(255, 0, 255, 0.8);
  border-radius: 10px;
  padding: 10px 20px;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.6);
  transition: all 0.3s ease;
}

.glowing-button:hover {
  box-shadow: 0 0 30px rgba(255, 0, 255, 1);
  border-color: rgba(255, 0, 255, 1);
}

/* Fixed "View My Work" button styles */
.glowing-button.view-my-work {
  background: transparent; /* Removed blue fill */
  border: 2px solid rgba(58, 58, 158, 0.8);
  border-radius: 10px;
  padding: 10px 20px;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  box-shadow: 0 0 20px rgba(58, 58, 158, 0.6);
  transition: all 0.3s ease;
}

.glowing-button.view-my-work:hover {
  box-shadow: 0 0 30px rgba(58, 58, 158, 1);
  border-color: rgba(58, 58, 158, 1);
  background: transparent !important; /* Ensure button remains transparent */
}

/* Ensure "View My Work" button has transparent background */
.glowing-button.view-my-work {
  background: transparent !important; /* Override any conflicting styles */
}

/* Responsive */
@media (max-width: 768px) {
  .site-content {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 2rem auto;
  }
  
  .sidebar {
    position: relative;
    top: auto;
  }
  
  .site-nav {
    gap: 1rem;
  }
  
  .page-content h1 {
    font-size: 1.8rem;
  }
  
  .page-content h2 {
    font-size: 1.4rem;
  }
  
  .author-name {
    font-size: 1.5rem;
  }

  .experience-terminal {
    margin-top: 1.6rem;
  }

  .news-section {
    padding: 48px 1.25rem 68px;
  }

  .news-header h2 {
    font-size: 1.6rem;
  }

  .pubs-header h2 {
    font-size: 1.6rem;
  }

  .news-grid {
    padding-left: 18px;
  }

  .news-grid::before {
    left: 6px;
  }

  .news-card::before {
    left: -12px;
  }
}