Give the reference quadrant a landing page of cards

changelog/330.documentation.rst

@@ -0,0 +1,7 @@
+The reference quadrant's landing page is now a grid of seven cards, each with an
+icon drawn in the root page's vocabulary, in place of an introduction that listed
+its pages by hand (narrative spec §3.9). ``tests/test_docs_landing_pages.py``
+holds the cards to the page's hidden toctree as it holds the other sections'
+tables, and now refuses an entry that reaches outside its section with ``..``.
+The root page's cards share the renamed ``teph-card`` classes, and its dark
+*Tutorials* icon no longer rings its accent on the dark ground. (:user:`claude`)

docs/src/_static/tephpy.css

@@ -66,7 +66,8 @@
 }
 
 /*
- * The four Diátaxis quadrant cards on the landing page.
+ * The landing pages' cards: the root page's four Diátaxis quadrants, and the
+ * reference quadrant's seven (narrative spec §3.9).
  *
  * The icon is a pair of images rather than sphinx-design's `:img-top:`, which
  * takes one path and so cannot carry a light and a dark drawing. The pair is
@@ -80,30 +81,35 @@
  * a white background to every `.bd-content img` on top of that -- two rules of
  * different reach, and the class is the opt-out named in both.
  */
-.teph-quadrant-icon {
+.teph-card-icon {
   display: block;
   margin: 0 0 0.6rem;
   width: 56px;
 }
 
 /*
  * Beside the text once there is room for it, above the text when there is not.
- * `.. grid:: 2` is two columns at *every* breakpoint -- the emitted row carries
+ * The root page's `.. grid:: 2` is two columns at *every* breakpoint -- the
+ * emitted row carries
  * `sd-row-cols-xs-2` through `sd-row-cols-lg-2` -- so a phone gets two cards of
  * about 150px, and an icon indented out of the flow left "Understanding-
  * oriented background." wrapping one word per line. Measured in Chromium at a
  * 360px viewport against the built page. The rule is written mobile-first so
  * the narrow layout needs no override: an `only-light`/`only-dark` image is
  * hidden with `display: none !important` and any `display` this sets would lose
  * to it anyway, but nothing here has to know that.
+ *
+ * The reference quadrant's `.. grid:: 1 2 2 2` is one column below 576px, so its
+ * cards never meet that width. Above the icon, the root page's longest segment
+ * still splits at 360px (:issue:`328`).
  */
 @media (min-width: 576px) {
-  .teph-quadrant .sd-card-body {
+  .teph-card .sd-card-body {
     padding-left: 84px;
     position: relative;
   }
 
-  .teph-quadrant-icon {
+  .teph-card-icon {
     left: 16px;
     margin: 0;
     position: absolute;