diff --git a/stac_server/main.py b/stac_server/main.py
index 9fa98ff..46595a5 100644
--- a/stac_server/main.py
+++ b/stac_server/main.py
@@ -1,4 +1,5 @@
 from .key_ordering import dataset_key_orders
+from . import stac_router as _stac_router
 import json
 import logging
 import os
@@ -82,6 +83,10 @@
 with open(Path(__file__).parents[1] / "config/language/language.yaml", "r") as f:
     mars_language = yaml.safe_load(f)
 
+# Register STAC API router
+_stac_router.setup(qube, mars_language)
+app.include_router(_stac_router.router)
+
 logger.info("Ready to serve requests!")
 
 
@@ -130,6 +135,14 @@ async def browse_catalogue(request: Request):
     })
 
 
+@app.get("/stac-browse", response_class=HTMLResponse)
+async def stac_browse(request: Request):
+    """STAC Catalogue Browser — visual explorer for the STAC API at /api/stac/v1."""
+    return templates.TemplateResponse(request, "stac_browse.html", {
+        "title": os.environ.get("TITLE", "Qubed Catalogue Browser"),
+    })
+
+
 # ---------------------------------------------------------------------------
 # WASM support endpoints – let the browser load catalogue data directly
 # ---------------------------------------------------------------------------
diff --git a/stac_server/stac_router.py b/stac_server/stac_router.py
new file mode 100644
index 0000000..3304318
--- /dev/null
+++ b/stac_server/stac_router.py
@@ -0,0 +1,597 @@
+"""
+STAC API v1.0.0 router for the Qubed catalogue.
+
+Spec references:
+  https://api.stacspec.org/v1.0.0/core/
+  https://api.stacspec.org/v1.0.0/item-search/
+  https://api.stacspec.org/v1.0.0/ogcapi-features/
+
+Mapping from Qubed / MARS concepts to STAC:
+  Collection  <- unique value of the "dataset" dimension (falls back to a
+                 single root collection when no "dataset" key exists)
+  Catalog     <- each metadata key becomes a nesting level; browsing drills
+                 down one key at a time using the dataset-specific key ordering
+  Item        <- individual datacube at the leaf of the key hierarchy
+  geometry    <- null  (no point geometry available from the catalogue index)
+
+Hierarchical URLs
+-----------------
+  /api/stac/v1/                                        landing page
+  /api/stac/v1/collections                             all collections
+  /api/stac/v1/collections/{cid}                       collection metadata
+  /api/stac/v1/collections/{cid}/catalog               root catalog node
+  /api/stac/v1/collections/{cid}/catalog/{path}        nested catalog,
+                                                        path = k=v/k=v/...
+  /api/stac/v1/collections/{cid}/items/{item_id}       single item
+  /api/stac/v1/search                                  cross-collection search
+"""
+
+from __future__ import annotations
+
+import hashlib
+import logging
+from typing import Any, Optional
+
+from fastapi import APIRouter, HTTPException, Query, Request
+from fastapi.responses import JSONResponse
+
+logger = logging.getLogger("uvicorn.error")
+
+# ── Module-level state injected by main.py via setup() ──────────────────────
+
+_qube = None            # PyQube instance
+_mars_language: dict = {}
+_key_orders: dict = {}  # dataset -> ordered list of keys
+
+STAC_VERSION = "1.0.0"
+MAX_ITEMS_DEFAULT = 100
+MAX_ITEMS_HARD_LIMIT = 10_000
+
+CONFORMANCE_CLASSES = [
+    "https://api.stacspec.org/v1.0.0/core",
+    "https://api.stacspec.org/v1.0.0/item-search",
+    "https://api.stacspec.org/v1.0.0/ogcapi-features",
+    "http://www.opengis.net/spec/ogcapi-features-1/1.0/conf/core",
+    "http://www.opengis.net/spec/ogcapi-features-1/1.0/conf/oas30",
+    "http://www.opengis.net/spec/ogcapi-features-1/1.0/conf/geojson",
+]
+
+router = APIRouter(prefix="/api/stac/v1", tags=["STAC"])
+
+
+def setup(qube, mars_language: dict) -> None:
+    """Call this once from main.py after loading data."""
+    global _qube, _mars_language, _key_orders
+    _qube = qube
+    _mars_language = mars_language
+    try:
+        from .key_ordering import dataset_key_orders
+    except ImportError:
+        from key_ordering import dataset_key_orders  # type: ignore[no-redef]
+    _key_orders = dataset_key_orders
+
+
+# ── Generic helpers ──────────────────────────────────────────────────────────
+
+def _base_url(request: Request) -> str:
+    return str(request.base_url).rstrip("/")
+
+
+def _make_item_id(dc: dict[str, str]) -> str:
+    """Deterministic 24-char hex ID for a datacube."""
+    canonical = "&".join(f"{k}={v}" for k, v in sorted(dc.items()))
+    return hashlib.sha256(canonical.encode()).hexdigest()[:24]
+
+
+def _mars_datetime(date: Optional[str], time: Optional[str]) -> Optional[str]:
+    """MARS date (YYYYMMDD) + time (HHMM) -> RFC 3339."""
+    if not date or len(date) != 8:
+        return None
+    t = (time or "0000").zfill(4)
+    return f"{date[:4]}-{date[4:6]}-{date[6:8]}T{t[:2]}:{t[2:]}:00Z"
+
+
+def _collection_temporal_extent(coords: dict[str, list]) -> list[list[Optional[str]]]:
+    dates = sorted(d for d in coords.get("date", []) if len(d) == 8)
+    if dates:
+        return [[_mars_datetime(dates[0], None), _mars_datetime(dates[-1], None)]]
+    return [[None, None]]
+
+
+def _get_all_collections() -> list[str]:
+    coords = _qube.all_unique_dim_coords()
+    datasets = coords.get("dataset", [])
+    return sorted(datasets) if datasets else ["default"]
+
+
+def _select_collection(collection_id: str):
+    """Return a qube filtered to a single collection."""
+    coords = _qube.all_unique_dim_coords()
+    datasets = coords.get("dataset", [])
+    if datasets:
+        if collection_id not in datasets:
+            return None
+        return _qube.select({"dataset": collection_id}, "prune", None)
+    if collection_id != "default":
+        return None
+    return _qube
+
+
+def _key_ordering_for(collection_id: str) -> list[str]:
+    return _key_orders.get(collection_id, _key_orders.get("default", []))
+
+
+def _next_key(
+    ordering: list[str],
+    selected_keys: set[str],
+    available_coords: dict,
+) -> Optional[str]:
+    """First unselected key in *ordering* that has values in *available_coords*."""
+    for key in ordering:
+        if key in selected_keys:
+            continue
+        vals = available_coords.get(key, [])
+        if vals:
+            return key
+    return None  # all keys exhausted -> leaf level
+
+
+# ── Catalog path helpers ─────────────────────────────────────────────────────
+
+def _parse_catalog_path(path: str) -> list[tuple[str, str]]:
+    """
+    "class=od/stream=oper" -> [("class", "od"), ("stream", "oper")]
+    Blank / empty path -> []
+    """
+    pairs: list[tuple[str, str]] = []
+    for seg in path.strip("/").split("/"):
+        seg = seg.strip()
+        if "=" not in seg:
+            continue
+        k, _, v = seg.partition("=")
+        pairs.append((k.strip(), v.strip()))
+    return pairs
+
+
+def _catalog_path_str(pairs: list[tuple[str, str]]) -> str:
+    return "/".join(f"{k}={v}" for k, v in pairs)
+
+
+def _apply_path_selection(base_qube, pairs: list[tuple[str, str]]):
+    """Successively select each (key, value) from the path."""
+    q = base_qube
+    for k, v in pairs:
+        try:
+            q = q.select({k: v}, None, None)
+        except Exception as exc:
+            raise HTTPException(
+                status_code=404,
+                detail=f"No data for {k}={v}: {exc}",
+            )
+    return q
+
+
+# ── Build a catalog node ─────────────────────────────────────────────────────
+
+def _make_catalog_node(
+    *,
+    collection_id: str,
+    path_pairs: list[tuple[str, str]],
+    sub_qube,
+    prefix: str,
+    ordering: list[str],
+) -> dict[str, Any]:
+    """
+    Return a STAC Catalog JSON object representing one node in the hierarchy.
+
+    * If there are more keys to traverse, children are sub-catalog links (one
+      per distinct value of the next key).
+    * At the leaf (all ordered keys consumed or data exhausted), children are
+      STAC Item links.
+    """
+    available = sub_qube.all_unique_dim_coords()
+    selected_keys = {k for k, _ in path_pairs}
+
+    coll_root = f"{prefix}/collections/{collection_id}/catalog"
+    path_str = _catalog_path_str(path_pairs)
+    self_href = f"{coll_root}/{path_str}" if path_str else coll_root
+
+    if path_pairs:
+        parent_str = _catalog_path_str(path_pairs[:-1])
+        parent_href = f"{coll_root}/{parent_str}" if parent_str else coll_root
+    else:
+        parent_href = f"{prefix}/collections/{collection_id}"
+
+    last = path_pairs[-1] if path_pairs else None
+    title = f"{last[0]} = {last[1]}" if last else collection_id
+
+    base_links: list[dict] = [
+        {"rel": "self",       "type": "application/json",     "href": self_href},
+        {"rel": "root",       "type": "application/json",     "href": f"{prefix}/"},
+        {"rel": "parent",     "type": "application/json",     "href": parent_href},
+        {"rel": "collection", "type": "application/json",     "href": f"{prefix}/collections/{collection_id}"},
+    ]
+
+    nk = _next_key(ordering, selected_keys, available)
+
+    if nk is not None:
+        # ---- internal node: one child per value of the next key ----
+        values = sorted(available[nk])
+        lang_info = _mars_language.get(nk, {})
+        child_links: list[dict] = []
+        for val in values:
+            child_path = _catalog_path_str(path_pairs + [(nk, val)])
+            val_info = lang_info.get("values", {}).get(val) or {}
+            val_desc = (val_info.get("name") or val_info.get("description") or "") if isinstance(val_info, dict) else ""
+            child_title = f"{nk} = {val}" + (f"  ({val_desc})" if val_desc else "")
+            child_links.append({
+                "rel":        "child",
+                "type":       "application/json",
+                "href":       f"{coll_root}/{child_path}",
+                "title":      child_title,
+                # non-standard extras consumed by the JS browser
+                "stac:key":   nk,
+                "stac:value": val,
+            })
+        return {
+            "type":         "Catalog",
+            "id":           f"{collection_id}/{path_str}" if path_str else collection_id,
+            "stac_version": STAC_VERSION,
+            "title":        title,
+            "description":  f"Select a value for '{nk}'",
+            "next_key":     nk,
+            "links":        base_links + child_links,
+        }
+
+    else:
+        # ---- leaf node: one item link per datacube ----
+        dcs = sub_qube.to_datacubes()
+        item_links: list[dict] = []
+        for dc in dcs:
+            dc.pop("root", None)  # not needed in item properties; confuses the browser
+            iid = _make_item_id(dc)
+            dt = _mars_datetime(dc.get("date"), dc.get("time"))
+            item_links.append({
+                "rel":              "item",
+                "type":             "application/geo+json",
+                "href":             f"{prefix}/collections/{collection_id}/items/{iid}",
+                "title":            dt or iid,
+                "stac:properties":  dict(dc),
+            })
+        return {
+            "type":         "Catalog",
+            "id":           f"{collection_id}/{path_str}" if path_str else collection_id,
+            "stac_version": STAC_VERSION,
+            "title":        title,
+            "description":  f"{len(dcs)} item(s)",
+            "links":        base_links + item_links,
+        }
+
+
+# ── Collection helpers ───────────────────────────────────────────────────────
+
+def _make_collection(
+    collection_id: str,
+    all_coords: dict[str, list],
+    base: str,
+) -> dict[str, Any]:
+    prefix = f"{base}/api/stac/v1"
+    lang_values = _mars_language.get("dataset", {}).get("values", {})
+    lang_entry = lang_values.get(collection_id) or {}
+    description = (
+        (lang_entry.get("description") or lang_entry.get("name") or "") if isinstance(lang_entry, dict) else str(lang_entry)
+    ) or _mars_language.get(collection_id, {}).get("description", "") or f"Dataset: {collection_id}"
+    summaries = {k: sorted(v) for k, v in all_coords.items() if k != "dataset" and v}
+    return {
+        "type":         "Collection",
+        "id":           collection_id,
+        "stac_version": STAC_VERSION,
+        "title":        collection_id,
+        "description":  description,
+        "license":      "proprietary",
+        "extent": {
+            "spatial":  {"bbox": [[-180.0, -90.0, 180.0, 90.0]]},
+            "temporal": {"interval": _collection_temporal_extent(all_coords)},
+        },
+        "summaries": summaries,
+        "links": [
+            {"rel": "self",   "type": "application/json", "href": f"{prefix}/collections/{collection_id}"},
+            {"rel": "root",   "type": "application/json", "href": f"{prefix}/"},
+            {
+                "rel":   "child",
+                "type":  "application/json",
+                "href":  f"{prefix}/collections/{collection_id}/catalog",
+                "title": "Browse by metadata key hierarchy",
+            },
+        ],
+    }
+
+
+def _datacube_to_stac_item(
+    dc: dict[str, str],
+    collection_id: str,
+    base: str,
+) -> dict[str, Any]:
+    item_id = _make_item_id(dc)
+    dt = _mars_datetime(dc.get("date"), dc.get("time"))
+    prefix = f"{base}/api/stac/v1"
+    return {
+        "type":         "Feature",
+        "stac_version": STAC_VERSION,
+        "id":           item_id,
+        "collection":   collection_id,
+        "geometry":     None,
+        "bbox":         None,
+        "properties":   {**dc, "datetime": dt},
+        "links": [
+            {"rel": "self",       "type": "application/geo+json", "href": f"{prefix}/collections/{collection_id}/items/{item_id}"},
+            {"rel": "root",       "type": "application/json",     "href": f"{prefix}/"},
+            {"rel": "parent",     "type": "application/json",     "href": f"{prefix}/collections/{collection_id}"},
+            {"rel": "collection", "type": "application/json",     "href": f"{prefix}/collections/{collection_id}"},
+        ],
+        "assets": {},
+    }
+
+
+# ── API endpoints ────────────────────────────────────────────────────────────
+
+@router.get("/", summary="STAC API Landing Page")
+async def stac_landing(request: Request):
+    base = _base_url(request)
+    prefix = f"{base}/api/stac/v1"
+    return {
+        "type":         "Catalog",
+        "id":           "qubed-stac",
+        "stac_version": STAC_VERSION,
+        "title":        "Qubed STAC Catalogue",
+        "description":  (
+            "STAC-compliant catalogue backed by the Qubed meteorological data index. "
+            "Each collection is browsable as a hierarchical key-by-key catalogue."
+        ),
+        "conformsTo": CONFORMANCE_CLASSES,
+        "links": [
+            {"rel": "self",        "type": "application/json",     "href": f"{prefix}/"},
+            {"rel": "root",        "type": "application/json",     "href": f"{prefix}/"},
+            {"rel": "conformance", "type": "application/json",     "href": f"{prefix}/conformance"},
+            {"rel": "data",        "type": "application/json",     "href": f"{prefix}/collections"},
+            {"rel": "search",      "type": "application/geo+json", "href": f"{prefix}/search", "method": "GET"},
+            {"rel": "search",      "type": "application/geo+json", "href": f"{prefix}/search", "method": "POST"},
+            *[
+                {"rel": "child", "type": "application/json",
+                 "href": f"{prefix}/collections/{cid}", "title": cid}
+                for cid in _get_all_collections()
+            ],
+        ],
+    }
+
+
+@router.get("/conformance", summary="STAC API Conformance")
+async def stac_conformance():
+    return {"conformsTo": CONFORMANCE_CLASSES}
+
+
+@router.get("/collections", summary="List Collections")
+async def list_collections(request: Request):
+    base = _base_url(request)
+    all_coords = _qube.all_unique_dim_coords()
+    datasets = _get_all_collections()
+    collections = []
+    for cid in datasets:
+        if cid == "default":
+            sub_coords = all_coords
+        else:
+            sub = _select_collection(cid)
+            sub_coords = sub.all_unique_dim_coords() if sub else {}
+        collections.append(_make_collection(cid, sub_coords, base))
+    prefix = f"{base}/api/stac/v1"
+    return {
+        "collections": collections,
+        "links": [
+            {"rel": "self", "type": "application/json", "href": f"{prefix}/collections"},
+            {"rel": "root", "type": "application/json", "href": f"{prefix}/"},
+        ],
+    }
+
+
+@router.get("/collections/{collection_id}", summary="Get Collection")
+async def get_collection(collection_id: str, request: Request):
+    base = _base_url(request)
+    sub = _select_collection(collection_id)
+    if sub is None:
+        raise HTTPException(status_code=404, detail=f"Collection '{collection_id}' not found")
+    return _make_collection(collection_id, sub.all_unique_dim_coords(), base)
+
+
+@router.get("/collections/{collection_id}/items", summary="List Collection Items")
+async def list_collection_items(
+    collection_id: str,
+    request: Request,
+    limit: int = Query(MAX_ITEMS_DEFAULT, ge=1, le=MAX_ITEMS_HARD_LIMIT),
+    offset: int = Query(0, ge=0),
+):
+    """Return GeoJSON FeatureCollection of items for a collection (STAC spec)."""
+    base = _base_url(request)
+    prefix = f"{base}/api/stac/v1"
+    sub = _select_collection(collection_id)
+    if sub is None:
+        raise HTTPException(status_code=404, detail=f"Collection '{collection_id}' not found")
+    all_dcs = sub.to_datacubes()
+    total = len(all_dcs)
+    features = [
+        _datacube_to_stac_item(dc, collection_id, base)
+        for dc in all_dcs[offset: offset + limit]
+    ]
+    links = [
+        {"rel": "self",       "type": "application/geo+json", "href": f"{prefix}/collections/{collection_id}/items?limit={limit}&offset={offset}"},
+        {"rel": "root",       "type": "application/json",     "href": f"{prefix}/"},
+        {"rel": "collection", "type": "application/json",     "href": f"{prefix}/collections/{collection_id}"},
+    ]
+    if offset + limit < total:
+        links.append({"rel": "next", "type": "application/geo+json",
+                      "href": f"{prefix}/collections/{collection_id}/items?limit={limit}&offset={offset + limit}"})
+    if offset > 0:
+        links.append({"rel": "prev", "type": "application/geo+json",
+                      "href": f"{prefix}/collections/{collection_id}/items?limit={limit}&offset={max(0, offset - limit)}"})
+    return {
+        "type":           "FeatureCollection",
+        "features":       features,
+        "numberMatched":  total,
+        "numberReturned": len(features),
+        "links":          links,
+    }
+
+
+# ── Hierarchical catalog browsing ────────────────────────────────────────────
+
+@router.get("/collections/{collection_id}/catalog", summary="Root Catalog Node")
+async def collection_catalog_root(collection_id: str, request: Request):
+    """
+    Root catalog node for a collection.
+    Shows child catalogs for each distinct value of the first key in the
+    dataset's key ordering (e.g. 'class').
+    """
+    return await _resolve_catalog_node(collection_id, "", request)
+
+
+@router.get("/collections/{collection_id}/catalog/{path:path}", summary="Nested Catalog Node")
+async def collection_catalog_path(collection_id: str, path: str, request: Request):
+    """
+    Nested catalog node at key=value/key=value/... path.
+    Drills down one key at a time until the leaf level, where STAC Items appear.
+    """
+    return await _resolve_catalog_node(collection_id, path, request)
+
+
+async def _resolve_catalog_node(
+    collection_id: str,
+    path: str,
+    request: Request,
+) -> dict:
+    base = _base_url(request)
+    prefix = f"{base}/api/stac/v1"
+
+    sub = _select_collection(collection_id)
+    if sub is None:
+        raise HTTPException(status_code=404, detail=f"Collection '{collection_id}' not found")
+
+    path_pairs = _parse_catalog_path(path)
+    if path_pairs:
+        sub = _apply_path_selection(sub, path_pairs)
+
+    # Keys already fixed by the collection filter (e.g. dataset=climate-dt)
+    collection_fixed = {"dataset"} if collection_id != "default" else set()
+    ordering = [k for k in _key_ordering_for(collection_id) if k not in collection_fixed]
+
+    return _make_catalog_node(
+        collection_id=collection_id,
+        path_pairs=path_pairs,
+        sub_qube=sub,
+        prefix=prefix,
+        ordering=ordering,
+    )
+
+
+# ── Item retrieval ───────────────────────────────────────────────────────────
+
+@router.get("/collections/{collection_id}/items/{item_id}", summary="Get Item")
+async def get_item(collection_id: str, item_id: str, request: Request):
+    base = _base_url(request)
+    sub = _select_collection(collection_id)
+    if sub is None:
+        raise HTTPException(status_code=404, detail=f"Collection '{collection_id}' not found")
+    for dc in sub.to_datacubes():
+        if _make_item_id(dc) == item_id:
+            return _datacube_to_stac_item(dc, collection_id, base)
+    raise HTTPException(status_code=404, detail=f"Item '{item_id}' not found")
+
+
+# ── Search ───────────────────────────────────────────────────────────────────
+
+def _apply_item_filters(sub_qube, filters: dict[str, Any]):
+    RESERVED = {"bbox", "datetime", "limit", "offset", "page", "collections", "ids", "fields"}
+    selection = {k: v for k, v in filters.items() if k not in RESERVED}
+    if not selection:
+        return sub_qube
+    try:
+        return sub_qube.select(selection, None, None)
+    except Exception as exc:
+        logger.warning(f"Search filter select failed ({exc}), ignoring")
+        return sub_qube
+
+
+def _do_search(
+    base: str,
+    *,
+    collections: Optional[list[str]] = None,
+    ids: Optional[list[str]] = None,
+    limit: int = MAX_ITEMS_DEFAULT,
+    offset: int = 0,
+    extra_filters: Optional[dict] = None,
+) -> dict[str, Any]:
+    prefix = f"{base}/api/stac/v1"
+    all_cols = _get_all_collections()
+    targets = collections if collections else all_cols
+    all_items: list[dict] = []
+    for cid in targets:
+        if cid not in all_cols:
+            continue
+        sub = _select_collection(cid)
+        if sub is None:
+            continue
+        if extra_filters:
+            sub = _apply_item_filters(sub, extra_filters)
+        for dc in sub.to_datacubes():
+            item = _datacube_to_stac_item(dc, cid, base)
+            if ids and item["id"] not in ids:
+                continue
+            all_items.append(item)
+    total = len(all_items)
+    return {
+        "type":           "FeatureCollection",
+        "features":       all_items[offset: offset + limit],
+        "numberMatched":  total,
+        "numberReturned": len(all_items[offset: offset + limit]),
+        "links": [
+            {"rel": "self", "type": "application/geo+json", "href": f"{prefix}/search"},
+            {"rel": "root", "type": "application/json",     "href": f"{prefix}/"},
+        ],
+    }
+
+
+@router.get("/search", summary="Search Items (GET)", response_class=JSONResponse)
+async def search_get(
+    request: Request,
+    collections: Optional[str] = Query(None, description="Comma-separated collection IDs"),
+    ids: Optional[str] = Query(None, description="Comma-separated item IDs"),
+    limit: int = Query(MAX_ITEMS_DEFAULT, ge=1, le=MAX_ITEMS_HARD_LIMIT),
+    offset: int = Query(0, ge=0),
+):
+    base = _base_url(request)
+    extra = {
+        k: v for k, v in request.query_params.items()
+        if k not in ("collections", "ids", "limit", "offset", "bbox", "datetime")
+    }
+    return _do_search(
+        base,
+        collections=collections.split(",") if collections else None,
+        ids=ids.split(",") if ids else None,
+        limit=limit, offset=offset,
+        extra_filters=extra or None,
+    )
+
+
+@router.post("/search", summary="Search Items (POST)", response_class=JSONResponse)
+async def search_post(request: Request):
+    base = _base_url(request)
+    try:
+        body = await request.json()
+    except Exception:
+        body = {}
+    return _do_search(
+        base,
+        collections=body.get("collections"),
+        ids=body.get("ids"),
+        limit=min(int(body.get("limit", MAX_ITEMS_DEFAULT)), MAX_ITEMS_HARD_LIMIT),
+        offset=int(body.get("offset", 0)),
+        extra_filters=body.get("filter") or None,
+    )
diff --git a/stac_server/templates/landing.html b/stac_server/templates/landing.html
index 4cafd05..1b5f09f 100644
--- a/stac_server/templates/landing.html
+++ b/stac_server/templates/landing.html
@@ -293,6 +293,343 @@
         .skip-link:hover {
             text-decoration: underline;
         }
+
+        /* ── STAC API Section ───────────────────────────────────────────── */
+        .stac-section {
+            width: 100%;
+            max-width: 1100px;
+            margin: 4rem auto 0;
+            padding: 0 1.5rem 4rem;
+        }
+
+        .stac-section-header {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            margin-bottom: 0.5rem;
+        }
+
+        .stac-section-header h2 {
+            font-size: 1.9rem;
+            font-weight: 700;
+            color: var(--text-primary);
+            margin: 0;
+        }
+
+        .stac-version-badge {
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark, #1d4ed8));
+            color: #fff;
+            font-size: 0.72rem;
+            font-weight: 700;
+            padding: 0.2rem 0.6rem;
+            border-radius: 20px;
+            letter-spacing: 0.05em;
+            text-transform: uppercase;
+        }
+
+        .stac-ext-badge {
+            background: linear-gradient(135deg, #059669, #047857);
+            color: #fff;
+            font-size: 0.72rem;
+            font-weight: 700;
+            padding: 0.2rem 0.6rem;
+            border-radius: 20px;
+            letter-spacing: 0.05em;
+            text-transform: uppercase;
+        }
+
+        .stac-section-lead {
+            color: var(--text-secondary, #666);
+            font-size: 1rem;
+            margin: 0 0 2.5rem;
+            line-height: 1.7;
+            max-width: 780px;
+        }
+
+        .stac-concepts {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+            margin-bottom: 2.5rem;
+        }
+
+        .concept-card {
+            background: var(--bg-primary, #fff);
+            border: 1.5px solid var(--border-light, #e8eaf0);
+            border-radius: 10px;
+            padding: 1.1rem 1.2rem;
+        }
+
+        .concept-card .concept-icon { font-size: 1.5rem; margin-bottom: 0.4rem; }
+        .concept-card .concept-title { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.3rem; }
+        .concept-card .concept-desc { font-size: 0.8rem; color: var(--text-secondary, #666); margin: 0; line-height: 1.5; }
+
+        .endpoints-group { margin-bottom: 2rem; }
+
+        .endpoints-group-label {
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+            font-size: 0.78rem;
+            font-weight: 700;
+            letter-spacing: 0.08em;
+            text-transform: uppercase;
+            color: var(--text-secondary, #666);
+            margin-bottom: 0.75rem;
+        }
+
+        .endpoints-group-label::after {
+            content: '';
+            flex: 1;
+            height: 1px;
+            background: var(--border-color, #e0e4f0);
+        }
+
+        .endpoint-list { display: flex; flex-direction: column; gap: 0.5rem; }
+
+        .ep-card {
+            background: var(--bg-primary, #fff);
+            border: 1.5px solid var(--border-light, #e8eaf0);
+            border-radius: 10px;
+            overflow: hidden;
+            transition: box-shadow 0.15s, border-color 0.15s;
+        }
+
+        .ep-card:hover { border-color: var(--primary-color, #2563eb); box-shadow: 0 2px 12px rgba(37,99,235,.1); }
+        .ep-card.ext-card { border-left: 4px solid #059669; }
+
+        .ep-header {
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+            padding: 0.75rem 1rem;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        .ep-method {
+            font-size: 0.7rem;
+            font-weight: 800;
+            letter-spacing: 0.06em;
+            padding: 0.2rem 0.55rem;
+            border-radius: 5px;
+            min-width: 42px;
+            text-align: center;
+        }
+
+        .ep-method.get  { background: #dbeafe; color: #1d4ed8; }
+        .ep-method.post { background: #dcfce7; color: #15803d; }
+
+        .ep-path {
+            font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+            font-size: 0.84rem;
+            color: var(--text-primary, #1a1a2e);
+            flex: 1;
+            word-break: break-all;
+        }
+
+        .ep-path .ep-param { color: var(--primary-color, #2563eb); }
+
+        .ep-desc {
+            font-size: 0.8rem;
+            color: var(--text-secondary, #666);
+            white-space: nowrap;
+        }
+
+        .ep-try-btn {
+            font-size: 0.75rem;
+            font-weight: 600;
+            padding: 0.25rem 0.65rem;
+            border: 1.5px solid var(--primary-color, #2563eb);
+            border-radius: 6px;
+            background: transparent;
+            color: var(--primary-color, #2563eb);
+            cursor: pointer;
+            white-space: nowrap;
+            transition: all 0.15s;
+        }
+
+        .ep-try-btn:hover { background: var(--primary-color, #2563eb); color: #fff; }
+
+        .ep-chevron {
+            color: var(--text-secondary, #aaa);
+            transition: transform 0.2s;
+            font-size: 0.8rem;
+        }
+
+        .ep-card.open .ep-chevron { transform: rotate(180deg); }
+
+        .ep-body {
+            display: none;
+            border-top: 1.5px solid var(--border-light, #e8eaf0);
+        }
+
+        .ep-card.open .ep-body { display: block; }
+
+        .ep-tabs {
+            display: flex;
+            gap: 0;
+            border-bottom: 1.5px solid var(--border-light, #e8eaf0);
+            background: var(--bg-secondary, #f4f6fb);
+        }
+
+        .ep-tab {
+            padding: 0.4rem 0.85rem;
+            font-size: 0.79rem;
+            font-weight: 500;
+            cursor: pointer;
+            border: none;
+            background: none;
+            color: var(--text-secondary, #666);
+            border-bottom: 2px solid transparent;
+            margin-bottom: -1.5px;
+            transition: color 0.12s, border-color 0.12s;
+        }
+
+        .ep-tab.active { color: var(--primary-color, #2563eb); border-bottom-color: var(--primary-color, #2563eb); background: var(--bg-primary, #fff); }
+
+        .ep-pane { display: none; }
+        .ep-pane.active { display: block; }
+
+        .ep-snippet-wrap {
+            position: relative;
+            background: #1e1e2e;
+            margin: 0;
+        }
+
+        .ep-snippet-wrap pre {
+            margin: 0;
+            padding: 1rem 1.2rem;
+            font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+            font-size: 0.78rem;
+            color: #cdd6f4;
+            overflow-x: auto;
+            white-space: pre;
+            max-height: 280px;
+            overflow-y: auto;
+        }
+
+        .ep-copy-btn {
+            position: absolute;
+            top: 0.5rem;
+            right: 0.5rem;
+            font-size: 0.72rem;
+            padding: 0.2rem 0.55rem;
+            background: rgba(255,255,255,.12);
+            color: #cdd6f4;
+            border: 1px solid rgba(255,255,255,.2);
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background 0.15s;
+        }
+
+        .ep-copy-btn:hover { background: rgba(255,255,255,.22); }
+
+        .ep-live-pane {
+            padding: 0.85rem 1rem;
+        }
+
+        .ep-live-url-row {
+            display: flex;
+            gap: 0.5rem;
+            align-items: center;
+            margin-bottom: 0.65rem;
+            flex-wrap: wrap;
+        }
+
+        .ep-live-url {
+            font-family: 'Monaco', 'Menlo', monospace;
+            font-size: 0.78rem;
+            flex: 1;
+            min-width: 0;
+            padding: 0.3rem 0.6rem;
+            border: 1.5px solid var(--border-color, #e0e4f0);
+            border-radius: 6px;
+            background: var(--bg-secondary, #f4f6fb);
+            color: var(--text-primary);
+            outline: none;
+        }
+
+        .ep-live-url:focus { border-color: var(--primary-color, #2563eb); }
+
+        .ep-send-btn {
+            font-size: 0.8rem;
+            font-weight: 600;
+            padding: 0.3rem 0.8rem;
+            background: var(--primary-color, #2563eb);
+            color: #fff;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: background 0.15s;
+            white-space: nowrap;
+        }
+
+        .ep-send-btn:hover { background: var(--primary-dark, #1d4ed8); }
+
+        .ep-live-result {
+            background: #1e1e2e;
+            border-radius: 7px;
+            overflow: hidden;
+        }
+
+        .ep-live-result pre {
+            margin: 0;
+            padding: 0.85rem 1rem;
+            font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+            font-size: 0.75rem;
+            color: #cdd6f4;
+            overflow: auto;
+            max-height: 320px;
+            white-space: pre;
+        }
+
+        .ep-live-placeholder {
+            color: #6c7086;
+            font-style: italic;
+            padding: 0.85rem 1rem;
+            font-size: 0.8rem;
+        }
+
+        .stac-tools-row {
+            display: flex;
+            gap: 1rem;
+            flex-wrap: wrap;
+            margin-top: 2.5rem;
+        }
+
+        .stac-tool-card {
+            flex: 1;
+            min-width: 200px;
+            background: var(--bg-primary, #fff);
+            border: 1.5px solid var(--border-light, #e8eaf0);
+            border-radius: 10px;
+            padding: 1.1rem 1.3rem;
+            text-decoration: none;
+            color: inherit;
+            transition: all 0.15s;
+            display: flex;
+            gap: 0.9rem;
+            align-items: flex-start;
+        }
+
+        .stac-tool-card:hover {
+            border-color: var(--primary-color, #2563eb);
+            box-shadow: 0 3px 14px rgba(37,99,235,.12);
+            transform: translateY(-2px);
+        }
+
+        .stac-tool-card .tool-icon { font-size: 1.5rem; flex-shrink: 0; }
+        .stac-tool-card .tool-name { font-size: 0.92rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.2rem; }
+        .stac-tool-card .tool-desc { font-size: 0.79rem; color: var(--text-secondary, #666); margin: 0; line-height: 1.4; }
+
+        /* syntax highlight tokens */
+        .t-key   { color: #89b4fa; }
+        .t-str   { color: #a6e3a1; }
+        .t-num   { color: #fab387; }
+        .t-cmt   { color: #6c7086; font-style: italic; }
+        .t-kw    { color: #cba6f7; }
+        .t-fn    { color: #89dceb; }
     </style>
 </head>
 
@@ -340,6 +677,8 @@ <h3 class="option-title">Extremes DT</h3>
 
                 <div class="skip-option">
                     <a href="/browse" class="skip-link">Skip to full catalogue browser →</a>
+                    &nbsp;·&nbsp;
+                    <a href="/stac-browse" class="skip-link">STAC catalogue browser →</a>
                 </div>
             </div>
 
@@ -521,6 +860,341 @@ <h4 class="template-name">${template.name}</h4>
             window.location.href = `/browse?${params.toString()}`;
         }
     </script>
+
+    <!-- ═══════════════════════════════════════════════════════════════════ -->
+    <!--  STAC API Developer Section                                        -->
+    <!-- ═══════════════════════════════════════════════════════════════════ -->
+    <section class="stac-section" id="stac-api">
+        <div class="stac-section-header">
+            <h2>STAC API</h2>
+            <span class="stac-version-badge">v1.0.0</span>
+            <span class="stac-ext-badge">+ Qubed extensions</span>
+        </div>
+        <p class="stac-section-lead">
+            A fully compliant <a href="https://api.stacspec.org/v1.0.0/core/" target="_blank" style="color:var(--primary-color)">STAC API v1.0.0</a>
+            is available at <code style="background:var(--bg-secondary);padding:.1rem .4rem;border-radius:4px;font-size:.88rem">/api/stac/v1</code>.
+            Beyond the standard, Qubed adds <strong>hierarchical catalogue browsing</strong>:
+            any collection can be drilled into key-by-key (e.g. <em>class → stream → type → …</em>)
+            using the <code style="background:var(--bg-secondary);padding:.1rem .4rem;border-radius:4px;font-size:.88rem">/catalog/…</code>
+            sub-tree, making it trivial to navigate massive multidimensional datasets without
+            enumerating all items upfront.
+        </p>
+
+        <!-- Key concepts -->
+        <div class="stac-concepts">
+            <div class="concept-card">
+                <div class="concept-icon">📦</div>
+                <p class="concept-title">Collection</p>
+                <p class="concept-desc">Each unique <em>dataset</em> dimension value maps to a STAC Collection with extent, summaries and links.</p>
+            </div>
+            <div class="concept-card">
+                <div class="concept-icon">🗂️</div>
+                <p class="concept-title">Hierarchical Catalog</p>
+                <p class="concept-desc">Qubed extension — browse one MARS key at a time via <code>/catalog/key=val/…</code>. The <code>next_key</code> field drives the drill-down.</p>
+            </div>
+            <div class="concept-card">
+                <div class="concept-icon">🔍</div>
+                <p class="concept-title">Item Search</p>
+                <p class="concept-desc">Cross-collection full-text search via <code>GET /search</code> or <code>POST /search</code> with arbitrary property filters.</p>
+            </div>
+            <div class="concept-card">
+                <div class="concept-icon">📄</div>
+                <p class="concept-title">Item</p>
+                <p class="concept-desc">A single datacube leaf — all MARS key=value metadata exposed as GeoJSON Feature <code>properties</code> plus a ready-to-use code snippet.</p>
+            </div>
+        </div>
+
+        <!-- ── Standard endpoints ── -->
+        <div class="endpoints-group">
+            <div class="endpoints-group-label">
+                <span class="stac-version-badge" style="font-size:.65rem">STAC standard</span>
+                Core &amp; OGC feature endpoints
+            </div>
+            <div class="endpoint-list" id="ep-standard"></div>
+        </div>
+
+        <!-- ── Qubed extension endpoints ── -->
+        <div class="endpoints-group">
+            <div class="endpoints-group-label">
+                <span class="stac-ext-badge" style="font-size:.65rem">Qubed extension</span>
+                Hierarchical catalogue browsing
+            </div>
+            <div class="endpoint-list" id="ep-ext"></div>
+        </div>
+
+        <!-- ── External tooling ── -->
+        <div class="stac-tools-row">
+            <a class="stac-tool-card" id="tool-stac-browser" href="#" target="_blank">
+                <span class="tool-icon">🌐</span>
+                <div>
+                    <p class="tool-name">STAC Browser</p>
+                    <p class="tool-desc">Radiant Earth's open-source visual STAC explorer — opens this catalogue directly.</p>
+                </div>
+            </a>
+            <a class="stac-tool-card" href="/stac-browse">
+                <span class="tool-icon">🗂️</span>
+                <div>
+                    <p class="tool-name">Built-in STAC Browser</p>
+                    <p class="tool-desc">Integrated hierarchical browser with live key drill-down, item detail and code snippets.</p>
+                </div>
+            </a>
+            <a class="stac-tool-card" href="/api/stac/v1/" target="_blank">
+                <span class="tool-icon">📡</span>
+                <div>
+                    <p class="tool-name">Raw API</p>
+                    <p class="tool-desc">Explore the raw JSON responses directly in your browser or pipe to <code>jq</code>.</p>
+                </div>
+            </a>
+            <a class="stac-tool-card" href="https://pystac-client.readthedocs.io/" target="_blank">
+                <span class="tool-icon">🐍</span>
+                <div>
+                    <p class="tool-name">pystac-client</p>
+                    <p class="tool-desc">Official Python client — search, iterate collections and download items programmatically.</p>
+                </div>
+            </a>
+        </div>
+    </section>
+
+    <script>
+    // ── STAC API explorer ─────────────────────────────────────────────────────
+    const BASE = '/api/stac/v1';
+    const ORIGIN = location.origin;
+
+    // Set external STAC browser link
+    document.getElementById('tool-stac-browser').href =
+        `https://radiantearth.github.io/stac-browser/#/external/${encodeURIComponent(ORIGIN + BASE + '/')}`;
+
+    // ── Endpoint definitions ──────────────────────────────────────────────────
+    // Each entry: { method, path, desc, ext, defaultUrl, curlExtra, pyExtra }
+    const ENDPOINTS = {
+        standard: [
+            {
+                method: 'GET', path: '/api/stac/v1/',
+                desc: 'Landing page — conformance classes & top-level links',
+                defaultUrl: `${BASE}/`,
+                curl: `curl -s "${ORIGIN}${BASE}/" | python3 -m json.tool`,
+                py: `import requests\n\nresp = requests.get("${ORIGIN}${BASE}/")\nprint(resp.json())`,
+                js: `const data = await fetch("${BASE}/").then(r => r.json());\nconsole.log(data.conformsTo);`,
+            },
+            {
+                method: 'GET', path: '/api/stac/v1/conformance',
+                desc: 'OGC conformance classes declared by this API',
+                defaultUrl: `${BASE}/conformance`,
+                curl: `curl -s "${ORIGIN}${BASE}/conformance" | python3 -m json.tool`,
+                py: `import requests\n\nresp = requests.get("${ORIGIN}${BASE}/conformance")\nprint(resp.json()["conformsTo"])`,
+                js: `const data = await fetch("${BASE}/conformance").then(r => r.json());\nconsole.log(data.conformsTo);`,
+            },
+            {
+                method: 'GET', path: '/api/stac/v1/collections',
+                desc: 'List all collections (one per dataset)',
+                defaultUrl: `${BASE}/collections`,
+                curl: `curl -s "${ORIGIN}${BASE}/collections" | python3 -m json.tool`,
+                py: `import requests\n\nresp = requests.get("${ORIGIN}${BASE}/collections")\nfor c in resp.json()["collections"]:\n    print(c["id"], "-", c["description"])`,
+                js: `const data = await fetch("${BASE}/collections").then(r => r.json());\ndata.collections.forEach(c => console.log(c.id));`,
+            },
+            {
+                method: 'GET', path: '/api/stac/v1/collections/{collection_id}',
+                desc: 'Collection metadata, extent & summaries',
+                defaultUrl: `${BASE}/collections/extremes-dt`,
+                curl: `curl -s "${ORIGIN}${BASE}/collections/extremes-dt" | python3 -m json.tool`,
+                py: `import requests\n\ncid = "extremes-dt"\nresp = requests.get(f"${ORIGIN}${BASE}/collections/{cid}")\nc = resp.json()\nprint(c["description"])\nprint("Keys:", list(c["summaries"].keys()))`,
+                js: `const cid = "extremes-dt";\nconst c = await fetch(\`${BASE}/collections/\${cid}\`).then(r => r.json());\nconsole.log(c.summaries);`,
+            },
+            {
+                method: 'GET', path: '/api/stac/v1/collections/{collection_id}/items',
+                desc: 'Paginated list of all items in a collection',
+                defaultUrl: `${BASE}/collections/extremes-dt/items?limit=5`,
+                curl: `curl -s "${ORIGIN}${BASE}/collections/extremes-dt/items?limit=5" | python3 -m json.tool`,
+                py: `import requests\n\ncid = "extremes-dt"\nresp = requests.get(\n    f"${ORIGIN}${BASE}/collections/{cid}/items",\n    params={"limit": 5}\n)\nfor feat in resp.json()["features"]:\n    print(feat["id"], feat["properties"].get("date"))`,
+                js: `const items = await fetch("${BASE}/collections/extremes-dt/items?limit=5").then(r => r.json());\nitems.features.forEach(f => console.log(f.id, f.properties.date));`,
+            },
+            {
+                method: 'GET', path: '/api/stac/v1/collections/{collection_id}/items/{item_id}',
+                desc: 'Single item by deterministic SHA-256 ID',
+                defaultUrl: `${BASE}/collections/extremes-dt/items/`,
+                curl: `# Grab the first item ID, then fetch it\nITEM=$(curl -s "${ORIGIN}${BASE}/collections/extremes-dt/items?limit=1" | python3 -c "import sys,json; print(json.load(sys.stdin)['features'][0]['id'])")\ncurl -s "${ORIGIN}${BASE}/collections/extremes-dt/items/$ITEM" | python3 -m json.tool`,
+                py: `import requests\n\ncid = "extremes-dt"\n# First get an item ID\nresp = requests.get(f"${ORIGIN}${BASE}/collections/{cid}/items", params={"limit": 1})\nitem_id = resp.json()["features"][0]["id"]\n\n# Then fetch the full item\nitem = requests.get(f"${ORIGIN}${BASE}/collections/{cid}/items/{item_id}").json()\nprint(item["properties"])`,
+                js: `const first = await fetch("${BASE}/collections/extremes-dt/items?limit=1").then(r => r.json());\nconst id = first.features[0].id;\nconst item = await fetch(\`${BASE}/collections/extremes-dt/items/\${id}\`).then(r => r.json());\nconsole.log(item.properties);`,
+            },
+            {
+                method: 'GET', path: '/api/stac/v1/search',
+                desc: 'Cross-collection item search with property filters',
+                defaultUrl: `${BASE}/search?limit=5`,
+                curl: `curl -s "${ORIGIN}${BASE}/search?limit=5" | python3 -m json.tool`,
+                py: `import requests\n\n# Free-text filter on arbitrary MARS properties\nresp = requests.get(\n    f"${ORIGIN}${BASE}/search",\n    params={"limit": 5, "stream": "oper", "type": "fc"}\n)\nprint(f"Matched {resp.json()['numberMatched']} items")`,
+                js: `const results = await fetch("${BASE}/search?limit=5&stream=oper").then(r => r.json());\nconsole.log("Matched:", results.numberMatched);`,
+            },
+            {
+                method: 'POST', path: '/api/stac/v1/search',
+                desc: 'POST search — body accepts collections, ids, limit, offset, and any MARS key filters',
+                defaultUrl: `${BASE}/search`,
+                curl: `curl -s -X POST "${ORIGIN}${BASE}/search" \\\n  -H "Content-Type: application/json" \\\n  -d '{"collections":["extremes-dt"],"limit":5,"stream":"oper"}' \\\n  | python3 -m json.tool`,
+                py: `import requests\n\nresp = requests.post(\n    f"${ORIGIN}${BASE}/search",\n    json={\n        "collections": ["extremes-dt"],\n        "limit": 5,\n        "stream": "oper",\n        "type": "fc"\n    }\n)\nprint(f"Matched {resp.json()['numberMatched']} items")`,
+                js: `const results = await fetch("${BASE}/search", {\n    method: "POST",\n    headers: {"Content-Type": "application/json"},\n    body: JSON.stringify({collections: ["extremes-dt"], limit: 5, stream: "oper"})\n}).then(r => r.json());\nconsole.log("Matched:", results.numberMatched);`,
+            },
+        ],
+        ext: [
+            {
+                method: 'GET', path: '/api/stac/v1/collections/{collection_id}/catalog',
+                desc: 'Root catalog node — returns the first MARS key to drill into, with one child link per value',
+                ext: true,
+                defaultUrl: `${BASE}/collections/extremes-dt/catalog`,
+                curl: `curl -s "${ORIGIN}${BASE}/collections/extremes-dt/catalog" | python3 -m json.tool`,
+                py: `import requests\n\ncid = "extremes-dt"\nnode = requests.get(f"${ORIGIN}${BASE}/collections/{cid}/catalog").json()\nprint("Next key to select:", node["next_key"])\nchildren = [l for l in node["links"] if l["rel"] == "child"]\nprint(f"{len(children)} child values:")\nfor c in children:\n    print(" •", c["title"])`,
+                js: `const node = await fetch("${BASE}/collections/extremes-dt/catalog").then(r => r.json());\nconsole.log("Drill by:", node.next_key);\nnode.links.filter(l => l.rel === "child").forEach(l => console.log(l.title, l.href));`,
+            },
+            {
+                method: 'GET', path: '/api/stac/v1/collections/{collection_id}/catalog/{path}',
+                desc: 'Nested catalog node — path is a slash-separated list of key=value segments',
+                ext: true,
+                defaultUrl: `${BASE}/collections/extremes-dt/catalog/stream=oper`,
+                curl: `curl -s "${ORIGIN}${BASE}/collections/extremes-dt/catalog/stream=oper" | python3 -m json.tool`,
+                py: `import requests\n\ncid = "extremes-dt"\npath = "stream=oper"   # drill deeper: "stream=oper/type=fc"\nnode = requests.get(f"${ORIGIN}${BASE}/collections/{cid}/catalog/{path}").json()\nprint("Next key:", node.get("next_key", "(leaf – showing items)"))\nchildren = [l for l in node["links"] if l["rel"] == "child"]\nitems    = [l for l in node["links"] if l["rel"] == "item"]\nif children:\n    for c in children: print(" •", c["title"])\nelif items:\n    print(f"{len(items)} items at leaf")\n    print(items[0])`,
+                js: `// Walk the tree programmatically\nasync function walkCatalog(cid, path = "") {\n    const url = path\n        ? \`${BASE}/collections/\${cid}/catalog/\${path}\`\n        : \`${BASE}/collections/\${cid}/catalog\`;\n    const node = await fetch(url).then(r => r.json());\n    if (node.next_key) {\n        const children = node.links.filter(l => l.rel === "child");\n        console.log(\`Key: \${node.next_key}, values:\`, children.map(c => c.title));\n    } else {\n        const items = node.links.filter(l => l.rel === "item");\n        console.log(\`Leaf: \${items.length} item(s)\`);\n    }\n}\nwalkCatalog("extremes-dt");`,
+            },
+        ],
+    };
+
+    // ── Render endpoints into the DOM ─────────────────────────────────────────
+    function renderEndpoints() {
+        renderGroup('ep-standard', ENDPOINTS.standard, false);
+        renderGroup('ep-ext',      ENDPOINTS.ext,      true);
+    }
+
+    function renderGroup(containerId, list, isExt) {
+        const container = document.getElementById(containerId);
+        list.forEach((ep, idx) => {
+            const id = `ep-${containerId}-${idx}`;
+            const card = document.createElement('div');
+            card.className = 'ep-card' + (isExt ? ' ext-card' : '');
+            card.id = id;
+
+            const pathHtml = ep.path.replace(/\{([^}]+)\}/g,
+                '<span class="ep-param">{$1}</span>');
+
+            card.innerHTML = `
+              <div class="ep-header" onclick="toggleEp('${id}')">
+                <span class="ep-method ${ep.method.toLowerCase()}">${ep.method}</span>
+                <span class="ep-path">${pathHtml}</span>
+                <span class="ep-desc" title="${ep.desc}">${truncate(ep.desc, 48)}</span>
+                <span class="ep-chevron">▼</span>
+              </div>
+              <div class="ep-body">
+                <div class="ep-tabs">
+                  <button class="ep-tab active" onclick="switchEpTab(event,'${id}','live')">▶ Try it</button>
+                  <button class="ep-tab"        onclick="switchEpTab(event,'${id}','curl')">curl</button>
+                  <button class="ep-tab"        onclick="switchEpTab(event,'${id}','py')">Python</button>
+                  <button class="ep-tab"        onclick="switchEpTab(event,'${id}','js')">JavaScript</button>
+                </div>
+                <div class="ep-pane active" id="${id}-live">
+                  <div class="ep-live-pane">
+                    <div class="ep-live-url-row">
+                      <input class="ep-live-url" id="${id}-url" value="${ep.defaultUrl}" spellcheck="false"
+                             onkeydown="if(event.key==='Enter')sendReq('${id}')">
+                      <button class="ep-send-btn" onclick="sendReq('${id}')">Send →</button>
+                    </div>
+                    <div class="ep-live-result" id="${id}-result">
+                      <div class="ep-live-placeholder">Response will appear here</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="ep-pane" id="${id}-curl">
+                  <div class="ep-snippet-wrap">
+                    <button class="ep-copy-btn" onclick="copySnippet(this)">Copy</button>
+                    <pre>${escHtml(ep.curl)}</pre>
+                  </div>
+                </div>
+                <div class="ep-pane" id="${id}-py">
+                  <div class="ep-snippet-wrap">
+                    <button class="ep-copy-btn" onclick="copySnippet(this)">Copy</button>
+                    <pre>${escHtml(ep.py)}</pre>
+                  </div>
+                </div>
+                <div class="ep-pane" id="${id}-js">
+                  <div class="ep-snippet-wrap">
+                    <button class="ep-copy-btn" onclick="copySnippet(this)">Copy</button>
+                    <pre>${escHtml(ep.js)}</pre>
+                  </div>
+                </div>
+              </div>`;
+
+            container.appendChild(card);
+        });
+    }
+
+    function toggleEp(id) {
+        const card = document.getElementById(id);
+        card.classList.toggle('open');
+    }
+
+    function switchEpTab(evt, cardId, pane) {
+        evt.stopPropagation();
+        const card = document.getElementById(cardId);
+        card.querySelectorAll('.ep-tab').forEach(t => t.classList.remove('active'));
+        evt.target.classList.add('active');
+        card.querySelectorAll('.ep-pane').forEach(p => p.classList.remove('active'));
+        card.querySelector(`#${cardId}-${pane}`).classList.add('active');
+    }
+
+    async function sendReq(cardId) {
+        const url   = document.getElementById(`${cardId}-url`).value.trim();
+        const result = document.getElementById(`${cardId}-result`);
+        result.innerHTML = '<div class="ep-live-placeholder">Fetching…</div>';
+
+        try {
+            const ep = findEp(cardId);
+            const isPost = ep && ep.method === 'POST';
+            const opts   = isPost
+                ? { method: 'POST', headers: {'Content-Type':'application/json'}, body: '{"limit":5}' }
+                : {};
+            const resp = await fetch(url, opts);
+            const text = await resp.text();
+
+            let pretty;
+            try {
+                pretty = JSON.stringify(JSON.parse(text), null, 2);
+            } catch {
+                pretty = text;
+            }
+
+            // Trim for display
+            const lines = pretty.split('\n');
+            const shown = lines.length > 120 ? lines.slice(0,120).join('\n') + '\n\n// … (truncated)' : pretty;
+            result.innerHTML = `<pre>${escHtml(shown)}</pre>`;
+        } catch (e) {
+            result.innerHTML = `<pre style="color:#f38ba8">${escHtml(String(e))}</pre>`;
+        }
+    }
+
+    // find the endpoint definition by card id
+    function findEp(cardId) {
+        const all = [...ENDPOINTS.standard, ...ENDPOINTS.ext];
+        const m = cardId.match(/-(\d+)$/);
+        if (!m) return null;
+        const idx = parseInt(m[1]);
+        if (cardId.startsWith('ep-ep-standard')) return ENDPOINTS.standard[idx];
+        if (cardId.startsWith('ep-ep-ext'))      return ENDPOINTS.ext[idx];
+        return null;
+    }
+
+    function copySnippet(btn) {
+        const code = btn.nextElementSibling.textContent;
+        navigator.clipboard.writeText(code).then(() => {
+            btn.textContent = 'Copied!';
+            setTimeout(() => btn.textContent = 'Copy', 1500);
+        });
+    }
+
+    function truncate(s, n) {
+        return s.length <= n ? s : s.slice(0, n - 1) + '…';
+    }
+
+    function escHtml(s) {
+        return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+    }
+
+    renderEndpoints();
+    </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/stac_server/templates/stac_browse.html b/stac_server/templates/stac_browse.html
new file mode 100644
index 0000000..338e704
--- /dev/null
+++ b/stac_server/templates/stac_browse.html
@@ -0,0 +1,863 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{{ title }} — STAC Browser</title>
+  <link rel="stylesheet" href="/static/styles.css" />
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+  <link rel="icon"
+    href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🗂️</text></svg>">
+  <style>
+    body { margin:0; font-family:var(--font-family,system-ui,sans-serif); background:var(--bg-secondary,#f4f6fb); color:var(--text-primary,#1a1a2e); }
+
+    /* header */
+    .sb-header {
+      background:linear-gradient(135deg,var(--primary-color,#2563eb) 0%,var(--primary-dark,#1d4ed8) 100%);
+      color:#fff; padding:.85rem 1.5rem;
+      display:flex; align-items:center; gap:1rem;
+      box-shadow:0 2px 8px rgba(0,0,0,.18);
+    }
+    .sb-header h1 { margin:0; font-size:1.25rem; font-weight:700; }
+    .sb-header a { color:rgba(255,255,255,.85); text-decoration:none; font-size:.88rem; }
+    .sb-header a:hover { color:#fff; text-decoration:underline; }
+
+    /* main */
+    .sb-main { max-width:1100px; margin:0 auto; padding:1.25rem 1.5rem; }
+
+    /* breadcrumb */
+    .breadcrumb {
+      display:flex; align-items:center; gap:.35rem; flex-wrap:wrap;
+      font-size:.88rem; margin-bottom:1.1rem;
+      background:var(--bg-primary,#fff); border-radius:8px;
+      padding:.5rem 1rem; box-shadow:0 1px 4px rgba(0,0,0,.07);
+    }
+    .breadcrumb .sep { color:var(--text-secondary,#aaa); }
+    .breadcrumb a { color:var(--primary-color,#2563eb); text-decoration:none; font-weight:500; }
+    .breadcrumb a:hover { text-decoration:underline; }
+    .breadcrumb .cur { color:var(--text-primary,#1a1a2e); font-weight:600; }
+
+    /* cards */
+    .card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.85rem; }
+    .card {
+      background:var(--bg-primary,#fff); border-radius:10px;
+      padding:1rem 1.15rem; box-shadow:0 1px 6px rgba(0,0,0,.08);
+      cursor:pointer; transition:box-shadow .15s,transform .15s;
+      border:1.5px solid transparent;
+    }
+    .card:hover { box-shadow:0 4px 16px rgba(37,99,235,.15); transform:translateY(-2px); border-color:var(--primary-color,#2563eb); }
+    .card-badge {
+      display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.03em;
+      background:var(--primary-color,#2563eb); color:#fff;
+      border-radius:5px; padding:.12rem .45rem; margin-bottom:.35rem; text-transform:uppercase;
+    }
+    .card-badge.leaf { background:#059669; }
+    .card-title { font-weight:700; font-size:.97rem; margin-bottom:.25rem; word-break:break-all; }
+    .card-meta { font-size:.8rem; color:var(--text-secondary,#666); line-height:1.5; }
+
+    /* key-level header */
+    .level-header {
+      background:var(--bg-primary,#fff); border-radius:10px;
+      padding:.85rem 1.15rem; margin-bottom:.9rem;
+      box-shadow:0 1px 4px rgba(0,0,0,.07);
+      display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
+    }
+    .level-key {
+      display:inline-flex; align-items:center; gap:.35rem;
+      background:var(--primary-color,#2563eb); color:#fff;
+      border-radius:7px; padding:.3rem .75rem; font-weight:700; font-size:.95rem;
+    }
+    .level-count { font-size:.85rem; color:var(--text-secondary,#555); }
+
+    /* item table */
+    .item-table-wrap { overflow-x:auto; }
+    table { width:100%; border-collapse:collapse; font-size:.85rem; background:var(--bg-primary,#fff); border-radius:10px; box-shadow:0 1px 6px rgba(0,0,0,.08); overflow:hidden; }
+    thead { background:var(--primary-color,#2563eb); color:#fff; }
+    th { padding:.55rem .8rem; text-align:left; font-weight:600; white-space:nowrap; }
+    td { padding:.45rem .8rem; border-bottom:1px solid var(--border-color,#e8eaf0); vertical-align:top; word-break:break-all; }
+    tr:last-child td { border-bottom:none; }
+    tr.data-row:hover td { background:var(--bg-secondary,#f4f6fb); cursor:pointer; }
+
+    /* item detail */
+    .item-detail { background:var(--bg-primary,#fff); border-radius:10px; padding:1.15rem; box-shadow:0 1px 6px rgba(0,0,0,.08); }
+    .prop-grid { display:grid; grid-template-columns:minmax(110px,auto) 1fr; gap:.25rem .7rem; font-size:.87rem; }
+    .prop-key { font-weight:600; color:var(--text-secondary,#555); padding:.18rem 0; }
+    .prop-val { padding:.18rem 0; word-break:break-all; }
+
+    /* tabs */
+    .tabs { display:flex; gap:0; margin-bottom:1rem; border-bottom:2px solid var(--border-color,#e0e4f0); }
+    .tab { padding:.45rem 1rem; font-size:.88rem; font-weight:500; cursor:pointer; border:none; background:none; color:var(--text-secondary,#666); border-bottom:2.5px solid transparent; margin-bottom:-2px; transition:color .15s,border-color .15s; }
+    .tab.active { color:var(--primary-color,#2563eb); border-bottom-color:var(--primary-color,#2563eb); }
+
+    /* collection summaries */
+    .chip-list { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.25rem; }
+    .chip { font-size:.75rem; background:var(--bg-secondary,#f0f2fa); border-radius:5px; padding:.18rem .5rem; color:var(--text-secondary,#555); border:1px solid var(--border-color,#e0e4f0); }
+
+    /* misc */
+    .section-title { font-size:1.1rem; font-weight:700; margin:0 0 .85rem; }
+    .empty  { color:var(--text-secondary,#888); font-style:italic; padding:2rem 0; text-align:center; }
+    .loading{ color:var(--text-secondary,#888); padding:2rem 0; text-align:center; }
+    .err    { background:#fef2f2; border:1.5px solid #fca5a5; color:#b91c1c; border-radius:8px; padding:.7rem 1rem; margin-bottom:1rem; }
+    .btn { background:var(--primary-color,#2563eb); color:#fff; border:none; border-radius:6px; padding:.4rem .9rem; cursor:pointer; font-size:.86rem; font-weight:500; transition:background .15s; }
+    .btn:hover { background:var(--primary-dark,#1d4ed8); }
+    .btn.sec { background:var(--bg-primary,#fff); color:var(--primary-color,#2563eb); border:1.5px solid var(--primary-color,#2563eb); }
+    .btn.sec:hover { background:var(--primary-color,#2563eb); color:#fff; }
+    .row { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.85rem; }
+
+    /* item two-column layout */
+    .item-2col {
+      display:grid;
+      grid-template-columns: 340px 1fr;
+      gap:.9rem;
+      align-items:start;
+    }
+    @media (max-width:780px) { .item-2col { grid-template-columns:1fr; } }
+    .item-left { position:sticky; top:.75rem; }
+    .map-wrap { border-radius:9px; overflow:hidden; border:1.5px solid var(--border-color,#e0e4f0); }
+    #item-map { height:260px; }
+
+    /* metadata sections */
+    .meta-section { background:var(--bg-primary,#fff); border-radius:10px; padding:1rem 1.1rem; box-shadow:0 1px 6px rgba(0,0,0,.08); margin-bottom:.85rem; }
+    .meta-section-title {
+      font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
+      color:var(--text-secondary,#888); margin-bottom:.65rem; padding-bottom:.4rem;
+      border-bottom:1.5px solid var(--border-color,#e8eaf0);
+    }
+    .meta-table { width:100%; border-collapse:collapse; font-size:.86rem; }
+    .meta-table td { padding:.42rem .5rem; border-bottom:1px solid var(--border-color,#f0f2f8); vertical-align:top; }
+    .meta-table tr:last-child td { border-bottom:none; }
+    .meta-table tr:hover td { background:var(--bg-secondary,#f4f6fb); }
+    .meta-key { font-weight:700; font-family:monospace; font-size:.82rem; color:var(--primary-color,#2563eb); white-space:nowrap; }
+    .meta-key-desc { font-size:.76rem; color:var(--text-secondary,#999); margin-top:.08rem; }
+    .meta-val-name { font-weight:600; }
+    .meta-val-raw { font-family:monospace; font-size:.82rem; color:var(--text-secondary,#555); }
+    .meta-val-desc { font-size:.76rem; color:var(--text-secondary,#777); margin-top:.08rem; }
+    .meta-val-url  { font-size:.76rem; margin-top:.08rem; }
+
+    /* quick-facts grid */
+    .quick-grid { display:grid; grid-template-columns:auto 1fr; gap:.2rem .6rem; font-size:.84rem; }
+    .qk { font-weight:600; color:var(--text-secondary,#666); white-space:nowrap; padding:.15rem 0; }
+    .qv { word-break:break-all; padding:.15rem 0; font-family:monospace; font-size:.82rem; }
+
+    /* collapsible details */
+    details.meta-section summary {
+      cursor:pointer; font-weight:600; font-size:.88rem; color:var(--text-primary,#1a1a2e);
+      user-select:none; list-style:none; display:flex; align-items:center; gap:.45rem;
+    }
+    details.meta-section summary::before { content:'▶'; font-size:.7rem; color:var(--text-secondary,#aaa); transition:transform .15s; }
+    details.meta-section[open] summary::before { transform:rotate(90deg); }
+    details.meta-section summary::-webkit-details-marker { display:none; }
+    details.meta-section .det-body { margin-top:.75rem; }
+
+    /* code blocks */
+    .code-block-wrap { position:relative; margin:.35rem 0; }
+    .code-block {
+      background:var(--bg-secondary,#f4f6fb); border:1.5px solid var(--border-color,#e0e4f0);
+      border-radius:7px; padding:.75rem 3rem .75rem .85rem;
+      font-size:.78rem; white-space:pre; overflow-x:auto; margin:0; line-height:1.55;
+      font-family:'SFMono-Regular',Consolas,monospace;
+    }
+    .copy-btn {
+      position:absolute; top:.45rem; right:.45rem;
+      background:var(--bg-primary,#fff); border:1px solid var(--border-color,#dde1ee);
+      border-radius:5px; padding:.18rem .55rem; font-size:.72rem; font-weight:600;
+      color:var(--text-secondary,#666); cursor:pointer; transition:background .12s;
+    }
+    .copy-btn:hover { background:var(--primary-color,#2563eb); color:#fff; border-color:transparent; }
+
+    /* asset rows */
+    .asset-row {
+      display:flex; align-items:flex-start; gap:.7rem;
+      padding:.5rem 0; border-bottom:1px solid var(--border-color,#f0f2f8);
+    }
+    .asset-row:last-child { border-bottom:none; }
+    .asset-title { font-weight:600; font-size:.87rem; }
+    .asset-type  { font-size:.74rem; color:var(--text-secondary,#888); font-family:monospace; margin-top:.1rem; }
+  </style>
+</head>
+<body>
+
+<header class="sb-header">
+  <h1>🗂️ {{ title }} — STAC Browser</h1>
+  <a href="/browse">← Qubed Browser</a>
+  <span style="flex:1"></span>
+  <a id="ext-link" href="#" target="_blank">External STAC viewer ↗</a>
+</header>
+
+<main class="sb-main">
+  <nav class="breadcrumb" id="bc"></nav>
+  <div id="view"></div>
+</main>
+
+<script>
+// ── Constants ─────────────────────────────────────────────────────────────
+const API = '/api/stac/v1';
+const CATALOG_BASE = (cid) => `${API}/collections/${cid}/catalog`;
+
+// ── State ─────────────────────────────────────────────────────────────────
+// view: 'collections' | 'collection' | 'catalog' | 'item'
+//   collections  → list of collection cards (clicking one goes to catalog)
+//   collection   → collection overview/detail (reachable via breadcrumb)
+//   catalog      → hierarchical drill-down (root or nested key=value path)
+//   item         → full item detail with map
+// catalogPath: "class=od/stream=oper" style string (empty = root catalog)
+let S = { view: 'collections', collectionId: null, catalogPath: '', itemId: null, itemData: null };
+
+// Set external viewer link
+document.getElementById('ext-link').href =
+  `https://radiantearth.github.io/stac-browser/#/external/${encodeURIComponent(location.origin + API + '/')}`;
+
+// ── API ───────────────────────────────────────────────────────────────────
+async function api(url) {
+  const r = await fetch(url);
+  if (!r.ok) throw new Error(`HTTP ${r.status}: ${await r.text()}`);
+  return r.json();
+}
+
+// ── Navigate ──────────────────────────────────────────────────────────────
+function go(patch) {
+  Object.assign(S, patch);
+  render();
+}
+
+// ── Breadcrumb ────────────────────────────────────────────────────────────
+function renderBreadcrumb() {
+  const bc = document.getElementById('bc');
+  const crumbs = [];
+
+  crumbs.push({ label: 'Collections', click: () => go({ view:'collections', collectionId:null, catalogPath:'', itemId:null }) });
+
+  if (S.collectionId) {
+    // collection name → collection detail (overview), catalog root → no extra crumb
+    const collClick = () => go({ view:'collection', catalogPath:'', itemId:null });
+    if (S.view === 'collection') {
+      crumbs.push({ label: S.collectionId, click: null });
+    } else {
+      crumbs.push({ label: S.collectionId, click: collClick });
+    }
+  }
+
+  if (S.view === 'catalog' || S.view === 'item') {
+    const parts = S.catalogPath ? S.catalogPath.split('/') : [];
+    let acc = '';
+    for (let i = 0; i < parts.length; i++) {
+      const seg = parts[i];
+      acc = acc ? acc + '/' + seg : seg;
+      const snap = acc;
+      const [k, v] = seg.split('=');
+      const isLast = i === parts.length - 1 && S.view !== 'item';
+      crumbs.push({ label: `${v}`, title: `${k} = ${v}`, click: isLast ? null : () => go({ view:'catalog', catalogPath: snap, itemId:null }) });
+    }
+  }
+
+  if (S.view === 'item' && S.itemId) {
+    crumbs.push({ label: S.itemId.slice(0, 16) + '…', click: null });
+  }
+
+  bc.innerHTML = crumbs.map((c, i) => {
+    const sep = i ? '<span class="sep">›</span>' : '';
+    const label = esc(c.label);
+    const tip   = c.title ? ` title="${esc(c.title)}"` : '';
+    if (i === crumbs.length - 1 || !c.click)
+      return `${sep}<span class="cur"${tip}>${label}</span>`;
+    const fn = c.click.toString();
+    return `${sep}<a href="#"${tip} onclick="(${fn})();return false">${label}</a>`;
+  }).join(' ');
+}
+
+// ── Main render ───────────────────────────────────────────────────────────
+async function render() {
+  renderBreadcrumb();
+  const el = document.getElementById('view');
+  el.innerHTML = '<p class="loading">Loading…</p>';
+  try {
+    if (S.view === 'collections') await renderCollections(el);
+    else if (S.view === 'collection') await renderCollection(el);
+    else if (S.view === 'catalog')   await renderCatalog(el);
+    else if (S.view === 'item')      await renderItem(el);
+  } catch (e) {
+    el.innerHTML = `<div class="err">⚠️ ${esc(e.message)}</div>`;
+  }
+}
+
+// ── Collections list ──────────────────────────────────────────────────────
+async function renderCollections(el) {
+  const data = await api(`${API}/collections`);
+  const cols = data.collections || [];
+  if (!cols.length) { el.innerHTML = '<p class="empty">No collections found.</p>'; return; }
+
+  el.innerHTML = `<p class="section-title">Collections (${cols.length})</p><div class="card-grid" id="cg"></div>`;
+  for (const c of cols) {
+    const interval = c.extent?.temporal?.interval?.[0] || [];
+    const d0 = interval[0] ? interval[0].slice(0,10) : '—';
+    const d1 = interval[1] ? interval[1].slice(0,10) : '—';
+    const card = mkCard('Collection', c.title || c.id, c.description || '', `📅 ${d0} → ${d1}`);
+    card.onclick = () => go({ view:'catalog', collectionId: c.id, catalogPath:'', itemId:null });
+    el.querySelector('#cg').appendChild(card);
+  }
+}
+
+// ── Collection detail ─────────────────────────────────────────────────────
+let _collItems = null; // cached items for current collection
+let _collItemsPage = 0;
+const COLL_PAGE = 50;
+
+async function renderCollection(el) {
+  const cid = S.collectionId;
+  _collItems = null;
+  _collItemsPage = 0;
+  const c = await api(`${API}/collections/${cid}`);
+  const interval = c.extent?.temporal?.interval?.[0] || [];
+  const d0 = interval[0] ? interval[0].slice(0,10) : '—';
+  const d1 = interval[1] ? interval[1].slice(0,10) : '—';
+
+  const summHtml = Object.entries(c.summaries || {}).map(([k, vals]) => {
+    const chips = vals.slice(0,20).map(v => `<span class="chip">${esc(String(v))}</span>`).join('');
+    const more = vals.length > 20 ? `<span class="chip">+${vals.length-20} more</span>` : '';
+    return `<div style="margin-bottom:.5rem"><strong style="font-size:.82rem">${esc(k)}</strong><div class="chip-list">${chips}${more}</div></div>`;
+  }).join('');
+
+  el.innerHTML = `
+    <div style="display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.9rem">
+      <div style="flex:1">
+        <div style="font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary,#888);margin-bottom:.15rem">Collection</div>
+        <h2 style="margin:0;font-size:1.1rem;font-weight:700">${esc(c.title||c.id)}</h2>
+      </div>
+    </div>
+
+    <div class="tabs" style="margin-bottom:.9rem">
+      <button class="tab active" id="ctab-ov"   onclick="showCollTab('ov')">Overview</button>
+      <button class="tab"        id="ctab-items" onclick="showCollTab('items')">Items</button>
+      <button class="tab"        id="ctab-hier"  onclick="showCollTab('hier')">Browse hierarchy</button>
+    </div>
+
+    <!-- Overview tab -->
+    <div id="ctab-body-ov">
+      <div class="meta-section">
+        <div class="meta-section-title">Description</div>
+        <p style="margin:0;font-size:.88rem;color:var(--text-secondary,#555)">${esc(c.description||'No description.')}</p>
+        <div style="display:grid;grid-template-columns:auto 1fr;gap:.2rem .6rem;font-size:.84rem;margin-top:.65rem">
+          <span style="font-weight:600;color:var(--text-secondary)">Temporal</span><span>${d0} → ${d1}</span>
+          <span style="font-weight:600;color:var(--text-secondary)">License</span><span>${esc(c.license||'—')}</span>
+        </div>
+      </div>
+      ${summHtml ? `<div class="meta-section"><div class="meta-section-title">Dimension Summaries</div>${summHtml}</div>` : ''}
+    </div>
+
+    <!-- Items tab -->
+    <div id="ctab-body-items" style="display:none">
+      <div id="coll-items-wrap"><p class="loading">Loading items…</p></div>
+    </div>
+
+    <!-- Hierarchy tab -->
+    <div id="ctab-body-hier" style="display:none">
+      <div class="meta-section" style="text-align:center;padding:1.5rem">
+        <p style="margin:0 0 .75rem;font-size:.88rem;color:var(--text-secondary,#666)">
+          Drill down through the metadata hierarchy (class → stream → type → …) to browse items by their dimension values.
+        </p>
+        <button class="btn" onclick="go({view:'catalog',catalogPath:'',itemId:null})">
+          Browse metadata hierarchy →
+        </button>
+      </div>
+    </div>`;
+
+  // pre-load items in background so the tab is snappy
+  _loadCollItems(cid);
+}
+
+async function _loadCollItems(cid) {
+  try {
+    const data = await api(`${API}/collections/${cid}/items?limit=${COLL_PAGE}&offset=0`);
+    _collItems = data;
+    _renderCollItemsTable();
+  } catch(e) {
+    const w = document.getElementById('coll-items-wrap');
+    if (w) w.innerHTML = `<div class="err">⚠️ ${esc(e.message)}</div>`;
+  }
+}
+
+function _renderCollItemsTable() {
+  const wrap = document.getElementById('coll-items-wrap');
+  if (!wrap) return;
+  if (!_collItems) { wrap.innerHTML = '<p class="loading">Loading…</p>'; return; }
+  const features = _collItems.features || [];
+  const total    = _collItems.numberMatched || features.length;
+  if (!features.length) { wrap.innerHTML = '<p class="empty">No items found.</p>'; return; }
+
+  // Collect all property keys (prioritised)
+  const priority = ['datetime','date','time','type','stream','class','param','levtype','step'];
+  const keySet = new Set();
+  features.forEach(f => Object.keys(f.properties||{}).forEach(k => keySet.add(k)));
+  const keys = [...priority.filter(k => keySet.has(k)),
+                ...[...keySet].filter(k => !priority.includes(k) && k !== 'datetime')];
+
+  const offset = _collItems._offset || 0;
+  const prevBtn = offset > 0
+    ? `<button class="btn sec" style="font-size:.8rem;padding:.28rem .65rem" onclick="_collItemsPrev()">← Prev</button>` : '';
+  const nextBtn = offset + features.length < total
+    ? `<button class="btn" style="font-size:.8rem;padding:.28rem .65rem" onclick="_collItemsNext()">Next →</button>` : '';
+
+  wrap.innerHTML = `
+    <div style="display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem">
+      <span style="font-size:.84rem;color:var(--text-secondary,#666)">${offset+1}–${offset+features.length} of ${total} items</span>
+      <span style="flex:1"></span>
+      ${prevBtn}${nextBtn}
+    </div>
+    <div class="item-table-wrap">
+      <table>
+        <thead><tr><th>#</th>${keys.map(k=>`<th>${esc(k)}</th>`).join('')}</tr></thead>
+        <tbody id="coll-items-tb"></tbody>
+      </table>
+    </div>`;
+
+  const tb = wrap.querySelector('#coll-items-tb');
+  features.forEach((f, i) => {
+    const props = f.properties || {};
+    const iid   = f.id;
+    const prebuiltItem = {
+      type: 'Feature', stac_version: '1.0.0',
+      id: iid, collection: S.collectionId,
+      geometry: null, bbox: null,
+      properties: props, links: f.links || [], assets: f.assets || {},
+    };
+    const tr = document.createElement('tr');
+    tr.className = 'data-row';
+    tr.innerHTML = `<td>${offset+i+1}</td>` +
+      keys.map(k => {
+        const v = props[k];
+        return `<td>${v != null ? esc(String(v)) : '<span style="color:#ccc">—</span>'}</td>`;
+      }).join('');
+    tr.onclick = () => go({ view:'item', itemId: iid, itemData: prebuiltItem });
+    tb.appendChild(tr);
+  });
+}
+
+async function _collItemsPrev() {
+  const offset = Math.max(0, (_collItems?._offset || 0) - COLL_PAGE);
+  await _collLoadPage(offset);
+}
+async function _collItemsNext() {
+  const offset = (_collItems?._offset || 0) + COLL_PAGE;
+  await _collLoadPage(offset);
+}
+async function _collLoadPage(offset) {
+  const wrap = document.getElementById('coll-items-wrap');
+  if (wrap) wrap.innerHTML = '<p class="loading">Loading…</p>';
+  const data = await api(`${API}/collections/${S.collectionId}/items?limit=${COLL_PAGE}&offset=${offset}`);
+  data._offset = offset;
+  _collItems = data;
+  _renderCollItemsTable();
+}
+
+function showCollTab(name) {
+  ['ov','items','hier'].forEach(n => {
+    document.getElementById(`ctab-${n}`)?.classList.toggle('active', n === name);
+    const b = document.getElementById(`ctab-body-${n}`);
+    if (b) b.style.display = n === name ? '' : 'none';
+  });
+  // kick render if items tab selected and already loaded
+  if (name === 'items') _renderCollItemsTable();
+}
+
+// ── Catalog node ──────────────────────────────────────────────────────────
+let _collCache = {}; // collection metadata cache keyed by id
+
+async function _getCollection(cid) {
+  if (!_collCache[cid]) _collCache[cid] = api(`${API}/collections/${cid}`);
+  return _collCache[cid];
+}
+
+async function renderCatalog(el) {
+  const cid = S.collectionId;
+  const url = S.catalogPath
+    ? `${CATALOG_BASE(cid)}/${S.catalogPath}`
+    : CATALOG_BASE(cid);
+
+  // fetch catalog node + (at root) collection info in parallel
+  const isRoot = !S.catalogPath;
+  const [node, coll] = await Promise.all([api(url), isRoot ? _getCollection(cid) : Promise.resolve(null)]);
+
+  el.innerHTML = ''; // clear the "Loading…" placeholder
+
+  // ── collection info banner at root level ──────────────────────────────
+  if (isRoot && coll) {
+    const interval = coll.extent?.temporal?.interval?.[0] || [];
+    const d0 = interval[0] ? interval[0].slice(0,10) : '—';
+    const d1 = interval[1] ? interval[1].slice(0,10) : '—';
+    const summKeys = Object.keys(coll.summaries || {});
+    const chips = summKeys.slice(0,6).map(k => {
+      const vals = (coll.summaries[k] || []);
+      return `<span class="chip" title="${esc(k)}">${esc(k)}: ${vals.length > 3 ? vals.slice(0,3).map(v=>esc(String(v))).join(', ')+' +'+( vals.length-3)+' more' : vals.map(v=>esc(String(v))).join(', ')}</span>`;
+    }).join('');
+    const infoHtml = `
+      <details class="meta-section coll-info-banner">
+        <summary>
+          <span class="card-badge" style="margin-right:.45rem">Collection</span>
+          <strong>${esc(coll.title||coll.id)}</strong>
+          <span style="font-size:.8rem;color:var(--text-secondary,#888);font-weight:400;margin-left:.6rem">${esc(coll.description||'')}</span>
+        </summary>
+        <div class="det-body" style="font-size:.83rem;color:var(--text-secondary,#666)">
+          <span>📅 ${d0} → ${d1}</span>
+          ${chips ? `<div class="chip-list" style="margin-top:.35rem">${chips}</div>` : ''}
+          <a href="#" onclick="go({view:'collection',catalogPath:'',itemId:null});return false" style="display:inline-block;margin-top:.5rem;font-size:.8rem;color:var(--primary-color,#2563eb)">View full collection details →</a>
+        </div>
+      </details>`;
+    el.insertAdjacentHTML('beforeend', infoHtml);
+  }
+
+  const childLinks = (node.links || []).filter(l => l.rel === 'child');
+  const itemLinks  = (node.links || []).filter(l => l.rel === 'item');
+  const nextKey = node.next_key;
+
+  // content goes into a div that sits below the (already-inserted) banner
+  const body = document.createElement('div');
+  el.appendChild(body);
+
+  if (childLinks.length > 0) {
+    // ── Internal node: show child catalog cards ──
+    body.innerHTML = `
+      <div class="level-header">
+        <span>Select a value for</span>
+        <span class="level-key">${esc(nextKey || '?')}</span>
+        <span class="level-count">${childLinks.length} option${childLinks.length !== 1 ? 's' : ''}</span>
+      </div>
+      <div class="card-grid" id="cg"></div>`;
+
+    for (const lnk of childLinks) {
+      const val    = lnk['stac:value'] ?? lnk.title ?? '';
+      const key    = lnk['stac:key']   ?? nextKey ?? '';
+      const rawVal = lnk['stac:value'] ?? val;
+      const desc   = lnk.title?.replace(`${key} = ${rawVal}`, '').replace(/^\s*\(\s*/, '').replace(/\s*\)\s*$/, '') || '';
+      const childPath = S.catalogPath ? S.catalogPath + '/' + key + '=' + rawVal : key + '=' + rawVal;
+      const card = mkCard('Value', esc(rawVal), esc(desc), `🔑 ${esc(key)}`);
+      card.onclick = () => go({ view:'catalog', catalogPath: childPath });
+      body.querySelector('#cg').appendChild(card);
+    }
+
+  } else if (itemLinks.length > 0) {
+    // ── Leaf node: show items as a table ──
+    const allKeys = new Set();
+    itemLinks.forEach(l => Object.keys(l['stac:properties'] || {}).forEach(k => allKeys.add(k)));
+    const priority = ['datetime','date','time','type','stream','param','levtype','step','number'];
+    const keys = [...priority.filter(k => allKeys.has(k)), ...[...allKeys].filter(k => !priority.includes(k) && k !== 'datetime')];
+
+    body.innerHTML = `
+      <div class="level-header">
+        <span class="card-badge leaf">Leaf</span>
+        <span style="font-weight:600">${itemLinks.length} item${itemLinks.length !== 1 ? 's' : ''}</span>
+      </div>
+      <div class="item-table-wrap">
+        <table>
+          <thead><tr><th>#</th>${keys.map(k=>`<th>${esc(k)}</th>`).join('')}</tr></thead>
+          <tbody id="tb"></tbody>
+        </table>
+      </div>`;
+
+    const tb = body.querySelector('#tb');
+    itemLinks.forEach((lnk, i) => {
+      const props = lnk['stac:properties'] || {};
+      const iid   = lnk.href.split('/').pop();
+      // pre-build a lightweight STAC item from the catalog link data
+      const prebuiltItem = {
+        type: 'Feature', stac_version: '1.0.0',
+        id: iid, collection: S.collectionId,
+        geometry: null, bbox: null,
+        properties: props, links: [], assets: {},
+      };
+      const tr = document.createElement('tr');
+      tr.className = 'data-row';
+      tr.innerHTML = `<td>${i+1}</td>` +
+        keys.map(k => {
+          const v = props[k];
+          return `<td>${v != null ? esc(String(v)) : '<span style="color:#ccc">—</span>'}</td>`;
+        }).join('');
+      tr.onclick = () => go({ view:'item', itemId: iid, itemData: prebuiltItem });
+      tb.appendChild(tr);
+    });
+
+  } else {
+    body.innerHTML = '<p class="empty">No children or items at this level.</p>';
+  }
+}
+
+// ── Language cache ────────────────────────────────────────────────────────
+let _lang = null;
+async function getLang() {
+  if (_lang) return _lang;
+  try { _lang = await api('/api/v2/language'); } catch(e) { _lang = {}; }
+  return _lang;
+}
+
+let _currentItem = null; // kept for debug/console access
+
+// ── Item detail ───────────────────────────────────────────────────────────
+async function renderItem(el) {
+  const cid = S.collectionId;
+  const iid = S.itemId;
+
+  // Use pre-built item from catalog state immediately (no round-trip needed).
+  // Fetch full item + language in parallel in the background to enrich display.
+  let item = S.itemData || null;
+  let lang = _lang || {};
+
+  if (!item) {
+    // Fallback: fetch from server (slower path, e.g. direct URL navigation)
+    [item, lang] = await Promise.all([
+      api(`${API}/collections/${cid}/items/${iid}`),
+      getLang(),
+    ]);
+  } else {
+    // Render immediately with whatever language we have cached,
+    // then re-render once language finishes loading.
+    getLang().then(l => {
+      lang = l;
+      _currentItem = item;
+      _renderItemHtml(el, item, lang, cid, iid);
+    });
+  }
+
+  _currentItem = item;
+  _renderItemHtml(el, item, lang, cid, iid);
+}
+
+function _renderItemHtml(el, item, lang, cid, iid) {
+  const props = item.properties || {};
+
+  // ── Metadata row builder ──────────────────────────────────────────────
+  function metaRow(k, v) {
+    const langKey = lang[k] || {};
+    const keyDesc = langKey.description || '';
+    const valStr  = v != null ? String(v) : 'null';
+    const valInfo = (langKey.values || {})[valStr] || {};
+    const valName = valInfo.name || '';
+    const valDesc = valInfo.description || '';
+    const valUrl  = valInfo.url || '';
+    const rawSpan  = `<span class="meta-val-raw">${esc(valStr)}</span>`;
+    const nameSpan = valName ? `<span class="meta-val-name">${esc(valName)}</span>&ensp;${rawSpan}` : rawSpan;
+    const descDiv  = valDesc ? `<div class="meta-val-desc">${esc(valDesc)}</div>` : '';
+    const urlDiv   = valUrl  ? `<div class="meta-val-url"><a href="${esc(valUrl)}" target="_blank" style="color:var(--primary-color,#2563eb);font-size:.76rem">${esc(valUrl)}</a></div>` : '';
+    return `<tr>
+      <td style="width:38%;padding-right:.9rem">
+        <div class="meta-key">${esc(k)}</div>
+        ${keyDesc ? `<div class="meta-key-desc">${esc(keyDesc)}</div>` : ''}
+      </td>
+      <td>${nameSpan}${descDiv}${urlDiv}</td>
+    </tr>`;
+  }
+
+  // All properties in a consistent order: priority keys first, then the rest
+  const PRIORITY_KEYS = ['datetime','date','time','class','stream','type','dataset','expver',
+                         'activity','experiment','generation','model','realization'];
+  const orderedEntries = [
+    ...PRIORITY_KEYS.filter(k => props[k] != null).map(k => [k, props[k]]),
+    ...Object.entries(props).filter(([k]) => !PRIORITY_KEYS.includes(k)),
+  ];
+  const allMetaRows = orderedEntries.map(([k,v]) => metaRow(k, v)).join('');
+
+  // ── Spatial extent ────────────────────────────────────────────────────
+  const bbox = item.bbox || [-180, -90, 180, 90];
+  const isGlobal = bbox[0]===-180 && bbox[1]===-90 && bbox[2]===180 && bbox[3]===90;
+  const bboxLabel = isGlobal
+    ? 'Global (−180 → 180°, −90 → 90°)'
+    : `${bbox[0]}°, ${bbox[1]}° → ${bbox[2]}°, ${bbox[3]}°`;
+
+  // ── Code snippets ─────────────────────────────────────────────────────
+  // MARS request — all props except STAC-internal datetime
+  const marsProps = Object.entries(props).filter(([k]) => k !== 'datetime');
+  const marsLines = marsProps.map(([k,v]) => `  ${k}=${v}`).join(',\n');
+  const marsSnippet = `retrieve,\n${marsLines},\n  target = "output.grib"`;
+
+  // Python earthkit.data
+  const marsDict = Object.fromEntries(marsProps);
+  const pyDictStr = '{\n' + Object.entries(marsDict).map(([k,v]) => `    "${k}": "${v}"`).join(',\n') + '\n}';
+  const earthkitSnippet =
+`import earthkit.data as ekd
+
+request = ${pyDictStr}
+
+ds = ekd.from_source("mars", request)
+print(ds.to_pandas())`;
+
+  // STAC API (Python requests)
+  const stacUrl = `${location.origin}/api/stac/v1/collections/${cid}/items/${iid}`;
+  const stacSnippet =
+`import requests
+
+# Fetch item metadata from the STAC API
+resp = requests.get("${stacUrl}")
+item = resp.json()
+
+# Properties contain the MARS request parameters
+props = item["properties"]
+print(props)
+
+# You can then build a data request:
+import earthkit.data as ekd
+ds = ekd.from_source("mars", {k: v for k, v in props.items() if k != "datetime"})`;
+
+  // STAC + curl one-liner
+  const curlSnippet = `curl -s "${stacUrl}" | python3 -m json.tool`;
+
+  // ── Assets (STAC assets dict, may be empty) ───────────────────────────
+  const assets = item.assets || {};
+  const assetKeys = Object.keys(assets);
+  const assetsBlock = assetKeys.length
+    ? assetKeys.map(ak => {
+        const a = assets[ak];
+        return `<div class="asset-row">
+          <div>
+            <div class="asset-title">${esc(a.title||ak)}</div>
+            ${a.type  ? `<div class="asset-type">${esc(a.type)}</div>` : ''}
+            ${(a.roles||[]).length ? `<div class="asset-type">${esc(a.roles.join(', '))}</div>` : ''}
+          </div>
+          <a href="${esc(a.href||'#')}" target="_blank" class="btn" style="font-size:.78rem;padding:.28rem .65rem;flex-shrink:0">↓ Download</a>
+        </div>`;
+      }).join('')
+    : '';
+
+  el.innerHTML = `
+    <div style="display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.9rem">
+      <div style="flex:1;min-width:0">
+        <div style="font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary,#888);margin-bottom:.12rem">STAC Item · ${esc(cid)}</div>
+        <h2 style="margin:0;font-size:.95rem;font-weight:700;word-break:break-all;font-family:monospace">${esc(iid)}</h2>
+      </div>
+      <button class="btn sec" style="font-size:.8rem;padding:.3rem .7rem;flex-shrink:0"
+        onclick="go({view:'catalog'})">← Back</button>
+    </div>
+
+    <div class="item-2col">
+
+      <!-- ─── Left: map only ─── -->
+      <div class="item-left">
+        <div class="meta-section" style="padding:.75rem">
+          <div class="meta-section-title">Spatial Coverage</div>
+          <div class="map-wrap"><div id="item-map"></div></div>
+          <div style="font-size:.75rem;color:var(--text-secondary,#888);margin-top:.4rem;text-align:center">${esc(bboxLabel)}</div>
+        </div>
+      </div>
+
+      <!-- ─── Right: tabs ─── -->
+      <div class="item-right">
+        <div class="tabs" style="margin-bottom:0;border-radius:10px 10px 0 0;background:var(--bg-primary,#fff);padding:.4rem .7rem 0;box-shadow:0 1px 0 var(--border-color,#e0e4f0)">
+          <button class="tab active" onclick="swItemTab(this,'itm')">Metadata</button>
+          <button class="tab" onclick="swItemTab(this,'iacc')">Access</button>
+          <button class="tab" onclick="swItemTab(this,'ijson')">Raw JSON</button>
+        </div>
+
+        <!-- Metadata tab -->
+        <div id="itm" class="meta-section" style="border-radius:0 0 10px 10px;margin-top:0;box-shadow:0 2px 8px rgba(0,0,0,.08)">
+          ${allMetaRows
+            ? `<table class="meta-table"><tbody>${allMetaRows}</tbody></table>`
+            : `<p class="empty" style="margin:0">No properties.</p>`}
+        </div>
+
+        <!-- Access tab -->
+        <div id="iacc" class="meta-section" style="display:none;border-radius:0 0 10px 10px;margin-top:0;box-shadow:0 2px 8px rgba(0,0,0,.08)">
+          ${assetsBlock ? `
+          <div class="meta-section-title">📦 Assets</div>
+          ${assetsBlock}
+          <div style="margin-bottom:1rem"></div>` : ''}
+
+          <div class="meta-section-title">🌐 MARS Request</div>
+          <div class="code-block-wrap">
+            <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+            <pre class="code-block"><code>${esc(marsSnippet)}</code></pre>
+          </div>
+
+          <div class="meta-section-title" style="margin-top:1rem">🐍 Python — earthkit.data</div>
+          <div class="code-block-wrap">
+            <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+            <pre class="code-block"><code>${esc(earthkitSnippet)}</code></pre>
+          </div>
+
+          <div class="meta-section-title" style="margin-top:1rem">🐍 Python — STAC API</div>
+          <div class="code-block-wrap">
+            <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+            <pre class="code-block"><code>${esc(stacSnippet)}</code></pre>
+          </div>
+
+          <div class="meta-section-title" style="margin-top:1rem">💻 curl</div>
+          <div class="code-block-wrap">
+            <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+            <pre class="code-block"><code>${esc(curlSnippet)}</code></pre>
+          </div>
+        </div>
+
+        <!-- Raw JSON tab -->
+        <div id="ijson" class="meta-section" style="display:none;border-radius:0 0 10px 10px;margin-top:0;box-shadow:0 2px 8px rgba(0,0,0,.08)">
+          <div class="code-block-wrap">
+            <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+            <pre class="code-block"><code>${esc(JSON.stringify(item,null,2))}</code></pre>
+          </div>
+        </div>
+      </div>
+
+    </div>`;
+
+  initMap(item);
+}
+
+function swItemTab(btn, tid) {
+  btn.closest('.tabs').querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+  btn.classList.add('active');
+  ['itm','iacc','ijson'].forEach(id => {
+    const e = document.getElementById(id);
+    if (e) e.style.display = id === tid ? '' : 'none';
+  });
+}
+
+function copyCode(btn) {
+  const code = btn.nextElementSibling.textContent;
+  navigator.clipboard.writeText(code).then(() => {
+    btn.textContent = 'Copied!';
+    setTimeout(() => btn.textContent = 'Copy', 1500);
+  });
+}
+
+// ── Leaflet map ───────────────────────────────────────────────────────────
+let _map = null;
+function initMap(item) {
+  // Defer one tick so the div is visible before Leaflet measures it
+  setTimeout(() => {
+    const bbox = item.bbox || [-180, -90, 180, 90];
+    const container = document.getElementById('item-map');
+    if (!container) return;
+    if (_map) { _map.remove(); _map = null; }
+    _map = L.map('item-map', { zoomControl: true, scrollWheelZoom: false });
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+      maxZoom: 8,
+    }).addTo(_map);
+    const bounds = [[bbox[1], bbox[0]], [bbox[3], bbox[2]]];
+    L.rectangle(bounds, {
+      color: '#2563eb', weight: 2,
+      fillColor: '#2563eb', fillOpacity: 0.12,
+    }).addTo(_map);
+    _map.fitBounds(bounds, { padding: [20, 20] });
+  }, 30);
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────
+function esc(s) {
+  return String(s)
+    .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
+    .replace(/"/g,'&quot;').replace(/'/g,'&#39;');
+}
+
+function mkCard(badge, title, desc, meta) {
+  const d = document.createElement('div');
+  d.className = 'card';
+  d.innerHTML = `
+    <div class="card-badge">${badge}</div>
+    <div class="card-title">${title}</div>
+    ${desc ? `<div class="card-meta">${desc}</div>` : ''}
+    ${meta ? `<div class="card-meta" style="margin-top:.3rem">${meta}</div>` : ''}`;
+  return d;
+}
+
+// ── Boot ──────────────────────────────────────────────────────────────────
+render();
+</script>
+</body>
+</html>