fix: resolve @custom-media queries in publisher CSS

The publisher reads raw CSS source files that use @custom-media
(e.g. --bp-content-collapse). Browsers don't support this natively -
PostCSS resolves it in the Vite build but not for the publisher.

This broke ALL responsive breakpoints in published HTML: the grid
never collapsed, mobile TOC elements were unaffected by media queries,
and the layout was broken on narrow screens.

Added resolveCustomMedia() that extracts @custom-media declarations
and replaces their usage with the resolved values before injection.

Made-with: Cursor

backend/src/publisher/index.ts

@@ -41,6 +41,31 @@ export interface PublishCSS {
  * Reads the template CSS foundation + editor extensions.
  * Tries multiple paths: dev source, Docker copy, relative fallback.
  */
+/**
+ * Resolve @custom-media at-rules so the CSS works in browsers.
+ * PostCSS handles this in the Vite build, but the publisher reads raw source files.
+ */
+function resolveCustomMedia(allCss: string): string {
+  const mediaMap = new Map<string, string>();
+
+  // Extract @custom-media declarations
+  const declRegex = /@custom-media\s+(--[\w-]+)\s+\(([^)]+)\)\s*;/g;
+  let match: RegExpExecArray | null;
+  while ((match = declRegex.exec(allCss)) !== null) {
+    mediaMap.set(match[1], `(${match[2]})`);
+  }
+
+  // Remove @custom-media declarations
+  let resolved = allCss.replace(/@custom-media\s+--[\w-]+\s+\([^)]+\)\s*;/g, "");
+
+  // Replace @media (--custom-name) with the resolved value
+  for (const [name, value] of mediaMap) {
+    resolved = resolved.replaceAll(`(${name})`, value);
+  }
+
+  return resolved;
+}
+
 function loadCSS(): PublishCSS {
   const candidates = [
     join(__dirname, "..", "..", "..", "frontend", "src", "styles"),
@@ -64,15 +89,29 @@ function loadCSS(): PublishCSS {
         .map((f) => readSafe(join(dir, "components", f)))
         .join("\n");
 
+      // Read all CSS, resolve @custom-media, then split back
+      const variablesRaw = readFileSync(varsPath, "utf-8");
+      const resetRaw = readSafe(join(dir, "_reset.css"));
+      const baseRaw = readFileSync(basePath, "utf-8");
+      const layoutRaw = readSafe(join(dir, "_layout.css"));
+      const printRaw = readSafe(join(dir, "_print.css"));
+      const editorTokensRaw = readSafe(join(dir, "_editor-tokens.css"));
+      const articleRaw = readSafe(join(dir, "article.css"));
+
+      // @custom-media declarations live in _variables.css - resolve across all files
+      const allRaw = [variablesRaw, resetRaw, baseRaw, layoutRaw, printRaw, editorTokensRaw, articleRaw, componentsCss].join("\n/* __CSS_BOUNDARY__ */\n");
+      const resolved = resolveCustomMedia(allRaw);
+      const parts = resolved.split("/* __CSS_BOUNDARY__ */");
+
       return {
-        variables: readFileSync(varsPath, "utf-8"),
-        reset: readSafe(join(dir, "_reset.css")),
-        base: readFileSync(basePath, "utf-8"),
-        layout: readSafe(join(dir, "_layout.css")),
-        print: readSafe(join(dir, "_print.css")),
-        editorTokens: readSafe(join(dir, "_editor-tokens.css")),
-        article: readSafe(join(dir, "article.css")),
-        components: componentsCss,
+        variables: parts[0]?.trim() ?? "",
+        reset: parts[1]?.trim() ?? "",
+        base: parts[2]?.trim() ?? "",
+        layout: parts[3]?.trim() ?? "",
+        print: parts[4]?.trim() ?? "",
+        editorTokens: parts[5]?.trim() ?? "",
+        article: parts[6]?.trim() ?? "",
+        components: parts[7]?.trim() ?? "",
       };
     }
   }