/* nav.css — shared header for the standalone pages (/photos/, /photobooth/).
   The home page gets the same rules from /css/styles.css. */
:root { --void:#07070F; --atomic-blue:#00C8FF; --atomic-pink:#FF2060; --atomic-glow:rgba(0,200,255,0.25);
        --text-muted:#7070A0; --white:#FFFFFF; --font-display:'Fraunces',serif; --font-body:'Work Sans',sans-serif;
        --sp-sm:1rem; --sp-md:2rem; --radius-sm:8px; }
.cel-nav {
  position:sticky; top:0; z-index:100;
  background:rgba(7,7,15,0.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(0,200,255,0.12);
  padding:0 var(--sp-md);
}
.cel-nav-inner {
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  height:60px;
  gap:var(--sp-sm);
}
.cel-nav-brand {
  font-family:var(--font-display);
  font-style:italic;
  font-weight:900;
  font-size:1.1rem;
  color:var(--white);
  white-space:nowrap;
  text-shadow:0 0 20px var(--atomic-glow);
}
.cel-nav-brand span { color:var(--atomic-blue); }
.cel-nav-links {
  display:flex; align-items:center;
  gap:var(--sp-sm);
  list-style:none;
  flex-wrap:wrap;
}
.cel-nav-links a {
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-muted);
  padding:0.35rem 0.65rem;
  border-radius:var(--radius-sm);
  transition:color 0.2s, background 0.2s;
}
.cel-nav-links a:hover,
.cel-nav-links a.active { color:var(--atomic-blue); background:rgba(0,200,255,0.08); }


/* these pages pad the body 24px 18px, so pull the bar out to the edges */
.cel-nav { margin:-24px -18px 28px; }
.cel-nav-links a.nav-df { color:var(--atomic-pink); }
.cel-nav-links a.nav-df:hover, .cel-nav-links a.nav-df.active { background:rgba(255,32,96,0.1); color:var(--atomic-pink); }
@media (max-width:768px){
  .cel-nav-links { display:flex; gap:0; flex-wrap:nowrap; }
  .cel-nav-links a { font-size:0.6rem; padding:0.3rem 0.3rem; letter-spacing:0.02em; white-space:nowrap; }
  .cel-nav-brand { font-size:0.8rem; }
  .cel-nav { padding:0 0.6rem; }
  .cel-nav-inner { justify-content:space-between; }
}
@media (max-width:480px){ .cel-nav-brand { font-size:0.8rem; } }