:root {
  --nav-height: 64px;
  --scroll-threshold: 10px;
  --arrow-bounce-distance: 10px;
  --arrow-bounce-duration: 2.4s;
  --color-bg: #000000;
  --color-surface: #09090b;
  --color-surface-2: #0a0a0a;
  --color-border: #3f3f46;
  --color-accent: #34d399;
  --color-text: #fafafa;
  --color-muted: #71717a;
  --color-muted-2: #a1a1aa;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 16px);
}

html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

.about-copy p {
  margin-bottom: 1.25rem;
}

.about-copy p:last-child {
  margin-bottom: 0;
}

.eev-outline {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: var(--eev-stroke, 1.5px) #34d399;
  color: transparent;
}

.nav-logo .eev-outline {
  --eev-stroke: 0.8px;
}

#about {
  overflow: hidden;
}

.nav-logo-eev {
  display: inline;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition:
    max-width 0.3s ease,
    opacity 0.3s ease;
  vertical-align: baseline;
}

.nav-logo:hover .nav-logo-eev {
  opacity: 1;
  max-width: 100px;
}

.tag-race {
  background: rgba(251, 146, 60, 0.08);
  color: #fb923c;
  border: 1px solid rgba(251, 146, 60, 0.2);
}

.tag-run {
  background: rgba(52, 211, 153, 0.08);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.2);
}

.tag-tech {
  background: rgba(96, 165, 250, 0.08);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.2);
}

.tag-archery {
  background: rgba(167, 139, 250, 0.08);
  color: #a78bfa;
  border: 1px solid rgba(167, 139, 250, 0.2);
}

.tl-spine-line {
  flex: 1;
  width: 1px;
  background-color: #27272a;
  margin-top: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .hero-arrow {
    animation: none !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 768px) {
  #experience .grid {
    display: block !important;
  }
  #experience .grid > div:nth-child(1) {
    text-align: left !important;
    padding-top: 0 !important;
    padding-left: 0.5rem;
    margin-bottom: 0.5rem;
  }
  #experience .grid > div:nth-child(2) {
    display: none !important;
  }
}

@media (max-width: 767px) {
  #about img {
    filter: grayscale(0) !important;
  }
  #about .group .absolute {
    transform: translate(0.75rem, 0.75rem) !important;
  }
  .nav-logo-eev {
    opacity: 1 !important;
    max-width: 100px !important;
  }
}