more comm page stuff

comms.css

@@ -1,4 +1,4 @@
-@import url(style.css);
+@import url(base.css);
 
 :root {
   --img-width: 1050px;
@@ -6,22 +6,31 @@
 }
 
 
-main {
-    max-width: calc(var(--img-width) + 150px);
+main { max-width: calc(var(--img-width) + 150px); }
+
+h1 {
+  font-size: 250%;
+  --around-image: url(media/sparkles.svg);
+}
+
+#examples, #examples > * {
+  height: var(--img-height);
+  width:  var(--img-width);
 }
 
 #examples {
-  height: var(--img-height);
+  overflow: hidden;
+  position: relative;
+}
 
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-
-  filter: drop-shadow(0 0 30px var(--glow-col));
+#examples > * {
+  position: absolute;
+  top: 0px; left: 0px;
+  margin: 0;
 }
 
 #examples, #terms {
   width: var(--img-width);
-  padding: 1.5em;
   box-sizing: border-box;
   margin: 1em auto;
 
@@ -29,42 +38,40 @@ main {
   border-radius: 1em;
 }
 
-#examples section {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+#examples dl {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
 }
 
-h2::before, h2::after {
-  content: none;
-}
-
-#examples section > * {
+#examples dl > * {
   background: hsla(320deg, 40%, 20%, 60%);
   font-size: 200%;
   font-weight: 500;
   margin: 0;
+  padding: 0.125em 0 0.25em;
 }
 
-#terms { background: hsla(0deg, 0%, 100%, 75%); }
+#examples dt { grid-area: 1; align-self: start; }
+#examples dd { grid-area: 2; align-self: end;   }
+
+#examples a { font-weight: 600; }
+
+#examples dl { pointer-events: none; }
+#examples a  { pointer-events: auto; }
 
 #terms {
+  padding: 1.5em;
   text-align: left;
 
+  background: hsla(45deg, 90%, 98%, 75%);
   color: black;
   text-shadow: none;
   font-weight: 400;
 }
 
-details {
-  margin-top: 1em;
-}
-
-summary > * {
-  display: inline;
-}
-
 @media (prefers-contrast: high), (prefers-color-scheme: dark) {
-  #terms { background: hsla(0deg, 0%, 0%, 65%); }
-  #terms { color: white; }
+  #terms {
+    background: hsla(0deg, 0%, 0%, 65%);
+    color: white;
+  }
 }