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

/* BASE */
body {
  font-family: 'Atkinson Hyperlegible', Arial, sans-serif;
  color: #111;
  background: linear-gradient(
    135deg,
    #f5a81c,
    #ff4fd8,
    #ff7a00
  );
  background-size: 400% 400%;
  animation: gradientMove 12s ease infinite;
  min-height: 100vh;
}

@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
  }
}

/* GRADIENT ANIMATION */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ACCESSIBILITY */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* HERO */
.hero {
  min-height: 100vh;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
}

.site-title {
  text-transform: uppercase;
}

.logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  padding: 5rem 5rem;
}

.logo {
  width: 120px;
  display: block;
}

/* TYPE */
h1 {
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: 0.9;
  font-weight: 700;
}

.tagline {
  font-size: clamp(1.2rem, 3vw, 2rem);
  line-height: 1.2;
}

/* ABOUT */
.about {
  padding: 4rem 2rem;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.3;
}

/* SANDBOX */
.sandbox {
  padding: 2rem 2rem 6rem;
}

.section-link {
  width: fit-content;
  margin-bottom: 2rem;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
  font-weight: 700;
  border-bottom: 3px solid #111;
}

.course-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.course-link {
  width: fit-content;
  display: inline-block;
  color: #111;
  font-size: clamp(1.35rem, 4vw, 3rem);
  line-height: 1.05;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 3px solid #111;
  transition: transform 0.2s ease;
}

.course-link span {
  display: block;
  font-size: 0.45em;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.course-link:hover,
.course-link:focus-visible {
  transform: translateX(10px);
}

.course-link:focus-visible {
  outline: 3px solid #111;
  outline-offset: 0.35rem;
}

/* RESPONSIVE */
@media (min-width: 768px) {
  .hero {
    padding: 4rem;
  }

  .about,
  .sandbox {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .sandbox {
    padding-bottom: 8rem;
  }
}
/* FOOTER */
.site-footer {
  background: #fff;
  padding: 2rem;
  border-top: 3px solid #f5a81c;

  /* neon glow */
  box-shadow:
    0 -2px 6px #ff4fd8,
    0 -6px 20px #ff4fd8,
    0 -12px 40px rgba(255, 79, 216, 0.6);
}

.footer-inner {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-logo {
  width: 120px;
  display: block;
}
@keyframes neonPulse {
  0%, 100% {
    box-shadow:
      0 -2px 6px #ff4fd8,
      0 -6px 20px #ff4fd8,
      0 -12px 40px rgba(255, 79, 216, 0.6);
  }
  50% {
    box-shadow:
      0 -3px 10px #ff4fd8,
      0 -10px 30px #ff4fd8,
      0 -18px 60px rgba(255, 79, 216, 0.8);
  }
}

.site-footer {
  animation: neonPulse 3s ease-in-out infinite;
}
/* PAGE HEADER (projects, course pages, etc.) */
.page-header {
  padding: 2rem;
}

.home-link {
  display: inline-block;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: #111;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 3px solid #111;
  width: fit-content;
  transition: transform 0.2s ease;
}

.home-link:hover,
.home-link:focus-visible {
  transform: translateX(6px);
}

.home-link:focus-visible {
  outline: 3px solid #111;
  outline-offset: 0.3rem;
}