/* =========================================================
   SKIP LINK (a11y) — off-screen until keyboard-focused
   ========================================================= */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3.5rem;
  z-index: 200;
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  background: #3182ce;
  color: #fff;
  text-decoration: none;
  font-size: var(--fs-sm);
  transition: top 160ms ease;
}
.skip-link:focus {
  top: 0.5rem;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* =========================================================
   STICKY PRIMARY NAV
   Wayfinding bar shared across the homepage and every subpage.
   (Subpages also carry an in-page .section-nav inside <main>;
   this one is the site-level nav and sits above the header.)
   ========================================================= */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 60; /* above content (body > * gives 10) and parallax layers */
  /* Fixed height so the project-page .section-nav can pin flush underneath
     at top: var(--site-nav-h) with no sliver of content showing between. */
  height: var(--site-nav-h);
  background: rgba(13, 15, 22, 0.72);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  gap: 0.35rem 1rem;
  /* Fill the bar's fixed height and center vertically, rather than defining
     the height with padding — keeps --site-nav-h authoritative. */
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
}

.site-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: auto; /* push the menu to the right edge */
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: 0.02em;
  color: #f5f5f5;
  text-decoration: none;
  white-space: nowrap;
}
/* Small constellation-style star mark before the name */
.site-nav__brand::before {
  content: "✦";
  font-size: 0.8em;
  line-height: 1;
  color: #6db1f0;
  text-shadow: 0 0 10px rgba(109, 177, 240, 0.55);
  transition:
    color 200ms ease,
    transform 260ms ease;
}
.site-nav__brand:hover,
.site-nav__brand:focus-visible {
  color: #fff;
}
.site-nav__brand:hover::before,
.site-nav__brand:focus-visible::before {
  color: #a78bfa;
  transform: rotate(90deg) scale(1.12);
}
.site-nav__brand:focus-visible {
  outline: 2px solid rgba(109, 177, 240, 0.55);
  outline-offset: 3px;
  border-radius: 8px;
}

.site-nav__menu {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__menu a {
  position: relative;
  display: inline-block;
  padding: 0.4rem 0.7rem;
  font-size: var(--fs-sm);
  color: #cbd5e0;
  text-decoration: none;
  transition: color 160ms ease;
}
/* Gradient underline that grows from the left on hover/focus */
.site-nav__menu a::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.05rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #6db1f0, #a78bfa);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms ease;
}
.site-nav__menu a:hover,
.site-nav__menu a:focus-visible {
  color: #fff;
}
.site-nav__menu a:hover::after,
.site-nav__menu a:focus-visible::after {
  transform: scaleX(1);
}
.site-nav__menu a:focus-visible {
  outline: 2px solid rgba(109, 177, 240, 0.55);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Narrow screens: keep the bar a single row and let the pill menu
   scroll horizontally rather than stack into a tall block. */
@media (max-width: 560px) {
  .site-nav__inner {
    flex-wrap: nowrap;
  }
  .site-nav__brand {
    font-size: var(--fs-sm);
  }
  .site-nav__menu {
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* Bleed the scroll box out over the dead space either side, then pad the
       same amount back in so the links sit exactly where they did. That buys
       gutter for the ramps below to fade across. Same trick .section-nav
       uses on the project pages. Right is the container's full 1.5rem
       padding; left only takes half of the 1rem flex gap after the brand, so
       a link scrolling past still clears "Edwards" before it is bright
       enough to crowd it. */
    margin: 0 -1.5rem 0 -0.5rem;
    padding: 0 1.5rem 0 0.5rem;
    /* Links leaving the row dissolve instead of getting sheared off at the
       box edge. 1.2rem of ramp is exactly the left gutter (0.5rem of bleed
       plus each link's own 0.7rem padding) and less than the right one, so a
       label fully in view is never dimmed at either end of the scroll. */
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 1.2rem,
      #000 calc(100% - 1.2rem),
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 1.2rem,
      #000 calc(100% - 1.2rem),
      transparent 100%
    );
  }
  .site-nav__menu::-webkit-scrollbar {
    display: none;
  }
}

/* =========================================================
   ABOUT — core skills chip row
   ========================================================= */
.skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.skills li {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: var(--fs-xs);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #dbe7ff;
}