fix(fonts): wire fonts.css to actual Manrope + Opificio binaries

- Add @font-face for every Manrope weight 200-800 (incl. new Light/300)
- Map Opificio cuts to lowercase filenames as installed:
  * opificio_light/regular/bold.woff2 -> family "Opificio" (300/400/700)
  * opificio_light_rounded/rounded/bold_rounded.woff2 -> family "Opificio Rounded"
- Restore Opificio README with the actual file -> CSS-weight mapping
- Update Manrope README to list the installed weights

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

assets/fonts/Manrope/README.md

@@ -3,10 +3,10 @@
 Primary UI typeface for Kode Design Consultants — used for all headings, body
 copy, captions, and the secondary line of the wordmark lockup.
 
-Drop the licensed binaries here:
+Installed weights:
 
-- Manrope-Variable.woff2 (preferred, weights 200–800)
 - Manrope-ExtraLight.woff2 (200) — secondary wordmark line
+- Manrope-Light.woff2 (300)
 - Manrope-Regular.woff2 (400)
 - Manrope-Medium.woff2 (500)
 - Manrope-SemiBold.woff2 (600)

assets/fonts/Opificio/README.md

@@ -1,12 +1,31 @@
 # Opificio
 
 Display typeface for Kode Design Consultants — used **only** for the `kode`
-wordmark and headline display moments. Bold is the canonical cut.
+wordmark and headline display moments. Bold is the canonical wordmark cut.
 
-Drop the licensed binaries here:
+## Files
 
-- Opificio-Bold.woff2     — canonical wordmark cut
+Squared cuts → CSS family **`Opificio`**
-- Opificio-Rounded.woff2  — editorial / friendly variant
+
-- Opificio-Regular.woff2  — used sparingly
+| File | CSS weight |
+|------|------------|
+| `opificio_light.woff2`   | 300 |
+| `opificio_regular.woff2` | 400 |
+| `opificio_bold.woff2`    | 700 |
+
+Rounded cuts → CSS family **`Opificio Rounded`**
+
+| File | CSS weight |
+|------|------------|
+| `opificio_light_rounded.woff2` | 300 |
+| `opificio_rounded.woff2`       | 400 |
+| `opificio_bold_rounded.woff2`  | 700 |
+
+## Usage
+
+```css
+.wordmark        { font-family: "Opificio";         font-weight: 700; }
+.wordmark-soft   { font-family: "Opificio Rounded"; font-weight: 700; }
+```
 
 Confirm Opificio's licensing terms with the foundry before redistributing.

assets/fonts/fonts.css

@@ -1,41 +1,104 @@
 /* Kode Design Consultants — font-face declarations.
    Self-host these files from /assets/fonts/. */
 
-/* Manrope — primary UI typeface (variable, 200–800). */
+/* ===== Manrope — primary UI typeface (200–800) ===== */
 @font-face {
   font-family: "Manrope";
   font-style: normal;
-  font-weight: 200 800;
+  font-weight: 200;
   font-display: swap;
-  src: url("./Manrope/Manrope-Variable.woff2") format("woff2-variations"),
+  src: url("./Manrope/Manrope-ExtraLight.woff2") format("woff2");
-       url("./Manrope/Manrope-Regular.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Manrope";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("./Manrope/Manrope-Light.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Manrope";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./Manrope/Manrope-Regular.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Manrope";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("./Manrope/Manrope-Medium.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Manrope";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("./Manrope/Manrope-SemiBold.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Manrope";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("./Manrope/Manrope-Bold.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Manrope";
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("./Manrope/Manrope-ExtraBold.woff2") format("woff2");
 }
 
-/* Opificio — display / wordmark only.
+/* ===== Opificio — display / wordmark only =====
-   Three cuts: Bold (canonical), Rounded, Regular. */
+   Family "Opificio"          → squared cuts (Light 300, Regular 400, Bold 700)
+   Family "Opificio Rounded"  → rounded cuts (Light 300, Regular 400, Bold 700) */
 @font-face {
   font-family: "Opificio";
   font-style: normal;
-  font-weight: 700;
+  font-weight: 300;
   font-display: swap;
-  src: url("./Opificio/Opificio-Bold.woff2") format("woff2");
+  src: url("./Opificio/opificio_light.woff2") format("woff2");
-}
-@font-face {
-  font-family: "Opificio Rounded";
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url("./Opificio/Opificio-Rounded.woff2") format("woff2");
 }
 @font-face {
   font-family: "Opificio";
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url("./Opificio/Opificio-Regular.woff2") format("woff2");
+  src: url("./Opificio/opificio_regular.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Opificio";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("./Opificio/opificio_bold.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Opificio Rounded";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("./Opificio/opificio_light_rounded.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Opificio Rounded";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./Opificio/opificio_rounded.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Opificio Rounded";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("./Opificio/opificio_bold_rounded.woff2") format("woff2");
 }
 
-/* Roboto Mono — code / tabular figures only. Not a brand typeface. */
+/* ===== Roboto Mono — code / tabular figures only (not a brand typeface) ===== */
 @font-face {
   font-family: "Roboto Mono";
   font-style: normal;