Add elevation-tinted terrain (hypsometric color-relief layer)

Reuses the same raster-dem source the hillshade toggle already added
— a color-relief layer tints by elevation band (green valleys through
brown mid-slopes to pale grey peaks, in this app's own palette) under
the hillshade layer, so one toggle gives the combined shaded-relief
look instead of two separate layers.

public/js/map.js

@@ -306,6 +306,22 @@ class LayerToggleControl {
 }
 
 const HILLSHADE_ID = "hillshade-dem";
+const COLOR_RELIEF_ID = "elevation-tint";
+// Hypsometric tint reusing this app's own palette (wood_a's green at
+// valley floor, the road casing brown through the mid-slopes) rather than
+// a generic rainbow ramp, so it reads as part of the same map rather than
+// a bolted-on overlay. Stops picked for Central European terrain — the
+// Tatras top out around 2600m — not a general-purpose world ramp.
+const ELEVATION_COLOR_RAMP = [
+  "interpolate",
+  ["linear"],
+  ["raster-value"],
+  0, "#c3e8ab",
+  400, "#dcd08f",
+  900, "#c9a66b",
+  1600, "#a89a86",
+  2600, "#f9f6ef",
+];
 // Public, unauthenticated, no API key — the same open (SRTM/ArcticDEM-derived)
 // elevation tiles OpenStreetMap's own hillshade layer and many other free
 // tools use. Only reachable online; while the offline basemap is active this
@@ -363,11 +379,22 @@ class HillshadeControl {
           attribution: "Terrain tiles: Mapzen, SRTM, ArcticDEM",
         };
     this._map.addSource(HILLSHADE_ID, source);
+    // Elevation tint under, hillshade on top: the tint sets the base color
+    // per elevation band, hillshade multiplies slope-shading over it — the
+    // combined "characteristic relief look" the TODO asked for, not two
+    // independent layers.
+    this._map.addLayer({
+      id: COLOR_RELIEF_ID,
+      type: "color-relief",
+      source: HILLSHADE_ID,
+      paint: { "color-relief-color": ELEVATION_COLOR_RAMP, "color-relief-opacity": 0.7 },
+    });
     this._map.addLayer({ id: HILLSHADE_ID, type: "hillshade", source: HILLSHADE_ID, paint: { "hillshade-exaggeration": 0.4 } });
   }
 
   _removeLayer() {
     if (this._map.getLayer(HILLSHADE_ID)) this._map.removeLayer(HILLSHADE_ID);
+    if (this._map.getLayer(COLOR_RELIEF_ID)) this._map.removeLayer(COLOR_RELIEF_ID);
     if (this._map.getSource(HILLSHADE_ID)) this._map.removeSource(HILLSHADE_ID);
   }
 }