--- a/doc/_static/style.css	Tue Apr 25 18:45:58 2023 -0400
+++ b/doc/_static/style.css	Tue Apr 25 18:53:25 2023 -0400
@@ -1,12 +1,86 @@
 /* layout*/
+
+/* Set up fluid type scale. Major third for smaller screens
+   and perfect fourth for larger screens.
+   Allow override using --font-level-X.
+
+   https://set.studio/some-simple-ways-to-make-content-look-good/
+*/
+
+:root {
+  --_font-level-0: var(--font-level-0,
+		       clamp(1rem,
+			     0.96rem + 0.22vw,
+			     1.13rem)
+		      );
+  --_font-level-1: var(--font-level-1,
+		       clamp(
+			   1.25 * var(--_font-level-0),
+			   1.16rem + 0.43vw,
+			   1.5rem)
+		      );
+  --_font-level-2: var(--font-level-2,
+		       clamp(
+			   1.25 * var(--_font-level-1),
+			   1.41rem + 0.76vw,
+			   2rem)
+		      );
+  --_font-level-3: var(--font-level-3,
+		       clamp(
+			   1.25 * var(--_font-level-2),
+			   1.71rem + 1.24vw,
+			   2.66rem)
+		      );
+  --_font-level-4: var(--font-level-4,
+		       clamp(
+			   1.25 * var(--_font-level-3),
+			   2.05rem + 1.93vw,
+			   3.55rem)
+		      );
+}
+
+h1, h2, h3, h4, h5, h6 {
+    line-height: 1.25;
+    /* Larger spacing before header and smaller after to make
+       header part of following section */
+    margin-block-end: 0.3em;
+}
+
+h1 {
+    font-size: var(--_font-level-4);
+}
+
+/* remove whitespace at top of main column */ 
+main h1 { margin-block-start: 0; }
+
+h2 {
+  font-size: var(--_font-level-3);
+}
+
+h3 {
+  font-size: var(--_font-level-2);
+}
+
+h4 {
+  font-size: var(--_font-level-1);
+}
+
+/* snug header up to first paragraph of it's section. */
+:is(h1,h2,h3,h4,h5,h6) + p {
+    margin-block-start: 0;
+}
+
 body 
 {
+  background-color: #f5f5f5;
+  color: #222;
   font-family: sans-serif, Arial, Helvetica;
-  background-color: white;
-  color: #333;
+  font-size: var(--_font-level-0);
   margin:0;
   padding: 0 3em 0 14em;
 }
+
+/* -14em is size of table of contents/nav */
 body > .header { margin: 0 0 0 -14em;}
 body > .header div.label { font-size: 2em; font-weight: bold; margin: 0.67em 0 0.67em 1em;}
 body > .footer { margin: 1em 0 1em -14em; clear:both;}
@@ -18,40 +92,86 @@
 }
 body > .content 
 {
+  margin: 0;
   width: 100%;
-  margin: 0;
 }
 body > .header > #searchbox { position: absolute; right: 1em; top: 1em;}
+body > .content > #subnav    { position: absolute; right: 1.5em; top: 6em;}
+
+/* limit width of main column to 65 characters. On wider screens can
+   be 100+ chars: too wide */
+main {
+  max-width: 65ch;
+  line-height: calc(1.5 * 1em);
+}
 
 /* style */
 
 :link { color: #bb0000; text-decoration: none;}
+:link:hover {text-decoration: underline;}
 :visited { color: #770000; text-decoration: none;}
 a.toc-backref { color: #000000; }
 
 .header h1 { margin-left: 1em; }
 
-body
+.menu { padding: 0; margin-right: 1em;}
+.menu ul 
 {
-  font-family: sans-serif, Arial, Helvetica;
-  background-color: #f5f5f5;
-  color: #333;
+  padding: 0;
+  margin: 0;
 }
-
-.menu 
+.menu li
 {
-  margin-right: 1em;
-  padding: 2pt;
+  margin: 5pt 0;
+}
+.menu > ul > li > *
+{ 
+  display: block;
+  padding: 2pt 2pt 2pt 10pt;
   border: solid thin #dadada;
   background-color:#ffffff;
 }
-.menu ul { list-style-type:none; padding: 0;}
-.menu ul ul { padding-left: 1em;}
-.menu li { border-top: solid thin #dadada;}
-.menu li:first-child { border-top: none;}
+.menu > ul > li.current > *
+{ 
+  background-color:#dddddd;
+}
+
+.menu ul li:first-child { margin-top:0;}
+.menu ul { list-style-type:none;}
+
+/* sub-menus are indented */ 
+.menu > ul > li > ul,
+.menu > ul > li.current > ul
+{
+  border:none;
+  background-color: inherit;
+}
+.menu ul ul 
+{
+  margin-left: 1em;
+  font-size: smaller;
+}
+
+/* sub-menu items draw a separator */
+.menu ul ul > li 
+{  
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-top: solid thin #dadada;
+  background-color: inherit;
+}
+.menu ul ul > li:first-child
+{  
+  border-top: none;
+}
+
+.menu ul li.toctree-l2.current {
+  background-color: #dddddd;
+  pading-block: 0.25em;
+}
 
 /* related */
-
 div.related 
 {
   width: 100%;
@@ -79,14 +199,18 @@
 {
   font-size: small;
   text-align: center;
-  color: lightgrey;
+  color: black;
+}
+
+.footer img {
+  vertical-align: middle;
 }
 
 .content
 { 
   padding: 1em;
   border: solid thin #dadada;
-  background-color: #ffffff;
+  background-color: #f7f7f7;
 }
 
 /* This is a little hack to inject a 'news' block into the title
@@ -109,16 +233,36 @@
   background-color: #fafafa;
 }
 
+table:has(caption) {
+    margin-block: 1em;
+}
+
+table caption { font-weight: bold; font-size: smaller; }
+
+table.footnote {
+  font-size: calc(1em - 1pt);
+}
+
+td {
+  /* pull text away from borders */
+  padding-inline: 0.5em;
+}
+
+td > p {
+  /* remove top margin on a p inside table cell so that
+     columns with paragraphs align at top of cell rather
+     than leaving a blank margin */
+  margin-block-start: 0px;
+}
+
+input, textarea { border-width: 1px; }
+
 a.headerlink {
   font-size: 0.8em;
   margin-left: 0.3em;
   color: #c99;
 }
 
-table.footnote {
-  font-size: calc(1em - 1pt);
-}
-
 div.admonition {
   padding-inline: 1em;
   padding-block: 0.25em;
@@ -147,3 +291,25 @@
 
 dt { font-weight: bold; margin-block-start: 1em;}
 dd p.first { margin-block-start: 0; }
+
+#skiplink { display: block;
+                   margin-block-start: 1em;
+                   margin-inline-start: 1em;}
+#skiplink a {
+  /* force stuff for screenreader off screen */
+  position:absolute;
+  left:-10000px;
+  top:auto;
+  width:1px;
+  height:1px;
+  overflow:hidden;
+  padding: 0 0.75em;
+  font-weight: bold;
+}
+#skiplink a:focus { position: static;
+                    width: auto;
+                    height: auto; }
+
+/* remove solid black border when focus is around the main section
+   due to activation of skip-link. Page jumps there, that's enough. */
+#main:focus-visible {outline: none;}