Report what a study cites instead of scoring it, and fix the phone

CLAUDE.md

@@ -63,6 +63,46 @@ are to raise the threshold, weight the `hasRCT` and `hasMeta` signals that the
 implying a distinction the data does not carry. Picking one is the owner's
 call.
 
+**What changed on 2026-09-23 is what the interface shows, not the field.** A
+constant is survivable in a data file and not on a page: `strong` was printed
+on all 204 cards, and `study.html` drew it as a filled meter reading "Strong
+Evidence Base" at 80 or 90 per cent. A bar at 80 per cent implies a measurement
+against a maximum; there is no maximum and nothing was measured.
+
+The two signals the tier short-circuits past are **not** constants, and they
+are now computed into `master-list.json` by `evidenceSignals()` and reported
+rather than scored:
+
+| signal | studies |
+|---|---|
+| cites experimental or quasi-experimental work | 61 of 204 |
+| cites a systematic review or meta-analysis | 7 of 204 |
+
+The card footer carries the reference count (4 or 5, so it says something) and
+a marker for the stronger of the two signals. The study page states both as
+facts. And the sidebar has an **Evidence facet** filtering on them, with both
+selected meaning *both* rather than either, because a reader asking for
+experimental work and a review wants the studies carrying both.
+
+`evidenceTier()` is untouched and still returns `strong` for all 204. When the
+editorial question is settled, that is the one function to change.
+
+## The interface on a phone
+
+Three things were measured at 390x844 on 2026-09-23 and fixed:
+
+- **The site had no name.** `.site-logo span:last-child { display: none }` at
+  480px left a blue square in the corner and nothing else. The wordmark
+  shortens to "Dev" instead, which the markup carries in its own span.
+- **The welcome panel filled the whole first screen.** Over 600px of
+  explanation before a single study, so a visitor landed on a help panel rather
+  than on a library. Its feature grid is hidden and its description clamps to
+  three lines below 700px; the panel is still dismissible and the text is still
+  there. Two study cards are now above the fold.
+- **The card footer put "Read study" and "5 sources" each across two lines**,
+  because a link and three metadata items were competing for one row. The link
+  takes its own line below 460px.
+
 ## Watch out for
 
 - **The sitemap uses query strings.** Every study is

about.html

@@ -39,7 +39,7 @@
     <div class="container">
       <a href="./index.html" class="site-logo">
         <span class="site-logo-icon" aria-hidden="true"><span class="si"><svg viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg></span></span>
-        <span>Dev Case Studies</span>
+        <span>Dev<span class="site-logo-long"> Case Studies</span></span>
       </a>
       <nav class="site-nav" aria-label="Main navigation">
         <span class="eco-nav" aria-label="ImpactMojo libraries">

css/style.css

@@ -1046,7 +1046,11 @@ h1, h2, h3, h4, h5, h6 {
   .container, .container-full { padding: 0 var(--sp-3); }
   .index-main { padding: var(--sp-3); }
   .card-body { padding: var(--sp-3); }
-  .site-logo span:last-child { display: none; }
+  /* The wordmark used to be display:none here, so on a phone the site had no
+     name at all — a blue square in the corner and nothing else. It shortens
+     instead: the CSS hides the words after the first, which the markup now
+     carries in its own span. */
+  .site-logo .site-logo-long { display: none; }
   .cornell-grid { grid-template-columns: 1fr; }
   .cornell-cues { border-right: none; border-bottom: 2px solid var(--accent-warm); }
 }
@@ -1510,3 +1514,59 @@ select:focus-visible,
 .eco-link:hover { color: var(--accent); }
 .eco-link.current { color: var(--accent); border-bottom-color: var(--accent); }
 @media (max-width: 900px) { .eco-nav { display: none; } }
+
+
+/* ── Evidence facet ──────────────────────────────────────────────────────── */
+.filter-note {
+  font-size: 0.72rem;
+  line-height: 1.5;
+  color: var(--text-muted, #6b7280);
+  margin: 8px 2px 0;
+}
+
+/* The card footer used to carry the word "strong", on all 204 cards, because
+   the tier it came from returns 'strong' for every study in the library. A
+   constant in the position a reader reads as an assessment. It carries the
+   reference count now, which is 4 or 5 and therefore says something, and a
+   marker for the two signals that actually vary across the library. */
+.card-refs {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 0.72rem; color: var(--text-muted, #6b7280);
+  font-variant-numeric: tabular-nums;
+}
+.card-signal {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em;
+  padding: 2px 7px; border-radius: 999px;
+  color: var(--accent, #1d4ed8);
+  background: color-mix(in srgb, var(--accent, #1d4ed8) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent, #1d4ed8) 22%, transparent);
+}
+.evidence-facts { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
+.evidence-fact {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-size: 0.82rem; color: var(--text-2, #374151);
+}
+.evidence-fact strong { font-variant-numeric: tabular-nums; }
+
+/* On a phone the welcome panel filled the whole first screen, so a visitor
+   landed on an explanation rather than on the library. Collapsed to its
+   headline and opening sentence below 700px; the rest is still there for
+   anyone who opens it. */
+@media (max-width: 700px) {
+  .welcome-features { display: none; }
+  .welcome-desc {
+    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+
+/* At 390px the card footer put "Read study" and "5 sources" each over two
+   lines, because the link and three metadata items were competing for one
+   row. The link keeps its own line and the metadata sits under it. */
+@media (max-width: 460px) {
+  .card-footer { flex-direction: column; align-items: flex-start; gap: 10px; }
+  .card-link { white-space: nowrap; }
+  .card-footer-meta { flex-wrap: wrap; gap: 6px 10px; }
+  .card-refs { white-space: nowrap; }
+}