/* Shared site header — one implementation for every public page.
   Values are the homepage's: it was the original, the others were retyped
   copies that drifted (15px wordmark, tighter pill, 4px less top padding).
   Deliberately self-contained hex rather than CSS variables, so it drops into
   pages that define no palette of their own. */

.site-nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* The mark takes its colour from the logo, the wordmark overrides it. */
.site-logo { display: flex; align-items: center; gap: 12px; color: #C9D8A4; text-decoration: none; }
.site-logo svg { width: 22px; height: 22px; flex: none; }
.site-logo span { font-weight: 800; font-size: 16px; letter-spacing: 3px; color: #F7F2E2; }
/* Hover. Pages define `a:hover { color: dark olive }`, and a:hover (0,1,1)
   out-ranks .site-logo (0,1,0) — so the pepper, drawn in currentColor, went
   dark olive on a dark olive band and vanished. These win on specificity and
   brighten instead. */
a.site-logo:hover, .site-logo:hover { color: #F7F2E2; text-decoration: none; }
a.site-logo:hover span, .site-logo:hover span { color: #FFFFFF; }
.site-logo svg, .site-logo span { transition: color .15s ease; }

.site-links { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(14px, 2.7vw, 34px); margin-left: auto; font-weight: 700; font-size: 13px; letter-spacing: 2.5px; background: rgba(24, 36, 8, 0.55); border-radius: 999px; padding: 14px 26px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.site-links a { color: #C9D8A4; text-decoration: none; white-space: nowrap; transition: color .15s ease; }
/* .here marks the page you're on. */
.site-links a:hover, .site-links a.here { color: #F7F2E2; }
/* A link parked with the hidden attribute stays out of the pill entirely. */
.site-links a[hidden] { display: none; }

@media (max-width: 760px) {
  .site-nav { flex-direction: column; align-items: center; gap: 12px; }
  .site-links { margin-left: 0; justify-content: center; font-size: 11px; letter-spacing: 1.5px; gap: 16px; padding: 12px 20px; }
}