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

css/style.css

@@ -1,4 +1,4 @@
-  :root {
+:root {
   /* size variables */
   /* more pronounced, perfect fifth on narrow screens */
   /* @link https://utopia.fyi/type/calculator?c=360,16,1.5,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
@@ -57,12 +57,34 @@
   --oc-violet-4: #9775fa;
   --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>