/* ─────────────────────────────────────────────────────────────────
   Shared site header / persistent nav — standalone, self-contained.

   Used by pages that keep their own bespoke look-and-feel (their own
   <style> block, their own theme system, no /css/site.css) but still
   need the same top masthead + section nav as the rest of the site,
   so no page is a dead end.

   Values are hardcoded rather than pulled from CSS custom properties:
   the masthead is a fixed dark bar by design (same in day and night
   mode -- see the equivalent note in site.css) and it needs to render
   correctly regardless of whatever --gold/--ink/etc. a host page
   defines for its own body. Colors match site.css's .site-header
   exactly, so pages that already load site.css and this file together
   don't see any visible seam.
   ───────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&display=swap');

.site-header {
  background: #2a1a08;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  box-sizing: border-box;
}
.site-header * { box-sizing: border-box; }
.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
}
.site-logo {
  display: flex;
  flex-direction: column;
  padding: 0.6rem 0;
  text-decoration: none;
}
.site-logo-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #d4c49a;
  letter-spacing: 0.1em;
  line-height: 1.2;
}
.site-logo-sub {
  font-size: 0.6rem;
  color: #8a7a5a;
  letter-spacing: 0.2em;
  font-family: 'Cinzel', Georgia, serif;
}
.site-nav {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  color: #c0a870;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  padding: 1.1rem 0.9rem;
  display: block;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.site-nav a:hover, .site-nav a.active {
  color: #fdf8ed;
  border-bottom-color: #8B6914;
  text-decoration: none;
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #c0a870;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0.5rem;
}

@media (max-width: 768px) {
  .site-nav { display: none; flex-direction: column; width: 100%; }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 0.8rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.05); border-left: none; }
  .nav-toggle { display: block; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .header-inner { flex-wrap: wrap; }
  .site-nav { order: 3; width: 100%; background: #1a1008; }
}