fix(detail): let the special-school note span the full container width

Drop the note's `max-width: 72ch`, which left it stopping well short of the
section's right edge. It now fills the results-section container like the
subtitle paragraph above it.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB

nextjs-app/components/EditorialSection.tsx

@@ -13,17 +13,17 @@ export function EditorialSection({ totalSchools, localAuthorityCount }: Editoria
       <div className={styles.editorialGrid}>
         <div className={styles.editorialText}>
           <div className={styles.editorialKicker}>About school data</div>
-          <h2 className={styles.editorialHeading}>Making England&apos;s school performance data actually readable</h2>
+          <h2 className={styles.editorialHeading}>Making UK school performance data actually readable</h2>
           <p>
-            School performance data in England is rich but fragmented. The Department for Education and Ofsted
+            School performance data in England is rich but fragmented. The Department for Education publishes
-            publish Key Stage 2 SATs, GCSE attainment, inspection outcomes, progress scores, admissions figures
+            Key Stage 2 SATs, GCSE attainment, Ofsted outcomes, progress scores, admissions figures and
-            and demographics — each in its own table, each with its own jargon.
+            demographics — each in its own table, each with its own jargon.
           </p>
           <p>
             SchoolCompare brings it all into one place. Every school page shows performance against the national
             average, explains what the numbers mean, and lets you shortlist schools side by side. Built for
             parents, governors, journalists, and anyone who wants to understand a school without reading a
-            full inspection report.
+            40-page inspection report.
           </p>
         </div>
         <div className={styles.factbox}>

nextjs-app/components/HomeView.module.css

@@ -720,13 +720,10 @@
 .miniRowHead {
   display: flex;
   justify-content: space-between;
-  align-items: baseline;
+  font-size: 0.48rem;
-  gap: 0.2rem;
-  font-size: 0.44rem;
   color: var(--text-muted, #6d685f);
   text-transform: uppercase;
-  letter-spacing: 0.01em;
+  letter-spacing: 0.04em;
-  white-space: nowrap;
 }
 
 .miniRowHead strong {
@@ -872,77 +869,28 @@
   color: var(--text-primary, #1a1612);
 }
 
-.ofstedFramework {
+.ofstedBadge {
   align-self: flex-start;
-  padding: 0.15rem 0.5rem;
+  padding: 0.2rem 0.55rem;
   border-radius: 4px;
-  background: rgba(90, 58, 110, 0.12);
-  color: #5a3a6e;
-  font-size: 0.5rem;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-}
-
-.rcList {
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
-}
-
-.rcRow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-}
-
-.rcArea {
-  font-size: 0.62rem;
-  color: var(--text-secondary, #4a453d);
-}
-
-.rcChip {
-  padding: 0.1rem 0.4rem;
-  border-radius: 3px;
-  font-size: 0.52rem;
-  font-weight: 700;
-  letter-spacing: 0.03em;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.rcChipGood {
   background: rgba(45, 125, 125, 0.12);
   color: var(--accent-teal, #2d7d7d);
+  font-size: 0.55rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
 }
 
-.rcChipNeutral {
+.ofstedVerdict {
-  background: var(--accent-gold-bg, rgba(180, 150, 40, 0.12));
+  font-family: var(--font-playfair), 'Playfair Display', serif;
-  color: var(--accent-gold-text, #7a6800);
+  font-size: 1.05rem;
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--text-primary, #1a1612);
 }
 
-/* Safeguarding is a separate binary met/not-met judgement, not a graded area,
+.ofstedVerdict em {
-   so it sits below the five-point list behind a divider with its own chip. */
-.rcSafeguarding {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  margin-top: 0.05rem;
-  padding-top: 0.35rem;
-  border-top: 1px dashed var(--border-color, #e5dfd5);
-}
-
-.rcSep {
-  color: var(--text-muted, #8a847a);
-  font-style: italic;
-}
-
-.rcChipMet {
-  background: transparent;
   color: var(--accent-teal, #2d7d7d);
-  border: 1px solid rgba(45, 125, 125, 0.4);
+  font-style: normal;
 }
 
 .ofstedMeta {

nextjs-app/components/HomeView.tsx

@@ -261,7 +261,7 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
         <div className={styles.heroSection}>
           <span className={styles.heroEyebrow}>
             <span className={styles.heroEyebrowDot} aria-hidden="true" />
-            Updated for the 2026/27 admissions round
+            Updated with 2026/2027 admissions results
           </span>
           <h1 className={styles.heroTitle}>
             Every school in England, <em className={styles.heroEmph}>compared.</em>

nextjs-app/components/HowItWorksSection.tsx

@@ -5,26 +5,15 @@
 import styles from './HomeView.module.css';
 
 export function HowItWorksSection() {
-  // "exc" is the school's above-expected result. DfE names this differently
-  // by subject: "higher standard" for the reading and maths tests, "greater
-  // depth" for teacher-assessed writing. "nat" is the national expected %.
   const miniCascade = [
-    { subj: 'Reading', exp: 96, exc: 44, nat: 75, excLabel: 'Higher std' },
+    { subj: 'Reading', exp: 96, exc: 73, nat: 75 },
-    { subj: 'Writing', exp: 81, exc: 26, nat: 72, excLabel: 'Greater depth' },
+    { subj: 'Writing', exp: 81, exc: 15, nat: 72 },
-    { subj: 'Maths', exp: 85, exc: 41, nat: 74, excLabel: 'Higher std' },
+    { subj: 'Maths', exp: 85, exc: 47, nat: 74 },
   ];
   const compareRows = [
     { label: 'Reading, Writing & Maths', a: '70%', b: '64%', aHi: true },
-    { label: 'Higher standard (RWM)', a: '13%', b: '6%', aHi: true },
     { label: 'Ofsted', a: 'Outstanding', b: 'Good', aHi: true },
-  ];
+    { label: 'Reading progress', a: '+2.1', b: '+0.4', aHi: true },
-  // Report card (Ofsted's framework from Nov 2025): one rating per area of
-  // school life on a five-point scale. Safeguarding is judged separately, as a
-  // binary met/not-met outcome — kept out of this list and shown on its own.
-  const reportCard: Array<{ area: string; grade: string; good: boolean }> = [
-    { area: 'Achievement', grade: 'Strong', good: true },
-    { area: 'Curriculum & teaching', grade: 'Expected standard', good: false },
-    { area: 'Attendance & behaviour', grade: 'Strong', good: true },
   ];
 
   return (
@@ -40,7 +29,7 @@ export function HowItWorksSection() {
             <div className={styles.hiwPhaseBlock}>
               <div className={styles.hiwPhaseLabel}>Primary · Year 6 · <strong>Key Stage 2 SATs</strong></div>
               <div className={styles.miniCascade}>
-                {miniCascade.map(({ subj, exp, exc, nat, excLabel }) => (
+                {miniCascade.map(({ subj, exp, exc, nat }) => (
                   <div key={subj} className={styles.miniCascadeCol}>
                     <div className={styles.miniSubj}>{subj}</div>
                     <div className={styles.miniRowHead}><span>Expected</span><strong>{exp}%</strong></div>
@@ -48,7 +37,7 @@ export function HowItWorksSection() {
                       <div className={styles.miniNatPill} style={{ left: `${nat}%` }}>{nat}%</div>
                       <div className={styles.miniBarExp} style={{ width: `${exp}%` }} />
                     </div>
-                    <div className={styles.miniRowHead}><span>{excLabel}</span><strong>{exc}%</strong></div>
+                    <div className={styles.miniRowHead}><span>Exceeding</span><strong>{exc}%</strong></div>
                     <div className={styles.miniTrack}>
                       <div className={styles.miniBarExc} style={{ width: `${exc}%` }} />
                     </div>
@@ -60,15 +49,15 @@ export function HowItWorksSection() {
               <div className={styles.hiwPhaseLabel}>Secondary · Year 11 · <strong>GCSE Attainment 8</strong></div>
               <div className={styles.att8Row}>
                 <div className={styles.att8BarWrap}>
-                  <div className={styles.att8BarHead}><span>This school</span><span>National avg 45.9</span></div>
+                  <div className={styles.att8BarHead}><span>This school</span><span>National avg 50.2</span></div>
                   <div className={styles.att8Track}>
-                    <div className={styles.att8Fill} style={{ width: '54.8%' }} />
+                    <div className={styles.att8Fill} style={{ width: '62%' }} />
-                    <div className={styles.att8NatLine} style={{ left: '45.9%' }} />
+                    <div className={styles.att8NatLine} style={{ left: '50%' }} />
                   </div>
                 </div>
                 <div className={styles.att8Score}>
-                  <div className={styles.att8Value}>54.8</div>
+                  <div className={styles.att8Value}>62.4</div>
-                  <div className={styles.att8Delta}>+8.9 vs national</div>
+                  <div className={styles.att8Delta}>+12.2 vs national</div>
                 </div>
               </div>
             </div>
@@ -88,26 +77,15 @@ export function HowItWorksSection() {
                 <span className={styles.ofstedBullet} />
                 <span className={styles.ofstedTitle}>Latest Ofsted inspection</span>
               </div>
-              <span className={styles.ofstedFramework}>Report card · five-point scale</span>
+              <span className={styles.ofstedBadge}>OUTSTANDING</span>
-              <div className={styles.rcList}>
+              <div className={styles.ofstedVerdict}>Rated <em>Outstanding</em> at last inspection.</div>
-                {reportCard.map(({ area, grade, good }) => (
+              <div className={styles.ofstedMeta}>Full inspection · March 2024</div>
-                  <div key={area} className={styles.rcRow}>
-                    <span className={styles.rcArea}>{area}</span>
-                    <span className={`${styles.rcChip} ${good ? styles.rcChipGood : styles.rcChipNeutral}`}>{grade}</span>
-                  </div>
-                ))}
-              </div>
-              <div className={styles.rcSafeguarding}>
-                <span className={styles.rcArea}>Safeguarding <span className={styles.rcSep}>· separate check</span></span>
-                <span className={`${styles.rcChip} ${styles.rcChipMet}`}>Met</span>
-              </div>
-              <div className={styles.ofstedMeta}>Full inspection · March 2026</div>
             </div>
           </div>
           <div className={styles.hiwCardBody}>
             <div className={styles.hiwStep}>Judgement</div>
             <div className={styles.hiwTitle}>Ofsted at a glance</div>
-            <p className={styles.hiwDesc}>Since November 2025, Ofsted rates each area of school life on a five-point scale rather than one overall word. We show every area and the inspection date — and, for schools not yet reinspected, the older overall grade they still carry.</p>
+            <p className={styles.hiwDesc}>Current grade, inspection date, and a plain-English headline — without opening a 40-page report.</p>
           </div>
         </div>
 

nextjs-app/components/SchoolDetailView.module.css

@@ -1040,41 +1040,6 @@
     color: var(--accent-coral-dark, #b04a2e);
 }
 
-/* ── Ofsted grade grids (Report Card + OEIF) ──
-   Uniform, vertically-aligned grade chips. Labels reserve two lines so
-   single- and double-line labels put their chips on the same baseline;
-   every chip (Met, Strong, Expected standard, …) shares one font size,
-   padding and min-height regardless of how many lines its text wraps to. */
-.gradeGrid .metricCard {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.85rem 0.75rem;
-}
-.gradeGrid .metricLabel {
-    min-height: 2.6em;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-}
-.gradeGrid .metricValue {
-    margin-top: auto;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    max-width: 100%;
-    min-height: 2.6em;
-    padding: 0.3rem 0.7rem;
-    border-radius: 5px;
-    font-size: 1rem;
-    font-weight: 700;
-    line-height: 1.25;
-    text-align: center;
-}
-
 .ofstedDisclaimer {
     font-size: 0.8rem;
     color: var(--text-muted, #8a847a);

nextjs-app/components/SchoolDetailView.tsx

@@ -577,7 +577,7 @@ export function SchoolDetailView({
               <p className={styles.ofstedDisclaimer}>
                 From November 2025, Ofsted replaced single overall grades with Report Cards rating schools across several areas.
               </p>
-              <div className={`${styles.metricsGrid} ${styles.gradeGrid}`}>
+              <div className={styles.metricsGrid}>
                 {ofsted.rc_safeguarding_met != null && (
                   <div className={styles.metricCard}>
                     <div className={styles.metricLabel}>Safeguarding</div>
@@ -623,7 +623,7 @@ export function SchoolDetailView({
                   Rated <strong>{OFSTED_LABELS[ofsted.overall_effectiveness!]}</strong> across all inspected areas — Quality of Teaching, Behaviour, Pupils&apos; Development and Leadership.
                 </p>
               ) : (
-                <div className={`${styles.metricsGrid} ${styles.gradeGrid}`}>
+                <div className={styles.metricsGrid}>
                   {oeifAreas.map(({ label, value }) => (
                     <div key={label} className={styles.metricCard}>
                       <div className={styles.metricLabel}>{label}</div>
@@ -925,15 +925,6 @@ export function SchoolDetailView({
               </div>
             )}
           </div>
-          {/* All-through admissions data covers a single entry point (usually the
-              Year 7 secondary intake), not reception — say so, or a parent could
-              read these as the whole-school figures. */}
-          {isAllThrough && admissions.school_phase && (
-            <p className={styles.sectionSubtitle}>
-              These figures are for {admissions.school_phase.toLowerCase()} entry
-              {/secondary/i.test(admissions.school_phase) ? ' (Year 7)' : /primary/i.test(admissions.school_phase) ? ' (Reception)' : ''}.
-            </p>
-          )}
 
           <div className={styles.admissionsViewport}>
             {/* This-year Q&A */}

nextjs-app/components/SecondarySchoolDetailView.module.css

@@ -623,41 +623,6 @@
     color: var(--accent-coral-dark, #b04a2e);
 }
 
-/* ── Ofsted grade grids (Report Card + OEIF) ──
-   Uniform, vertically-aligned grade chips. Labels reserve two lines so
-   single- and double-line labels put their chips on the same baseline;
-   every chip (Met, Strong, Expected standard, …) shares one font size,
-   padding and min-height regardless of how many lines its text wraps to. */
-.gradeGrid .metricCard {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.85rem 0.75rem;
-}
-.gradeGrid .metricLabel {
-    min-height: 2.6em;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-}
-.gradeGrid .metricValue {
-    margin-top: auto;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    max-width: 100%;
-    min-height: 2.6em;
-    padding: 0.3rem 0.7rem;
-    border-radius: 5px;
-    font-size: 1rem;
-    font-weight: 700;
-    line-height: 1.25;
-    text-align: center;
-}
-
 .ofstedDisclaimer {
     font-size: 0.8rem;
     color: var(--text-muted, #8a847a);

nextjs-app/components/SecondarySchoolDetailView.tsx

@@ -374,7 +374,7 @@ export function SecondarySchoolDetailView({
               <p className={styles.ofstedDisclaimer}>
                 From November 2025, Ofsted replaced single overall grades with Report Cards rating schools across several areas.
               </p>
-              <div className={`${styles.metricsGrid} ${styles.gradeGrid}`}>
+              <div className={styles.metricsGrid}>
                 {ofsted.rc_safeguarding_met != null && (
                   <div className={styles.metricCard}>
                     <div className={styles.metricLabel}>Safeguarding</div>
@@ -419,7 +419,7 @@ export function SecondarySchoolDetailView({
                   Rated <strong>{OFSTED_LABELS[ofsted.overall_effectiveness]}</strong> across all inspected areas — Quality of Teaching, Behaviour, Pupils&apos; Development and Leadership.
                 </p>
               ) : (
-                <div className={`${styles.metricsGrid} ${styles.gradeGrid}`}>
+                <div className={styles.metricsGrid}>
                   {oeifAreas.map(({ label, value }) => (
                     <div key={label} className={styles.metricCard}>
                       <div className={styles.metricLabel}>{label}</div>
@@ -436,7 +436,7 @@ export function SecondarySchoolDetailView({
               <p className={styles.sectionSubtitle}>
                 From September 2024, Ofsted no longer gives a single overall grade.
               </p>
-              <div className={`${styles.metricsGrid} ${styles.gradeGrid}`}>
+              <div className={styles.metricsGrid}>
                 {[
                   { label: 'Quality of Education', value: ofsted.quality_of_education },
                   { label: 'Behaviour & Attitudes', value: ofsted.behaviour_attitudes },