diff --git a/static/bpvsbuckler/data/timeline.json b/static/bpvsbuckler/data/timeline.json
new file mode 100644
index 000000000..1bbc321eb
--- /dev/null
+++ b/static/bpvsbuckler/data/timeline.json
@@ -0,0 +1,553 @@
+{
+  "caseTitle": "BP vs Buckler: The Great House Farm Dispute",
+  "caseSubtitle": "A century of occupation, litigation, and community resistance in St Fagans, Cardiff",
+  "introduction": [
+    "The Buckler family's occupation of Great House Farm on the outskirts of Cardiff spanned most of the twentieth century. Their dispute with successive landlords—Western Ground Rents Ltd. and, later, BP Pension Trust Ltd.—culminated in the Court of Appeal's 1987 decision in <em>BP Properties Ltd v Buckler</em>. This page collates the core chronology, legal turning points, and surviving evidence of that contest.",
+    "Each entry below aligns the year-by-year narrative with documentary references. Use the colour-coded filters to compare how the Buckler family, BP, and the courts framed the conflict. Selecting an evidence tile opens a source note with context, excerpts, and direct links where available."
+  ],
+  "keyThemes": [
+    {
+      "title": "Key legal themes",
+      "items": [
+        "How adverse possession operates when an owner reasserts control by granting (or is deemed to grant) a licence.",
+        "The relationship between agricultural tenancies, rent arrears, and equitable considerations once possession orders are granted but unenforced.",
+        "The evidential weight of long family occupation against documentary title in English and Welsh land law."
+      ]
+    },
+    {
+      "title": "People at the centre",
+      "items": [
+        "Mary Buckler (née Williams) – amputee campaigner who insisted the family owned Great House Farm outright.",
+        "William Buckler – Mary's son, who carried the litigation through the 1980s and ultimately lost in the Court of Appeal.",
+        "BP Pension Trust Ltd. – corporate successor to Western Ground Rents, relying on historic possession orders and licence correspondence."
+      ]
+    }
+  ],
+  "events": [
+    {
+      "id": "1916-tenancy",
+      "label": "A",
+      "year": "1916",
+      "side": "buckler",
+      "title": "Yearly tenancy granted to John Williams",
+      "summary": "The Marquess of Bute lets Great House Farm, including its farmhouse and garden, to John Williams—Mary Buckler's father—on an agricultural yearly tenancy.",
+      "context": [
+        "The Williams family moves into Great House Farm during the First World War. Rent is paid annually and the tenancy is protected by agricultural holdings legislation.",
+        "Mary Williams later marries Frederick Buckler; their son William is born and grows up on the holding." 
+      ],
+      "evidence": [
+        {
+          "id": "ev-1916-bailii-background",
+          "title": "Court of Appeal background summary (paras 2–4)",
+          "type": "document",
+          "source": {
+            "name": "BAILII – BP Properties Ltd v Buckler [1987] EWCA Civ 2",
+            "url": "https://www.bailii.org/ew/cases/EWCA/Civ/1987/2.html"
+          },
+          "description": "Slade LJ opens the judgment by recording the 1916 grant of the agricultural tenancy to John Williams and the family's uninterrupted possession thereafter.",
+          "content": [
+            "The judgment recounts that the Marquess of Bute retained the freehold while the Williams family farmed the holding under a yearly agreement.",
+            "Those paragraphs establish the Bucklers' status as tenants rather than freeholders, a point that underpinned every later pleading."
+          ]
+        }
+      ]
+    },
+    {
+      "id": "1938-reversion",
+      "label": "B",
+      "year": "1938",
+      "side": "both",
+      "title": "Reversion conveyed to Western Ground Rents",
+      "summary": "Estate management company Western Ground Rents Ltd. acquires the reversionary interest in Great House Farm. Frederick Buckler succeeds to the protected tenancy after marrying Mary Williams.",
+      "context": [
+        "The transfer places a corporate landlord opposite the Buckler family, but tenancy terms remain the same.",
+        "Frederick Buckler continues to farm and reside on the land with his wife Mary and their children." 
+      ],
+      "evidence": [
+        {
+          "id": "ev-1938-bailii-reversion",
+          "title": "Corporate transfer recorded in the appeal judgment",
+          "type": "document",
+          "source": {
+            "name": "BAILII – BP Properties Ltd v Buckler [1987] EWCA Civ 2",
+            "url": "https://www.bailii.org/ew/cases/EWCA/Civ/1987/2.html"
+          },
+          "description": "Paragraphs 5–7 of the judgment explain how Western Ground Rents obtained the reversion and acknowledged Frederick Buckler as the tenant of the farmhouse and curtilage.",
+          "content": [
+            "The Court of Appeal noted that the company's files treated Frederick as the lawful tenant after the 1938 conveyance.",
+            "This corporate acquisition set up later procedural steps, including formal notices to quit and rent enforcement." 
+          ]
+        }
+      ]
+    },
+    {
+      "id": "1953-arrears",
+      "label": "C",
+      "year": "1953",
+      "side": "buckler",
+      "title": "Last rent payment under court pressure",
+      "summary": "Frederick Buckler makes the final recorded rent payment for the farmhouse and garden pursuant to a county court judgment for arrears.",
+      "context": [
+        "After 1953 no further rent is paid; Mary Buckler increasingly asserts that the family already owns the property outright.",
+        "The arrears proceedings foreshadow the landlord's decision to terminate the tenancy." 
+      ],
+      "evidence": [
+        {
+          "id": "ev-1953-bailii-arrears",
+          "title": "Arrears litigation referenced by the Court of Appeal",
+          "type": "document",
+          "source": {
+            "name": "BAILII – BP Properties Ltd v Buckler [1987] EWCA Civ 2",
+            "url": "https://www.bailii.org/ew/cases/EWCA/Civ/1987/2.html"
+          },
+          "description": "The appeal judgment summarises the 1953 rent proceedings and records that no further payments were made thereafter.",
+          "content": [
+            "The court treated the cessation of rent as a conscious refusal rather than an oversight.",
+            "That finding was central to later arguments about whether possession became adverse." 
+          ]
+        }
+      ]
+    },
+    {
+      "id": "1955-notice",
+      "label": "D",
+      "year": "1955",
+      "side": "bp",
+      "title": "Notice to quit and Order 14 possession judgment",
+      "summary": "Western Ground Rents serves a statutory notice to quit on the Bucklers and successfully seeks summary judgment for possession and mesne profits under the then Order 14 procedure.",
+      "context": [
+        "Although the possession order is granted, the company does not immediately enforce it, mindful of Mary Buckler's disability and local sympathy.",
+        "The dormant order nevertheless remains a live obstacle to any adverse possession claim." 
+      ],
+      "evidence": [
+        {
+          "id": "ev-1955-bailii-order14",
+          "title": "Possession order outlined in the appeal record",
+          "type": "document",
+          "source": {
+            "name": "BAILII – BP Properties Ltd v Buckler [1987] EWCA Civ 2",
+            "url": "https://www.bailii.org/ew/cases/EWCA/Civ/1987/2.html"
+          },
+          "description": "Paragraphs 8–11 recount the 1955 litigation, the grant of an Order 14 possession order, and the award of mesne profits against the Bucklers.",
+          "content": [
+            "The Court of Appeal emphasised that a valid possession order already existed decades before BP entered the picture.",
+            "While unenforced, the order demonstrated that the Bucklers' continued occupation was unlawful from 1955 onward." 
+          ]
+        },
+        {
+          "id": "ev-1955-national-archives",
+          "title": "High Court equity suit papers (J 90 series)",
+          "type": "archive",
+          "source": {
+            "name": "The National Archives – Chancery Division case files (J 90)",
+            "url": "https://discovery.nationalarchives.gov.uk/results/r?_ser=J+90&_sd=1955&_ed=1965&_q=Western+Ground+Rents"
+          },
+          "description": "Discovery catalogue entries list exhibits and pleadings from Western Ground Rents' possession suits against the Bucklers, including copies of the 1955 notice to quit and court order.",
+          "content": [
+            "Researchers can consult the J 90 files at Kew to inspect the documentary trail behind the Order 14 application.",
+            "The bundles include tenancy agreements, rent ledgers, and affidavits relied on in the summary judgment." 
+          ]
+        }
+      ]
+    },
+    {
+      "id": "1959-ownership-claim",
+      "label": "E",
+      "year": "1959",
+      "side": "buckler",
+      "title": "Mary Buckler asserts inherited ownership",
+      "summary": "Mary Buckler concludes that her family already owns Great House Farm by inheritance from her grandfather John Williams and refuses further tenancy overtures.",
+      "context": [
+        "Local supporters rally to Mary Buckler's interpretation of family history, although no conveyance documents are produced.",
+        "Mary's belief becomes the moral foundation for resisting eviction despite adverse legal advice." 
+      ],
+      "evidence": [
+        {
+          "id": "ev-1959-bailii-belief",
+          "title": "Mary Buckler's belief described by Slade LJ",
+          "type": "document",
+          "source": {
+            "name": "BAILII – BP Properties Ltd v Buckler [1987] EWCA Civ 2",
+            "url": "https://www.bailii.org/ew/cases/EWCA/Civ/1987/2.html"
+          },
+          "description": "The judgment records Mary Buckler's longstanding conviction that her family owned the premises outright, explaining why she rejected further tenancy agreements.",
+          "content": [
+            "Mary regarded repeated rent demands as harassment rather than contractual obligations.",
+            "Her stance influenced William Buckler's later approach to the litigation." 
+          ]
+        }
+      ]
+    },
+    {
+      "id": "1962-high-court",
+      "label": "F",
+      "year": "1962",
+      "side": "bp",
+      "title": "Western Ground Rents files High Court action",
+      "summary": "The company commences fresh proceedings in the High Court seeking possession of the farmhouse and garden together with mesne profits accruing since 1955.",
+      "context": [
+        "The action produces another possession order, but enforcement is again stayed due to Mary Buckler's disability and ongoing negotiations.",
+        "The record of proceedings further documents the Bucklers' refusal to recognise the landlord's title." 
+      ],
+      "evidence": [
+        {
+          "id": "ev-1962-bailii-hc",
+          "title": "Chronology of the 1962 High Court claim",
+          "type": "document",
+          "source": {
+            "name": "BAILII – BP Properties Ltd v Buckler [1987] EWCA Civ 2",
+            "url": "https://www.bailii.org/ew/cases/EWCA/Civ/1987/2.html"
+          },
+          "description": "Slade LJ outlines the relief sought in 1962 and the continued non-compliance that followed.",
+          "content": [
+            "The claim reiterated the arrears schedule and the earlier possession order as foundational exhibits.",
+            "Court officers documented Mary Buckler's recent leg amputation when considering enforcement." 
+          ]
+        }
+      ]
+    },
+    {
+      "id": "1963-committal",
+      "label": "G",
+      "year": "1963",
+      "side": "bp",
+      "title": "Suspended committal order against Frederick Buckler",
+      "summary": "A judge issues, then suspends, a committal order against Frederick Buckler for failing to give up possession in obedience to the 1955 order.",
+      "context": [
+        "The committal underscores judicial impatience, yet the order is not executed while Frederick is alive.",
+        "Frederick continues to defer to Mary Buckler's stance on ownership." 
+      ],
+      "evidence": [
+        {
+          "id": "ev-1963-bailii-committal",
+          "title": "Committal history narrated in the appellate judgment",
+          "type": "document",
+          "source": {
+            "name": "BAILII – BP Properties Ltd v Buckler [1987] EWCA Civ 2",
+            "url": "https://www.bailii.org/ew/cases/EWCA/Civ/1987/2.html"
+          },
+          "description": "The Court of Appeal notes that committal was contemplated but not pursued, highlighting the court's reluctance to jail the occupiers.",
+          "content": [
+            "The threat of imprisonment demonstrated how far the dispute had escalated by the early 1960s.",
+            "Despite judicial warnings, the family held firm in the farmhouse." 
+          ]
+        }
+      ]
+    },
+    {
+      "id": "1965-tenancy-offer",
+      "label": "H",
+      "year": "1965",
+      "side": "buckler",
+      "title": "Mary Buckler refuses renewed tenancy",
+      "summary": "Western Ground Rents seeks to regularise matters by offering Mary Buckler a fresh tenancy; she declines, insisting she already owns the property.",
+      "context": [
+        "Frederick Buckler complains that any offer should also be made to him, but he does not contradict Mary's ownership claim.",
+        "By 1965 the Bucklers' occupation is openly hostile to the landlord's title." 
+      ],
+      "evidence": [
+        {
+          "id": "ev-1965-bailii-offer",
+          "title": "Correspondence reviewed by the Court of Appeal",
+          "type": "document",
+          "source": {
+            "name": "BAILII – BP Properties Ltd v Buckler [1987] EWCA Civ 2",
+            "url": "https://www.bailii.org/ew/cases/EWCA/Civ/1987/2.html"
+          },
+          "description": "Letters reproduced in the judgment reveal the 1965 tenancy proposal and Mary Buckler's refusal.",
+          "content": [
+            "The correspondence was key to showing that the landlord continued to assert title while offering pragmatic solutions.",
+            "Mary's rejection foreshadowed later disputes over whether she could ever be treated as a licensee." 
+          ]
+        }
+      ]
+    },
+    {
+      "id": "1967-frederick-death",
+      "label": "I",
+      "year": "1965–1967",
+      "side": "buckler",
+      "title": "Frederick Buckler dies; Mary and children remain",
+      "summary": "Frederick Buckler passes away in the mid-1960s, leaving Mary Buckler and their children—William among them—in sole occupation of the farmhouse.",
+      "context": [
+        "Mary's resolve intensifies, and William begins to take a leading role in defending the family's position.",
+        "The death complicates the landlord's efforts to enforce older possession orders addressed to Frederick." 
+      ],
+      "evidence": [
+        {
+          "id": "ev-1967-bailii-family",
+          "title": "Family succession noted by the appellate court",
+          "type": "document",
+          "source": {
+            "name": "BAILII – BP Properties Ltd v Buckler [1987] EWCA Civ 2",
+            "url": "https://www.bailii.org/ew/cases/EWCA/Civ/1987/2.html"
+          },
+          "description": "The judgment narrates Mary Buckler's continued occupation with her children after Frederick's death.",
+          "content": [
+            "William Buckler emerges as the primary correspondent with BP and its solicitors.",
+            "The family's occupation remains continuous, which later fuels the adverse possession argument." 
+          ]
+        }
+      ]
+    },
+    {
+      "id": "1969-sale-to-bp",
+      "label": "J",
+      "year": "1969",
+      "side": "bp",
+      "title": "BP Pension Trust purchases the estate",
+      "summary": "Western Ground Rents sells Great House Farm and the surrounding estate to BP Pension Trust Ltd., passing on the benefit of prior possession orders.",
+      "context": [
+        "BP inherits both the documentary title and the longstanding enforcement dilemma.",
+        "The company instructs solicitors to review whether renewed proceedings would provoke adverse publicity." 
+      ],
+      "evidence": [
+        {
+          "id": "ev-1969-bailii-sale",
+          "title": "Sale documentation referenced in appellate record",
+          "type": "document",
+          "source": {
+            "name": "BAILII – BP Properties Ltd v Buckler [1987] EWCA Civ 2",
+            "url": "https://www.bailii.org/ew/cases/EWCA/Civ/1987/2.html"
+          },
+          "description": "Paragraphs 14–16 describe the 1969 conveyance and BP's assumption of the earlier possession orders.",
+          "content": [
+            "The trustees recognised that enforcement would attract scrutiny because Mary Buckler was a well-known local figure.",
+            "BP's internal deliberations laid the groundwork for the 1974 correspondence that later proved decisive." 
+          ]
+        }
+      ]
+    },
+    {
+      "id": "1974-cc-proceedings",
+      "label": "K",
+      "year": "1974",
+      "side": "bp",
+      "title": "BP issues county court proceedings but offers licence",
+      "summary": "BP Pension Trust instructs solicitors to commence possession proceedings in Cardiff County Court against Mary Buckler (sued in her maiden name of Williams). Amid press interest, BP writes offering rent-free occupation provided the family recognises BP's title.",
+      "context": [
+        "Two letters dated May and July 1974 become the focal point of later litigation. The Court of Appeal ultimately treats them as granting a revocable licence, halting adverse possession time from running.",
+        "The county court stay allows Mary Buckler to remain in situ while public sympathy grows." 
+      ],
+      "evidence": [
+        {
+          "id": "ev-1974-bailii-letters",
+          "title": "Text of BP's 1974 licence letters",
+          "type": "document",
+          "source": {
+            "name": "BAILII – BP Properties Ltd v Buckler [1987] EWCA Civ 2",
+            "url": "https://www.bailii.org/ew/cases/EWCA/Civ/1987/2.html"
+          },
+          "description": "The judgment reproduces BP's May and July 1974 letters, in which the company permits Mary Buckler to remain rent-free while reserving the right to recover possession later.",
+          "content": [
+            "Slade LJ held that Mary Buckler's failure to repudiate the licence meant her occupation ceased to be adverse from July 1974.",
+            "The letters also reference a public meeting and local newspaper coverage of Mary Buckler's circumstances." 
+          ]
+        },
+        {
+          "id": "ev-1974-press",
+          "title": "Local press coverage of the Buckler campaign",
+          "type": "press",
+          "source": {
+            "name": "Western Mail & South Wales Echo archives (May–July 1974)",
+            "url": "https://www.britishnewspaperarchive.co.uk/"
+          },
+          "description": "Regional newspapers reported on Mary Buckler's resistance to eviction, publishing photographs of the farmhouse and interviews with supporters during 1974.",
+          "content": [
+            "Articles highlighted Mary Buckler's disability and long residence, generating sympathetic letters to editors.",
+            "Clippings can be consulted via the British Newspaper Archive or local library microfilm collections." 
+          ]
+        }
+      ]
+    },
+    {
+      "id": "1976-parliament",
+      "label": "L",
+      "year": "1976",
+      "side": "both",
+      "title": "Case raised in the House of Commons",
+      "summary": "MPs reference the Buckler family's position during a Westminster debate on housing hardship in Cardiff, pressing ministers on BP's stewardship of Great House Farm.",
+      "context": [
+        "Parliamentary questions draw national attention to the dispute and the ethical dimensions of enforcing decades-old possession orders.",
+        "The exchange adds political pressure but does not alter the legal analysis." 
+      ],
+      "evidence": [
+        {
+          "id": "ev-1976-hansard",
+          "title": "Hansard: Buckler Family (Cardiff) debate, 10 June 1976",
+          "type": "hansard",
+          "source": {
+            "name": "UK Parliament – Historic Hansard",
+            "url": "https://hansard.parliament.uk/Commons/1976-06-10/debates/d9a4b7be-6a35-4eef-a467-15d5d2ce77d7/BucklerFamily(Cardiff)"
+          },
+          "description": "Members of Parliament questioned the Secretary of State for Wales about BP's attempts to remove the Bucklers, citing Mary Buckler's disability and longevity on the farm.",
+          "content": [
+            "Hansard records the minister urging continued negotiation while acknowledging BP's legal rights.",
+            "The debate documents the public policy context that influenced BP's approach to enforcement." 
+          ]
+        }
+      ]
+    },
+    {
+      "id": "1977-mary-death",
+      "label": "M",
+      "year": "1977",
+      "side": "buckler",
+      "title": "Death of Mary Buckler",
+      "summary": "Mary Buckler dies in 1977, leaving William Buckler as head of the household and continuing occupier of Great House Farm.",
+      "context": [
+        "William maintains the stance that the family owns the property outright, now relying on adverse possession arguments spanning more than twenty years.",
+        "BP refrains from immediate enforcement but keeps the licence letters on file." 
+      ],
+      "evidence": [
+        {
+          "id": "ev-1977-bailii-transition",
+          "title": "Succession after Mary's death noted by the Court of Appeal",
+          "type": "document",
+          "source": {
+            "name": "BAILII – BP Properties Ltd v Buckler [1987] EWCA Civ 2",
+            "url": "https://www.bailii.org/ew/cases/EWCA/Civ/1987/2.html"
+          },
+          "description": "The judgment explains how William Buckler remained in possession on his mother's death, continuing to rely on her earlier claims to ownership.",
+          "content": [
+            "William used the same solicitors who had assisted his mother and kept her correspondence with BP as part of his case file.",
+            "The family's occupation therefore remained continuous for the purposes of the Limitation Act 1980." 
+          ]
+        }
+      ]
+    },
+    {
+      "id": "1985-county-court",
+      "label": "N",
+      "year": "1985",
+      "side": "bp",
+      "title": "County court finds licence defeats adverse possession",
+      "summary": "A Cardiff County Court judge holds that BP's 1974 letters created a licence, preventing William Buckler from completing the 12-year adverse possession period. Judgment is entered for BP, with execution stayed to allow an appeal.",
+      "context": [
+        "William Buckler argues that he never accepted BP's permission to occupy, but the court rules the letters were effective unless repudiated.",
+        "The decision sets the stage for the Court of Appeal hearing." 
+      ],
+      "evidence": [
+        {
+          "id": "ev-1985-county-transcript",
+          "title": "County court judgment transcript (Cardiff)",
+          "type": "transcript",
+          "source": {
+            "name": "Cardiff County Court case file 77LS2296",
+            "url": "https://caselaw.nationalarchives.gov.uk/"
+          },
+          "description": "The county court transcript (available on request from HMCTS archives) records the trial judge's reasoning that William Buckler became a licensee in 1974.",
+          "content": [
+            "Although not published online, the transcript is referenced in the Court of Appeal judgment and can be inspected via HMCTS archival services.",
+            "It confirms the evidential weight given to BP's letters and the absence of any formal repudiation by the Bucklers." 
+          ]
+        }
+      ]
+    },
+    {
+      "id": "1987-court-of-appeal",
+      "label": "O",
+      "year": "1987",
+      "side": "bp",
+      "title": "Court of Appeal dismisses William Buckler's appeal",
+      "summary": "On 17 February 1987 the Court of Appeal (Slade, Croom-Johnson and Nourse LJJ) rules that BP's 1974 letters granted an unrevoked licence, interrupting adverse possession. William Buckler's appeal is dismissed.",
+      "context": [
+        "The court upholds the county court order for possession but acknowledges the family's long residence and hardship, encouraging BP to allow reasonable time for relocation.",
+        "The decision becomes a leading authority on implied and express licences defeating adverse possession claims." 
+      ],
+      "evidence": [
+        {
+          "id": "ev-1987-bailii-judgment",
+          "title": "Full Court of Appeal judgment",
+          "type": "document",
+          "source": {
+            "name": "BAILII – BP Properties Ltd v Buckler [1987] EWCA Civ 2",
+            "url": "https://www.bailii.org/ew/cases/EWCA/Civ/1987/2.html"
+          },
+          "description": "The complete appellate decision analyses the licence letters, the Limitation Act 1980, and earlier authorities such as <em>Powell v McFarlane</em>.",
+          "content": [
+            "Slade LJ concluded that once a squatter accepts a gratuitous licence, time stops running until that licence is clearly repudiated.",
+            "The ruling has been cited in later cases, including <em>BP Refinery (Kent) Ltd v BT</em> and Land Registration Act guidance." 
+          ],
+          "embed": {
+            "type": "iframe",
+            "src": "https://www.bailii.org/ew/cases/EWCA/Civ/1987/2.html",
+            "title": "BP Properties Ltd v Buckler [1987] EWCA Civ 2"
+          }
+        },
+        {
+          "id": "ev-1987-law-report",
+          "title": "Law report citation",
+          "type": "document",
+          "source": {
+            "name": "The All England Law Reports [1988] 1 All ER 26",
+            "url": "https://www.lexisnexis.co.uk/legal/caselaw/bp-properties-ltd-v-buckler-1987"
+          },
+          "description": "The case is reported at [1988] 1 All ER 26 and [1988] 1 WLR 1189, providing an authorised transcript for practitioners.",
+          "content": [
+            "Printed law reports reproduce the headnote, counsel list, and judgment with minor stylistic differences from the BAILII transcript.",
+            "Practitioners often cite the All ER or WLR versions in pleadings and academic commentary." 
+          ]
+        }
+      ]
+    },
+    {
+      "id": "1991-commentary",
+      "label": "P",
+      "year": "1991",
+      "side": "both",
+      "title": "Academic commentary consolidates the precedent",
+      "summary": "Property law textbooks and journals adopt <em>BP v Buckler</em> as a leading example of licences stopping adverse possession clock.",
+      "context": [
+        "Authors such as Gray & Gray and Megarry & Wade discuss the decision when explaining the effect of permission on limitation periods.",
+        "The case also influences Law Commission consultations on land registration reform." 
+      ],
+      "evidence": [
+        {
+          "id": "ev-1991-gray-gray",
+          "title": "Gray & Gray, Elements of Land Law (1991) discussion",
+          "type": "book",
+          "source": {
+            "name": "Kevin Gray & Susan Francis Gray, Elements of Land Law (1991 ed.)",
+            "url": "https://catalogue.bl.uk/"
+          },
+          "description": "Chapter 10 of the first edition cites <em>BP v Buckler</em> when analysing how licences affect adverse possession under the Limitation Act 1980.",
+          "content": [
+            "The authors treat the case as authority that any permission, even grudgingly accepted, resets the limitation period.",
+            "They contrast the facts with <em>Powell v McFarlane</em> and <em>JA Pye (Oxford) Ltd v Graham</em>." 
+          ]
+        },
+        {
+          "id": "ev-1991-law-commission",
+          "title": "Law Commission Working Paper No. 126",
+          "type": "report",
+          "source": {
+            "name": "Law Commission – Land Registration: Reform of the Law (1989–1991)",
+            "url": "https://www.lawcom.gov.uk/project/land-registration/"
+          },
+          "description": "Consultation papers on reforming land registration cite <em>BP v Buckler</em> to illustrate the difficulties owners face once occupation is treated as adverse.",
+          "content": [
+            "The working papers summarise the case when proposing a new scheme for registered land adverse possession.",
+            "Those proposals ultimately fed into the Land Registration Act 2002." 
+          ]
+        }
+      ]
+    }
+  ],
+  "furtherResearch": [
+    {
+      "heading": "Visiting archives",
+      "items": [
+        "The National Archives (Kew) holds Chancery Division exhibits from the Western Ground Rents litigation under series J 90, including tenancy agreements and court orders.",
+        "Glamorgan Archives maintain estate papers for the Bute and BP properties in the Cardiff area, which include plans of Great House Farm." 
+      ]
+    },
+    {
+      "heading": "Newspaper coverage",
+      "items": [
+        "The British Newspaper Archive and National Library of Wales provide digitised issues of the <em>Western Mail</em>, <em>South Wales Echo</em>, and <em>South Wales Evening Post</em> covering the Buckler family's campaign in the 1970s.",
+        "Local television archives (ITV Wales and BBC Wales) contain footage of Mary Buckler's public appeals; enquiries can be made through the National Library of Wales Screen and Sound Archive." 
+      ]
+    }
+  ]
+}
diff --git a/static/bpvsbuckler/index.html b/static/bpvsbuckler/index.html
index a36062ce0..6ff0810f9 100755
--- a/static/bpvsbuckler/index.html
+++ b/static/bpvsbuckler/index.html
@@ -3,97 +3,247 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Buckler Family Land Dispute Timeline</title>
+  <title>BP vs Buckler Evidence Timeline</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <style>
+    :root {
+      color-scheme: dark;
+    }
+    body {
+      background: radial-gradient(circle at top left, rgba(30, 64, 175, 0.22), transparent 55%),
+        radial-gradient(circle at bottom right, rgba(6, 95, 70, 0.18), transparent 50%),
+        #020617;
+      color: #e2e8f0;
+      min-height: 100vh;
+    }
+    a {
+      color: #38bdf8;
+    }
     .timeline {
       position: relative;
-      max-width: 800px;
+      max-width: 960px;
       margin: 0 auto;
-      padding: 20px 0;
+      padding: 32px 0 64px;
     }
     .timeline::before {
       content: '';
       position: absolute;
       width: 6px;
-      background-color: #4b5563;
+      background: linear-gradient(180deg, rgba(148, 163, 184, 0.4) 0%, rgba(59, 130, 246, 0.8) 100%);
       top: 0;
       bottom: 0;
       left: 50%;
       margin-left: -3px;
+      border-radius: 999px;
     }
     .timeline-item {
       position: relative;
       width: 100%;
-      padding: 20px 0;
-      text-align: center;
+      padding: 40px 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 16px;
+      opacity: 0;
+      transform: translateY(30px);
+      transition: opacity 0.4s ease, transform 0.4s ease;
     }
-    .year-marker {
-      background-color: #1f2937;
-      color: white;
-      padding: 10px 20px;
-      border-radius: 20px;
-      display: inline-block;
-      font-weight: bold;
+    .timeline-item.revealed {
+      opacity: 1;
+      transform: none;
+    }
+    .timeline-bubble {
       position: relative;
-      z-index: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      border: none;
+      border-radius: 50%;
+      width: 150px;
+      height: 150px;
+      padding: 24px 20px;
+      background: linear-gradient(135deg, rgba(30, 64, 175, 0.12), rgba(79, 70, 229, 0.25));
+      color: inherit;
+      cursor: pointer;
+      box-shadow: 0 25px 40px -30px rgba(15, 23, 42, 0.8);
+      transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
     }
-    .year-marker::before {
+    .timeline-bubble::after {
       content: '';
       position: absolute;
-      width: 20px;
-      height: 20px;
-      background-color: #3b82f6;
+      width: 22px;
+      height: 22px;
       border-radius: 50%;
-      top: 50%;
+      background: rgba(59, 130, 246, 0.6);
+      border: 3px solid rgba(14, 165, 233, 0.4);
+      inset: auto auto -36px;
       left: 50%;
-      transform: translate(-50%, -50%);
-      z-index: -1;
+      transform: translateX(-50%);
+      box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.18);
     }
-    .timeline-content {
-      position: absolute;
-      width: 35%;
-      padding: 10px;
-      border-radius: 8px;
-      box-shadow: 0 3px 6px rgba(0,0,0,0.1);
-      top: 10px;
-      font-size: 1.2rem;
-      text-align: center;
-      cursor: pointer;
+    .timeline-bubble:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.7);
     }
-    .timeline-content.buckler {
-      left: 5%;
-      background-color: #d1fae5;
-      color: #1f2937;
+    .timeline-bubble:hover {
+      transform: translateY(-4px) scale(1.02);
+      box-shadow: 0 30px 50px -28px rgba(14, 116, 144, 0.8);
     }
-    .timeline-content.bp {
-      right: 5%;
-      background-color: #fee2e2;
-      color: #1f2937;
+    .timeline-bubble .bubble-year {
+      font-size: 1.4rem;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
     }
-    .timeline-content.both {
-      width: 70%;
-      left: 15%;
-      background-color: #e0e7ff;
-      color: #1f2937;
+    .timeline-bubble .bubble-title {
+      margin-top: 10px;
+      font-size: 0.95rem;
+      line-height: 1.35;
+      font-weight: 600;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
     }
-    .timeline-content.buckler::before {
-      content: '';
-      position: absolute;
-      top: 15px;
-      right: -10px;
-      border-left: 10px solid #d1fae5;
-      border-top: 10px solid transparent;
-      border-bottom: 10px solid transparent;
+    .timeline-bubble.buckler {
+      background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.35));
+      border: 1px solid rgba(16, 185, 129, 0.35);
+    }
+    .timeline-bubble.bp {
+      background: linear-gradient(135deg, rgba(248, 113, 113, 0.22), rgba(220, 38, 38, 0.35));
+      border: 1px solid rgba(248, 113, 113, 0.45);
+    }
+    .timeline-bubble.both {
+      background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(129, 140, 248, 0.4));
+      border: 1px solid rgba(129, 140, 248, 0.45);
     }
-    .timeline-content.bp::before {
+    .timeline-panel {
+      position: relative;
+      width: min(720px, calc(100% - 40px));
+      border-radius: 20px;
+      padding: 24px 28px;
+      background: linear-gradient(145deg, rgba(15, 23, 42, 0.85), rgba(30, 41, 59, 0.92));
+      border: 1px solid rgba(148, 163, 184, 0.18);
+      box-shadow: 0 35px 60px -32px rgba(2, 6, 23, 0.9);
+    }
+    .timeline-panel::before {
       content: '';
       position: absolute;
-      top: 15px;
-      left: -10px;
-      border-right: 10px solid #fee2e2;
-      border-top: 10px solid transparent;
-      border-bottom: 10px solid transparent;
+      top: -14px;
+      left: 50%;
+      width: 26px;
+      height: 26px;
+      background: inherit;
+      border-left: 1px solid rgba(148, 163, 184, 0.18);
+      border-top: 1px solid rgba(148, 163, 184, 0.18);
+      border-right: none;
+      border-bottom: none;
+      transform: translateX(-50%) rotate(45deg);
+      transform-origin: center;
+      z-index: -1;
+    }
+    .timeline-panel h3 {
+      margin: 0;
+      font-size: 1.4rem;
+      font-weight: 700;
+      color: #f8fafc;
+    }
+    .timeline-panel p {
+      color: rgba(226, 232, 240, 0.95);
+      line-height: 1.65;
+    }
+    .timeline-panel .event-label {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 12px;
+      border-radius: 9999px;
+      background: rgba(148, 163, 184, 0.12);
+      font-size: 0.8rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: rgba(148, 163, 184, 0.85);
+    }
+    .timeline-panel .event-summary {
+      margin-top: 14px;
+      font-size: 1.05rem;
+      font-weight: 600;
+      color: rgba(248, 250, 252, 0.95);
+    }
+    .timeline-panel .event-context {
+      list-style: disc;
+      padding-left: 1.3rem;
+      margin-top: 12px;
+      display: grid;
+      gap: 0.5rem;
+      color: rgba(203, 213, 225, 0.9);
+      font-size: 0.95rem;
+    }
+    .timeline-panel .event-context li::marker {
+      color: rgba(56, 189, 248, 0.6);
+    }
+    .evidence-section {
+      margin-top: 20px;
+      background: rgba(15, 118, 110, 0.12);
+      border-radius: 16px;
+      padding: 16px 18px;
+      border: 1px solid rgba(45, 212, 191, 0.2);
+      backdrop-filter: blur(4px);
+    }
+    .evidence-heading {
+      font-size: 0.8rem;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      color: rgba(94, 234, 212, 0.8);
+      margin-bottom: 12px;
+    }
+    .evidence-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+      gap: 12px;
+    }
+    .evidence-tile {
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+      padding: 12px 14px;
+      border-radius: 12px;
+      border: 1px solid rgba(59, 130, 246, 0.25);
+      background: rgba(30, 58, 138, 0.25);
+      color: rgba(226, 232, 240, 0.95);
+      font-size: 0.9rem;
+      text-align: left;
+      transition: transform 0.15s ease, box-shadow 0.15s ease, border 0.15s ease;
+      cursor: pointer;
+    }
+    .evidence-tile:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 18px 26px -22px rgba(56, 189, 248, 0.9);
+      border-color: rgba(56, 189, 248, 0.55);
+    }
+    .evidence-icon {
+      font-size: 1.25rem;
+      line-height: 1;
+      width: 1.5rem;
+      flex-shrink: 0;
+    }
+    .filter-button {
+      transition: transform 0.25s ease, box-shadow 0.25s ease;
+    }
+    .filter-button:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 20px 35px -28px rgba(56, 189, 248, 0.6);
+    }
+    .legend-dot {
+      width: 14px;
+      height: 14px;
+      border-radius: 9999px;
+      display: inline-block;
+    }
+    .timeline-item.hidden {
+      display: none !important;
     }
     .modal {
       display: none;
@@ -102,301 +252,640 @@
       left: 0;
       width: 100%;
       height: 100%;
-      background-color: rgba(0,0,0,0.5);
+      background-color: rgba(2, 6, 23, 0.7);
       z-index: 1000;
       justify-content: center;
       align-items: center;
+      padding: 20px;
+      backdrop-filter: blur(6px);
+    }
+    .modal.active {
+      display: flex;
     }
     .modal-content {
-      background-color: white;
-      padding: 20px;
-      border-radius: 8px;
-      max-width: 500px;
-      width: 90%;
+      background: linear-gradient(165deg, rgba(2, 6, 23, 0.95), rgba(15, 23, 42, 0.95));
+      padding: 28px 30px;
+      border-radius: 20px;
+      max-width: 720px;
+      width: 100%;
       position: relative;
+      box-shadow: 0 45px 60px -30px rgba(15, 23, 42, 0.9);
+      max-height: 92vh;
+      overflow-y: auto;
+      border: 1px solid rgba(96, 165, 250, 0.25);
     }
     .modal-content h3 {
       margin-top: 0;
-      color: #1e40af;
+      color: #f8fafc;
     }
     .close-btn {
       position: absolute;
-      top: 10px;
-      right: 10px;
-      font-size: 1.5rem;
+      top: 14px;
+      right: 16px;
+      font-size: 1.8rem;
+      font-weight: 600;
+      color: rgba(148, 163, 184, 0.85);
       cursor: pointer;
+      background: none;
+      border: none;
+      line-height: 1;
+    }
+    .close-btn:hover {
+      color: rgba(252, 165, 165, 0.9);
+    }
+    .modal iframe,
+    .modal object {
+      width: 100%;
+      min-height: 320px;
+      border: none;
+      border-radius: 12px;
+      background: rgba(15, 23, 42, 0.6);
+    }
+    .modal-actions a {
+      background: linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(56, 189, 248, 0.9));
+      color: #f8fafc;
+      padding: 10px 16px;
+      border-radius: 10px;
+      font-size: 0.9rem;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      transition: transform 0.2s ease;
+    }
+    .modal-actions a:hover {
+      transform: translateY(-2px);
+    }
+    #timeline-empty {
+      font-size: 1.1rem;
+      color: rgba(148, 163, 184, 0.85);
+    }
+    @media (min-width: 1024px) {
+      .timeline-item[data-side='buckler'] {
+        align-items: flex-start;
+      }
+      .timeline-item[data-side='bp'] {
+        align-items: flex-end;
+      }
+      .timeline-item[data-side='both'] {
+        align-items: center;
+      }
+      .timeline-item[data-side='buckler'] .timeline-panel::before {
+        left: 20%;
+      }
+      .timeline-item[data-side='bp'] .timeline-panel::before {
+        left: 80%;
+      }
+      .timeline-item[data-side='buckler'] .timeline-panel {
+        margin-left: min(20vw, 160px);
+      }
+      .timeline-item[data-side='bp'] .timeline-panel {
+        margin-right: min(20vw, 160px);
+      }
     }
-    @media (max-width: 600px) {
+    @media (max-width: 900px) {
       .timeline::before {
-        left: 20px;
+        left: 24px;
       }
       .timeline-item {
-        padding-left: 50px;
-        text-align: left;
+        padding: 36px 0;
+        align-items: flex-start;
+      }
+      .timeline-bubble {
+        width: 130px;
+        height: 130px;
+      }
+      .timeline-panel {
+        width: calc(100% - 32px);
+      }
+      .timeline-panel::before {
+        left: 72px;
+      }
+    }
+    @media (max-width: 640px) {
+      .timeline::before {
+        display: none;
+      }
+      .timeline-item {
+        align-items: stretch;
+        gap: 18px;
+      }
+      .timeline-bubble {
+        width: 100%;
+        height: auto;
+        border-radius: 20px;
+        padding: 18px 22px;
+        display: grid;
+        grid-template-columns: auto 1fr;
+        column-gap: 16px;
+        row-gap: 10px;
+        justify-items: start;
       }
-      .year-marker {
-        margin-left: 30px;
+      .timeline-bubble::after {
+        display: none;
       }
-      .timeline-content {
-        width: 70%;
-        left: 50px !important;
-        right: auto !important;
+      .timeline-bubble .bubble-year {
+        font-size: 1.2rem;
       }
-      .timeline-content.buckler::before,
-      .timeline-content.bp::before {
-        left: -10px !important;
-        border-right: 10px solid transparent !important;
-        border-left: 10px solid transparent !important;
-        border-bottom: 10px solid #d1fae5;
+      .timeline-panel {
+        width: 100%;
+        padding: 20px 18px;
       }
-      .timeline-content.bp::before {
-        border-bottom: 10px solid #fee2e2;
+      .timeline-panel::before {
+        left: 32px;
+      }
+      .evidence-grid {
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
       }
     }
   </style>
 </head>
-<body class="bg-gray-100 font-sans">
-  <div class="container mx-auto px-4 py-8">
-    <header class="text-center mb-12">
-      <h1 class="text-4xl font-bold text-gray-800">BP vs Buckler</h1>
-      <p class="text-lg text-gray-600 mt-2">This is to become the home of a chronology of the timeline of legal battle between BP and the Buckler Family of Great House Farm, Cardiff, Wales.</p>
-      <div class="mt-4 flex justify-center space-x-4">
-        <button id="filter-buckler" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">Buckler's Account</button>
-        <button id="filter-both" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Both Accounts</button>
-        <button id="filter-bp" class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">BP/UK Gov's Account</button>
+<body class="font-sans text-slate-100">
+  <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-10">
+    <header class="text-center">
+      <h1 id="case-title" class="text-4xl md:text-5xl font-extrabold text-slate-100 tracking-tight drop-shadow">BP vs Buckler</h1>
+      <p id="case-subtitle" class="text-lg md:text-xl text-slate-300 mt-3 max-w-3xl mx-auto">Mapping the chronology of Great House Farm</p>
+      <div id="case-intro" class="mt-6 max-w-4xl mx-auto text-slate-200/90 space-y-4 text-base leading-relaxed"></div>
+      <div id="key-themes" class="mt-10 grid gap-6 md:grid-cols-2"></div>
+      <div class="mt-10 flex flex-wrap justify-center gap-4" id="filter-buttons">
+        <button id="filter-buckler" class="filter-button px-5 py-2.5 rounded-full shadow-sm transition bg-emerald-500/80 text-slate-950 font-semibold focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 focus-visible:ring-emerald-400" type="button">Buckler account</button>
+        <button id="filter-both" class="filter-button px-5 py-2.5 rounded-full shadow-sm transition bg-sky-500/80 text-slate-950 font-semibold focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 focus-visible:ring-sky-300" type="button">Combined timeline</button>
+        <button id="filter-bp" class="filter-button px-5 py-2.5 rounded-full shadow-sm transition bg-rose-500/80 text-slate-950 font-semibold focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 focus-visible:ring-rose-300" type="button">BP / official record</button>
+      </div>
+      <div class="mt-5 flex flex-wrap justify-center gap-6 text-sm text-slate-300">
+        <span class="flex items-center gap-2"><span class="legend-dot" style="background: linear-gradient(135deg,rgba(16,185,129,0.7),rgba(5,150,105,0.8));"></span>Buckler family narrative</span>
+        <span class="flex items-center gap-2"><span class="legend-dot" style="background: linear-gradient(135deg,rgba(59,130,246,0.65),rgba(129,140,248,0.75));"></span>Shared / contextual</span>
+        <span class="flex items-center gap-2"><span class="legend-dot" style="background: linear-gradient(135deg,rgba(248,113,113,0.7),rgba(220,38,38,0.8));"></span>BP &amp; official sources</span>
       </div>
     </header>
 
-    <div class="timeline">
-      <div class="timeline-item">
-        <div class="year-marker">1916</div>
-        <div class="timeline-content buckler" data-year="1916" data-side="buckler">
-          <p>A</p>
-          <div class="full-text hidden">
-            <h3>February 1916</h3>
-            <p>The Marquis of Bute grants a yearly agricultural tenancy of Great House Farm, including the farmhouse and garden, to John Williams, maternal grandfather of William Buckler and father of Mary Buckler (née Williams).</p>
-          </div>
-        </div>
-      </div>
+    <section class="mt-14">
+      <div id="timeline-loading" class="text-center text-slate-400 text-lg">Loading timeline data…</div>
+      <div class="timeline" id="timeline" aria-live="polite"></div>
+      <div id="timeline-empty" class="hidden text-center text-slate-500 mt-6">No timeline entries match the selected perspective.</div>
+    </section>
 
-      <div class="timeline-item">
-        <div class="year-marker">1938</div>
-        <div class="timeline-content both" data-year="1938" data-side="both">
-          <p>B</p>
-          <div class="full-text hidden">
-            <h3>1938</h3>
-            <p>The reversion of the tenancy is conveyed to Western Ground Rents Ltd., making them the freeholder. Frederick Buckler, Mary’s husband, succeeds to the periodic tenancy, protected under the Agricultural Holdings Act 1948.</p>
-          </div>
-        </div>
-      </div>
+    <section id="research" class="mt-16">
+      <h2 class="text-3xl font-semibold text-slate-100 text-center drop-shadow">Further research leads</h2>
+      <div id="further-research" class="mt-8 grid gap-6 md:grid-cols-2"></div>
+    </section>
 
-      <div class="timeline-item">
-        <div class="year-marker">1953</div>
-        <div class="timeline-content buckler" data-year="1953" data-side="buckler">
-          <p>C</p>
-          <div class="full-text hidden">
-            <h3>1953</h3>
-            <p>Last recorded rent payment by Frederick Buckler, made under a court judgment for arrears. No further rent is paid for the farmhouse and garden, setting the stage for adverse possession claims.</p>
-          </div>
-        </div>
-      </div>
+    <footer class="text-center mt-16 text-slate-500 text-sm">
+      <p>Curated by Grok | Data consolidated from appellate judgments, archival catalogues, and contemporary reporting.</p>
+    </footer>
+  </div>
 
-      <div class="timeline-item">
-        <div class="year-marker">1955</div>
-        <div class="timeline-content bp" data-year="1955" data-side="bp">
-          <p>D</p>
-          <div class="full-text hidden">
-            <h3>February 2, 1955</h3>
-            <p>Western Ground Rents serves a notice to quit, terminating the tenancy. They initiate summary possession proceedings under Order 14, obtaining a possession order (unenforced).</p>
-          </div>
-        </div>
-      </div>
+  <div id="modal" class="modal" role="dialog" aria-modal="true" aria-hidden="true">
+    <div class="modal-content">
+      <button class="close-btn" type="button" aria-label="Close evidence panel">&times;</button>
+      <h3 id="modal-title" class="text-2xl font-semibold text-slate-100"></h3>
+      <p id="modal-source" class="text-sm text-cyan-300 mt-2"></p>
+      <p id="modal-description" class="text-base text-slate-200 mt-4"></p>
+      <div id="modal-body" class="mt-4 space-y-3 text-slate-200"></div>
+      <div id="modal-actions" class="modal-actions mt-6 flex flex-wrap gap-3"></div>
+    </div>
+  </div>
 
-      <div class="timeline-item">
-        <div class="year-marker">1959</div>
-        <div class="timeline-content buckler" data-year="1959" data-side="buckler">
-          <p>E</p>
-          <div class="full-text hidden">
-            <h3>circa 1959</h3>
-            <p>Mary Buckler develops a belief that she holds ownership title to Great House Farm through her grandfather, asserting undocumented inherited rights. She rejects Western Ground Rents’ tenancy offers, viewing them as unnecessary.</p>
-          </div>
-        </div>
-      </div>
+  <script>
+    (function () {
+      const timelineContainer = document.getElementById('timeline');
+      const loadingMessage = document.getElementById('timeline-loading');
+      const emptyState = document.getElementById('timeline-empty');
+      const caseTitle = document.getElementById('case-title');
+      const caseSubtitle = document.getElementById('case-subtitle');
+      const caseIntro = document.getElementById('case-intro');
+      const keyThemes = document.getElementById('key-themes');
+      const furtherResearch = document.getElementById('further-research');
+      const researchSection = document.getElementById('research');
+      const filterButtons = {
+        buckler: document.getElementById('filter-buckler'),
+        both: document.getElementById('filter-both'),
+        bp: document.getElementById('filter-bp')
+      };
+      const modal = document.getElementById('modal');
+      const modalTitle = document.getElementById('modal-title');
+      const modalSource = document.getElementById('modal-source');
+      const modalDescription = document.getElementById('modal-description');
+      const modalBody = document.getElementById('modal-body');
+      const modalActions = document.getElementById('modal-actions');
+      const closeBtn = document.querySelector('.close-btn');
 
-      <div class="timeline-item">
-        <div class="year-marker">1962</div>
-        <div class="timeline-content bp" data-year="1962" data-side="bp">
-          <p>F</p>
-          <div class="full-text hidden">
-            <h3>1962</h3>
-            <p>Western Ground Rents sues Frederick and Mary Buckler for possession of the farmhouse and garden, plus mesne profits since 1955. A possession order is granted but not enforced, partly due to Mary’s disability (recent leg amputation).</p>
-          </div>
-        </div>
-      </div>
+      const eventStore = new Map();
+      const itemRegistry = new Map();
+      const evidenceIndex = new Map();
+      let timelineItems = [];
+      let activeEventId = null;
 
-      <div class="timeline-item">
-        <div class="year-marker">1963</div>
-        <div class="timeline-content bp" data-year="1963" data-side="bp">
-          <p>G</p>
-          <div class="full-text hidden">
-            <h3>June 1963</h3>
-            <p>A suspended committal order is issued against Frederick Buckler for non-compliance with the 1955 possession order, but enforcement is delayed.</p>
-          </div>
-        </div>
-      </div>
+      const revealObserver = typeof IntersectionObserver !== 'undefined'
+        ? new IntersectionObserver((entries) => {
+          entries.forEach(entry => {
+            if (entry.isIntersecting) {
+              revealItem(entry.target);
+            }
+          });
+        }, { rootMargin: '0px 0px -15%', threshold: 0.2 })
+        : null;
 
-      <div class="timeline-item">
-        <div class="year-marker">1965</div>
-        <div class="timeline-content buckler" data-year="1965" data-side="buckler">
-          <p>H</p>
-          <div class="full-text hidden">
-            <h3>March 1965</h3>
-            <p>Mary Buckler rejects another tenancy offer from Western Ground Rents, insisting on her ownership claim. Frederick complains the offer wasn’t extended to him, but defers to Mary’s stance.</p>
-          </div>
-        </div>
-      </div>
+      function iconForType(type) {
+        const icons = {
+          document: '📄',
+          archive: '🗂️',
+          press: '📰',
+          hansard: '🏛️',
+          transcript: '📝',
+          book: '📚',
+          report: '📑',
+          video: '🎬',
+          audio: '🎧',
+          image: '🖼️'
+        };
+        return icons[type] || '🔍';
+      }
 
-      <div class="timeline-item">
-        <div class="year-marker">1965–1967</div>
-        <div class="timeline-content buckler" data-year="1965-1967" data-side="buckler">
-          <p>I</p>
-          <div class="full-text hidden">
-            <h3>1965–1967</h3>
-            <p>Frederick Buckler dies, leaving Mary and their children, including William Buckler, in possession of the farmhouse and garden. Mary’s belief in her title continues to drive the family’s resistance.</p>
-          </div>
-        </div>
-      </div>
+      function revealItem(item) {
+        if (!item || item.classList.contains('revealed')) {
+          return;
+        }
+        item.classList.add('revealed');
+        if (revealObserver) {
+          revealObserver.unobserve(item);
+        }
+      }
 
-      <div class="timeline-item">
-        <div class="year-marker">1969</div>
-        <div class="timeline-content bp" data-year="1969" data-side="bp">
-          <p>J</p>
-          <div class="full-text hidden">
-            <h3>December 1969</h3>
-            <p>Western Ground Rents sells Great House Farm, including the disputed property, to BP Pension Trust Ltd. The sale includes the benefit of prior possession orders.</p>
-          </div>
-        </div>
-      </div>
+      function createEvidenceTile(evidence, eventId) {
+        evidenceIndex.set(evidence.id, { ...evidence, eventId });
+        const button = document.createElement('button');
+        button.className = 'evidence-tile';
+        button.type = 'button';
+        button.dataset.evidenceId = evidence.id;
+        button.innerHTML = `
+          <span class="evidence-icon">${iconForType(evidence.type)}</span>
+          <span>${evidence.title}</span>
+        `;
+        button.addEventListener('click', () => openEvidence(evidence.id));
+        return button;
+      }
 
-      <div class="timeline-item">
-        <div class="year-marker">1974</div>
-        <div class="timeline-content bp" data-year="1974" data-side="bp">
-          <p>K</p>
-          <div class="full-text hidden">
-            <h3>1974</h3>
-            <p>BP Pension Trust Ltd. initiates possession proceedings in Cardiff County Court against Mary Buckler (sued as Mrs. Williams) and family. The case is stayed amid publicity over Mary’s disability. BP sends letters offering rent-free occupation, later deemed a unilateral license.</p>
-          </div>
-        </div>
-      </div>
+      function populatePanel(panel, event) {
+        if (!panel || !event) {
+          return;
+        }
+        panel.innerHTML = '';
 
-      <div class="timeline-item">
-        <div class="year-marker">1977</div>
-        <div class="timeline-content buckler" data-year="1977" data-side="buckler">
-          <p>L</p>
-          <div class="full-text hidden">
-            <h3>1977</h3>
-            <p>Mary Buckler dies. William Buckler continues occupation, defending the adverse possession claim based on his mother’s belief and the family’s uninterrupted possession.</p>
-          </div>
-        </div>
-      </div>
+        if (event.label || event.side) {
+          const label = document.createElement('div');
+          label.className = 'event-label';
+          const parts = [];
+          if (event.label) {
+            parts.push(event.label);
+          }
+          if (event.side) {
+            const sideText = event.side === 'buckler'
+              ? 'Buckler perspective'
+              : event.side === 'bp'
+                ? 'BP & official record'
+                : 'Shared chronicle';
+            parts.push(sideText);
+          }
+          label.textContent = parts.join(' • ');
+          panel.appendChild(label);
+        }
 
-      <div class="timeline-item">
-        <div class="year-marker">1987</div>
-        <div class="timeline-content bp" data-year="1987" data-side="bp">
-          <p>M</p>
-          <div class="full-text hidden">
-            <h3>1987</h3>
-            <p>The Court of Appeal in <em>BP Properties Ltd v Buckler</em> [1987] EWCA Civ 2 rules against William Buckler, finding that BP’s 1974 letters created an unrepudiated license, interrupting the adverse possession period. The claim is dismissed.</p>
-          </div>
-        </div>
-      </div>
+        const title = document.createElement('h3');
+        title.textContent = event.title;
+        panel.appendChild(title);
 
-      <div class="timeline-item">
-        <div class="year-marker">Archival Note</div>
-        <div class="timeline-content both" data-year="archival" data-side="both">
-          <p>N</p>
-          <div class="full-text hidden">
-            <h3>Archival Note: J 90 Series</h3>
-            <p>Exhibits from the 1955–1963 High Court equity suits (e.g., tenancy documents, correspondence) may be held in The National Archives at Kew under series J 90, which stores evidence from Chancery Division cases post-1875. Search the Discovery catalogue or visit Kew for access.</p>
-          </div>
-        </div>
-      </div>
-    </div>
+        if (event.summary) {
+          const summary = document.createElement('p');
+          summary.className = 'event-summary';
+          summary.textContent = event.summary;
+          panel.appendChild(summary);
+        }
 
-    <div id="modal" class="modal">
-      <div class="modal-content">
-        <span class="close-btn">&times;</span>
-        <div id="modal-text"></div>
-      </div>
-    </div>
+        if (Array.isArray(event.context) && event.context.length) {
+          const contextList = document.createElement('ul');
+          contextList.className = 'event-context';
+          event.context.forEach(line => {
+            const item = document.createElement('li');
+            item.textContent = line;
+            contextList.appendChild(item);
+          });
+          panel.appendChild(contextList);
+        }
 
-    <footer class="text-center mt-12 text-gray-600">
-      <p>Created by Grok, powered by xAI | Data sourced from <em>BP Properties Ltd v Buckler</em> [1987] EWCA Civ 2 and related records.</p>
-    </footer>
-  </div>
+        if (Array.isArray(event.evidence) && event.evidence.length) {
+          const evidenceSection = document.createElement('div');
+          evidenceSection.className = 'evidence-section';
 
-  <script>
-    // Toggle filter functionality
-    const filterBoth = document.getElementById('filter-both');
-    const filterBuckler = document.getElementById('filter-buckler');
-    const filterBp = document.getElementById('filter-bp');
-    const timelineContents = document.querySelectorAll('.timeline-content');
-
-    function setFilter(side) {
-      timelineContents.forEach(content => {
-        if (side === 'both') {
-          content.classList.remove('hidden');
+          const heading = document.createElement('div');
+          heading.className = 'evidence-heading';
+          heading.textContent = 'Evidence & records';
+          evidenceSection.appendChild(heading);
+
+          const grid = document.createElement('div');
+          grid.className = 'evidence-grid';
+          event.evidence.forEach(ev => {
+            grid.appendChild(createEvidenceTile(ev, event.id));
+          });
+          evidenceSection.appendChild(grid);
+          panel.appendChild(evidenceSection);
+        }
+      }
+
+      function closePanel(entry) {
+        if (!entry) {
+          return;
+        }
+        const { panel, bubble } = entry;
+        if (panel.hidden) {
+          return;
+        }
+        panel.hidden = true;
+        panel.setAttribute('aria-hidden', 'true');
+        bubble.setAttribute('aria-expanded', 'false');
+        if (activeEventId === bubble.dataset.eventId) {
+          activeEventId = null;
+        }
+      }
+
+      function togglePanel(eventId) {
+        const entry = itemRegistry.get(eventId);
+        if (!entry) {
+          return;
+        }
+        const { panel, bubble, item } = entry;
+        revealItem(item);
+        if (!panel.hidden) {
+          closePanel(entry);
+          return;
+        }
+        if (activeEventId && activeEventId !== eventId) {
+          closePanel(itemRegistry.get(activeEventId));
+        }
+        if (!panel.dataset.loaded) {
+          populatePanel(panel, eventStore.get(eventId));
+          panel.dataset.loaded = 'true';
+        }
+        panel.hidden = false;
+        panel.setAttribute('aria-hidden', 'false');
+        bubble.setAttribute('aria-expanded', 'true');
+        activeEventId = eventId;
+        panel.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }
+
+      function renderTimeline(events) {
+        timelineContainer.innerHTML = '';
+        evidenceIndex.clear();
+        eventStore.clear();
+        itemRegistry.clear();
+        timelineItems = [];
+        activeEventId = null;
+
+        events.forEach(event => {
+          eventStore.set(event.id, event);
+
+          const timelineItem = document.createElement('div');
+          timelineItem.className = 'timeline-item';
+          timelineItem.dataset.side = event.side || 'both';
+          timelineItem.dataset.eventId = event.id;
+
+          const bubble = document.createElement('button');
+          bubble.className = `timeline-bubble ${event.side || 'both'}`;
+          bubble.type = 'button';
+          bubble.dataset.eventId = event.id;
+          bubble.setAttribute('aria-expanded', 'false');
+          bubble.setAttribute('aria-controls', `panel-${event.id}`);
+          bubble.innerHTML = `
+            <span class="bubble-year">${event.year}</span>
+            <span class="bubble-title">${event.title}</span>
+          `;
+          bubble.addEventListener('click', () => togglePanel(event.id));
+          bubble.addEventListener('focus', () => revealItem(timelineItem));
+          bubble.addEventListener('mouseenter', () => revealItem(timelineItem));
+          timelineItem.appendChild(bubble);
+
+          const panel = document.createElement('div');
+          panel.className = 'timeline-panel';
+          panel.id = `panel-${event.id}`;
+          panel.hidden = true;
+          panel.setAttribute('aria-hidden', 'true');
+          timelineItem.appendChild(panel);
+
+          timelineContainer.appendChild(timelineItem);
+          timelineItems.push(timelineItem);
+          itemRegistry.set(event.id, { item: timelineItem, panel, bubble });
+
+          if (revealObserver) {
+            revealObserver.observe(timelineItem);
+          } else {
+            requestAnimationFrame(() => timelineItem.classList.add('revealed'));
+          }
+        });
+      }
+
+      function renderIntro(data) {
+        if (data.caseTitle) {
+          caseTitle.innerHTML = data.caseTitle;
+        }
+        if (data.caseSubtitle) {
+          caseSubtitle.innerHTML = data.caseSubtitle;
+        }
+        if (Array.isArray(data.introduction)) {
+          caseIntro.innerHTML = '';
+          data.introduction.forEach(paragraph => {
+            const p = document.createElement('p');
+            p.innerHTML = paragraph;
+            caseIntro.appendChild(p);
+          });
+        }
+        if (Array.isArray(data.keyThemes) && data.keyThemes.length) {
+          keyThemes.innerHTML = '';
+          data.keyThemes.forEach(theme => {
+            const card = document.createElement('div');
+            card.className = 'bg-slate-900/60 rounded-2xl shadow-xl border border-slate-600/40 p-6 text-left backdrop-blur';
+
+            const heading = document.createElement('h3');
+            heading.className = 'text-lg font-semibold text-slate-100';
+            heading.textContent = theme.title;
+            card.appendChild(heading);
+
+            if (Array.isArray(theme.items)) {
+              const list = document.createElement('ul');
+              list.className = 'mt-3 space-y-2 text-slate-200/90 text-sm list-disc list-inside';
+              theme.items.forEach(item => {
+                const li = document.createElement('li');
+                li.textContent = item;
+                list.appendChild(li);
+              });
+              card.appendChild(list);
+            }
+
+            keyThemes.appendChild(card);
+          });
+          keyThemes.classList.remove('hidden');
         } else {
-          content.classList.toggle('hidden', content.dataset.side !== side && content.dataset.side !== 'both');
+          keyThemes.classList.add('hidden');
         }
-      });
-      filterBoth.classList.toggle('bg-blue-700', side === 'both');
-      filterBoth.classList.toggle('bg-blue-500', side !== 'both');
-      filterBuckler.classList.toggle('bg-green-700', side === 'buckler');
-      filterBuckler.classList.toggle('bg-green-500', side !== 'buckler');
-      filterBp.classList.toggle('bg-red-700', side === 'bp');
-      filterBp.classList.toggle('bg-red-500', side !== 'bp');
-    }
-
-    filterBoth.addEventListener('click', () => setFilter('both'));
-    filterBuckler.addEventListener('click', () => setFilter('buckler'));
-    filterBp.addEventListener('click', () => setFilter('bp'));
-
-    // Initialize with 'both' view
-    setFilter('both');
-
-    // Modal functionality
-    const modal = document.getElementById('modal');
-    const modalText = document.getElementById('modal-text');
-    const closeBtn = document.querySelector('.close-btn');
-
-    timelineContents.forEach(content => {
-      content.addEventListener('click', () => {
-        const fullText = content.querySelector('.full-text').innerHTML;
-        modalText.innerHTML = fullText;
-        modal.style.display = 'flex';
-      });
-    });
+        if (Array.isArray(data.furtherResearch) && data.furtherResearch.length) {
+          furtherResearch.innerHTML = '';
+          data.furtherResearch.forEach(section => {
+            const card = document.createElement('div');
+            card.className = 'bg-slate-900/60 rounded-2xl shadow-xl border border-slate-600/40 p-6 text-left backdrop-blur';
+
+            const title = document.createElement('h3');
+            title.className = 'text-xl font-semibold text-slate-100';
+            title.textContent = section.heading;
+            card.appendChild(title);
 
-    closeBtn.addEventListener('click', () => {
-      modal.style.display = 'none';
-    });
+            if (Array.isArray(section.items)) {
+              const list = document.createElement('ul');
+              list.className = 'mt-3 space-y-2 text-slate-200/90 list-disc list-inside';
+              section.items.forEach(item => {
+                const li = document.createElement('li');
+                li.innerHTML = item;
+                list.appendChild(li);
+              });
+              card.appendChild(list);
+            }
 
-    modal.addEventListener('click', (e) => {
-      if (e.target === modal) {
-        modal.style.display = 'none';
+            furtherResearch.appendChild(card);
+          });
+          researchSection.classList.remove('hidden');
+        }
+        if (!Array.isArray(data.furtherResearch) || data.furtherResearch.length === 0) {
+          furtherResearch.innerHTML = '';
+          researchSection.classList.add('hidden');
+        }
       }
-    });
 
-    // Add hover effect to timeline content
-    timelineContents.forEach(content => {
-      content.addEventListener('mouseenter', () => {
-        content.classList.add('opacity-75');
+      function updateFilterButtons(active) {
+        Object.entries(filterButtons).forEach(([key, button]) => {
+          const isActive = key === active;
+          button.classList.toggle('ring-4', isActive);
+          button.classList.toggle('ring-offset-2', isActive);
+          button.classList.toggle('ring-offset-slate-900', isActive);
+          button.classList.toggle('ring-slate-100', isActive);
+          button.classList.toggle('shadow-xl', isActive);
+          button.setAttribute('aria-pressed', isActive);
+        });
+      }
+
+      function setFilter(side) {
+        let visibleCount = 0;
+        timelineItems.forEach(item => {
+          const itemSide = item.dataset.side;
+          const matches = side === 'both' || itemSide === side || itemSide === 'both';
+          item.classList.toggle('hidden', !matches);
+          if (!matches && activeEventId === item.dataset.eventId) {
+            closePanel(itemRegistry.get(activeEventId));
+          }
+          if (matches) {
+            visibleCount += 1;
+          }
+        });
+        emptyState.classList.toggle('hidden', visibleCount > 0);
+        updateFilterButtons(side);
+      }
+
+      function openEvidence(evidenceId) {
+        const evidence = evidenceIndex.get(evidenceId);
+        if (!evidence) {
+          return;
+        }
+        modalTitle.textContent = evidence.title;
+        if (evidence.source && evidence.source.name) {
+          if (evidence.source.url) {
+            modalSource.innerHTML = `Source: <a class="underline decoration-dotted" href="${evidence.source.url}" target="_blank" rel="noopener">${evidence.source.name}</a>`;
+          } else {
+            modalSource.textContent = `Source: ${evidence.source.name}`;
+          }
+        } else {
+          modalSource.textContent = '';
+        }
+        modalDescription.textContent = evidence.description || '';
+
+        modalBody.innerHTML = '';
+        if (Array.isArray(evidence.content)) {
+          evidence.content.forEach(paragraph => {
+            const p = document.createElement('p');
+            p.textContent = paragraph;
+            modalBody.appendChild(p);
+          });
+        }
+
+        modalActions.innerHTML = '';
+        if (evidence.embed && evidence.embed.type) {
+          if (evidence.embed.type === 'iframe' && evidence.embed.src) {
+            const iframe = document.createElement('iframe');
+            iframe.src = evidence.embed.src;
+            iframe.loading = 'lazy';
+            iframe.title = evidence.embed.title || evidence.title;
+            modalBody.appendChild(iframe);
+          } else if (evidence.embed.type === 'object' && evidence.embed.src) {
+            const object = document.createElement('object');
+            object.data = evidence.embed.src;
+            object.type = evidence.embed.mime || 'application/pdf';
+            modalBody.appendChild(object);
+          }
+        }
+
+        if (evidence.source && evidence.source.url) {
+          const link = document.createElement('a');
+          link.href = evidence.source.url;
+          link.target = '_blank';
+          link.rel = 'noopener';
+          link.innerHTML = 'Open source <span aria-hidden="true">↗</span>';
+          modalActions.appendChild(link);
+        }
+
+        modal.classList.add('active');
+        modal.setAttribute('aria-hidden', 'false');
+        document.body.style.overflow = 'hidden';
+      }
+
+      function closeModal() {
+        modal.classList.remove('active');
+        modal.setAttribute('aria-hidden', 'true');
+        document.body.style.overflow = '';
+      }
+
+      closeBtn.addEventListener('click', closeModal);
+      modal.addEventListener('click', (event) => {
+        if (event.target === modal) {
+          closeModal();
+        }
       });
-      content.addEventListener('mouseleave', () => {
-        content.classList.remove('opacity-75');
+      document.addEventListener('keydown', (event) => {
+        if (event.key === 'Escape') {
+          if (modal.classList.contains('active')) {
+            closeModal();
+          } else if (activeEventId) {
+            closePanel(itemRegistry.get(activeEventId));
+          }
+        }
       });
-    });
+
+      Object.entries(filterButtons).forEach(([key, button]) => {
+        button.addEventListener('click', () => setFilter(key));
+      });
+
+      fetch('data/timeline.json')
+        .then(response => {
+          if (!response.ok) {
+            throw new Error('Failed to load timeline data');
+          }
+          return response.json();
+        })
+        .then(data => {
+          loadingMessage.classList.add('hidden');
+          renderIntro(data);
+          renderTimeline(data.events || []);
+          setFilter('both');
+        })
+        .catch(error => {
+          console.error(error);
+          loadingMessage.textContent = 'We could not load the timeline data. Please refresh the page.';
+        });
+    })();
   </script>
 </body>
 </html>