asdfdas

src/components/home/Contact.astro

@@ -54,7 +54,7 @@ const f = ui.contact.form;
     </form>
   </div>
 
-  <!-- The form's answer, as a toast in the lower left. Framed like the menu, on night. -->
+  <!-- The form's answer, as a toast in the lower right. Framed like the menu, on night. -->
   <div
     class="toast hud-frame"
     data-toast

src/components/home/Insights.astro

@@ -71,14 +71,19 @@ const m = ui.insights.mention;
   .insights__card:hover h3 { text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: 0.12em; }
   .insights__img, :global(.insights__img) { width: 100%; height: auto; aspect-ratio: 4 / 1; object-fit: cover; object-position: 50% 15%; margin-bottom: var(--space-2); }
   .insights__card h3 { max-width: 18em; }
-  /* No picture: a colour field carries the source in large type. */
+  /* No picture: a colour field carries the source in large type, centred in the short strip,
+     with the field's darkening moved behind it. */
   :global(.insights__panel) {
+    --field-scrim: var(--field-scrim-centre);
     aspect-ratio: 4 / 1;
     margin-bottom: var(--space-2);
     font-size: var(--step-title);
     line-height: var(--leading-title);
     letter-spacing: var(--track-h2);
   }
+  /* Field's own scoped rule (a class and an attribute) puts its text at the bottom; three
+     classes outrank it whatever order the stylesheets load in. */
+  :global(.insights__card .field.insights__panel) { justify-content: center; }
   @media (min-width: 48rem) {
     .insights__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   }