@lettercamp/cli 0.1.10 → 0.1.11

package/renderer/src/lib/font-fallbacks.js

@@ -193,4 +193,40 @@ export const fontFallbacks = {
             { "weight": 600, "local": ["Arial Bold", "Arial-BoldMT"], "sizeAdjust": "97.2956%", "ascentOverride": "101.1351%", "descentOverride": "32.4783%", "lineGapOverride": "0.0000%" },
             { "weight": 700, "local": ["Arial Bold", "Arial-BoldMT"], "sizeAdjust": "99.5874%", "ascentOverride": "98.8077%", "descentOverride": "31.7309%", "lineGapOverride": "0.0000%" },
         ] },
+    "Geist Mono": { generic: "monospace", faces: [
+            { "weight": 400, "local": ["Courier New", "CourierNewPSMT"], "sizeAdjust": "99.9837%", "ascentOverride": "100.5164%", "descentOverride": "29.5048%", "lineGapOverride": "0.0000%" },
+            { "weight": 500, "local": ["Courier New", "CourierNewPSMT"], "sizeAdjust": "99.9837%", "ascentOverride": "100.5164%", "descentOverride": "29.5048%", "lineGapOverride": "0.0000%" },
+            { "weight": 600, "local": ["Courier New Bold", "CourierNewPS-BoldMT"], "sizeAdjust": "99.9837%", "ascentOverride": "100.5164%", "descentOverride": "29.5048%", "lineGapOverride": "0.0000%" },
+            { "weight": 700, "local": ["Courier New Bold", "CourierNewPS-BoldMT"], "sizeAdjust": "99.9837%", "ascentOverride": "100.5164%", "descentOverride": "29.5048%", "lineGapOverride": "0.0000%" },
+        ] },
+    "JetBrains Mono": { generic: "monospace", faces: [
+            { "weight": 400, "local": ["Courier New", "CourierNewPSMT"], "sizeAdjust": "99.9837%", "ascentOverride": "102.0166%", "descentOverride": "30.0049%", "lineGapOverride": "0.0000%" },
+            { "weight": 500, "local": ["Courier New", "CourierNewPSMT"], "sizeAdjust": "99.9837%", "ascentOverride": "102.0166%", "descentOverride": "30.0049%", "lineGapOverride": "0.0000%" },
+            { "weight": 600, "local": ["Courier New Bold", "CourierNewPS-BoldMT"], "sizeAdjust": "99.9837%", "ascentOverride": "102.0166%", "descentOverride": "30.0049%", "lineGapOverride": "0.0000%" },
+            { "weight": 700, "local": ["Courier New Bold", "CourierNewPS-BoldMT"], "sizeAdjust": "99.9837%", "ascentOverride": "102.0166%", "descentOverride": "30.0049%", "lineGapOverride": "0.0000%" },
+        ] },
+    "Fira Code": { generic: "monospace", faces: [
+            { "weight": 400, "local": ["Courier New", "CourierNewPSMT"], "sizeAdjust": "99.9837%", "ascentOverride": "99.0161%", "descentOverride": "32.2052%", "lineGapOverride": "0.0000%" },
+            { "weight": 500, "local": ["Courier New", "CourierNewPSMT"], "sizeAdjust": "99.9837%", "ascentOverride": "99.0161%", "descentOverride": "32.2052%", "lineGapOverride": "0.0000%" },
+            { "weight": 600, "local": ["Courier New Bold", "CourierNewPS-BoldMT"], "sizeAdjust": "99.9837%", "ascentOverride": "99.0161%", "descentOverride": "32.2052%", "lineGapOverride": "0.0000%" },
+            { "weight": 700, "local": ["Courier New Bold", "CourierNewPS-BoldMT"], "sizeAdjust": "99.9837%", "ascentOverride": "99.0161%", "descentOverride": "32.2052%", "lineGapOverride": "0.0000%" },
+        ] },
+    "Roboto Mono": { generic: "monospace", faces: [
+            { "weight": 400, "local": ["Courier New", "CourierNewPSMT"], "sizeAdjust": "100.0000%", "ascentOverride": "104.7852%", "descentOverride": "27.0996%", "lineGapOverride": "0.0000%" },
+            { "weight": 500, "local": ["Courier New", "CourierNewPSMT"], "sizeAdjust": "100.0000%", "ascentOverride": "104.7852%", "descentOverride": "27.0996%", "lineGapOverride": "0.0000%" },
+            { "weight": 600, "local": ["Courier New Bold", "CourierNewPS-BoldMT"], "sizeAdjust": "100.0000%", "ascentOverride": "104.7852%", "descentOverride": "27.0996%", "lineGapOverride": "0.0000%" },
+            { "weight": 700, "local": ["Courier New Bold", "CourierNewPS-BoldMT"], "sizeAdjust": "100.0000%", "ascentOverride": "104.7852%", "descentOverride": "27.0996%", "lineGapOverride": "0.0000%" },
+        ] },
+    "IBM Plex Mono": { generic: "monospace", faces: [
+            { "weight": 400, "local": ["Courier New", "CourierNewPSMT"], "sizeAdjust": "99.9837%", "ascentOverride": "102.5167%", "descentOverride": "27.5045%", "lineGapOverride": "0.0000%" },
+            { "weight": 500, "local": ["Courier New", "CourierNewPSMT"], "sizeAdjust": "99.9837%", "ascentOverride": "102.5167%", "descentOverride": "27.5045%", "lineGapOverride": "0.0000%" },
+            { "weight": 600, "local": ["Courier New Bold", "CourierNewPS-BoldMT"], "sizeAdjust": "99.9837%", "ascentOverride": "102.5167%", "descentOverride": "27.5045%", "lineGapOverride": "0.0000%" },
+            { "weight": 700, "local": ["Courier New Bold", "CourierNewPS-BoldMT"], "sizeAdjust": "99.9837%", "ascentOverride": "102.5167%", "descentOverride": "27.5045%", "lineGapOverride": "0.0000%" },
+        ] },
+    "Source Code Pro": { generic: "monospace", faces: [
+            { "weight": 400, "local": ["Courier New", "CourierNewPSMT"], "sizeAdjust": "99.9837%", "ascentOverride": "98.4160%", "descentOverride": "27.3044%", "lineGapOverride": "0.0000%" },
+            { "weight": 500, "local": ["Courier New", "CourierNewPSMT"], "sizeAdjust": "99.9837%", "ascentOverride": "98.4160%", "descentOverride": "27.3044%", "lineGapOverride": "0.0000%" },
+            { "weight": 600, "local": ["Courier New Bold", "CourierNewPS-BoldMT"], "sizeAdjust": "99.9837%", "ascentOverride": "98.4160%", "descentOverride": "27.3044%", "lineGapOverride": "0.0000%" },
+            { "weight": 700, "local": ["Courier New Bold", "CourierNewPS-BoldMT"], "sizeAdjust": "99.9837%", "ascentOverride": "98.4160%", "descentOverride": "27.3044%", "lineGapOverride": "0.0000%" },
+        ] },
 };

package/renderer/src/lib/fonts.js

@@ -1,11 +1,14 @@
 // Generated from lettercamp/lib/font-resources.ts.
 import { fontFallbacks } from "./font-fallbacks.js";
-export function fontResources(typography = {}) {
+import { fontCatalog } from "./font-catalog.js";
+export function fontResources(typography = {}, headingWeight = 500) {
     const quote = (value) => '"' + Array.from(String(value), char => /[a-zA-Z0-9 -]/.test(char) ? char : '\\' + char.codePointAt(0).toString(16) + ' ').join('') + '"';
     const google = new Set();
+    const resolved = new Set();
+    const preloads = new Set();
     const custom = new Map();
     const faces = [];
-    const resolve = (input) => {
+    const resolve = (input, criticalWeight) => {
         const value = input && typeof input === "object" ? input : undefined;
         if (value && typeof value.url === 'string' && !(typeof value.google === 'string' && value.google.trim())) {
             try {
@@ -24,25 +27,45 @@ export function fontResources(typography = {}) {
             catch { /* Invalid custom URLs use the default family. */ }
         }
         const family = value && typeof value.google === 'string' && value.google.trim() ? value.google.trim() : 'Inter';
+        const catalog = Object.hasOwn(fontCatalog, family) ? fontCatalog[family] : undefined;
+        if (catalog) {
+            if (!resolved.has(family))
+                for (const face of catalog.faces) {
+                    faces.push('@font-face{font-family:' + quote(family) + ';src:url(' + quote(face.url) + ') format("woff2");font-weight:' + face.weight
+                        + ';font-style:normal;font-display:swap;unicode-range:' + face.unicodeRange + ';}');
+                }
+            // Prioritize only the title and body Latin files. Other subsets load on demand.
+            const distance = (weight) => {
+                const [min, max = min] = weight.split(' ').map(Number);
+                return Math.max(min - criticalWeight, criticalWeight - max, 0);
+            };
+            const critical = catalog.faces.filter(face => face.subset === 'latin').sort((a, b) => distance(a.weight) - distance(b.weight))[0];
+            if (critical)
+                preloads.add(critical.url);
+        }
+        else {
+            // Preserve support for existing CLI settings naming fonts outside our picker.
+            google.add(family);
+        }
         const fallback = Object.hasOwn(fontFallbacks, family) ? fontFallbacks[family] : undefined;
         if (fallback) {
             const alias = family + ' Fallback';
-            if (!google.has(family))
+            if (!resolved.has(family))
                 for (const face of fallback.faces) {
                     faces.push('@font-face{font-family:' + quote(alias) + ';src:' + face.local.map(name => 'local(' + quote(name) + ')').join(',')
                         + ';font-weight:' + face.weight + ';font-style:normal;size-adjust:' + face.sizeAdjust
                         + ';ascent-override:' + face.ascentOverride + ';descent-override:' + face.descentOverride + ';line-gap-override:' + face.lineGapOverride + ';}');
                 }
-            google.add(family);
+            resolved.add(family);
             return quote(family) + ', ' + quote(alias) + ', ' + fallback.generic;
         }
-        google.add(family);
+        resolved.add(family);
         return quote(family) + ', Arial, Helvetica, sans-serif';
     };
-    const headingFamily = resolve(typography.headingFont);
-    const bodyFamily = resolve(typography.bodyFont);
+    const headingFamily = resolve(typography.headingFont, headingWeight);
+    const bodyFamily = resolve(typography.bodyFont, 400);
     return {
-        headingFamily, bodyFamily, css: faces.join('\n'),
+        headingFamily, bodyFamily, css: faces.join('\n'), preloads: [...preloads],
         googleUrl: google.size ? 'https://fonts.googleapis.com/css2?' + [...google].map(family => 'family=' + encodeURIComponent(family) + ':wght@' + (Object.hasOwn(fontFallbacks, family) ? fontFallbacks[family].faces.map(face => face.weight).join(';') : '400;500;600;700')).join('&') + '&display=swap' : null,
     };
 }

package/renderer/src/lib/image-widths.ts

@@ -7,7 +7,4 @@ export const imageWidthStyles = `
 .publication-post .article-hero-image:not([data-image-width="regular"]):not([data-image-width="full"]) { width: min(100%, calc(var(--post-content-width) + 128px)); max-width: none; }
 .publication-post .article-hero-image[data-image-width="full"] { width: 100%; max-width: none; }
 .publication-post .article-hero-image[data-image-width="regular"] { width: min(100%, var(--cover-image-width, var(--post-content-width)), var(--post-content-width)); max-width: none; }
-.publication-post .article-hero:has(.article-hero-image:not([data-image-width="regular"])) { display: block; }
-.publication-post .article-hero:has(.article-hero-image:not([data-image-width="regular"])) .article-intro { max-width: var(--post-content-width); margin-inline: auto; }
-.publication-post .article-hero:has(.article-hero-image:not([data-image-width="regular"])) .article-hero-image { margin-top: 32px; }
 `;

package/renderer/src/lib/key-takeaways.ts

@@ -0,0 +1,25 @@
+// Generated from lettercamp/lib/key-takeaways.ts.
+// Shared by the page editor, draft preview, and published renderer.
+export const keyTakeawaysStyles = `
+[data-lettercamp-key-takeaways] {
+  box-sizing: border-box; margin-block: 24px; padding: 20px 24px;
+  border-radius: 8px; background: var(--site-surface, #fafafa); color: inherit;
+  font: inherit; overflow-wrap: anywhere;
+}
+[data-lettercamp-key-takeaways][data-lettercamp-key-takeaways] > :is(h1, h2, h3, h4, h5, h6) {
+  margin: 0 0 10px; padding: 0;
+}
+[data-lettercamp-key-takeaways][data-lettercamp-key-takeaways] :is(ul, ol) {
+  margin: 0; padding: 0 0 0 1.4em;
+}
+[data-lettercamp-key-takeaways][data-lettercamp-key-takeaways] li {
+  margin: 6px 0; padding: 0 0 0 .2em;
+}
+[data-lettercamp-key-takeaways][data-lettercamp-key-takeaways] p { margin: 0; padding: 0; min-height: 0; }
+[data-lettercamp-key-takeaways][data-lettercamp-key-takeaways] > p:first-child { margin-bottom: 10px; }
+[data-lettercamp-key-takeaways][data-lettercamp-key-takeaways] > :last-child,
+[data-lettercamp-key-takeaways][data-lettercamp-key-takeaways] > :last-child > li:last-child { margin-bottom: 0; }
+@media (max-width: 600px) {
+  [data-lettercamp-key-takeaways] { padding: 16px 18px; }
+}
+`;

package/renderer/src/lib/post-share.ts

@@ -31,6 +31,16 @@ export const postShareScript = `
   const ensureTrigger = () => {
     const byline = document.querySelector('.publication-post .byline');
     if (byline && !byline.querySelector('.post-share-button')) byline.insertAdjacentHTML('beforeend', triggerMarkup);
+    const intro = document.querySelector('.publication-post .article-intro');
+    if (!intro) return;
+    let row = intro.querySelector('.article-meta-row');
+    if (!row) {
+      row = document.createElement('div'); row.className = 'article-meta-row';
+      const category = intro.querySelector('.article-category');
+      if (category) row.append(category);
+      intro.prepend(row);
+    }
+    if (!row.querySelector('.post-share-button')) row.insertAdjacentHTML('beforeend', triggerMarkup);
   };
   const action = (tag, name, label, graphic) => '<' + tag + ' class="post-share-action" data-share="' + name + '"' + (tag === 'button' ? ' type="button"' : '') + '><span class="post-share-action-icon">' + graphic + '</span><span data-label>' + label + '</span></' + tag + '>';
   const external = (link, href) => {

package/renderer/src/lib/site-colors.ts

@@ -0,0 +1,42 @@
+// Generated from lettercamp/lib/site-colors.ts.
+// Shared by published sites and live previews. Keep this function self-contained:
+// the preview bridge embeds it in the publication iframe.
+export function siteColors(design?: { backgroundColor?: unknown; accentColor?: unknown }): Record<string, string> {
+  const [background, accent] = [design?.backgroundColor, design?.accentColor].map((value, index) =>
+    typeof value === "string" && /^#[0-9a-f]{6}$/i.test(value) ? value.toLowerCase() : index === 0 ? "#ffffff" : "");
+  const [text, accentText] = [background, accent || background].map(color => {
+    const linear = [1, 3, 5].map(offset => {
+      const channel = parseInt(color.slice(offset, offset + 2), 16) / 255;
+      return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+    });
+    const luminance = linear[0] * 0.2126 + linear[1] * 0.7152 + linear[2] * 0.0722;
+    return (luminance + 0.05) / 0.05 >= 1.05 / (luminance + 0.05) ? "#000000" : "#ffffff";
+  });
+  const base = [1, 3, 5].map(offset => parseInt(background.slice(offset, offset + 2), 16));
+  const target = text === "#000000" ? 0 : 255;
+  // Reference grays on white. Retain each shade's distance along the
+  // background-to-foreground scale; e.g. 250 preserves #fafafa on white.
+  const shades: Record<string, number> = {
+    "surface": 250,
+    "surface-hover": 245,
+    "surface-active": 238,
+    "border": 240,
+    "border-strong": 221,
+    "text-strong": 65,
+    "text-secondary": 111,
+    "text-muted": 134,
+    "text-faint": 180,
+  };
+  const colors: Record<string, string> = {
+    "color-scheme": target === 255 ? "dark" : "light",
+    "--site-background": background,
+    "--site-foreground": text,
+    "--site-accent": accent || "inherit",
+    "--site-accent-text": accent ? accentText : "inherit",
+    "--site-code-tint": target === 255 ? "45%" : "0%",
+  };
+  for (const [name, gray] of Object.entries(shades)) {
+    colors[`--site-${name}`] = "#" + base.map(channel => Math.round(channel + (target - channel) * (1 - gray / 255)).toString(16).padStart(2, "0")).join("");
+  }
+  return colors;
+}

package/renderer/src/lib/table-styles.ts

@@ -1,12 +1,12 @@
 // Generated from lettercamp/lib/table-styles.ts.
 // Shared by the editable table, safe preview, and published renderer.
 export const tableStyles = `
-[data-lettercamp-table] { position: relative; margin-block: 24px 32px; color: #303034; font: inherit; }
+[data-lettercamp-table] { position: relative; margin-block: 24px 32px; color: var(--site-text-strong, #303034); font: inherit; }
 [data-lettercamp-table] > table { width: 100%; border-collapse: collapse; table-layout: fixed; border-spacing: 0; font: inherit; color: inherit; }
-[data-lettercamp-table] > table > tbody > tr > :is(td, th) { position: relative; border: 1px solid #f0f0f0; padding: 0; min-width: 0; vertical-align: top; font: inherit; text-align: left; }
+[data-lettercamp-table] > table > tbody > tr > :is(td, th) { position: relative; border: 1px solid var(--site-border, #f0f0f0); padding: 0; min-width: 0; vertical-align: top; font: inherit; text-align: left; }
 [data-lettercamp-table] [data-table-content] { display: block; box-sizing: border-box; min-height: calc(1.8em + 16px); padding: 8px 12px; line-height: inherit; overflow-wrap: anywhere; white-space: pre-wrap; outline: none; }
 [data-lettercamp-table] [data-table-cell-height] [data-table-content] { height: var(--table-cell-height); min-height: 0; overflow: auto; }
 [data-lettercamp-table] :is(td, th) > p, [data-lettercamp-table] [data-table-content] > p { margin: 0; padding: 0; min-height: 0; }
-[data-lettercamp-table] [data-table-content] code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; padding: .18em .35em; background: #f3f3f3; border-radius: 3px; }
+[data-lettercamp-table] [data-table-content] code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; padding: .18em .35em; background: var(--site-surface-hover, #f3f3f3); border-radius: 3px; }
 [data-lettercamp-table] [data-table-content] a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
 `;

package/renderer/src/pages/[...slug].astro

@@ -35,9 +35,12 @@ const coverWidth = /^[0-9]+$/.test(String(frontmatter.coverWidth)) && Number(fro
     data-post-cover={postLayout.showCover === false ? 'hidden' : 'visible'} data-post-toc={postLayout.showTableOfContents === false ? 'hidden' : 'visible'}>
     <header class:list={['article-header', 'article-hero', { 'article-hero-with-image': coverImage }]}>
       <div class="article-intro">
+        <div class="article-meta-row">
         {category && <p class="article-category">
           <a href={categoryHref}>{category}</a>
         </p>}
+          <Fragment set:html={postShareButton} />
+        </div>
         <h1>{frontmatter.title ?? site.name}</h1>
         {frontmatter.description && <p class="description">{frontmatter.description}</p>}
         <div class="byline">

package/renderer/src/styles/post-share.css

@@ -1,56 +1,73 @@
 .byline:has(.post-share-button) { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
 .byline:has(.post-share-button) .post-byline { grid-column: 1; grid-row: 1; min-width: 0; }
 .byline > .post-share-button { grid-column: 2; grid-row: 1; justify-self: end; }
-.post-share-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; margin-left: auto; padding: 5px 11px; border: 0; border-radius: 999px; background: #f5f5f5; color: #555; font-size: 13px; line-height: 1.4; }
-.post-share-button:hover { background: #ededed; color: #111; }
+.article-meta-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
+.article-meta-row:not(:has(.article-category)) { display: none; }
+.article-meta-row .article-category { min-width: 0; margin: 0; }
+.article-meta-row > .post-share-button { display: none; }
+.post-share-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; margin-left: auto; padding: 5px 11px; border: 0; border-radius: 999px; background: var(--site-surface-hover); color: var(--site-text-strong); font-size: 13px; line-height: 1.4; }
+.post-share-button:hover { background: var(--site-surface-active); color: var(--site-foreground); }
 .post-share-button svg { width: 15px; height: 15px; }
 html:has(.post-share-dialog[open]) { overflow: hidden; }
-.post-share-dialog { position: fixed; width: min(380px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 16px; overflow: auto; overscroll-behavior: contain; border: 0; border-radius: 14px; background: var(--site-background, #fff); color: #222; box-shadow: 0 20px 80px #0003; font: 13px/1.5 var(--font-family); }
+.post-share-dialog { position: fixed; width: min(380px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 16px; overflow: auto; overscroll-behavior: contain; border: 0; border-radius: 14px; background: var(--site-background, #fff); color: var(--site-foreground); box-shadow: 0 20px 80px #0003; font: 13px/1.5 var(--font-family); }
 .post-share-dialog::backdrop { background: #0006; }
 .post-share-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
 .post-share-heading h2 { margin: 0; font: 600 15px/1.4 var(--font-family); letter-spacing: -.3px; }
-.post-share-close { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; margin: -4px -4px -4px 0; padding: 0; border: 0; background: transparent; color: #777; }
-.post-share-close:hover { color: #111; }
+.post-share-close { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; margin: -4px -4px -4px 0; padding: 0; border: 0; background: transparent; color: var(--site-text-secondary); }
+.post-share-close:hover { color: var(--site-foreground); }
 .post-share-close svg { width: 19px; height: 19px; }
-.post-share-preview { overflow: hidden; border: 1px solid #e5e5e5; border-radius: 8px; background: #f7f7f7; color: #222; font-family: Arial, Helvetica, sans-serif; }
+.post-share-preview { overflow: hidden; border: 1px solid var(--site-border); border-radius: 8px; background: var(--site-surface-hover); color: var(--site-foreground); font-family: Arial, Helvetica, sans-serif; }
 .post-share-image { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
 .post-share-preview-copy { padding: 9px 10px; }
-.post-share-domain { margin: 0 0 4px; color: #777; font-size: 10px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.post-share-domain { margin: 0 0 4px; color: var(--site-text-secondary); font-size: 10px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .post-share-preview h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font: 600 14px/1.3 Arial, Helvetica, sans-serif; letter-spacing: 0; text-wrap: auto; }
-.post-share-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 4px 0 0; color: #666; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
+.post-share-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 4px 0 0; color: var(--site-text-secondary); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
 .post-share-description:empty { display: none; }
 .post-share-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 22px; }
-.post-share-action { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 0; border: 0; background: transparent; color: #555; font-size: 11px; line-height: 1.4; text-decoration: none; }
-.post-share-action-icon { display: grid; place-items: center; width: 100%; height: 40px; border-radius: 10px; background: #00000005; }
-.post-share-action:hover, .post-share-action[aria-expanded='true'] { color: #111; }
-.post-share-action:hover .post-share-action-icon, .post-share-action[aria-expanded='true'] .post-share-action-icon { background: #0000000a; }
+.post-share-action { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--site-text-strong); font-size: 11px; line-height: 1.4; text-decoration: none; }
+.post-share-action-icon { display: grid; place-items: center; width: 100%; height: 40px; border-radius: 10px; background: var(--site-surface); }
+.post-share-action:hover, .post-share-action[aria-expanded='true'] { color: var(--site-foreground); }
+.post-share-action:hover .post-share-action-icon, .post-share-action[aria-expanded='true'] .post-share-action-icon { background: var(--site-surface-hover); }
 .post-share-action svg { width: 18px; height: 18px; }
-.post-share-menu { position: fixed; inset: auto; width: 184px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); margin: 0; padding: 6px; overflow: auto; overscroll-behavior: contain; border: 1px solid #eaeaea; border-radius: 10px; background: #fafafa; color: #444; box-shadow: 0 6px 24px #0002; font: 12px/1.4 var(--font-family); }
+.post-share-menu { position: fixed; inset: auto; width: 184px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); margin: 0; padding: 6px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--site-border); border-radius: 10px; background: var(--site-surface); color: var(--site-text-strong); box-shadow: 0 6px 24px #0002; font: 12px/1.4 var(--font-family); }
 .post-share-menu::backdrop { background: transparent; }
 .post-share-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 7px 9px; border: 0; border-radius: 6px; background: transparent; color: inherit; text-align: left; font: inherit; text-decoration: none; }
-.post-share-menu-item:is(:hover, :focus-visible) { background: #efefef; color: #111; outline: none; }
-.post-share-menu-item svg { width: 15px; height: 15px; color: #888; }
-.post-share-menu-item[data-share='native'] { margin-top: 4px; border-top: 1px solid #e8e8e8; border-radius: 0; }
-.post-share-summaries { margin-top: 14px; padding-top: 12px; border-top: 1px solid #0000000d; }
+.post-share-menu-item:is(:hover, :focus-visible) { background: var(--site-surface-active); color: var(--site-foreground); outline: none; }
+.post-share-menu-item svg { width: 15px; height: 15px; color: var(--site-text-muted); }
+.post-share-menu-item[data-share='native'] { margin-top: 4px; border-top: 1px solid var(--site-border); border-radius: 0; }
+.post-share-summaries { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--site-border); }
 .post-share-summaries h3 { margin: 0; font: 600 13px/1.5 var(--font-family); }
-.post-share-summaries > p { margin: 3px 0 9px; color: #777; font-size: 12px; }
+.post-share-summaries > p { margin: 3px 0 9px; color: var(--site-text-secondary); font-size: 12px; }
 .post-share-providers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
-.post-share-provider { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 7px 9px; border-radius: 7px; background: #00000005; font-size: 12px; text-decoration: none; }
-.post-share-provider:hover { background: #0000000a; }
-.post-share-provider svg { width: 13px; height: 13px; flex-shrink: 0; color: #888; }
-.post-share-status { margin: 12px 0 0; color: #666; font-size: 12px; text-align: center; }
+.post-share-provider { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 7px 9px; border-radius: 7px; background: var(--site-surface); font-size: 12px; text-decoration: none; }
+.post-share-provider:hover { background: var(--site-surface-hover); }
+.post-share-provider svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--site-text-muted); }
+.post-share-status { margin: 12px 0 0; color: var(--site-text-secondary); font-size: 12px; text-align: center; }
 .post-share-status:empty { display: none; }
 .post-share-copy-fallback { margin-top: 12px; }
-.post-share-copy-fallback label { display: block; margin-bottom: 4px; color: #666; font-size: 12px; }
-.post-share-copy-fallback input { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px; background: #fff; color: #333; font: inherit; }
-@media (max-width: 640px) {
-  .byline:has(.post-share-button) .post-byline { flex-wrap: wrap; gap: 6px 12px; overflow: visible; white-space: normal; }
-  .byline:has(.post-share-button) .post-authors { max-width: 100%; white-space: normal; }
+.post-share-copy-fallback label { display: block; margin-bottom: 4px; color: var(--site-text-secondary); font-size: 12px; }
+.post-share-copy-fallback input { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--site-border-strong); border-radius: 8px; background: var(--site-background); color: var(--site-text-strong); font: inherit; }
+@media (max-width: 600px) {
+  .article-meta-row, .article-meta-row:not(:has(.article-category)) { display: flex; }
+  .article-meta-row > .post-share-button { display: inline-flex; }
+  .byline:has(.post-share-button) { grid-template-columns: minmax(0, 1fr); }
+  .byline > .post-share-button { display: none; }
+  .byline .post-byline { flex-wrap: wrap; gap: 6px 16px; overflow: visible; white-space: normal; }
+  .byline .post-authors { order: -1; flex: 0 0 100%; min-width: 0; white-space: nowrap; }
 }
 @media (max-width: 400px) {
   .post-share-provider { padding: 7px; font-size: 11px; }
   .byline:has(.post-share-button) { column-gap: 10px; }
 }
+/* Split headers keep metadata above authors, with sharing centered beside both rows. */
+.publication-post[data-post-hero='split'] .byline { display: grid; grid-template-columns: max-content minmax(0, 1fr) auto; gap: 6px 16px; }
+.publication-post[data-post-hero='split'] .byline .post-byline { display: contents; }
+.publication-post[data-post-hero='split'] .byline .post-byline > :is(time, .reading-time) { grid-row: 1; }
+.publication-post[data-post-hero='split'] .byline > .post-share-button { display: inline-flex; grid-column: 3; grid-row: 1 / 3; align-self: center; }
+.publication-post[data-post-hero='split'] .byline .post-authors { grid-column: 1 / 3; grid-row: 2; min-width: 0; order: 0; }
+.publication-post[data-post-hero='split'] .byline .author-names { flex: 1; min-width: 0; white-space: normal; }
+.publication-post[data-post-hero='split'] .article-meta-row > .post-share-button { display: none; }
+.publication-post[data-post-hero='split'] .article-meta-row:not(:has(.article-category)) { display: none; }
 @media (prefers-reduced-motion: no-preference) {
   .post-share-dialog[open] { animation: post-share-enter 140ms ease-out; }
   @keyframes post-share-enter { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }