Hugging Face's logo

Spaces:
hmb
/
forest-dispatch
Running

App Files Community
forest-dispatch / app.py
hmb's picture
hmb HF Staff
Upload folder using huggingface_hub
48d91be verified
raw
history blame contribute delete
71.2 kB
"""
Policy vs Deforestation Explorer — built with gr.Server
Uses gr.Server for API endpoints (with MCP tool support) and a custom
HTML frontend with Chart.js for interactive visualization.
"""
import json
import urllib.request
from gradio import Server
from fastapi.responses import HTMLResponse, JSONResponse
app = Server()
COUNTRIES = {
 "Brazil": "BRA", "Indonesia": "IDN", "DR Congo": "COD",
 "Colombia": "COL", "Bolivia": "BOL", "Malaysia": "MYS",
 "India": "IND", "Mexico": "MEX", "Peru": "PER",
 "Australia": "AUS", "Canada": "CAN", "Russia": "RUS",
 "China": "CHN", "United States": "USA", "Nigeria": "NGA",
 "Myanmar": "MMR", "Tanzania": "TZA", "Paraguay": "PRY",
 "Madagascar": "MDG", "Cameroon": "CMR",
}
POLICY_EVENTS = {
 "Brazil": [
 {"year": 2004, "text": "PPCDAm action plan launched", "url": "https://en.wikipedia.org/wiki/Deforestation_in_Brazil"},
 {"year": 2006, "text": "Soy Moratorium signed", "url": "https://en.wikipedia.org/wiki/Amazon_Soy_Moratorium"},
 {"year": 2008, "text": "Amazon Fund established", "url": "https://en.wikipedia.org/wiki/Amazon_Fund"},
 {"year": 2012, "text": "New Forest Code enacted", "url": "https://en.wikipedia.org/wiki/Deforestation_in_Brazil"},
 {"year": 2019, "text": "Enforcement weakened under Bolsonaro", "url": "https://en.wikipedia.org/wiki/Deforestation_in_Brazil"},
 {"year": 2023, "text": "Zero deforestation pledge renewed", "url": "https://en.wikipedia.org/wiki/Deforestation_in_Brazil"},
 ],
 "Indonesia": [
 {"year": 2002, "text": "Illegal Logging Decree", "url": "https://en.wikipedia.org/wiki/Deforestation_in_Indonesia"},
 {"year": 2011, "text": "Forest moratorium on concessions", "url": "https://en.wikipedia.org/wiki/Deforestation_in_Indonesia"},
 {"year": 2014, "text": "One Map Policy", "url": "https://en.wikipedia.org/wiki/Joko_Widodo"},
 {"year": 2018, "text": "Moratorium extended permanently", "url": "https://en.wikipedia.org/wiki/Deforestation_in_Indonesia"},
 {"year": 2023, "text": "FOLU Net Sink 2030 strategy", "url": "https://en.wikipedia.org/wiki/Climate_change_in_Indonesia"},
 ],
 "DR Congo": [
 {"year": 2002, "text": "Forest Code enacted", "url": "https://en.wikipedia.org/wiki/Deforestation_in_the_Democratic_Republic_of_the_Congo"},
 {"year": 2014, "text": "REDD+ national strategy", "url": "https://en.wikipedia.org/wiki/REDD_and_REDD%2B"},
 {"year": 2022, "text": "Logging moratorium lifted", "url": "https://en.wikipedia.org/wiki/Deforestation_in_the_Democratic_Republic_of_the_Congo"},
 ],
 "Colombia": [
 {"year": 2010, "text": "REDD+ strategy launched", "url": "https://en.wikipedia.org/wiki/REDD_and_REDD%2B"},
 {"year": 2016, "text": "FARC peace deal", "url": "https://en.wikipedia.org/wiki/Colombian_peace_process"},
 {"year": 2018, "text": "Deforestation Control Council", "url": "https://en.wikipedia.org/wiki/Deforestation_in_Colombia"},
 {"year": 2023, "text": "Amazon pact signed", "url": "https://en.wikipedia.org/wiki/Amazon_Cooperation_Treaty_Organization"},
 ],
 "India": [
 {"year": 2006, "text": "Forest Rights Act", "url": "https://en.wikipedia.org/wiki/Forest_Rights_Act,_2006"},
 {"year": 2014, "text": "Green India Mission", "url": "https://en.wikipedia.org/wiki/Government_of_India"},
 {"year": 2019, "text": "Compensatory Afforestation Fund", "url": "https://en.wikipedia.org/wiki/Compensatory_Afforestation_Fund_Act,_2016"},
 ],
 "Malaysia": [
 {"year": 2010, "text": "50% forest cover pledge", "url": "https://en.wikipedia.org/wiki/Deforestation_in_Malaysia"},
 {"year": 2017, "text": "MSPO mandatory certification", "url": "https://en.wikipedia.org/wiki/Malaysian_Sustainable_Palm_Oil"},
 ],
 "China": [
 {"year": 1998, "text": "Natural Forest Protection Program", "url": "https://en.wikipedia.org/wiki/Reforestation_in_China"},
 {"year": 2003, "text": "Grain-to-Green expanded", "url": "https://en.wikipedia.org/wiki/Reforestation_in_China"},
 {"year": 2016, "text": "13th Five-Year Plan forestry targets", "url": "https://en.wikipedia.org/wiki/13th_Five-Year_Plan_(China)"},
 ],
 "Mexico": [
 {"year": 2001, "text": "ProÁrbol reforestation", "url": "https://en.wikipedia.org/wiki/CONAFOR"},
 {"year": 2012, "text": "Climate Change Law", "url": "https://en.wikipedia.org/wiki/Climate_change_in_Mexico"},
 {"year": 2020, "text": "Sembrando Vida program", "url": "https://en.wikipedia.org/wiki/Andr%C3%A9s_Manuel_L%C3%B3pez_Obrador"},
 ],
 "Canada": [
 {"year": 2010, "text": "Boreal Forest Agreement", "url": "https://en.wikipedia.org/wiki/Boreal_forest_of_Canada"},
 {"year": 2021, "text": "2 Billion Trees program", "url": "https://www.canada.ca/en/campaign/2-billion-trees.html"},
 ],
 "Australia": [
 {"year": 2000, "text": "Regional Forest Agreements", "url": "https://en.wikipedia.org/wiki/Regional_Forest_Agreement"},
 {"year": 2012, "text": "Carbon farming legislation", "url": "https://en.wikipedia.org/wiki/Climate_change_in_Australia"},
 {"year": 2022, "text": "Nature Repair Market Act", "url": "https://en.wikipedia.org/wiki/Climate_change_in_Australia"},
 ],
 "United States": [
 {"year": 2001, "text": "Healthy Forests Initiative", "url": "https://en.wikipedia.org/wiki/Healthy_Forests_Initiative"},
 {"year": 2008, "text": "Lacey Act amended to ban illegal timber", "url": "https://en.wikipedia.org/wiki/Lacey_Act_of_1900"},
 {"year": 2022, "text": "Inflation Reduction Act — $5B for forests", "url": "https://en.wikipedia.org/wiki/Inflation_Reduction_Act"},
 ],
 "Russia": [
 {"year": 1997, "text": "First Russian Forest Code", "url": "https://en.wikipedia.org/wiki/Forestry_in_Russia"},
 {"year": 2006, "text": "New Forest Code — privatisation of management", "url": "https://en.wikipedia.org/wiki/Forestry_in_Russia"},
 {"year": 2020, "text": "Forest protection reform after record fires", "url": "https://en.wikipedia.org/wiki/Forestry_in_Russia"},
 ],
 "Bolivia": [
 {"year": 1996, "text": "Forestry Law 1700 enacted", "url": "https://en.wikipedia.org/wiki/Deforestation"},
 {"year": 2012, "text": "Mother Earth Law", "url": "https://en.wikipedia.org/wiki/Law_of_the_Rights_of_Mother_Earth"},
 ],
 "Peru": [
 {"year": 2011, "text": "Forest and Wildlife Law 29763", "url": "https://en.wikipedia.org/wiki/Deforestation_in_Peru"},
 {"year": 2014, "text": "Joint Declaration with Norway & Germany", "url": "https://en.wikipedia.org/wiki/Deforestation_in_Peru"},
 ],
 "Paraguay": [
 {"year": 2004, "text": "Zero Deforestation Law (East region)", "url": "https://en.wikipedia.org/wiki/Deforestation"},
 ],
 "Madagascar": [
 {"year": 2003, "text": "Durban Vision — triple protected areas", "url": "https://en.wikipedia.org/wiki/Environment_of_Madagascar"},
 {"year": 2015, "text": "National REDD+ strategy", "url": "https://en.wikipedia.org/wiki/REDD_and_REDD%2B"},
 ],
 "Cameroon": [
 {"year": 1994, "text": "Forest Law 94/01 enacted", "url": "https://en.wikipedia.org/wiki/Forestry_in_Cameroon"},
 {"year": 2010, "text": "CAFI partnership initiated", "url": "https://en.wikipedia.org/wiki/Forestry_in_Cameroon"},
 ],
 "Nigeria": [
 {"year": 1999, "text": "Federal Forestry Policy", "url": "https://en.wikipedia.org/wiki/Forestry_in_Nigeria"},
 {"year": 2017, "text": "Great Green Wall commitment", "url": "https://en.wikipedia.org/wiki/Great_Green_Wall_(Africa)"},
 ],
 "Myanmar": [
 {"year": 1992, "text": "Forest Law passed", "url": "https://en.wikipedia.org/wiki/Deforestation"},
 {"year": 2014, "text": "Raw log export ban", "url": "https://en.wikipedia.org/wiki/Deforestation"},
 ],
 "Tanzania": [
 {"year": 2002, "text": "Forest Act enacted", "url": "https://en.wikipedia.org/wiki/Environmental_issues_in_Tanzania"},
 {"year": 2015, "text": "National REDD+ strategy", "url": "https://en.wikipedia.org/wiki/REDD_and_REDD%2B"},
 ],
}
CLIMATE_EVENTS = {
 "Australia": [
 {"year": 2002, "text": "Millennium Drought intensifies", "url": "https://en.wikipedia.org/wiki/2000s_Australian_drought"},
 {"year": 2009, "text": "Black Saturday bushfires (430k ha)", "url": "https://en.wikipedia.org/wiki/Black_Saturday_bushfires"},
 {"year": 2020, "text": "Black Summer fires (18.6M ha)", "url": "https://en.wikipedia.org/wiki/2019%E2%80%9320_Australian_bushfire_season"},
 ],
 "Indonesia": [
 {"year": 1997, "text": "Southeast Asian haze from peat fires", "url": "https://en.wikipedia.org/wiki/1997_Southeast_Asian_haze"},
 {"year": 2015, "text": "Peat fires burn 2.6M ha", "url": "https://en.wikipedia.org/wiki/2015_Southeast_Asian_haze"},
 {"year": 2019, "text": "Major fire season, 1.6M ha burned", "url": "https://en.wikipedia.org/wiki/2019_Southeast_Asian_haze"},
 ],
 "Brazil": [
 {"year": 2019, "text": "Amazon fires spike 84%", "url": "https://en.wikipedia.org/wiki/2019_Amazon_rainforest_wildfires"},
 {"year": 2020, "text": "Pantanal wetland fires (4M ha)", "url": "https://en.wikipedia.org/wiki/2020_Pantanal_wildfires"},
 ],
 "Canada": [
 {"year": 2005, "text": "Mountain pine beetle peak (18M ha)", "url": "https://en.wikipedia.org/wiki/Mountain_pine_beetle"},
 {"year": 2016, "text": "Fort McMurray fire", "url": "https://en.wikipedia.org/wiki/2016_Fort_McMurray_wildfire"},
 {"year": 2023, "text": "Record fire season (18.5M ha)", "url": "https://en.wikipedia.org/wiki/2023_Canadian_wildfires"},
 ],
 "Russia": [
 {"year": 2010, "text": "Moscow smog — wildfires kill 56k", "url": "https://en.wikipedia.org/wiki/2010_Russian_wildfires"},
 {"year": 2019, "text": "Siberian fires (4M ha)", "url": "https://en.wikipedia.org/wiki/2019_Siberia_wildfires"},
 {"year": 2021, "text": "Record Siberian fires (18.8M ha)", "url": "https://en.wikipedia.org/wiki/2021_Russia_wildfires"},
 ],
 "China": [
 {"year": 1998, "text": "Yangtze floods kill 4,000+", "url": "https://en.wikipedia.org/wiki/1998_China_floods"},
 ],
 "United States": [
 {"year": 2018, "text": "Camp Fire destroys Paradise", "url": "https://en.wikipedia.org/wiki/Camp_Fire_(2018)"},
 {"year": 2020, "text": "Record fire season (4.2M acres)", "url": "https://en.wikipedia.org/wiki/2020_California_wildfires"},
 {"year": 2023, "text": "Maui fires & Canadian smoke crisis", "url": "https://en.wikipedia.org/wiki/2023_Hawaii_wildfires"},
 ],
 "Colombia": [
 {"year": 2017, "text": "Deforestation spikes in post-FARC areas", "url": "https://en.wikipedia.org/wiki/Deforestation_in_Colombia"},
 ],
 "Mexico": [
 {"year": 2011, "text": "Worst drought in 70 years", "url": "https://en.wikipedia.org/wiki/Climate_change_in_Mexico"},
 ],
 "Bolivia": [
 {"year": 2019, "text": "Chiquitano fires burn 2.3M ha", "url": "https://en.wikipedia.org/wiki/2019_Amazon_rainforest_wildfires"},
 ],
 "Madagascar": [
 {"year": 2020, "text": "Severe drought in southern regions", "url": "https://en.wikipedia.org/wiki/Environment_of_Madagascar"},
 ],
 "DR Congo": [
 {"year": 2003, "text": "Second Congo War ends", "url": "https://en.wikipedia.org/wiki/Second_Congo_War"},
 ],
}
_cache = {}
HISTORICAL_CONTEXT = {
 "Brazil": {
 range(1990, 1996): "Rapid expansion of cattle ranching and soy farming in the Amazon after economic stabilisation.",
 range(1996, 2005): "Peak deforestation era — illegal logging, land speculation, and weak enforcement. Arc of deforestation expanded.",
 range(2005, 2013): "PPCDAm enforcement + satellite monitoring (DETER) + soy/beef moratoriums drove sharp decline in clearing rates.",
 range(2013, 2019): "Deforestation crept back up as budget cuts weakened IBAMA enforcement and new Forest Code allowed amnesty for past clearing.",
 range(2019, 2023): "Environmental enforcement dismantled, IBAMA fines dropped 70%. Amazon tipping point warnings from scientists.",
 },
 "Indonesia": {
 range(1990, 2000): "Suharto-era logging concessions and transmigration programs accelerated forest loss, especially in Sumatra and Kalimantan.",
 range(2000, 2005): "Post-Suharto decentralisation gave district heads power to issue logging/plantation permits, often corruptly.",
 range(2005, 2012): "Palm oil boom — Indonesia became world's largest producer. Peatland drainage caused massive fires (2006, 2009).",
 range(2012, 2018): "2015 fires burned 2.6M hectares, caused $16B damage. Led to peat restoration agency and stronger moratorium.",
 range(2018, 2023): "Deforestation rates declined significantly. Palm oil export ban (2022) temporarily reduced pressure.",
 },
 "Australia": {
 range(1990, 2000): "Broadscale land clearing for agriculture, especially in Queensland. Woody vegetation loss peaked mid-1990s.",
 range(2000, 2007): "Millennium drought (2001-2009) devastated forests. Queensland banned broadscale clearing in 2006.",
 range(2007, 2013): "Black Saturday bushfires (2009) destroyed 430,000 hectares. Drought continued to stress forests.",
 range(2013, 2020): "Forest recovery after drought broke. But 2019-20 Black Summer fires burned 18.6M hectares — worst fire season on record.",
 range(2020, 2023): "La Niña rains aided recovery. New environmental laws and carbon farming incentives.",
 },
 "DR Congo": {
 range(1990, 2002): "Civil wars (1996-2003) disrupted industrial logging but subsistence clearing continued.",
 range(2002, 2015): "Population growth drove smallholder agriculture expansion — the primary deforestation driver. Charcoal demand surged.",
 range(2015, 2023): "Artisanal mining and cocoa expansion increased. DRC has lowest governance capacity of major forest nations.",
 },
 "Colombia": {
 range(1990, 2016): "FARC conflict paradoxically protected forests — armed groups controlled access to remote areas.",
 range(2016, 2020): "Post-peace deal: deforestation spiked 44% as land grabbers moved into former FARC territory.",
 range(2020, 2023): "Government crackdown on deforestation. Amazon pact signed with Brazil and other nations.",
 },
 "India": {
 range(1990, 2005): "Forest cover data contested — government counts plantations as forest. Native forest loss continued.",
 range(2005, 2015): "Massive afforestation programs (Green India Mission) increased total tree cover, though primary forest still declined.",
 range(2015, 2023): "Forest Rights Act empowered tribal communities. Compensatory afforestation fund reached $6B.",
 },
 "China": {
 range(1990, 2000): "1998 Yangtze floods killed 4,000+ — blamed on upstream deforestation. Triggered logging ban.",
 range(2000, 2010): "Grain-to-Green: world's largest reforestation program. Paid 120M farmers to convert cropland to forest.",
 range(2010, 2023): "China became net reforester. But imports shifted deforestation to SE Asia and Africa.",
 },
 "Malaysia": {
 range(1990, 2005): "Rapid palm oil expansion, especially in Sabah and Sarawak. Malaysia became 2nd largest producer.",
 range(2005, 2015): "International pressure over orangutan habitat. RSPO certification introduced but adoption slow.",
 range(2015, 2023): "MSPO mandatory certification. Pledged 50% forest cover but definition includes oil palm.",
 },
 "Mexico": {
 range(1990, 2005): "NAFTA (1994) shifted agriculture — some marginal farmland abandoned and reforested, but Lacandón jungle clearing continued.",
 range(2005, 2015): "Drug cartel activity in forests (avocado, poppy cultivation) drove illegal clearing in Michoacán and Guerrero.",
 range(2015, 2023): "Sembrando Vida program controversially paid farmers to plant trees — but some cut existing forest to qualify.",
 },
 "Canada": {
 range(1990, 2005): "Forestry industry dominated — clearcut logging in British Columbia and boreal regions.",
 range(2005, 2015): "Mountain pine beetle epidemic killed 18M hectares of BC forest — largest insect blight in North American history.",
 range(2015, 2023): "Wildfires intensified with climate change. 2023 was worst fire season ever — 18.5M hectares burned.",
 },
 "Russia": {
 range(1990, 2000): "Post-Soviet collapse reduced industrial logging but also enforcement. Illegal logging surged.",
 range(2000, 2010): "Siberian wildfires increased dramatically. 2010 fires caused Moscow smog crisis.",
 range(2010, 2023): "Permafrost thaw and wildfires became primary forest loss drivers. 2021: record 18.8M hectares burned.",
 },
 "United States": {
 range(1990, 2005): "Net forest area roughly stable. Urban sprawl consumed some forest, offset by farmland reversion in East.",
 range(2005, 2015): "Western wildfires intensified — bark beetle outbreaks weakened millions of hectares. 2012 was record fire year.",
 range(2015, 2023): "Paradise fire (2018), record 2020 season (4.2M acres in CA/OR/WA). Climate-driven megafires now the norm.",
 },
}
def _fetch_wb(country_code: str, indicator: str) -> list[dict]:
 cache_key = f"{country_code}:{indicator}"
 if cache_key in _cache:
 return _cache[cache_key]
 url = (
 f"https://api.worldbank.org/v2/country/{country_code}"
 f"/indicator/{indicator}?format=json&per_page=50&date=1990:2022"
 )
 for attempt in range(3):
 try:
 resp = urllib.request.urlopen(url, timeout=30)
 data = json.loads(resp.read())
 if len(data) < 2 or not data[1]:
 _cache[cache_key] = []
 return []
 results = [
 {"year": int(d["date"]), "value": round(d["value"], 3)}
 for d in data[1]
 if d["value"] is not None
 ]
 results.sort(key=lambda x: x["year"])
 _cache[cache_key] = results
 return results
 except Exception:
 if attempt == 2:
 return []
 import time
 time.sleep(1)
@app.mcp.tool(name="get_forest_data")
@app.api(name="get_forest_data")
def get_forest_data(country: str) -> dict:
 """Get forest area (% of land) time series for a country. Returns yearly data from World Bank."""
 code = COUNTRIES.get(country)
 if not code:
 return {"error": f"Unknown country. Available: {', '.join(COUNTRIES.keys())}"}
 forest = _fetch_wb(code, "AG.LND.FRST.ZS")
 governance = _fetch_wb(code, "RL.EST")
 policies = POLICY_EVENTS.get(country, [])
 climate = CLIMATE_EVENTS.get(country, [])
summary = {}
 if forest:
 first, last = forest[0], forest[-1]
 change = last["value"] - first["value"]
 years = last["year"] - first["year"]
 summary = {
 "start_year": first["year"],
 "end_year": last["year"],
 "start_pct": first["value"],
 "end_pct": last["value"],
 "change_pct": round(change, 3),
 "annual_rate": round(change / years, 4) if years else 0,
 }
return {
 "country": country,
 "forest": forest,
 "governance": governance,
 "policies": policies,
 "climate": climate,
 "summary": summary,
 }
@app.mcp.tool(name="compare_countries")
@app.api(name="compare_countries")
def compare_countries(country_a: str, country_b: str) -> dict:
 """Compare forest cover trends between two countries."""
 a = get_forest_data(country_a)
 b = get_forest_data(country_b)
 return {"country_a": a, "country_b": b}
@app.mcp.tool(name="explain_spike")
@app.api(name="explain_spike")
def explain_spike(country: str, year: int) -> dict:
 """Explain what happened to forest cover around a specific year. Identifies rate changes and nearby policy events."""
 code = COUNTRIES.get(country)
 if not code:
 return {"error": f"Unknown country."}
 forest = _fetch_wb(code, "AG.LND.FRST.ZS")
 if not forest:
 return {"error": "No data available."}
policies = POLICY_EVENTS.get(country, [])
 nearby_policies = [p for p in policies if abs(p["year"] - year) <= 3]
 climate = CLIMATE_EVENTS.get(country, [])
 nearby_climate = [c for c in climate if abs(c["year"] - year) <= 3]
window = [f for f in forest if abs(f["year"] - year) <= 5]
 window.sort(key=lambda x: x["year"])
point = next((f for f in forest if f["year"] == year), None)
 prev = next((f for f in forest if f["year"] == year - 1), None)
 nxt = next((f for f in forest if f["year"] == year + 1), None)
before = [f for f in forest if year - 5 <= f["year"] < year]
 after = [f for f in forest if year < f["year"] <= year + 5]
rate_before = None
 rate_after = None
 if len(before) >= 2:
 rate_before = round((before[-1]["value"] - before[0]["value"]) / (before[-1]["year"] - before[0]["year"]), 4)
 if len(after) >= 2:
 rate_after = round((after[-1]["value"] - after[0]["value"]) / (after[-1]["year"] - after[0]["year"]), 4)
yoy_change = None
 if point and prev:
 yoy_change = round(point["value"] - prev["value"], 3)
trend = "stable"
 if rate_before is not None and rate_after is not None:
 if rate_after > rate_before + 0.01:
 trend = "recovery"
 elif rate_after < rate_before - 0.01:
 trend = "acceleration"
 if yoy_change is not None:
 if yoy_change > 0.05:
 trend = "sharp increase"
 elif yoy_change < -0.05:
 trend = "sharp decline"
context = None
 country_ctx = HISTORICAL_CONTEXT.get(country, {})
 for year_range, text in country_ctx.items():
 if year in year_range:
 context = text
 break
return {
 "country": country,
 "year": year,
 "forest_pct": point["value"] if point else None,
 "yoy_change": yoy_change,
 "trend": trend,
 "rate_5yr_before": rate_before,
 "rate_5yr_after": rate_after,
 "nearby_policies": nearby_policies,
 "nearby_climate": nearby_climate,
 "context": context,
 "window": window,
 }
@app.mcp.tool(name="list_countries")
@app.api(name="list_countries")
def list_countries() -> list[str]:
 """List all available countries."""
 return list(COUNTRIES.keys())
@app.get("/", response_class=HTMLResponse)
async def homepage():
 countries_json = json.dumps(list(COUNTRIES.keys()))
 return f"""<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Forest Dispatch — A Record of What We Have Lost</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,800;1,9..144,400&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@3"></script>
<style>
* {{ margin: 0; padding: 0; box-sizing: border-box; }}
:root {{
 --paper: #ede5d3;
 --paper-tint: #e4dbc5;
 --paper-deep: #d8cdb3;
 --ink: #1a1f18;
 --ink-soft: #3a3f35;
 --ink-mute: #6a6d60;
 --ink-fade: #9c9e8f;
 --rule: #3a3f35;
 --rule-soft: #c5bda5;
 --moss: #4a6b3e;
 --moss-deep: #2f4827;
 --oxblood: #8b2a1f;
 --oxblood-deep: #5c1e16;
 --amber: #a8732a;
 --amber-deep: #7d5418;
 --highlight: #d4c98a;
}}
html {{ background: var(--paper); }}
body {{
 font-family: 'Fraunces', Georgia, serif;
 font-optical-sizing: auto;
 background: var(--paper);
 color: var(--ink);
 min-height: 100vh;
 font-size: 16px;
 line-height: 1.55;
 position: relative;
 overflow-x: hidden;
}}
/* Grain texture overlay — gives that risograph/newsprint feel */
body::before {{
 content: '';
 position: fixed;
 inset: 0;
 pointer-events: none;
 z-index: 1000;
 opacity: 0.35;
 mix-blend-mode: multiply;
 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.12 0 0 0 0 0.09 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}}
/* Paper vignette */
body::after {{
 content: '';
 position: fixed;
 inset: 0;
 pointer-events: none;
 z-index: 999;
 background: radial-gradient(ellipse at center, transparent 40%, rgba(60, 50, 30, 0.18) 100%);
}}
a {{ color: var(--oxblood); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: opacity 0.15s; }}
a:hover {{ opacity: 0.7; }}
.mono {{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-feature-settings: "tnum", "zero"; }}
.serif-display {{ font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; }}
.tabular {{ font-variant-numeric: tabular-nums; }}
.smallcaps {{
 text-transform: uppercase;
 letter-spacing: 0.18em;
 font-size: 0.72em;
 font-weight: 600;
 font-family: 'JetBrains Mono', ui-monospace, monospace;
}}
/* ====== MASTHEAD ====== */
.masthead {{
 padding: 16px 48px 0;
 border-bottom: 2px solid var(--ink);
 position: relative;
 z-index: 2;
}}
.masthead-top {{
 display: flex;
 justify-content: space-between;
 align-items: baseline;
 font-family: 'JetBrains Mono', monospace;
 font-size: 10px;
 letter-spacing: 0.15em;
 text-transform: uppercase;
 color: var(--ink-soft);
 padding-bottom: 6px;
 border-bottom: 1px solid var(--rule-soft);
}}
.masthead-top .vol {{ display: flex; gap: 22px; }}
.masthead-top .vol span:not(:last-child)::after {{
 content: '·';
 margin-left: 22px;
 color: var(--ink-fade);
}}
.masthead-row {{
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 32px;
 padding: 12px 0;
}}
.wordmark {{
 font-family: 'Instrument Serif', serif;
 font-size: clamp(40px, 5.5vw, 72px);
 line-height: 0.95;
 letter-spacing: -0.02em;
 font-weight: 400;
 font-style: italic;
 flex-shrink: 0;
}}
.wordmark .dispatch {{ font-style: normal; }}
.dek-text {{
 flex: 1;
 max-width: 520px;
 font-size: 13px;
 line-height: 1.5;
 color: var(--ink-soft);
 font-style: italic;
}}
.dek-text::first-letter {{
 font-family: 'Instrument Serif', serif;
 font-size: 3.4em;
 line-height: 0.8;
 float: left;
 padding: 4px 8px 0 0;
 color: var(--oxblood);
 font-style: normal;
}}
.dek-meta {{
 text-align: right;
 font-family: 'JetBrains Mono', monospace;
 font-size: 9px;
 letter-spacing: 0.15em;
 text-transform: uppercase;
 color: var(--ink-mute);
 line-height: 1.7;
 white-space: nowrap;
 flex-shrink: 0;
}}
.dek-meta .badge {{
 display: inline-block;
 background: var(--ink);
 color: var(--paper);
 padding: 2px 7px;
 margin-top: 3px;
 font-weight: 500;
}}
/* ====== MAIN GRID ====== */
.sheet {{
 max-width: 1400px;
 margin: 0 auto;
 padding: 0 48px 48px;
 position: relative;
 z-index: 2;
}}
/* ====== CONTROL STRIP ====== */
.control-strip {{
 display: grid;
 grid-template-columns: 1fr auto auto auto;
 gap: 24px;
 align-items: end;
 padding: 14px 0 16px;
 border-bottom: 1px solid var(--rule);
 margin-bottom: 18px;
}}
.section-title {{
 font-family: 'Instrument Serif', serif;
 font-size: 18px;
 letter-spacing: -0.01em;
 line-height: 1.2;
 font-style: italic;
 color: var(--ink-soft);
 padding-bottom: 4px;
}}
.section-title .caps {{
 display: block;
 font-family: 'JetBrains Mono', monospace;
 font-size: 9px;
 letter-spacing: 0.2em;
 color: var(--ink-mute);
 text-transform: uppercase;
 margin-bottom: 4px;
 font-weight: 500;
 font-style: normal;
}}
.control-group {{
 display: flex;
 flex-direction: column;
 gap: 4px;
}}
.control-group label {{
 font-family: 'JetBrains Mono', monospace;
 font-size: 9px;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 color: var(--ink-mute);
 font-weight: 500;
}}
select {{
 background: transparent;
 border: none;
 border-bottom: 1px solid var(--ink);
 color: var(--ink);
 padding: 4px 24px 4px 0;
 font-family: 'Fraunces', serif;
 font-size: 18px;
 font-weight: 500;
 min-width: 180px;
 cursor: pointer;
 outline: none;
 appearance: none;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3 L5 7 L9 3' stroke='%231a1f18' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 4px center;
 transition: border-color 0.15s;
}}
select:focus {{ border-bottom-color: var(--oxblood); }}
button.action {{
 background: var(--ink);
 color: var(--paper);
 border: none;
 padding: 12px 28px;
 font-family: 'JetBrains Mono', monospace;
 font-size: 11px;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 font-weight: 500;
 cursor: pointer;
 transition: all 0.15s;
 position: relative;
 box-shadow: 3px 3px 0 var(--rule-soft);
}}
button.action:hover {{
 transform: translate(-1px, -1px);
 box-shadow: 4px 4px 0 var(--oxblood);
}}
button.action:active {{
 transform: translate(2px, 2px);
 box-shadow: 1px 1px 0 var(--rule-soft);
}}
/* ====== FINDINGS ROW ====== */
.findings {{
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 border-top: 2px solid var(--ink);
 border-bottom: 2px solid var(--ink);
 margin-bottom: 32px;
 min-height: 110px;
}}
.finding {{
 padding: 14px 22px 16px;
 border-right: 1px solid var(--rule);
 position: relative;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}}
.finding:last-child {{ border-right: none; }}
.finding::before {{
 content: attr(data-num);
 position: absolute;
 top: 8px;
 right: 10px;
 font-family: 'JetBrains Mono', monospace;
 font-size: 9px;
 color: var(--ink-fade);
 letter-spacing: 0.15em;
}}
.finding .label {{
 font-family: 'JetBrains Mono', monospace;
 font-size: 9px;
 letter-spacing: 0.22em;
 text-transform: uppercase;
 color: var(--ink-mute);
 margin-bottom: 6px;
 font-weight: 500;
}}
.finding .value {{
 font-family: 'Instrument Serif', serif;
 font-size: 40px;
 line-height: 1;
 letter-spacing: -0.02em;
 color: var(--ink);
 font-variant-numeric: tabular-nums;
 font-weight: 400;
}}
.finding .value.down {{ color: var(--oxblood); font-style: italic; }}
.finding .value.up {{ color: var(--moss-deep); }}
.finding .sub {{
 font-family: 'JetBrains Mono', monospace;
 font-size: 10px;
 color: var(--ink-mute);
 margin-top: 8px;
 letter-spacing: 0.05em;
}}
.finding .unit {{
 font-family: 'Fraunces', serif;
 font-size: 14px;
 font-style: italic;
 color: var(--ink-soft);
 margin-left: 2px;
 font-weight: 400;
}}
/* ====== CHART FIGURE ====== */
.figure {{
 margin-bottom: 28px;
}}
.figure-head {{
 display: flex;
 justify-content: space-between;
 align-items: baseline;
 padding-bottom: 14px;
 border-bottom: 1px solid var(--rule);
 margin-bottom: 2px;
}}
.figure-title {{
 font-family: 'Instrument Serif', serif;
 font-size: 26px;
 letter-spacing: -0.01em;
 font-style: italic;
}}
.figure-title::before {{
 content: 'Fig. 1 ';
 font-family: 'JetBrains Mono', monospace;
 font-style: normal;
 font-size: 12px;
 letter-spacing: 0.15em;
 color: var(--ink-mute);
 vertical-align: middle;
 margin-right: 10px;
 padding-right: 10px;
 border-right: 1px solid var(--rule);
}}
.figure-note {{
 font-family: 'JetBrains Mono', monospace;
 font-size: 10px;
 letter-spacing: 0.1em;
 color: var(--ink-mute);
 text-transform: uppercase;
}}
.figure-frame {{
 background: var(--paper-tint);
 border: 1px solid var(--rule);
 border-top: none;
 padding: 20px;
 height: clamp(420px, 56vh, 580px);
 position: relative;
}}
.figure-loading {{
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: 'Instrument Serif', serif;
 font-style: italic;
 font-size: 22px;
 color: var(--ink-mute);
 background: var(--paper-tint);
 z-index: 5;
}}
.figure-loading::after {{
 content: ' ·';
 animation: ellipsis 1.4s infinite;
}}
.figure-caption {{
 padding-top: 10px;
 font-size: 13px;
 font-style: italic;
 color: var(--ink-soft);
 line-height: 1.5;
 max-width: 700px;
}}
/* ====== INSIGHT / DOSSIER ====== */
.dossier {{
 display: none;
 background: var(--paper-tint);
 border-top: 1px solid var(--ink);
 border-bottom: 1px solid var(--ink);
 padding: 28px 32px;
 margin-bottom: 40px;
 position: relative;
}}
.dossier::before {{
 content: '';
 position: absolute;
 top: 12px;
 left: 12px;
 right: 12px;
 bottom: 12px;
 border: 1px dashed var(--rule);
 pointer-events: none;
}}
.dossier-label {{
 position: absolute;
 top: -9px;
 left: 32px;
 background: var(--paper);
 padding: 0 12px;
 font-family: 'JetBrains Mono', monospace;
 font-size: 10px;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 color: var(--oxblood);
 font-weight: 700;
}}
.dossier-head {{
 font-family: 'Instrument Serif', serif;
 font-size: 22px;
 font-style: italic;
 margin-bottom: 16px;
 color: var(--ink);
}}
.dossier-head .hint {{
 font-family: 'JetBrains Mono', monospace;
 font-size: 10px;
 font-style: normal;
 letter-spacing: 0.15em;
 text-transform: uppercase;
 color: var(--ink-mute);
 margin-left: 10px;
 font-weight: 500;
}}
/* ====== PANELS ====== */
.split {{
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 0;
 border-top: 1px solid var(--rule);
 border-bottom: 1px solid var(--rule);
 display: none;
}}
.split.active {{ display: grid; }}
.panel {{
 padding: 28px 28px 24px;
 border-right: 1px solid var(--rule);
}}
.panel:last-child {{ border-right: none; }}
.panel-head {{
 display: flex;
 justify-content: space-between;
 align-items: baseline;
 margin-bottom: 18px;
 padding-bottom: 12px;
 border-bottom: 1px solid var(--rule-soft);
}}
.panel-title {{
 font-family: 'Instrument Serif', serif;
 font-size: 22px;
 font-style: italic;
 letter-spacing: -0.01em;
}}
.panel-count {{
 font-family: 'JetBrains Mono', monospace;
 font-size: 10px;
 color: var(--ink-mute);
 letter-spacing: 0.15em;
 text-transform: uppercase;
}}
/* ====== POLICY ITEMS ====== */
.policy {{
 display: grid;
 grid-template-columns: 72px 1fr auto;
 gap: 20px;
 padding: 14px 0;
 border-bottom: 1px solid var(--rule-soft);
 align-items: baseline;
}}
.policy:last-child {{ border-bottom: none; }}
.policy-year {{
 font-family: 'Instrument Serif', serif;
 font-size: 28px;
 font-style: italic;
 line-height: 1;
 color: var(--oxblood);
 font-variant-numeric: tabular-nums;
}}
.policy-text {{
 font-size: 15px;
 line-height: 1.4;
 color: var(--ink);
}}
.policy-text a {{
 color: var(--ink-mute);
 margin-left: 6px;
 font-size: 11px;
 border-bottom: none;
}}
.policy-text a:hover {{ color: var(--oxblood); }}
.policy-metric {{
 font-family: 'JetBrains Mono', monospace;
 font-size: 11px;
 color: var(--ink-mute);
 white-space: nowrap;
 letter-spacing: 0.05em;
}}
/* ====== RATE VERDICT ====== */
.rate-row {{
 display: grid;
 grid-template-columns: 60px 1fr auto;
 gap: 20px;
 padding: 14px 0;
 border-bottom: 1px solid var(--rule-soft);
 align-items: baseline;
}}
.rate-row .stage {{
 font-family: 'JetBrains Mono', monospace;
 font-size: 10px;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 color: var(--oxblood);
 font-weight: 700;
}}
.rate-row .desc {{ font-size: 14px; color: var(--ink); font-style: italic; }}
.rate-row .rate {{
 font-family: 'JetBrains Mono', monospace;
 font-size: 14px;
 font-weight: 500;
 font-variant-numeric: tabular-nums;
 white-space: nowrap;
}}
.rate-row .rate.neg {{ color: var(--oxblood); }}
.rate-row .rate.pos {{ color: var(--moss-deep); }}
.verdict {{
 margin-top: 24px;
 padding: 26px 20px;
 background: var(--paper);
 border: 1px solid var(--rule);
 text-align: center;
 position: relative;
}}
.verdict::before, .verdict::after {{
 content: '§';
 font-family: 'Instrument Serif', serif;
 font-style: italic;
 font-size: 18px;
 color: var(--rule-soft);
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
}}
.verdict::before {{ left: 14px; }}
.verdict::after {{ right: 14px; }}
.verdict .headline {{
 font-family: 'Instrument Serif', serif;
 font-size: 30px;
 font-style: italic;
 line-height: 1.1;
 letter-spacing: -0.01em;
}}
.verdict .headline.good {{ color: var(--moss-deep); }}
.verdict .headline.bad {{ color: var(--oxblood); }}
.verdict .sub {{
 font-family: 'JetBrains Mono', monospace;
 font-size: 10px;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--ink-mute);
 margin-top: 8px;
 font-weight: 500;
}}
/* ====== DOSSIER CONTENT ====== */
.dossier-stats {{
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 32px;
 margin-top: 16px;
 padding-bottom: 20px;
 border-bottom: 1px solid var(--rule-soft);
}}
.dossier-stat .k {{
 font-family: 'JetBrains Mono', monospace;
 font-size: 9px;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 color: var(--ink-mute);
 margin-bottom: 4px;
 font-weight: 500;
}}
.dossier-stat .v {{
 font-family: 'Instrument Serif', serif;
 font-size: 36px;
 line-height: 1;
 font-variant-numeric: tabular-nums;
 letter-spacing: -0.01em;
 font-style: italic;
}}
.dossier-stat .v.neg {{ color: var(--oxblood); }}
.dossier-stat .v.pos {{ color: var(--moss-deep); }}
.dossier-stat .v.alert {{ color: var(--amber-deep); }}
.rate-strip {{
 display: flex;
 gap: 48px;
 padding: 18px 0;
 border-bottom: 1px solid var(--rule-soft);
 font-size: 14px;
}}
.rate-strip .rate-item {{
 display: flex;
 align-items: baseline;
 gap: 10px;
}}
.rate-strip .k {{
 font-family: 'JetBrains Mono', monospace;
 font-size: 10px;
 letter-spacing: 0.15em;
 text-transform: uppercase;
 color: var(--ink-mute);
}}
.rate-strip .v {{
 font-family: 'JetBrains Mono', monospace;
 font-weight: 700;
 font-variant-numeric: tabular-nums;
}}
.rate-strip .v.neg {{ color: var(--oxblood); }}
.rate-strip .v.pos {{ color: var(--moss-deep); }}
.context-block {{
 margin-top: 18px;
 padding: 20px 22px;
 background: var(--paper);
 border-left: 3px solid var(--oxblood);
 position: relative;
}}
.context-block .k {{
 font-family: 'JetBrains Mono', monospace;
 font-size: 9px;
 letter-spacing: 0.25em;
 text-transform: uppercase;
 color: var(--oxblood);
 font-weight: 700;
 margin-bottom: 8px;
}}
.context-block .v {{
 font-family: 'Fraunces', serif;
 font-size: 16px;
 line-height: 1.55;
 color: var(--ink);
 font-style: italic;
}}
.nearby-block {{
 margin-top: 18px;
 padding-top: 16px;
 border-top: 1px solid var(--rule-soft);
}}
.nearby-block .k {{
 font-family: 'JetBrains Mono', monospace;
 font-size: 9px;
 letter-spacing: 0.22em;
 text-transform: uppercase;
 color: var(--ink-mute);
 margin-bottom: 10px;
 font-weight: 600;
}}
.nearby-item {{
 display: flex;
 gap: 14px;
 padding: 6px 0;
 align-items: baseline;
 font-size: 14px;
}}
.nearby-item .yr {{
 font-family: 'Instrument Serif', serif;
 font-style: italic;
 color: var(--oxblood);
 font-weight: 400;
 min-width: 56px;
}}
/* ====== LOADING ====== */
.loading {{
 grid-column: 1 / -1;
 padding: 60px 20px;
 text-align: center;
 font-family: 'Instrument Serif', serif;
 font-style: italic;
 font-size: 20px;
 color: var(--ink-mute);
}}
.loading::after {{
 content: ' ·';
 animation: ellipsis 1.4s infinite;
}}
@keyframes ellipsis {{
 0% {{ content: ' ·'; }}
 33% {{ content: ' · ·'; }}
 66% {{ content: ' · · ·'; }}
}}
/* ====== COLOPHON ====== */
.colophon {{
 max-width: 1400px;
 margin: 0 auto;
 padding: 40px 48px 60px;
 border-top: 2px solid var(--ink);
 position: relative;
 z-index: 2;
}}
.colophon-top {{
 display: grid;
 grid-template-columns: 2fr 1fr 1fr;
 gap: 48px;
 padding-bottom: 24px;
 border-bottom: 1px solid var(--rule);
 margin-bottom: 18px;
}}
.colophon-section .title {{
 font-family: 'JetBrains Mono', monospace;
 font-size: 10px;
 letter-spacing: 0.22em;
 text-transform: uppercase;
 color: var(--ink-mute);
 margin-bottom: 10px;
 font-weight: 600;
}}
.colophon-section .body {{
 font-size: 14px;
 line-height: 1.55;
 color: var(--ink-soft);
 font-style: italic;
}}
.colophon-imprint {{
 font-family: 'Instrument Serif', serif;
 font-size: 64px;
 line-height: 0.9;
 font-style: italic;
 color: var(--ink);
 letter-spacing: -0.02em;
 margin-bottom: 8px;
}}
.colophon-mark {{
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-family: 'JetBrains Mono', monospace;
 font-size: 10px;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--ink-mute);
}}
@media (max-width: 900px) {{
 .masthead, .sheet, .colophon {{ padding-left: 18px; padding-right: 18px; }}
 .masthead {{ padding-top: 10px; }}
 .masthead-row {{
 display: grid;
 grid-template-columns: 1fr auto;
 gap: 10px 14px;
 padding: 8px 0 10px;
 align-items: center;
 }}
 .wordmark {{ font-size: 28px; line-height: 1; grid-column: 1; grid-row: 1; margin: 0; }}
 .dek-text {{
 display: none;
 }}
 .dek-meta {{
 grid-column: 2; grid-row: 1;
 text-align: right;
 font-size: 8px;
 line-height: 1.4;
 white-space: nowrap;
 }}
 .dek-meta .badge {{ padding: 1px 5px; margin-top: 2px; font-size: 8px; }}
 .masthead-top {{ flex-wrap: wrap; gap: 6px; font-size: 8px; padding-bottom: 4px; letter-spacing: 0.12em; }}
 .masthead-top .vol {{ gap: 10px; }}
 .masthead-top .vol span:not(:last-child)::after {{ margin-left: 10px; }}
 .control-strip {{
 grid-template-columns: 1fr 1fr;
 gap: 10px 12px;
 padding: 10px 0 12px;
 margin-bottom: 12px;
 }}
 .section-title {{ display: none; }}
 .control-group {{ min-width: 0; }}
 .control-group label {{ font-size: 8px; }}
 select {{
 width: 100%;
 min-width: 0;
 font-size: 14px;
 padding: 4px 20px 4px 0;
 }}
 button.action {{
 grid-column: 1 / -1;
 width: 100%;
 padding: 11px;
 font-size: 10px;
 }}
 .figure {{ margin-bottom: 20px; }}
 .figure-head {{ flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: 8px; margin-bottom: 0; }}
 .figure-title {{ font-size: 15px; }}
 .figure-title::before {{ display: none; }}
 .figure-note {{ font-size: 8px; }}
 .figure-frame {{ height: clamp(280px, 48vh, 380px); padding: 10px; }}
 .figure-caption {{ font-size: 11px; padding-top: 8px; }}
 .findings {{ grid-template-columns: 1fr 1fr; margin-bottom: 22px; }}
 .finding {{ border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 10px 12px; min-height: auto; }}
 .finding:nth-child(even) {{ border-right: none; }}
 .finding:nth-last-child(-n+2) {{ border-bottom: none; }}
 .finding .label {{ font-size: 8px; }}
 .finding .value {{ font-size: 22px; }}
 .finding .unit {{ font-size: 10px; }}
 .finding .sub {{ font-size: 8px; margin-top: 4px; }}
 .dossier {{ padding: 20px 14px; }}
 .dossier-label {{ left: 14px; }}
 .dossier-head {{ font-size: 17px; }}
 .dossier-stats {{ grid-template-columns: 1fr 1fr; gap: 14px; }}
 .dossier-stat .v {{ font-size: 22px; }}
 .rate-strip {{ flex-direction: column; gap: 8px; }}
 .split.active {{ grid-template-columns: 1fr; }}
 .panel {{ border-right: none; border-bottom: 1px solid var(--rule); padding: 18px 14px; }}
 .panel:last-child {{ border-bottom: none; }}
 .panel-title {{ font-size: 17px; }}
 .policy {{ grid-template-columns: 48px 1fr; gap: 10px; padding: 10px 0; }}
 .policy-year {{ font-size: 22px; }}
 .policy-text {{ font-size: 14px; }}
 .policy-metric {{ grid-column: 2; color: var(--ink-fade); font-size: 10px; }}
 .colophon {{ padding: 26px 18px 40px; }}
 .colophon-top {{ grid-template-columns: 1fr; gap: 20px; padding-bottom: 18px; }}
 .colophon-imprint {{ font-size: 36px; }}
 .colophon-mark {{ flex-direction: column; gap: 6px; align-items: flex-start; font-size: 8px; }}
}}
@media (max-width: 420px) {{
 .wordmark {{ font-size: 24px; }}
 .dek-meta {{ font-size: 7px; }}
 .findings {{ grid-template-columns: 1fr; }}
 .finding {{ border-right: none !important; }}
 .finding:last-child {{ border-bottom: none; }}
 .dossier-stats {{ grid-template-columns: 1fr 1fr; gap: 10px; }}
}}
</style>
</head>
<body>
<!-- ====== MASTHEAD ====== -->
<header class="masthead">
 <div class="masthead-top">
 <div class="vol">
 <span>Vol. I</span>
 <span>No. 001</span>
 <span>Standing at 58.1% Global Tree Cover</span>
 </div>
 <div>Filed via World Bank Open Data</div>
 </div>
 <div class="masthead-row">
 <h1 class="wordmark"><em>The</em> <span class="dispatch">Forest Dispatch</span></h1>
 <div class="dek-text">
 A record of what has been lost, and what — through the stroke of a pen or the
 press of a moratorium — may yet be saved.
 </div>
 <div class="dek-meta">
 An investigation<br>
 powered by Gradio<br>
 <span class="badge">MCP-enabled</span>
 </div>
 </div>
</header>
<main class="sheet">
 <!-- ====== CONTROL STRIP ====== -->
 <section class="control-strip">
 <div class="section-title">
 <span class="caps">§ Selection</span>
 Choose your <em>subject</em> &amp; <em>comparator</em>
 </div>
 <div class="control-group">
 <label>Subject</label>
 <select id="country"></select>
 </div>
 <div class="control-group">
 <label>Comparator</label>
 <select id="compare"><option value="">— none —</option></select>
 </div>
 <button class="action" onclick="loadData()">Investigate →</button>
 </section>
 <!-- ====== FIGURE (lead) ====== -->
 <section class="figure">
 <div class="figure-head">
 <div class="figure-title">Forest cover over time, <em>with policy annotations</em></div>
 <div class="figure-note">click · any · year · for · dossier</div>
 </div>
 <div class="figure-frame">
 <div id="chart-loading" class="figure-loading" style="display:none">Gathering field notes</div>
 <canvas id="chart"></canvas>
 </div>
 <div class="figure-caption">
 <span class="smallcaps">Legend —</span>
 <span style="display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--oxblood);vertical-align:middle;margin-right:4px"></span> policy event
 &nbsp;·&nbsp;
 <span style="display:inline-block;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid var(--amber);vertical-align:middle;margin-right:4px"></span> climate / disaster event
 &nbsp;·&nbsp;
 <span style="display:inline-block;width:12px;height:2px;background:var(--amber);vertical-align:middle;margin-right:4px"></span> rule of law
 <br>
 Hover the line to read an event. Click any year for a full dossier.
 </div>
 </section>
 <!-- ====== FINDINGS (after the chart) ====== -->
 <div id="findings-wrap" style="position:relative">
 <div id="findings" class="findings"></div>
 </div>
 <!-- ====== DOSSIER ====== -->
 <section id="dossier" class="dossier">
 <div class="dossier-label">Dossier</div>
 <div class="dossier-head" id="dossier-head"></div>
 <div id="dossier-content"></div>
 </section>
 <!-- ====== POLICY &amp; VERDICT ====== -->
 <div id="split" class="split">
 <div class="panel" id="policies"></div>
 <div class="panel" id="verdict-panel"></div>
 </div>
</main>
<!-- ====== COLOPHON ====== -->
<footer class="colophon">
 <div class="colophon-top">
 <div class="colophon-section">
 <div class="colophon-imprint">Notes.</div>
 <div class="body">
 <span class="smallcaps">On method —</span> Every figure herein is drawn from the public record. Where the policy
 register falls silent, we supply historical context in earnest italics —
 droughts, fires, wars, booms &amp; busts — to explain the line.
 </div>
 </div>
 <div class="colophon-section">
 <div class="title">Sources</div>
 <div class="body">
 <a href="https://data.worldbank.org/">World Bank Open Data</a> ·
 Forest area <span class="mono">(AG.LND.FRST.ZS)</span> ·
 Rule of Law <span class="mono">(RL.EST)</span>
 </div>
 </div>
 <div class="colophon-section">
 <div class="title">Built upon</div>
 <div class="body">
 <a href="https://gradio.app">Gradio Server</a> — API endpoints
 available at <span class="mono">/gradio_api/</span>,
 also exposed as MCP tools for agents.
 </div>
 </div>
 </div>
 <div class="colophon-mark">
 <span>© The Forest Dispatch · A record of loss &amp; recovery</span>
 <span>Set in Instrument Serif · Fraunces · JetBrains Mono</span>
 </div>
</footer>
<script>
const countries = {countries_json};
const countrySelect = document.getElementById('country');
const compareSelect = document.getElementById('compare');
let chart = null;
let currentData = null;
countries.forEach(c => {{
 countrySelect.add(new Option(c, c));
 compareSelect.add(new Option(c, c));
}});
countrySelect.value = 'Brazil';
async function callApi(name, params) {{
 const callResp = await fetch('/gradio_api/call/' + name, {{
 method: 'POST',
 headers: {{'Content-Type': 'application/json'}},
 body: JSON.stringify({{data: Object.values(params)}})
 }});
 const {{event_id}} = await callResp.json();
 if (!event_id) return {{error: 'No event id returned'}};
 const stream = await fetch('/gradio_api/call/' + name + '/' + event_id);
 const reader = stream.body.getReader();
 const decoder = new TextDecoder();
 let buffer = '';
 while (true) {{
 const {{done, value}} = await reader.read();
 if (done) break;
 buffer += decoder.decode(value, {{stream: true}});
 const lines = buffer.split('\\n');
 buffer = lines.pop();
 for (const line of lines) {{
 if (line.startsWith('event: complete')) continue;
 if (line.startsWith('data: ')) {{
 try {{
 const parsed = JSON.parse(line.slice(6));
 return Array.isArray(parsed) ? parsed[0] : parsed;
 }} catch (e) {{}}
 }}
 }}
 }}
 return {{error: 'No data received'}};
}}
async function loadData() {{
 const country = countrySelect.value;
 const compare = compareSelect.value;
 document.getElementById('findings').innerHTML = '<div class="loading">Gathering field notes</div>';
 document.getElementById('chart-loading').style.display = 'flex';
 document.getElementById('split').classList.remove('active');
 document.getElementById('dossier').style.display = 'none';
 if (chart) {{ chart.destroy(); chart = null; }}
 let data, compareData = null;
 if (compare && compare !== country) {{
 const result = await callApi('compare_countries', {{country_a: country, country_b: compare}});
 data = result.country_a;
 compareData = result.country_b;
 }} else {{
 data = await callApi('get_forest_data', {{country}});
 }}
 if (data.error) {{
 document.getElementById('findings').innerHTML = `<div class="loading">${{data.error}}</div>`;
 return;
 }}
 currentData = data;
 renderFindings(data);
 renderChart(data, compareData);
 renderPolicies(data);
 renderVerdict(data);
 document.getElementById('split').classList.add('active');
}}
function renderFindings(data) {{
 const s = data.summary;
 if (!s || !s.start_year) {{
 document.getElementById('findings').innerHTML = '<div class="loading">No data available for this subject</div>';
 return;
 }}
 const dirClass = s.change_pct < 0 ? 'down' : 'up';
 const sign = s.change_pct < 0 ? '−' : '+';
 const rateSign = s.annual_rate < 0 ? '−' : '+';
 document.getElementById('findings').innerHTML = `
 <div class="finding" data-num="i">
 <div>
 <div class="label">${{data.country}} · cover in ${{s.start_year}}</div>
 <div class="value">${{s.start_pct.toFixed(1)}}<span class="unit">%</span></div>
 </div>
 <div class="sub">of national land area</div>
 </div>
 <div class="finding" data-num="ii">
 <div>
 <div class="label">${{data.country}} · cover in ${{s.end_year}}</div>
 <div class="value">${{s.end_pct.toFixed(1)}}<span class="unit">%</span></div>
 </div>
 <div class="sub">of national land area</div>
 </div>
 <div class="finding" data-num="iii">
 <div>
 <div class="label">${{data.country}} · net change</div>
 <div class="value ${{dirClass}}">${{sign}}${{Math.abs(s.change_pct).toFixed(2)}}<span class="unit">pp</span></div>
 </div>
 <div class="sub">across ${{s.end_year - s.start_year}} years observed</div>
 </div>
 <div class="finding" data-num="iv">
 <div>
 <div class="label">${{data.country}} · annual rate</div>
 <div class="value ${{dirClass}}">${{rateSign}}${{Math.abs(s.annual_rate).toFixed(3)}}<span class="unit">%/yr</span></div>
 </div>
 <div class="sub">${{data.policies.length}} policies on record</div>
 </div>
 `;
}}
function renderChart(data, compareData) {{
 if (chart) chart.destroy();
 document.getElementById('chart-loading').style.display = 'none';
 const ctx = document.getElementById('chart').getContext('2d');
 const INK = '#1a1f18';
 const OXBLOOD = '#8b2a1f';
 const MOSS = '#4a6b3e';
 const AMBER = '#a8732a';
 const RULE = '#c5bda5';
 const PAPER_TINT = '#e4dbc5';
 const datasets = [{{
 label: data.country,
 data: data.forest.map(f => ({{x: f.year, y: f.value}})),
 borderColor: MOSS,
 backgroundColor: 'rgba(74, 107, 62, 0.12)',
 fill: true,
 tension: 0.25,
 pointRadius: 2.5,
 pointBackgroundColor: MOSS,
 pointBorderColor: PAPER_TINT,
 pointBorderWidth: 1,
 pointHoverRadius: 6,
 borderWidth: 2.2,
 }}];
 if (data.governance && data.governance.length) {{
 datasets.push({{
 label: 'Rule of Law',
 data: data.governance.map(g => ({{x: g.year, y: g.value}})),
 borderColor: AMBER,
 borderDash: [3, 3],
 borderWidth: 1.2,
 pointRadius: 0,
 tension: 0.3,
 yAxisID: 'y2',
 }});
 }}
 if (compareData && compareData.forest) {{
 datasets.push({{
 label: compareData.country,
 data: compareData.forest.map(f => ({{x: f.year, y: f.value}})),
 borderColor: OXBLOOD,
 borderDash: [6, 3],
 borderWidth: 1.8,
 pointRadius: 1.5,
 pointBackgroundColor: OXBLOOD,
 tension: 0.25,
 }});
 }}
 const annotations = {{}};
 (data.policies || []).forEach((p, i) => {{
 annotations['pline' + i] = {{
 type: 'line',
 xMin: p.year, xMax: p.year,
 borderColor: 'rgba(139, 42, 31, 0.22)',
 borderWidth: 1,
 borderDash: [3, 4],
 }};
 annotations['ppoint' + i] = {{
 type: 'point',
 xValue: p.year,
 yValue: data.forest.find(f => f.year === p.year)?.value || data.forest[0].value,
 radius: 5,
 backgroundColor: OXBLOOD,
 borderColor: PAPER_TINT,
 borderWidth: 2,
 hoverRadius: 8,
 }};
 }});
 (data.climate || []).forEach((c, i) => {{
 annotations['cline' + i] = {{
 type: 'line',
 xMin: c.year, xMax: c.year,
 borderColor: 'rgba(168, 115, 42, 0.22)',
 borderWidth: 1,
 borderDash: [1, 3],
 }};
 annotations['cpoint' + i] = {{
 type: 'point',
 xValue: c.year,
 yValue: data.forest.find(f => f.year === c.year)?.value || data.forest[0].value,
 radius: 6,
 pointStyle: 'triangle',
 backgroundColor: AMBER,
 borderColor: PAPER_TINT,
 borderWidth: 2,
 hoverRadius: 9,
 }};
 }});
 chart = new Chart(ctx, {{
 type: 'line',
 data: {{ datasets }},
 options: {{
 responsive: true,
 maintainAspectRatio: false,
 interaction: {{ mode: 'index', intersect: false }},
 onClick: function(evt, elements) {{
 if (!elements.length) return;
 const el = elements[0];
 const ds = chart.data.datasets[el.datasetIndex];
 if (!ds.data[el.index]) return;
 const year = Math.round(ds.data[el.index].x);
 handlePointClick(year);
 }},
 plugins: {{
 legend: {{
 labels: {{
 color: INK,
 font: {{ family: "'JetBrains Mono', monospace", size: 10, weight: 500 }},
 usePointStyle: true,
 pointStyle: 'rectRot',
 boxWidth: 8,
 padding: 16,
 }}
 }},
 annotation: {{ annotations }},
 tooltip: {{
 backgroundColor: INK,
 titleColor: '#ede5d3',
 bodyColor: '#ede5d3',
 borderWidth: 0,
 titleFont: {{ family: "'Instrument Serif', serif", style: 'italic', size: 16 }},
 bodyFont: {{ family: "'JetBrains Mono', monospace", size: 11 }},
 padding: 12,
 cornerRadius: 0,
 displayColors: false,
 callbacks: {{
 title: items => items.length ? Math.round(items[0].parsed.x).toString() : '',
 label: function(ctx) {{
 const v = ctx.parsed.y;
 return ctx.dataset.label + ' · ' + (v != null ? v.toFixed(2) : '—');
 }},
 afterBody: function(items) {{
 if (!items.length) return;
 const year = Math.round(items[0].parsed.x);
 const lines = [];
 const policy = (data.policies || []).find(p => p.year === year);
 const climateEv = (data.climate || []).find(c => c.year === year);
 if (policy) lines.push('', '§ Policy — ' + policy.text);
 if (climateEv) lines.push('', '△ Climate — ' + climateEv.text);
 return lines;
 }}
 }}
 }}
 }},
 scales: {{
 x: {{
 type: 'linear',
 ticks: {{
 color: '#6a6d60',
 font: {{ family: "'JetBrains Mono', monospace", size: 10 }},
 stepSize: 5,
 callback: v => v.toString(),
 }},
 grid: {{ color: 'rgba(58, 63, 53, 0.1)', drawTicks: false }},
 border: {{ color: INK, width: 1 }},
 }},
 y: {{
 ticks: {{
 color: MOSS,
 font: {{ family: "'JetBrains Mono', monospace", size: 10 }},
 callback: v => v.toFixed(1) + '%',
 }},
 grid: {{ color: 'rgba(58, 63, 53, 0.08)', drawTicks: false }},
 border: {{ color: INK, width: 1 }},
 }},
 y2: {{
 position: 'right',
 ticks: {{
 color: AMBER,
 font: {{ family: "'JetBrains Mono', monospace", size: 9 }},
 }},
 grid: {{ display: false }},
 border: {{ color: 'rgba(168, 115, 42, 0.4)' }},
 }}
 }}
 }}
 }});
}}
function renderPolicies(data) {{
 const el = document.getElementById('policies');
 if (!data.policies || !data.policies.length) {{
 el.innerHTML = `
 <div class="panel-head">
 <div class="panel-title">The Register · <em>${{data.country}}</em></div>
 <div class="panel-count">— empty —</div>
 </div>
 <div style="font-style:italic;color:var(--ink-mute);padding:16px 0">
 No policy events catalogued for ${{data.country}}.
 </div>`;
 return;
 }}
 const items = data.policies.map(p => {{
 const forestVal = data.forest.find(f => f.year === p.year);
 const forestText = forestVal ? forestVal.value.toFixed(1) + '%' : '—';
 const link = p.url ? `<a href="${{p.url}}" target="_blank" title="Source">↗</a>` : '';
 return `<div class="policy">
 <div class="policy-year">${{p.year}}</div>
 <div class="policy-text">${{p.text}}${{link}}</div>
 <div class="policy-metric">${{forestText}}</div>
 </div>`;
 }}).join('');
 el.innerHTML = `
 <div class="panel-head">
 <div class="panel-title">The Register · <em>${{data.country}}</em></div>
 <div class="panel-count">${{data.policies.length.toString().padStart(2, '0')}} entries</div>
 </div>
 ${{items}}`;
}}
function renderVerdict(data) {{
 const el = document.getElementById('verdict-panel');
 if (!data.policies || !data.policies.length || !data.forest.length) {{
 el.innerHTML = `
 <div class="panel-head">
 <div class="panel-title">The Verdict · <em>${{data.country}}</em></div>
 <div class="panel-count">— pending —</div>
 </div>
 <div style="font-style:italic;color:var(--ink-mute);padding:16px 0">
 Insufficient data for ${{data.country}} to render judgment.
 </div>`;
 return;
 }}
 const firstPolicy = data.policies[0].year;
 const pre = data.forest.filter(f => f.year < firstPolicy);
 const post = data.forest.filter(f => f.year >= firstPolicy);
 if (pre.length < 2 || post.length < 2) {{
 el.innerHTML = `
 <div class="panel-head">
 <div class="panel-title">The Verdict · <em>${{data.country}}</em></div>
 <div class="panel-count">— pending —</div>
 </div>
 <div style="font-style:italic;color:var(--ink-mute);padding:16px 0">
 Too few observations either side of intervention.
 </div>`;
 return;
 }}
 const preRate = (pre[pre.length-1].value - pre[0].value) / (pre[pre.length-1].year - pre[0].year);
 const postRate = (post[post.length-1].value - post[0].value) / (post[post.length-1].year - post[0].year);
 const improved = Math.abs(postRate) < Math.abs(preRate);
 const pct = preRate !== 0 ? ((1 - Math.abs(postRate) / Math.abs(preRate)) * 100) : 0;
 el.innerHTML = `
 <div class="panel-head">
 <div class="panel-title">The Verdict · <em>${{data.country}}</em></div>
 <div class="panel-count">Pre / Post · 1st intervention</div>
 </div>
 <div class="rate-row">
 <div class="stage">Pre</div>
 <div class="desc">${{pre[0].year}}–${{pre[pre.length-1].year}} · before first policy</div>
 <div class="rate ${{preRate < 0 ? 'neg' : 'pos'}}">${{preRate > 0 ? '+' : ''}}${{preRate.toFixed(3)}}%/yr</div>
 </div>
 <div class="rate-row">
 <div class="stage">Post</div>
 <div class="desc">${{post[0].year}}–${{post[post.length-1].year}} · since first policy</div>
 <div class="rate ${{postRate < 0 ? 'neg' : 'pos'}}">${{postRate > 0 ? '+' : ''}}${{postRate.toFixed(3)}}%/yr</div>
 </div>
 <div class="verdict">
 <div class="headline ${{improved ? 'good' : 'bad'}}">
 ${{improved ? data.country + ' slowed by ' + Math.abs(pct).toFixed(0) + '%' : data.country + ': no improvement'}}
 </div>
 <div class="sub">${{improved ? 'after policy intervention' : 'rate unchanged or worsened'}}</div>
 </div>
 `;
}}
async function handlePointClick(year) {{
 const country = countrySelect.value;
 const dossierEl = document.getElementById('dossier');
 const headEl = document.getElementById('dossier-head');
 const contentEl = document.getElementById('dossier-content');
 dossierEl.style.display = 'block';
 dossierEl.scrollIntoView({{ behavior: 'smooth', block: 'nearest' }});
 headEl.innerHTML = `Filing dossier for <em>${{year}}</em>`;
 contentEl.innerHTML = '<div style="font-style:italic;color:var(--ink-mute);padding:14px 0">Compiling field notes…</div>';
 const result = await callApi('explain_spike', {{country, year}});
 if (result.error) {{
 contentEl.innerHTML = '<div style="color:var(--oxblood);font-style:italic">' + result.error + '</div>';
 return;
 }}
 const trendClass = (() => {{
 if (['sharp decline', 'acceleration'].includes(result.trend)) return 'neg';
 if (['recovery', 'sharp increase'].includes(result.trend)) return 'pos';
 return 'alert';
 }})();
 headEl.innerHTML = `Dossier · <em>${{country}}</em> · ${{result.year}}`;
 let html = `
 <div class="dossier-stats">
 <div class="dossier-stat">
 <div class="k">Year</div>
 <div class="v">${{result.year}}</div>
 </div>
 <div class="dossier-stat">
 <div class="k">Forest cover</div>
 <div class="v">${{result.forest_pct !== null ? result.forest_pct.toFixed(2) + '%' : '—'}}</div>
 </div>
 <div class="dossier-stat">
 <div class="k">Year-on-year</div>
 <div class="v ${{result.yoy_change !== null && result.yoy_change < 0 ? 'neg' : (result.yoy_change > 0 ? 'pos' : '')}}">${{result.yoy_change !== null ? (result.yoy_change > 0 ? '+' : '') + result.yoy_change.toFixed(3) + 'pp' : '—'}}</div>
 </div>
 <div class="dossier-stat">
 <div class="k">Trend</div>
 <div class="v ${{trendClass}}">${{result.trend}}</div>
 </div>
 </div>
 `;
 if (result.rate_5yr_before !== null || result.rate_5yr_after !== null) {{
 html += `<div class="rate-strip">`;
 if (result.rate_5yr_before !== null) {{
 html += `<div class="rate-item"><span class="k">5yr · before</span><span class="v ${{result.rate_5yr_before < 0 ? 'neg' : 'pos'}}">${{result.rate_5yr_before > 0 ? '+' : ''}}${{result.rate_5yr_before}}%/yr</span></div>`;
 }}
 if (result.rate_5yr_after !== null) {{
 html += `<div class="rate-item"><span class="k">5yr · after</span><span class="v ${{result.rate_5yr_after < 0 ? 'neg' : 'pos'}}">${{result.rate_5yr_after > 0 ? '+' : ''}}${{result.rate_5yr_after}}%/yr</span></div>`;
 }}
 html += `</div>`;
 }}
 if (result.context) {{
 html += `<div class="context-block">
 <div class="k">Field note · historical context</div>
 <div class="v">${{result.context}}</div>
 </div>`;
 }}
 if (result.nearby_policies && result.nearby_policies.length) {{
 html += `<div class="nearby-block">
 <div class="k">§ Nearby policy events · ±3 years</div>`;
 result.nearby_policies.forEach(p => {{
 const pLink = p.url ? ` <a href="${{p.url}}" target="_blank" style="color:var(--ink-mute);font-size:11px">↗</a>` : '';
 html += `<div class="nearby-item"><span class="yr">${{p.year}}</span><span>${{p.text}}${{pLink}}</span></div>`;
 }});
 html += `</div>`;
 }}
 if (result.nearby_climate && result.nearby_climate.length) {{
 html += `<div class="nearby-block">
 <div class="k" style="color:var(--amber-deep)">△ Nearby climate events · ±3 years</div>`;
 result.nearby_climate.forEach(c => {{
 const cLink = c.url ? ` <a href="${{c.url}}" target="_blank" style="color:var(--ink-mute);font-size:11px">↗</a>` : '';
 html += `<div class="nearby-item"><span class="yr" style="color:var(--amber-deep)">${{c.year}}</span><span>${{c.text}}${{cLink}}</span></div>`;
 }});
 html += `</div>`;
 }}
 contentEl.innerHTML = html;
}}
loadData();
</script>
</body>
</html>"""
if __name__ == "__main__":
 app.launch(mcp_server=True)