サーモン色の新聞用紙に刷る経済面

// ═══ Postext Cookbook · Nº 134 · A business section on salmon newsprint ═══════════════
// https://postext.dev/en/cookbook/business-section-on-salmon
// Code: MIT · Text: original (CC BY 4.0) · Pictures: generated (CC BY 4.0)
// Fonts: Source Serif 4, Playfair Display, Archivo Narrow (SIL OFL 1.1) · Needs postext ≥ 1.18.0
//
// An eight-page Berliner daily: four news pages on grey-white newsprint in five columns, then
// the Business section on salmon paper in six, with its own flag and accent.
// One heading style carries the change; a :::paper run gives Folio the salmon stock.
import {
  buildDocument, renderPageToCanvas, clearMeasurementCache, registerResourceImage,
} from 'https://esm.sh/postext';

const LANG = 'en'; // @lang: the language of the sample document ('en' | 'es')
const RECIPE = 'business-section-on-salmon';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: newsprint, ink and a news red; the Business section swaps three of them
const palette = {
  ink: '#16181b', // text and heavy rules
  paper: '#f6f4ef', // the page: grey-white newsprint (salmon in Business)
  accent: '#b3261e', // news red: flags, kickers, chart marks (petrol in Business)
  tint: '#e8e4da', // box fills (a deeper salmon in Business)
  rule: '#9d9a93', // hairlines
  muted: '#5c5954', // bylines, the folio line, credits
  salmon: '#f2d3c0', // the business stock, and the teaser patches on page 1
  petrol: '#0f4c5c', // the business accent
};
const col = (id) => ({ hex: palette[id], model: 'hex', paletteId: id });
const colorPalette = [
  ...Object.entries(palette).map(([id, hex]) => ({ id, name: id, value: { hex, model: 'hex' } })),
  { id: 'main-color', name: 'ink (defaults)', value: { hex: palette.ink, model: 'hex' } },
];
// #endregion
const PAGE = { width: 315, height: 470 }; // mm: the 'berliner' preset
const M = { top: 19, bottom: 14, side: 12 }; // mm: narrow newspaper margins, not mirrored
const WIDE = PAGE.width - 2 * M.side; // the text block's width
const LEAD = 11.4; // pt: the body leading, the same in both sections so the grid holds
const at = (to, edge, x = 0, y = 0) => ({ anchor: { to, edge }, offset: { x: mm(x), y: mm(y) } });
const text = (id, content, look, placement) => ({ kind: 'text', id, content, align: 'left',
  overflow: 'wrap', color: col('ink'), ...look, placement }); // (gotcha: overflow-ellipsis-default)
const sans = (size, weight = 400, look = {}) => ({ fontFamily: 'Archivo Narrow',
  fontSize: pt(size), fontWeight: weight, ...look });
const caps = (size, weight, colour = 'ink') => sans(size, weight, { color: col(colour),
  textTransform: 'uppercase', letterSpacing: pt(size * 0.16) });
const rule = (id, weight, placement) => ({ kind: 'rule', id, thickness: pt(weight),
  color: col('ink'), placement: { ...placement, size: { width: 'fill' } } });
const box = (id, style, placement, size) => ({ kind: 'box', id, style, placement: { ...placement,
  size } }); // an empty box a whole number of grid lines deep sets an opener's depth:
const depth = (lines) => box('depth', {}, at('container', 'top-left'), { width: 'fill',
  height: pt(lines * LEAD) });
const pad = (y, x) => ({ top: mm(y), right: mm(x), bottom: mm(y), left: mm(x) });
const patch = (fill, padding = pad(1.5, 3)) => ({ backgroundColor: col(fill), padding });

// #region nameplate: page 1's H1 is the paper's name, between the ears and the date line
const nameplate = { enabled: true, slot: { elements: [
  depth(13),
  rule('foot', 0.5, at('#depth', 'align-bottom', 0, -2)),
  ...[['left', '{attr.issue}'], ['center', '{publishDate}'], ['right', '{attr.price}']].map(
    ([align, content]) => text(`date-${align}`, content, { ...caps(8, 600), align },
      { ...at('#foot', 'above', 0, -1.6), size: { width: 'fill' } })),
  rule('thin', 0.5, at('#date-left', 'above', 0, -1.8)),
  rule('heavy', 3, at('#thin', 'above', 0, -0.8)),
  text('name', '{titleText}', { fontFamily: 'Playfair Display', fontSize: pt(76), fontWeight: 900,
    lineHeight: 1, align: 'center' }, { ...at('#heavy', 'above', 0, -3), size: { width: 'fill' } }),
  text('weather', 'Weather · {attr.weather}', { ...caps(8, 700), box: patch('tint') },
    at('container', 'top-left')),
  // The right ear points to the salmon pages, on a patch of the same colour.
  text('ear', 'Business · the salmon pages, 5–8', { ...caps(8, 700), box: patch('salmon') },
    at('container', 'top-right')),
] } };
// #endregion

// #region flags: an inside page opens with a flag; the folio line runs above it
const flagParts = [
  depth(3),
  rule('bar', 3, at('#depth', 'align-bottom', 0, -1.4)),
  text('flag', '{titleText}', { ...caps(12, 700, 'paper'), box: patch('accent', pad(1.3, 3.5)) },
    at('#bar', 'above')),
];
const FOLIO = 9; // mm from the top edge
const folioLine = (parity, side, s) => [ // s: +1 on a verso (folio on the left), −1 on a recto
  text(`n-${parity}`, '{pageNumber}', { ...sans(11, 700), align: side },
    at('page', `top-${side}`, s * M.side, FOLIO)),
  text(`t-${parity}`, '{title} · {publishDate}', { ...caps(7.5, 600, 'muted'), align: side },
    at(`#n-${parity}`, s > 0 ? 'right-of' : 'left-of', s * 3, 1)),
  text(`c-${parity}`, '{chapterTitle}', { ...caps(7.5, 700, 'accent'),
    align: s > 0 ? 'right' : 'left' }, at('page', `top-${s > 0 ? 'right' : 'left'}`,
    -s * M.side, FOLIO + 1)),
].map((element) => ({ ...element, parity }));
const header = { elements: [...folioLine('even', 'left', 1), ...folioLine('odd', 'right', -1),
  { kind: 'rule', id: 'folio-rule', thickness: pt(0.5), color: col('ink'), placement: {
    ...at('page', 'top-left', M.side, FOLIO + 5), size: { width: mm(WIDE) } } }] };
// #endregion

// #region answer: one heading style turns a page into a Business page
// page.backgroundColor links to 'paper', so the section's palette, which turns 'paper' salmon,
// repaints every page of the section: the opener and the pages its copy runs on to.
const business = {
  id: 'business',
  advancedDesign: { enabled: true, slot: { elements: flagParts } },
  // The swap: the page, flags, kickers, the folio line, chart marks and table heads follow.
  palette: { paper: palette.salmon, accent: palette.petrol, tint: '#e6bfa8' },
  // Six narrower columns, ruled as the news pages are.
  layout: { layoutType: 'multiple', columnCount: 6, gutterWidth: mm(4) },
  bodyStyle: { fontSize: pt(8.8), lineHeight: pt(LEAD) },
};
// The section front: the same style, with a bigger flag over the market close strip.
const front = () => ({ ...business, id: 'business-front', advancedDesign: { enabled: true, slot: {
  elements: [depth(10),
    text('title', 'Business', { fontFamily: 'Playfair Display', fontSize: pt(58), fontWeight: 900,
      lineHeight: 1, color: col('accent') }, at('container', 'top-left', 0, -1)),
    text('tag', 'Companies · Markets · Money', caps(9, 700, 'accent'),
      at('#title', 'right-of', 5, 9)),
    rule('top', 3, at('#title', 'below', 0, 2)),
    ...STRIP().flatMap(([name, value, change], i) => [ // the day's close, from the market data
      text(`s${i}`, name, caps(7, 700, 'muted'), at('#top', 'below', (i * WIDE) / 6, 1.8)),
      text(`v${i}`, value, sans(13, 700), at(`#s${i}`, 'below', 0, 0.6)),
      text(`c${i}`, change, sans(9.5, 600, { color: col(change[0] === '+' ? 'accent' : 'muted') }),
        at(`#v${i}`, 'right-of', 1.6, 1))]),
    rule('under', 0.5, at('#depth', 'align-bottom', 0, -1.4))] } } });
// hook-up: headingStyles lists both, and the Markdown wraps pages 5–8 in
//   :::paper{type="newsprint" shade="#faede6"}   ← the stock Folio prints them on
//   # Business {style="business-front"}  …  # Markets {style="business"}  …  :::
// #endregion

// #region boxes: headlines across the page, story breaks, briefs, panels and adverts
const none = pad(0, 0);
const banner = { id: 'banner', backgroundEnabled: false, padding: none,
  titleStyle: { ...caps(8.5, 700, 'accent'), gap: mm(1.2) }, // the kicker
  marginTop: pt(0), marginBottom: pt(LEAD / 2),
  body: { fontFamily: 'Source Serif 4', fontSize: pt(13), lineHeight: pt(16.5), textAlign: 'left',
    firstLineIndent: pt(0) } };
const story = { ...banner, id: 'story', marginTop: pt(LEAD), padding: { ...none, top: mm(2.5) },
  stripe: { enabled: true, side: 'top', width: pt(1), color: col('ink') } };
const boxBody = { fontFamily: 'Archivo Narrow', fontSize: pt(9.5), lineHeight: pt(LEAD),
  textAlign: 'left', firstLineIndent: pt(0), paragraphSpacing: true, boldColor: col('accent') };
const briefs = { id: 'briefs', background: col('tint'), padding: pad(2.8, 3),
  titleStyle: { ...caps(9, 700, 'accent'), gap: mm(1.5) }, body: boxBody };
const teaser = { ...briefs, id: 'teaser', background: col('salmon'), columnGap: mm(4.5),
  body: { ...boxBody, fontSize: pt(10.5), lineHeight: pt(13.5) } };
const panel = { ...story, id: 'panel', marginTop: pt(0), titleStyle: briefs.titleStyle,
  stripe: { ...story.stripe, width: pt(2.5), color: col('accent') },
  body: { ...boxBody, fontFamily: 'Source Serif 4' } };
const dataBox = { ...story, id: 'data', marginTop: pt(0), columnGap: mm(4.5) };
const ad = { id: 'ad', backgroundEnabled: false, marginTop: pt(LEAD),
  border: { enabled: true, color: col('ink'), width: pt(0.75) },
  padding: { ...pad(6, 6), top: mm(3) },
  titleStyle: { ...caps(6.5, 600, 'muted'), gap: mm(4) },
  body: { ...boxBody, fontSize: pt(14), lineHeight: pt(18), boldColor: col('ink') } };
const pullQuote = { ...story, id: 'quote', columns: 2, marginTop: pt(0),
  body: { ...banner.body, fontFamily: 'Playfair Display', fontSize: pt(19), lineHeight: pt(23),
    italic: true } }; // a pull quote, floated across two columns
const headline = (id, size, look = {}) => ({ id, fontSize: pt(size), lineHeight: pt(size * 1.04),
  marginBottom: pt(size * 0.2), ...look });
// #endregion

const config = () => ({ // a factory: the engine caches resolved configs per object
  locale: 'en-gb', colorPalette, resourceTypes,
  page: { sizePreset: 'berliner', dpi: 150, backgroundColor: col('paper'),
    margins: { top: mm(M.top), bottom: mm(M.bottom), left: mm(M.side), right: mm(M.side) } },
  layout: { layoutType: 'multiple', columnCount: 5, gutterWidth: mm(4.5),
    columnRule: { enabled: true, color: col('rule'), lineWidth: pt(0.5) } },
  bodyText: { fontFamily: 'Source Serif 4', fontSize: pt(9.4), lineHeight: pt(LEAD),
    color: col('ink'), boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('muted'),
    textAlign: 'justify', firstLineIndent: mm(3.5), indentAfterHeading: false,
    hyphenation: { enabled: true }, optimalLineBreaking: true, maxJustifyTracking: 20,
    avoidWidows: true, avoidOrphans: true },
  headings: { fontFamily: 'Playfair Display', fontWeight: 700, color: col('ink'),
    marginBottom: pt(0), levels: [
      // Restated (gotcha: headings-drop-h1-break): every page opens with its own flag.
      { level: 1, span: 'page', breakBefore: { enabled: true, parity: 'any' },
        advancedDesign: { enabled: true, slot: { elements: flagParts } } },
      { level: 2, fontSize: pt(17), lineHeight: pt(19), marginTop: pt(LEAD) },
    ] },
  headingStyles: [
    { id: 'front', advancedDesign: nameplate, header: { elements: [] } }, // no folio line
    business, front(),
    headline('lead', 50, { fontWeight: 900 }), headline('wide', 34), headline('second', 22),
    ...[['ad', 60], ['ad-big', 80]].map(([id, size]) => headline(id, size, { fontWeight: 900,
      color: col('accent'), marginBottom: pt(4) })),
  ],
  calloutStyles: [banner, story, briefs, teaser, panel, dataBox, ad, pullQuote],
  paragraphStyles: [
    { id: 'byline', fontFamily: 'Archivo Narrow', fontSize: pt(8.5), textAlign: 'left',
      firstLineIndent: pt(0), color: col('muted') },
    { id: 'flush', firstLineIndent: pt(0) },
    { id: 'jump', fontFamily: 'Archivo Narrow', fontSize: pt(8.5), textAlign: 'right' },
    { id: 'kicker', ...sans(8.5, 700, { color: col('accent') }), textAlign: 'left',
      firstLineIndent: pt(0) },
    { id: 'imprint', fontFamily: 'Archivo Narrow', fontSize: pt(7.2), lineHeight: pt(9.5),
      textAlign: 'left', firstLineIndent: pt(0), color: col('muted'), marginTop: pt(LEAD / 2) },
  ],
  captionStyle: { fontFamily: 'Archivo Narrow', fontSize: pt(8.5), gap: mm(1.6),
    labelColor: col('accent'), note: { fontSize: pt(7), color: col('muted') } },
  tableStyle: { rules: 'horizontal', borderColor: col('rule'), borderWidth: pt(0.5),
    headerBackground: col('ink'), headerColor: col('paper'), headerFontFamily: 'Archivo Narrow',
    headerFontSize: pt(8), bodyFontFamily: 'Archivo Narrow', bodyFontSize: pt(8.5),
    bodyColor: col('ink'), cellPadding: mm(1) },
  tableStyles: [{ id: 'prices', headerBackground: col('accent'), headerFontSize: pt(7),
    bodyFontSize: pt(7), cellPadding: mm(0.45) }],
  header, footer: { elements: [] },
  folio: { paper: { type: 'newsprint', grammage: 45, shade: { hex: '#fbfaf8', model: 'hex' } },
    binding: { type: 'folded', cover: 'pages' }, surface: { type: 'oak' },
    lighting: { environment: 'overcast' } },
});

// ─── 2 · Content ────────────────────────────────────────────────────────────
// #region art: the market data and the drawings, every figure from one source
function mulberry32(seed) { // a seeded PRNG: the same prices on every run
  return () => {
    seed = (seed + 0x6d2b79f5) | 0;
    let r = Math.imul(seed ^ (seed >>> 15), 1 | seed);
    r = (r + Math.imul(r ^ (r >>> 7), 61 | r)) ^ r;
    return ((r ^ (r >>> 14)) >>> 0) / 4294967296;
  };
}
const sign = (n, d = 1) => `${n < 0 ? '−' : '+'}${Math.abs(n).toFixed(d)}`;
// A table: its first `words` columns are text, flush left; the figures sit flush right.
const table = (widths, heads, rows, words = 1) => ({ headerRowCount: 1, columnWidths: widths,
  rows: [heads, ...rows].map((row, r) => row.map((c, i) => ({ content: String(c),
    align: i < words ? 'left' : 'right', ...(r ? {} : { isHeader: true }) }))) });
const INDICES = [['MX 40', '8,412.6', 66.8, 0.80, 14.1],
  ['MX All-Share', '4,516.2', 27.0, 0.60, 11.8],
  ['MX Small Cap', '6,904.3', -12.4, -0.18, 7.2], ['Europe 350', '2,118.7', 5.9, 0.28, 6.0],
  ['North America 500', '6,702.4', -8.1, -0.12, 9.4],
  ['Asia-Pacific 200', '3,281.9', 14.6, 0.45, 4.8],
  ['Nordic 120', '1,604.2', 7.3, 0.46, 8.1], ['Emerging 100', '1,148.2', 3.1, 0.27, 3.9],
  ['World 1000', '3,902.6', 4.4, 0.11, 7.7], ['Latin America 80', '2,416.0', -9.6, -0.40, 2.2],
  ['Gulf 60', '1,873.5', 6.2, 0.33, 5.1], ['MX Mid 100', '9,127.4', 22.9, 0.25, 9.8],
  ['MX Dividend 30', '3,640.1', 12.6, 0.35, 10.4]];
const CURRENCIES = [['US dollar', '1.3218', -0.20], ['Euro', '1.1634', 0.10],
  ['Japanese yen', '197.42', 0.31], ['Swiss franc', '1.1281', -0.05],
  ['Norwegian krone', '14.212', 0.22], ['Swedish krona', '14.508', 0.12],
  ['Canadian dollar', '1.8215', -0.14], ['Australian dollar', '2.0127', 0.08],
  ['Danish krone', '8.6812', 0.09], ['Polish zloty', '4.9873', 0.18],
  ['Indian rupee', '111.06', -0.25],
  ['Chinese yuan', '9.4127', -0.11], ['Hong Kong dollar', '10.281', -0.19]];
const COMMODITIES = [['Crude oil, $/barrel', '71.40', 1.10],
  ['Natural gas, p/therm', '84.60', 2.30], ['Gold, $/oz', '2,688', -0.40],
  ['Silver, $/oz', '31.42', -0.70], ['Copper, $/tonne', '9,812', 0.60],
  ['Aluminium, $/tonne', '2,604', 0.20], ['Wheat, £/tonne', '182.50', -0.30],
  ['Cocoa, $/tonne', '6,212', 1.80], ['Coffee, $/tonne', '4,890', -0.90],
  ['Sugar, $/tonne', '512.4', 0.40],
  ['Salmon, NOK/kg', '78.20', -1.20], ['Cotton, c/lb', '71.85', 0.15],
  ['Zinc, $/tonne', '2,884', 0.70]];
// Page 5's strip reads the rows page 6's tables print: one source for both.
const quote = (name, [, value, ...rest], pct = rest.at(-1)) => [name, value, `${sign(pct, 2)}%`];
const STRIP = () => [quote('MX 40', INDICES[0], INDICES[0][3]),
  quote('MX All-Share', INDICES[1], INDICES[1][3]), quote('£ / $', CURRENCIES[0]),
  quote('£ / €', CURRENCIES[1]), quote('Crude oil $', COMMODITIES[0]),
  quote('Gold $', COMMODITIES[2])];
const FORECAST = [['Tue', 'Gales easing, showers', '13°', '8°', 'W 40'],
  ['Wed', 'Bright and breezy', '14°', '7°', 'W 25'],
  ['Thu', 'Cloudy, rain later', '12°', '9°', 'SW 30'],
  ['Fri', 'Rain clearing', '13°', '6°', 'NW 22'], ['Sat', 'Sunny spells', '14°', '5°', 'N 12']];
const TIDES = [['Tue', '10.51', '5.9', '23.14', '6.1'], ['Wed', '11.32', '5.6', '23.55', '5.8'],
  ['Thu', '—', '—', '12.14', '5.4'], ['Fri', '0.37', '5.5', '12.58', '5.1'],
  ['Sat', '1.22', '5.1', '13.45', '4.8']];
const PREFIX = ['Ardley', 'Brack', 'Calder', 'Carrow', 'Wynd', 'Corran', 'Dunmere', 'Fairlie',
  'Fenner', 'Haddow', 'Holm', 'Holmside', 'Kelby', 'Quay', 'Lusk', 'Marrow', 'Orvane', 'Pellow',
  'Rennie', 'Skerra', 'Strand', 'Tessary', 'Wendholm'];
const SECTORS = [['Banks', ['Bank', 'Cap', 'Svgs', 'Trust', 'Fin']],
  ['Insurance', ['Ins', 'Life', 'Re', 'Assur']], ['Shipping', ['Lines', 'Freight', 'Shpg', 'Tugs',
    'Ports']], ['Food & drink', ['Foods', 'Bakers', 'Brew', 'Dairies', 'Fish']],
  ['Retail', ['Stores', 'Home', 'Outfit', 'Retail']], ['Engineering', ['Eng', 'Pumps', 'Cables',
    'Castings', 'Marine']], ['Energy', ['Energy', 'Power', 'Wind', 'Water']],
  ['Property', ['Ests', 'Homes', 'Land', 'Props']], ['Technology', ['Soft', 'Data', 'Sys',
    'Digital']], ['Health', ['Pharma', 'Care', 'Diag', 'Med']]]; // listing abbreviations
function pricesTable(i, rows) { // one sector of the share prices, seeded
  const rand = mulberry32(2026 + i);
  const names = new Set();
  while (names.size < rows) {
    const [a, b] = [PREFIX, SECTORS[i][1]].map((list) => list[Math.floor(rand() * list.length)]);
    names.add(`${a} ${b}`);
  }
  const fmt = (v) => Math.round(v).toLocaleString('en-GB');
  return table([3.6, 1.2, 1, 1.2, 1.2], [SECTORS[i][0], 'Price', '+/−', 'High', 'Low'],
    [...names].sort().map((name) => {
      const price = 40 + rand() ** 2 * 2400;
      return [name, fmt(price), sign(price * (rand() - 0.47) * 0.05, price < 200 ? 1 : 0),
        fmt(price * (1.05 + rand() * 0.3)), fmt(price * (0.7 + rand() * 0.25))];
    }));
}
// Every table on pages 3, 6, 7 and 8: [model, caption, credit note].
const TABLES = {
  budget: [table([3, 1.2, 1.2, 1], ['Service, £m', '2026/27', '2027/28', 'Change'],
    [['Adult social care', '412.3', '426.9', '+14.6'], ['Children’s services', '236.8', '241.0',
      '+4.2'], ['Housing', '39.5', '41.2', '+1.7'], ['Waste and recycling', '47.2', '47.9', '+0.7'],
    ['Libraries and culture', '21.6', '21.6', '0.0'],
    ['Roads and transport', '88.4', '84.9', '−3.5'],
    ['Public health', '38.2', '38.9', '+0.7'], ['Planning', '24.1', '22.0', '−2.1'],
    ['Everything else', '134.3', '115.6', '−18.7'], ['**Total**', '**1,042.4**', '**1,040.0**',
      '**−2.4**']]), '**Where the money goes**', 'Source: Marrowick City Council.'],
  forecast: [table([0.8, 3, 0.8, 0.8, 1], ['Day', 'Outlook', 'High', 'Low', 'Wind mph'], FORECAST,
    2),
    '**Weather**', 'Forecast: Marrowick Met Station.'],
  tides: [table([1, 1, 0.8, 1, 0.8], ['Day', 'High', 'm', 'High', 'm'], TIDES),
    '**Tides at Kingsquay**', 'Times BST; heights above chart datum.'],
  indices: [table([2.6, 1.3, 1, 1, 1], ['Index', 'Close', 'Chg', '%', 'Year %'],
    INDICES.map(([n, v, c, p, y]) => [n, v, sign(c), sign(p, 2), sign(y)])), '**Indices**'],
  currencies: [table([2.4, 1.2, 1], ['Per pound', 'Rate', '%'],
    CURRENCIES.map(([n, v, p]) => [n, v, sign(p, 2)])), '**Currencies**'],
  commodities: [table([2.6, 1.2, 1], ['Commodity', 'Price', '%'],
    COMMODITIES.map(([n, v, p]) => [n, v, sign(p, 2)])), '**Commodities**'],
  active: [table([2.6, 1.2, 1.2, 1], ['Most traded', 'Shares m', 'Close p', '%'], [
    ['Corvane Group', '31.0', '1,184', '+6.2'], ['Tessary Insurance', '18.4', '642', '+1.9'],
    ['Skerra Lines', '12.9', '318', '+3.1'], ['Ashby Stores', '11.2', '97.4', '−3.4'],
    ['Dunmore Bank', '9.7', '455', '+0.6'], ['Fenner Holdings', '8.3', '736', '+2.7'],
    ['Halden Bakeries', '6.1', '1,092', '+1.2'], ['Kelby Software', '5.8', '214', '+0.4'],
    ['Wendholm Water', '5.2', '871', '−0.2'], ['Calder Life', '4.9', '388', '+0.9'],
    ['Orvane Marine', '4.4', '152', '+1.5'], ['Brack Cables', '3.9', '611', '−0.8'],
    ['Saltmarsh Fish', '3.6', '86.5', '+2.4']]), '**Most traded**'],
  results: [table([2.6, 1.1, 1.1, 0.9], ['£m', 'Sales', 'Profit', 'Div p'],
    [['Halden (year)', '214.0', '19.6', '14.4'], ['Skerra Lines (half)', '58.3', '3.1', '4.2'],
      ['Kelby Software (half)', '31.7', '4.9', '2.0'], ['Fenner (year)', '96.2', '11.4', '9.8'],
      ['Ashby Stores (half)', '142.5', '−2.3', '1.0'],
      ['Calder Life (year)', '388.0', '41.6', '12.2'],
      ['Orvane Marine (half)', '44.9', '3.8', '1.6']]),
  '**Results**'],
  diary: [table([1, 2.6, 2], ['Day', 'Company', 'Event'], [['Wed', 'Ashby Stores',
    'Half-year results'], ['Wed', 'Wendholm Water', 'Trading update'], ['Thu', 'Kelby Software',
    'Annual meeting'], ['Fri', 'Dunmore Bank', 'Third-quarter update'], ['Fri', 'Calder Life',
    'Dividend paid, 6.1p'], ['Mon', 'Halden Bakeries', 'Annual meeting'],
    ['Tue', 'Tessary Insurance', 'Storm claims update']], 3), '**Company diary**'],
  savings: [table([2.6, 1], ['Account', 'Rate'], [['1-year fixed, Dunmore Bank', '4.15%'],
    ['2-year fixed, Holm BS', '4.02%'], ['Easy access, Marrow Mutual', '3.85%'],
    ['90-day notice, Kelby Savings', '3.90%'], ['Cash ISA, Fairlie Bank', '3.70%']]),
  '**Best buys**', 'Gross annual rates on £10,000.'],
};
// The pictures' captions, descriptions and credits.
const GENERATED = 'Picture: Generated With Diffusion Models';
const LEDGER = 'Source: Ledger Data';
const CAPTIONS = Object.fromEntries(Object.entries({
  barrier: ['**The Marrow Barrier at 9.30pm on Monday,** its gates closed against the surge. The '
    + 'river behind them rose by 30 centimetres.', 'A row of curved steel flood gates closed '
    + 'across a river in a storm, waves breaking against them, two engineers on a walkway.'],
  welders: ['**First week:** apprentices welding a hull section in the fabrication hall at '
    + 'Brackwater.', 'Two young welders in masks at a steel hull, sparks flying, an instructor '
    + 'watching.'],
  gate: ['**How a gate turns.** Each segment turns on a pin in the pier, from its sill on the '
    + 'riverbed to stand against the sea.', 'Diagram of two barrier gates in section, one lying '
    + 'in its sill, one turned up.', 'Drawing: The Ledger'],
  ferry: ['**The Holm Maid** leaves Skerra pier on her first crossing since May.', 'A blue and '
    + 'white car ferry leaving a stone harbour on a grey day, gulls overhead.'],
  cartoon: ['**Holding the line,** by Kit Carrow.', 'Cartoon: a steel flood gate drawn as a '
    + 'castle wall holds back a huge wave while townspeople drink tea behind it; on top, an '
    + 'official with an empty piggy bank.'],
  cranes: ['**The Outer Quay at dawn.** The new berth would take ships three times the size of '
    + 'those the port handles now.', 'Container cranes unloading a ship at dawn, a tug in front.'],
  throughput: ['**Containers through Marrowick,** thousands of twenty-foot units a year.',
    'Bar chart of container traffic, 2016 to 2026, rising from 982,000 to 1,185,000 units, close '
    + 'to capacity.', 'Source: Marrowick Harbour Board'],
  mx40: ['**The MX 40 over the past year,** daily closes.', 'Line chart of the MX 40 index, '
    + 'rising from 7,370 to 8,412.6 over twelve months.', LEDGER],
  sectors: ['**Sectors on the Marrowick Exchange,** change on the day.', 'Bar chart of ten '
    + 'sectors, from shipping, up 3.4%, to retail, down 2.1%.', LEDGER],
  loaves: ['**Halden’s Quayside plant** bakes 1.1 million loaves a week.', 'Bakery workers in '
    + 'white coats checking loaves on a conveyor leaving an oven.'],
}).map(([id, [caption, altText, note = GENERATED]]) => [id, { caption, altText, note }]));
const svg = (W, H, body) => `<svg xmlns="http://www.w3.org/2000/svg" width="${W * 10}" `
  + `height="${H * 10}" viewBox="0 0 ${W} ${H}">${body}</svg>`;
const label = (x, y, s, content, look = '', fill = palette.ink) => `<text x="${x.toFixed(2)}" `
  + `y="${y.toFixed(2)}" font-size="${s}" fill="${fill}" ${look}>${content}</text>`;
function mx40Svg(face) { // the MX 40 over a year: a seeded walk, scaled to end on the close
  const rand = mulberry32(40);
  const walk = [0];
  for (let i = 1; i < 253; i++) walk.push(walk[i - 1] + rand() - 0.46);
  const level = walk.map((v) => 7370 + (v * 1042.6) / walk[252]);
  const [W, H, L, R, B] = [291, 100, 14, 18, 8]; // mm: size, left and right gutters, axis
  const x = (i) => L + (i * (W - L - R)) / 252;
  const y = (v) => H - B - ((v - 7200) * (H - B - 4)) / 1400;
  let out = face;
  for (const v of [7400, 7800, 8200, 8600]) {
    out += `<path d="M${L} ${y(v).toFixed(2)}H${W - R}" stroke="${palette.rule}" `
      + 'stroke-width="0.2"/>'
      + label(L - 1.5, y(v) + 1, 3, v.toLocaleString('en-GB'), 'text-anchor="end"');
  }
  'Oct Nov Dec Jan Feb Mar Apr May Jun Jul Aug Sep'.split(' ').forEach((m, k) => {
    out += label(x(k * 21 + 10), H - 2, 3, m, 'text-anchor="middle"');
  });
  const line = level.map((v, i) => `${i ? 'L' : 'M'}${x(i).toFixed(2)} ${y(v).toFixed(2)}`)
    .join('');
  return svg(W, H, `${out}<path d="${line}L${x(252)} ${H - B}L${L} ${H - B}Z" `
    + `fill="${palette.petrol}" fill-opacity="0.14"/><path d="${line}" fill="none" `
    + `stroke="${palette.petrol}" stroke-width="0.6"/><path d="M${L} ${H - B}H${W - R}" `
    + `stroke="${palette.ink}" stroke-width="0.35"/>`
    + label(x(252) + 1.5, y(level[252]) + 1, 3.4, '8,412.6', 'font-weight="700"'));
}
function throughputSvg(face) { // container traffic, thousands of TEU a year
  const DATA = [982, 1004, 1031, 1047, 918, 996, 1072, 1108, 1139, 1164, 1185]; // 2016–2026
  const [W, H, B] = [113, 70, 8];
  const y = (v) => H - B - (v * (H - B - 8)) / 1300;
  let out = face;
  DATA.forEach((v, i) => {
    out += `<rect x="${3 + i * 10}" y="${y(v).toFixed(2)}" width="7" height="${(H - B - y(v))
      .toFixed(2)}" fill="${i === 10 ? palette.petrol : palette.rule}"/>`
      + label(6.5 + i * 10, H - 3, 2.8, `’${16 + i}`, 'text-anchor="middle"');
  });
  return svg(W, H, `${out}<path d="M2 ${y(1200).toFixed(2)}H111" stroke="${palette.ink}" `
    + 'stroke-width="0.4" stroke-dasharray="1.2 0.8"/>'
    + label(3, y(1200) - 1.6, 3, 'Capacity today, 1.2 million')
    + label(109.5, y(1185) + 4, 2.8, '1,185', 'text-anchor="end" font-weight="700"',
      palette.salmon));
}
function gateSvg(face) { // a gate in section, lying in its sill and turned up against the sea
  const [r, bed] = [14, 38];
  const py = bed - r * Math.SQRT1_2; // the pivot: the arc's ends sit on the riverbed
  const p = (cx, a) => `${(cx + r * Math.cos((a * Math.PI) / 180)).toFixed(2)} `
    + `${(py - r * Math.sin((a * Math.PI) / 180)).toFixed(2)}`;
  const gate = (cx, a) => `<path d="M${p(cx, a)}A${r} ${r} 0 0 0 ${p(cx, a + 90)}Z" `
    + `fill="${palette.accent}"/><path d="M${p(cx, a)}L${cx} ${py.toFixed(2)}L${p(cx, a + 90)}" `
    + `fill="none" stroke="${palette.ink}" stroke-width="0.35"/><circle cx="${cx}" `
    + `cy="${py.toFixed(2)}" r="1.4" fill="${palette.ink}"/>`;
  const water = (x, w, top) => `<rect x="${x}" y="${top}" width="${w}" height="${bed - top}" `
    + `fill="${palette.rule}" fill-opacity="0.4"/>`;
  return svg(113, 50, face + water(0, 54, 24) + water(59, 30, 30) + water(89, 24, 19)
    + `<rect x="0" y="${bed}" width="54" height="12" fill="${palette.muted}"/>`
    + `<rect x="59" y="${bed}" width="54" height="12" fill="${palette.muted}"/>`
    + gate(27, 225) + gate(80, -45)
    + label(1, 5, 3.2, 'Open', 'font-weight="700"')
    + label(1, 9.5, 2.8, 'The gate lies in its sill')
    + label(60, 5, 3.2, 'Closed', 'font-weight="700"')
    + label(60, 9.5, 2.8, 'Turned up through 90°')
    + label(61, 34, 2.8, 'River') + label(111, 23, 2.8, 'Sea', 'text-anchor="end"'));
}
const SECTOR_MOVES = [['Shipping', 3.4], ['Insurance', 1.6], ['Engineering', 1.1], ['Banks', 0.7],
  ['Energy', 0.5], ['Food and drink', 0.3], ['Property', -0.1], ['Technology', -0.2],
  ['Health', -0.4], ['Retail', -2.1]];
function sectorsSvg(face) { // the day's move of each sector, in per cent
  const [W, H, Z, k] = [291, 82, 150, 30]; // mm; the zero line; mm per point
  let out = face;
  SECTOR_MOVES.forEach(([name, move], i) => {
    const y = 2 + i * 8;
    const [x, w] = move >= 0 ? [Z, move * k] : [Z + move * k, -move * k];
    out += `<rect x="${x.toFixed(2)}" y="${y}" width="${w.toFixed(2)}" height="5.6" `
      + `fill="${move >= 0 ? palette.petrol : palette.rule}"/>`
      + label(move >= 0 ? Z - 2 : Z + 2, y + 4, 3.6, name,
        `text-anchor="${move >= 0 ? 'end' : 'start'}"`)
      + label(move >= 0 ? x + w + 1.5 : x - 1.5, y + 4, 3.6, `${sign(move)}%`,
        `font-weight="700" text-anchor="${move >= 0 ? 'start' : 'end'}"`);
  });
  return svg(W, H, `${out}<path d="M${Z} 0V${H}" stroke="${palette.ink}" stroke-width="0.35"/>`);
}
// An SVG drawn as an image cannot see the page's fonts (gotcha: svg-no-webfonts): each
// drawing carries Archivo Narrow inline, as data URLs of the Fontsource files.
async function inlineFace() {
  const src = async (weight) => {
    const url = 'https://cdn.jsdelivr.net/npm/@fontsource/archivo-narrow@5/files/'
      + `archivo-narrow-latin-${weight}-normal.woff2`;
    const bytes = new Uint8Array(await (await fetch(url)).arrayBuffer());
    let bin = '';
    for (const b of bytes) bin += String.fromCharCode(b);
    return `@font-face{font-family:F;font-weight:${weight};src:url(data:font/woff2;base64,`
      + `${btoa(bin)}) format('woff2')}`;
  };
  return `<style>${await src(400)}${await src(700)}text{font-family:F}</style>`;
}
// #endregion

// #region floats: pictures, charts and tables across k of the page's columns
const unnumbered = (id, name, captionStyle) => ({ id, name, shortLabel: name, captionPrefix: '',
  numberingTemplate: '', resetOn: 'never', counterFormat: 'decimal', captionStyle });
const resourceTypes = [unnumbered('picture', 'Picture'),
  unnumbered('panel', 'Panel', { position: 'above', fontSize: pt(9.5) })];
const res = (id, typeId, kind, body, extra) => ({ id, typeId, kind, [kind]: body,
  createdAt: 0, updatedAt: 0, ...extra });
const photo = (id, file, [w, h], placement) => res(id, 'picture', 'bitmap',
  { fileId: file, format: 'jpeg', width: w, height: h }, { placement, ...CAPTIONS[id] });
const drawing = (id, [w, h], placement) => res(id, 'picture', 'svg',
  { fileId: `${id}.svg`, width: w, height: h }, { placement, ...CAPTIONS[id] });
const data = (id, model, caption, note) => res(id, 'panel', 'table', { model },
  { placement: here, caption, note });
const top = (columns) => ({ position: 'top', columns }); // a float across k columns
const here = { position: 'here' }; // in the flow: in a column, or across a box
const resources = [
  photo('barrier', 'barrier-1800.jpg', [1800, 1106], here), // in the banner box: page-wide
  photo('welders', 'apprentices-1536.jpg', [1536, 1024], top(3)),
  drawing('gate', [1130, 500], top(3)),
  photo('ferry', 'ferry-1536.jpg', [1536, 1024], top(4)),
  photo('cartoon', 'cartoon-1280.jpg', [1280, 853], top(4)),
  photo('cranes', 'cranes-1800.jpg', [1800, 750], here),
  drawing('throughput', [1130, 700], top(2)),
  drawing('mx40', [2910, 1000], here), drawing('sectors', [2910, 820], here),
  photo('loaves', 'bakery-1536.jpg', [1536, 1024], top(3)),
  // The tables sit where the text names them, in a column or a data box: no float.
  ...Object.entries(TABLES).map(([id, [model, caption, note]]) => data(id, model, caption, note)),
  ...SECTORS.map((_, i) => res(`prices-${i + 1}`, 'panel', 'table',
    { styleId: 'prices', model: pricesTable(i, 21) }, { placement: here })),
];
// #endregion
const markdown = String.raw`---
Markdownの見本 · 243行 · content.en.md
title: "The Marrowick Ledger"
author: "The Marrowick Ledger"
publishDate: "Tuesday 6 October 2026"
---

# The Marrowick Ledger {style="front" issue="No. 41,207 · Est. 1878" price="£1.60" weather="Gales easing · 13° · 8°"}

:::callout{type="banner" span="page" title="Storm surge"}
## Barrier holds back the Marrow’s highest tide in forty years {style="lead"}

*Nine steel gates swung shut at 9.12pm. Behind them, 14,000 homes in the Lower Town stayed dry*

::resource{id="barrier"}
:::

:::callout{type="teaser" span="page" placement="bottom"}
:::columns{count=3 breaks="2,3"}
**Business** · The salmon pages, 5–8. The harbour board backs a £640 million deep-water terminal, and the MX 40 closes at a record.

**Markets** · Page 6. Shipping and insurers lead the city’s index higher. Share prices and savings rates: page 8.

**Inside** · Weather and tides, page 3. Opinion and letters, page 4. Night trams, below.
:::
:::

:::paragraphs{style="byline"}
By **Helen Strand** · Environment Correspondent
:::

:::paragraphs{style="flush"}
The Marrow Barrier closed against a storm surge for the first time on Monday night, seven months after it opened, and held back a tide that reached 6.84 metres above chart datum at Kingsquay, the highest the harbour gauge has recorded since January 1986.
:::

Its nine gates, each 41 metres wide and weighing 820 tonnes, began to turn up from the riverbed at 8.40pm and were sealed by 9.12pm, eighty minutes before high water. By then the wind was gusting at 74 mph off Skerra Head and the surge was running 1.9 metres above the predicted tide.

Upstream of the gates the river rose by only 30 centimetres. Downstream, at Fenner’s Wharf and along the Outer Quay, water topped the old harbour wall for about an hour and flooded the yards of two warehouses. Nobody was hurt, and the fire service pumped out three cellars on Saltmarsh Road.

“This is the night it was built for,” said Ruth Carrow, who runs the barrier for the River Marrow Authority and spent the night in the control room on the north pier. “We closed on the forecast, not on the water, and that is what gave us the margin.”

Police closed the embankment road at seven and kept it shut until the gates opened again. Several hundred people watched the closure from the north bank, many of them old enough to remember the last great flood.

In 1986 a smaller surge put 1.2 metres of water into the streets of the Lower Town and caused damage the city later put at £96 million in today’s money. The barrier, which cost £310 million and took six years to build, was designed for a tide 1.5 metres higher than Monday’s.

The gates reopened at 3.05am, and the first ships went through on the morning tide. The authority expects to close the barrier four to eight times each winter, and more often as the sea rises.

:::paragraphs{style="jump"}
How the gates turn: **page 2** · Opinion: **page 4**
:::

:::callout{type="story" span="page" title="Transport"}
## Night trams will run until 2am from January {style="second"}
:::

:::paragraphs{style="flush"}
Trams on the Harbour and University lines will run until two in the morning on Fridays and Saturdays from 8 January, the transport committee agreed last night.
:::

A trial last winter carried 41,000 passengers over twelve weekends, more than twice the number the council had expected, and the busiest tram of the night was usually the last. The later service will cost £1.1 million a year, paid from the city centre parking levy.

“People will leave the car at home if they can be sure of getting back,” said Councillor Imran Haddow, who chairs the committee. Night buses will go on serving the outer estates, where the trams do not reach, and a review of the bus routes is due in the spring.

The first night trams will leave Market Cross at half past midnight and run every twenty minutes. Drivers will work the late turns on a voluntary rota, paid at time and a half, and their union said yesterday that enough had already signed up to cover the winter. Two conductors will ride on the last tram of the night, as they did in the trial.

# City

:::callout{type="banner" span="page" title="Brackwater"}
## Shipyard takes on 64 apprentices, its biggest intake since 1991 {style="wide"}

*Four research ships and two island ferries fill the order book until 2030*

:::paragraphs{style="byline"}
By **Owen Lusk** · Industry Reporter
:::
:::

:::paragraphs{style="flush"}
Corran’s yard at Brackwater has taken on 64 apprentices this autumn, its largest intake for 35 years, as it starts work on four research vessels and a pair of ferries for the island routes :ref{id="welders" text="(picture)"}.
:::

The new starters, 19 of them women, began their four years on Monday in the fabrication hall: welders, platers, pipefitters and electricians, with six in the drawing office. Each is paid £16,400 in the first year, rising to £27,900 in the fourth, and every one who finishes is promised a job.

“Ten years ago we were taking on eight a year and losing half of them to the oil fields,” said Mairi Corran, the yard’s managing director and the fourth of her family to run it. “Now the work is here for a decade, and so is the training.”

The yard employs 1,140 people and has orders worth £780 million. The research ships, 70 metres long, will be built for a consortium of northern universities; the first steel was cut in August. The two ferries, for the Skerra and Holm crossings, are the first in the islands to run on batteries charged from the shore.

The apprentices spend their first six months in the training bay before they go out to the ships. Each is paired with a tradesman who has at least ten years at the yard, and the older hands are paid an extra £1,800 a year to take them on. Half of the yard’s present foremen started the same way.

Most of the new intake are from the city, but eleven come from the islands and will lodge in Brackwater during the week. Skerra Lines has agreed to carry them home free on Friday evenings for their first year.

In 2019 the yard had a single dredger on the slipway and had cut its workforce to 610. Since then it has won the research ships against bids from Norway and the Netherlands, and the two ferries from the island council, which wanted them built within reach of the crossings they will serve.

Skills remain the risk. The yard expects a quarter of its welders to retire within six years, and the city college has doubled its evening classes to keep up. A new training hall, paid for jointly by the yard and the regional growth fund, opens in the spring.

:::callout{type="story" span="page" title="Storm surge"}
## How the gates turn {style="second"}
:::

:::paragraphs{style="flush"}
The barrier’s gates lie flat in concrete sills on the riverbed, so ships pass over them on every ordinary tide. Each is a hollow steel segment, curved like a slice of a drum and pinned at both ends to a pier :ref{id="gate" text="(diagram)"}.
:::

To close, hydraulic arms in the piers turn the segments through 90 degrees until the curved face stands up against the sea. The turn takes about half an hour, and the control room closes the gates in pairs from the middle out, so the river is never squeezed through a single gap.

To open, the gates turn on past the vertical and back down into the sills, washing out the silt that settles in them between closures. Once a month, on a quiet neap tide, the authority closes one gate as a test.

:::callout{type="briefs" title="In brief"}
**Library hours.** Central Library opens until 8pm on Thursdays from next week, with the café and the local studies room.

**Bridge works.** One lane of Kingsquay Bridge closes overnight from 12 to 16 October while joints are replaced.

**Night market.** The Saturday market on Fish Quay stays open until 9pm from 7 November until Christmas, with 40 extra stalls.

**Fun run.** The Harbour 10K on Sunday raised £212,000 for the children’s ward at Marrowick Infirmary.
:::

:::callout{type="ad" span="page" placement="bottom" title="Advertisement"}
## Pellow & Rae {style="ad-big"}

**The autumn sale starts on Saturday**

:::space{lines=5}

Wool coats from £89 · Cashmere knitwear from £59 · Leather boots from £75

Free alterations on every coat until Christmas · Castle Wynd, open 9 till 7, late on Thursdays
:::

# Region

:::callout{type="banner" span="page" title="Council budget"}
## Libraries spared as the council finds £18 million of savings {style="wide"}

*Parking charges rise and two depots close, but all eleven branch libraries stay open*

:::paragraphs{style="byline"}
By **Priya Anand** · Local Government Correspondent
:::
:::

:::callout{type="data" span="page" placement="bottom"}
:::columns{count=3 breaks="2,3"}
::resource{id="budget"}

::resource{id="forecast"}

::resource{id="tides"}
:::
:::

:::paragraphs{style="flush"}
Marrowick City Council will keep all eleven of its branch libraries open next year, abandoning a plan to close four of them, after finding £18.2 million of savings elsewhere in a budget of £1.04 billion.
:::

The draft budget, published yesterday, raises on-street parking charges by 40p an hour in the city centre and closes two of the council’s five highways depots. Council tax rises by 4.99%, the most allowed without a local vote, adding £1.38 a week to a Band D bill.

The four libraries, at Holmside, Saltmarsh, Fenner’s Green and Kelby Rise, drew 3,100 signatures to a petition in the summer. “The libraries are where people go for the internet, for warmth and for help with forms,” said the council’s leader, Ann Fairlie. “We heard that.”

Adult social care takes the largest increase, £14.6 million, as the number of people over 85 in the city grows by about 600 a year. Spending on roads falls by 4% :ref{id="budget" text="(table, below)"}.

The opposition said the parking rise would hurt shops on the edge of the centre. The budget goes to the full council on 3 December.

:::callout{type="story" span="page" title="Islands"}
## Skerra ferry back in service after a £4 million refit {style="second"}
:::

:::paragraphs{style="flush"}
The *Holm Maid* returned to the Skerra crossing yesterday after five months in dry dock, with new engines that burn 30% less fuel and a car deck widened to take two more lorries :ref{id="ferry" text="(picture)"}.
:::

The island’s 900 residents have relied on a smaller chartered boat since May, which could not carry lorries. Shops on Skerra ran short of building materials, and the island’s school had to put off the start of its new extension until the spring.

“It has been a long summer,” said Morag Lusk, who keeps the shop at the pier. “We had cement on the mainland and builders on the island, and no way to get the one to the other.”

The ferry’s first crossing, at 7.15am, was full. Skerra Lines says the winter timetable, with four sailings a day, starts on 26 October, and that the gales should ease by Wednesday.

The refit was done at Corran’s yard in Brackwater, the first time in twenty years that an island ferry has been repaired in the city rather than sent south. The yard finished a week before the date in its contract. Her crew of eleven spent the summer on the chartered boat, which Skerra Lines will keep on standby until the spring.


:::callout{type="ad" span="page" placement="bottom" title="Advertisement"}
## Skerra Lines {style="ad"}

**Four sailings a day from 26 October · Car spaces on 01632 960 260**

Kingsquay 7.15, 10.30, 14.00, 17.45 · Skerra 8.40, 12.15, 15.30, 19.10
:::

# Opinion

:::callout{type="banner" span="page" title="The Ledger’s view"}
## The barrier worked. Now pay for the next one {style="wide"}
:::

:::paragraphs{style="flush"}
On Monday night the Marrow Barrier did what its critics said it never would. It closed on time, it held, and the Lower Town woke to wet pavements rather than flooded kitchens :ref{id="cartoon" text="(cartoon)"}. The engineers who built it, and the crew who ran it through the storm, have earned the city’s thanks.
:::

They have also earned a hearing. The barrier was designed to protect Marrowick until about 2070. Every forecast since it was planned has raised the sea a little higher and brought that date a little closer. The authority already says it will need to raise the flood walls downstream of the gates within fifteen years, at a cost it puts at £120 million.

That money is not in anybody’s budget. The city cannot ask the Lower Town to wait for the next 1986 before it starts saving. A small levy on the port’s cargo, which the barrier also protects, would raise £4 million a year. The harbour board should agree to it before the new terminal is built, not after.

:::callout{type="story" span="page" title="Tom Ellery"}
## Sixty-four reasons to be cheerful {style="second"}
:::

:::callout{type="quote" placement="top"}
“A city that gives its young people a choice about staying will still be here when the next storm comes”
:::

:::paragraphs{style="flush"}
I spent Monday morning in the fabrication hall at Brackwater, among sixty-four teenagers in new overalls, and it was the most hopeful room I have stood in for years.
:::

When I started on this paper the yard was a byword for decline. Every winter brought another round of lay-offs, and every spring another rumour that the cranes would be sold for scrap. My father welded there for thirty years; I was told, firmly and often, not to follow him.

What changed was not luck. The yard stopped bidding for work it could not win and learned to build the ships nobody else wanted to build: small, complicated and clean. Those ships need people who can think as well as weld, and the yard started training them.

The apprentices I met were careful to say they had other offers. That is the point. A city that gives its young people a choice about staying is a city that will still be here when the next storm comes.

:::callout{type="story" span="page" title="Letters"}
## Gates, parking and the libraries {style="second"}
:::

**Gates and gratitude.** I watched the barrier close from the north embankment on Monday. My street flooded in 1986 and I lost every photograph I owned. Thank you to everyone who built it. *June Pellow, Saltmarsh Road*

**Parking.** Forty pence an hour more is the difference between my customers coming into town and driving to the retail park. *Arif Malik, Castle Wynd*

**Libraries.** The petition worked. Next time the council should ask before it plans a closure, not after. *Elspeth Rae, Kelby Rise*

:::callout{type="ad" span="page" placement="bottom" title="Advertisement"}
## Marrowick Philharmonic {style="ad-big"}

**The winter season opens on Saturday 17 October with Sibelius and Elgar**

:::space{lines=4}

Twelve concerts at the Corn Hall, from £9 · Under-26s £5 · Box office open daily from 10
:::

**Trams.** Two in the morning is welcome, but my shift at the Infirmary ends at three. *Daniel Okoro, Holmside*

**The terminal.** Before the harbour board digs up the mudflats at the Outer Quay, someone should count the birds that winter there. I counted 2,400 knot on a single tide last January. *Neil Rennie, Fenner’s Green*

**Bus 44.** The Sunday buses to Holm stop at six. Anyone who works a late shift in town still needs a car, trams or no trams. *Grace Fairlie, Holm*
`; // content.en.md: pages 1–4
const businessPages = String.raw`:::paper{type="newsprint" shade="#faede6"}
Markdownの見本 · 227行 · content.business.en.md

# Business {style="business-front"}

:::callout{type="banner" span="page" title="Ports"}
## Harbour board backs £640 million deep-water terminal {style="lead"}

*The Outer Quay scheme would let the largest container ships call at Marrowick for the first time*

::resource{id="cranes"}
:::

:::callout{type="ad" span="page" placement="bottom" title="Advertisement"}
## Dunmore Bank {style="ad"}

**A one-year fixed bond at 4.15% gross**

From £1,000, opened in any of our eleven branches or by telephone. Rates can change before you apply.
:::

:::callout{type="panel" placement="top" columns="2" title="The terminal in numbers"}
**£640m** the cost, shared between the board and Corvane

**16.5 m** depth of the dredged berth, against 11 m today

**2.6m** containers a year at full capacity, more than twice today’s 1.2 million

**1,400** jobs during the build, and 380 when the terminal is running
:::

:::paragraphs{style="byline"}
By **Callum Reid** · Business Editor
:::

:::paragraphs{style="flush"}
The Marrowick Harbour Board voted yesterday to build a deep-water container terminal at the Outer Quay, the largest investment in the port since the docks were nationalised in 1948. Container traffic is already close to what the quays can handle :ref{id="throughput" text="(chart)"}.
:::

The £640 million scheme would dredge a berth 16.5 metres deep and 700 metres long, enough for ships carrying 20,000 containers. Today the port can take vessels of about a third that size, and cargo for the city’s factories is often unloaded further south and brought north by rail.

The board voted nine to two in favour. Construction would start in 2028 and the first berth would open in 2031, lifting the port’s capacity from 1.2 million to 2.6 million twenty-foot units a year.

“For thirty years we have watched the big ships sail past us,” said Fiona Stroud, the board’s chief executive. “This puts Marrowick back on the main line between the Atlantic and the Baltic.”

The board will pay for the terminal with £260 million of its own reserves and borrowing, and a £380 million share from Corvane Terminals, an operator that would run the berth under a 35-year concession. The two sides signed heads of terms last week.

Not everyone is convinced. The two members who voted against warned that the board was betting on a recovery in container trade that freight rates do not yet show, and that dredging would disturb mudflats used by wintering birds. The plan needs a harbour revision order, and a public inquiry is likely.

Shares in Corvane’s parent rose 6.2% on the news. Analysts at Holm & Partners said the concession would add about 4% to the group’s profits once the terminal was full, and raised their price target to 1,300p.

:::callout{type="story" span="page" title="Savings"}
## Marrow Mutual raises its easy-access rate for the third time this year {style="second"}
:::

:::paragraphs{style="flush"}
Marrow Mutual will pay 3.85% on its easy-access account from Monday, up from 3.6%, and has promised to hold the rate until the end of March whatever happens to the base rate in the meantime.
:::

The building society, which has 212,000 members and 14 branches between the city and the islands, said savers had put £96 million into the account since June. “We lend to first-time buyers in the valley, and their mortgages are paid for by local savings,” said its chief executive, Rhona Kelby. “We need both.”

The rise puts the Mutual at the top of the easy-access tables, a few points below the best one-year fixed bonds (page 8).

**Kelby Software** has won a £12 million contract to run the city’s new parking app for six years. **House prices** in Marrowick rose 0.7% in September, says the Northern Property Index, to an average of £214,300. **Unemployment** in the region fell to 4.1% in the three months to August, from 4.4%.

# Markets {style="business"}

:::callout{type="banner" span="page" title="Market report"}
## Shipping lifts the MX 40 to a record close {style="wide"}

*Insurers recover as the barrier holds; the pound slips against the dollar*

::resource{id="mx40"}

:::paragraphs{style="byline"}
By **Nadia Brennan** · Markets Reporter
:::
:::

:::callout{type="data" span="page" placement="bottom"}
:::columns{count=4 breaks="2,3,4"}
::resource{id="indices"}

::resource{id="currencies"}

::resource{id="commodities"}

::resource{id="active"}
:::
:::

:::paragraphs{style="flush"}
The MX 40 closed at a record 8,412.6 last night, up 0.8% on the day, as investors bought shipping and port stocks after the harbour board’s vote and insurers recovered from a nervous start.
:::

Corvane Group led the index with a rise of 6.2% to 1,184p. Skerra Lines gained 3.1% and the stevedoring firm Fenner Holdings 2.7%. Brokers said the terminal would add traffic to the whole of the port, not only the new berth.

Insurers had fallen in early trading on fears of storm claims, then turned higher once it was clear that the barrier had held. Tessary Insurance ended 1.9% up, having been down 2.4% at the opening.

The index has risen 14% over the past year, against 6% for the Europe 350. Fund managers say the gap reflects the city’s mix of companies: few technology stocks, many industrial firms whose order books have filled since energy prices fell last spring.

Not every sector shared the gains. Retailers slipped after the September sales figures showed a third month of falling spending on clothing, and Ashby Stores lost 3.4%. Property shares were flat.

In the currency market the pound fell 0.2% against the dollar to \$1.3218, after a speech by a central bank official was read as a hint that interest rates could be cut before Christmas. Gold slipped and crude oil rose 1.1% to \$71.40 a barrel.

Turnover on the Marrowick Exchange was 412 million shares, about a fifth above the average for the past month. The busiest stock was Corvane, with 31 million shares traded.

:::callout{type="story" span="page" title="Sectors"}
## Ports and insurers led, the shops lagged {style="second"}

::resource{id="sectors"}
:::

# Companies {style="business"}

:::callout{type="banner" span="page" title="Food"}
## Halden adds a night shift as supermarket orders rise {style="wide"}

*The Quayside bakery will hire 90 people and run around the clock from November*

:::paragraphs{style="byline"}
By **Callum Reid**
:::
:::

:::callout{type="ad" span="page" placement="bottom" title="Advertisement"}
## Corran Shipbuilders {style="ad"}

**Apprenticeships 2027: welding, plating, pipework, electrical and design**

:::space{lines=20}

Four years, paid from the first day, with a job at the end. Applications close on 30 November.
:::

:::callout{type="data" span="page" placement="bottom"}
:::columns{count=2 breaks="2"}
::resource{id="results"}

::resource{id="diary"}
:::
:::

:::paragraphs{style="flush"}
Halden Bakeries will add a night shift at its Quayside plant next month, hiring 90 people, after two supermarket chains moved their bread contracts for the north to the company :ref{id="loaves" text="(picture)"}.
:::

The plant bakes 1.1 million loaves a week on three tunnel ovens. With the night shift it will make 1.6 million, and the company will spend £8 million on a fourth oven next year.

Halden’s sales rose 11% to £214 million in the year to June, and its profit before tax by 18% to £19.6 million. The dividend goes up by a fifth.

“Bread is a local business, whatever the supermarkets say,” said its chief executive, Grant Halden. “A loaf baked in Marrowick at midnight is on a shelf in the Borders by six.”

Flour costs, which rose by almost half in 2023, have fallen back by a fifth, but wages and energy take a growing share of each loaf. The company says it will pay the new night staff a premium of 20%.

The new shift will run from ten at night to six in the morning, five nights a week, and Halden is recruiting through the city college and the job centre on Dock Street. About a third of the 90 posts are for engineers to keep the ovens and the slicing lines running; the rest are on the line and in dispatch, where 14 lorries leave the yard each night.

## Skerra Lines profit halves as the ferry is laid up

:::paragraphs{style="flush"}
Skerra Lines, which runs the ferries to the islands, made a profit of £3.1 million in the half year to September, down from £6.4 million, after its largest boat spent five months in dry dock.
:::

The company chartered a smaller vessel for the summer at a cost of £1.9 million and lost most of its freight trade while it was away. The *Holm Maid* returned to service yesterday. Skerra Lines expects the full year to come in close to last year’s £11 million, and has kept its dividend at 4.2p.

## Tessary puts the cost of Monday’s storm at £9 million

:::paragraphs{style="flush"}
Tessary Insurance expects claims of about £9 million from Monday’s gales, mostly for roofs, fences and cars, a fraction of what it would have paid if the Lower Town had flooded.
:::

The company estimated that a repeat of the 1986 flood would have cost it £140 million. Its chief executive, Laura Dunmore, said the barrier was the reason Tessary had cut premiums in the Lower Town by 8% this year, and would cut them again if the gates kept working.

Most of the claims came from the Outer Quay and the islands, outside the barrier’s shelter. The company has 40 assessors in the city this week and says it expects to settle nine in ten claims before the end of the month.

# Share prices {style="business"}

:::callout{type="ad" span="page" placement="bottom" title="Advertisement"}
## Marrow Mutual {style="ad-big"}

**Easy access at 3.85%, held until March**

:::space{lines=15}

Owned by our 212,000 members since 1867 · 14 branches from Kingsquay to Skerra · Open an account with £1
:::

:::paragraphs{style="kicker"}
Your money
:::

## Fixed rates are falling: lock in now or wait?

:::paragraphs{style="flush"}
Savers who want a fixed rate should not wait long. The best one-year bonds have fallen from 4.6% in June to 4.15% today, as banks price in a cut in interest rates before the end of the year.
:::

Easy-access accounts still pay almost as much, and leave the money free if rates rise again. Marrow Mutual pays 3.85% on balances from £1, and the rate is guaranteed until March.

Anyone with more than the £85,000 the deposit scheme protects should spread it between banks that hold separate licences. Several of the best buys belong to the same group.

::resource{id="savings"}


::resource{id="prices-1"}

::resource{id="prices-2"}

::resource{id="prices-3"}

::resource{id="prices-4"}

::resource{id="prices-5"}

::resource{id="prices-6"}

::resource{id="prices-7"}

::resource{id="prices-8"}

::resource{id="prices-9"}

::resource{id="prices-10"}

:::paragraphs{style="imprint"}
Closing prices on the Marrowick Exchange, in pence, with the day’s change and the high and low of the past 52 weeks. Source: Ledger Data. The Marrowick Ledger is an imaginary daily; its people, companies and figures are invented. Text CC BY 4.0. Set in Source Serif 4, Playfair Display and Archivo Narrow (SIL OFL).
:::

:::
`; // content.business.en.md: pages 5–8

// ─── 3 · Fonts ──────────────────────────────────────────────────────────────
const FONTS = { // text, display and label faces, loaded before the build (gotcha: fonts-first)
  'Source Serif 4': ['400', '400i', '700'], 'Playfair Display': ['400i', '700', '900'],
  'Archivo Narrow': ['400', '600', '700'] };

// ─── 4 · Build & show ───────────────────────────────────────────────────────
const all = `${markdown}\n\n${businessPages}`;
await loadFonts(FONTS, all);
const face = await inlineFace();
await Promise.all([...resources.filter((r) => r.bitmap)
  .map((r) => loadImage(r.bitmap.fileId, asset(r.bitmap.fileId))),
loadSvg('gate.svg', gateSvg(face)), loadSvg('throughput.svg', throughputSvg(face)),
loadSvg('mx40.svg', mx40Svg(face)), loadSvg('sectors.svg', sectorsSvg(face))]);
const doc = await buildWithFonts(() => buildDocument({ markdown: all, resources }, config()), all);
showPages(doc, { title: 'The Marrowick Ledger · Business on salmon' });

キット · core, fonts, viewer, images：全レシピ共通 · 270行
// ─── Kit ── helpers shared by every Cookbook recipe · postext.dev/cookbook ─────

// ─── Kit · core v1 ── the same in every recipe · postext.dev/cookbook ─────────
function mm(value) { return { value, unit: 'mm' }; }
function pt(value) { return { value, unit: 'pt' }; }
function em(value) { return { value, unit: 'em' }; }
/** The sample language's string: t({ en: 'Figure', es: 'Figura' }). */
function t(strings) { return strings[LANG] ?? Object.values(strings)[0]; }
/** A file in this recipe's assets folder, served from the Postext repo by jsDelivr. */
function asset(file) { return `https://cdn.jsdelivr.net/gh/drnachio/postext@main/cookbook/${RECIPE}/assets/${file}`; }

// ─── Kit · fonts v1 ── the same in every recipe · postext.dev/cookbook ────────
// Postext measures text with the faces the browser has loaded, and caches the
// widths, so every face must be ready before the first build. Faces come from
// Fontsource: the same static files the PDF embeds, so screen and PDF agree.

/** faces = { 'Family Name': ['400', '400i', '700'] }. `text` is the sample:
 *  letters beyond Latin-1 (č, ł, ő…) also load the latin-ext files. With
 *  `optional`, a face Fontsource does not ship is skipped instead of failing.
 *  Resolves to the number of faces added. */
async function loadFonts(faces, text = '', { optional = false } = {}) {
  kitStatus('Loading fonts…');
  const ranges = {
    latin: 'U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,'
      + 'U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD',
    'latin-ext': 'U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,'
      + 'U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF',
  };
  const subsets = /[Ā-˿Ḁ-ỿ]/.test(text) ? ['latin', 'latin-ext'] : ['latin'];
  const jobs = [];
  let added = 0;
  for (const [family, specs] of Object.entries(faces)) {
    const id = fontsourceId(family);
    const meta = optional ? await fontsourceMeta(family) : null;
    for (const spec of new Set(specs)) {
      const weight = parseInt(spec, 10);
      const style = spec.endsWith('i') ? 'italic' : 'normal';
      if (hasFace(family, weight, style)) continue;
      if (optional && !(meta?.weights.includes(weight) && meta.styles.includes(style))) continue;
      for (const subset of subsets) {
        const url = `https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/files/${id}-${subset}-${weight}-${style}.woff2`;
        const face = new FontFace(family, `url(${url}) format('woff2')`,
          { weight: String(weight), style, unicodeRange: ranges[subset] });
        jobs.push(face.load().then((ready) => { document.fonts.add(ready); added++; }, () => {
          if (subset === 'latin' && !optional) throw new Error(`Fontsource has no ${family} ${weight} ${style}`);
        }));
      }
    }
  }
  await Promise.all(jobs).catch((error) => { kitFail(error); throw error; });
  return added;
}

/** Runs `build` (a buildDocument or buildBundle call) and checks the faces
 *  the pages use. A regular face missing from FONTS is loaded with a warning;
 *  bold and italic variants are loaded when the family ships them. Then the
 *  measurement caches are cleared and the build runs again. */
async function buildWithFonts(build, text = '') {
  const tried = new Set();
  for (let round = 0; round < 3; round++) {
    kitStatus('Laying out…');
    await new Promise(requestAnimationFrame);          // let the status paint first
    const result = await Promise.resolve().then(build).catch((error) => { kitFail(error); throw error; });
    const wanted = { base: {}, variants: {} };
    for (const { font, base } of [result].flat().flatMap(fontStringsOf)) {
      const { family, weight, style } = parseFont(font);
      const key = `${family}|${weight}|${style}`;
      if (tried.has(key) || hasFace(family, weight, style)) continue;
      tried.add(key);
      (wanted[base ? 'base' : 'variants'][family] ??= []).push(`${weight}${style === 'italic' ? 'i' : ''}`);
    }
    if (Object.keys(wanted.base).length) {
      console.warn(`[cookbook] FONTS does not list ${JSON.stringify(wanted.base)}: loading them.`);
    }
    const added = await loadFonts(wanted.base, text) + await loadFonts(wanted.variants, text, { optional: true });
    if (added === 0) return result;
    clearMeasurementCache();
  }
  throw new Error('The fonts did not settle after three builds.');
}

/** Every font string of the layout. `base` marks a block's own face; its
 *  bold, italic and bold-italic variants are listed whether or not used. */
function fontStringsOf(doc) {
  const found = new Map();
  const walk = (node) => {
    if (!node || typeof node !== 'object') return;
    if (Array.isArray(node)) { node.forEach(walk); return; }
    for (const [key, value] of Object.entries(node)) {
      if (typeof value === 'string' && /fontString$/i.test(key)) {
        found.set(value, found.get(value) || key === 'fontString');
      } else if (value && typeof value === 'object') walk(value);
    }
  };
  walk(doc.pages);
  walk(doc.blocks);
  return [...found].map(([font, base]) => ({ font, base }));
}

/** '700 37.5px Open Sans' / 'italic 400 13px "Source Serif 4"' → { family, weight, style }.
 *  A string with no weight ('95.8px Young Serif', from a design text) is 400. */
function parseFont(font) {
  const m = /^(?:(italic|oblique)\s+)?(?:small-caps\s+)?(?:(\d+|bold|normal)\s+)?[\d.]+px\s+(.+)$/.exec(font.trim());
  if (!m) throw new Error(`Unexpected font string: ${font}`);
  const weight = m[2] === 'bold' ? 700 : !m[2] || m[2] === 'normal' ? 400 : Number(m[2]);
  return { family: m[3].replace(/^["']|["']$/g, ''), weight, style: m[1] ? 'italic' : 'normal' };
}

/** True when a loaded FontFace covers exactly this family, weight and style
 *  (document.fonts.check() is also true for families nobody declared). */
function hasFace(family, weight, style) {
  for (const face of document.fonts) {
    if (face.status !== 'loaded' || face.style !== style) continue;
    if (face.family.replace(/^["']|["']$/g, '') !== family) continue;
    const [low, high = low] = face.weight.split(' ').map(Number);
    if (weight >= low && weight <= high) return true;
  }
  return false;
}

/** Fontsource's id for a family: 'Source Serif 4' → 'source-serif-4'. */
function fontsourceId(family) { return family.toLowerCase().replace(/\s+/g, '-'); }

/** The weights and styles a family ships ({ weights: [400, 700], styles: ['normal', 'italic'] }), or null. */
function fontsourceMeta(family) {
  fontsourceMeta.cache ??= new Map();
  const id = fontsourceId(family);
  if (!fontsourceMeta.cache.has(id)) {
    fontsourceMeta.cache.set(id, fetch(`https://api.fontsource.org/v1/fonts/${id}`)
      .then((res) => (res.ok ? res.json() : null), () => null));
  }
  return fontsourceMeta.cache.get(id);
}

// ─── Kit · viewer v1 ── the same in every recipe · postext.dev/cookbook ───────
/** Shows the pages as facing spreads on a dark desk: the first page is a
 *  recto on its own, then verso | recto pairs, as in a bound book. Pages
 *  are painted when they scroll near the screen. */
function showPages(docs, { title, width = 460 } = {}) {
  const root = viewer(title);
  const pages = [docs].flat().flatMap((doc) =>
    doc.pages.map((page) => ({ doc, page, n: (doc.pageIndexOffset ?? 0) + page.index })));
  const spreads = [];
  let verso = null;
  for (const p of pages) {
    if (p.n % 2 === 1) { if (verso) spreads.push([verso, null]); verso = p; }
    else { spreads.push([verso, p]); verso = null; }
  }
  if (verso) spreads.push([verso, null]);
  const density = Math.min(window.devicePixelRatio || 1, 2);
  showPages.painter?.disconnect();
  const painter = new IntersectionObserver((entries) => {
    for (const { isIntersecting, target } of entries) {
      if (!isIntersecting) continue;
      painter.unobserve(target);
      const { doc, page } = target.postext;
      renderPageToCanvas(page, doc, target, { scale: (width * density) / page.width });
    }
  }, { rootMargin: '800px' });
  showPages.painter = painter;
  root.replaceChildren(...spreads.map((pair) => {
    const spread = document.createElement('div');
    spread.className = 'pt-spread';
    for (const p of pair) {
      const figure = document.createElement('figure');
      if (p) {
        const label = p.page.pageLabel || String(p.n + 1);
        const canvas = document.createElement('canvas');
        canvas.postext = p;
        canvas.style.aspectRatio = `${p.page.width} / ${p.page.height}`;
        canvas.setAttribute('role', 'img');
        canvas.setAttribute('aria-label', `Page ${label}`);
        const folio = document.createElement('figcaption');
        folio.textContent = label;
        figure.append(canvas, folio);
        painter.observe(canvas);
      } else figure.className = 'pt-blank';
      spread.append(figure);
    }
    return spread;
  }));
  kitStatus(`${pages.length} ${pages.length === 1 ? 'page' : 'pages'}`);
  document.documentElement.dataset.postext = 'ready';
  return pages.length;
}

/** The desk, the bar and the error reporting, created once. */
function viewer(title) {
  if (!document.getElementById('pt-kit')) {
    document.head.insertAdjacentHTML('beforeend', `<style id="pt-kit">
      :root { color-scheme: dark; }
      body { margin: 0; background: #0e1014; color: #b9bcc4; font: 13px/1.45 system-ui, sans-serif; }
      #pt-bar { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center;
        gap: 6px 16px; padding: 10px 16px; background: rgb(14 16 20 / .92); backdrop-filter: blur(6px);
        border-bottom: 1px solid #23262d; }
      #pt-bar strong { color: #f4f1ea; font-weight: 600; }
      #pt-actions { display: flex; gap: 12px; margin-left: auto; }
      #pt-actions a, #pt-actions button { color: #d8a21a; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
      #pages { display: grid; justify-items: center; gap: 48px; padding: 32px 16px 72px; }
      .pt-spread { display: flex; }
      .pt-spread figure { margin: 0; width: min(460px, 44vw); }
      .pt-spread canvas { display: block; width: 100%; background: #fff;
        box-shadow: 0 1px 2px rgb(0 0 0 / .5), 0 22px 44px -16px rgb(0 0 0 / .8); }
      .pt-spread figure:first-child canvas { box-shadow: inset -14px 0 14px -14px rgb(0 0 0 / .18), 0 1px 2px rgb(0 0 0 / .5), 0 22px 44px -16px rgb(0 0 0 / .8); }
      .pt-spread figcaption { margin-top: 10px; text-align: center; font: 600 10px/1 system-ui, sans-serif;
        letter-spacing: .18em; text-transform: uppercase; color: #6c7079; }
      .pt-blank { visibility: hidden; }
      @media (max-width: 760px) {
        .pt-spread { flex-direction: column; gap: 32px; }
        .pt-spread figure { width: min(460px, 92vw); }
        .pt-blank { display: none; }
      }
    </style>`);
    document.body.insertAdjacentHTML('afterbegin',
      '<header id="pt-bar"><strong id="pt-title"></strong><span id="pt-status" role="status"></span><span id="pt-actions"></span></header>');
    document.getElementById('pt-title').textContent = document.title || 'Postext';
    addEventListener('error', (event) => kitFail(event.error ?? event.message));
    addEventListener('unhandledrejection', (event) => kitFail(event.reason));
  }
  if (title) document.getElementById('pt-title').textContent = title;
  return document.getElementById('pages')
    ?? document.body.appendChild(Object.assign(document.createElement('main'), { id: 'pages' }));
}

function kitStatus(text) {
  viewer();
  document.getElementById('pt-status').textContent = text;
}

function kitFail(error) {
  document.documentElement.dataset.postext = 'error';
  kitStatus(`Error: ${error?.message ?? error}`);
}

// ─── Kit · images v1 ── recipes with pictures · postext.dev/cookbook ──────────
/** Registers a photo or PNG for the canvas and keeps its bytes for the PDF.
 *  fetch → ImageBitmap never taints the canvas (a plain cross-origin <img> would). */
async function loadImage(fileId, url) {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`Image not found (${res.status}): ${url}`);
  const bytes = new Uint8Array(await res.arrayBuffer());
  registerResourceImage(fileId, await createImageBitmap(new Blob([bytes])));
  (loadImage.bytes ??= new Map()).set(fileId, bytes);
}

/** Registers SVG markup (drawn in code, or fetched) as a vector image. */
async function loadSvg(fileId, svg) {
  const img = new Image();
  img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
  await img.decode();
  registerResourceImage(fileId, img);
  (loadImage.bytes ??= new Map()).set(fileId, new TextEncoder().encode(svg));
}

/** renderToPdf({ resourceBytes: imageBytes }) */
function imageBytes(fileId) { return loadImage.bytes?.get(fileId); }

/** renderToHtml({ resourceImageUrl: imageUrl }) */
function imageUrl(fileId) {
  const bytes = imageBytes(fileId);
  if (!bytes) return undefined;
  imageUrl.urls ??= new Map();
  if (!imageUrl.urls.has(fileId)) {
    const type = /\.svg$/i.test(fileId) ? 'image/svg+xml' : /\.png$/i.test(fileId) ? 'image/png' : 'image/jpeg';
    imageUrl.urls.set(fileId, URL.createObjectURL(new Blob([bytes], { type })));
  }
  return imageUrl.urls.get(fileId);
}

// ─── /Kit ───────────────────────────────────────────────────────────────────────