NavEditorial Navigation

---
/**
 * NavEditorial
 * Editorial donkere nav met grote logo en serif/sans mix. Tijdschrift-stijl.
 */
interface Props {
  logo: string;
  tagline?: string;
  links: { label: string; href: string; active?: boolean }[];
  issueLabel?: string;
}
const { logo, tagline, links, issueLabel } = Astro.props;
---
<header class="ne">
  <div class="ne-inner">
    <div class="ne-brand">
      <a href="/" class="ne-logo">{logo}</a>
      {tagline && <span class="ne-tagline">{tagline}</span>}
    </div>
    <nav class="ne-nav">
      <ul class="ne-links">
        {links.map(l => (
          <li><a href={l.href} class={`ne-link${l.active ? ' ne-link--active' : ''}`}>{l.label}</a></li>
        ))}
      </ul>
      {issueLabel && <span class="ne-issue">{issueLabel}</span>}
    </nav>
  </div>
  <div class="ne-rule"></div>
</header>
<style>
  .ne { background: #0a0a0a; position: sticky; top: 0; z-index: 100; }
  .ne-inner { max-width: 1280px; margin: 0 auto; padding: 1rem 2rem 0.75rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
  .ne-brand { display: flex; flex-direction: column; gap: 0.125rem; }
  .ne-logo { font-size: 1.5rem; font-weight: 900; color: #fff; text-decoration: none; letter-spacing: -0.04em; line-height: 1; }
  .ne-tagline { font-size: 0.6875rem; color: rgba(255,255,255,0.4); letter-spacing: 0.12em; text-transform: uppercase; }
  .ne-nav { display: flex; align-items: center; gap: 1.5rem; }
  .ne-links { list-style: none; padding: 0; margin: 0; display: flex; gap: 0; }
  .ne-link { display: block; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.55); text-decoration: none; padding: 0.375rem 0.75rem; border-radius: 0.25rem; transition: color 0.15s; }
  .ne-link:hover, .ne-link--active { color: #fff; }
  .ne-issue { font-size: 0.6875rem; color: rgba(255,255,255,0.3); letter-spacing: 0.08em; white-space: nowrap; }
  .ne-rule { height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%); }
</style>