page component and filter pilles added

README.md

@@ -53,14 +53,14 @@ The toolbar has three controls:
 - **Show boxes** — outlines each component so the structure is visible.
 - A live viewport width and the active breakpoint.
 
-The wood and the scroll are **demo chrome**, in `src/demo/demo.scss`, not in the
-stylesheet: page layout is still on the to-do list below, and a demo is not the
-place to quietly ship it. The demo is not a build input, so none of it can reach
-`dist/tlig.css` — the build is checked for exactly that.
+What remains demo-only, in `src/demo/demo.scss`, is the toolbar, the swatch
+grid, the section scaffolding, and four `:root` declarations pointing the
+frame's image tokens at this project's local mirror. The demo is not a build
+input, so none of it can reach `dist/tlig.css` — the build is checked for
+exactly that.
 
-The frame is there anyway because a foundation only tells the truth on the
-ground it has to work on. Brown ink at 86% looks arbitrary on white and
-obviously right on papyrus.
+A foundation only tells the truth on the ground it has to work on. Brown ink at
+86% looks arbitrary on white and obviously right on papyrus.
 
 ## Layout
 
@@ -76,8 +76,10 @@ obviously right on papyrus.
         _reset.scss
         _typography.scss
         _links.scss
+      layout/
+        _page.scss      the wood ground and the papyrus scroll
       components/
-        _button.scss  _field.scss  _footer.scss
+        _button.scss  _field.scss  _filter.scss  _footer.scss
     src/fonts/        papyrus-bold (4 scripts) and Lato, self-hosted
     src/demo/         demo page chrome and behaviour — never built
     src/index.html    the demo page
@@ -142,10 +144,26 @@ so the bundle resolves at whatever path it is dropped.
 Lato is self-hosted from the three files already in the child theme, replacing
 the 33 `@font-face` blocks Avada generates from its Google Fonts cache.
 
+## The page frame
+
+`layout/_page.scss` carries the wood ground and the three-piece papyrus scroll.
+Two things it does differently from the live CSS:
+
+- **The image URLs are custom properties.** Swapping the set at a breakpoint is
+  four declarations, where the live CSS duplicates six rules per breakpoint —
+  and again under `html.webp` and `html.no-webp`, for a browser that no longer
+  exists. A demo or a staging copy re-points the tokens instead of editing the
+  stylesheet.
+- **The overlaps are measured, not guessed.** The foot image's top 18px ramp
+  from alpha 15 to its 242 plateau; butt it against the body and that fade
+  composites over bare wood, which reads as a hard line at the body's edge. The
+  overlap is `-20px`: the ramp plus a little. It has to be a margin — the
+  element is static, and `top` only moves a positioned box.
+
 ## Not done yet
 
-- Page-level layout: header, nav, the wood and papyrus backgrounds, `#main`
+- Header and nav
 - Message typography (`.tbody`, `.vassula`, `.jc`, `.god`, the bible-reference
   asides)
-- Menus, bookstore, search, testimonies, downloads
+- Bookstore, search, testimonies, downloads
 - Enqueuing the built CSS from the theme, and retiring `tlig_en.css`