WP test container created

src/demo/demo.scss

@@ -12,18 +12,11 @@
 
 @use '../sass/abstracts' as *;
 
+// The scroll frame is a real component now (`layout/_page.scss`), and its image
+// tokens already point at this project's own art directory — so the demo no
+// longer overrides anything. It only adds its own chrome below.
 $img: '/wp-content/includes/images';
 
-// The scroll frame is a real component now (`layout/_page.scss`). All the demo
-// does is point its four image tokens at the local mirror in `site/`, which is
-// exactly the re-pointing the component was built to allow.
-:root {
-  --tlig-ground: url('#{$img}/background_planche_1920.jpg');
-  --tlig-scroll-head: url('#{$img}/page/background-message-entete_cnd.png.webp');
-  --tlig-scroll-body: url('#{$img}/page/background-message-milieux1200x190-4_cnd.png.webp');
-  --tlig-scroll-foot: url('#{$img}/page/background-message-footer-1200x114_cnd.png.webp');
-}
-
 body {
   min-height: 100vh;
 }
@@ -90,6 +83,52 @@ body {
   align-items: center;
 }
 
+// -- Parchment ladder --------------------------------------------------------
+
+.parchment-ladder {
+  display: flex;
+  flex-direction: column;
+  gap: space('lg');
+}
+
+.parchment-row {
+  &__key {
+    margin-block-end: space('2xs');
+    font-family: font('body');
+    font-size: 11px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: $brown-600;
+  }
+
+  &__caption {
+    margin-block: space('2xs');
+    font-family: font('body');
+    font-size: 11px;
+    font-style: italic;
+    color: $brown-600;
+  }
+
+  // Both panels occupy an identical box, so the only difference on screen is
+  // rendering fidelity. `fill` reproduces what the live site does to the
+  // bitmap today — `background-size: cover` stretches it just like this.
+  img {
+    width: 100%;
+    object-fit: fill;
+  }
+
+  &__none {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px dashed rgba(145, 116, 85, 0.5);
+    font-family: font('body');
+    font-size: 12px;
+    font-style: italic;
+    color: $brown-600;
+  }
+}
+
 // -- Swatches ----------------------------------------------------------------
 
 .swatch-grid {