/* Shared site header. Every public landing page uses the same <nav id="nav">
   markup and links this file, so the header looks and behaves the same as
   visitors move between pages. The blog keeps its own header. */
#nav {
  --nav-ink:#1c1a17; --nav-bark:#5c4a32; --nav-accent:#c85a2a; --nav-white:#fdfbf7;
  position:sticky; top:0; left:0; right:0; z-index:100;
  box-sizing:border-box;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1rem 3rem;
  background:rgba(253,251,247,0.96);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(92,74,50,0.1);
  line-height:1.4;
}
/* Pages whose layout already leaves room for an overlaying header. */
#nav.nav-fixed { position:fixed; }

#nav .nav-wordmark {
  font-family:'Playfair Display', Georgia, serif;
  font-size:1.1rem; font-weight:400; letter-spacing:0.06em;
  color:var(--nav-ink); text-decoration:none; white-space:nowrap;
}
#nav .nav-links { display:flex; gap:2.8rem; list-style:none; margin:0; padding:0; }
#nav .nav-links li { margin:0; padding:0; }
#nav .nav-links a {
  font-family:'DM Mono', monospace; font-size:0.65rem;
  letter-spacing:0.2em; text-transform:uppercase; white-space:nowrap;
  color:var(--nav-bark); text-decoration:none;
  transition:color .3s;
}
#nav .nav-links a:hover, #nav .nav-links a.active { color:var(--nav-accent); }
#nav .nav-book {
  font-family:'DM Mono', monospace; font-size:0.63rem;
  letter-spacing:0.18em; text-transform:uppercase; white-space:nowrap;
  background:transparent; border:1px solid var(--nav-bark); border-radius:0;
  color:var(--nav-bark); padding:.5rem 1.4rem; text-decoration:none;
  transition:all .3s;
}
#nav .nav-book:hover { background:var(--nav-accent); border-color:var(--nav-accent); color:var(--nav-white); }

/* Mobile: hamburger + drop panel */
#nav .nav-toggle {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  background:none; border:none; cursor:pointer; padding:.5rem; margin:0 -.5rem 0 0;
}
#nav .nav-toggle span { width:22px; height:2px; background:var(--nav-ink); display:block; transition:transform .25s, opacity .25s; }
#nav .nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
#nav .nav-toggle.open span:nth-child(2) { opacity:0; }
#nav .nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
#nav .nav-mobile-panel {
  display:none; flex-direction:column;
  position:absolute; top:100%; left:0; right:0;
  background:var(--nav-white); border-top:1px solid rgba(92,74,50,.12);
  box-shadow:0 12px 24px rgba(28,26,23,.10);
}
#nav .nav-mobile-panel.open { display:flex; }
#nav .nav-mobile-panel a {
  font-family:'DM Mono', monospace; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--nav-bark); text-decoration:none;
  padding:1.05rem 1.5rem; border-bottom:1px solid rgba(92,74,50,.10);
}
#nav .nav-mobile-panel a:hover, #nav .nav-mobile-panel a.active { color:var(--nav-accent); }
#nav .nav-mobile-panel a.panel-cta { background:var(--nav-accent); color:var(--nav-white); border-bottom:none; }

/* Keep links on one line: tighten spacing on narrower desktops, then switch
   to the menu button below 1120px. */
@media (max-width:1360px) { #nav .nav-links { gap:1.2rem; } }
@media (max-width:1280px) { #nav .nav-links { gap:.9rem; } #nav .nav-links a { font-size:.6rem; letter-spacing:.12em; } }
@media (max-width:1120px) { #nav .nav-links { display:none; } #nav .nav-toggle { display:flex; } #nav .nav-book { margin-left:auto; } }
@media (max-width:900px)  { #nav { padding:.8rem 1.5rem; gap:1rem; } }
/* Wordmark + CTA + hamburger share one row on a phone. */
@media (max-width:600px)  { #nav .nav-book { font-size:.58rem; letter-spacing:.12em; padding:.45rem .85rem; } }