ferst-core 0.1.0

package/components/SiteHeader.astro

@@ -0,0 +1,1130 @@
+---
+/**
+ * Site-wide header: brand logo, primary nav (data-driven), About Us mega
+ * panel (declarative), Contact CTA, hamburger drawer, theme toggle.
+ *
+ * Lifted out of `Base.astro` so the layout file is no longer 1700 lines
+ * and so a future "edit navbar entries" feature only has to render a
+ * different `primaryNav` array. The About Us mega menu stays declarative
+ * because it carries icons and a custom panel — easy to extend, hard to
+ * shoe-horn into a flat JSON entry until it earns its keep.
+ */
+import Button from './Button.astro';
+import type { NavLink, NavGroup } from '../content/schemas';
+
+interface Props {
+  path: string;
+  headerClass?: string;
+  primaryLogoLight: string;
+  primaryLogoDark: string;
+  brandAlt: string;
+  primaryNav: NavLink[];
+  /** Optional dropdown / mega-menu group. Client-configured — the core ships none. */
+  dropdown?: NavGroup;
+}
+
+const { path, headerClass, primaryLogoLight, primaryLogoDark, brandAlt, primaryNav, dropdown } = Astro.props;
+
+/**
+ * Longest-prefix-wins active-nav matching. A plain independent `startsWith`
+ * per link (the previous approach) breaks once one link's href is a subpath
+ * of another's — e.g. "Newsletters" → /posts/tag/newsletter/ sits under
+ * "Posts" → /posts/, so both would light up on a newsletter-tag page.
+ * Computing every link's match length up front and keeping only the
+ * longest means only the most specific matching link is ever active,
+ * however nav hrefs happen to nest.
+ */
+const primaryNavMatchLengths = primaryNav.map((link) => {
+  const trimmed = link.href.replace(/\/$/, '');
+  return trimmed.length > 0 && path.startsWith(trimmed) ? trimmed.length : -1;
+});
+const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
+---
+
+<!--
+  transition:persist — on pages using Astro's <ClientRouter /> (currently
+  /posts/), this keeps the exact same header DOM node across a filter
+  click instead of tearing it down and re-inserting a fresh copy. Without
+  it: the logo's <script is:inline> and the theme-toggle's <script> (which
+  attaches its click listener and calls applyThemeFromStorageOrSystem()) are
+  identical on every /posts/ page, so Astro's script-dedup logic skips
+  re-running them on the swapped-in copy — the new toggle button ends up
+  with no click listener at all, and the logo can flash to a stale value
+  before this page's own remaining scripts settle. The "POSTS" nav-link's
+  active state (path.startsWith below) is identical across every page in
+  this family, so nothing here goes stale by persisting it.
+-->
+<header class:list={['site-header', headerClass]} transition:persist transition:name="site-header" transition:animate="none">
+  <a href="/" class="brand">
+    <img
+      id="primary-logo"
+      src={primaryLogoLight}
+      data-src-light={primaryLogoLight}
+      data-src-dark={primaryLogoDark}
+      alt={brandAlt}
+      class="primary-logo"
+      width="545"
+      height="151"
+      loading="eager"
+      fetchpriority="high"
+      decoding="sync"
+    />
+  </a>
+  <script is:inline define:vars={{ primaryLogoDark, primaryLogoLight }}>
+    (function () {
+      var img = document.getElementById('primary-logo');
+      if (!img) return;
+      var t = document.documentElement.dataset.theme;
+      img.src = t === 'dark' ? primaryLogoDark : primaryLogoLight;
+    })();
+  </script>
+
+  <nav class="site-nav" id="site-nav" aria-label="Main navigation">
+    {dropdown && (
+      <div class="nav-item nav-has-dropdown" data-panel="about">
+        <a
+          href={dropdown.href}
+          class:list={['nav-link', { active: path.startsWith(dropdown.href.replace(/\/$/, '')) }]}
+          aria-haspopup="true"
+          aria-expanded="false"
+          aria-controls="about-submenu"
+        >
+          {dropdown.label}
+          <svg class="nav-chevron" width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </a>
+        <ul class="nav-dropdown" id="about-submenu">
+          {dropdown.items.map((item) => (
+            <li>
+              <a href={item.href} class:list={[{ active: path === item.href }]}>
+                <span class="drop-text">
+                  <span class="drop-title">{item.title}</span>
+                  {item.desc && <span class="drop-desc">{item.desc}</span>}
+                </span>
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    )}
+    {/* Primary nav links — data-driven so editing siteSettings.navigation.primary
+        adds, reorders, or removes entries without touching the layout.
+        Active-state matching uses startsWith on the href to keep policy-style
+        subpages highlighting their parent (e.g. /posts/tag/event/), but only
+        the longest/most-specific match wins — see primaryNavLongestMatch
+        above — so a link whose href is a subpath of another's (Newsletters
+        under Posts) doesn't light up both at once. */}
+    {primaryNav.map((link, i) => {
+      const isActive =
+        primaryNavMatchLengths[i] >= 0 && primaryNavMatchLengths[i] === primaryNavLongestMatch;
+      return (
+        <a href={link.href} class:list={['nav-link', { active: isActive }]}>
+          {link.label}
+        </a>
+      );
+    })}
+    <div class="nav-mobile-theme">
+      <Button
+        href="/contact/"
+        variant="cta"
+        class:list={['nav-cta', 'nav-cta--drawer', { active: path.startsWith('/contact') }]}
+      >
+        Contact
+      </Button>
+      <button type="button" class="theme-toggle-mobile" id="theme-toggle-mobile" role="switch" aria-checked="false" aria-label="Toggle dark mode">
+        <span class="theme-toggle__highlight" aria-hidden="true"></span>
+        <svg class="theme-icon theme-icon--sun" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><line x1="12" y1="2" x2="12" y2="4"/><line x1="12" y1="20" x2="12" y2="22"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="2" y1="12" x2="4" y2="12"/><line x1="20" y1="12" x2="22" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+        <svg class="theme-icon theme-icon--moon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+      </button>
+    </div>
+  </nav>
+
+  <div class="nav-right">
+    <button type="button" class="theme-toggle" id="theme-toggle" role="switch" aria-checked="false" aria-label="Toggle dark mode">
+      <span class="theme-toggle__highlight" aria-hidden="true"></span>
+      <svg class="theme-icon theme-icon--sun" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><line x1="12" y1="2" x2="12" y2="4"/><line x1="12" y1="20" x2="12" y2="22"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="2" y1="12" x2="4" y2="12"/><line x1="20" y1="12" x2="22" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+      <svg class="theme-icon theme-icon--moon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+    </button>
+    <span class="nav-cta-header-wrap">
+      <Button
+        href="/contact/"
+        variant="cta"
+        class:list={['nav-cta', 'nav-cta--header', { active: path.startsWith('/contact') }]}
+      >
+        Contact
+      </Button>
+    </span>
+    <button class="nav-toggle" aria-label="Toggle navigation" aria-expanded="false" aria-controls="site-nav">
+      <span></span><span></span><span></span>
+    </button>
+  </div>
+</header>
+
+<div class="mobile-overlay" id="mobile-overlay"></div>
+
+<!-- Optional dropdown mega panel (desktop only) — client-configured, core ships none -->
+{dropdown && (
+  <div class="mega-nav" id="mega-nav" aria-hidden="true">
+    <div class="mega-nav__backdrop" id="mega-backdrop"></div>
+
+    <div class="mega-panel mega-panel--about" data-panel="about">
+      <div class="mega-panel__inner">
+        <div class="mega-section-header">
+          <h2>{dropdown.label}</h2>
+        </div>
+        <div class="mega-about-grid">
+          {dropdown.items.map((item) => (
+            <a href={item.href} class:list={['mega-about-card', { active: path === item.href }]}>
+              <span class="mega-about-title">{item.title}</span>
+              {item.desc && <span class="mega-about-desc">{item.desc}</span>}
+            </a>
+          ))}
+        </div>
+      </div>
+    </div>
+  </div>
+)}
+
+<style is:global>
+  /* Header chrome — every selector here used to live in Base.astro's giant
+     <style is:global> block. Kept global because dark-mode rules cross the
+     boundary between header markup and html[data-theme="dark"]. */
+
+  .primary-logo {
+    height: 44px;
+    width: auto;
+  }
+
+  /* ── Header ── */
+  /* Logo + header: mobile-first — compact until desktop ≥64em scales up (matches button/theme sizing). */
+  .site-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 56px;
+    padding: 0 1.25rem;
+    background: var(--bg-tag);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    isolation: isolate;
+    overflow: visible;
+  }
+  @media (min-width: 64em) {
+    .site-header {
+      height: 64px;
+      padding: 0 28px;
+    }
+  }
+  [data-theme="dark"] .site-header { background: var(--dark-bg); }
+  .brand {
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+    flex-shrink: 1;
+  }
+  .brand:focus-visible {
+    outline: 2px solid var(--gold);
+    outline-offset: 3px;
+    border-radius: 4px;
+  }
+  @media (min-width: 64em) {
+    .brand { gap: 16px; }
+  }
+  .primary-logo {
+    flex-shrink: 0;
+    display: block;
+    height: 44px;
+    width: auto;
+    max-width: 100%;
+    object-fit: contain;
+  }
+  @media (min-width: 48em) {
+    .primary-logo { height: 48px; }
+  }
+  @media (min-width: 64em) {
+    .primary-logo { height: 56px; }
+  }
+
+  /* ── Center nav ── */
+  .site-nav {
+    display: flex;
+    align-items: center;
+    gap: 28px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .nav-link {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    padding: 14px 0;
+    color: var(--accent);
+    text-decoration: none;
+    font-family: 'Inter', 'Lato', sans-serif;
+    font-size: 0.875rem;
+    font-weight: 500;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    transition: color 0.25s ease;
+  }
+  .nav-link::after {
+    content: '';
+    position: absolute;
+    bottom: 4px;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: var(--gold);
+    transform: scaleX(0);
+    transition: transform 0.2s ease;
+    border-radius: 1px;
+  }
+  .nav-link:hover { color: var(--gold); }
+  .nav-link:focus-visible {
+    outline: 2px solid var(--gold);
+    outline-offset: 3px;
+    border-radius: 2px;
+  }
+  .nav-link.active {
+    color: var(--gold);
+    font-weight: 500;
+  }
+  .nav-link.active::after { display: none; }
+  .nav-item.panel-active > .nav-link::after { display: none; }
+  [data-theme="dark"] .nav-link { color: var(--text-light); }
+  [data-theme="dark"] .nav-link:hover { color: var(--gold); }
+  [data-theme="dark"] .nav-link.active { color: var(--gold); }
+  [data-theme="dark"] .nav-toggle span { background: var(--text-light); }
+
+  /* ── Right side ── */
+  .nav-right {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-shrink: 0;
+    position: relative;
+    z-index: 101; /* always above the mobile full-screen nav (z-index: 99) */
+  }
+
+  /* ── Contact CTA ── */
+  .nav-cta {
+    white-space: nowrap;
+  }
+  .nav-cta:hover,
+  .nav-cta.active { background: #1A2A1A; color: var(--text-light); border: none; }
+  [data-theme="dark"] .nav-cta { background: var(--gold); color: var(--fg); border: none; }
+  [data-theme="dark"] .nav-cta:hover,
+  [data-theme="dark"] .nav-cta.active { background: var(--text-footer-link); color: var(--fg); border: none; }
+
+  .nav-mobile-theme .nav-cta--drawer {
+    display: none;
+  }
+  @media (min-width: 64em) {
+    .nav-mobile-theme .btn.nav-cta--drawer,
+    .nav-mobile-theme a.nav-cta--drawer {
+      display: none !important;
+    }
+  }
+
+  /* ── Theme toggle: segmented sun/moon switch, shared by the desktop
+     button and the mobile drawer button. Both icons stay in the DOM at all
+     times, pinned to either side; a gold highlight slides behind whichever
+     one is active. --overlay-accent-08/-18 already resolve to the dark-mode
+     white-tinted values via the [data-theme="dark"] root override in
+     theme.css, so no manual dark-mode override is needed for the track
+     itself. */
+  .theme-toggle,
+  .theme-toggle-mobile {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-around;
+    width: 64px;
+    height: 30px;
+    padding: 3px;
+    background: var(--overlay-accent-08);
+    border: 1px solid var(--overlay-accent-18);
+    border-radius: 999px;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition:
+      background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+      border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .theme-toggle:hover,
+  .theme-toggle-mobile:hover {
+    border-color: var(--gold);
+  }
+  .theme-toggle:focus-visible,
+  .theme-toggle-mobile:focus-visible {
+    outline: 2px solid var(--gold);
+    outline-offset: 2px;
+  }
+
+  .theme-toggle__highlight {
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    width: calc(50% - 3px);
+    height: calc(100% - 6px);
+    border-radius: 999px;
+    background: var(--gold);
+    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  [data-theme="dark"] .theme-toggle__highlight { transform: translateX(100%); }
+
+  .theme-icon {
+    position: relative;
+    z-index: 1;
+    width: 14px;
+    height: 14px;
+    color: var(--fg);
+    opacity: 0.5;
+    transition: opacity 0.3s ease, color 0.3s ease;
+  }
+  .theme-icon--sun { opacity: 1; }
+  [data-theme="dark"] .theme-icon--sun { opacity: 0.5; }
+  [data-theme="dark"] .theme-icon--moon { opacity: 1; color: #2A1F12; }
+
+  /* Mobile theme toggle row — hidden on desktop */
+  .nav-mobile-theme { display: none; }
+
+  /* ── Hamburger ── */
+  .nav-toggle {
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    border-radius: 8px;
+    transition: background 0.15s;
+    position: relative;
+  }
+  .nav-toggle:hover { background: var(--overlay-white-08); }
+  .nav-toggle span {
+    display: block;
+    position: absolute;
+    width: 22px;
+    height: 2px;
+    background: #2A3A2A;
+    border-radius: 2px;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transform-origin: center;
+  }
+  .nav-toggle span:nth-child(1) { top: 13px; }
+  .nav-toggle span:nth-child(2) { top: 19px; }
+  .nav-toggle span:nth-child(3) { top: 25px; }
+  .nav-toggle.open span:nth-child(1) { top: 19px; transform: rotate(45deg); }
+  .nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
+  .nav-toggle.open span:nth-child(3) { top: 19px; transform: rotate(-45deg); }
+
+  /* ── Mega nav system (tablet/desktop, not phone overlay) ── */
+  .mega-nav {
+    display: none;
+    position: fixed;
+    top: 56px;
+    left: 0;
+    right: 0;
+    z-index: 98;
+    pointer-events: none;
+  }
+  .mega-nav.is-open {
+    display: block;
+    pointer-events: auto;
+  }
+  .mega-nav__backdrop {
+    position: fixed;
+    inset: 0;
+    top: 56px;
+    background: rgba(0,0,0,0.45);
+    z-index: -1;
+    animation: backdropIn 0.2s ease forwards;
+  }
+  @media (min-width: 64em) {
+    .mega-nav,
+    .mega-nav__backdrop {
+      top: 64px;
+    }
+  }
+  @media (max-width: 47.9375em) {
+    .mega-nav,
+    .mega-nav__backdrop {
+      top: 60px;
+    }
+  }
+  @keyframes backdropIn {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+  }
+
+  .mega-panel {
+    display: none;
+  }
+  .mega-nav.is-open .mega-panel {
+    display: block;
+    animation: panelIn 0.18s ease forwards;
+  }
+  .mega-panel--about {
+    background: var(--bg);
+    box-shadow: 0 16px 48px rgba(0,0,0,0.4);
+  }
+
+  @keyframes panelIn {
+    from { opacity: 0; transform: translateY(-6px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+
+  .mega-panel__inner {
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 2rem 2.5rem;
+  }
+
+  .mega-section-header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-bottom: 1.25rem;
+    padding-bottom: 0.75rem;
+  }
+  .mega-section-header h2 {
+    margin: 0;
+    font-size: 1rem;
+    color: var(--accent);
+    font-family: 'Poppins', sans-serif;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+  }
+  [data-theme="dark"] .mega-section-header h2 { color: var(--text-light); }
+  .mega-about-grid {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 0.85rem;
+  }
+  .mega-about-card {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    padding: 1rem 1.1rem;
+    background: rgba(200,151,58,0.1);
+    border: 1px solid rgba(200,151,58,0.35);
+    border-radius: 10px;
+    text-decoration: none;
+    transition: background 0.15s, border-color 0.15s, transform 0.15s;
+  }
+  .mega-about-card:hover {
+    background: rgba(200,151,58,0.1);
+    border-color: rgba(200,151,58,0.35);
+    transform: translateY(-2px);
+  }
+  .mega-about-card:focus-visible {
+    outline: 2px solid var(--gold);
+    outline-offset: 2px;
+  }
+  .mega-about-card:hover .mega-about-title { color: var(--gold); }
+  [data-theme="dark"] .mega-about-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.07); }
+  [data-theme="dark"] .mega-about-card:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.07); transform: translateY(-2px); }
+  .mega-about-card.active,
+  .mega-about-card.active:hover {
+    background: rgba(200,151,58,0.12);
+    border-color: rgba(200,151,58,0.45);
+  }
+  /* [data-theme="dark"] .mega-about-card:hover above has higher specificity
+     (attribute selector + class + pseudo-class) than .mega-about-card.active
+     (two classes), so without this it would win and flatten the active card
+     back to the plain hover look. Matching specificity + declared after it
+     keeps the active highlight showing through hover in dark mode too. */
+  [data-theme="dark"] .mega-about-card.active,
+  [data-theme="dark"] .mega-about-card.active:hover {
+    background: rgba(200,151,58,0.12);
+    border-color: rgba(200,151,58,0.45);
+  }
+  .mega-about-card.active .mega-about-title { color: var(--gold); }
+  .mega-about-card.active .mega-about-icon { background: rgba(200,151,58,0.25); }
+  .mega-about-icon {
+    width: 42px;
+    height: 42px;
+    background: rgba(200,151,58,0.12);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--gold);
+    margin-bottom: 2px;
+  }
+  .mega-about-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--accent);
+    font-family: 'Inter', sans-serif;
+    line-height: 1.3;
+    transition: color 0.15s;
+  }
+  [data-theme="dark"] .mega-about-title { color: var(--text-light); }
+  .mega-about-desc {
+    font-size: 0.75rem;
+    color: var(--accent);
+    font-weight: 500;
+    font-family: 'Inter', sans-serif;
+    line-height: 1.4;
+  }
+  .mega-about-sub {
+    font-size: 0.8rem;
+    color: var(--accent);
+    font-weight: 500;
+    font-family: 'Inter', sans-serif;
+  }
+  [data-theme="dark"] .mega-about-desc,
+  [data-theme="dark"] .mega-about-sub {
+    color: var(--muted);
+    font-weight: 400;
+  }
+
+  .mega-empty {
+    color: var(--text-subtle);
+    font-size: 0.9rem;
+    font-style: italic;
+  }
+
+  /* Hide mega nav whenever hamburger / drawer nav is used (≤1023px) */
+  @media (max-width: 63.9375em) {
+    .mega-nav { display: none !important; }
+  }
+
+  /* Desktop only: hide flyout dropdown (replaced by mega panel) */
+  @media (min-width: 64em) {
+    .nav-dropdown { display: none; }
+  }
+
+  /* ── About dropdown (mega-menu style, mobile only) ── */
+  .nav-item { position: relative; display: flex; align-items: center; }
+  .nav-chevron {
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 3px;
+    transform: rotate(0deg);
+    transition: transform 0.2s ease;
+  }
+  .nav-item.open .nav-chevron,
+  .nav-item.panel-active .nav-chevron { transform: rotate(180deg); }
+
+  .nav-dropdown {
+    display: none;
+    position: absolute;
+    top: calc(100% + 12px);
+    left: 50%;
+    transform: translateX(-50%);
+    min-width: 280px;
+    background: #1e2d1c;
+    border: 1px solid #4A6741;
+    border-top: 2px solid var(--gold);
+    border-radius: 0 0 10px 10px;
+    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
+    list-style: none;
+    padding: 0.35rem 0;
+    margin: 0;
+    z-index: 200;
+  }
+  .nav-item.open .nav-dropdown { display: block; }
+
+  .nav-dropdown li a {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 0.65rem 1.1rem;
+    color: #D9CDB8;
+    text-decoration: none;
+    transition: background 0.12s, color 0.12s;
+    border-radius: 0;
+  }
+  .nav-dropdown li a:hover {
+    background: rgba(200,151,58,0.1);
+    color: #FAF6EF;
+  }
+  .nav-dropdown li a:focus-visible {
+    outline: 2px solid var(--gold);
+    outline-offset: -2px;
+  }
+  .nav-dropdown li a:hover .drop-title { color: var(--gold); }
+  .nav-dropdown li a.active { color: #FAF6EF; }
+  .nav-dropdown li a.active .drop-title { color: var(--gold); }
+  .nav-dropdown li a.active .drop-icon { background: rgba(200,151,58,0.25); }
+  .nav-dropdown li + li {
+    border-top: 1px solid rgba(255,255,255,0.05);
+  }
+
+  .drop-icon {
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(200,151,58,0.12);
+    border-radius: 6px;
+    color: var(--gold);
+  }
+
+  .drop-text {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+  }
+
+  .drop-title {
+    font-family: 'Inter', sans-serif;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: #C8D4C2;
+    line-height: 1.3;
+    transition: color 0.12s;
+  }
+
+  .drop-desc {
+    font-family: 'Inter', sans-serif;
+    font-size: 0.6875rem;
+    color: var(--text-subtle);
+    line-height: 1.3;
+  }
+
+  /* ── Tablet md: 768px+ ── */
+  @media (min-width: 48em) {
+    .site-header { padding: 0 2.5rem; }
+  }
+
+  /* ── Mobile overlay backdrop ── */
+  .mobile-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.5);
+    z-index: 98;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.22s ease, visibility 0.22s ease;
+    pointer-events: none;
+  }
+  .mobile-overlay.visible {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  /* ── Hamburger + slide-out nav (≤1023px) ── */
+  @media (max-width: 63.9375em) {
+    .nav-toggle { display: flex; }
+    .nav-cta-header-wrap { display: none; }
+    .nav-right .theme-toggle { display: none; }
+
+    .site-nav {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      position: fixed;
+      top: 56px;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      transform: none;
+      background: var(--bg-tag);
+      border-top: 1px solid rgba(44,59,42,0.10);
+      padding: 2rem 0 2rem;
+      gap: 0;
+      overflow-y: auto;
+      overflow-x: hidden;
+      pointer-events: none;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.22s ease, visibility 0.22s ease;
+      z-index: 99;
+      justify-content: flex-start;
+    }
+    [data-theme="dark"] .site-nav { background: var(--dark-bg); border-top-color: rgba(255,255,255,0.10); }
+    .site-nav.open {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+
+    .nav-link {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      position: relative;
+      gap: 0;
+      padding: 1rem 3rem;
+      font-size: 0.9375rem;
+      font-weight: 300;
+      font-family: 'Poppins', sans-serif;
+      border-radius: 0;
+      text-align: left;
+      width: 100%;
+      color: #2A3A2A;
+      transition: color 0.18s ease;
+    }
+    .nav-link::before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 3rem;
+      right: 0;
+      height: 1px;
+      background: rgba(255,255,255,0.08);
+    }
+    /* Last link (Calendar) sits directly above .nav-mobile-theme's own
+       border-top — drop its trailing divider so the two don't double up. */
+    .site-nav > .nav-link:last-of-type::before { display: none; }
+    .nav-link:hover { color: #C8973A; background: none; }
+    .nav-link::after { display: none; }
+    .nav-link.active { color: #C8973A; font-weight: 400; }
+
+    .nav-mobile-theme {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      padding: 1rem 1.5rem;
+      border-top: 1px solid var(--border);
+      margin-top: 0.5rem;
+    }
+
+    .nav-item { width: 100%; flex-direction: column; align-items: stretch; }
+    .nav-item .nav-link {
+      width: 100%;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+    .nav-item .nav-chevron { margin-left: auto; }
+    .nav-dropdown {
+      position: static;
+      transform: none;
+      display: block;
+      width: 100%;
+      background: transparent;
+      border: none;
+      border-radius: 0;
+      box-shadow: none;
+      min-width: 0;
+      max-height: 0;
+      overflow: hidden;
+      padding: 0;
+      transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
+    }
+    .nav-item.open .nav-dropdown {
+      max-height: min(70vh, 560px);
+      max-height: min(70dvh, 560px);
+      padding: 0.35rem 0;
+    }
+    .nav-dropdown li a {
+      padding: 0.6rem 1.5rem 0.6rem 3rem;
+      gap: 10px;
+      justify-content: flex-start;
+      font-size: 0.8rem;
+      color: #2A3A2A;
+      transition: color 0.18s ease;
+    }
+    .nav-dropdown li a:hover { color: #C8973A; background: none; }
+    .drop-icon { width: 24px; height: 24px; flex-shrink: 0; transition: color 0.18s ease; }
+    .drop-title { font-size: 0.75rem; color: #2A3A2A; transition: color 0.18s ease; }
+    [data-theme="dark"] .nav-dropdown li a { color: rgba(250,246,239,0.75); }
+    [data-theme="dark"] .nav-dropdown li a:hover,
+    [data-theme="dark"] .nav-dropdown li a:active { color: #C8973A; }
+    [data-theme="dark"] .nav-dropdown li a:hover .drop-title,
+    [data-theme="dark"] .nav-dropdown li a:active .drop-title { color: #C8973A; }
+    [data-theme="dark"] .nav-dropdown li a:hover .drop-icon,
+    [data-theme="dark"] .nav-dropdown li a:active .drop-icon { color: #C8973A; }
+    [data-theme="dark"] .drop-title { color: rgba(250,246,239,0.9); }
+    .drop-desc { display: none; }
+    .nav-dropdown li + li { border-top: 1px solid rgba(255,255,255,0.04); }
+
+    .site-nav .nav-mobile-theme .btn.nav-cta--drawer,
+    .site-nav .nav-mobile-theme a.nav-cta--drawer {
+      display: inline-flex !important;
+    }
+    .site-nav .nav-mobile-theme {
+      justify-content: space-between;
+      align-items: center;
+      gap: 0.75rem;
+    }
+    .site-nav .nav-mobile-theme .nav-cta--drawer {
+      flex: 1 1 auto;
+      min-width: 0;
+      max-width: calc(100% - 3.25rem);
+      justify-content: center;
+    }
+  }
+
+  /* ── Phone only: shorter header (≤767px) ── */
+  @media (max-width: 47.9375em) {
+    .site-nav { top: 60px; }
+    .site-header { padding: 0 1.25rem; height: 60px; }
+    .brand { gap: 10px; }
+  }
+</style>
+
+<script>
+  // ── Hamburger (mobile) ──
+  const toggle = document.querySelector('.nav-toggle') as HTMLButtonElement;
+  const nav = document.querySelector('#site-nav') as HTMLElement;
+  const megaNav = document.getElementById('mega-nav') as HTMLElement;
+  const aboutTrigger = document.querySelector('.nav-has-dropdown') as HTMLElement;
+  const aboutLink = aboutTrigger?.querySelector('.nav-link') as HTMLAnchorElement;
+  const mobileOverlay = document.getElementById('mobile-overlay') as HTMLElement;
+
+  let scrollY = 0;
+
+  function openNav() {
+    scrollY = window.scrollY;
+    document.body.style.position = 'fixed';
+    document.body.style.top = `-${scrollY}px`;
+    document.body.style.width = '100%';
+    nav.classList.add('open');
+    toggle.classList.add('open');
+    mobileOverlay.classList.add('visible');
+    toggle.setAttribute('aria-expanded', 'true');
+  }
+
+  function closeNav() {
+    const wasFixed = document.body.style.position === 'fixed';
+    document.body.style.position = '';
+    document.body.style.top = '';
+    document.body.style.width = '';
+    if (wasFixed) window.scrollTo(0, scrollY);
+    nav.classList.remove('open');
+    toggle.classList.remove('open');
+    mobileOverlay.classList.remove('visible');
+    toggle.setAttribute('aria-expanded', 'false');
+    aboutTrigger?.classList.remove('open');
+    aboutLink?.setAttribute('aria-expanded', 'false');
+  }
+
+  toggle.addEventListener('click', () => {
+    nav.classList.contains('open') ? closeNav() : openNav();
+  });
+
+  mobileOverlay?.addEventListener('click', closeNav);
+
+  document.addEventListener('click', e => {
+    const target = e.target as HTMLElement;
+    if (!target.closest('.site-header') && !target.closest('#mobile-overlay')) {
+      closeNav();
+    }
+  });
+
+  // Close the drawer when a real link inside it is clicked. This used to be
+  // an accidental side effect of navigation always hard-reloading the page
+  // (nav starts closed on a fresh load) — now that the header persists
+  // across Astro's <ClientRouter /> transitions (see /posts/), that DOM
+  // node's "open" state carries over untouched too, so it needs an explicit
+  // close here. Skip the "About Us" trigger: on mobile that link expands the
+  // submenu in place (preventDefault below) instead of navigating away.
+  nav.addEventListener('click', e => {
+    const link = (e.target as HTMLElement).closest('a[href]');
+    if (!link || link.getAttribute('aria-haspopup') === 'true') return;
+    closeNav();
+  });
+
+  const siteHeader = document.querySelector('.site-header') as HTMLElement | null;
+
+  function openMega() {
+    if (!megaNav || !aboutTrigger) return;
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    const scrollY = window.scrollY;
+    megaNav.classList.add('is-open');
+    megaNav.removeAttribute('aria-hidden');
+    aboutTrigger.classList.add('panel-active');
+    aboutLink?.setAttribute('aria-expanded', 'true');
+    siteHeader?.classList.add('header--scrolled');
+
+    document.body.style.position = 'fixed';
+    document.body.style.top = `-${scrollY}px`;
+    document.body.style.left = '0';
+    document.body.style.right = '0';
+    document.body.style.paddingRight = scrollbarWidth + 'px';
+    document.body.dataset.scrollY = String(scrollY);
+  }
+
+  function closeMega() {
+    if (!megaNav || !aboutTrigger) return;
+    megaNav.classList.remove('is-open');
+    megaNav.setAttribute('aria-hidden', 'true');
+    aboutTrigger.classList.remove('panel-active');
+    aboutLink?.setAttribute('aria-expanded', 'false');
+
+    const scrollY = parseInt(document.body.dataset.scrollY || '0', 10);
+    document.body.style.position = '';
+    document.body.style.top = '';
+    document.body.style.left = '';
+    document.body.style.right = '';
+    document.body.style.paddingRight = '';
+    delete document.body.dataset.scrollY;
+    window.scrollTo(0, scrollY);
+
+    if (scrollY < 1) siteHeader?.classList.remove('header--scrolled');
+  }
+
+  aboutLink?.addEventListener('click', e => {
+    if (window.matchMedia('(min-width: 64em)').matches) {
+      e.preventDefault();
+      if (megaNav.classList.contains('is-open')) {
+        closeMega();
+      } else {
+        openMega();
+      }
+    } else {
+      e.preventDefault();
+      aboutTrigger.classList.toggle('open');
+      aboutLink?.setAttribute('aria-expanded', aboutTrigger.classList.contains('open') ? 'true' : 'false');
+    }
+  });
+
+  document.addEventListener('click', e => {
+    if (
+      window.matchMedia('(min-width: 64em)').matches &&
+      megaNav?.classList.contains('is-open') &&
+      !(e.target as HTMLElement).closest('.nav-has-dropdown') &&
+      !(e.target as HTMLElement).closest('#mega-nav')
+    ) {
+      closeMega();
+    }
+  });
+
+  document.getElementById('mega-backdrop')?.addEventListener('click', closeMega);
+  document.addEventListener('keydown', e => {
+    if (e.key !== 'Escape') return;
+    closeMega();
+    if (nav.classList.contains('open')) closeNav();
+  });
+
+  // ── Theme toggle ──
+  const html = document.documentElement;
+  const themeToggle = document.getElementById('theme-toggle') as HTMLButtonElement | null;
+  const themeToggleMobile = document.getElementById('theme-toggle-mobile') as HTMLButtonElement | null;
+
+  const THEME_STORAGE_KEY = 'theme';
+  /** Set only when the user clicks the toggle — that's when localStorage takes
+      priority over the system preference. */
+  const THEME_SOURCE_KEY = 'theme-source';
+
+  function syncPrimaryLogo() {
+    const img = document.getElementById('primary-logo') as HTMLImageElement | null;
+    if (!img) return;
+    const src = html.dataset.theme === 'dark'
+      ? (img.dataset.srcDark ?? img.dataset.srcLight)
+      : img.dataset.srcLight;
+    if (src) img.src = src;
+  }
+
+  function syncThemedRasterLogos() {
+    syncPrimaryLogo();
+  }
+
+  /** Keeps the switch's accessible state (role="switch" aria-checked) in
+      sync with the rendered theme — called everywhere html.dataset.theme
+      is set. */
+  function syncToggleAria() {
+    const checked = html.dataset.theme === 'dark' ? 'true' : 'false';
+    themeToggle?.setAttribute('aria-checked', checked);
+    themeToggleMobile?.setAttribute('aria-checked', checked);
+  }
+
+  function systemTheme(): 'dark' | 'light' {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+
+  function userThemeOverride(): 'dark' | 'light' | null {
+    if (localStorage.getItem(THEME_SOURCE_KEY) !== 'user') return null;
+    const v = localStorage.getItem(THEME_STORAGE_KEY);
+    return v === 'light' || v === 'dark' ? v : null;
+  }
+
+  function applyThemeFromStorageOrSystem() {
+    const override = userThemeOverride();
+    html.dataset.theme = override ?? systemTheme();
+    syncThemedRasterLogos();
+    syncToggleAria();
+  }
+
+  function onSystemThemeChange() {
+    if (userThemeOverride() !== null) return;
+    html.dataset.theme = systemTheme();
+    syncThemedRasterLogos();
+    syncToggleAria();
+  }
+
+  function setUserThemeChoice(theme: 'dark' | 'light') {
+    localStorage.setItem(THEME_SOURCE_KEY, 'user');
+    localStorage.setItem(THEME_STORAGE_KEY, theme);
+    html.dataset.theme = theme;
+    syncThemedRasterLogos();
+    syncToggleAria();
+  }
+
+  applyThemeFromStorageOrSystem();
+  const colorSchemeMq = window.matchMedia('(prefers-color-scheme: dark)');
+  colorSchemeMq.addEventListener('change', onSystemThemeChange);
+
+  function toggleTheme() {
+    const next = html.dataset.theme === 'dark' ? 'light' : 'dark';
+    setUserThemeChoice(next);
+  }
+
+  themeToggle?.addEventListener('click', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    toggleTheme();
+  });
+
+  themeToggleMobile?.addEventListener('click', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    toggleTheme();
+  });
+
+  // ── Primary nav active-state re-sync ──
+  // The header is `transition:persist` (see the comment above <header>), so
+  // on a soft navigation within a ClientRouter-enabled page family
+  // (/posts/*), this DOM node survives untouched — the freshly-computed
+  // active state on the destination page's own server-rendered header never
+  // reaches the screen, since that header copy is discarded, not this one.
+  // `astro:page-load` fires after every navigation, initial load and every
+  // soft transition alike, so re-deriving the active link from the current
+  // URL here keeps the persisted header in sync regardless of how it got
+  // stale. Same longest-match rule as the server-side computation above
+  // (SiteHeader's frontmatter) — ported to run client-side since this is
+  // the only copy guaranteed to run on every navigation, including ones the
+  // server-rendered version never gets a chance to apply.
+  document.addEventListener('astro:page-load', () => {
+    const navLinks = Array.from(
+      document.querySelectorAll<HTMLAnchorElement>('#site-nav > a.nav-link'),
+    );
+    if (!navLinks.length) return;
+
+    const path = window.location.pathname;
+    let bestLink: HTMLAnchorElement | null = null;
+    let bestLength = -1;
+
+    for (const link of navLinks) {
+      const trimmed = (link.getAttribute('href') ?? '').replace(/\/$/, '');
+      if (trimmed.length > bestLength && path.startsWith(trimmed)) {
+        bestLink = link;
+        bestLength = trimmed.length;
+      }
+    }
+
+    for (const link of navLinks) {
+      link.classList.toggle('active', link === bestLink);
+    }
+  });
+</script>