feat(fonts): bundle Baloo 2 + Quicksand via @font-face + preset typography; align alphabet strip to content column

Host does not consume LoadedPlugin.BundledFonts (CMS dead code), so
declare @font-face against the served /templates/kindergarten/fonts/*.woff2
paths and set typography.fontHeading/fontBody in all 5 presets so
--font-heading/--font-body resolve to the bundled families. Also constrain
.kg-alphabet-strip to the .kg-container max-width/inset so its left edge
aligns with every other block (design-review cosmetic note).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

manifest.yaml

@@ -123,8 +123,19 @@ css:
     /* ---- Typography -------------------------------------------- */
     /* Families flow through the admin-bound CSS variables; the
        fallback leads with the bundled OFL family so the intended look
-       survives before the admin assigns a slot. @font-face for the
-       bundled families is auto-emitted from fonts.json. */
+       survives before the admin assigns a slot.
+
+       Bundled display faces. The host does not yet emit @font-face for
+       bundled_fonts (LoadedPlugin.BundledFonts is unconsumed — CMS dead
+       code), so the theme declares its own faces against the served
+       artifact paths (/templates/kindergarten/fonts/...). Presets set
+       typography.fontHeading/fontBody to template:kindergarten:<Family>
+       so --font-heading/--font-body resolve to these families. Weights
+       match fonts.json exactly (Baloo 2 700; Quicksand 400/500 share the
+       400 file, 700 its own). */
+    @font-face { font-family: 'Baloo 2'; src: url('/templates/kindergarten/fonts/baloo2-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'Quicksand'; src: url('/templates/kindergarten/fonts/quicksand-400.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'Quicksand'; src: url('/templates/kindergarten/fonts/quicksand-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
 
     .kg-body {
       font-family: var(--font-body, "Quicksand", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif);
@@ -374,12 +385,17 @@ css:
     .kg-btn-primary { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 0 4px 0 0 hsl(var(--foreground) / 0.15); }
     .kg-btn-outline { background-color: hsl(var(--background)); color: hsl(var(--primary)); border: 3px solid hsl(var(--primary)); }
 
-    /* Alphabet strip (persona block). */
+    /* Alphabet strip (persona block). Aligned to the content column
+       (same max-width + inline padding as .kg-container) so its left
+       edge lines up with every other block instead of sitting flush to
+       the viewport edge; still horizontally scrollable when narrow. */
     .kg-alphabet-strip {
       display: flex;
       flex-wrap: nowrap;
       gap: 0.6rem;
-      padding: 0.6rem 1rem;
+      max-width: 72rem;
+      margin-inline: auto;
+      padding: 0.6rem 1.5rem;
       overflow-x: auto;
       scrollbar-width: thin;
       -webkit-overflow-scrolling: touch;

presets.json

@@ -5,6 +5,10 @@
     "description": "The default — crayon blue, red, and yellow. Bright classroom by day, quiet-time navy by night.",
     "theme": {
       "mode": "both",
+      "typography": {
+        "fontHeading": "template:kindergarten:Baloo 2",
+        "fontBody": "template:kindergarten:Quicksand"
+      },
       "lightColors": {
         "background": "48 55% 98%",
         "foreground": "222 47% 16%",
@@ -55,6 +59,10 @@
     "description": "Warm red-and-sun classroom by day, soft navy with a glow-star yellow for nap time.",
     "theme": {
       "mode": "both",
+      "typography": {
+        "fontHeading": "template:kindergarten:Baloo 2",
+        "fontBody": "template:kindergarten:Quicksand"
+      },
       "lightColors": {
         "background": "40 70% 97%",
         "foreground": "20 40% 18%",
@@ -105,6 +113,10 @@
     "description": "Calm blue-and-teal for reading corners. Deep quiet navy with a teal glow after dark.",
     "theme": {
       "mode": "both",
+      "typography": {
+        "fontHeading": "template:kindergarten:Baloo 2",
+        "fontBody": "template:kindergarten:Quicksand"
+      },
       "lightColors": {
         "background": "205 60% 98%",
         "foreground": "218 45% 16%",
@@ -155,6 +167,10 @@
     "description": "Green-and-orange nature play by day, deep teal-navy with a warm glow for winding down.",
     "theme": {
       "mode": "both",
+      "typography": {
+        "fontHeading": "template:kindergarten:Baloo 2",
+        "fontBody": "template:kindergarten:Quicksand"
+      },
       "lightColors": {
         "background": "90 45% 97%",
         "foreground": "140 35% 15%",
@@ -205,6 +221,10 @@
     "description": "Playful pink-and-purple for toy shops and party rooms. Plum-navy with a soft glow at night.",
     "theme": {
       "mode": "both",
+      "typography": {
+        "fontHeading": "template:kindergarten:Baloo 2",
+        "fontBody": "template:kindergarten:Quicksand"
+      },
       "lightColors": {
         "background": "330 50% 98%",
         "foreground": "300 35% 18%",