/* ============================================================
   Connie Liu — Portfolio 2026 · Shared header (all pages)
   Visual spec everywhere: nav top 48 · 13px Archivo · gap 20 ·
   +25px optical offset (centers the middle item) ·
   avail tag top-right on every page (Figma has it on all frames).
   --z variants: values ×1.2 for the 1440px stages that are
   scaled by zoom 0.833333, so the rendered result is identical.
   .on-dark: white links for dark heroes (AI Grant Copilot).
   ============================================================ */

.site-nav {
  position: absolute;
  left: 50%;
  top: 48px;
  transform: translateX(calc(-50% + 25px));
  display: flex;
  gap: 20px;
  align-items: flex-start;
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 100;
  font-size: 13px;
  line-height: 16px;
}
.site-nav a {
  text-decoration: none;
  color: #6b665a;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
/* invisible bold ghost reserves the bold width, so the group's total
   width — and thus its centered position — is identical no matter
   which link is the bold active one (kills the 1px cross-page shift) */
.site-nav a::after {
  content: attr(data-label);
  font-weight: 700;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.site-nav a.is-active {
  color: #3d5afe;
  font-weight: 700;
  border-bottom: 1px solid #1256d8;
  padding-bottom: 2px;
}
.site-nav.on-dark a { color: #fff; }

.site-avail {
  position: absolute;
  right: 40px;
  top: 48px;
  text-align: right;
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 100;
  font-size: 13px;
  line-height: 14px;
  color: #6b665a;
  white-space: nowrap;
}
.site-avail.on-dark { color: #fff; }


/* ---- inside a zoom(0.833333) stage: ×1.2 ---- */
.site-nav--z {
  top: 57.6px;
  gap: 24px;
  font-size: 15.6px;
  line-height: 19.2px;
  transform: translateX(calc(-50% + 30px));
}
.site-nav--z a.is-active { border-bottom-width: 1.2px; padding-bottom: 2.4px; }
.site-avail--z {
  right: 48px;
  top: 57.6px;
  font-size: 15.6px;
  line-height: 16.8px;
}

/* ---------- floating "back home" pill (long content pages) ----------
   Hidden at the top (the nav's HOME is visible there); fades in once
   the reader scrolls past the header zone. Fixed = viewport px, so it
   is unaffected by the stages' zoom. */
.home-pill {
  position: fixed; left: 24px; top: 24px; z-index: 90;
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 999px;
  background: rgba(250,246,238,.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(26,24,20,.14);
  box-shadow: 0 4px 16px rgba(26,24,20,.10);
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 1px;
  color: #1a1814; text-decoration: none;
  opacity: 0; transform: translateY(-10px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.home-pill.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.home-pill:hover { box-shadow: 0 6px 20px rgba(26,24,20,.18); background: rgba(250,246,238,.96); }