css,ori-templates: margin-inline on body > * instead of body to allow figures to grow

css/style.css

@@ -58,11 +58,33 @@
   --oc-violet-9: #5f3dc4;
 
 }
+
 body {
   font-family: "sans-serif";
-  margin: 0 auto;
+  & > :not(.wider) {
-  max-width: 66ch;
+    max-width: 38rem;
+    margin-inline: auto;
   }
+
+  & > .wider {
+    max-width: min(55rem, 100%);
+    margin-inline: auto;
+  }
+}
+
+figure img {
+  max-width: 100%;
+}
+
+figcaption {
+  margin-inline: auto;
+  width: max-content;
+}
+
+trl-group {
+  display: block;
+}
+
 @layer translations {
   body > trl-selector:first-child {display: none;} /* was adding a grid row! */
   trl-selector {

ori-templates/page.ori

@@ -4,7 +4,7 @@
   title: page.title
   _body: Tree.indent`
   <h1>${page.title}</h1>
-  <span>${page.fnd.addr} ${page.fnd.tags || ''}</span>
+  <p><span>${page.fnd.addr} ${page.fnd.tags || ''}</span></p>
   ${page._body}
   <a href="/">↖index</a>
 `

ori-templates/pageSummaries.ori.html

@@ -3,6 +3,6 @@
 ---
 <article>
   <a href=${key}><h1>${value.title}</h1></a>
-  <span>${value.fnd.addr} ${value.fnd.tags || ''}</span>
+  <p><span>${value.fnd.addr} ${value.fnd.tags || ''}</span></p>
   ${value.summary || ""}
 </article>