Sync serif headings (self-hosted Fraunces) from reference site

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: raimbetov

asset/fonts/Fraunces-latin.woff2

@@ -4,9 +4,19 @@
    ======================================== */
 
 /* ========================================
-   0. DESIGN TOKENS
+   0. FONTS & DESIGN TOKENS
    ======================================== */
 
+/* Self-hosted Fraunces (variable serif) for headings only. No font CDN.
+   Body text stays on the Water.css system sans stack. */
+@font-face {
+  font-family: "Fraunces";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url("../asset/fonts/Fraunces-latin.woff2") format("woff2");
+}
+
 :root {
   /* Spacing scale */
   --space-xs: 0.25rem;   /* 4px  */
@@ -424,6 +434,14 @@ a {
    6. HEADINGS & TEXT
    ======================================== */
 
+/* Serif headings (Fraunces) — editorial contrast against the sans body/logo */
+h1, h2, h3, .panel-title {
+  font-family: "Fraunces", Georgia, "Times New Roman", serif;
+  font-weight: 600;
+  font-optical-sizing: auto;
+  letter-spacing: -0.01em;
+}
+
 h1, h2 {
   color: var(--links);
 }
@@ -434,6 +452,12 @@ h1 {
   text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
 }
 
+/* Keep the small heading labels/separators on the sans stack for contrast */
+.section-tag, .section-sep {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  letter-spacing: normal;
+}
+
 /* Remove list bullets */
 ul, ol {
   list-style: none;