/* Site header: one compact capsule, centred at the top of every page — the moon (home)
   plus LinkedIn and Resume. It slides away on scroll down and back on scroll up (js/header.js).
   password.html's homeMoonSpot() mirrors this geometry (8px header top, 1px border,
   5px/18px padding, 28px moon, 28px gap, 92px + 10px + 96px buttons) so the flying moon
   lands on the button. Rules are scoped to .rp-header so pages' own .rp-btn stay as they are. */
.rp-header {
  width: 100%; box-sizing: border-box;
  position: fixed; top: 0; left: 0; z-index: 60;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 8px 16px 0; margin: 0; background: transparent; border: none;
  pointer-events: none;
  transition: transform .45s cubic-bezier(.22,.61,.36,1); will-change: transform;
}
.rp-header.nav-hidden { transform: translateY(-115%); }
.rp-header__pill {
  pointer-events: auto; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 28px;
  padding: 5px 18px;
  border-radius: 999px;
  border: 1px solid rgba(210,205,188,.22);
  background: rgba(245,242,232,0.68);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  backdrop-filter: blur(24px) saturate(200%);
  box-shadow: 0 4px 24px -8px rgba(10,51,35,.12);
}

/* home button: the moon that flew here from the password page (password.html, js/moon/moon.js) */
.rp-header .rp-moon {
  flex: 0 0 auto; display: block; width: 28px; height: 28px; border-radius: 50%;
  background: #be965a; /* moon highland, until the painted disc is drawn */
  transition: filter .3s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}
.rp-header .rp-moon img { display: block; width: 100%; height: 100%; }
.rp-header .rp-moon.is-drawn { background: none; }
.rp-header .rp-moon:hover { transform: scale(1.06); filter: drop-shadow(0 0 10px rgba(190,150,90,.45)); }
.rp-header .rp-moon:focus-visible { outline: 2px solid #105666; outline-offset: 3px; }

.rp-header .rp-nav { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.rp-header .rp-btn {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 12px; font-weight: 500; color: #2d3828; text-decoration: none;
  width: 92px; padding: 0; height: 32px; border-radius: 10px;
  background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 4px 14px -7px rgba(10,51,35,.22);
  line-height: 1;
  transition: transform .25s cubic-bezier(.22,.61,.36,1), background .25s, box-shadow .25s, color .25s;
}
.rp-header .rp-btn--cta { font-weight: 600; width: 96px; }
.rp-header .rp-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,.92); color: #0A3323; box-shadow: 0 14px 28px -10px rgba(10,51,35,.32); }
.rp-header .rp-ext { font-size: 13px; display: inline-block; transition: transform .28s cubic-bezier(.22,.61,.36,1); }
.rp-header .rp-btn:hover .rp-ext { transform: translate(3px,-3px); }

@media (max-width: 640px) {
  .rp-header .rp-moon { width: 36px; height: 36px; }
  .rp-header .rp-nav { display: none; }
}