Context sections: an Iconoir icon beside each heading

@@ -2,5 +2,5 @@
 // Full write-up for one country. Rendered on its own page, and fetched into the
 // drawer on the home page — so there is a single template for both views.
-import { useAges, SEGMENTS, REC_LABEL, REC_HELP, MED_LABEL, MED_HELP, countries, changes, segAvg, segmentPoints, segmentMax, subunitsOf, formatDate } from "../lib/countries.js";
+import { CONTEXT_ICONS, useAges, SEGMENTS, REC_LABEL, REC_HELP, MED_LABEL, MED_HELP, countries, changes, segAvg, segmentPoints, segmentMax, subunitsOf, formatDate } from "../lib/countries.js";
 import { TIERS, tierOf, tierColor, tierIndex } from "../lib/tiers.js";
 import { unitMap } from "../lib/unit-map.js";
@@ -22,4 +22,5 @@ import { PLANTING_STATUS, STATUS_SECTIONS, PLANTING_TRADE } from "../lib/segment
 import { TREATMENT, punishmentText, punishmentExtra } from "../lib/penalties.js";
 import { viewByMetric } from "../lib/map-views.js";
+import { Icon } from "astro-icon/components";
 import { answersFor } from "../lib/answers.js";
 import CultureList from "./CultureList.astro";
@@ -376,5 +377,5 @@ const culture = cultureOf(c);
         {d.context.filter(Boolean).map((x) => (
           <div class="segrow" data-seg={`ctx-${x.key}`} id={`seg-ctx-${x.key}`}>
-            <div class="segrow-top"><span>{x.name === "Death penalty" ? "☠️ " : ""}{x.name}<SourceTip label="What this covers" inline>{x.help}</SourceTip></span></div>
+            <div class="segrow-top"><span>{CONTEXT_ICONS[x.key] && <Icon name={CONTEXT_ICONS[x.key]} class="ctx-icon" aria-hidden="true" />}{x.name}<SourceTip label="What this covers" inline>{x.help}</SourceTip></span></div>
             {x.key === "recreational" && (
               <div class="d-chips"><a class={`chip s-${v.rec}`} href={mapOf("status:rec")} title={onMap(REC_HELP[v.rec])}>Recreational: {REC_LABEL[v.rec]}</a></div>
@@ -408,5 +409,5 @@ const culture = cultureOf(c);
         {travel && (
           <div class="segrow">
-            <div class="segrow-top"><span>🛂 Crossing the border</span></div>
+            <div class="segrow-top"><span><Icon name={CONTEXT_ICONS.border} class="ctx-icon" aria-hidden="true" />Crossing the border</span></div>
             {travel.map((line, k) => <p class="ctx">{line}{k === travel.length - 1 && <Cited parts={[{ refs: [incbRef] }]} />}</p>)}
             <p class="ctx ctx-general">General guidance that applies to almost every country, not a check of {c.name}'s customs rules.</p>

@@ -53,4 +53,12 @@ export const CONTEXT = [
 export const CONTEXT_NAMES = CONTEXT.map(([, name]) => name);
 export const CONTEXT_HELP = Object.fromEntries(CONTEXT.map(([key, , help]) => [key, help]));
+// the Iconoir icon shown beside each section's heading; the death penalty and medical match the history categories
+export const CONTEXT_ICONS = {
+  death_penalty: "iconoir:warning-triangle", recreational: "iconoir:peace-hand", medical: "iconoir:pharmacy-cross-circle",
+  clubs: "iconoir:community", planting: "iconoir:flower", products: "iconoir:package", hemp: "iconoir:leaf",
+  production: "iconoir:industry", black_market: "iconoir:cash", visitors: "iconoir:airplane", driving: "iconoir:car",
+  arrests: "iconoir:lock", consequences: "iconoir:user-xmark", culture: "iconoir:palette", genetics: "iconoir:dna",
+  research: "iconoir:flask", spotlights: "iconoir:sparks", border: "iconoir:suitcase",
+};
 
 // File values → short codes used in class names and filters.

@@ -751,4 +751,6 @@ a.chip:hover { border-color: var(--muted); color: var(--text); }
   .pen td:nth-child(1) { font-weight: 500; }
 }
+/* the icon beside a context section's heading (CONTEXT_ICONS) */
+.ctx-icon { width: .8em; height: .8em; margin-right: 10px; vertical-align: -1px; color: var(--muted); }
 /* one country spotlight inside its section */
 .ctx-spot + .ctx-spot { margin-top: 14px; }