Add catalog subject banner feature: Introduce optional header images for subjects in the catalog, update CONTRIBUTING.md with guidelines for adding banners, and modify catalog data structure to support banner URLs. Enhance frontend components and styles to display banners effectively. Update TypeScript types and curriculum structure to accommodate new banner functionality.

content/math/written-calculation/supplement.html

@@ -0,0 +1,129 @@
+<div class="book-prose">
+  <h2 id="history" class="book-prose__heading">History</h2>
+  <p>
+    People calculated with tokens, rods, and abacuses long before everyone used pencil and paper. In many
+    places, including China, India, and the Arab world, scribes lined up digits in columns so addition
+    and subtraction could be done digit by digit.
+  </p>
+  <p>
+    <strong>Mechanical calculators</strong> (1600s–1900s) had to solve the same puzzle: when one wheel
+    moved from 9 to 0, it had to add 1 to the wheel for the next place. Early machines often did addition
+    first, then ran a separate <strong>carry cycle</strong> to update higher digits. Later designs passed
+    the carry instantly along the whole machine. That idea appears again inside modern chips: a
+    <strong>carry flag</strong> records whether the last step overflowed a column.
+  </p>
+
+  <h2 id="derivation" class="book-prose__heading">Derivation</h2>
+  <h3 id="place-value-add" class="book-prose__heading">Why column addition works</h3>
+  <p>
+    Split each number by place value. For example,
+    \(27 + 59 = (20 + 7) + (50 + 9) = (20 + 50) + (7 + 9) = 70 + 16 = 86\). The ones column adds
+    \(7 + 9\); the tens column adds \(2 + 5\) plus any carry. Each column only mixes the same place —
+    that is why alignment matters.
+  </p>
+  <h3 id="inverse" class="book-prose__heading">Subtraction and addition</h3>
+  <p>
+    Subtraction is the inverse of addition: \(c = a - b\) means the same as \(c + b = a\). Borrowing
+    moves one ten from the left so the subtraction in the current column matches that story.
+  </p>
+
+  <h2 id="checkpoints" class="book-prose__heading">Checkpoints</h2>
+  <div class="book-callout" role="note">
+    <p class="book-callout__label">Checkpoint</p>
+    <p>When you add 7 and 9 in the ones column, what do you write in the ones place? What do you carry?</p>
+  </div>
+  <div class="book-callout" role="note">
+    <p class="book-callout__label">Checkpoint</p>
+    <p>In \(47 - 19\), why does the 4 in the tens column become 3 before you subtract the ones?</p>
+  </div>
+  <div class="book-callout" role="note">
+    <p class="book-callout__label">Checkpoint</p>
+    <p>In \(23 \times 14\), why are there two rows under the line before the final sum?</p>
+  </div>
+
+  <h2 id="applications" class="book-prose__heading">Real life</h2>
+  <ul>
+    <li><strong>Shopping</strong> — adding prices on a receipt column by column.</li>
+    <li><strong>Scores</strong> — finding the difference between two team totals.</li>
+    <li><strong>Sharing</strong> — dividing a total equally (e.g. \(157\) stickers among \(12\) children: quotient 13, remainder 1).</li>
+  </ul>
+
+  <h2 id="questions-easy" class="book-prose__heading">Question bank — Easy</h2>
+  <details class="book-question">
+    <summary class="book-question__prompt">Work out \(34 + 25\).</summary>
+    <div class="book-question__solution">
+      <pre class="va-static">  34
++ 25
+────
+  59</pre>
+      <p><strong>Answer:</strong> 59</p>
+    </div>
+  </details>
+  <details class="book-question">
+    <summary class="book-question__prompt">Work out \(61 - 28\).</summary>
+    <div class="book-question__solution">
+      <p><strong>Answer:</strong> 33 (borrow from tens in the ones column).</p>
+    </div>
+  </details>
+
+  <h2 id="questions-intermediate" class="book-prose__heading">Intermediate</h2>
+  <details class="book-question">
+    <summary class="book-question__prompt">Work out \(27 + 59\).</summary>
+    <div class="book-question__solution">
+      <pre class="va-static"><span class="va-static__carry">¹</span>
+  27
++ 59
+────
+  86</pre>
+      <p><strong>Answer:</strong> 86</p>
+    </div>
+  </details>
+  <details class="book-question">
+    <summary class="book-question__prompt">Work out \(503 - 278\).</summary>
+    <div class="book-question__solution">
+      <p><strong>Answer:</strong> 225</p>
+      <p><strong>Steps:</strong> Borrow across the tens (0) from hundreds; ones become 13−8=5; tens 9−7=2; hundreds 4−2=2.</p>
+    </div>
+  </details>
+  <details class="book-question">
+    <summary class="book-question__prompt">Work out \(23 \times 14\).</summary>
+    <div class="book-question__solution">
+      <p><strong>Answer:</strong> 322</p>
+    </div>
+  </details>
+
+  <h2 id="questions-difficult" class="book-prose__heading">Difficult</h2>
+  <details class="book-question">
+    <summary class="book-question__prompt">Work out \(156 \div 12\).</summary>
+    <div class="book-question__solution">
+      <p><strong>Answer:</strong> 13</p>
+    </div>
+  </details>
+  <details class="book-question">
+    <summary class="book-question__prompt">Work out \(157 \div 12\) and state the remainder.</summary>
+    <div class="book-question__solution">
+      <p><strong>Answer:</strong> Quotient 13, remainder 1.</p>
+    </div>
+  </details>
+
+  <h2 id="questions-hardcore" class="book-prose__heading">Hardcore</h2>
+  <details class="book-question">
+    <summary class="book-question__prompt">A book has 864 pages. You read 379 pages. How many pages are left?</summary>
+    <div class="book-question__solution">
+      <p><strong>Answer:</strong> \(864 - 379 = 485\) pages.</p>
+    </div>
+  </details>
+  <details class="book-question">
+    <summary class="book-question__prompt">A classroom orders 24 packs of 15 pencils. How many pencils is that?</summary>
+    <div class="book-question__solution">
+      <p><strong>Answer:</strong> \(24 \times 15 = 360\) pencils.</p>
+    </div>
+  </details>
+
+  <h2 id="references" class="book-prose__heading">References</h2>
+  <ul>
+    <li>Wikipedia — <em>Carry (arithmetic)</em> and <em>Subtraction</em>.</li>
+    <li>Cajori, Florian — <em>A History of Mathematical Notations</em>.</li>
+    <li>Other school methods (Austrian/additions, partial differences) exist; this chapter uses column borrow as in most HK primary texts.</li>
+  </ul>
+</div>