ferst-core 0.1.0 → 0.2.0

package/components/PostCard.astro

@@ -1,262 +1,122 @@
 ---
-import type { CollectionEntry } from 'astro:content';
-import { opensAttachmentDirectly } from '../content/filters';
-import { plainTextExcerpt } from '../utils/excerpt';
-import { isFreshPost } from '../utils/freshness';
-import { formatDate } from '../utils/formatDate';
-
+/**
+ * PostCard — a post preview for the news index and tag pages. Token-driven (radius,
+ * border, shadow, colours all from the theme), equal-height in a grid, with the
+ * whole card clickable via a stretched title link. White-room (no CTK code).
+ */
 interface Props {
-  post: CollectionEntry<'posts'>;
-  withImage?: boolean;
-  showExcerpt?: boolean;
-  /** Whole-tile click (stretched-link on the title, no separate "Read" link) —
-      used by /posts/. */
-  linkWholeCard?: boolean;
+  href: string;
+  title: string;
+  date: Date | string;
+  summary?: string;
+  heroImage?: string;
+  /** Optional tag labels shown as a small eyebrow. */
+  tagLabels?: string[];
 }
-
-const { post, withImage = false, showExcerpt = true, linkWholeCard = true } = Astro.props;
-// A body-less post with an attachment (the typical newsletter shape) has
-// nothing to show on its detail page, so the tile opens the attachment
-// directly instead — same interaction as before the newsletters collection
-// existed. Any post with a body still opens /posts/<slug>/ normally, even if
-// it also carries an attachment (offered there as a separate link).
-const directAttachment = opensAttachmentDirectly(post);
-const href = directAttachment ? post.data.attachment! : `/posts/${post.slug}`;
-const linkTarget = directAttachment ? '_blank' : undefined;
-const linkRel = directAttachment ? 'noopener noreferrer' : undefined;
-const displayTags = post.data.tags;
-const isFresh = isFreshPost(post.data.date);
-const dateLabel = formatDate(post.data.date);
-const hasImage = Boolean(post.data.image);
-const excerpt = showExcerpt ? plainTextExcerpt(post.body ?? '', withImage ? 400 : 280) : '';
+const { href, title, date, summary, heroImage, tagLabels = [] } = Astro.props;
+const d = date instanceof Date ? date : new Date(date);
+const iso = Number.isNaN(d.valueOf()) ? undefined : d.toISOString().slice(0, 10);
+const display = Number.isNaN(d.valueOf())
+  ? ''
+  : d.toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' });
 ---
 
-<article class="post-card" class:list={{ 'post-card--with-image': withImage }}>
-  {isFresh && (
-    <span class="new-flag" data-fresh-since={post.data.date.toISOString()}>New</span>
-  )}
-  {withImage && (
-    hasImage ? (
-      <img
-        src={post.data.image}
-        alt={post.data.title}
-        class="post-card__img"
-        loading="lazy"
-        decoding="async"
-      />
-    ) : (
-      <div class="post-card__placeholder" aria-hidden="true"></div>
-    )
+<article class="b-post-card">
+  {heroImage && (
+    <a class="b-post-card__media" href={href} tabindex="-1" aria-hidden="true">
+      <img src={heroImage} alt="" loading="lazy" />
+    </a>
   )}
-  <div class="post-content">
-    {displayTags.length > 0 && (
-      <div class="post-tags" aria-label="Post tags">
-        {displayTags.map((tag) => (
-          <span class="post-tag">{tag}</span>
-        ))}
-      </div>
-    )}
-
-    <h3>{linkWholeCard ? <a href={href} target={linkTarget} rel={linkRel}>{post.data.title}</a> : post.data.title}</h3>
-
-    {excerpt ? <p>{excerpt}</p> : null}
-
-    <div class="post-card__footer">
-      <time datetime={post.data.date.toISOString()}>{dateLabel}</time>
-      {linkWholeCard ? (
-        <svg class="post-card__chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-          <polyline points="9 6 15 12 9 18"/>
-        </svg>
-      ) : (
-        <a href={href} target={linkTarget} rel={linkRel} aria-label={`Read ${post.data.title}`}>
-          <svg class="post-card__chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <polyline points="9 6 15 12 9 18"/>
-          </svg>
-        </a>
-      )}
+  <div class="b-post-card__body">
+    <div class="b-post-card__meta">
+      {tagLabels.length > 0 && <span class="b-post-card__eyebrow">{tagLabels[0]}</span>}
+      {display && <time datetime={iso}>{display}</time>}
     </div>
+    <h3 class="b-post-card__title">
+      <a href={href}>{title}</a>
+    </h3>
+    {summary && <p class="b-post-card__summary">{summary}</p>}
+    <span class="b-post-card__more" aria-hidden="true">Read more</span>
   </div>
 </article>
 
 <style>
-  .post-card {
-    position: relative;
-    padding: 0;
-    border-bottom: none;
-    overflow: hidden;
+  .b-post-card {
     display: flex;
     flex-direction: column;
-    flex: 1;
+    background: var(--bg-surface);
+    border: var(--card-border);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-sm);
+    overflow: hidden;
+    position: relative;
+    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
   }
-
-  .post-content {
+  .b-post-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+    border-color: var(--gold);
+  }
+  .b-post-card__media {
+    display: block;
+    aspect-ratio: 16 / 9;
+    background: var(--bg-section);
+  }
+  .b-post-card__media img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+  .b-post-card__body {
     display: flex;
     flex-direction: column;
+    gap: 0.5rem;
+    padding: 1.1rem 1.2rem 1.3rem;
     flex: 1;
-    min-height: 0;
-    gap: 0.75rem;
-    padding: clamp(0.875rem, 2.2vw, 1.25rem);
-    color: var(--news-card-body);
   }
-
-  .post-tags {
+  .b-post-card__meta {
     display: flex;
     flex-wrap: wrap;
-    justify-content: flex-end;
-    gap: 0.35rem;
-    margin: 0;
-    width: 100%;
-  }
-
-  .post-tag {
-    display: inline-flex;
     align-items: center;
-    font-family: 'Poppins', sans-serif;
-    font-size: 0.65rem;
+    gap: 0.5rem 0.75rem;
+  }
+  .b-post-card__eyebrow {
+    font-family: var(--font-heading);
+    font-size: 0.7rem;
     font-weight: 600;
+    letter-spacing: 0.08em;
     text-transform: uppercase;
-    letter-spacing: 0.12em;
-    color: var(--brown);
-    background: rgba(180, 145, 70, 0.22);
-    border-radius: 4px;
-    padding: 0.15rem 0.45rem;
-    line-height: 1.2;
-  }
-  :global(html[data-theme="dark"]) .post-tag {
-    color: var(--text-light);
-    background: rgba(255, 255, 255, 0.12);
-  }
-
-  .post-content h3 {
-    /* Full title, never truncated — the admin's exact wording is shown
-       in full, however many lines it takes. */
-    margin-block: 0;
+    color: var(--gold);
   }
-
-  /* Stretched-link pattern: the title anchor's ::after is expanded to cover
-     the whole card (positioned against .post-card, the nearest positioned
-     ancestor), so clicking anywhere on the tile opens the post — no JS
-     needed. The footer "Read" link sits above it via z-index so it stays
-     independently clickable/focusable. */
-  .post-card h3 a {
-    color: inherit;
-    text-decoration: none;
+  .b-post-card__title {
+    margin: 0;
   }
-
-  .post-card h3 a::after {
+  /* Stretch the title link over the whole card so the card is clickable, while
+     the meta/summary stay selectable. */
+  .b-post-card__title a::after {
     content: '';
     position: absolute;
     inset: 0;
-    z-index: 1;
   }
-
-  .new-flag {
-    position: absolute;
-    top: clamp(0.5rem, 1.6vw, 0.75rem);
-    left: clamp(0.5rem, 1.6vw, 0.75rem);
-    z-index: 2;
-    display: inline-block;
-    font-family: 'Poppins', sans-serif;
-    font-size: 0.6875rem;
-    font-weight: 700;
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-    color: #fff;
-    background: var(--accent);
-    border-radius: 4px;
-    padding: 0.22rem 0.55rem;
-    line-height: 1.2;
-    transform: rotate(-4deg);
-    transform-origin: top left;
-    box-shadow:
-      0 2px 6px rgba(0, 0, 0, 0.18),
-      0 1px 2px rgba(0, 0, 0, 0.08);
-    pointer-events: none;
+  .b-post-card__title a {
+    color: var(--fg);
   }
-  :global(html[data-theme="dark"]) .new-flag {
-    background: var(--gold);
-    color: #2A1F12;
+  .b-post-card:hover .b-post-card__title a {
+    color: var(--gold);
   }
-
-  .post-content > p {
-    font-size: clamp(0.8125rem, 0.7rem + 0.5vw, 0.9375rem);
+  .b-post-card__summary {
+    margin: 0;
+    color: var(--muted);
+    font-size: 0.95rem;
     line-height: 1.55;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
   }
-
-  /* Date on the left, chevron on the right — chevron keeps the same
-     slide-right-on-hover language as the homepage's Latest from the
-     Notice rows (.notice-row / .notice-chevron). */
-  .post-card__footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 0.4rem;
+  .b-post-card__more {
     margin-top: auto;
-  }
-
-  .post-card__footer time {
-    flex-shrink: 0;
-  }
-
-  .post-card__footer a {
-    position: relative;
-    z-index: 2;
-    display: inline-flex;
-    align-items: center;
-  }
-
-  .post-card__chevron {
-    flex-shrink: 0;
-    color: var(--muted);
-    transition: transform 0.15s ease, color 0.15s ease;
-  }
-
-  /* Decorative in linkWholeCard mode (the real link is the title's
-     stretched-link), so it reacts to hover on the whole card. */
-  .post-card:hover .post-card__chevron {
-    transform: translateX(3px);
+    padding-top: 0.4rem;
+    font-family: var(--font-heading);
+    font-size: 0.85rem;
+    font-weight: 600;
     color: var(--gold);
   }
-
-  /* With-image variant: opt-in via the `withImage` prop, used by the
-     /posts/ listing. Image always sits above the text, at every screen
-     size. */
-  .post-card--with-image .post-card__img,
-  .post-card--with-image .post-card__placeholder {
-    display: block;
-    width: 100%;
-    aspect-ratio: 16 / 9;
-    border-radius: 10px 10px 0 0;
-    margin: 0;
-  }
-
-  .post-card--with-image .post-card__img {
-    object-fit: cover;
-    object-position: center;
-  }
-
-  .post-card--with-image .post-card__placeholder {
-    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-  }
-
-  :global(html[data-theme="dark"]) .post-card--with-image .post-card__placeholder {
-    background: linear-gradient(135deg, #4A6741 0%, #2C3B2A 100%);
-  }
-
-  .post-card--with-image .post-content > p {
-    -webkit-line-clamp: 5;
-  }
-
-  .post-card--with-image .post-tags {
-    justify-content: flex-start;
-  }
-
-  .post-card--with-image .post-content {
-    padding-top: clamp(1.5rem, 3.5vw, 2rem);
-  }
 </style>

package/components/SiteFooter.astro

@@ -131,7 +131,7 @@ const year = new Date().getFullYear();
   }
   .site-footer .footer-brand {
     margin: 0;
-    font-family: 'Poppins', sans-serif;
+    font-family: var(--font-heading);
     font-weight: 700;
     font-size: 1.15rem;
     line-height: 1.3;
@@ -217,7 +217,7 @@ const year = new Date().getFullYear();
   }
   .site-footer .footer-copy {
     margin: 0;
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-body);
     font-size: 0.68rem;
     font-weight: 400;
     color: var(--muted);

package/components/SiteHeader.astro

@@ -15,8 +15,8 @@ import type { NavLink, NavGroup } from '../content/schemas';
 interface Props {
   path: string;
   headerClass?: string;
-  primaryLogoLight: string;
-  primaryLogoDark: string;
+  primaryLogoLight?: string;
+  primaryLogoDark?: string;
   brandAlt: string;
   primaryNav: NavLink[];
   /** Optional dropdown / mega-menu group. Client-configured — the core ships none. */
@@ -56,28 +56,34 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
 -->
 <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"
-    />
+    {primaryLogoLight ? (
+      <img
+        id="primary-logo"
+        src={primaryLogoLight}
+        data-src-light={primaryLogoLight}
+        data-src-dark={primaryLogoDark ?? primaryLogoLight}
+        alt={brandAlt}
+        class="primary-logo"
+        width="545"
+        height="151"
+        loading="eager"
+        fetchpriority="high"
+        decoding="sync"
+      />
+    ) : (
+      <span class="brand-wordmark">{brandAlt}</span>
+    )}
   </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>
+  {primaryLogoLight && (
+    <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) : primaryLogoLight;
+      })();
+    </script>
+  )}
 
   <nav class="site-nav" id="site-nav" aria-label="Main navigation">
     {dropdown && (
@@ -196,6 +202,21 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     width: auto;
   }
 
+  /* Text wordmark fallback — shown when a client has configured no logo image
+     (var(--fg) auto-switches for dark mode via theme.css). */
+  .brand-wordmark {
+    font-family: var(--font-heading);
+    font-weight: 700;
+    font-size: 1.25rem;
+    line-height: 1;
+    color: var(--fg);
+    letter-spacing: 0.01em;
+    white-space: nowrap;
+  }
+  @media (min-width: 64em) {
+    .brand-wordmark { font-size: 1.5rem; }
+  }
+
   /* ── Header ── */
   /* Logo + header: mobile-first — compact until desktop ≥64em scales up (matches button/theme sizing). */
   .site-header {
@@ -218,6 +239,31 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     }
   }
   [data-theme="dark"] .site-header { background: var(--dark-bg); }
+
+  /* Sticky "shrink on scroll": the header condenses and gains a shadow once the
+     page is scrolled, then expands again at the top. Purely additive; safe with
+     the sticky positioning. Motion honoured. */
+  .site-header {
+    transition: height 0.25s ease, box-shadow 0.25s ease;
+  }
+  .site-header.is-compact {
+    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.10);
+    height: 50px;
+  }
+  @media (min-width: 64em) {
+    .site-header.is-compact { height: 54px; }
+  }
+  .site-header .primary-logo,
+  .site-header .brand-wordmark {
+    transition: height 0.25s ease, font-size 0.25s ease;
+  }
+  .site-header.is-compact .primary-logo { height: 38px; }
+  .site-header.is-compact .brand-wordmark { font-size: 1.15rem; }
+  @media (prefers-reduced-motion: reduce) {
+    .site-header,
+    .site-header .primary-logo,
+    .site-header .brand-wordmark { transition: none; }
+  }
   .brand {
     text-decoration: none;
     display: flex;
@@ -265,7 +311,7 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     padding: 14px 0;
     color: var(--accent);
     text-decoration: none;
-    font-family: 'Inter', 'Lato', sans-serif;
+    font-family: var(--font-body);
     font-size: 0.875rem;
     font-weight: 500;
     letter-spacing: 0.1em;
@@ -316,10 +362,10 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     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; }
+  .nav-cta.active { background: color-mix(in srgb, var(--gold) 85%, #000); color: var(--text-light); border: none; }
+  [data-theme="dark"] .nav-cta { background: var(--gold); color: var(--dark-bg); border: none; }
   [data-theme="dark"] .nav-cta:hover,
-  [data-theme="dark"] .nav-cta.active { background: var(--text-footer-link); color: var(--fg); border: none; }
+  [data-theme="dark"] .nav-cta.active { background: color-mix(in srgb, var(--gold) 85%, #fff); color: var(--dark-bg); border: none; }
 
   .nav-mobile-theme .nav-cta--drawer {
     display: none;
@@ -389,7 +435,7 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
   }
   .theme-icon--sun { opacity: 1; }
   [data-theme="dark"] .theme-icon--sun { opacity: 0.5; }
-  [data-theme="dark"] .theme-icon--moon { opacity: 1; color: #2A1F12; }
+  [data-theme="dark"] .theme-icon--moon { opacity: 1; color: var(--dark-bg); }
 
   /* Mobile theme toggle row — hidden on desktop */
   .nav-mobile-theme { display: none; }
@@ -416,7 +462,7 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     position: absolute;
     width: 22px;
     height: 2px;
-    background: #2A3A2A;
+    background: var(--fg);
     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;
@@ -501,7 +547,7 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     margin: 0;
     font-size: 1rem;
     color: var(--accent);
-    font-family: 'Poppins', sans-serif;
+    font-family: var(--font-heading);
     font-weight: 600;
     letter-spacing: 0.04em;
   }
@@ -567,7 +613,7 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     font-size: 0.875rem;
     font-weight: 600;
     color: var(--accent);
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-body);
     line-height: 1.3;
     transition: color 0.15s;
   }
@@ -576,14 +622,14 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     font-size: 0.75rem;
     color: var(--accent);
     font-weight: 500;
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-body);
     line-height: 1.4;
   }
   .mega-about-sub {
     font-size: 0.8rem;
     color: var(--accent);
     font-weight: 500;
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-body);
   }
   [data-theme="dark"] .mega-about-desc,
   [data-theme="dark"] .mega-about-sub {
@@ -626,8 +672,8 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     left: 50%;
     transform: translateX(-50%);
     min-width: 280px;
-    background: #1e2d1c;
-    border: 1px solid #4A6741;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
     border-top: 2px solid var(--gold);
     border-radius: 0 0 10px 10px;
     box-shadow: 0 12px 32px rgba(0,0,0,0.35);
@@ -643,21 +689,21 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     align-items: center;
     gap: 12px;
     padding: 0.65rem 1.1rem;
-    color: #D9CDB8;
+    color: var(--muted);
     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;
+    color: var(--fg);
   }
   .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 { color: var(--fg); }
   .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 {
@@ -683,16 +729,16 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
   }
 
   .drop-title {
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-body);
     font-size: 0.8125rem;
     font-weight: 600;
-    color: #C8D4C2;
+    color: var(--text-light);
     line-height: 1.3;
     transition: color 0.12s;
   }
 
   .drop-desc {
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-body);
     font-size: 0.6875rem;
     color: var(--text-subtle);
     line-height: 1.3;
@@ -766,11 +812,11 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
       padding: 1rem 3rem;
       font-size: 0.9375rem;
       font-weight: 300;
-      font-family: 'Poppins', sans-serif;
+      font-family: var(--font-heading);
       border-radius: 0;
       text-align: left;
       width: 100%;
-      color: #2A3A2A;
+      color: var(--fg);
       transition: color 0.18s ease;
     }
     .nav-link::before {
@@ -785,9 +831,9 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     /* 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:hover { color: var(--gold); background: none; }
     .nav-link::after { display: none; }
-    .nav-link.active { color: #C8973A; font-weight: 400; }
+    .nav-link.active { color: var(--gold); font-weight: 400; }
 
     .nav-mobile-theme {
       display: flex;
@@ -831,19 +877,19 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
       gap: 10px;
       justify-content: flex-start;
       font-size: 0.8rem;
-      color: #2A3A2A;
+      color: var(--fg);
       transition: color 0.18s ease;
     }
-    .nav-dropdown li a:hover { color: #C8973A; background: none; }
+    .nav-dropdown li a:hover { color: var(--gold); 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; }
+    .drop-title { font-size: 0.75rem; color: var(--fg); 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:active { color: var(--gold); }
     [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:active .drop-title { color: var(--gold); }
     [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"] .nav-dropdown li a:active .drop-icon { color: var(--gold); }
     [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); }
@@ -937,6 +983,13 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
 
   const siteHeader = document.querySelector('.site-header') as HTMLElement | null;
 
+  // Shrink-on-scroll: condense the header once the page is scrolled.
+  if (siteHeader) {
+    const onScrollCompact = () => siteHeader.classList.toggle('is-compact', window.scrollY > 40);
+    onScrollCompact();
+    window.addEventListener('scroll', onScrollCompact, { passive: true });
+  }
+
   function openMega() {
     if (!megaNav || !aboutTrigger) return;
     const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;