docs(readme): improve mobile and desktop banner readability

README.md

@@ -1,4 +1,6 @@
 <picture>
+  <source media="(max-width: 640px) and (prefers-color-scheme: dark)" srcset="docs/brand/opcore-hero-mobile-dark.png">
+  <source media="(max-width: 640px)" srcset="docs/brand/opcore-hero-mobile-light.png">
   <source media="(prefers-color-scheme: dark)" srcset="docs/brand/opcore-hero-dark.png">
   <img alt="Opcore: specific feedback for coding agents while they edit. Check the change and show the evidence." src="docs/brand/opcore-hero-light.png" width="100%">
 </picture>

docs/brand/README.md

@@ -11,6 +11,10 @@ handwritten headings and diagrams, yellow notes, and the company mascot.
 - `hero.css`: shared layout and theme tokens.
 - `opcore-hero-light.png` and `opcore-hero-dark.png`: 2560 × 800 exports
   from a 1280 × 400 canvas at 2× scale.
+- `opcore-hero-mobile-light.png` and `opcore-hero-mobile-dark.png`: 1024 × 1280
+  portrait exports from a 512 × 640 canvas at 2× scale. The same HTML sources use
+  the mobile rules in `hero.css`. The README selects these below 641px, before
+  the desktop sources. Larger text and a stacked layout replace the sticky note.
 - `assets/`: local fonts, font licenses, and the website mascot. Rendering needs
   no network requests.
 
@@ -40,16 +44,22 @@ const { pathToFileURL } = require('node:url');
       viewport: { width: 1280, height: 400 },
       deviceScaleFactor: 2,
     });
-    for (const theme of ['light', 'dark']) {
-      const stem = resolve(`docs/brand/opcore-hero-${theme}`);
-      await page.goto(pathToFileURL(`${stem}.html`).href);
-      await page.evaluate(() => document.fonts.ready);
-      const ready = await page.evaluate(() =>
-        [...document.fonts].every(font => font.status === 'loaded') &&
-        [...document.images].every(image => image.complete && image.naturalWidth > 0)
-      );
-      if (!ready) throw new Error('Banner assets failed to load');
-      await page.locator('.hero').screenshot({ path: `${stem}.png` });
+    for (const layout of ['desktop', 'mobile']) {
+      await page.setViewportSize(layout === 'mobile'
+        ? { width: 512, height: 640 }
+        : { width: 1280, height: 400 });
+      for (const theme of ['light', 'dark']) {
+        const stem = resolve(`docs/brand/opcore-hero-${theme}`);
+        await page.goto(pathToFileURL(`${stem}.html`).href);
+        await page.evaluate(() => document.fonts.ready);
+        const ready = await page.evaluate(() =>
+          [...document.fonts].every(font => font.status === 'loaded') &&
+          [...document.images].every(image => image.complete && image.naturalWidth > 0)
+        );
+        if (!ready) throw new Error('Banner assets failed to load');
+        const output = resolve(`docs/brand/opcore-hero-${layout === 'mobile' ? 'mobile-' : ''}${theme}.png`);
+        await page.locator('.hero').screenshot({ path: output });
+      }
     }
   } finally {
     await browser.close();
@@ -58,7 +68,8 @@ const { pathToFileURL } = require('node:url');
 JS
 ```
 
-Review both exports at full resolution and README display width before committing.
+Review all four exports at full resolution and their intended README display widths
+before committing, including 390px in both themes.
 
 ## Asset provenance
 

docs/brand/hero.css

@@ -6,18 +6,28 @@
 html, body { margin: 0; width: 1280px; height: 400px; }
 .hero { position: relative; width: 1280px; height: 400px; overflow: hidden; background: var(--paper); color: var(--ink); font-family: "Reenie Beanie", cursive; }
 .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
-.brand { position: absolute; top: 28px; left: 52px; display: flex; align-items: center; gap: 13px; font: 600 15px Fraunces, serif; letter-spacing: 1.3px; }
+.brand { position: absolute; top: 28px; left: 52px; display: flex; align-items: center; gap: 13px; font: 600 16px Fraunces, serif; letter-spacing: 1.3px; }
 .brand img { width: 33px; height: 36px; object-fit: contain; }
 [data-theme="dark"] .brand img { filter: invert(1); }
-h1 { position: absolute; margin: 0; left: 51px; top: 87px; font-size: 112px; font-weight: 400; line-height: 1; letter-spacing: -2px; }
-.description { position: absolute; top: 206px; left: 56px; margin: 0; font-size: 37px; line-height: 1.12; }
+h1 { position: absolute; margin: 0; left: 51px; top: 87px; font-size: 120px; font-weight: 400; line-height: 1; letter-spacing: -2px; }
+.description { position: absolute; top: 206px; left: 56px; margin: 0; font-size: 44px; line-height: 1.12; }
 .emphasis { position: relative; display: inline-block; }
 .emphasis::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 6px; border-bottom: 2px solid var(--accent); border-radius: 50%; transform: rotate(-1deg); }
-.url { position: absolute; bottom: 29px; left: 56px; margin: 0; color: var(--muted); font: 13px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .4px; }
-.note { position: absolute; top: 40px; right: 72px; width: 242px; height: 116px; padding: 18px 23px; margin: 0; background: linear-gradient(153deg,#fbef99 0%,#f5e777 65%,#f0de68 100%); box-shadow: 2px 8px 12px #00000020; transform: rotate(3deg); color: #26221c; font-size: 30px; line-height: 1.02; }
+.url { position: absolute; bottom: 29px; left: 56px; margin: 0; color: var(--muted); font: 16px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .4px; }
+.note { position: absolute; top: 40px; right: 72px; width: 278px; height: 124px; padding: 18px 23px; margin: 0; background: linear-gradient(153deg,#fbef99 0%,#f5e777 65%,#f0de68 100%); box-shadow: 2px 8px 12px #00000020; transform: rotate(3deg); color: #26221c; font-size: 34px; line-height: 1.02; }
 .note .emphasis::after { border-color: #c2240c; }
 .diagram { position: absolute; top: 184px; right: 47px; width: 444px; height: 176px; overflow: visible; }
-.diagram text { font-family: "Reenie Beanie", cursive; font-size: 27px; fill: var(--ink); text-anchor: middle; }
+.diagram text { font-family: "Reenie Beanie", cursive; font-size: 31px; fill: var(--ink); text-anchor: middle; }
 .diagram .stroke { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
 .diagram .retry { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 5 5; }
-.diagram .label { fill: var(--accent); font-size: 23px; }
+.diagram .label { fill: var(--accent); font-size: 27px; }
+
+@media (max-width: 640px) {
+  html, body, .hero { width: 512px; height: 640px; }
+  .brand { top: 24px; left: 28px; gap: 10px; font-size: 14px; letter-spacing: .4px; }
+  h1 { top: 80px; left: 27px; font-size: 126px; }
+  .description { top: 218px; left: 28px; width: 456px; font-size: 52px; line-height: 1; }
+  .note { display: none; }
+  .diagram { top: 398px; right: 28px; width: 456px; height: auto; }
+  .url { bottom: 22px; left: 28px; font-size: 21px; }
+}

docs/brand/opcore-hero-dark.html

@@ -2,7 +2,7 @@
 <html lang="en" data-theme="dark">
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=1280">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Opcore · The Open Engine</title>
   <link rel="stylesheet" href="hero.css">
 </head>
@@ -13,12 +13,12 @@ <h1>opcore</h1>
     <p class="description">specific feedback for coding agents,<br>while they <span class="emphasis">edit.</span></p>
     <p class="note">check the change.<br><span class="emphasis">show the evidence.</span></p>
     <svg class="diagram" viewBox="0 0 444 176" role="img" aria-label="An agent edits, Opcore checks the change and reports findings, and the agent repairs the code.">
-<text x="228" y="20" style="font-size:22px">opcore</text>
+<text x="228" y="20" style="font-size:26px">opcore</text>
 <g class="stroke">
-<path d="M12 38 L115 37 L116 97 L13 98 Z M171 36 L285 37 L284 98 L170 97 Z M335 39 L433 38 L432 96 L334 97 Z"/>
-<path d="M116 67 Q139 64 167 67 M160 62 L168 67 L160 72 M286 67 Q307 69 331 67 M324 62 L332 67 L324 72"/>
+<path d="M12 38 L115 37 L116 97 L13 98 Z M171 36 L285 37 L284 98 L170 97 Z M323 39 L439 38 L438 96 L322 97 Z"/>
+<path d="M116 67 Q139 64 167 67 M160 62 L168 67 L160 72 M286 67 Q301 69 319 67 M312 62 L320 67 L312 72"/>
 </g>
-<text x="64" y="77">edit</text><text x="228" y="77">check</text><text x="384" y="77">feedback</text>
+<text x="64" y="77">edit</text><text x="228" y="77">check</text><text x="381" y="77">feedback</text>
 <path class="retry" d="M384 99 L383 147 L63 146 L64 103 M58 110 L64 102 L70 110"/>
 <text class="label" x="224" y="137">repair what was found</text>
 </svg>

docs/brand/opcore-hero-light.html

@@ -2,7 +2,7 @@
 <html lang="en" data-theme="light">
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=1280">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Opcore · The Open Engine</title>
   <link rel="stylesheet" href="hero.css">
 </head>
@@ -13,12 +13,12 @@ <h1>opcore</h1>
     <p class="description">specific feedback for coding agents,<br>while they <span class="emphasis">edit.</span></p>
     <p class="note">check the change.<br><span class="emphasis">show the evidence.</span></p>
     <svg class="diagram" viewBox="0 0 444 176" role="img" aria-label="An agent edits, Opcore checks the change and reports findings, and the agent repairs the code.">
-<text x="228" y="20" style="font-size:22px">opcore</text>
+<text x="228" y="20" style="font-size:26px">opcore</text>
 <g class="stroke">
-<path d="M12 38 L115 37 L116 97 L13 98 Z M171 36 L285 37 L284 98 L170 97 Z M335 39 L433 38 L432 96 L334 97 Z"/>
-<path d="M116 67 Q139 64 167 67 M160 62 L168 67 L160 72 M286 67 Q307 69 331 67 M324 62 L332 67 L324 72"/>
+<path d="M12 38 L115 37 L116 97 L13 98 Z M171 36 L285 37 L284 98 L170 97 Z M323 39 L439 38 L438 96 L322 97 Z"/>
+<path d="M116 67 Q139 64 167 67 M160 62 L168 67 L160 72 M286 67 Q301 69 319 67 M312 62 L320 67 L312 72"/>
 </g>
-<text x="64" y="77">edit</text><text x="228" y="77">check</text><text x="384" y="77">feedback</text>
+<text x="64" y="77">edit</text><text x="228" y="77">check</text><text x="381" y="77">feedback</text>
 <path class="retry" d="M384 99 L383 147 L63 146 L64 103 M58 110 L64 102 L70 110"/>
 <text class="label" x="224" y="137">repair what was found</text>
 </svg>