:root {
  --bg: #0C0C0C;
  --text: #D8D8D8;
  --text-secondary: #6A6A6A;
  --accent: #7B8CDE;
  --accent-hover: #A0ADFF;
  --border: #2A2A2A;
}

* {
  box-sizing: border-box;
}

/* Glitch keyframes */
@keyframes glitch {
  0% {
    text-shadow: 2px 0 #7B8CDE, -2px 0 #DE7B8C;
    transform: translate(0);
  }
  2% {
    text-shadow: -2px -1px #7B8CDE, 2px 1px #DE7B8C;
    transform: translate(-2px, 1px);
  }
  4% {
    text-shadow: 2px 1px #7B8CDE, -1px -2px #DE7B8C;
    transform: translate(1px, -1px);
  }
  5% {
    text-shadow: none;
    transform: translate(0);
  }
  50% {
    text-shadow: none;
    transform: translate(0);
  }
  50.5% {
    text-shadow: -3px 0 #7B8CDE, 3px 0 #DE7B8C;
    transform: translate(3px, 0);
  }
  51% {
    text-shadow: none;
    transform: translate(0);
  }
  100% {
    text-shadow: none;
    transform: translate(0);
  }
}

@keyframes scanline {
  0% { top: -5%; }
  100% { top: 105%; }
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.8; }
  94% { opacity: 1; }
  96% { opacity: 0.9; }
  97% { opacity: 1; }
}

body {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1rem;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  animation: flicker 8s infinite;
}

/* Scanline overlay */
body::after {
  content: '';
  position: fixed;
  top: -5%;
  left: 0;
  width: 100%;
  height: 8px;
  background: rgba(123, 140, 222, 0.04);
  box-shadow: 0 4px 20px rgba(123, 140, 222, 0.03);
  animation: scanline 6s linear infinite;
  pointer-events: none;
  z-index: 9999;
}

/* CRT noise grain */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(123, 140, 222, 0.015) 2px,
    rgba(123, 140, 222, 0.015) 4px
  );
  pointer-events: none;
  z-index: 9998;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 5rem 2rem;
  position: relative;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.1s ease, text-shadow 0.1s ease;
}

a:hover {
  color: var(--accent-hover);
  text-shadow: 1px 0 #DE7B8C, -1px 0 #7B8CDE;
}

h1 {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 5rem;
  font-weight: 400;
  line-height: 0.95;
  margin: 0 0 2rem 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  animation: glitch 4s infinite;
}

h2 {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin: 4rem 0 1.5rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  position: relative;
}

h2::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 40px;
  height: 1px;
  background: var(--accent);
}

.bio {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 1rem 0;
}

.bio:last-of-type {
  margin-bottom: 0;
}

.bio a {
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
}

.bio a:hover {
  text-shadow: 1px 0 #DE7B8C, -1px 0 #7B8CDE;
}

/* Work Section */
.work-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.work-list li a {
  display: block;
  padding: 1.25rem 1.5rem;
  background: transparent;
  border: 1px solid var(--border);
  border-bottom: none;
  transition: all 0.1s ease;
  position: relative;
}

.work-list li:last-child a {
  border-bottom: 1px solid var(--border);
}

.work-list li a:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: skewX(-1deg);
  text-shadow: 1px 0 rgba(0,0,0,0.3);
}

.work-list li a:hover .work-title,
.work-list li a:hover .work-desc {
  color: var(--bg);
}

.work-title {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  margin-bottom: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.work-desc {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Writing Section */
.post-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.post-list li a {
  display: block;
  padding: 0.75rem 0;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: all 0.1s ease;
}

.post-list li:last-child a {
  border-bottom: none;
}

.post-list li a:hover {
  color: var(--accent);
  padding-left: 0.5rem;
  text-shadow: 1px 0 #DE7B8C, -1px 0 #7B8CDE;
  transform: skewX(-0.5deg);
}

/* Footer */
footer {
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.5rem;
}

.links a {
  color: var(--text-secondary);
  transition: all 0.1s ease;
}

.links a:hover {
  color: var(--accent);
  text-shadow: 1px 0 #DE7B8C, -1px 0 #7B8CDE;
}

/* Responsive */
@media (max-width: 640px) {
  main {
    padding: 3rem 1.25rem;
  }

  h1 {
    font-size: 3.5rem;
  }

  .bio {
    font-size: 1rem;
  }
}