@@ -3,14 +3,18 @@
 The landing-page artwork combines a protein ribbon, a genomic heatmap, and a
 coverage/gene track in one transparent 4:3 composition.
 
-- Source master: `assets-src/hero/compbio-research-atlas-light-master.png`
+- Source: `assets-src/hero/compbio-research-atlas-chroma-source.png`
 - Generated web assets: `compbio-research-atlas-{light,dark}-{800,1600}.webp`
 - Regeneration command: `npm run assets:hero`
 
-The light master was created with OpenAI image generation from a
-user-supplied scientific-layout reference on 2026-07-29, then isolated onto a
-true alpha channel. The dark assets are deterministic palette conversions of
-that same master, so theme changes do not shift the composition. California
-gold is preserved while blue and steel tones become pearl and ice blue.
+The source was created with OpenAI image generation from a user-supplied
+scientific-layout reference on 2026-07-29. The build script estimates the
+chroma field, reconstructs antialiased edge colors, removes residual magenta
+spill, and produces one shared alpha geometry. The clean pearl/ice/gold source
+becomes the dark asset directly; the light asset is a smooth deterministic
+navy/steel/gold palette conversion. Theme changes therefore never shift the
+composition or introduce binary color seams around the gold details.
 
-Edit the source master or the conversion script, not the generated WebP files.
+The website renders the result as a masked background field so it can bleed
+through the right side of the hero without becoming a bounded illustration.
+Edit the chroma source or conversion script, not the generated WebP files.
@@ -6,38 +6,164 @@ import sharp from "sharp";
 const projectRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
 const sourcePath = path.join(
   projectRoot,
-  "assets-src/hero/compbio-research-atlas-light-master.png",
+  "assets-src/hero/compbio-research-atlas-chroma-source.png",
 );
 const outputDirectory = path.join(projectRoot, "public/hero");
 const outputWidths = [800, 1600];
 
-const isGoldPixel = (red, green, blue) =>
-  red > 125
-  && red > blue * 1.18
-  && green > blue * 1.08
-  && red > green * 1.015;
+const clamp = (value, minimum = 0, maximum = 1) =>
+  Math.max(minimum, Math.min(maximum, value));
 
-const clearSafeMargin = async (input) => {
+const smoothstep = (start, end, value) => {
+  const amount = clamp((value - start) / (end - start));
+  return amount * amount * (3 - 2 * amount);
+};
+
+const getBackgroundModel = (data, info) => {
+  const rows = Array.from({ length: info.height }, () => [0, 0, 0, 0]);
+  const columns = Array.from({ length: info.width }, () => [0, 0, 0, 0]);
+  const global = [0, 0, 0, 0];
+
+  for (let y = 0; y < info.height; y += 1) {
+    for (let x = 0; x < info.width; x += 1) {
+      const index = (y * info.width + x) * info.channels;
+      const red = data[index];
+      const green = data[index + 1];
+      const blue = data[index + 2];
+      const screenStrength = (red + blue) / 2 - green;
+
+      if (screenStrength <= 120 || Math.abs(red - blue) >= 90) continue;
+
+      for (let channel = 0; channel < 3; channel += 1) {
+        rows[y][channel] += data[index + channel];
+        columns[x][channel] += data[index + channel];
+        global[channel] += data[index + channel];
+      }
+
+      rows[y][3] += 1;
+      columns[x][3] += 1;
+      global[3] += 1;
+    }
+  }
+
+  const globalMean = global
+    .slice(0, 3)
+    .map((value) => value / global[3]);
+
+  const fillMeans = (values) =>
+    values.map((entry) =>
+      entry[3]
+        ? entry.slice(0, 3).map((value) => value / entry[3])
+        : globalMean);
+
+  const smooth = (values, radius) =>
+    values.map((_, index) => {
+      const result = [0, 0, 0];
+      let samples = 0;
+
+      for (
+        let sample = Math.max(0, index - radius);
+        sample <= Math.min(values.length - 1, index + radius);
+        sample += 1
+      ) {
+        for (let channel = 0; channel < 3; channel += 1) {
+          result[channel] += values[sample][channel];
+        }
+        samples += 1;
+      }
+
+      return result.map((value) => value / samples);
+    });
+
+  return {
+    columns: smooth(fillMeans(columns), 14),
+    global: globalMean,
+    rows: smooth(fillMeans(rows), 10),
+  };
+};
+
+const keyChromaSource = async (input) => {
   const { data, info } = await sharp(input)
-    .ensureAlpha()
     .raw()
     .toBuffer({ resolveWithObject: true });
+  const background = getBackgroundModel(data, info);
+  const output = Buffer.alloc(info.width * info.height * 4);
+  const safeMargin = Math.round(Math.min(info.width, info.height) * 0.055);
 
   for (let y = 0; y < info.height; y += 1) {
     for (let x = 0; x < info.width; x += 1) {
-      if (x >= 100 && x < info.width - 100 && y >= 100 && y < info.height - 120) {
+      const sourceIndex = (y * info.width + x) * info.channels;
+      const outputIndex = (y * info.width + x) * 4;
+
+      if (
+        x < safeMargin
+        || x >= info.width - safeMargin
+        || y < safeMargin
+        || y >= info.height - safeMargin
+      ) {
+        output[outputIndex] = 0;
+        output[outputIndex + 1] = 0;
+        output[outputIndex + 2] = 0;
+        output[outputIndex + 3] = 0;
+        continue;
+      }
+
+      const backdrop = [0, 1, 2].map((channel) =>
+        clamp(
+          background.rows[y][channel]
+            + background.columns[x][channel]
+            - background.global[channel],
+          0,
+          255,
+        ));
+      const red = data[sourceIndex];
+      const green = data[sourceIndex + 1];
+      const blue = data[sourceIndex + 2];
+      const screenStrength = (red + blue) / 2 - green;
+      const backgroundStrength =
+        (backdrop[0] + backdrop[2]) / 2 - backdrop[1];
+      const colorDistance = Math.hypot(
+        red - backdrop[0],
+        green - backdrop[1],
+        blue - backdrop[2],
+      );
+
+      let alpha = 1 - clamp(screenStrength / Math.max(1, backgroundStrength));
+
+      if (colorDistance < 4) alpha = 0;
+      alpha = clamp((alpha - 0.018) / 0.982);
+
+      if (alpha < 0.035) {
+        output[outputIndex] = 0;
+        output[outputIndex + 1] = 0;
+        output[outputIndex + 2] = 0;
+        output[outputIndex + 3] = 0;
         continue;
       }
 
-      const index = (y * info.width + x) * 4;
-      data[index] = 0;
-      data[index + 1] = 0;
-      data[index + 2] = 0;
-      data[index + 3] = 0;
+      const recovered = [0, 1, 2].map((channel) =>
+        clamp(
+          (data[sourceIndex + channel] - (1 - alpha) * backdrop[channel])
+            / alpha,
+          0,
+          255,
+        ));
+      const magentaSpill = Math.max(
+        0,
+        Math.min(recovered[0], recovered[2]) - recovered[1] - 4,
+      );
+
+      recovered[0] -= magentaSpill;
+      recovered[2] -= magentaSpill;
+
+      for (let channel = 0; channel < 3; channel += 1) {
+        output[outputIndex + channel] = Math.round(recovered[channel]);
+      }
+      output[outputIndex + 3] = Math.round(alpha * 255);
     }
   }
 
-  return sharp(data, {
+  return sharp(output, {
     raw: {
       width: info.width,
       height: info.height,
@@ -48,9 +174,8 @@ const clearSafeMargin = async (input) => {
     .toBuffer();
 };
 
-const buildDarkVariant = async (input) => {
+const buildLightVariant = async (input) => {
   const { data, info } = await sharp(input)
-    .ensureAlpha()
     .raw()
     .toBuffer({ resolveWithObject: true });
 
@@ -62,26 +187,28 @@ const buildDarkVariant = async (input) => {
 
     if (alpha === 0) continue;
 
-    if (isGoldPixel(red, green, blue)) {
-      data[index] = Math.min(255, Math.round(red * 1.02));
-      data[index + 1] = Math.min(255, Math.round(green * 1.03));
-      data[index + 2] = Math.min(255, Math.round(blue * 0.96));
-      continue;
-    }
-
-    const luminance = Math.max(
-      0,
-      Math.min(1, (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255),
+    const maximum = Math.max(red, green, blue);
+    const minimum = Math.min(red, green, blue);
+    const saturation = maximum ? (maximum - minimum) / maximum : 0;
+    const goldWeight =
+      smoothstep(0.1, 0.45, (red - blue) / 255)
+      * smoothstep(0.08, 0.35, saturation)
+      * smoothstep(80, 170, red);
+    const luminance = clamp(
+      (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255,
     );
-    const pearl = [247, 243, 232];
-    const iceBlue = [139, 164, 194];
+    const tone = smoothstep(0.32, 0.94, luminance);
+    const navy = [12, 52, 101];
+    const steel = [200, 214, 229];
+    const neutral = navy.map((channel, channelIndex) =>
+      channel * (1 - tone) + steel[channelIndex] * tone);
 
-    data[index] = Math.round(pearl[0] * (1 - luminance) + iceBlue[0] * luminance);
+    data[index] = Math.round(neutral[0] * (1 - goldWeight) + red * goldWeight);
     data[index + 1] = Math.round(
-      pearl[1] * (1 - luminance) + iceBlue[1] * luminance,
+      neutral[1] * (1 - goldWeight) + green * goldWeight,
     );
     data[index + 2] = Math.round(
-      pearl[2] * (1 - luminance) + iceBlue[2] * luminance,
+      neutral[2] * (1 - goldWeight) + blue * goldWeight,
     );
   }
 
@@ -107,7 +234,6 @@ const writeVariant = async (variant, input, width) => {
     .resize(width, height, {
       fit: "fill",
       kernel: sharp.kernel.lanczos3,
-      withoutEnlargement: true,
     })
     .webp({
       quality: 90,
@@ -120,25 +246,24 @@ const writeVariant = async (variant, input, width) => {
   console.log(`Wrote ${path.relative(projectRoot, outputPath)}`);
 };
 
-const sourceMaster = await sharp(sourcePath).png().toBuffer();
-const metadata = await sharp(sourceMaster).metadata();
+const metadata = await sharp(sourcePath).metadata();
 
 if (
-  metadata.width !== 1600
-  || metadata.height !== 1200
-  || metadata.hasAlpha !== true
+  !metadata.width
+  || !metadata.height
+  || Math.abs(metadata.width / metadata.height - 4 / 3) > 0.001
 ) {
   throw new Error(
-    "Hero master must be a 1600x1200 PNG with a transparent alpha channel.",
+    "Hero chroma source must be a 4:3 PNG.",
   );
 }
 
 await mkdir(outputDirectory, { recursive: true });
 
-const source = await clearSafeMargin(sourceMaster);
+const darkSource = await keyChromaSource(sourcePath);
 const variants = {
-  light: source,
-  dark: await buildDarkVariant(source),
+  light: await buildLightVariant(darkSource),
+  dark: darkSource,
 };
 
 for (const [variant, input] of Object.entries(variants)) {
 
@@ -12,7 +12,7 @@ const heroImageProps = {
   decoding: "async" as const,
   draggable: false,
   loading: "eager" as const,
-  sizes: "(min-width: 1280px) 640px, (min-width: 1024px) 52vw, 92vw",
+  sizes: "(min-width: 1024px) 72vw, (min-width: 640px) 110vw, 135vw",
 };
 
 interface HeroScienceGraphicProps {