feat(admissions): promote verdict to headline, move above Q&A

The Oversubscribed badge + "Demand exceeds capacity" text lived at
the bottom of the tile as an afterthought. It's the headline finding —
a parent should read it first, then let the Q&A supply the detail.

Replace the footer badge with a Playfair Display sentence directly
under the section title: "This school is oversubscribed." (state word
coloured coral for oversubscribed, teal for undersubscribed). The
"Demand exceeds capacity" / "Supply meets demand" line sits below as
quiet muted text — present for context but not competing with the
headline.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

nextjs-app/components/SchoolDetailView.module.css

@@ -980,19 +980,31 @@
 }
 
 .admissionsVerdict {
-  margin-top: 1rem;
-  padding-top: 0.9rem;
-  border-top: 1px solid var(--border-color, #e5dfd5);
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  font-size: 0.85rem;
-  color: var(--text-secondary, #5c564d);
-  flex-wrap: wrap;
+  margin-top: 0.75rem;
+  margin-bottom: 0.25rem;
 }
 
-.admissionsVerdictText {
+.admissionsVerdictHeadline {
+  font-family: var(--font-playfair), 'Playfair Display', Georgia, serif;
+  font-size: 1.35rem;
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--text-primary, #1a1612);
+}
+
+.admissionsVerdictOver {
+  color: var(--accent-coral-dark, #c45a3f);
+}
+
+.admissionsVerdictUnder {
+  color: var(--accent-teal, #2d7d7d);
+}
+
+.admissionsVerdictSub {
+  font-size: 0.8rem;
+  color: var(--text-muted, #6d685f);
   line-height: 1.4;
+  margin-top: 0.2rem;
 }
 
 @media (max-width: 480px) {

nextjs-app/components/SchoolDetailView.tsx

@@ -788,6 +788,21 @@ export function SchoolDetailView({
         <section id="admissions" className={styles.card}>
           <h2 className={styles.sectionTitle}>How Hard to Get Into This School ({formatAcademicYear(admissions.year)})</h2>
 
+          {admissions.oversubscribed != null && (
+            <div className={styles.admissionsVerdict}>
+              <div className={styles.admissionsVerdictHeadline}>
+                This school is{' '}
+                <span className={admissions.oversubscribed ? styles.admissionsVerdictOver : styles.admissionsVerdictUnder}>
+                  {admissions.oversubscribed ? 'oversubscribed' : 'not oversubscribed'}
+                </span>
+                .
+              </div>
+              <div className={styles.admissionsVerdictSub}>
+                {admissions.oversubscribed ? 'Demand exceeds capacity.' : 'Supply meets demand.'}
+              </div>
+            </div>
+          )}
+
           <dl className={styles.admissionsQa}>
             {admissions.places_offered != null && (
               <div className={styles.admissionsQaRow}>
@@ -825,17 +840,6 @@ export function SchoolDetailView({
               </div>
             )}
           </dl>
-
-          {admissions.oversubscribed != null && (
-            <div className={styles.admissionsVerdict}>
-              <span className={`${styles.admissionsBadge} ${admissions.oversubscribed ? styles.statusWarn : styles.statusGood}`}>
-                {admissions.oversubscribed ? 'Oversubscribed' : 'Not oversubscribed'}
-              </span>
-              <span className={styles.admissionsVerdictText}>
-                {admissions.oversubscribed ? 'Demand exceeds capacity.' : 'Supply meets demand.'}
-              </span>
-            </div>
-          )}
         </section>
       )}